学成在线模板管理-新增页——编写及数据插入_if (item.sitename === " ") {-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45305953/article/details/105078525

列表页面搭建参考链接：列表页面搭建
新增模板包含了文件上传，使用elementUI自带的Upload上传组件，首先把文件上传，返回模板文件ID，其他数据校验成功后，一起请求服务端进行添加到数据库。

新增页面template_页面编写

<template>
  <div>
    <el-form :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm">

      <el-form-item label="所属站点" prop="siteId">
        <el-select v-model="pageForm.siteId" placeholder="请选择站点">
          <el-option v-for="item in siteList"
                     :key="item.siteId"
                     :label="item.siteName"
                     :value="item.siteId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="模板名称" prop="templateName">
        <el-input v-model="pageForm.templateName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="模板参数" prop="templateParameter">
        <el-input v-model="pageForm.templateParameter" auto-complete="off"></el-input>
      </el-form-item>

      <template>
        <el-upload
          class="upload-demo"
          action="http://127.0.0.1:11000/api/cms/template/uploadTemplateFiles"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          multiple
          name="file"
          ref="upload"
          accept=".ftl"
          :limit="1"
          :file-list="formFileList">
          <el-button type="primary" plain>上传模板文件</el-button>
          <span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上传ftl文件，且不超过{{formMaxSize}}M</span>
        </el-upload>
      <br>
    </template>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addSubmit('pageForm')">提交</el-button>
      <el-button type="primary" @click="go_back" >返回</el-button>
    </div>
  </div>
</template>

新增页面JS代码

<script>
  import * as cmsApi from '../api/cms'
  export default {
    name: "template_list",
    data() {
      return {
        formMaxSize: 10, // 上传文件大小
        formFileList: [], // 显示上传文件
        siteList: {},//站点列表
        pageForm: {
          siteId: '',
          templateName: '',
          templateParameter: '',
          templateFileId:'',
        },
        pageFormRules: {
          siteId:[
            {required: true, message: '请选择站点', trigger: 'blur'}
          ],
          templateName:[
            {required: true, message: '请输入模板名称', trigger: 'blur'}
          ],
        },
      }
    },

    methods: {
      addSubmit: function () {
        this.$refs.pageForm.validate((valid) => {
          if (valid) {//表单校对成功
              this.$confirm('您确认提交吗？','提示',{}).then(()=>{
                cmsApi.template_add(this.pageForm).then(res=>{
                  if(res.success){
                    this.$message.success("添加成功")
                    this.$refs.pageForm.resetFields();//重置表单数据
                    this.$refs.upload.clearFiles();//清空文件
                    this.go_back();
                  }else if(res.message){
                    this.$message.error(res.message);
                  }else{
                    this.$message.error("添加失败");
                  }
              });
            });
          } else {
            alert('校验失败');
            return false;
          }
        })
      },

      // 开始上传前文件验证
      beforeUpload (file) {
        // 验证文件大小
        if (file.size / 1024 / 1024 > this.formMaxSize) {
          this.$message({
            message: `上传文件大小不能超过${this.formMaxSize}M!`,
            type: 'warning'
          })
          return false
        }
        // 中文乱码处理
        if (file.raw) {
          let reader = new FileReader() // 读取文件内容
          reader.readAsText(file.raw, 'gb2312') // 防止中文乱码问题，不加reader.onload方法都不会触发
          reader.onload = function (e) {
            this.contentHtml = e.target.result // txt文本内容，接下来就可以对其进行校验处理了
          }
        }
        // 验证文件类型
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension = testmsg === 'ftl'
        if (!extension) {
          this.$message({
            message: '上传文件只能是ftl格式!',
            type: 'warning'
          })
        }
        return extension
      },
      // 移除上传列表中文件(直接删除GridFs中的文件)
      handleRemove (file,fileList) {
        this.$confirm('您确认删除上传的模板文件吗？','提示',{}).then(()=>{
          cmsApi.delete_template_file(this.pageForm.templateFileId).then(res=>{
            if(res.success){
              this.$message.success("删除成功")
            }else if(res.message){
              this.$message.error(res.message);
            }else{
              this.$message.error("删除失败");
            }
          });
        });
      },

      //上传文件成功后获取返回的数据
      handleSuccess(response, file, fileList){
        //把返回的ID数据赋值
        if (response.success){
          this.$message.success("上传成功")
          this.pageForm.templateFileId=response.stringUpload;
        }else if(response.message){
          this.$message.error(response.message);
        }else{
          this.$message.error("上传失败");
        }
      },

      // 允许上传文件个数验证
      handleExceed (files, formFileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + formFileList.length} 个文件`)
      },

      handlePreview(file) {
        console.log(file);
      },
      //返回上一个页面
      go_back: function () {
        //获取当前路由设置返回的新路径
        this.$router.push({
          path:"/cms/template/list",
          //设置路由中的参数
          query:{
            page:this.$route.query.page,
            siteId:this.$route.query.siteId
          },
        })
      },

      query_site:function () {//查询站点列表
        cmsApi.site_list().then((res)=>{
          this.siteList=res.queryResult.list;
        });
      },
    },
    created: function () {
      //初始化站点列表
      this.siteList = this.query_site()
    },
  }
</script>

在cms.js文件中定义JS代码调用的方法
（1）新增时有获取站点ID的功能，详解参考链接：站点列表
（2）模板文件上传（这里文件上传直接使用上传组件action属性绑定的url）：文件上传
（3）删除模板文件（传递模板文件ID）upload组件中钩子函数:on-remove=“handleRemove”，删除模板文件
1).js中添加方法，

 // 移除上传列表中文件(直接删除GridFs中的文件)
      handleRemove (file,fileList) {
        this.$confirm('您确认删除上传的模板文件吗？','提示',{}).then(()=>{
          cmsApi.delete_template_file(this.pageForm.templateFileId).then(res=>{
            if(res.success){
              this.$message.success("删除成功")
            }else if(res.message){
              this.$message.error(res.message);
            }else{
              this.$message.error("删除失败");
            }
          });
        });
      },

2）.cms.j中添加的请求服务端的代码

//删除上传的模板文件
export const delete_template_file=(stringUploadFileID)=>{
  return http.requestGet(apiUrl+'/cms/template/deleteTemplateFiles/'+stringUploadFileID)
}

（4）新增模板数据，数据都校验成功，把表单对象传递到服务端新增模板

//新增模板
export const template_add=(params)=>{
  return http.requestPost(apiUrl+'/cms/template/add',params);
}