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: 'serialNo',
            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: 'supplierName',
            action: 'supplierName',
            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>