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">
          所属方：
        </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">
        <el-col :span="3.3" style="line-height: 40px">
          签字角色：
        </el-col>
        <el-col :span="18">
          <el-select v-model="roleInfo" @change="selectChanged" placeholder="请选择签字岗位" >
            <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">
        <el-col :span="3.3" style="line-height: 40px">
          偏移位X：
        </el-col>
        <el-col :span="18">
          <avue-input v-model="pyzbx" placeholder="偏移位x"  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="18">
          <avue-input v-model="pyzby" placeholder="偏移位y"  type="number"></avue-input>
        </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"
                 @click="saveSingInfo()">保存入库</el-button> &nbsp;&nbsp;
    </div>
  </div>
</template>


<script>

import {getRoleInfoByParentId, getRoleType, getSigList, saveSig} from "../../../../../api/manager/AdjustForm";

export default {
  props: ['pkeyId1', 'htmlData1'],
  data () {
    return {
      radio: '',
      roleType:[],
      options: [],
      roleInfo: '',
      pyzbx: 0.0,
      pyzby: 0.0 ,
      setsignaTable:[]
    }
  },
  methods: {
    async getRoleType () {//获取角色类型
      const { data: res } = await getRoleType()
      if (res.code === 200) {
        this.roleType = res.data
      }
    },
    // 单选按钮改变事件
    async roleTypeChang(){
      setTimeout(async () => {
        console.log(this.radio);
        const {data: res} = await getRoleInfoByParentId({ParentId: this.radio})
        if (res.code === 200) {
          this.options = res.data
        }
      }, 200);
    },
    async addRoleInfo(){
      // 坐标位置
      if(this.htmlData1.name ===''){
        this.$message({
          type: "error",
          message: "请选坐标位置"
        });
        return;
      }
      // 签字岗位
      if(this.roleInfo ===''){
        this.$message({
          type: "error",
          message: "请选择签字岗位"
        });
        return;
      }

      var isadd = true;
      // 集合中添加数据
      var data = {};
      data.colKey="__"+this.htmlData1.tr+"_"+this.htmlData1.td;
      data.tabId = this.pkeyId1;
      data.colName= this.htmlData1.name;
      data.sigRoleId = this.roleInfo.value;
      data.sigRoleName = this.roleInfo.label;

      data.pyzbx = this.pyzbx;
      data.pyzby = this.pyzby;
      this.setsignaTable.forEach(val => {
        if(val.colName === this.htmlData1.name && val.sigRoleId === this.roleInfo.value){
          this.$message({
            type: "success",
            message: "数据已添加列表中"
          });
          isadd = false;
          return;
        }
      })
      if(isadd){
        this.setsignaTable.push(data);
      }

    },
    deleteTableSig (key) {//删除数据
        this.setsignaTable.splice(key,1);
    },
    async saveSingInfo() {
      const {data: res} = await saveSig({dataInfo: this.setsignaTable})
      if (res.code === 200) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
      }
    },
    async getSingInfo() {
      const {data: res} = await getSigList(
        {
          current: 0,
          size: 100,
          tabId: this.pkeyId1,
        }
      )
      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>