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

<template>
  <div>

    <headerTitle title="采购信息"></headerTitle>
    <el-form :model="formData" ref="formRef" label-width="120px" class="ele-body" :rules="rules">
      <el-row :gutter="32">
        <el-col :span="12">
          <el-form-item label="配料计划名称" prop="name">
            <el-input placeholder="请选择" v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input placeholder="备注" v-model="formData.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form :model="formData" ref="tableForm">
      <ele-pro-table ref="table" :needPage="false" :columns="columns" row-key="id">
        <!-- 展开内容 -->
        <template v-slot:expand="{ row }">
          <div style="
              width: calc(100% - 95px);
              min-height: 60px;
              margin-left: 95px;
            " v-if="row.materialList.length > 0">
            <ele-pro-table :toolbar="false" toolsTheme="none" ref="table2" :need-page="false"
              :datasource="row.materialList" :columns="columns2" row-key="id">
              <template v-slot:sort="{ $index }">
                {{ $index }}
              </template>

              <template v-slot:deliveryMethod="{ row }">
                {{ row.deliveryMethod == 1 ? '一次性到货' : '分批到货' }}
              </template>

              <template v-slot:requireDeliveryTime="{ row }">
                <span v-if="row.deliveryMethod == 1">{{ row.requireDeliveryTime }}</span>


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


              <template v-slot:imgUrl="{ row }">
                <div v-if="row.imgUrl && row.imgUrl?.length">
                  <el-link v-for="link in row.imgUrl" :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>
      </ele-pro-table>
    </el-form>

    <timeDialog ref="timeDialogRef"></timeDialog>
  </div>
</template>
  
<script>
import { getById } from '@/api/bpm/components/materialPlan/index';
import { getFile } from '@/api/system/file';
import timeDialog from './timeDialog'

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

  data() {
    return {
      visible: false,
      title: '采购配料计划',

      // 表格列配置
      columns: [
        {
          width: 45,
          type: 'expand',
          columnKey: 'materialList',
          align: 'center',
          slot: 'expand'
        },

        {
          width: 50,
          label: '序号',
          type: 'index',
          align: 'center',
          slot: 'index'
        },

        {
          prop: 'salesOrderCode',
          label: '销售订单号',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 170
        },
        {
          prop: 'customerName',
          label: '客户名称',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'deliveryNum',
          label: '客户代号',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'productCode',
          label: '产品编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 140
        },

        {
          prop: 'productName',
          label: '产品名称',
          align: 'center',
          minWidth: 120
        },

        {
          prop: 'model',
          label: '型号',
          align: 'center',
          minWidth: 120
        },

        {
          prop: 'brandNo',
          label: '牌号',
          align: 'center'
        },

        {
          prop: 'deliveryTime',
          label: '交付日期',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'contractNum',
          label: '合同数量',
          align: 'center'
        },
        {
          prop: 'lackNum',
          label: '欠交数量',
          align: 'center'
        },




      ],

      columns2: [
        {
          width: 50,
          label: '序号',
          prop: 'sort',
          slot: 'sort',
          align: 'center'
        },

        {
          label: '物料名称',
          prop: 'name',
          align: 'center'
        },

        {
          label: '物料编码',
          prop: 'code',
          align: 'center'
        },
        {
          label: '牌号',
          prop: 'brandNum',
          align: 'center'
        },
        {
          label: '型号',
          prop: 'modelType',
          align: 'center'
        },

        {
          prop: 'inventoryQuantity',
          label: '库存',
          showOverflowTooltip: true,

        },

        {
          prop: 'unit',
          label: '计量单位',
          showOverflowTooltip: true,
          action: 'unit',
        },

        {
          label: '需求数量',
          prop: 'demandQuantity',
          align: 'center',
        },

        {
          label: '采购数量',
          prop: 'purchaseQuantity',
          align: 'center'
        },

        {
          label: '到货方式',
          slot: 'deliveryMethod',
          action: 'deliveryMethod',
          align: 'center'
        },

        {
          label: '要求到货时间',
          slot: 'requireDeliveryTime',
          action: 'requireDeliveryTime',
          align: 'center'
        },



        {
          label: '图纸',
          slot: 'imgUrl',
          action: 'imgUrl',
          align: 'center',
        },


        {
          label: '附件',
          slot: 'files',
          action: ' files',
          align: 'center',
          minWidth: 140
        },




      ],

      rules: {},

      formData: {
        name: '',
        remark: '',
        detailRemoveIds: [],
        materialRemoveIds: []
      }
    };
  },
  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.$set(this.formData, 'name', res.name);
        this.$set(this.formData, 'remark', res.remark);
        this.formData['id'] = res.id;
        this.$refs.table.setData([...res.salesOrderList]);
        this.$nextTick(() => {
          this.$refs.table.toggleRowExpansionAll()
          this.$forceUpdate()
        })
      }
    },

    handleMethod(row) {
      this.$refs.timeDialogRef.open(row)
    },
  }
};
</script>
  
<style lang="scss" scoped>
:deep(.el-table__expanded-cell) {

  padding-bottom: 30px !important;
  border-bottom: 12px solid #CCFFCC !important;
}
</style>