From 217cda7380e07a355053e6ca34fb77334248b7db Mon Sep 17 00:00:00 2001
From: chenhj <1263187585@qq.com>
Date: 星期三, 25 三月 2026 17:23:13 +0800
Subject: [PATCH] feat(productionOrder): 添加生产订单结束功能并优化界面组件

---
 src/views/productionManagement/productionOrder/index.vue |  620 ++++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 472 insertions(+), 148 deletions(-)

diff --git a/src/views/productionManagement/productionOrder/index.vue b/src/views/productionManagement/productionOrder/index.vue
index 87ca041..829f7ab 100644
--- a/src/views/productionManagement/productionOrder/index.vue
+++ b/src/views/productionManagement/productionOrder/index.vue
@@ -1,182 +1,506 @@
 <template>
-	<div class="app-container">
-		<div class="search_form">
-			<div>
-				<span class="search_title">瀹㈡埛鍚嶇О锛�</span>
-				<el-input
-					v-model="searchForm.customerName"
-					style="width: 240px"
-					placeholder="璇疯緭鍏�"
-					@change="handleQuery"
-					clearable
-					prefix-icon="Search"
-				/>
-				<span class="search_title ml10">椤圭洰鍚嶇О锛�</span>
-				<el-input
-					v-model="searchForm.customerName"
-					style="width: 240px"
-					placeholder="璇疯緭鍏�"
-					@change="handleQuery"
-					clearable
-					prefix-icon="Search"
-				/>
-				<span class="search_title ml10">褰曞叆鏃ユ湡锛�</span>
-				<el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
-												placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
-				<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
-				>鎼滅储</el-button
-				>
-			</div>
-			<div>
-				<el-button @click="handleOut">瀵煎嚭</el-button>
-			</div>
-		</div>
-		<div class="table_list">
-			<PIMTable
-				rowKey="id"
-				:column="tableColumn"
-				:tableData="tableData"
-				:page="page"
-				:tableLoading="tableLoading"
-				@pagination="pagination"
-			></PIMTable>
-		</div>
-	</div>
+  <div class="app-container">
+    <div class="search_form">
+      <el-form :model="searchForm"
+               :inline="true">
+        <el-form-item label="瀹㈡埛鍚嶇О:">
+          <el-input v-model="searchForm.customerName"
+                    placeholder="璇疯緭鍏�"
+                    clearable
+                    prefix-icon="Search"
+                    style="width: 160px;"
+                    @change="handleQuery"/>
+        </el-form-item>
+        <el-form-item label="鍚堝悓鍙�:">
+          <el-input v-model="searchForm.salesContractNo"
+                    placeholder="璇疯緭鍏�"
+                    clearable
+                    prefix-icon="Search"
+                    style="width: 160px;"
+                    @change="handleQuery"/>
+        </el-form-item>
+        <el-form-item label="浜у搧鍚嶇О:">
+          <el-input v-model="searchForm.productCategory"
+                    placeholder="璇疯緭鍏�"
+                    clearable
+                    prefix-icon="Search"
+                    style="width: 160px;"
+                    @change="handleQuery"/>
+        </el-form-item>
+        <el-form-item label="瑙勬牸:">
+          <el-input v-model="searchForm.specificationModel"
+                    placeholder="璇疯緭鍏�"
+                    clearable
+                    prefix-icon="Search"
+                    style="width: 160px;"
+                    @change="handleQuery"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary"
+                     @click="handleQuery">鎼滅储
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <div>
+        <el-button type="primary" @click="isShowNewModal = true">鏂板</el-button>
+        <el-button type="danger" @click="handleDelete">鍒犻櫎</el-button>
+        <el-button @click="handleOut">瀵煎嚭</el-button>
+      </div>
+    </div>
+    <div class="table_list">
+      <PIMTable rowKey="id"
+                :column="tableColumn"
+                :tableData="tableData"
+                :page="page"
+                :tableLoading="tableLoading"
+                :row-class-name="tableRowClassName"
+                :isSelection="true"
+                @selection-change="handleSelectionChange"
+                @pagination="pagination">
+        <template #completionStatus="{ row }">
+          <el-progress
+              :percentage="toProgressPercentage(row?.completionStatus)"
+              :color="progressColor(toProgressPercentage(row?.completionStatus))"
+              :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''"
+          />
+        </template>
+      </PIMTable>
+    </div>
+    <el-dialog v-model="bindRouteDialogVisible"
+               title="缁戝畾宸ヨ壓璺嚎"
+               width="500px">
+      <el-form label-width="90px">
+        <el-form-item label="宸ヨ壓璺嚎">
+          <el-select v-model="bindForm.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>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary"
+                     :loading="bindRouteSaving"
+                     @click="handleBindRouteConfirm">纭� 璁�</el-button>
+          <el-button @click="bindRouteDialogVisible = false">鍙� 娑�</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <new-product-order v-if="isShowNewModal"
+                       v-model:visible="isShowNewModal"
+                       @completed="handleQuery"/>
+  </div>
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
-import {
-	listCustomer,
-} from "@/api/basicData/customerFile.js";
-import { ElMessageBox } from "element-plus";
+import {ElMessageBox} from "element-plus";
 import dayjs from "dayjs";
