saber/src/views/manager/projectinfo/treeTemplate/template/electronicSignature.vue

<template>
  <div>
    <div class="dianqian">
      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          元素坐标：
        </el-col>
        <el-col :span="18">
          <avue-input v-model="htmlData1.name" placeholder="请点击坐标" :disabled='true' ></avue-input>
        </el-col>
      </el-row>

      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          证书类型：
        </el-col>
        <el-col :span="18">
            <el-select v-model="signType" placeholder="请选择证书类型" @change="signTypeChang()">
            <el-option  v-for="item in seloptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row :span="24" v-if="signType==2">
        <el-col :span="3.3">
          所属方：
        </el-col>
        <el-col :span="18">
          <avue-radio v-model="radio"  :dic="roleType" v-on:click="roleTypeChang()"></avue-radio>
        </el-col>
      </el-row>

      <el-row :span="24" v-if="signType==2">
        <el-col :span="3.3" style="line-height: 40px">
          签字角色：
        </el-col>
        <el-col :span="18">
          <el-select v-model="roleInfo"  placeholder="请选择签字岗位" filterable  @change="changeRole">
            <el-option v-for="item in options" :key="item" :value="item" :label="item.label" ></el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row :span="24" v-if="signType==6">
        <el-col :span="3.3" style="line-height: 40px">
          签章类型：
        </el-col>
        <el-col :span="18">
          <el-select v-model="signInfo" placeholder="请选择签章类型" @change="signInfoChang">
            <el-option v-for="item in options" :key="item.dictKey" :value="item.dictKey" :label="item.dictValue"></el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          偏移位X：
        </el-col>
        <el-col :span="16">

            <avue-input v-model="pyzbx" placeholder="横坐标，负代表左移，正代表右移，偏移量50大概等于一厘米"  type="number"></avue-input>

        </el-col>
      </el-row>

      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          偏移位Y：
        </el-col>
        <el-col :span="16">

            <avue-input v-model="pyzby" placeholder="纵坐标，负代表下移，正代表上移，偏移量50大概等于一厘米"  type="number"></avue-input>

        </el-col>
      </el-row>

      <el-row :span="24" style="text-align: center">
        <el-button type="warning"
                   size="small"
                   icon="el-icon-view"
                   @click="previewClick()">预览</el-button> &nbsp;&nbsp;
        <el-button type="primary"
                   size="small"
                   icon="el-icon-circle-plus-outline"
                   @click="addRoleInfo()">添加列表</el-button> &nbsp;&nbsp;

      </el-row>


    </div>

    <div
      style="border: 1px dotted rgb(187, 187, 187);box-sizing: border-box;padding: 0px 15px;"
      class="martop20 marbottom10"
    >
      <table @click
             class="table martop20 copyTable"
             width='100%'
             border='1px '
             bordercolor="#E5E5E5"
             cellpadding='2px'
      >
        <thead
          cellpadding='2px'
          height='40px'
        >
        <tr>
          <th width='30%'>元素位置</th>
          <th width='30%'>签字岗位</th>
          <th width='10%'>偏移x</th>
          <th width='10%'>偏移y</th>
          <th width='20%'>操作</th>
        </tr>
        </thead>
        <tbody height='36px'>
        <tr v-for="(item,key) in setsignaTable"  :key="key" v-on:click="">
          <td>{{item.colName}}</td>
          <td>{{item.sigRoleName}}</td>
          <td>{{item.pyzbx}}</td>
          <td>{{item.pyzby}}</td>
          <td align="center">
            <span style="color:#409EFF;;cursor: pointer;margin-right: 5px;" @click="editClick(item)" v-if="item.show===false">编辑</span>
            <span style="color:green;;cursor: pointer;margin-right: 5px;" @click="saveClick(item)" v-else v-loading="isEditLoaing">保存</span>

            <span style="color:red;cursor: pointer;" v-on:click="deleteTableSig(key,item.id,item)">删除</span>

          </td>
        </tr>
        </tbody>
      </table>

      <el-button type="primary"
                 size="small"
                 class="martop25"
                 style="float:right;"
                 icon="el-icon-circle-plus-outline"
                 :loading="saveLoaing"
                 @click="saveSingInfo()">保存入库</el-button> &nbsp;&nbsp;
    </div>
  </div>
