kd-aiot-frontend-wt/src/views/bpm/handleTask/components/outsourcedWarehousing/detailDialog.vue

<template>
  <div>
    <headerTitle title="委外申请单"></headerTitle>

    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      row-key="id"
      cache-key="outsourcedWarehousing"
      :needPage="false"
    >
      <template v-slot:requireDeliveryTime="{ row }">
        <span v-if="row.deliveryMethod == 1">{{
          row.requireDeliveryTime
        }}</span>

        <el-link
          v-if="row.deliveryMethod == 2"
          type="primary"
          :underline="false"
          @click.native="handleMethod(row)"
          >分批时间</el-link
        >
      </template>

      <template v-slot:type="{ row }">
        <div v-if="row.type == 1">采购委外</div>
        <div v-if="row.type == 2">直接发货委外</div>
        <div v-if="row.type == 3">无采购委外</div>
        <div v-if="row.type == 4">有料委外</div>
        <div v-if="row.type == 5">无料委外</div>
      </template>

      <template v-slot:status="{ row }">
        <el-tag>{{ row.status == 1 ? '已发布' : '未发布' }}</el-tag>
      </template>

      <template v-slot:technicalDrawings="{ row }">
        <div v-if="row.technicalDrawings && row.technicalDrawings?.length">
          <el-link
            v-for="link in row.technicalDrawings"
            :key="link.id"
            type="primary"
            :underline="false"
            @click="downloadFile(link)"
          >
            {{ link.name }}</el-link
          >
        </div>
      </template>

      <template v-slot:files="{ row }">
        <div v-if="row.files && row.files?.length">
          <el-link
            v-for="link in row.files"
            :key="link.id"
            type="primary"
            :underline="false"
            @click="downloadFile(link)"
          >
            {{ link.name }}</el-link
          >
        </div>
      </template>

      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" @click="handleDetails(row)">
          详情
        </el-link>
      </template>
    </ele-pro-table>

    <detail ref="detailsRef"></detail>

    <timeDialog ref="timeDialogRef"></timeDialog>
  </div>
</template>

<script>
  import { getById } from '@/api/bpm/components/outsourcedWarehousing/index';
  import Detail from './components/details.vue';
  import timeDialog from './components/timeDialog.vue';
  import { getFile } from '@/api/system/file';

  export default {
    components: {
      Detail,
      timeDialog
    },
    props: {
      businessId: {
        default: ''
      }
    },
    mixins: [],

    data() {
      return {
        visible: false,

        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },

          {
            prop: 'code',
            label: '委外单编码',
            align: 'center'
          },
          {
            prop: 'name',
            label: '委外单名称',
            align: 'center'
          },

          {
            prop: 'workOrderCode',
            label: '工单编码',
            align: 'center'
          },

          {
            prop: 'taskName',
            label: '工序',
            align: 'center'
          },

          {
            prop: 'totalCount',
            label: '委外数量',
            align: 'center'
          },

          {
            prop: 'totalWeight',
            label: '委外重量',
            align: 'center'
          },

          {
            slot: 'type',
            label: '委外类型',
            align: 'center'
          },

          {
            prop: 'remark',
            label: '备注',
            align: 'center'
          },

          {
            slot: 'requireDeliveryTime',
            label: '预计到货日期',
            align: 'center',
            minWidth: 70
          },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            minWidth: 70
          },

          {
            slot: 'status',
            label: '状态',
            align: 'center'
          },

          {
            label: '图片附件',
            slot: 'technicalDrawings',
            action: 'technicalDrawings',
            minWidth: 100
          },

          {
            label: '附件',
            slot: 'files',
            action: 'files',
            minWidth: 100
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 140,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],

        rules: {}
      };
    },
    created() {
      this.getDetailData(this.businessId);
    },
    methods: {
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },

      async getDetailData(id) {
        this.loading = true;
        const res = await getById(id);

        this.loading = false;
        if (res) {
          this.$refs.table.setData([res]);
          this.$nextTick(() => {
            this.$refs.table.toggleRowExpansionAll();
            this.$forceUpdate();
          });
        }
      },

      handleDetails(row) {
        this.$refs.detailsRef.open(row);
      },

      handleMethod(row) {
        this.$refs.timeDialogRef.open(row, 'details');
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-table__expanded-cell) {
    padding-bottom: 30px !important;
    border-bottom: 12px solid #ccffcc !important;
  }
</style>