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">


      <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: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'
        },


        {
          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>