kd-aiot-frontend-aps/src/views/materialPlan/components/plan-edit-dialog.vue

<template>
  <ele-modal :visible.sync="visible" :closed="cancel" :title="`${type == 'add' ? '创建' : '编辑'}采购配料计划`"
    custom-class="ele-dialog-form" :close-on-click-modal="false" :close-on-press-escape="false" width="80%">
    <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:toolbar>
          <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="showAdd">
            添加销售订单
          </el-button>
        </template>




        <template v-slot:code="{ row }">
          <el-input placeholder="请输入" readonly :value="row.code || row.salesOrderCode"></el-input>
        </template>



        <template v-slot:productionPlanId="{ row }">
          <el-link type="primary" v-if="!row.productionPlanId" :underline="false"
            @click.native="openVersion(row)">选择</el-link>
        </template>



        <template v-slot:action="{ row, $index }">
          <template>
            <el-link type="primary" :underline="false" @click="categorySelect(row)">
              添加物料
            </el-link>
            <el-popconfirm class="ele-action" title="确定要删除此销售订单吗？" @confirm="remove(row, $index)">
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </template>


        <!-- 展开内容 -->
        <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:demandQuantity="{ row }">
                <el-input v-model="row.demandQuantity" placeholder="请输入" @input="(value) =>
                (row.demandQuantity = value.replace(
                  /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                  '$1$2.$3'
                ))
                  "></el-input>
              </template>


              <template v-slot:purchaseQuantity="{ row }">
                <el-input v-model="row.purchaseQuantity" placeholder="请输入" @input="(value) =>
                (row.purchaseQuantity = value.replace(
                  /^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
                  '$1$2.$3'
                ))
                  "></el-input>
              </template>

              <template v-slot:deliveryMethod="{ row }">
                <el-select clearable class="ele-block" v-model="row.deliveryMethod" placeholder="请选择">
                  <el-option label="一次性到货" :value="1" />
                  <el-option label="分批到货" :value="2" @click.native="handleMethod(row)" />
                </el-select>
              </template>

              <template v-slot:requireDeliveryTime="{ row }">
                <el-date-picker style="width: 100%" clearable v-model="row.requireDeliveryTime" type="date"
                  v-if="row.deliveryMethod == 1" value-format="yyyy-MM-dd" placeholder="请选择日期">
                </el-date-picker>

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



              <template v-slot:imgUrl="{ row }">
                <fileUpload v-model="row.imgUrl" module="main" :showLib="false" :limit="1" />
              </template>

              <template v-slot:annex="{ row }">
                <fileUpload v-model="row.annex" module="main" :showLib="false" :limit="1" />
              </template>





              <template v-slot:action="{ row }">
                <el-popconfirm class="ele-action" title="确定要删除当前物料吗？" @confirm="remove2(row)">
                  <template v-slot:reference>
                    <el-link type="danger" :underline="false" icon="el-icon-delete">
                      删除
                    </el-link>
                  </template>
                </el-popconfirm>
              </template>

            </ele-pro-table>
          </div>

        </template>


      </ele-pro-table>

    </el-form>

    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">保存</el-button>
      <el-button type="primary" @click="confirm">保存并提交</el-button>
    </div>


    <saleOrderPop ref="saleOrderRef" @chooseOrder="chooseOrder"></saleOrderPop>



    <ProductModal ref="productRefs" @chooseModal="chooseModal" />

    <ProductionVersion ref="versionRefs" @changeProduct="changeProduct"></ProductionVersion>

    <timeDialog ref="timeDialogRef" @chooseTime="chooseTime"></timeDialog>

  </ele-modal>
</template>

<script>

