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

<template>
  <basic-container
    class="see"
    style="margin-bottom:50px;"
  >
    <el-select
      style="width:300px;"
      v-model="value"
      placeholder="请选择"
      @change="changePosition"
      class="marbottom20"
      clearable
    >
      <el-option
        v-for="item in options"
        :key="item.roleId"
        :label="item.roleName"
        :value="item.roleId"
      >
      </el-option>
    </el-select>
    <el-row :gutter="20">
      <el-col
        :span="6"
        style="border-right:1px solid #EDEDED;"
      >
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
        >
          <div
            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">
        <div
          class="martop20"
          v-for="(item,key) in rightData"
          :key='key'
        >
          <div class="flexBetween ">
            <div class="flexItemsC">姓名:{{item.createUser}}</div>
            <div class="flexStar flexItemsC">签名图片:
              <img
                style="height:40px;"
                :src="item.signatureFileUrl"
              />
            </div>
            <div class="flexItemsC">证书:{{item.certificateUserName}}- {{item.certificateFileUrl|urlsplice}}</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, } 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 = []
          }
        })
      }
    },
    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 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)
  }
}
</script>
<style lang="scss" scoped>
.see {
}
</style>