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"
    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'">
      <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>
      </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';

  export default {
    components: {
      bpmDetail
    },
    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;
        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;
  }
</style>