From c55fb124359d43db6891ef39f68040e41932e6be Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 26 三月 2026 09:56:47 +0800
Subject: [PATCH] 军泰伟业 1.bom添加可以按bom添加物料清单功能,并不用绑定工序 2.生产订单新增修改时选择产品后直接反显工艺路线和物料清单并可以修改

---
 src/views/productionManagement/productionOrder/New.vue |  410 ++++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 353 insertions(+), 57 deletions(-)

diff --git a/src/views/productionManagement/productionOrder/New.vue b/src/views/productionManagement/productionOrder/New.vue
index b8dcaf3..07295d7 100644
--- a/src/views/productionManagement/productionOrder/New.vue
+++ b/src/views/productionManagement/productionOrder/New.vue
@@ -3,63 +3,95 @@
     <el-dialog
         v-model="isShow"
         title="鏂板鐢熶骇璁㈠崟"
-        width="800"
+        width="1500"
+        :close-on-click-modal="false"
         @close="closeModal"
+        class="production-order-dialog"
     >
-      <el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
-        <el-form-item
-            label="浜у搧鍚嶇О"
-            prop="productModelId"
-            :rules="[
-                {
-                required: true,
-                message: '璇烽�夋嫨浜у搧',
-                trigger: 'change',
-              }
-            ]"
-        >
-          <el-button type="primary" @click="showProductSelectDialog = true">
-            {{ formState.productName ? formState.productName : '閫夋嫨浜у搧' }}
-          </el-button>
-        </el-form-item>
-				<el-form-item
-					label="鍥剧焊缂栧彿"
-					prop="productModelName"
-				>
-					<el-input v-model="formState.productModelName"  disabled />
-				</el-form-item>
-        <el-form-item
-            label="瑙勬牸鍨嬪彿"
-            prop="drawingNumber"
-        >
-          <el-input v-model="formState.drawingNumber"  disabled />
-        </el-form-item>
-        <el-form-item
-            label="鍗曚綅"
-            prop="unit"
-        >
-          <el-input v-model="formState.unit"  disabled />
-        </el-form-item>
-
-        <el-form-item label="宸ヨ壓璺嚎">
-          <el-select v-model="formState.routeId"
-                     placeholder="璇烽�夋嫨宸ヨ壓璺嚎"
-                     style="width: 100%;"
-                     :loading="bindRouteLoading">
-            <el-option v-for="item in routeOptions"
-                       :key="item.id"
-                       :label="`${item.processRouteCode || ''}`"
-                       :value="item.id" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item
-            label="闇�姹傛暟閲�"
-            prop="quantity"
-        >
-          <el-input-number v-model="formState.quantity" :step="1" :min="1" style="width: 100%" />
-        </el-form-item>
-      </el-form>
+      <!-- 鍩烘湰淇℃伅 -->
+      <div class="section-card">
+        <div class="section-header">
+          <span class="section-icon">馃搵</span>
+          <span class="section-title-text">鍩烘湰淇℃伅</span>
+        </div>
+        <el-form label-width="100px" :model="formState" label-position="right" ref="formRef" class="compact-form">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item
+                  label="浜у搧鍚嶇О"
+                  prop="productModelId"
+                  :rules="[{ required: true, message: '璇烽�夋嫨浜у搧', trigger: 'change' }]"
+              >
+                <el-button type="primary" @click="showProductSelectDialog = true" class="select-btn">
+                  {{ formState.productName ? formState.productName : '閫夋嫨浜у搧' }}
+                </el-button>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="鍥剧焊缂栧彿" prop="productModelName">
+                <el-input v-model="formState.productModelName" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="鍗曚綅" prop="unit">
+                <el-input v-model="formState.unit" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="閿�鍞悎鍚屽彿" prop="salesContractNo">
+                <el-input v-model="formState.salesContractNo" placeholder="璇疯緭鍏ラ攢鍞悎鍚屽彿" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="瀹㈡埛鍚嶇О" prop="customerName">
+                <el-input v-model="formState.customerName" placeholder="璇疯緭鍏ュ鎴峰悕绉�" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="闇�姹傛暟閲�" prop="quantity">
+                <el-input-number v-model="formState.quantity" :step="1" :min="1" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="浜や粯鏃ユ湡" prop="deliveryDate">
+                <el-date-picker
+                    v-model="formState.deliveryDate"
+                    type="date"
+                    placeholder="閫夋嫨浜や粯鏃ユ湡"
+                    style="width: 100%"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="鍥剧焊涓婁紶">
+                <el-upload
+                    action="#"
+                    :auto-upload="false"
+                    :on-change="handleFileChange"
+                    :file-list="fileList"
+                    :limit="5"
+                    class="upload-inline"
+                >
+                  <el-button type="primary" plain size="small">
+                    <el-icon><Upload /></el-icon> 閫夋嫨鏂囦欢
+                  </el-button>
+                  <template #tip>
+                    <div class="el-upload__tip">鏀寔jpg/png/pdf锛屽崟涓笉瓒呰繃10MB</div>
+                  </template>
+                </el-upload>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
 
       <!-- 浜у搧閫夋嫨寮圭獥 -->
       <ProductSelectDialog