-const { proxy } = getCurrentInstance();
+import {useRouter} from "vue-router";
+import {
+  productOrderListPage,
+  listProcessRoute,
+  bindingRoute,
+  delProductOrder, finishOrder,
+} from "@/api/productionManagement/productionOrder.js";
+import {listMain as getOrderProcessRouteMain} from "@/api/productionManagement/productProcessRoute.js";
+import {fileDel} from "@/api/financialManagement/revenueManagement.js";
+import PIMTable from "@/components/PIMTable/PIMTable.vue";
+
+const NewProductOrder = defineAsyncComponent(() => import("@/views/productionManagement/productionOrder/New.vue"));
+
+const {proxy} = getCurrentInstance();
+
+const router = useRouter();
+const isShowNewModal = ref(false);
 
 const tableColumn = ref([
-	{
-		label: "褰曞叆鏃ユ湡",
-		prop: "customerName",
-		width: 120,
-	},
-	{
-		label: "鍚堝悓鍙�",
-		prop: "taxpayerIdentificationNumber",
-		width: 220,
-	},
-	{
-		label: "瀹㈡埛鍚堝悓鍙�",
-		prop: "addressPhone",
-		width: 250,
-	},
-	{
-		label: "瀹㈡埛鍚嶇О",
-		prop: "contactPerson",
-	},
-	{
-		label: "椤圭洰鍚嶇О",
-		prop: "contactPhone",
-		width:150
-	},
-	{
-		label: "浜у搧澶х被",
-		prop: "basicBankAccount",
-		width: 220,
-	},
-	{
-		label: "瑙勬牸鍨嬪彿",
-		prop: "bankAccount",
-		width: 220,
-	},
-	{
-		label: "鍗曚綅",
-		prop: "bankCode",
-		width:220
-	},
-	{
-		label: "鏁伴噺",
-		prop: "maintainer",
-	},
-	{
-		label: "鎺掍骇鏁伴噺",
-		prop: "maintenanceTime",
-		width: 100,
-	},
-	{
-		label: "瀹屽伐鏁伴噺",
-		prop: "maintenanceTime",
-		width: 100,
-	},
+  {
+    label: "鐢熶骇璁㈠崟鍙�",
+    prop: "npsNo",
+    width: '120px',
+  },
+  {
+    label: "浜у搧鍚嶇О",
+    prop: "productCategory",
+    width: '120px',
+  },
+  {
+    label: "瑙勬牸",
+    prop: "specificationModel",
+    width: '120px',
+  },
+  {
+    label: "UID鐮�",
+    prop: "uidNo",
+    width: '120px',
+  },
+  {
+    label: "宸ヨ壓璺嚎缂栧彿",
+    prop: "processRouteCode",
+    width: '200px',
+  },
+  {
+    label: "棰勮鐢熶骇鏁伴噺",
+    prop: "quantity",
+    width: '140px',
+  },
+  {
+    label: "瀹屾垚鏁伴噺",
+    prop: "completeQuantity",
+  },
+  {
+    dataType: "slot",
+    label: "瀹屾垚杩涘害",
+    prop: "completionStatus",
+    slot: "completionStatus",
+    width: 180,
+  },
+  {
+    label: "寮�濮嬫棩鏈�",
+    prop: "startTime",
+    formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+    width: 120,
+  },
+  {
+    label: "缁撴潫鏃ユ湡",
+    prop: "endTime",
+    formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+    width: 120,
+  },
+  {
+    label: "浜や粯鏃ユ湡",
+    prop: "deliveryDate",
+    formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+    width: 120,
+  },
+  {
+    label: "棰勮鏃ョ▼锛堝ぉ锛�",
+    prop: "expectedSchedule",
+    width: 120,
+  },
+  {
+    label: "鍒堕�犵彮缁�",
+    prop: "manufacturingTeam",
+    width: 120,
+  },
+  {
+    dataType: "action",
+    label: "鎿嶄綔",
+    align: "center",
+    fixed: "right",
+    width: 200,
+    operation: [
+      {
+        name: "宸ヨ壓璺嚎",
+        type: "text",
+        clickFun: row => {
+          showRouteItemModal(row);
+        },
+      },
+      {
+        name: "缁戝畾宸ヨ壓璺嚎",
+        type: "text",
+        showHide: row => !row.processRouteCode,
+        clickFun: row => {
+          openBindRouteDialog(row);
+        },
+      },
+      {
+        name: "浜у搧缁撴瀯",
+        type: "text",
+        clickFun: row => {
+          showProductStructure(row);
+        },
+      },
+      {
+        name: "缁撴潫鐢熶骇",
+        type: "text",
+        showHide: row => !row.isEnd,
+        clickFun: row => {
+          handleFinishOrder(row);
+        },
+      },
+    ],
+  },
 ]);
 const tableData = ref([]);
 const tableLoading = ref(false);
 const page = reactive({
-	current: 1,
-	size: 100,
-	total: 0,
+  current: 1,
+  size: 100,
+  total: 0,
 });
