From c391bf92060a370c1f22e5e3b7d17c2ebfd048c7 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 08 四月 2026 14:25:36 +0800
Subject: [PATCH] fix: 销售台账新增修改

---
 src/views/productionManagement/productionCosting/index.vue |  643 ++++++++++++++++++++++++++++++++-------------------------
 1 files changed, 362 insertions(+), 281 deletions(-)

diff --git a/src/views/productionManagement/productionCosting/index.vue b/src/views/productionManagement/productionCosting/index.vue
index fd3a11b..19736e3 100644
--- a/src/views/productionManagement/productionCosting/index.vue
+++ b/src/views/productionManagement/productionCosting/index.vue
@@ -1,306 +1,387 @@
 <template>
-	<div class="app-container">
-		<div class="content-layout">
-			<!-- 宸︿晶鍙拌处 + 椤堕儴绛涢�� -->
-			<div class="left-panel">
-				<div class="left-header">
-					<!-- <div class="left-title">鐢熶骇鍙拌处</div> -->
-					<el-radio-group v-model="dateType" size="small" @change="handleDateTypeChange">
-						<el-radio-button label="day">鏃�</el-radio-button>
-						<el-radio-button label="month">鏈�</el-radio-button>
-					</el-radio-group>
-					
-				</div>
-				<PIMTable
-					rowKey="id"
-					:column="leftTableColumn"
-					:tableData="leftTableData"
-					:tableLoading="tableLoading"
-					@rowClick="handleLeftRowClick"
-				></PIMTable>
-			</div>
-
-			<!-- 鍙充晶鏄庣粏锛堝師鏈夊唴瀹癸級 -->
-			<div class="right-panel">
-				<div class="header-filters">
-						<el-button @click="handleOut" class="ml10">瀵煎嚭</el-button>
-					</div>
-					<PIMTable
-						rowKey="id"
-						:column="tableColumn"
-						:tableData="tableData"
-						:page="page"
-						:tableLoading="tableLoading"
-						style="margin-right: 20px;"
-						@pagination="pagination"
-					></PIMTable>
-			</div>
-		</div>
-	</div>
+  <div class="app-container">
+    <el-row :gutter="16"
+            class="content-row">
+      <!-- 宸︿晶鍙拌处 + 椤堕儴绛涢�� -->
+      <el-col :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="8"
+              :xl="8"
+              class="left-col">
+        <div class="left-panel">
+          <div class="left-header">
+            <el-form :model="searchForm"
+                     inline>
+              <el-form-item prop="dateType">
+                <el-radio-group v-model="searchForm.dateType"
+                                size="small"
+                                @change="handleDateTypeChange">
+                  <el-radio-button label="day">鏃�</el-radio-button>
+                  <el-radio-button label="month">鏈�</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="鏃ユ湡锛�"
+                            prop="dateRange">
+                <el-date-picker v-model="searchForm.dateRange"
+                                :type="searchForm.dateType === 'day' ? 'date' : 'daterange'"
+                                range-separator="鑷�"
+                                start-placeholder="寮�濮嬫棩鏈�"
+                                end-placeholder="缁撴潫鏃ユ湡"
+                                format="YYYY-MM-DD"
+                                value-format="YYYY-MM-DD"
+                                style="width: 200px"
+                                @change="handleDateRangeChange" />
+              </el-form-item>
+            </el-form>
+          </div>
+          <PIMTable rowKey="id"
+                    :column="leftTableColumn"
+                    :tableData="leftTableData"
+                    :tableLoading="tableLoading"
+                    :page="page"
+                    @row-click="handleLeftRowClick"
+                    @pagination="pagination"></PIMTable>
+        </div>
+      </el-col>
+      <!-- 鍙充晶鏄庣粏 -->
+      <el-col :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="16"
+              :xl="16"
+              class="right-col">
+        <div class="right-panel">
+          <el-form inline>
+            <el-form-item>
+              <el-button type="primary"
+                         @click="handleOut">瀵煎嚭</el-button>
+            </el-form-item>
+          </el-form>
+          <PIMTable rowKey="id"
+                    :column="tableColumn"
+                    :tableData="tableData"
+                    :page="page1"
+                    :tableLoading="tableLoading1"
+                    style="margin-right: 20px;"
+                    @pagination="pagination1"></PIMTable>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {
-	listCustomer,
-} from "@/api/basicData/customerFile.js";
-import { ElMessageBox } from "element-plus";
-import dayjs from "dayjs";
-import {productionAccountingListPage} from "@/api/productionManagement/productionCosting.js";
-const { proxy } = getCurrentInstance();
+  import { onMounted, ref } from "vue";
+  import { ElMessageBox } from "element-plus";
+  import dayjs from "dayjs";
+  import {
+    salesLedgerProductionAccountingListProductionDetails,
+    salesLedgerProductionAccountingList,
+  } from "@/api/productionManagement/productionCosting.js";
+  const { proxy } = getCurrentInstance();
 
