kd-aiot-frontend-wt/src/views/bpm/done/detailDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="visible"
    v-if="visible"
    title="详情"
    :append-to-body="true"
    :close-on-click-modal="false"
    :maxable="true"
    :resizable="true"
    width="70%"
  >
    <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>
    <div v-show="activeComp === 'main'">
      <!-- <div class="row">主题: {{ form.businessName }}</div>
      <div class="row">提交人: {{ form.processInstance?.startUserNickname }}</div>
      <div class="row">提交时间: {{ form.createTime }}</div> -->
      <fm-generate-form
        v-if="Object.keys(form?.formJson || {}).length !== 0"
        :data="jsonData"
        :value="form.valueJson"
        :edit="false"
        ref="generateForm"
      >
        <template v-slot:blank_adopzrdd="scope">
          <div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index">
            <div class="blank_adopzrdd">
              <span>{{ index + 1 }}报销事项：</span>
              <el-input
                v-model="scope.model.blank_adopzrdd[index].remark"
                type="textarea"
                style="width: calc(100% - 80px)"
              ></el-input>
            </div>
            <div class="blank_adopzrdd">
              <span>金额：</span>
              <el-input
                v-model="scope.model.blank_adopzrdd[index].price"
                type="number"
                style="width: calc(100% - 80px)"
              ></el-input>
            </div>
          </div>
        </template>
        <template v-slot:eom_contact="scope">
        <div class="eom_contact">
          <el-input
            v-model="scope.model.eom_contact.name"
            style="width: 100%"
            :disabled="view"
          ></el-input>
        </div>
      </template>
      <!-- 关联工单 -->
      <template v-slot:manage_workorder="scope">
        <div class="manage_workorder">
          <el-input
            v-model="scope.model.manage_workorder.code"
            style="width: 100%"
            :disabled="view"
          ></el-input>
        </div>
      </template>
      <!-- 差旅 -->
      <template v-slot:blank_business_component="scope">
        <businessComponent
          ref="blank_business_component"
          id="blank_business_component"
          :generateForm="$refs.generateForm"
          :info="scope.model"
          :view="view"
        ></businessComponent>
      </template>

      <!-- 印章使用 -->
      <template v-slot:blank_use_seal="scope">
        <useSealComponent
          ref="blank_use_seal"
          id="blank_use_seal"
          :generateForm="$refs.generateForm"
          :info="scope.model"
          :view="view"
        ></useSealComponent>
      </template>

      <!-- 资质使用 -->
      <template v-slot:blank_use_qualification="scope">
        <useQualificationComponent
          ref="blank_use_qualification"
          id="blank_use_qualification"
          :generateForm="$refs.generateForm"
          :info="scope.model"
          :view="view"
        ></useQualificationComponent>
      </template>

      <!-- 产品规格 -->
      <template v-slot:blank_product_specification="scope">
        <productSpecificationComponent
          ref="blank_product_specification"
          id="blank_product_specification"
          :generateForm="$refs.generateForm"
          :info="scope.model"
          :view="view"
        ></productSpecificationComponent>
      </template>

      <!-- 事件 -->
      <template v-slot:blank_event_component="scope">
        <eventComponent
          ref="blank_event_component"
          id="blank_event_component"
          :generateForm="$refs.generateForm"
          :info="scope.model"
          :view="view"
        ></eventComponent>
      </template>

      <!-- 补发 -->
      <template v-slot:blank_reissue_component="scope">
        <reissueComponent
          ref="blank_reissue_component"
          id="blank_reissue_component"
          :generateForm="$refs.generateForm"
          :info="scope.model"
          :view="view"
        ></reissueComponent>
      </template>
      </fm-generate-form>
      <async-biz-form-component
        v-else
        :businessId="form?.businessId"
        ref="bziRef"
        :isView="true"
      ></async-biz-form-component>
    </div>

    <bpmDetail
      v-if="activeComp === 'bpm' && form.processInstance.id"
      :id="form.processInstance.id"
    ></bpmDetail>

    <div slot="footer" class="footer">
      <el-button @click="visible = false">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import bpmDetail from '@/views/bpm/processInstance/detailNew.vue';
  import Vue from 'vue';
  import { getToken } from '@/utils/token-util';

  import businessComponent from '@/BIZComponents/processSubmitDialog/components/businessComponent.vue';
  import useSealComponent from '@/BIZComponents/processSubmitDialog/components/useSealComponent.vue';
  import useQualificationComponent from '@/BIZComponents/processSubmitDialog/components/useQualificationComponent.vue';
  import productSpecificationComponent from '@/BIZComponents/processSubmitDialog/components/productSpecificationComponent.vue';
  import eventComponent from '@/BIZComponents/processSubmitDialog/components/eventComponent.vue';
  import reissueComponent from '@/BIZComponents/processSubmitDialog/components/reissueComponent.vue';

  export default {
    components: {
      bpmDetail,
      businessComponent,
      useSealComponent,
      useQualificationComponent,
      productSpecificationComponent,
      eventComponent,
      reissueComponent
    },
    data() {
      return {
        activeComp: 'main',
        form: {
          processInstance: {}
        },
        tabOptions: [
          { key: 'main', name: '业务详情' },
          { key: 'bpm', name: '流程详情' }
        ],
        visible: false,
        jsonData: {}
      };
    },

    methods: {
      async open(row) {
        this.form = _.cloneDeep(row);
        if (this.form?.formJson?.makingJson) {
          this.jsonData = JSON.parse(this.form.formJson.makingJson);
          this.jsonData.config.dataSource &&
            this.jsonData.config.dataSource.forEach((item) => {
              item.headers = {
                Authorization: getToken()
              };
            });
        }

        this.activeComp = 'main';
        this.visible = true;
        console.log('this.form.pcViewRouter', this.form.pcViewRouter);
        Vue.component('async-biz-form-component', (resolve) => {
          require([`@/views${this.form.pcViewRouter}`], resolve);
        });
      },

      cancel() {
        this.$nextTick(() => {
          this.form = {};
          this.visible = false;
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .ele-dialog-form {
    .el-form-item {
      margin-bottom: 10px;
    }
  }

  .headbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .amount {
      font-size: 14px;
      font-weight: bold;
    }
  }
  .blank_adopzrdd {
    display: flex;
    align-items: center;
    > span {
      display: inline-block;
      width: 80px;
    }
    margin-bottom: 10px;
  }
  .row {
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
</style>