zh-E-admin/src/views/admin/template/add-edit.vue

<template>
  <div class="add-edit-box">
    <div class="mb-20 baC-fff sys-radius-10 box-sizing-border pd-15-10 flex-justify-space">
      <div class="fs-20 fw-600 p-15 ">{{fromData.id?'编辑合同模板':'新增合同模板'}}</div>
      <div class="align-items-center">
        <el-button type="primary" icon="el-icon-back" @click="close()">返回</el-button>
        <el-button type="warning" icon="el-icon-close" @click="close()">取消</el-button>
        <el-button type="success" icon="el-icon-check" @click="save()">保存</el-button>
      </div>
    </div>

    <div class="baC-fff sys-radius-10 box-sizing-border pd-26-24">
      <div class="align-items-center mb-20">
        <div class="fs-16">合同名称：</div>
        <el-input
          class="input-w-280 mr-10"
          placeholder="请输入合同名称"
          prefix-icon="el-icon-edit"
          v-model="fromData.name">
        </el-input>
      </div>

      <div class="align-items-center mb-20">
        <div class="fs-16">合同文件：</div>
        <div class="up-box">
          <el-upload
            accept=".doc,.docx"
            action="#"
            :limit="2"
            :file-list="fileList"
            :http-request="reportFileHttpRequest"
            :before-upload="beforeUpload"
            :before-remove='beforeRemove'
            >
            <el-button type="success" icon="el-icon-folder-add">上传合同模板</el-button>
            <div slot="tip" class="el-upload__tip">只能上传doc文件</div>
          </el-upload>
        </div>
      </div>

      <div class="display-flex ">
        <div class="w-50">
          <el-button class="mb-20" type="success" icon="el-icon-circle-plus-outline" @click="add(1)">添加签署区域关键词</el-button>

          <div class="align-items-center mb-20" v-for="(item,i) in signList" :key="i">
            <div class="fs-16">签署区域关键词：</div>
            <el-input
              class="input-w-264 mr-10"
              placeholder="请输入签署区域关键词"
              prefix-icon="el-icon-edit"
              v-model="item.val"
              >
            </el-input>
            <el-button type="danger" icon="el-icon-delete" @click="del(1,item,i)">删除</el-button>
          </div>
        </div>
        <div class="w-50">
          <el-button class="mb-20" type="success" icon="el-icon-circle-plus-outline" @click="add(2)">添加合同可替换变量词</el-button>

          <div class="align-items-center mb-20" v-for="(item,i) in textList" :key="i">
            <el-input
              class="input-w-264 mr-10"
              placeholder="请输入变量词标题"
              prefix-icon="el-icon-edit"
              v-model="item.name"
              >
            </el-input>
            <div class="fs-16">：</div>
            <el-input
              class="input-w-264 mr-10"
              placeholder="请输入合同可替换变量词"
              prefix-icon="el-icon-edit"
              v-model="item.key"
              >
            </el-input>
            <el-button type="danger" icon="el-icon-delete" @click="del(2,item,i)">删除</el-button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    GetSts
  } from '@/api/conmmon.js'
  import oss from "ali-oss"

  import {contractInfo,contractSave} from '@/api/contract.js';
  export default {
    data(){
      return{
        fromData:{
          id:"",
          name:"",
          sign_party:[],
          texts:[],
          file_url:'',
        },
        aliOss: "",
        fileList:[],

        signList:[],
        textList:[],

        isAJAX:false,
      }
    },
    mounted() {
      this.setNewOss();

      let id = this.$route.query.id;
      if(id){
        this.fromData.id = id;
        this.getInfo();
      }
    },
    methods:{
      async setNewOss() {
        let obj = await GetSts()
        obj = obj.data
        let client = new oss({
          region: "oss-cn-chengdu",
          accessKeyId: obj.AccessKeyId,
          accessKeySecret: obj.AccessKeySecret,
          stsToken: obj.SecurityToken,
          refreshSTSToken: async () => {
            let obj = await GetSts()
            obj = obj.data
            return {
              accessKeyId: obj.accessKeyId,
              accessKeySecret: obj.accessKeySecret,
              stsToken: obj.stsToken,
            }
          },
          refreshSTSTokenInterval: 900000,
          bucket: "cqzhw",
        })
        this.aliOss = client
      },

      getInfo(){
        contractInfo({id:this.fromData.id}).then((res)=>{
          if(res.code == 1){
            this.fromData = res.data;
            if(this.fromData.sign_party.length > 0){
              this.fromData.sign_party.forEach((v)=>{
                let obj = {val:v};
                this.signList.push(obj)
              })
            }
            if(this.fromData.texts.length > 0){
              // this.fromData.texts.forEach((v)=>{
              //   let obj = {val:v};
              //   this.textList.push(obj)
              // })
              this.textList = this.fromData.texts
            }
            this.fileList = [];
            let obj = {
              name:res.data.name,
              url:res.data.file,
            };
            this.fileList.push(obj);
            this.fromData.file_url = res.data.contracts_file;
          }
        })
      },
      close(){
        this.$router.go(-1)
      },
      save(){
        if(this.isAJAX){
          return
        }
        this.isAJAX = true;

        this.fromData.sign_party = [];
        this.fromData.texts = [];

        this.signList.forEach((v)=>{
          this.fromData.sign_party.push(v.val)
        })
        // this.textList.forEach((v)=>{
        //   this.fromData.texts.push(v.val)
        // })
        this.fromData.texts = this.textList;

        contractSave(this.fromData).then((res)=>{
          this.isAJAX = false
          if(res.code == 1){
            this.$message.success(res.msg);
            this.$router.replace({path:'/template/list'})
          }else{
            this.$message.error(res.msg);
          }
        })
      },

      add(type){
        if(type == 1){
          let obj = {val:""};
          this.signList.push(obj);
        }else{
          let obj = {name:"",key:""};
          this.textList.push(obj);
        }
      },
      del(type,item,i){
        if(type == 1){
          this.signList.splice(i, 1);
        }else{
          this.textList.splice(i, 1);
        }
      },

      beforeUpload(file){
        if(this.fileList.length > 0){
          this.fileList = [];
          this.fromData.file_url = '';
        }
        // ||file.type === 'application/pdf'
        let isWord = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||file.type === 'application/msword';
        if (!isWord) {
          this.$message.error('只能上传.doc、.docx格式的Word文件！');
          return false;
        }
        return true;
      },
      reportFileHttpRequest(e){
        this.aliOss.put(e.file.name, e.file).then((res)=>{
          if(res){
            this.$message.success('上传成功，可保存')
            let obj = {
              name:res.name,
              url:res.url,
            };
            this.fileList.push(obj);

            if(res.url[4] == 's'){
              this.fromData.file = res.url;
            }else{
              let a = res.url.substring(0, 4);
              let b = res.url.substring(4);
              let s = 's';
              this.fromData.file_url = a+s+b;
            }
          }else{
            this.$message.error('上传失败，请重新上传')
          }
        })
      },
      beforeRemove(file, fileList){
        this.fileList = fileList;
        this.fromData.file_url = '';
      },
    },
  }
</script>

<style scoped lang="scss">
  .add-edit-box{
    .up-box{
      width: 500px;
    }
  }
</style>