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 class="blank_adopzrdd">
              <span>附件：</span>
              <fileMain v-model="scope.model.blank_adopzrdd[index].file" type="view" ></fileMain>
            </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>
      <!-- 申领单（临床/非临床） -->
          <template v-slot:blank_application_component="scope">
            <applicationComponent
              ref="blank_application_component"
              id="blank_application_component"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></applicationComponent>
          </template>
          <!-- 采购申请单（行政采购） -->
          <template v-slot:blank_purchase_requisition="scope">
            <purchaseRequisitionComponent
              ref="blank_purchase_requisition"
              id="blank_purchase_requisition"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></purchaseRequisitionComponent>
          </template>
          <!-- 出差申请单 -->
          <template v-slot:blank_business_trip="scope">
            <businessTripComponent
              ref="blank_business_trip"
              id="blank_business_trip"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></businessTripComponent>
          </template>
      </fm-generate-form>
      <async-biz-form-component
        v-else
        :businessId="form?.businessId"
        :businessType="form?.businessType"
        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';
  import applicationComponent from '@/BIZComponents/processSubmitDialog/components/applicationComponent.vue';
import purchaseRequisitionComponent from '@/BIZComponents/processSubmitDialog/components/purchaseRequisitionComponent.vue';
import businessTripComponent from '@/BIZComponents/processSubmitDialog/components/businessTripComponent.vue';

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

    methods: {
      // 库存批次拆合审批使用专用详情组件，兼容历史流程路由数据。
      isStockBatchChange() {
        return (
          String(this.form.businessCode || '').startsWith('PCBG') ||
          String(this.form.pcViewRouter || '').includes('stockBatchChange') ||
          String(this.form.pcViewRouter || '').includes(
            'warehouseManagement/stockLedger'
          )
        );
      },
      getBusinessComponentRouter() {
        const router = this.form.pcViewRouter;
        const invalidViewRouter = String(router || '').includes(
          'warehouseManagement/stockLedger'
        );
        if (this.isStockBatchChange() && (!router || invalidViewRouter)) {
          return '/bpm/handleTask/components/stockBatchChange/detailDialog.vue';
        }
        const businessKey = String(
          this.form.businessKey ||
            this.form.processDefinitionKey ||
            this.form.processInstance?.processDefinitionId?.split(':')[0] ||
            this.form.processInstance?.processDefinition?.key ||
            ''
        );
        const fallback =
          businessKey === 'contact_approve'
            ? '/bpm/handleTask/components/contact/contactDetailDialog.vue'
            : '';
        const path = String(!router || router === '/' ? fallback : router).trim();
        if (!path || path === '/' || !path.startsWith('/')) return '';
        return path;
      },
      async open(row) {
        this.form = _.cloneDeep(row);
        // 兼容后端附件字段名为 file 或 files（详情只读，统一到 file 字段）
        const adoptList = this.form?.valueJson?.blank_adopzrdd;
        if (Array.isArray(adoptList)) {
          adoptList.forEach((item) => {
            if (item && item.file == null && item.files != null) {
              item.file = item.files;
            }
          });
        }
        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);
        const router = this.getBusinessComponentRouter();
        if (!router) {
          console.error('流程表单路由未配置', {
            pcViewRouter: this.form.pcViewRouter,
            businessCode: this.form.businessCode,
            businessType: this.form.businessType
          });
          this.$message.error(
            '流程未配置 PC 详情路由（pcViewRouter），请在流程定义中填写业务详情组件路径'
          );
          return;
        }
        Vue.component('async-biz-form-component', (resolve) => {
          require([`@/views${router}`], 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>