-const tableColumn = ref([
-	{
-		label: "鐢熶骇鏃ユ湡",
-		prop: "schedulingDate",
-		width: 120,
-	},
-	{
-		label: "鐢熶骇浜�",
-		prop: "schedulingUserName",
-		width: 90,
-	},
-	{
-		label: "鍚堝悓鍙�",
-		prop: "salesContractNo",
-		width: 220,
-	},
-	// {
-	// 	label: "瀹㈡埛鍚堝悓鍙�",
-	// 	prop: "customerContractNo",
-	// 	width: 250,
-	// },
-	{
-		label: "瀹㈡埛鍚嶇О",
-		prop: "customerName",
-		width: 250,
-	},
-	// {
-	// 	label: "椤圭洰鍚嶇О",
-	// 	prop: "projectName",
-	// 	width:300
-	// },
-	{
-		label: "浜у搧澶х被",
-		prop: "productCategory",
-		width: 160,
-	},
-	{
-		label: "瑙勬牸鍨嬪彿",
-		prop: "specificationModel",
-		width: 160,
-	},
-	{
-		label: "鍗曚綅",
-		prop: "unit",
-	},
-	{
-		label: "宸ュ簭",
-		prop: "process",
-	},
-	{
-		label: "鐢熶骇鏁伴噺",
-		prop: "finishedNum",
-		width: 100,
-	},
-	{
-		label: "宸ユ椂瀹氶",
-		prop: "workHours",
-		width: 100,
-	},
-	{
-		label: "宸ヨ祫",
-		prop: "wages",
-		width: 100,
-	},
-]);
+  const tableColumn = ref([
+    {
+      label: "鐢熶骇鏃ユ湡",
+      prop: "schedulingDate",
+      minWidth: 100,
+    },
+    {
+      label: "鐢熶骇浜�",
+      prop: "schedulingUserName",
+      minWidth: 100,
+    },
+    // {
+    // 	label: "鍚堝悓鍙�",
+    // 	prop: "salesContractNo",
+    //   minWidth: 100,
+    // },
+    // {
+    // 	label: "瀹㈡埛鍚嶇О",
+    // 	prop: "customerName",
+    //   minWidth: 100,
+    // },
+    {
+      label: "浜у搧澶х被",
+      prop: "productName",
+      minWidth: 100,
+    },
+    {
+      label: "瑙勬牸鍨嬪彿",
+      prop: "productModelName",
+      minWidth: 100,
+    },
+    {
+      label: "鍗曚綅",
+      prop: "unit",
+      minWidth: 100,
+    },
+    {
+      label: "宸ュ簭",
+      prop: "process",
+      minWidth: 100,
+    },
+    {
+      label: "鐢熶骇鏁伴噺",
+      prop: "quantity",
+      minWidth: 100,
+    },
+    {
+      label: "宸ユ椂瀹氶",
+      prop: "workHours",
+      minWidth: 100,
+    },
+    {
+      label: "宸ヨ祫",
+      prop: "wages",
+      minWidth: 100,
+    },
+  ]);
 