</template>


<script>

import {getRoleInfoByParentId, getRoleType, getSigList, saveSig,remove,updateDetail,getSignDetail} from "../../../../../api/manager/AdjustForm";
import {findPfxType, getPriwbsPdf} from "../../../../../api/certificate/list";


export default {
  props: ['pkeyId1', 'htmlData1','excelId'],
  data () {
    return {
      radio: '',
      roleType:[],
      options: [],
      roleInfo: '',
      signInfo: '',
      signInfoarr:[],
      signType: '2', // 证书类型
      pyzbx: 0.0,
      pyzby: 0.0 ,
      setsignaTable:[],
      seloptions : [
        {
          value: '2',
          label: '个人证书',
        },
        {
          value: '6',
          label: '企业证书',
        }
      ],
      isCansave:false,
      colKey:'',
      colName:'',
      signId:'',
      isDeleted:'',
      parentRoleId:'',
      isEditLoaing:false,
      sigRoleName:'',
      saveLoaing:false

    }
  },
  watch: {
    'htmlData1': {
      handler(val) {
       setTimeout(async() => {
        if(val.obj){
          let obj=val.obj
          console.log(obj,'obj');
          this.signType=obj.type.toString()
          this.pyzbx=obj.pyzbx
          this.pyzby=obj.pyzby
          this.sigRoleId=obj.sigRoleId
          this.colKey=obj.colKey

          this.colName=obj.colName
          this.signId=obj.id
          this.isDeleted=obj.isDeleted
          if(obj.type==2){
            this.radio=obj.parentRoleId
             await this.roleTypeChang()

          }else{
            this.radio=''
            await this.signTypeChang()
            this.signInfo=obj.sigRoleId
            this.options.forEach((ele)=>{
                if(ele.dictKey=== this.signInfo){
                    this.sigRoleName=ele.dictValue
                }
             })

          }
        }else{
        let isEdit= this.setsignaTable.some(element => element.show === true);
        if(!isEdit){
          this.radio=''
          this.roleInfo=''
          this.signInfo=''
          this.signType='2'
          this.pyzbx=0
          this.pyzby=0
        }

          this.colKey=val.keyname
        }
       }, 1000);


        // todo
      },
      deep: true
    },
    'options':{
      handler(val){
        if(this.sigRoleId&&val.length>0&&this.radio.length>1){
          this.options.forEach((ele)=>{
            if(ele.value===this.sigRoleId){
              this.roleInfo=ele
            }
          })
        }

      }
    }
  },
  methods: {
    async getRoleType () {//获取角色类型
      const { data: res } = await getRoleType()
      if (res.code === 200) {
        this.roleType = res.data
      }
    },

    // 签证类型
    async signTypeChang(){
      setTimeout(async () => {
        if(this.signType==6){
          const {data: res} = await findPfxType({ typeOrStatus: 'pfx_type'})
          if (res.code === 200) {
            this.options = res.data
          }
        }
      }, 200);
    },

    // 单选按钮改变事件
    async roleTypeChang(){
      setTimeout(async () => {
          const {data: res} = await getRoleInfoByParentId({ParentId: this.radio})
          if (res.code === 200) {
            this.options = res.data
          }
      }, 200);
    },
    //签章类型改变e
    signInfoChang(e){
      console.log(e,'e');
    this.signInfoarr=  this.options.filter(item=>{
        if(item.dictKey===e){
          return item
        }
      })
      this.options.forEach((ele)=>{
                if(ele.dictKey=== this.signInfo){
                    this.sigRoleName=ele.dictValue
                }
       })
    },
    //角色改变
    changeRole(e){
      this.sigRoleName=e.label
      this.sigRoleId=e.value

    },
    //预览
    previewClick() {
      let _this = this
      console.log('预览', this.pkeyId1)
      getPriwbsPdf(this.pkeyId1).then(({data}) => {
        if (data.code === 200 && data.data) {
          window.open(data.data, '_blank')
        } else {
          _this.$message({
            type: "error",
            message: data.msg || "预览失败"
          });
        }
      })
    },
    async addRoleInfo(){
      var isadd = true;
      // 集合中添加数据
      var data = {};

      // 坐标位置
      if(this.htmlData1.name ===''){
        this.$message({
          type: "error",
          message: "请选坐标位置"
        });
        return;
      }else if(this.htmlData1.name === '警告' ){
        this.$message({
            type: "warning",
            message: "警告框不能配置电签"
          });
          return;
      }
      // 证书类型
      if(this.signType===''){
        this.$message({
            type: "error",
            message: "请选择证书类型"
          });
          return;
      }
      if (this.signType==2){
        if(this.roleInfo ==='') {
          this.$message({
            type: "error",
            message: "请选择签字岗位"
          });
          return;
        }
        data.sigRoleId = this.roleInfo.value;
        data.sigRoleName = this.roleInfo.label;
        data.type=2;
      }else if(this.signType==6){
        if(this.signInfo ===''){
          this.$message({
            type: "error",
            message: "请选择签章类型"
          });
          return;
        }
        // data.sigRoleId = this.signInfo.dictKey;
        // data.sigRoleName = this.signInfo.dictValue;
         data.sigRoleId = this.signInfoarr[0].dictKey;
        data.sigRoleName = this.signInfoarr[0].dictValue;
        data.type=6;
      }
      console.log(this.htmlData1,'this.htmlData11111');
      data.colKey="__"+this.htmlData1.tr+"_"+this.htmlData1.td;

      data.tabId = this.pkeyId1;
      data.colName= this.htmlData1.name;


      data.pyzbx = this.pyzbx;
      data.pyzby = this.pyzby;

      try {
        this.setsignaTable.forEach(val => {
          if(val.colName == this.htmlData1.name){ // 位置只能添加一个
            this.$message({
              type: "error",
              message: "位置只能配置一个电签"
            });
            isadd = false;
            throw new Error('位置只能配置一个电签')
          }

          if(val.colName === this.htmlData1.name && val.sigRoleId === this.roleInfo.value){
            this.$message({
              type: "error",
              message: "数据已添加列表中"
            });
            isadd = false;
            throw new Error('位置只能配置一个电签');
          }
        })
        if(isadd){
          data.show=false
          data.colKey=this.htmlData1.keyname
          this.setsignaTable.push(data);
        }
      }catch (e){
        throw e;
      }
    },
    async editClick (item){
      console.log(item,'item');

      this.setsignaTable.forEach((ele)=>{
        ele.show=false
      })
      item.show=true
      console.log(this.htmlData1,'htmlData1');
      const {data: res} = await getSignDetail({id: item.id,tabId:this.pkeyId1})
        if(res.code===200){
              console.log(res,'res');
              this.htmlData1.obj=res.data
              let obj=this.htmlData1.obj
              console.log(obj,'opbj');
            if(obj){
                console.log(obj,'obj');
                this.htmlData1.name=obj.colName;
                this.signType=obj.type.toString()
                this.pyzbx=obj.pyzbx
                this.pyzby=obj.pyzby
                this.sigRoleId=obj.sigRoleId
                this.sigRoleName=obj.sigRoleName
                this.colKey=obj.colKey


                this.colName=obj.colName
                this.signId=obj.id
                this.isDeleted=obj.isDeleted

                if(obj.type==2){
                  this.radio=obj.parentRoleId
                  await this.roleTypeChang()

                }else{
                  this.radio=''
                  await this.signTypeChang()
                  this.signInfo=obj.sigRoleId
                  this.options.forEach((ele)=>{
                    if(ele.dictKey=== this.signInfo){
                        this.sigRoleName=ele.dictValue
                    }
                  })


                }
            }else{
              this.radio=''
              this.roleInfo=''
              this.signInfo=''
              this.signType=''
              this.pyzbx=0
              this.pyzby=0
            }

       }
       console.log( this.htmlData1,' this.htmlData1111');

    },
    saveClick(item){
      console.log('保存');
      this.editRoleInfo(item)


    },
   async editRoleInfo(){
      let obj={}
      obj.colKey=this.colKey
      obj.colName=this.colName
      obj.sigRoleName=this.sigRoleName
      obj.tabId=this.pkeyId1
      obj.excelId=this.excelId
      obj.type=this.signType
      obj.pyzbx=this.pyzbx
      obj.pyzby=this.pyzby
      obj.id=this.signId
      obj.isDeleted=this.isDeleted
      if(this.signType==2){
        obj.parentRoleId=this.radio
        obj.sigRoleId=this.sigRoleId

      }else{
        obj.sigRoleId=this.signInfo
      }
        let arr=this.setsignaTable
        arr.forEach((ele)=>{
          if(obj.id==ele.id){
            ele.colKey=this.colKey
            ele.excelId=obj.excelId
            ele.pyzbx=obj.pyzbx
            ele.pyzby=obj.pyzby
            ele.sigRoleId=obj.sigRoleId
            ele.sigRoleName=obj.sigRoleName
            ele.type=obj.type
            ele.tabId=obj.tabId
            ele.show=false
            ele.colName=this.htmlData1.name

          }
        })
        this.$nextTick(()=>{
          this.setsignaTable=arr
        })
        this.$forceUpdate()
        console.log(this.setsignaTable,'this.setsignaTable');
        // this.saveSingInfo()


    },
   async deleteTableSig (key,id,item) {//删除数据
   console.log(item,'item');
        this.setsignaTable.splice(key,1);
        this.isCansave=true
        // this.saveSingInfo();
        // const {data: res} = await saveSig({dataInfo: this.setsignaTable,tabId:this.pkeyId1})
        if(id){
            const {data: res} = await remove(id,this.pkeyId1)
            if (res.code === 200) {
              //console.log(this.$parent)
              this.isCansave=false
              this.$parent.getExcelHtml(this.pkeyId1);
              this.getSingInfo()
              this.$message({
                type: "success",
                message: "操作成功"
              });
            }
        }

    },
    async saveSingInfo() {
      console.log(this.setsignaTable,'this.setsignaTable');
      if(this.setsignaTable.length===0){
        this.$message.warning('请先选择数据')
        return
      }
      this.saveLoaing=true
      setTimeout(() => {
        this.saveLoaing=false
      }, 1500);
      const {data: res} = await saveSig({dataInfo: this.setsignaTable,tabId:this.pkeyId1})

      if (res.code === 200) {
        //console.log(this.$parent)
        this.$parent.getExcelHtml(this.pkeyId1);
        this.getSingInfo()
        this.$message({
          type: "success",
          message: "操作成功"
        });
      }

    },
    async getSingInfo() {
      console.log(this.excelId,'this.excelId1111111');
      const {data: res} = await getSigList(
        {
          current: 0,
          size: 100,
          tabId: this.pkeyId1,
          type:2,
          excelId:this.excelId
        }
      )
      if (res.code === 200) {
        this.setsignaTable = res.data.records;
        this.setsignaTable.forEach((ele)=>{
          ele.show=false
        })
      }
    }
  },
  created () {
    this.getRoleType();  //获取文本类型接口
    this.getSingInfo();
    this.setsignaTable=[];
    console.log(this.htmlData1,'html1');

  },


}


</script>
<style lang="scss" scoped>
.table {
  margin-top: 20px;
  border-radius: 5px;
  color: #101010;
  font-size: 14px;
}
.dianqian{
  width: 90%;
  height: 100%;
}
.copyTable td{
  user-select:initial !important;
}

</style>