@@ -67,6 +99,118 @@
           @confirm="handleProductSelect"
           single
       />
+
+      <!-- 鐢熶骇浠诲姟 -->
+      <div class="section-card">
+        <div class="section-header">
+          <span class="section-icon">馃敡</span>
+          <span class="section-title-text">鐢熶骇浠诲姟</span>
+          <el-button type="primary" size="small" @click="addProductionTask" class="add-btn">
+            <el-icon><Plus /></el-icon> 娣诲姞浠诲姟
+          </el-button>
+        </div>
+        <div class="table-container">
+          <el-table :data="productionTaskList" border size="small" class="compact-table">
+        <el-table-column type="index" label="搴忓彿" width="60" />
+        <el-table-column label="宸ュ簭鍚嶇О" min-width="150">
+          <template #default="{ row }">
+            <el-input v-model="row.processName" placeholder="璇疯緭鍏ュ伐搴忓悕绉�" />
+          </template>
+        </el-table-column>
+        <el-table-column label="璁″垝鏁�" min-width="120">
+          <template #default="{ row }">
+            <el-input-number v-model="row.planQuantity" :min="0" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="鎶ュ伐鏉冮檺" min-width="150">
+          <template #default="{ row }">
+            <el-input v-model="row.reportPermission" placeholder="璇疯緭鍏ユ姤宸ユ潈闄�" />
+          </template>
+        </el-table-column>
+        <el-table-column label="璁″垝寮�濮嬫椂闂�" min-width="180">
+          <template #default="{ row }">
+            <el-date-picker
+                v-model="row.planStartTime"
+                type="datetime"
+                placeholder="閫夋嫨寮�濮嬫椂闂�"
+                style="width: 100%"
+                format="YYYY-MM-DD HH:mm"
+                value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="璁″垝缁撴潫鏃堕棿" min-width="180">
+          <template #default="{ row }">
+            <el-date-picker
+                v-model="row.planEndTime"
+                type="datetime"
+                placeholder="閫夋嫨缁撴潫鏃堕棿"
+                style="width: 100%"
+                format="YYYY-MM-DD HH:mm"
+                value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="鎿嶄綔" width="80" fixed="right" align="center">
+          <template #default="{ $index }">
+            <el-button type="danger" link size="small" @click="removeProductionTask($index)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="productionTaskList.length === 0" class="empty-tip">
+        <el-empty description="鏆傛棤鐢熶骇浠诲姟锛岀偣鍑讳笂鏂规寜閽坊鍔�" :image-size="60" />
+      </div>
+        </div>
+      </div>
+
+      <!-- 鐢ㄦ枡娓呭崟 -->
+      <div class="section-card">
+        <div class="section-header">
+          <span class="section-icon">馃摝</span>
+          <span class="section-title-text">鐢ㄦ枡娓呭崟</span>
+          <el-button type="primary" size="small" @click="addMaterialItem" class="add-btn">
+            <el-icon><Plus /></el-icon> 娣诲姞鐢ㄦ枡
+          </el-button>
+        </div>
+        <div class="table-container">
+          <el-table :data="materialList" border size="small" class="compact-table">
+            <el-table-column type="index" label="搴忓彿" width="50" align="center" />
+            <el-table-column label="鍥剧焊缂栧彿" min-width="140">
+              <template #default="{ row }">
+                <el-input v-model="row.drawingNumber" placeholder="璇疯緭鍏ュ浘绾哥紪鍙�" size="small" />
+              </template>
+            </el-table-column>
+            <el-table-column label="浜у搧鍚嶇О" min-width="140">
+              <template #default="{ row }">
+                <el-input v-model="row.productName" placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�" size="small" />
+              </template>
+            </el-table-column>
+            <el-table-column label="鍗曚綅鐢ㄩ噺" min-width="100">
+              <template #default="{ row }">
+                <el-input-number v-model="row.unitQuantity" :min="0" :precision="2" size="small" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="搴撳瓨鏁伴噺" min-width="100">
+              <template #default="{ row }">
+                <el-input-number v-model="row.inventoryQuantity" :min="0" size="small" style="width: 100%" />
+              </template>
+            </el-table-column>
+            <el-table-column label="鎿嶄綔" width="80" fixed="right" align="center">
+              <template #default="{ $index }">
+                <el-button type="danger" link size="small" @click="removeMaterialItem($index)">
+                  <el-icon><Delete /></el-icon>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div v-if="materialList.length === 0" class="empty-tip">
+            <el-empty description="鏆傛棤鐢ㄦ枡娓呭崟锛岀偣鍑讳笂鏂规寜閽坊鍔�" :image-size="60" />
+          </div>
+        </div>
+      </div>
+
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleSubmit">纭</el-button>
@@ -79,6 +223,7 @@
 
 <script setup>
 import {ref, computed, getCurrentInstance} from "vue";