-// 宸︿晶姹囨�诲彴璐﹀垪锛堢敓浜т汉銆佷骇閲忋�佸伐璧勩�佸悎鏍肩巼锛�
-const leftTableColumn = ref([
-	{
-		label: "鐢熶骇浜�",
-		prop: "schedulingUserName",
-		width: 120,
-	},
-	{
-		label: "浜ч噺",
-		prop: "finishedNum",
-		width: 100,
-	},
-	{
-		label: "宸ヨ祫",
-		prop: "wages",
-		width: 100,
-	},
-	{
-		label: "鍚堟牸鐜�",
-		prop: "qualifiedRate",
-		width: 100,
-	},
-]);
+  // 宸︿晶姹囨�诲彴璐﹀垪锛堢敓浜т汉銆佷骇閲忋�佸伐璧勩�佸悎鏍肩巼锛�
+  const leftTableColumn = ref([
+    {
+      label: "鐢熶骇浜�",
+      prop: "schedulingUserName",
+      minWidth: 100,
+    },
+    {
+      label: "浜ч噺",
+      prop: "outputNum",
+      minWidth: 100,
+    },
+    {
+      label: "宸ヨ祫",
+      prop: "wages",
+      minWidth: 100,
+    },
+    {
+      label: "鍚堟牸鐜�",
+      prop: "outputRate",
+      minWidth: 100,
+      formatData: val => {
+        if (val == null || val === "") return "-";
+        return parseFloat(val).toFixed(2);
+      },
+    },
+  ]);
 
-const tableData = ref([]);
-const tableLoading = ref(false);
-const leftTableData = ref([]);
-// 鏃� / 鏈� 鍒囨崲锛堥粯璁ゆ寜鏃ワ級
-const dateType = ref("day");
-const page = reactive({
-	current: 1,
-	size: 100,
-	total: 0,
-});
+  const tableData = ref([]);
+  const tableLoading = ref(false);
+  const tableLoading1 = ref(false);
+  const leftTableData = ref([]);
+  // 鏃� / 鏈� 鍒囨崲锛堥粯璁ゆ寜鏃ワ級
+  const page = reactive({
+    current: 1,
+    size: 100,
+    total: 0,
+  });
 
-const data = reactive({
-	searchForm: {
-		schedulingUserName: "",
-		salesContractNo: "",
-		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"),
-	},
-});
-const { searchForm } = toRefs(data);
+  const page1 = reactive({
+    current: 1,
+    size: 100,
+    total: 0,
+  });
 
-// 鏌ヨ鍒楄〃
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-const handleQuery = () => {
-	page.current = 1;
-	getList();
-};
-const pagination = (obj) => {
-	page.current = obj.page;
-	page.size = obj.limit;
-	getList();
-};
-const changeDaterange = (value) => {
-	if (value) {
-		searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
-		searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
-	} else {
-		searchForm.value.entryDateStart = undefined;
-		searchForm.value.entryDateEnd = undefined;
-	}
-	handleQuery();
-};
-const getList = () => {
-	tableLoading.value = true;
-	const params = { ...searchForm.value, ...page };
-	params.dateType = dateType.value;
-	params.entryDate = undefined
-	productionAccountingListPage(params).then((res) => {
-		tableLoading.value = false;
-		const records = res.data.records || [];
-		tableData.value = records;
-		page.total = res.data.total || 0;
-		buildLeftTableData(records);
-	});
-};
+  const data = reactive({
+    searchForm: {
+      schedulingUserName: "",
+      salesContractNo: "",
+      dateType: "day",
+      dateRange: dayjs().format("YYYY-MM-DD"),
+      entryDate: dayjs().format("YYYY-MM-DD"),
+      entryDateStart: undefined,
+      entryDateEnd: undefined,
+    },
+  });
+  const { searchForm } = toRefs(data);
 
