remuneration/src/views/workOrder/components/ApprovalDetails.vue

<template>
  <m-dialog ref="dialog" title="申请单" v-bind="$attrs" v-on="$listeners">
    <el-form label-width="120px" v-loading="loading">
      <el-form-item label="审批功能名称">
        <el-tag type="default">{{ itemData.title }}</el-tag>
      </el-form-item>
      <el-form-item label="审批状态">
        <el-tag :type="itemData.statusColor">{{ itemData.statusText }}</el-tag>
      </el-form-item>
      <el-form-item label="申请明细">
        <el-descriptions :column="1" border>
          <el-descriptions-item
            v-for="item in headers"
            :key="item.column"
            labelStyle="width: 300px"
          >
            <template slot="label">
              {{ item.title }}
            </template>
            {{ items[item.column] }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form-item>
    </el-form>
    <template #button-after>
      <slot name="button-after" :item="itemData"></slot>
    </template>
  </m-dialog>
</template>

<script>
import {
  getApprovalApply
} from '@/api/approval'
import {
  APPROVAL_STATUS
} from '@/utils/dict'
export default {
  name: 'ApprovalDetails',
  data () {
    return {
      statusList: APPROVAL_STATUS,
      headers: [],
      items: [],
      itemData: {},
      loading: false
    }
  },
  methods: {
    close () {
      this.$refs.dialog.close()
    },
    async open (item) {
      this.itemData = {
        ...item,
        statusText: this.statusList[item.status].text,
        statusColor: this.statusList[item.status].color
      }
      this.$refs.dialog.open()
      this.loading = true
      try {
        const { data } = await getApprovalApply({ workFlowInstanceId: item.workFlowInstanceId })
        this.headers = data.columns
        this.items = data.data
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>