+const selectedRows = ref([]);
 
 const data = reactive({
-	searchForm: {
-		customerName: "",
-		entryDate: [
-			dayjs().format("YYYY-MM-DD"),
-			dayjs().add(1, "day").format("YYYY-MM-DD"),
-		], // 褰曞叆鏃ユ湡
-		entryDateStart: dayjs().format("YYYY-MM-DD"),
-		entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"),
-	},
+  searchForm: {
+    customerName: "",
+    salesContractNo: "",
+    projectName: "",
+    productCategory: "",
+    specificationModel: "",
+  },
 });
-const { searchForm } = toRefs(data);
+const {searchForm} = toRefs(data);
+
+const toProgressPercentage = val => {
+  const n = Number(val);
+  if (!Number.isFinite(n)) return 0;
+  if (n <= 0) return 0;
+  if (n >= 100) return 100;
+  return Math.round(n);
+};
+
+// 30/50/80/100 鍒嗘棰滆壊锛氱孩/姗�/钃�/缁�
+const progressColor = percentage => {
+  const p = toProgressPercentage(percentage);
+  if (p < 30) return "#f56c6c";
+  if (p < 50) return "#e6a23c";
+  if (p < 80) return "#409eff";
+  return "#67c23a";
+};
+
+// 娣诲姞琛ㄨ绫诲悕鏂规硶
+const tableRowClassName = ({row}) => {
+  if (!row.deliveryDate) return '';
+  if (row.isFh) return '';
+
+  const diff = row.deliveryDaysDiff;
+  if (diff === 15) {
+    return 'yellow';
+  } else if (diff === 10) {
+    return 'pink';
+  } else if (diff === 2) {
+    return 'purple';
+  } else if (diff < 2) {
+    return 'red';
+  }
+};
+
+// 缁戝畾宸ヨ壓璺嚎寮规
+const bindRouteDialogVisible = ref(false);
+const bindRouteLoading = ref(false);
+const bindRouteSaving = ref(false);
+const routeOptions = ref([]);
+const bindForm = reactive({
+  orderId: null,
+  routeId: null,
+});
+
+const openBindRouteDialog = async row => {
+  bindForm.orderId = row.id;
+  bindForm.routeId = null;
+  bindRouteDialogVisible.value = true;
+  routeOptions.value = [];
+  if (!row.productModelId) {
+    proxy.$modal.msgWarning("褰撳墠璁㈠崟缂哄皯浜у搧鍨嬪彿锛屾棤娉曟煡璇㈠伐鑹鸿矾绾�");
+    bindRouteDialogVisible.value = false;
+    return;
+  }
+  bindRouteLoading.value = true;
+  try {
+    const res = await listProcessRoute({productModelId: row.productModelId});
+    routeOptions.value = res.data || [];
+  } catch (e) {
+    console.error("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触锛�", e);
+    proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触");
+  } finally {
+    bindRouteLoading.value = false;
+  }
+};
+
+const handleBindRouteConfirm = async () => {
+  if (!bindForm.routeId) {
+    proxy.$modal.msgWarning("璇烽�夋嫨宸ヨ壓璺嚎");
+    return;
+  }
+  bindRouteSaving.value = true;
+  try {
+    await bindingRoute({
+      id: bindForm.orderId,
+      routeId: bindForm.routeId,
+    });
+    proxy.$modal.msgSuccess("缁戝畾鎴愬姛");
+    bindRouteDialogVisible.value = false;
+    getList();
+  } catch (e) {
+    console.error("缁戝畾宸ヨ壓璺嚎澶辫触锛�", e);
+    proxy.$modal.msgError("缁戝畾宸ヨ壓璺嚎澶辫触");
+  } finally {
+    bindRouteSaving.value = false;
+  }
+};
 
 // 鏌ヨ鍒楄〃
 /** 鎼滅储鎸夐挳鎿嶄綔 */
 const handleQuery = () => {
-	page.current = 1;
-	getList();
+  page.current = 1;
+  getList();
 };