-// 鏋勫缓宸︿晶姹囨�诲彴璐︼紙鎸夌敓浜т汉姹囨�讳骇閲忋�佸伐璧勭瓑锛�
-const buildLeftTableData = (records) => {
-	const map = {};
-	records.forEach((item) => {
-		const key = item.schedulingUserName || "鏈煡";
-		if (!map[key]) {
-			map[key] = {
-				id: key,
-				schedulingUserName: key,
-				finishedNum: 0,
-				wages: 0,
-				qualifiedRate: item.qualifiedRate ?? null,
-			};
-		}
-		map[key].finishedNum += Number(item.finishedNum || 0);
-		map[key].wages += Number(item.wages || 0);
-		if (item.qualifiedRate != null) {
-			map[key].qualifiedRate = item.qualifiedRate;
-		}
-	});
-	leftTableData.value = Object.values(map);
-};
+  const pagination = obj => {
+    page.current = obj.page;
+    page.size = obj.limit;
+    getList();
+  };
 
-// 宸︿晶鏃�/鏈堝垏鎹�
-const handleDateTypeChange = () => {
-	// 杩欓噷鍙綔涓虹瓫閫夋潯浠剁殑涓�閮ㄥ垎锛岀洿鎺ラ噸鏂版煡璇㈠垪琛�
-	handleQuery();
-};
+  const pagination1 = obj => {
+    page1.current = obj.page;
+    page1.size = obj.limit;
+    getList1();
+  };
 
-// 鐐瑰嚮宸︿晶琛岋紝鍒峰彸渚ф槑缁嗭紙鎸夌敓浜т汉杩囨护锛�
-const handleLeftRowClick = (row) => {
-	searchForm.value.schedulingUserName = row.schedulingUserName || "";
-	handleQuery();
-};
+  const handleDateRangeChange = value => {
+    if (value) {
+      if (searchForm.value.dateType === "day") {
+        searchForm.value.entryDate = value;
+      } else {
+        searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
+        searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
+      }
+    } else {
+      searchForm.value.entryDate = undefined;
+      searchForm.value.entryDateStart = undefined;
+      searchForm.value.entryDateEnd = undefined;
+    }
+    reloadData();
+  };
 