+import { Plus, Delete, Upload } from '@element-plus/icons-vue';
 import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
 import {addProductOrder, listProcessRoute} from "@/api/productionManagement/productionOrder.js";
 
@@ -107,7 +252,19 @@
   unit: "",
   drawingNumber: "",
   quantity: 0,
+  salesContractNo: "",
+  customerName: "",
+  deliveryDate: "",
 });
+
+// 鐢熶骇浠诲姟鍒楄〃
+const productionTaskList = ref([]);
+
+// 鐢ㄦ枡娓呭崟鍒楄〃
+const materialList = ref([]);
+
+// 鏂囦欢鍒楄〃
+const fileList = ref([]);
 
 const isShow = computed({
   get() {
@@ -131,8 +288,16 @@
     productName: "",
     drawingNumber: "",
     productModelName: "",
-    quantity: '',
+    unit: "",
+    quantity: 0,
+    salesContractNo: "",
+    customerName: "",
+    deliveryDate: "",
   };
+  // 閲嶇疆鐢熶骇浠诲姟鍜岀敤鏂欐竻鍗�
+  productionTaskList.value = [];
+  materialList.value = [];
+  fileList.value = [];
   isShow.value = false;
 };
 
@@ -166,6 +331,42 @@
   })
 }
 
+// 娣诲姞鐢熶骇浠诲姟
+const addProductionTask = () => {
+  productionTaskList.value.push({
+    processName: "",
+    planQuantity: 0,
+    reportPermission: "",
+    planStartTime: "",
+    planEndTime: "",
+  });
+};
+
+// 鍒犻櫎鐢熶骇浠诲姟
+const removeProductionTask = (index) => {
+  productionTaskList.value.splice(index, 1);
+};
+
+// 娣诲姞鐢ㄦ枡
+const addMaterialItem = () => {
+  materialList.value.push({
+    drawingNumber: "",
+    productName: "",
+    unitQuantity: 0,
+    inventoryQuantity: 0,
+  });
+};
+
+// 鍒犻櫎鐢ㄦ枡
+const removeMaterialItem = (index) => {
+  materialList.value.splice(index, 1);
+};
+
+// 鏂囦欢涓婁紶鍙樻洿
+const handleFileChange = (file, files) => {
+  fileList.value = files;
+};
+
 const handleSubmit = () => {
   proxy.$refs["formRef"].validate(valid => {
     if (valid) {
@@ -179,7 +380,15 @@
         return;
       }
 
-      addProductOrder(formState.value).then(res => {
+      // 缁勮鎻愪氦鏁版嵁
+      const submitData = {
+        ...formState.value,
+        productionTasks: productionTaskList.value,
+        materials: materialList.value,
+        files: fileList.value,
+      };
+
+      addProductOrder(submitData).then(res => {
         // 鍏抽棴妯℃�佹
         isShow.value = false;
         // 鍛婄煡鐖剁粍浠跺凡瀹屾垚
@@ -197,3 +406,90 @@
   isShow,
 });
 </script>
+
+<style scoped>
+.production-order-dialog :deep(.el-dialog__body) {
+  padding: 15px 20px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.section-card {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.section-icon {
+  font-size: 18px;
+  margin-right: 8px;
+}
+
+.section-title-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  flex: 1;
+}
+
+.add-btn {
+  margin-left: auto;
+}
+
+.compact-form :deep(.el-form-item) {
+  margin-bottom: 12px;
+}
+
+.compact-form :deep(.el-form-item__label) {
+  font-size: 13px;
+  color: #606266;
+}
+
+.select-btn {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.table-container {
+  background: #fff;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.compact-table :deep(.el-table__cell) {
+  padding: 4px 0;
+}
+
+.compact-table :deep(.el-input__wrapper),
+.compact-table :deep(.el-input-number) {
+  width: 100%;
+}
+
+.empty-tip {
+  padding: 20px 0;
+}
+
+.upload-inline :deep(.el-upload) {
+  display: inline-flex;
+}
+
+.upload-inline :deep(.el-upload__tip) {
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+</style>

--
Gitblit v1.9.3