opms_frontend/src/views/proj/business/components/DetailsWorkOrder.vue

<template>
  <div style="height: 100%">
    <el-table v-loading="listLoading" border :data="list" height="calc(100% - 42px)">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        align="center"
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="item.prop === 'orderStatus'">
            {{ selectDictLabel(orderStatusOptions, row.orderStatus) }}
          </span>
          <span v-else-if="item.prop === 'createdTime'">
            {{ parseTime(row.createdTime, '{y}-{m}-{d}') }}
          </span>
          <el-button v-else-if="item.prop === 'name'" class="link-button" type="text" @click="handleDetail(row)">
            {{ row[item.prop] }}
          </el-button>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import workOrderApi from '@/api/work/index'
  import to from 'await-to-js'

  export default {
    name: 'DetailsContract',
    data() {
      return {
        busId: undefined,
        queryForm: {
          nboCode: undefined,
          pageNum: 1,
          pageSize: 9999,
        },
        listLoading: false,
        selectRows: [],
        showColumns: [],
        columns: [
          {
            label: '工单名称',
            width: '160px',
            prop: 'name',
            disableCheck: true,
          },
          {
            label: '工单类型',
            width: 'auto',
            prop: 'orderTypeName',
          },
          {
            label: '工单状态',
            width: '80px',
            prop: 'orderStatus',
          },
          {
            label: '支持人员',
            width: 'auto',
            prop: 'assignUserName',
          },
          // {
          //   label: '反馈信息',
          //   width: 'auto',
          //   prop: 'feedBack',
          // },
          {
            label: '创建人',
            width: '80px',
            prop: 'createdName',
          },
          {
            label: '创建时间',
            width: '80px',
            prop: 'createdTime',
          },
        ],
        orderStatusOptions: [],
        list: [],
      }
    },
    mounted() {
      this.getOptions()
    },
    methods: {
      getOptions() {
        Promise.all([this.getDicts('work_order_status')])
          .then(([workorder]) => {
            this.orderStatusOptions = workorder.data.values || []
          })
          .catch((err) => console.log(err))
      },
      open(nboCode) {
        this.queryForm.nboCode = nboCode
        this.fetchData()
      },
      handleDetail(row) {
        this.$router.push({
          name: 'WorkOrderDetail',
          query: {
            id: row.id,
          },
        })
      },
      async fetchData() {
        this.listLoading = true
        const params = { ...this.queryForm }
        const [err, res] = await to(workOrderApi.getList(params))
        if (err) return (this.listLoading = false)
        this.list = res.data.list || []
        this.total = res.data.total
        this.listLoading = false
      },
    },
  }
</script>