From f3b97d08e13224c6bc1d4f267bdb1a4e0b3690c3 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 13 三月 2026 17:41:33 +0800
Subject: [PATCH] 参数配置页面开发（未接接口）
---
src/views/basicData/product/index.vue | 189 +++++++++++++++++++++++++++++++++++++++++------
1 files changed, 165 insertions(+), 24 deletions(-)
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index c4c8f06..2c62d41 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -6,12 +6,15 @@
style="width: 210px"
placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�"
@change="searchFilter"
- @clear="searchFilter"
+ @clear="searchFilter1"
clearable
prefix-icon="Search" />
<el-button type="primary"
@click="openProDia1('addOne')"
style="margin-left: 10px">鏂板浜у搧澶х被</el-button>
+ <el-button type="primary"
+ @click="getloadData"
+ style="margin-left: 10px">鎷夊彇鏁版嵁</el-button>
</div>
<div ref="containerRef">
<el-tree ref="tree"
@@ -29,8 +32,7 @@
<div class="custom-tree-node">
<span class="tree-node-content">
<el-icon class="tree-icon">
- <component :is="data.children && data.children.length > 0
- ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
+ <component :is="node.expanded ? 'FolderOpened' : 'Folder'" />
</el-icon>
<span class="tree-node-label">{{ data.label }}</span>
</span>
@@ -74,7 +76,7 @@
</div>
</div>
<div class="right">
- <div style="margin-bottom: 10px"
+ <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 10px"
v-if="isShowButton">
<el-button type="primary"
@click="openModelDia('add')">
@@ -82,9 +84,18 @@
</el-button>
<ImportExcel :product-id="currentId"
@uploadSuccess="getModelList" />
+ <el-input v-model="specification"
+ placeholder="瑙勬牸鍨嬪彿"
+ style="width: 150px"
+ clearable
+ @change="getModelList" />
+ <el-input v-model="materialCode"
+ placeholder="鐗╂枡缂栧彿"
+ style="width: 150px"
+ clearable
+ @change="getModelList" />
<el-button type="danger"
@click="handleDelete"
- style="margin-left: 10px"
plain>
鍒犻櫎
</el-button>
@@ -92,10 +103,11 @@
<PIMTable rowKey="id"
:column="tableColumn"
:tableData="tableData"
+ :page="page"
:isSelection="true"
- :isShowPagination="false"
@selection-change="handleSelectionChange"
- :tableLoading="tableLoading"></PIMTable>
+ :tableLoading="tableLoading"
+ @pagination="pagination"></PIMTable>
</div>
<el-dialog v-model="productDia"
title="浜у搧"
@@ -126,6 +138,7 @@
<el-select v-model="form.inventoryCategoryId"
placeholder="璇烽�夋嫨瀛樿揣绫诲埆"
clearable
+ filterable
style="width: 100%">
<el-option v-for="item in inventoryCategoryList"
:key="item.id"
@@ -142,6 +155,7 @@
<el-select v-model="form.materialTypeId"
placeholder="璇烽�夋嫨鐗╂枡绫诲瀷"
clearable
+ filterable
style="width: 100%">
<el-option v-for="item in materialTypeList"
:key="item.id"
@@ -203,6 +217,15 @@
@keydown.enter.prevent />
</el-form-item>
</el-col>
+ <el-col :span="24">
+ <el-form-item label="鐗╂枡缂栫爜锛�"
+ prop="materialCode">
+ <el-input v-model="modelForm.materialCode"
+ placeholder="璇疯緭鍏ョ墿鏂欑紪鐮�"
+ clearable
+ @keydown.enter.prevent />
+ </el-form-item>
+ </el-col>
</el-row>
<el-row>
<el-col :span="24">
@@ -211,6 +234,7 @@
<el-select v-model="modelForm.supplyType"
placeholder="璇烽�夋嫨渚涘簲鏂瑰紡"
clearable
+ filterable
style="width: 100%">
<el-option label="鑷埗"
value="鑷埗" />
@@ -277,9 +301,11 @@
delProductModel,
modelListPage,
productTreeList,
+ productTreeListQuery,
addOrEditProductConfig,
updateOrEditProductConfig,
delProductConfig,
+ loadData,
} from "@/api/basicData/newProduct.js";
import ImportExcel from "./ImportExcel/index.vue";
@@ -301,6 +327,22 @@
const expandedKeys = ref([]);
const inventoryCategoryList = ref([]);
const materialTypeList = ref([]);
+ const specification = ref("");
+ const materialCode = ref("");
+
+ const getloadData = () => {
+ loadData()
+ .then(res => {
+ getInventoryCategoryList();
+ getMaterialTypeList();
+ getProductTreeList();
+ tableData.value = [];
+ isShowButton.value = false;
+ })
+ .catch(err => {
+ console.error("鎷夊彇澶辫触:", err);
+ });
+ };
// 鑾峰彇瀛樿揣绫诲埆鍒楄〃
const getInventoryCategoryList = () => {
@@ -339,6 +381,10 @@
prop: "specification",
},
{
+ label: "鐗╂枡缂栫爜",
+ prop: "materialCode",
+ },
+ {
label: "鍗曚綅",
prop: "baseUnit",
},
@@ -361,6 +407,11 @@
const tableLoading = ref(false);
const isShowButton = ref(false);
const selectedRows = ref([]);
+ const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0,
+ });
const data = reactive({
form: {
@@ -383,11 +434,13 @@
modelForm: {
specification: "",
supplyType: "",
+ materialCode: "",
id: null,
},
modelRules: {
specification: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
supplyType: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
+ materialCode: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
},
configForm: {
configName: "",
@@ -406,29 +459,20 @@
// 鏌ヨ浜у搧鏍�
const getProductTreeList = () => {
treeLoad.value = true;
- productTreeList()
+ productTreeList({ type: 2 })
.then(res => {
// 杞崲鏂扮殑鏁版嵁鏍煎紡
const newList = [];
expandedKeys.value = [];
for (const category of res.data) {
- // 娣诲姞鍒嗙被鑺傜偣
+ // 娣诲姞鍒嗙被鑺傜偣锛堝彧杩斿洖涓�灞傛暟鎹紝涓嶅寘鍚瓙鑺傜偣锛�
const categoryNode = {
label: category.configName,
id: category.configId,
isLeaf: false,
- children: category.materialList.map(item => ({
- id: item.id,
- isLeaf: true,
- label: item.materialName,
- inventoryCategoryId: item.inventoryCategoryId,
- materialTypeId: item.materialTypeId,
- remark: item.remark,
- baseUnit: item.baseUnit,
- })),
+ children: [], // 鍒濆鍖栦负绌烘暟缁勶紝鐐瑰嚮鏃跺啀鍔犺浇
};
newList.push(categoryNode);
- expandedKeys.value.push(category.configName);
}
list.value = newList;
treeLoad.value = false;
@@ -437,9 +481,64 @@
treeLoad.value = false;
});
};
+ const searchFilter1 = () => {
+ getProductTreeList();
+ };
// 杩囨护浜у搧鏍�
const searchFilter = () => {
- proxy.$refs.tree.filter(search.value);
+ if (!search.value) {
+ // 濡傛灉鎼滅储鍏抽敭瀛椾负绌猴紝閲嶆柊鍔犺浇鍘熷鏁版嵁
+ // getProductTreeList();
+ return;
+ }
+
+ treeLoad.value = true;
+ // 璋冪敤 productTreeListQuery 鎺ュ彛杩涜鎼滅储
+ productTreeListQuery({ materialName: search.value })
+ .then(res => {
+ // 澶勭悊杩斿洖鐨勬暟鎹�
+ const newList = [];
+ if (res.data && res.data.length > 0) {
+ for (const category of res.data) {
+ for (const item of list.value) {
+ if (item.id == category.configId) {
+ item.children = (category.materialList || []).map(item => ({
+ id: item.id,
+ isLeaf: true,
+ label: item.materialName,
+ inventoryCategoryId: item.inventoryCategoryId,
+ materialTypeId: item.materialTypeId,
+ remark: item.remark,
+ baseUnit: item.baseUnit,
+ }));
+ break;
+ }
+ }
+ // 杞崲鏁版嵁鏍煎紡
+ // const categoryNode = {
+ // label: category.configName,
+ // id: category.configId,
+ // isLeaf: false,
+ // children: (category.materialList || []).map(item => ({
+ // id: item.id,
+ // isLeaf: true,
+ // label: item.materialName,
+ // inventoryCategoryId: item.inventoryCategoryId,
+ // materialTypeId: item.materialTypeId,
+ // remark: item.remark,
+ // baseUnit: item.baseUnit,
+ // })),
+ // };
+ // newList.push(categoryNode);
+ }
+ }
+ // 浣跨敤 el-tree 鐨勫唴缃繃婊ゅ姛鑳芥悳绱�
+ proxy.$refs.tree.filter(search.value);
+ treeLoad.value = false;
+ })
+ .catch(err => {
+ treeLoad.value = false;
+ });
};
// 鎵撳紑浜у搧寮规
const openProDia = (type, data) => {
@@ -490,12 +589,14 @@
modelForm.value.specification = "";
modelForm.value.supplyType = "";
modelForm.value.id = null;
+ modelForm.value.materialCode = null;
if (type === "edit" && data) {
// 缂栬緫妯″紡锛屽洖濉暟鎹�
modelForm.value.specification = data.specification || "";
modelForm.value.supplyType = data.supplyType || "";
modelForm.value.id = data.skuId || null;
+ modelForm.value.materialCode = data.materialCode || null;
}
};
// 鎻愪氦浜у搧鍚嶇О淇敼
@@ -561,12 +662,14 @@
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeConfigDia();
getProductTreeList();
+ getMaterialTypeList();
});
} else {
addOrEditProductConfig(params).then(res => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeConfigDia();
getProductTreeList();
+ getMaterialTypeList();
});
}
}
@@ -627,8 +730,35 @@
};
// 閫夋嫨浜у搧
const handleNodeClick = (val, node, el) => {
- // 鐐瑰嚮闈炲彾瀛愯妭鐐规椂锛屼笉鎵ц浠ヤ笅閫昏緫
+ // 鐐瑰嚮闈炲彾瀛愯妭鐐规椂锛屽姞杞藉瓙鑺傜偣鏁版嵁
if (!val.isLeaf) {
+ // 璋冪敤 productTreeListQuery 鎺ュ彛鑾峰彇瀛愯妭鐐规暟鎹�
+ // treeLoad.value = true;
+ productTreeListQuery({ materialTypeId: val.id })
+ .then(res => {
+ // 澶勭悊杩斿洖鐨勬暟鎹�
+ if (res.data && res.data.length > 0) {
+ const materialList = res.data[0].materialList || [];
+ // 杞崲瀛愯妭鐐规暟鎹牸寮�
+ const children = materialList.map(item => ({
+ id: item.id,
+ isLeaf: true,
+ label: item.materialName,
+ inventoryCategoryId: item.inventoryCategoryId,
+ materialTypeId: item.materialTypeId,
+ remark: item.remark,
+ baseUnit: item.baseUnit,
+ }));
+ // 鏇存柊鑺傜偣鐨勫瓙鑺傜偣
+ val.children = children;
+ // 灞曞紑鑺傜偣
+ node.expanded = true;
+ }
+ // treeLoad.value = false;
+ })
+ .catch(err => {
+ // treeLoad.value = false;
+ });
return;
}
// 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
@@ -647,6 +777,7 @@
const params = {
materialId: currentId.value,
specification: modelForm.value.specification,
+ materialCode: modelForm.value.materialCode,
supplyType: modelForm.value.supplyType,
};
if (modelOperationType.value === "add") {
@@ -679,6 +810,11 @@
};
// 鏌ヨ瑙勬牸鍨嬪彿
+ const pagination = obj => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getModelList();
+ };
const getModelList = () => {
if (!currentId.value) {
return;
@@ -686,9 +822,14 @@
tableLoading.value = true;
modelListPage({
materialId: currentId.value,
+ current: page.current,
+ size: page.size,
+ specification: specification.value,
+ materialCode: materialCode.value,
}).then(res => {
console.log("res", res);
- tableData.value = res.data;
+ tableData.value = res.data.records || [];
+ page.total = res.data.total;
tableLoading.value = false;
});
};
@@ -772,8 +913,8 @@
gap: 20px;
}
.left {
- width: 450px;
- min-width: 450px;
+ width: 465px;
+ min-width: 465px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--
Gitblit v1.9.3