-// 瀵煎嚭
-const handleOut = () => {
-	ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
-		confirmButtonText: "纭",
-		cancelButtonText: "鍙栨秷",
-		type: "warning",
-	})
-		.then(() => {
-			proxy.download("/salesLedger/productionAccounting/export", {}, "鐢熶骇鏍哥畻.xlsx");
-		})
-		.catch(() => {
-			proxy.$modal.msg("宸插彇娑�");
-		});
-};
+  const getList = () => {
+    tableLoading.value = true;
+    const params = { ...searchForm.value, ...page };
 
-onMounted(() => {
-	getList();
-});
+    salesLedgerProductionAccountingList(params)
+      .then(res => {
+        const records = res.data.records || [];
+        leftTableData.value = records;
+        page.total = res.data.total || 0;
+      })
+      .finally(() => {
+        tableLoading.value = false;
+      });
+  };
+
+  const getList1 = () => {
+    tableLoading1.value = true;
+    const params = { ...page1, ...searchForm.value };
+    salesLedgerProductionAccountingListProductionDetails(params)
+      .then(res => {
+        tableData.value = res.data.records || [];
+        page1.total = res.data.total || 0;
+      })
+      .finally(() => {
+        tableLoading1.value = false;
+      });
+  };
+
+  // 鏋勫缓宸︿晶姹囨�诲彴璐︼紙鎸夌敓浜т汉姹囨�讳骇閲忋�佸伐璧勭瓑锛�
+  const buildLeftTableData = records => {
+    const map = {};
+    records.forEach(item => {
+      const key = item.schedulingUserName || "鏈煡";
+      if (!map[key]) {
+        map[key] = {
+          id: key,
+          schedulingUserName: key,
+          finishedNum: 0,
+          wages: 0,
+          qualifiedRate: item.qualifiedRate ?? null,
+        };
+      }
+      map[key].finishedNum += Number(item.finishedNum || 0);
+      map[key].wages += Number(item.wages || 0);
+      if (item.qualifiedRate != null) {
+        map[key].qualifiedRate = item.qualifiedRate;
+      }
+    });
+    leftTableData.value = Object.values(map);
+  };
+
+  // 宸︿晶鏃�/鏈堝垏鎹�
+  const handleDateTypeChange = value => {
+    // 杩欓噷鍙綔涓虹瓫閫夋潯浠剁殑涓�閮ㄥ垎锛岀洿鎺ラ噸鏂版煡璇㈠垪琛�
+    if (value === "day") {
+      searchForm.value.entryDate = dayjs().format("YYYY-MM-DD");
+      searchForm.value.dateRange = searchForm.value.entryDate;
+    } else {
+      searchForm.value.entryDateStart = dayjs()
+        .startOf("month")
+        .format("YYYY-MM-DD");
+      searchForm.value.entryDateEnd = dayjs().endOf("month").format("YYYY-MM-DD");
+      searchForm.value.dateRange = [
+        searchForm.value.entryDateStart,
+        searchForm.value.entryDateEnd,
+      ];
+    }
+
+    reloadData();
+  };
+
+  const reloadData = () => {
+    page.current = 1;
+    page1.current = 1;
+    getList();
+    tableData.value = [];
+  };
+
+  // 鐐瑰嚮宸︿晶琛岋紝鍒峰彸渚ф槑缁嗭紙鎸夌敓浜т汉杩囨护锛�
+  const handleLeftRowClick = row => {
+    searchForm.value.schedulingUserName = row.schedulingUserName || "";
+    handleQuery();
+  };
+
+  // 鏌ヨ鍒楄〃
+  /** 鎼滅储鎸夐挳鎿嶄綔 */
+  const handleQuery = () => {
+    page1.current = 1;
+    getList1();
+  };
+
+  // 瀵煎嚭
+  const handleOut = () => {
+    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+      confirmButtonText: "纭",
+      cancelButtonText: "鍙栨秷",
+      type: "warning",
+    })
+      .then(() => {
+        proxy.download(
+          "/salesLedger/productionAccounting/export",
+          {},
+          "鐢熶骇鏍哥畻.xlsx"
+        );
+      })
+      .catch(() => {
+        proxy.$modal.msg("宸插彇娑�");
+      });
+  };
+
+  onMounted(() => {
+    getList();
+  });
 </script>
 
 <style scoped lang="scss">
-.content-layout {
-  display: flex;
-  gap: 16px;
-}
+  .content-row {
+    width: 100%;
+  }
 
-.left-panel {
-  flex: 0 0 50%;
-  max-width: 50%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+  .content-row .left-col,
+  .content-row .right-col {
+    margin-bottom: 16px;
+  }
 
-.right-panel {
-  flex: 0 0 50%;
-  max-width: 49%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+  .left-panel,
+  .right-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+  }
 
-.left-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 8px;
-}
+  .left-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
 
-.left-title {
-  font-size: 16px;
-  color: #ffffff;
-}
+  .left-title {
+    font-size: 16px;
+    color: #ffffff;
+  }
 
-.header-filters {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  justify-content: flex-end;
-  gap: 8px;
-}
+  .header-filters {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    justify-content: flex-end;
+    gap: 8px;
+  }
 
-.search_title {
-  color: #ffffff;
-}
+  .search_title {
+    color: #ffffff;
+  }
 
-.ml10 {
-  margin-left: 10px;
-}
+  .ml10 {
+    margin-left: 10px;
+  }
 </style>

--
Gitblit v1.9.3