-const pagination = (obj) => {
-	page.current = obj.page;
-	page.size = obj.limit;
-	getList();
+const pagination = obj => {
+  page.current = obj.page;
+  page.size = obj.limit;
+  getList();
 };
-const changeDaterange = (value) => {
-	if (value) {
-		searchForm.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
-		searchForm.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
-	} else {
-		searchForm.entryDateStart = undefined;
-		searchForm.entryDateEnd = undefined;
-	}
-	handleQuery();
+const changeDaterange = value => {
+  if (value) {
+    searchForm.value.entryDateStart = value[0];
+    searchForm.value.entryDateEnd = value[1];
+  } else {
+    searchForm.value.entryDateStart = undefined;
+    searchForm.value.entryDateEnd = undefined;
+  }
+  handleQuery();
 };
 const getList = () => {
-	tableLoading.value = true;
-	listCustomer({ ...searchForm.value, ...page }).then((res) => {
-		tableLoading.value = false;
-		tableData.value = res.records;
-		page.total = res.total;
-	});
+  tableLoading.value = true;
+  // 鏋勯�犱竴涓柊鐨勫璞★紝涓嶅寘鍚玡ntryDate瀛楁
+  const params = {...searchForm.value, ...page};
+  params.entryDate = undefined;
+  productOrderListPage(params)
+      .then(res => {
+        tableLoading.value = false;
+        tableData.value = res.data.records;
+        page.total = res.data.total;
+      })
+      .catch(() => {
+        tableLoading.value = false;
+      });
+};
+
+const showRouteItemModal = async row => {
+  const orderId = row.id;
+  try {
+    const res = await getOrderProcessRouteMain(orderId);
+    const data = res.data || {};
+    if (!data || !data.id) {
+      proxy.$modal.msgWarning("鏈壘鍒板叧鑱旂殑宸ヨ壓璺嚎");
+      return;
+    }
+    router.push({
+      path: "/productionManagement/processRouteItem",
+      query: {
+        id: data.id,
+        processRouteCode: data.processRouteCode || "",
+        productName: data.productName || "",
+        model: data.model || "",
+        bomNo: data.bomNo || "",
+        description: data.description || "",
+        orderId,
+        type: "order",
+      },
+    });
+  } catch (e) {
+    console.error("鑾峰彇宸ヨ壓璺嚎涓讳俊鎭け璐ワ細", e);
+    proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎淇℃伅澶辫触");
+  }
+};
+
+const showProductStructure = row => {
+  router.push({
+    path: "/productionManagement/productStructureDetail",
+    query: {
+      id: row.id,
+      bomNo: row.bomNo || "",
+      productName: row.productCategory || "",
+      productModelName: row.specificationModel || "",
+      orderId: row.id,
+      type: "order",
+    },
+  });
+};
+
+// 琛ㄦ牸閫夋嫨鏁版嵁
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection;
+};
+
+const handleDelete = () => {
+  let ids = [];
+  if (selectedRows.value.length > 0) {
+    ids = selectedRows.value.map((item) => item.id);
+  } else {
+    proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+    return;
+  }
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "瀵煎嚭", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  }).then(() => {
+    delProductOrder(ids).then((res) => {
+      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+      getList();
+    });
+  }).catch(() => {
+    proxy.$modal.msg("宸插彇娑�");
+  });
 };
 
 // 瀵煎嚭
 const handleOut = () => {
-	ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
-		confirmButtonText: "纭",
-		cancelButtonText: "鍙栨秷",
-		type: "warning",
-	})
-		.then(() => {
-			proxy.download("/basic/customer/export", {}, "瀹㈡埛妗ｆ.xlsx");
-		})
-		.catch(() => {
-			proxy.$modal.msg("宸插彇娑�");
-		});
+  ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+      .then(() => {
+        proxy.download("/productOrder/export", {...searchForm.value}, "鐢熶骇璁㈠崟.xlsx");
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
 };
 
+const handleConfirmRoute = () => {
+};
+
+const handleFinishOrder = (row) => {
+  ElMessageBox.confirm("鏄惁纭缁撴潫锛�", "缁撴潫", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+      .then(() => {
+        finishOrder(row.id).then(res => {
+          proxy.$modal.msgSuccess("缁撴潫鎴愬姛");
+          getList()
+        })
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
+};
 onMounted(() => {
-	getList();
+  getList();
 });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.search_form {
+  align-items: start;
+}
+
+::v-deep .yellow {
+  background-color: #FAF0DE;
+}
+
+::v-deep .pink {
+  background-color: #FAE1DE;
+}
+
+::v-deep .red {
+  background-color: #f80202;
+}
+
+::v-deep .purple {
+  background-color: #F4DEFA;
+}
+</style>

--
Gitblit v1.9.3