From b2b12e3bfac952fd86630bf1b0e9a76f1d65451f Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 15 四月 2026 09:51:19 +0800
Subject: [PATCH] 优化产品类别选择：添加过滤功能以增强用户体验，并在类别变化时重置相关字段以避免旧值残留
---
src/views/salesManagement/salesLedger/index.vue | 168 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 112 insertions(+), 56 deletions(-)
diff --git a/src/views/salesManagement/salesLedger/index.vue b/src/views/salesManagement/salesLedger/index.vue
index 6e6adf0..2f61cdf 100644
--- a/src/views/salesManagement/salesLedger/index.vue
+++ b/src/views/salesManagement/salesLedger/index.vue
@@ -3,8 +3,23 @@
<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"
- @change="handleQuery" />
+ <el-select
+ v-model="searchForm.customerId"
+ filterable
+ placeholder="璇烽�夋嫨瀹㈡埛鍚嶇О"
+ clearable
+ style="width: 220px"
+ @change="handleQuery"
+ >
+ <el-option
+ v-for="item in customerOption"
+ :key="item.id"
+ :label="item.customerName"
+ :value="item.id"
+ >
+ {{ item.customerName + "鈥斺��" + item.taxpayerIdentificationNumber }}
+ </el-option>
+ </el-select>
</el-form-item>
<el-form-item label="閿�鍞悎鍚屽彿锛�">
<el-input v-model="searchForm.salesContractNo" placeholder="璇疯緭鍏�" clearable prefix-icon="Search"
@@ -177,17 +192,17 @@
<el-table-column label="瀹㈡埛鍚嶇О" prop="customerName" width="300" show-overflow-tooltip />
<el-table-column label="涓氬姟鍛�" prop="salesman" width="100" show-overflow-tooltip />
<el-table-column label="椤圭洰鍚嶇О" prop="projectName" width="180" show-overflow-tooltip />
- <el-table-column label="浠樻鏂瑰紡" prop="paymentMethod" show-overflow-tooltip />
<el-table-column label="鍚堝悓閲戦(鍏�)" prop="contractAmount" width="220" show-overflow-tooltip
:formatter="formattedNumber" />
<el-table-column label="鍙戣揣鐘舵��" width="140" align="center">
- <template #default="scope">
- <el-tag v-if="Number(scope.row.deliveryStatus) === 1" type="info">鏈彂璐�</el-tag>
- <el-tag v-else-if="Number(scope.row.deliveryStatus) === 2" type="warning">瀹℃壒涓�</el-tag>
- <el-tag v-else-if="Number(scope.row.deliveryStatus) === 3" type="danger">瀹℃壒澶辫触</el-tag>
- <el-tag v-else-if="Number(scope.row.deliveryStatus) === 4" type="success">宸插彂璐�</el-tag>
- <el-tag v-else type="info">-</el-tag>
- </template>
+ <template #default="scope">
+ <el-tag v-if="Number(scope.row.deliveryStatus) === 1" type="info">鏈彂璐�</el-tag>
+ <el-tag v-else-if="Number(scope.row.deliveryStatus) === 2" type="warning">瀹℃壒涓�</el-tag>
+ <el-tag v-else-if="Number(scope.row.deliveryStatus) === 3" type="danger">瀹℃壒涓嶉�氳繃</el-tag>
+ <el-tag v-else-if="Number(scope.row.deliveryStatus) === 4" type="primary">瀹℃壒閫氳繃</el-tag>
+ <el-tag v-else-if="Number(scope.row.deliveryStatus) === 5" type="success">宸插彂璐�</el-tag>
+ <el-tag v-else type="info">-</el-tag>
+ </template>
</el-table-column>
<el-table-column label="褰曞叆浜�" prop="entryPersonName" width="100" show-overflow-tooltip />
<el-table-column label="褰曞叆鏃ユ湡" prop="entryDate" width="120" show-overflow-tooltip />
@@ -234,7 +249,7 @@
<el-row :gutter="30">
<el-col :span="12">
<el-form-item label="瀹㈡埛鍚嶇О锛�" prop="customerId">
- <el-select v-model="form.customerId" placeholder="璇烽�夋嫨" clearable :disabled="operationType === 'view'">
+ <el-select v-model="form.customerId" filterable placeholder="璇烽�夋嫨" clearable :disabled="operationType === 'view'">
<el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.id">
{{
item.customerName + "鈥斺��" + item.taxpayerIdentificationNumber
@@ -256,11 +271,12 @@
format="YYYY-MM-DD" type="date" placeholder="璇烽�夋嫨" clearable :disabled="operationType === 'view'" />
</el-form-item>
</el-col>
- <el-col :span="12">
- <el-form-item label="浠樻鏂瑰紡">
- <el-input v-model="form.paymentMethod" placeholder="璇疯緭鍏�" clearable :disabled="operationType === 'view'" />
- </el-form-item>
- </el-col>
+ <el-col :span="12">
+ <el-form-item label="浜よ揣鏃ユ湡锛�" prop="deliveryDate">
+ <el-date-picker style="width: 100%" v-model="form.deliveryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
+ type="date" placeholder="璇烽�夋嫨" clearable />
+ </el-form-item>
+ </el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="12">
@@ -280,14 +296,6 @@
</el-form-item>
</el-col>
</el-row>
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="浜よ揣鏃ユ湡锛�" prop="entryDate">
- <el-date-picker style="width: 100%" v-model="form.deliveryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
- type="date" placeholder="璇烽�夋嫨" clearable />
- </el-form-item>
- </el-col>
- </el-row>
<el-row>
<el-form-item label="浜у搧淇℃伅锛�" prop="entryDate">
<el-button v-if="operationType !== 'view'" type="primary" @click="openProductForm('add')">娣诲姞</el-button>
@@ -456,6 +464,8 @@
v-model="productForm.productCategory"
placeholder="璇烽�夋嫨"
clearable
+ filterable
+ :filter-node-method="filterProductCategoryNode"
check-strictly
@change="getModels"
:data="productOptions"
@@ -499,7 +509,9 @@
<el-form-item label="绋庣巼(%)锛�" prop="taxRate">
<el-select v-model="productForm.taxRate" placeholder="璇烽�夋嫨" clearable @change="calculateFromTaxRate" style="width: 100%">
<el-option label="1" value="1" />
+ <el-option label="3" value="3" />
<el-option label="6" value="6" />
+ <el-option label="9" value="9" />
<el-option label="13" value="13" />
</el-select>
</el-form-item>
@@ -928,7 +940,7 @@
<script setup>
import { getToken } from "@/utils/auth";
import pagination from "@/components/PIMTable/Pagination.vue";
-import {onMounted, ref, getCurrentInstance} from "vue";
+import {onMounted, ref, getCurrentInstance, watch} from "vue";
import { addShippingInfo } from "@/api/salesManagement/deliveryLedger.js";
import { ElMessageBox, ElMessage } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
@@ -1000,6 +1012,7 @@
const data = reactive({
searchForm: {
customerName: "", // 瀹㈡埛鍚嶇О
+ customerId: "", // 瀹㈡埛ID锛堟煡璇笅鎷夛級
salesContractNo: "", // 閿�鍞悎鍚岀紪鍙�
entryDate: null, // 褰曞叆鏃ユ湡
entryDateStart: undefined,
@@ -1028,6 +1041,17 @@
});
const { form, rules } = toRefs(data);
const { form: searchForm } = useFormData(data.searchForm);
+
+// 鏂板鍙拌处锛氬綍鍏ユ棩鏈熷彉鏇存椂锛屼氦璐ф棩鏈熼粯璁や繚鎸佷负褰曞叆鏃ユ湡鍚庣 7 澶�
+watch(
+ () => [operationType.value, form.value?.entryDate],
+ () => {
+ if (operationType.value !== "add") return;
+ const ed = form.value?.entryDate;
+ if (!ed) return;
+ form.value.deliveryDate = dayjs(ed).add(7, "day").format("YYYY-MM-DD");
+ }
+);
// 浜у搧琛ㄥ崟寮规鏁版嵁
const productFormVisible = ref(false);
const productOperationType = ref("");
@@ -1061,22 +1085,6 @@
productRules: {
productCategory: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
productModelId: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
- specificationModel: [
- { required: true, message: "璇烽�夋嫨", trigger: "change" },
- ],
- thickness: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- quantity: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- taxInclusiveUnitPrice: [
- { required: true, message: "璇疯緭鍏�", trigger: "blur" },
- ],
- taxRate: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
- taxInclusiveTotalPrice: [
- { required: true, message: "璇疯緭鍏�", trigger: "blur" },
- ],
- taxExclusiveTotalPrice: [
- { required: true, message: "璇疯緭鍏�", trigger: "blur" },
- ],
- invoiceType: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
},
});
const { productForm, productRules } = toRefs(productFormData);
@@ -1379,6 +1387,21 @@
const params = { ...rest, ...page };
// 绉婚櫎褰曞叆鏃ユ湡鐨勯粯璁ゅ�艰缃紝鍙繚鐣欒寖鍥存棩鏈熷瓧娈�
delete params.entryDate;
+ // 鏌ヨ瀹㈡埛鍚嶇О涓庢柊澧炰繚鎸佷竴鑷达細鍏堥�� customerId锛屽啀鏄犲皠涓� customerName 鏌ヨ
+ const selectedCustomer = (customerOption.value || []).find(
+ (item) => String(item?.id ?? "") === String(params.customerId ?? "")
+ );
+ if (selectedCustomer?.customerName) {
+ params.customerName = String(selectedCustomer.customerName).trim();
+ } else {
+ const cn = params.customerName != null ? String(params.customerName).trim() : "";
+ if (cn) {
+ params.customerName = cn;
+ } else {
+ delete params.customerName;
+ }
+ }
+ delete params.customerId;
return ledgerListPage(params)
.then((res) => {
tableLoading.value = false;
@@ -1486,18 +1509,44 @@
};
// 鑾峰彇tree瀛愭暟鎹�
const getModels = (value) => {
+ // 浜у搧澶х被鍙樺寲鏃讹紝閲嶇疆瑙勬牸鍨嬪彿涓庡帤搴︼紝閬垮厤鏃у�兼畫鐣�
+ productForm.value.productModelId = null;
+ productForm.value.specificationModel = "";
+ productForm.value.thickness = null;
+
+ if (!value) {
+ productForm.value.productCategory = "";
+ modelOptions.value = [];
+ return;
+ }
+
productForm.value.productCategory = findNodeById(productOptions.value, value);
modelList({ id: value }).then((res) => {
- modelOptions.value = res;
+ modelOptions.value = res || [];
});
};
const getProductModel = (value) => {
const index = modelOptions.value.findIndex((item) => item.id === value);
if (index !== -1) {
productForm.value.specificationModel = modelOptions.value[index].model;
+ const selectedModel = modelOptions.value[index];
+ const modelThickness =
+ selectedModel?.thickness ??
+ selectedModel?.modelThickness ??
+ selectedModel?.thick ??
+ null;
+ productForm.value.thickness =
+ modelThickness === null || modelThickness === undefined || modelThickness === ""
+ ? null
+ : Number(modelThickness);
} else {
productForm.value.specificationModel = null;
+ productForm.value.thickness = null;
}
+};
+const filterProductCategoryNode = (value, data) => {
+ if (!value) return true;
+ return String(data?.label || "").toLowerCase().includes(String(value).toLowerCase());
};
const findNodeById = (nodes, productId) => {
for (let i = 0; i < nodes.length; i++) {
@@ -1638,6 +1687,9 @@
// }
// });
form.value.entryDate = getCurrentDate(); // 璁剧疆榛樿褰曞叆鏃ユ湡涓哄綋鍓嶆棩鏈�
+ if (type === "add") {
+ form.value.deliveryDate = dayjs(form.value.entryDate).add(7, "day").format("YYYY-MM-DD");
+ }
dialogFormVisible.value = true;
};
@@ -1804,7 +1856,9 @@
}
form.value.tempFileIds = tempFileIds;
form.value.type = 1;
- addOrUpdateSalesLedger(form.value).then((res) => {
+ const submitPayload = { ...form.value };
+ delete submitPayload.paymentMethod;
+ addOrUpdateSalesLedger(submitPayload).then((res) => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeDia();
getList();
@@ -2729,19 +2783,18 @@
return;
}
- // 渚濇鍙戣揣锛堥伩鍏嶅苟鍙戜笅搴撳瓨鎵ｅ噺/鐘舵�佹洿鏂颁簰鐩稿奖鍝嶏級
- const run = async () => {
- for (const item of targets) {
- const salesLedgerId = item.salesLedgerId;
- if (!salesLedgerId) continue;
- await addShippingInfo({
- salesLedgerId,
- salesLedgerProductId: item.id,
- type: deliveryForm.value.type,
- approveUserIds,
- });
- }
- };
+ // 鎸夊彴璐︾淮搴﹀幓閲嶏紝姣忎釜 salesLedgerId 鍙皟鐢ㄤ竴娆″彂璐ф帴鍙�
+ const uniqueLedgerIds = [...new Set(targets.map((item) => item.salesLedgerId).filter(Boolean))];
+
+ const run = async () => {
+ for (const salesLedgerId of uniqueLedgerIds) {
+ await addShippingInfo({
+ salesLedgerId,
+ type: deliveryForm.value.type,
+ approveUserIds,
+ });
+ }
+ };
run()
.then(() => {
@@ -2785,6 +2838,9 @@
};
onMounted(() => {
getList();
+ customerList().then((res) => {
+ customerOption.value = res;
+ });
userListNoPage().then(res => {
userList.value = res.data;
})
--
Gitblit v1.9.3