saber/src/views/exctab/ElementIdentification/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==1">
        <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==1">
        <el-col :span="3.3" style="line-height: 40px">
          签字角色：
        </el-col>
        <el-col :span="18">
          <el-select v-model="roleInfo"  placeholder="请选择签字岗位" filterable >
            <el-option v-for="item in options" :key="item.value" :value="item" :label="item.label" ></el-option>
          </el-select>
        </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="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="18">
          <el-tooltip class="item" effect="light" content="横坐标，负代表左移，正代表右移，偏移量50大概等于一厘米" placement="top-start">
            <avue-input v-model="pyzbx" placeholder="偏移位x"  type="number"></avue-input>
          </el-tooltip>
        </el-col>
      </el-row>

      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          偏移位Y：
        </el-col>
        <el-col :span="18">
          <el-tooltip class="item" effect="light" content="纵坐标，负代表下移，正代表上移，偏移量50大概等于一厘米" placement="top-start">
            <avue-input v-model="pyzby" placeholder="偏移位y"  type="number"></avue-input>
          </el-tooltip>
        </el-col>
      </el-row>

      <el-row :span="24" style="text-align: center">
        <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"
             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:red;cursor: pointer;" v-on:click="deleteTableSig(key)">删除</span></td>
        </tr>
        </tbody>
      </table>

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


<script>

import {getRoleInfoByParentId, getRoleType, getSigList, saveSig} from "@/api/manager/AdjustForm";
import {findPfxType} from "@/api/certificate/list";


export default {
  props: ['pkeyId1', 'htmlData1'],
  data () {
    return {
      radio: '',
      roleType:[],
      options: [],
      roleInfo: '',
      signInfo: '',
      signInfoarr:[],
      signType: '1', // 证书类型
      pyzbx: 0.0,
      pyzby: 0.0 ,
      setsignaTable:[],
      seloptions : [
        {
          value: '1',
          label: '个人证书',
        },
        {
          value: '2',
          label: '企业证书',
        }
      ],
      isCansave:false,
    }
  },
  methods: {
    async getRoleType () {//获取角色类型
      const { data: res } = await getRoleType()
      if (res.code === 200) {
        this.roleType = res.data
      }
    },

    // 签证类型
    async signTypeChang(){
      setTimeout(async () => {
        if(this.signType==2){
          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){
    this.signInfoarr=  this.options.filter(item=>{
        if(item.dictKey===e){
          return item
        }
      })
    },
    async addRoleInfo(){
      var isadd = true;
      // 集合中添加数据
      var data = {};

      // 坐标位置
      if(this.htmlData1.name ===''){
        this.$message({
          type: "error",
          message: "请选坐标位置"
        });
        return;
      }
      // 签字岗位

      if (this.signType==1){
        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==2){
        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;
      }

      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){
          this.setsignaTable.push(data);
        }
      }catch (e){
        throw e;
      }
    },
   async deleteTableSig (key) {//删除数据
        this.setsignaTable.splice(key,1);
        this.isCansave=true
        // this.saveSingInfo();
        const {data: res} = await saveSig({dataInfo: this.setsignaTable,tabId:this.pkeyId1})
      if (res.code === 200) {
        //console.log(this.$parent)
         this.isCansave=false
        this.$parent.getExcelHtml(this.pkeyId1);
        this.$message({
          type: "success",
          message: "操作成功"
        });
      }
    },
    async saveSingInfo() {
      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.$message({
          type: "success",
          message: "操作成功"
        });
      }
    },
    async getSingInfo() {
      const {data: res} = await getSigList(
        {
          current: 0,
          size: 100,
          tabId: this.pkeyId1,
          type:2
        }
      )
      if (res.code === 200) {
        this.setsignaTable = res.data.records;
      }
    }
  },
  created () {
    this.getRoleType();  //获取文本类型接口
    this.getSingInfo();
    this.setsignaTable=[];

  },
}


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

</style>