优化

src/views/materialPlan/components/produce-edit-dialog.vue

@@ -0,0 +1,534 @@
+<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-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:remark="{ row }">
+          <el-input placeholder="备注" v-model="row.remark"></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:100%; min-height: 60px" 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: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: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>
+    </div>
+
+
+    <saleOrderPop ref="saleOrderRef" @chooseOrder="chooseOrder"></saleOrderPop>
+
+
+
+    <ProductModal ref="productRefs" @chooseModal="chooseModal" />
+
+    <ProductionVersion ref="versionRefs" @changeProduct="changeProduct"></ProductionVersion>
+
+  </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';
+export default {
+  components: {
+    saleOrderPop,
+    ProductModal,
+    ProductionVersion
+
+
+  },
+  data() {
+
+    return {
+      visible: false,
+      type: 'add',
+
+      tableData: [],
+
+      xsId: null,
+
+
+      // 表格列配置
+      columns: [
+        {
+          width: 45,
+          type: 'expand',
+          columnKey: 'materialList',
+          align: 'center',
+          slot: 'expand'
+        },
+
+        {
+          prop: 'code',
+          label: '销售订单号',
+          slot: 'code',
+          showOverflowTooltip: true,
+          align: 'center',
+          minWidth: 150
+        },
+        {
+          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: 'remark',
+          label: '备注',
+          slot: 'remark',
+          showOverflowTooltip: true,
+          align: 'center',
+          minWidth: 110
+        },
+
+        {
+          prop: 'productionPlanId',
+          label: '工艺路线物料',
+          slot: 'productionPlanId',
+
+          align: 'center',
+          minWidth: 110
+        },
+
+
+
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 150,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+      ],
+
+      columns2: [
+
+        {
+          label: '物料名称',
+          prop: 'name',
+        },
+
+        {
+          label: '物料编码',
+          prop: 'code'
+        },
+        {
+          label: '牌号',
+          prop: 'brandNum'
+        },
+        {
+          label: '型号',
+          prop: 'modelType'
+        },
+
+        {
+          prop: 'availableCountBase',
+          label: '包装库存',
+          sortable: 'custom',
+        },
+        {
+          label: '单位',
+          prop: 'weightUnit'
+        },
+
+        {
+          prop: 'packingCountBase',
+          label: '计量库存',
+          sortable: 'custom',
+        },
+
+        {
+          label: '计量单位',
+          prop: 'unit'
+        },
+
+        {
+          label: '需求数量',
+          slot: 'demandQuantity',
+          action: 'demandQuantity'
+        },
+
+        {
+          label: '采购数量',
+          slot: 'purchaseQuantity',
+          action: 'purchaseQuantity'
+        },
+
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 70,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请选择物料',
+            trigger: ['blur', 'change']
+          }
+        ],
+
+
+      },
+      formData: {
+        name: '',
+
+
+      },
+
+
+    };
+  },
+  methods: {
+    async open(type, row) {
+      this.type = type;
+      if (row) {
+        this.getDetail(row.id)
+      }
+      this.visible = true;
+    },
+
+
+    getDetail(id) {
+      getById(id).then(res => {
+        this.formData.name =  res.name
+        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.$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) {
+      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() ?? [];
+      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()
+            })
+          }
+        })
+
+      })
+
+    },
+  }
+};
+</script>

src/views/materialPlan/index.vue

@@ -34,16 +34,19 @@
       </ele-pro-table>
     </el-card>
     <planEditDialog ref="planEditDialogRef" @success="reload" />
+    <produceEditDialog ref="produceEditDialogRef" @success="reload"></produceEditDialog>
   </div>
 </template>
 
 <script>
 import materialPlanSearch from './components/materialPlan-search.vue';
 import planEditDialog from './components/plan-edit-dialog.vue';
+import produceEditDialog from './components/produce-edit-dialog'
 import { getList, del } from '@/api/materialPlan/index';
 export default {
   components: {
     planEditDialog,
+    produceEditDialog,
     materialPlanSearch
   },
 
@@ -150,6 +153,9 @@ export default {
     handleEdit(type, row) {
       if (this.activeName == 'first') {
         this.$refs.planEditDialogRef.open(type, row);
+      } else if (this.activeName == 'second') {
+        this.$refs.produceEditDialogRef.open(type, row);
+
       }
 
     },