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==2">
        <el-col :span="3.3" style="line-height: 40px">签字时间：</el-col>
        <el-col :span="18">
          <div style="height: 40px; display: flex; align-items: center">
            <el-checkbox v-model="timesTimeElement.timeState" :true-label="1" :false-label="2">是否需要获取签字时间</el-checkbox>
          </div>
        </el-col>
      </el-row>

      <el-row :span="24" v-if="timesTimeElement.timeState === 1">
        <el-col :span="3.3" style="line-height: 40px">时间元素：</el-col>
        <el-col :span="14">
          <el-input v-model="timesTimeElement.timeName" placeholder="请点击后，在左边选择元素" @focus="timeElementFocus"></el-input>
        </el-col>
        <el-col :span="3" style="margin-left: 5px">
          <el-button type="primary" :disabled="!isTimeElement" @click="timeElementFinish">完成</el-button>
        </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">
      <el-tabs v-model="activeName" @tab-click="handleActiveClick">
        <el-tab-pane label="电签配置" name="tab1">
             <table @click class="table martop20 copyTable" width='100%' border='1px ' bordercolor="#E5E5E5" cellpadding='2px'>
            <thead cellpadding='2px' height='40px'>
            <tr>
              <th >元素位置</th>
              <th>签字岗位</th>
              <th>电签来源</th>
              <th>签字时间元素位置</th>
              <th >偏移x</th>
              <th>偏移y</th>
              <th >操作</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 align="center">
            
                    <el-tag type="success"  v-if="item.isSystem==1">电签角色库</el-tag>
                    <el-tag type="info" v-if="item.isSystem==2">项目匹配</el-tag>
                    <el-tag type="warning"  v-if="item.isSystem==0">本表配置</el-tag>
              </td>
              <td>{{ item.timeName }}</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-tab-pane>
        <el-tab-pane label="系统识别" name="tab2">
          <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='30%'>签字时间元素位置</th>
              <th width='10%'>偏移x</th>
              <th width='10%'>偏移y</th>
            </tr>
            </thead>
            <tbody height='36px'>
            <tr v-for="(item,key) in setsignaTable2" :key="key" v-on:click="">
              <td>{{ item.colName }}</td>
              <td>{{ item.sigRoleName }}</td>
              <td>{{ item.timeName }}</td>
              <td>{{ item.pyzbx }}</td>
              <td>{{ item.pyzby }}</td>
            </tr>
            </tbody>
          </table>
        </el-tab-pane>
      </el-tabs>
      <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";
import {f} from "vuedraggable/dist/vuedraggable.common";

