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

<template>
  <div>

    <headerTitle title="委外单"></headerTitle>
    <ele-pro-table ref="table" :needPage="false" :columns="columns" :toolkit="[]" :datasource="list"
      row-key="id">


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




    </ele-pro-table>


  </div>
</template>

<script>
import { getFile } from '@/api/system/file';
import {
  applyOutsource,
} from '@/api/bpm/components/purchasingManage/outSourceSendCk';


export default {
  components: {

  },
  props: {
    businessId: {
      default: ''
    }
  },
  data() {
    return {
      detailId: '',

      list: [],

    };
  },

  computed: {
    // 表格列配置
    columns() {
      return [
        {
          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: 'categoryCode',
          label: '物品Code',
          align: 'center'
        },
        
        {
          prop: 'categoryName',
          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: 'produceRoutingName',
          label: '工艺路线',
          align: 'center',
        },

        {
          prop: 'warehouseName',
          label: '仓库',
          align: 'center',
        },


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


    


      ];
    },

    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    },
  },
  created() {
    this.getDetailData(this.businessId);
  },
  methods: {
    downloadFile(file) {
      getFile({ objectName: file.storePath }, file.name);
    },
    async getDetailData(id) {
      this.loading = true;
      const data = await applyOutsource(id);
      this.loading = false;
      if (data) {
        this.list = [ data ];
      }
    },


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

  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.headbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
  }
}
</style>