import saleOrderPop from './saleOrderPop.vue'
import ProductModal from './ProductModal.vue'
import { listBomBySalesOrderIds, listBomBySalesOrderId, save, getById } from '@/api/materialPlan/index';
import ProductionVersion from '@/components/CreatePlan/ProductionVersion2.vue';
import fileUpload from '@/components/upload/fileUpload';
import timeDialog from './timeDialog'
export default {
  components: {
    saleOrderPop,
    ProductModal,
    ProductionVersion,
    fileUpload,
    timeDialog

  },
  data() {

    return {
      visible: false,
      type: 'add',

      tableData: [],

      xsId: null,


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

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

        {
          prop: 'code',
          label: '销售订单号',
          slot: 'code',
          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'
        },


        {
          prop: 'productionPlanId',
          label: '工艺路线',
          slot: 'productionPlanId',
          align: 'center',
          minWidth: 110
        },



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

      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: 'packingCountBase',
          label: '计量库存',
          sortable: 'custom',
          align: 'center',
        },

        {
          label: '计量单位',
          prop: 'unit',
          align: 'center',
        },

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

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

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

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



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


        {
          label: '附件',
          slot: 'annex',
          action: ' annex',
          align: 'center',
        },



        {
          columnKey: 'action',
          label: '操作',
          width: 70,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }

      ],
      rules: {
        name: [
          {
            required: true,
            message: '请输入配料计划名称',
            trigger: ['blur', 'change']
          }
        ],


      },
      formData: {
        name: '',
        remark: '',
        detailRemoveIds: [],
        materialRemoveIds: []

      },


    };
  },
  methods: {
    async open(type, row) {
      this.type = type;
      if (row) {
        this.getDetail(row.id)
      }
      this.visible = true;
    },


    getDetail(id) {
      getById(id).then(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]);

      })
    },

    confirm() {
      this.$refs.formRef.validate(async (value) => {
        if (value) {

          let _arr = this.$refs.table.getData() ?? []

          if (_arr.length == 0) {
            this.$message.info('请添加销售订单');
            return false
          }
          let _arr2 = []

          _arr2 = _arr.map(m => {
            if (Object.prototype.hasOwnProperty.call(m, "salesOrderId") && m.salesOrderId) {
            } else {
              m.salesOrderId = m.id
              m.salesOrderCode = m.code
              delete m.id
              delete m.code
            }

            return {
              ...m,
            }
          })

          this.formData['type'] = 1
          this.formData['salesOrderList'] = _arr2
          await save(this.formData);
          this.$message.success('保存成功！');
          this.$emit('success');
          this.cancel();
        }
      });
    },
    cancel() {
      this.visible = false;
      this.formData = {};
      this.formData.detailRemoveIds = []
      this.formData.materialRemoveIds = []
      this.$refs.table.setData([]);
      this.$refs.formRef.resetFields();
    },

    datasource({ }) {
      return []
    },

    reload() {
      this.$refs.table.reload();
    },

    showAdd() {
      this.tableData = this.$refs.table.getData();

      this.$refs.saleOrderRef.open(this.tableData)
    },

    chooseOrder(list) {
      let salesOrderIds = []
      list.map((m => {
        salesOrderIds.push(m.id)
        return {
          ...m,
        }
      }))



      if (salesOrderIds.length > 0) {
        listBomBySalesOrderIds({ salesOrderIds: salesOrderIds }).then((res) => {
          this.$refs.table.setData([...this.tableData, ...res]);

          this.$refs.table.toggleRowExpansionAll()
        })
      }
    },

    remove(row, index) {
      this.formData.detailRemoveIds.push(row.id)
      let _arr = this.$refs.table.getData() || [];
      _arr.splice(index, 1);
      this.$refs.table.setData([..._arr]);
    },

    categorySelect(row) {
      this.$refs.productRefs.open(row.materialList, row)
    },

    chooseModal(data, current) {
      data.map((m => {
        m.detailId = current.id

        return {
          ...m,
        }
      }))

      let tableList = []
      tableList = this.$refs.table.getData()

      tableList.forEach(e => {
        if (e.id == current.id) {

          if (e.materialList.length == 0) {
            e.materialList = data

          } else {
            e.materialList = [...e.materialList, ...data]

          }


        }
      })

      this.$refs.table.setData([...tableList]);

    },

    remove2(row) {
      const data = this.$refs.table.getData() ?? [];
      this.formData.materialRemoveIds.push(row.id)
      data.forEach((e) => {
        if (row.detailId == e.id) {
          e.materialList = e.materialList.filter((d) => d.id !== row.id);
        }
      })

      this.$refs.table.setData([...data])
      this.$forceUpdate()
    },







    openVersion(row) {
      this.xsId = row.id
      this.$refs.versionRefs.open();
    },
    changeProduct(data) {
      let param = {
        salesOrderIds: [this.xsId],
        produceRoutingId: data.id
      }

      listBomBySalesOrderId(param).then((res) => {


        let tableList = []
        tableList = this.$refs.table.getData()

        tableList.forEach(e => {
          if (e.id == this.xsId) {

            res.map(m => {
              m.detailId = this.xsId
              return {
                ...m,
              }
            })

            e.materialList = res

            this.$nextTick(() => {
              this.$refs.table.setData([...tableList]);
              this.$refs.table.toggleRowExpansionAll()
            })
          }
        })

      })

    },

    handleMethod(row) {
      this.$refs.timeDialogRef.open(row)
    },
    chooseTime(current , timeList) {

      let tableList = []
      tableList = this.$refs.table.getData()

      tableList.forEach(e => {
        if (e.id == current.detailId) {
          console.log(e)
          e.materialList.forEach(m => {
            if(m.id == current.id) {
              m.timeList = timeList
            }
          })
    


        }
      })

      this.$refs.table.setData([...tableList]);
    }
  }
};
</script>


<style lang="scss" scoped>
:deep(.el-table__expanded-cell) {

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