export default {
  props: ['pkeyId1', 'htmlData1', 'excelId', 'times'],
  data() {
    return {
      radio: '',
      isTimeElement: false,
      timesTimeElement: {
        timeState: 2,
      },
      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,
      activeName: 'tab1',
      setsignaTable2: [],
    }
  },
  watch: {
    'htmlData1': {
      handler(val) {
        setTimeout(async () => {
          if (val.obj) {
            let obj = val.obj
            this.signType = obj.type.toString()
            this.pyzbx = obj.pyzbx
            this.pyzby = obj.pyzby
            this.sigRoleId = obj.sigRoleId
            this.colKey = val.keyname

            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
            }
          })
        }
      }
    },
    'times': {
      handler(obj) {
        this.$set(this.timesTimeElement, 'timeName', obj.colName)
        this.$set(this.timesTimeElement, 'timeColKey', obj.keyname)
      },
      deep: true
    }
  },
  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;
      }

      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;

      //签字时间
      const times = this.timesTimeElement
      data.timeState = times.timeState || 2;
      data.timeName = times.timeName;
      data.timeColKey = times.timeColKey;
      if (data.timeState === 1 && (!data.timeName || data.timeName === '')) {
        this.$message({type: "error", message: "请先配置签字时间"});
        return;
      }
      try {
        this.setsignaTable.forEach(val => {
          if (val.sigRoleId == data.sigRoleId && val.colName == data.colName) {
            this.$message({
              type: "error",
              message: "一个位置只能配置一个岗位"
            });
            isadd = false;
          }
        })
        if (isadd) {
          data.show = false
          data.colKey = this.htmlData1.keyname
          this.setsignaTable.push(data);
        }
      } catch (e) {
        throw e;
      }
    },
    async editClick(item) {
      console.log(item, 'item222');
      this.setsignaTable.forEach((ele) => {
        ele.show = false
      })
      item.show = true
      console.log(this.htmlData1, 'htmlData222');
      const {data: res} = await getSignDetail({id: item.id, tabId: this.pkeyId1})
      if (res.code === 200) {
        console.log(res, 'res');
        this.htmlData1.obj = res.data
        debugger
        let obj = this.htmlData1.obj
        console.log(obj, 'opbj');
        if (obj) {
          console.log(obj, 'obj');
          this.htmlData1.name = obj.colName;
          this.htmlData1.keyname = obj.colKey;
          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
              }
            })
          }
          //签字时间
          this.timesTimeElement = {
            timeState: obj.timeState || 2,
            timeName: obj.timeName,
            timeColKey: obj.timeColKey
          }
        } else {
          this.radio = ''
          this.roleInfo = ''
          this.signInfo = ''
          this.signType = ''
          this.pyzbx = 0
          this.pyzby = 0
          //签字时间
          this.timesTimeElement = {
            timeState: 2,
            timeName: '',
            timeColKey: ''
          }
        }
      }
      console.log(this.htmlData1, ' this.htmlData1111');
      this.$emit('edit', true)
    },
    saveClick(item) {
      console.log('保存');
      debugger;
      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
      const times = this.timesTimeElement
      obj.timeState = times.timeState || 2
      obj.timeName = times.timeName
      obj.timeColKey = times.timeColKey
      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
          ele.timeState = obj.timeState
          ele.timeName = obj.timeName
          ele.timeColKey = obj.timeColKey
        }
      })
      this.$nextTick(() => {
        this.setsignaTable = arr
      })
      this.$forceUpdate()
      console.log(this.setsignaTable, 'this.setsignaTable');
      // this.saveSingInfo()
      this.$emit('edit', false)
    },
    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: "操作成功"
          });
        }
      }
      this.$emit('edit', false)
    },
    async saveSingInfo() {
      console.log(this.setsignaTable, 'this.setsignaTable');
      if (this.activeName==='tab1' && this.setsignaTable.length === 0) {
        this.$message.warning('请先选择数据')
        return
      }
      if (this.activeName==='tab2' && this.setsignaTable2 === 0) {
        this.$message.warning('暂无系统识别数据')
        return
      }
      let newDataArr = []
      if (this.activeName==='tab1') {
        newDataArr = this.setsignaTable
      } else if (this.activeName==='tab2') {
        newDataArr = this.setsignaTable2
      }
      this.saveLoaing = true
      setTimeout(() => {
        this.saveLoaing = false
      }, 1500);
      const {data: res} = await saveSig({
        dataInfo: newDataArr,
        tabId: this.pkeyId1
      })
      if (res.code === 200) {
        //console.log(this.$parent)
        this.$parent.getExcelHtml(this.pkeyId1);
        this.activeName = 'tab1'
        this.getSingInfo()
        this.$message({
          type: "success",
          message: "操作成功"
        });
      }

    },
    //电签配置
    async getSingInfo() {
      const {data: res} = await getSigList({
        current: 0,
        size: 100,
        tabId: this.pkeyId1,
        type: 2,
        excelId: this.excelId,
        showType: 1
      })
      if (res.code === 200) {
        this.setsignaTable = res.data.records;
        this.setsignaTable.forEach((ele) => {
          ele.show = false
        })
      }
    },
    //系统识别
    async getSingInfo1() {
      const {data: res} = await getSigList({
        current: 0,
        size: 100,
        tabId: this.pkeyId1,
        type: 2,
        excelId: this.excelId,
        showType: 2
      })
      if (res.code === 200) {
        this.setsignaTable2 = res.data.records;
      }
    },
    timeElementFocus() {
      this.isTimeElement = true
      this.$emit('timeFocus', true)
    },
    timeElementFinish() {
      this.isTimeElement = false
      this.$emit('timeFocus', false)
    },
    //电签配置和系统识别
    handleActiveClick() {
      //系统识别
      if (this.activeName === 'tab2') {
        this.getSingInfo1()
      }
    },
  },
  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>