kd-aiot-frontend/src/views/documentManagement/certificateManagement/components/detail-dialog.vue

<template>
  <ele-modal
    title="证照详情"
    :visible.sync="dialogVisible"
    width="60%"
    :maxable="true"
  >
    <div class="switch">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="activeComp = item.key"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <el-descriptions title="" :column="3" size="medium" border
    v-if="activeComp == 'main'"
    >
      <el-descriptions-item>
        <template slot="label"> 证照编号 </template>
        {{ form.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 类型 </template>
        {{
          getDictValue(
            form.holderType == 1 ? '证件类型' : '客户/供应商资质类型',
            form.type
          )
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 持证对象</template>
        {{ form.holder }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label"> 有效期至 </template>
        {{ form.validityStartTime + ' — ' + form.validityEndTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 状态 </template>
        {{ getDictValue('规则状态', form.status) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 颁发时间 </template>
        {{ form.enactorTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 创建人 </template>
        {{ form.createUserName }}
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template slot="label"> 创建机构 </template>
        {{ form.createUserDeptName }}
      </el-descriptions-item> -->
      <el-descriptions-item>
        <template slot="label"> 创建时间 </template>
        {{ form.createTime }}
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label"> 附件 </template>
        <fileMain v-model="form.fileObj" type="view"></fileMain>
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label"> 备注 </template>
        {{ form.remark }}
      </el-descriptions-item>
    </el-descriptions>
    <bpmDetail
      v-if="activeComp == 'bpm' && form.processInstanceId"
      :id="form.processInstanceId"
    ></bpmDetail>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getPhotoInfo } from '@/api/documentManagement';
  import dictMixins from '@/mixins/dictMixins';
  // import fileMain from '@/components/addDoc/index.vue';
  import bpmDetail from '@/views/bpm/processInstance/businessDetail.vue';

  export default {
    mixins: [dictMixins],
    components: { bpmDetail },
    //注册组件
    data() {
      return {
        dialogVisible: false,
        form: {},
        activeComp: 'main',
        tabOptions: [
          { key: 'main', name: '详情' },
          { key: 'bpm', name: '审批流程' }
        ],
      };
    },
    computed: {},
    created() {
      this.requestDict('证件类型');
      this.requestDict('客户/供应商资质类型');
      this.requestDict('规则状态');
    },
    methods: {
      open(row) {
        this.activeComp='main'
        this.dialogVisible = true;
        this.getInfo(row.id);
      },
      async getInfo(id) {
        const data = await getPhotoInfo(id);
        this.form = data;
      }
    }
  };
</script>

<style lang="scss">
  .el-form-item {
    margin-bottom: 20px !important;
  }
</style>