saber/src/views/certificate/managements/see.vue

<template>
  <basic-container
    class="see"
    style="margin-bottom:50px;"
  >
    <el-row :gutter="20">
      <el-col :span="6">
        <el-select
          style="width:100%;"
          v-model="value"
          placeholder="请选择"
          @change="changePosition"
          class="marbottom20"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.contractName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
        >
          <div
            style="border-right:1px solid #EDEDED;"
            v-for="(item,keys) in menuData"
            :key='keys'
          >
            <el-submenu :index="item.roleId">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.roleName}}</span>
              </template>
              <el-menu-item-group
                v-for="(val,k) in item.childRoleList"
                :key='k'
              >
                <el-menu-item
                  :index="val.roleId"
                  @click="dakairight(val.signPfxFileList)"
                >{{val.roleName}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </el-menu>
      </el-col>
      <el-col
        :span="18"
        class="martop20"
      >
        <div
          class="martop20"
          v-for="(item,key) in rightData"
          :key='key'
        >
          <div class="flexBetween">
            <div class="flexStar">
              <div
                class="flexItemsC"
                style="width:240px;"
              >姓名:{{item.certificateUserName}}</div>
              <div
                class="flexStar flexItemsC"
                style="width:240px;"
              >签名图片:
                <img
                  style="height:40px;"
                  :src="item.signatureFileUrl"
                />
              </div>
              <div class="flexItemsC" style="width:600px;">证书:  {{item.certificateUserName}}- {{item.certificateFileUrl|urlsplice}}</div>
              <div class="flexItemsC" v-show="item.pfxType != '-1'">签章类型: {{item.pfxType}}</div>
            </div>
            <el-button
              size="mini"
              @click="deleteAutograph(item.id)"
            >删除签名配置</el-button>
          </div>
          <el-divider></el-divider>
        </div>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import { remove, } from "@/api/certificate/list";
import { queryAllRoleList, queryContractList } from "@/api/certificate/management";
export default {
  data () {
    return {
      options: [],
      value: '',
      menuData: [],
      rightData: [],
    }
  },
  methods: {
    //#region 左侧菜单
    dakairight (signPfxFileList) {
      this.rightData = signPfxFileList
    },
    changePosition () {//下拉框change事件
      // if (this.value && this.options.length > 0) {
      //   this.options.forEach(val => {
      //     if (val.roleId == this.value) {
      //       this.menuData = [val]
      //       this.rightData = []
      //     }
      //   })
      // }
      this.rightData = [];
      this.queryAllRoleList(this.value);
    },
    deleteAutograph (ids) {
      let _that = this
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _that.remove(ids)

      }).catch(() => {
      });
    },
    //#endregion

    //#region 接口
    async queryAllRoleList (contractId) {
      const { data: res } = await queryAllRoleList({ contractId })
      console.log(res);
      if (res.code == 200) {
        // this.options = res.data
        this.menuData = res.data
      }
    },
    async queryContractList (contractId) {
      const { data: res } = await queryContractList({ contractId });
      if (res.code == 200) {
        this.options = res.data
      }
      this.value = contractId;
    },
    async remove (ids) {
      const { data: res } = await remove({ ids })
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }
    },
    //#endregion
  },
  filters: {
    urlsplice (url) {
      let da = ''
      if (url) {
        da = url.slice(url.indexOf('/', url.indexOf('/', url.indexOf('/', url.indexOf('/', url.indexOf('/', url.indexOf('/', 0) + 1) + 1) + 1) + 1) + 1) + 1)
      }
      return da
    },
  },
  watch: {
    'value' (val) {
      if (!val) {
        this.menuData = this.options
        this.rightData = []
      }
    },
  },
  created () {
    this.queryAllRoleList(this.$route.query.contractId);
    this.queryContractList(this.$route.query.contractId);
  }
}
</script>
<style lang="scss" scoped>
.see {
}
</style>