学成在线模板管理-修改页——页面的编写及数据的修改

列表页面搭建参考链接:列表页面搭建
新增页面搭建参考链接:新增页面搭建

修改页面中最值得注意的依旧是模板文件的修改,这里我们使用的方式依旧是文件上传的方式,不使用action链接上传,使用:http-request绑定的方法进行上传,并携带模板文件Id传递到服务端进行处理。携带参数上传文件参考链接:携带参数上传

  1. template_edit.vue页面编写
<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-request="handleUploadForm"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :before-upload="beforeUpload"
          multiple
          name="file"
          ref="upload"
          accept=".ftl"
          :limit="1"
          :file-list="formFileList"
          :data="upData">
          <el-button type="primary" plain>上传模板文件</el-button>
          <span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上传ftl文件,且不超过{{formMaxSize}}M!<span style="color: red">(备注,修改模板只需重新上传即可)</span></span>
        </el-upload>
        <br>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="go_back">返回</el-button>
      <el-button type="primary" @click.native="editSubmit" :loading="addLoading">提交</el-button>
    </div>
  </div>
</template>
  1. 修改页面JS编写
<script>
  import * as cmsApi from '../api/cms'
  export default {
    data() {
      return {
        formMaxSize: 10, // 上传文件大小
        formFileList: [], // 显示上传文件
        siteList: {},//站点列表
        addLoading: false,//加载效果标记
        templateId:"",
        //新增界面数据
        pageForm: {
          siteId: '',
          templateId: '',
          templateName: '',
          templateParameter: '',
          templateFileId: '',
        },
        pageFormRules: {
          siteId:[
            {required: true, message: '请选择站点', trigger: 'blur'}
          ],
          templateName:[
            {required: true, message: '请输入模板名称', trigger: 'blur'}
          ],
        },
        siteList: []
      }
    },
    computed: {// 这里定义上传文件时携带的参数,即表单数据
      upData: function() {
        return {
          body: JSON.stringify(this.pageForm)
        }
      }
    },
    methods: {
      go_back: function () {
        //获取当前路由设置返回的新路径
        this.$router.push({
          path:"/cms/template/list",
        })
      },
      editSubmit(pageForm) {
        this.$refs.pageForm.validate((valid) => {//表单校验
          if (valid) {//表单校验通过
            this.$confirm('确认提交吗?', '提示', {}).then(() => {
              this.addLoading = true;
              //修改提交的方法请求服务微端接口
              cmsApi.template_edit(this.pageForm.templateId, this.pageForm).then((res) => {
                if (res.success) {
                  this.addLoading = false;
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  //返回列表页面
                  this.go_back();
                } else {
                  this.addLoading = false;
                  this.$message.error('提交失败');
                }
              });
            });
          }
        });
      },
      query_site:function () {//查询站点列表
        cmsApi.site_list().then((res)=>{
          this.siteList=res.queryResult.list;
        });
      },

      // 开始上传前文件验证
      beforeUpload (file) {
        // 验证文件大小
        if (file.size / 1024 / 1024 > this.formMaxSize) {
          this.$message({
            message: `上传文件大小不能超过${this.formMaxSize}M!`,
            type: 'warning'
          })
          return false
        }
        // 验证文件类型
        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("删除失败");
            }
          });
        });
      },

      handleUploadForm(param){
        let thiz = this
        let formData = new FormData()
        formData.append('templateFileId', this.pageForm.templateFileId) // 额外参数(模板文件ID)
        formData.append('file', param.file)
        cmsApi.editUploadTemplateFiles(formData).then((res) => {
          if (res.success) {
            this.$message({
              message: '模板文件修改成功',
              type: 'success'
            });
            this.pageForm.templateFileId=res.stringUpload;
          } else if (res.message) {
            this.addLoading = false;
            this.$message.error(res.message);
          }else{
            this.$message({
              message: '模板文件修改失败',
              type: 'error'
            });
          }
        });
      },

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

      handlePreview(file) {
        console.log(file);
      },
    },
    mounted: function () {
      //初始化站点列表
      this.siteList = this.query_site()
    },
    created: function () {
      //获取路由当中页面ID(主键)
      this.templateId = this.$route.params.templateId;
      //根据主键查询页面信息
      cmsApi.template_get(this.templateId).then((res) => {
        if (res) {
          this.pageForm = res;
        }
      });
    },

  }
</script>
  1. 在cms.js文件中定义JS代码调用的方法
    (1)列表页跳转编辑页通过url擦传递模板ID,修改页获取模板ID请求服务端查询模板对象:根据模板ID获取模板对象
//根据Id查询模板
export const template_get=(templateId)=>{
  //请求服务端
  return http.requestGet(apiUrl+"/cms/template/findTemplateById/"+templateId)
}

(2)站点列表详解参考链接:站点列表
(3)模板文件的修改:修改模板文件

//修改时,上传文件携带参数
export const editUploadTemplateFiles=(formData)=>{
  return http.requestPost(apiUrl+"/cms/template/editUploadTemplateFiles",formData);
}

(4)模板文件修改错误,会有删除模板文件与新增页相同参考链接:删除模板文件
(5)修改模板信息,修改之后数据都校验成功,把表单对象传递到服务端 修改模板

//修改模板提交
export const template_edit=(templateId,params)=>{
  return http.requestPut(apiUrl+"/cms/template/updateTemplate/"+templateId,params)
}
发布了33 篇原创文章 · 获赞 0 · 访问量 661
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览