From 17c1d2d1191dc310e2df0c169f5cd184e82ab8f8 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 12 三月 2026 17:50:01 +0800
Subject: [PATCH] bug修改
---
src/views/basicData/product/index.vue | 443 +++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 301 insertions(+), 142 deletions(-)
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index e15c286..538687f 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -12,6 +12,9 @@
<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"
@@ -24,28 +27,21 @@
:props="{ children: 'children', label: 'label' }"
highlight-current
node-key="id"
- class="product-tree-scroll"
- style="height: calc(100vh - 190px); overflow-y: auto">
+ class="product-tree-scroll">
<template #default="{ node, data }">
<div class="custom-tree-node">
<span class="tree-node-content">
- <el-icon class="orange-icon">
+ <el-icon class="tree-icon">
<component :is="data.children && data.children.length > 0
? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
</el-icon>
<span class="tree-node-label">{{ data.label }}</span>
</span>
- <div v-if="!node.childNodes.length">
+ <div v-if="data.isLeaf">
<el-button type="primary"
link
@click="openProDia('edit', data)">
缂栬緫
- </el-button>
- <el-button v-if="data.children && data.children.length > 0"
- type="primary"
- link
- @click="openProDia('add', data)">
- 娣诲姞浜у搧
</el-button>
<el-button v-if="!node.childNodes.length"
style="margin-left: 4px"
@@ -62,14 +58,14 @@
@click="openProDia1('edit', data)">
缂栬緫
</el-button>
- <el-button v-if="data.children && data.children.length > 0"
- type="primary"
+ <el-button type="primary"
link
@click="openProDia('add', data)">
娣诲姞浜у搧
</el-button>
<el-button style="margin-left: 4px"
type="danger"
+ v-if="!node.childNodes.length"
link
@click="remove1(node, data)">
鍒犻櫎
@@ -99,11 +95,10 @@
<PIMTable rowKey="id"
:column="tableColumn"
:tableData="tableData"
- :page="page"
:isSelection="true"
+ :isShowPagination="false"
@selection-change="handleSelectionChange"
- :tableLoading="tableLoading"
- @pagination="pagination"></PIMTable>
+ :tableLoading="tableLoading"></PIMTable>
</div>
<el-dialog v-model="productDia"
title="浜у搧"
@@ -204,8 +199,8 @@
<el-row>
<el-col :span="24">
<el-form-item label="瑙勬牸鍨嬪彿锛�"
- prop="model">
- <el-input v-model="modelForm.model"
+ prop="specification">
+ <el-input v-model="modelForm.specification"
placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�"
clearable
@keydown.enter.prevent />
@@ -214,78 +209,17 @@
</el-row>
<el-row>
<el-col :span="24">
- <el-form-item label="鍗曚綅锛�"
- prop="unit">
- <el-input v-model="modelForm.unit"
- placeholder="璇疯緭鍏ュ崟浣�"
- clearable
- @keydown.enter.prevent />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="鏍囪瘑绗︿唬鐮侊細"
- prop="identifierCode">
- <el-input v-model="modelForm.identifierCode"
- placeholder="璇疯緭鍏ユ爣璇嗙浠ｇ爜"
- clearable
- @keydown.enter.prevent />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <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">
- <el-form-item label="瑙勬牸锛�"
- prop="specification">
- <el-input v-model="modelForm.specification"
- placeholder="璇疯緭鍏ヨ鏍�"
- clearable
- @keydown.enter.prevent />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="渚涘簲绫诲瀷锛�"
+ <el-form-item label="渚涘簲鏂瑰紡锛�"
prop="supplyType">
- <el-input v-model="modelForm.supplyType"
- placeholder="璇疯緭鍏ヤ緵搴旂被鍨�"
- clearable
- @keydown.enter.prevent />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="鍒涘浜哄鍚嶏細"
- prop="originatorName">
- <el-input v-model="modelForm.originatorName"
- placeholder="璇疯緭鍏ュ垱濮嬩汉濮撳悕"
- clearable
- @keydown.enter.prevent />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="鍒涘浜虹粍缁囷細"
- prop="originatorOrg">
- <el-input v-model="modelForm.originatorOrg"
- placeholder="璇疯緭鍏ュ垱濮嬩汉缁勭粐"
- clearable
- @keydown.enter.prevent />
+ <el-select v-model="modelForm.supplyType"
+ placeholder="璇烽�夋嫨渚涘簲鏂瑰紡"
+ clearable
+ style="width: 100%">
+ <el-option label="鑷埗"
+ value="鑷埗" />
+ <el-option label="澶栬喘"
+ value="澶栬喘" />
+ </el-select>
</el-form-item>
</el-col>
</el-row>
@@ -295,6 +229,37 @@
<el-button type="primary"
@click="submitModelForm">纭</el-button>
<el-button @click="closeModelDia">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <el-dialog v-model="configDia"
+ title="浜у搧澶х被"
+ width="400px"
+ @keydown.enter.prevent>
+ <el-form :model="configForm"
+ label-width="140px"
+ label-position="top"
+ :rules="configRules"
+ ref="configFormRef">
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="閰嶇疆鍚嶇О锛�"
+ prop="configName">
+ <el-input v-model="configForm.configName"
+ placeholder="璇疯緭鍏ラ厤缃悕绉�"
+ maxlength="20"
+ show-word-limit
+ clearable
+ @keydown.enter.prevent />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary"
+ @click="submitConfigForm">纭</el-button>
+ <el-button @click="closeConfigDia">鍙栨秷</el-button>
</div>
</template>
</el-dialog>
@@ -318,6 +283,7 @@
addOrEditProductConfig,
updateOrEditProductConfig,
delProductConfig,
+ loadData,
} from "@/api/basicData/newProduct.js";
import ImportExcel from "./ImportExcel/index.vue";
@@ -327,7 +293,9 @@
const productDia = ref(false);
const modelDia = ref(false);
+ const configDia = ref(false);
const modelOperationType = ref("");
+ const configOperationType = ref("");
const search = ref("");
const currentId = ref("");
const currentParentId = ref("");
@@ -337,6 +305,20 @@
const expandedKeys = ref([]);
const inventoryCategoryList = ref([]);
const materialTypeList = ref([]);
+
+ const getloadData = () => {
+ loadData()
+ .then(res => {
+ getInventoryCategoryList();
+ getMaterialTypeList();
+ getProductTreeList();
+ tableData.value = [];
+ isShowButton.value = false;
+ })
+ .catch(err => {
+ console.error("鎷夊彇澶辫触:", err);
+ });
+ };
// 鑾峰彇瀛樿揣绫诲埆鍒楄〃
const getInventoryCategoryList = () => {
@@ -397,11 +379,7 @@
const tableLoading = ref(false);
const isShowButton = ref(false);
const selectedRows = ref([]);
- const page = reactive({
- current: 1,
- size: 10,
- total: 0,
- });
+
const data = reactive({
form: {
materialTypeId: null,
@@ -421,27 +399,28 @@
baseUnit: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
},
modelForm: {
- model: "",
- unit: "",
- identifierCode: "",
- materialCode: "",
specification: "",
supplyType: "",
- originatorName: "",
- originatorOrg: "",
+ id: null,
},
modelRules: {
- model: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- unit: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- identifierCode: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- materialCode: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
specification: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- supplyType: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- originatorName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- originatorOrg: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ supplyType: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
+ },
+ configForm: {
+ configName: "",
+ type: 1,
+ id: null,
+ },
+ configRules: {
+ configName: [
+ { required: true, message: "璇疯緭鍏�", trigger: "blur" },
+ { max: 20, message: "閰嶇疆鍚嶇О涓嶈兘瓒呰繃20涓瓧绗�", trigger: "blur" },
+ ],
},
});
- const { form, rules, modelForm, modelRules } = toRefs(data);
+ const { form, rules, modelForm, modelRules, configForm, configRules } =
+ toRefs(data);
// 鏌ヨ浜у搧鏍�
const getProductTreeList = () => {
treeLoad.value = true;
@@ -455,8 +434,10 @@
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,
@@ -503,24 +484,36 @@
form.value.materialTypeId = data.id || null;
}
};
+ // 鎵撳紑浜у搧澶х被寮规
+ const openProDia1 = (type, data) => {
+ configOperationType.value = type;
+ configDia.value = true;
+ // 閲嶇疆琛ㄥ崟
+ configForm.value = {
+ configName: "",
+ type: 1,
+ id: null,
+ };
+ if (type === "edit" && data) {
+ // 缂栬緫妯″紡锛屽洖濉暟鎹�
+ configForm.value.configName = data.label || "";
+ configForm.value.id = data.id || null;
+ }
+ };
// 鎵撳紑瑙勬牸鍨嬪彿寮规
const openModelDia = (type, data) => {
modelOperationType.value = type;
modelDia.value = true;
// 閲嶇疆鎵�鏈夊瓧娈�
- modelForm.value.model = "";
- modelForm.value.unit = "";
- modelForm.value.identifierCode = "";
- modelForm.value.materialCode = "";
modelForm.value.specification = "";
modelForm.value.supplyType = "";
- modelForm.value.originatorName = "";
- modelForm.value.originatorOrg = "";
- modelForm.value.id = "";
+ modelForm.value.id = null;
if (type === "edit" && data) {
// 缂栬緫妯″紡锛屽洖濉暟鎹�
- modelForm.value = { ...data };
+ modelForm.value.specification = data.specification || "";
+ modelForm.value.supplyType = data.supplyType || "";
+ modelForm.value.id = data.skuId || null;
}
};
// 鎻愪氦浜у搧鍚嶇О淇敼
@@ -572,7 +565,62 @@
form.value.remark = "";
productDia.value = false;
};
-
+ // 鎻愪氦浜у搧澶х被淇敼
+ const submitConfigForm = () => {
+ proxy.$refs.configFormRef.validate(valid => {
+ if (valid) {
+ const params = {
+ configName: configForm.value.configName,
+ type: 1,
+ };
+ if (configOperationType.value === "edit") {
+ params.id = configForm.value.id;
+ updateOrEditProductConfig(params).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeConfigDia();
+ getProductTreeList();
+ getMaterialTypeList();
+ });
+ } else {
+ addOrEditProductConfig(params).then(res => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeConfigDia();
+ getProductTreeList();
+ getMaterialTypeList();
+ });
+ }
+ }
+ });
+ };
+ // 鍏抽棴浜у搧澶х被寮规
+ const closeConfigDia = () => {
+ proxy.$refs.configFormRef.resetFields();
+ configDia.value = false;
+ };
+ // 鍒犻櫎浜у搧澶х被
+ const remove1 = (node, data) => {
+ let ids = [];
+ ids.push(data.id);
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ tableLoading.value = true;
+ delProductConfig(ids)
+ .then(res => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getProductTreeList();
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
// 鍒犻櫎浜у搧
const remove = (node, data) => {
let ids = [];
@@ -599,6 +647,10 @@
};
// 閫夋嫨浜у搧
const handleNodeClick = (val, node, el) => {
+ // 鐐瑰嚮闈炲彾瀛愯妭鐐规椂锛屼笉鎵ц浠ヤ笅閫昏緫
+ if (!val.isLeaf) {
+ return;
+ }
// 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
isShowButton.value = !(val.children && val.children.length > 0);
// 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
@@ -614,12 +666,8 @@
// 鏋勫缓鎻愪氦鍙傛暟
const params = {
materialId: currentId.value,
- identifierCode: modelForm.value.identifierCode,
- materialCode: modelForm.value.materialCode,
specification: modelForm.value.specification,
supplyType: modelForm.value.supplyType,
- originatorName: modelForm.value.originatorName,
- originatorOrg: modelForm.value.originatorOrg,
};
if (modelOperationType.value === "add") {
// 娣诲姞瑙勬牸鍨嬪彿
@@ -630,6 +678,7 @@
});
} else if (modelOperationType.value === "edit") {
// 淇敼瑙勬牸鍨嬪彿
+ params.id = modelForm.value.id;
updateOrEditProductModel(params).then(res => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeModelDia();
@@ -650,11 +699,6 @@
};
// 鏌ヨ瑙勬牸鍨嬪彿
- const pagination = obj => {
- page.current = obj.page;
- page.size = obj.limit;
- getModelList();
- };
const getModelList = () => {
if (!currentId.value) {
return;
@@ -662,12 +706,9 @@
tableLoading.value = true;
modelListPage({
materialId: currentId.value,
- current: page.current,
- size: page.size,
}).then(res => {
console.log("res", res);
tableData.value = res.data;
- page.total = res.total;
tableLoading.value = false;
});
};
@@ -675,7 +716,7 @@
const handleDelete = () => {
let ids = [];
if (selectedRows.value.length > 0) {
- ids = selectedRows.value.map(item => item.id);
+ ids = selectedRows.value.map(item => item.skuId);
} else {
proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
return;
@@ -745,19 +786,49 @@
<style scoped>
.product-view {
display: flex;
+ min-height: 100vh;
+ background-color: #f5f7fa;
+ padding: 20px;
+ gap: 20px;
}
.left {
- width: 450px;
- min-width: 450px;
- padding: 16px;
+ width: 465px;
+ min-width: 465px;
background: #ffffff;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .left > div:first-child {
+ padding: 16px;
+ border-bottom: 1px solid #e4e7ed;
+ background-color: #fafafa;
+ }
+ .left > div:last-child {
+ flex: 1;
+ overflow: hidden;
}
.right {
flex: 1;
min-width: 0;
- padding: 16px;
- margin-left: 20px;
background: #ffffff;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ }
+ .right > div:first-child {
+ padding: 16px;
+ border-bottom: 1px solid #e4e7ed;
+ background-color: #fafafa;
+ }
+ .right > div:last-child {
+ flex: 1;
+ overflow: auto;
+ padding: 16px;
}
.custom-tree-node {
flex: 1;
@@ -766,7 +837,13 @@
align-items: center;
justify-content: space-between;
font-size: 14px;
- padding-right: 8px;
+ padding: 8px 12px;
+ margin: 2px 0;
+ border-radius: 4px;
+ transition: all 0.3s ease;
+ }
+ .custom-tree-node:hover {
+ background-color: #f5f7fa;
}
.tree-node-content {
flex: 1;
@@ -776,35 +853,117 @@
height: 100%;
overflow: hidden;
}
- .tree-node-content .orange-icon {
+ .tree-node-content .tree-icon {
flex-shrink: 0;
}
.tree-node-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ font-weight: 500;
+ color: #303133;
}
- .orange-icon {
- color: orange;
+ .tree-icon {
+ color: #409eff;
font-size: 18px;
- margin-right: 8px; /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
+ margin-right: 10px;
+ transition: color 0.3s ease;
+ }
+ .custom-tree-node:hover .tree-icon {
+ color: #66b1ff;
}
.product-tree-scroll {
+ height: calc(100vh - 240px);
+ overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #c0c4cc #f5f7fa;
}
.product-tree-scroll::-webkit-scrollbar {
- width: 8px;
+ width: 6px;
}
.product-tree-scroll::-webkit-scrollbar-track {
background: #f5f7fa;
- border-radius: 4px;
+ border-radius: 3px;
}
.product-tree-scroll::-webkit-scrollbar-thumb {
background: #c0c4cc;
- border-radius: 4px;
+ border-radius: 3px;
}
.product-tree-scroll::-webkit-scrollbar-thumb:hover {
background: #909399;
}
+ .el-button {
+ border-radius: 4px;
+ font-size: 13px;
+ }
+ .el-button--primary {
+ background-color: #fff;
+ border-color: #409eff;
+ color: #409eff;
+ }
+ .el-button--primary.is-link {
+ background-color: transparent;
+ border-color: transparent;
+ color: #409eff;
+ }
+ .el-button--primary.is-link:hover {
+ background-color: transparent;
+ border-color: transparent;
+ color: #0033ff;
+ }
+ .el-button--primary:hover {
+ background-color: #e3f1ff;
+ border-color: #66b1ff;
+ }
+ .el-input {
+ border-radius: 4px;
+ }
+ .el-input__wrapper {
+ border-radius: 4px;
+ }
+ .el-dialog {
+ border-radius: 8px;
+ }
+ .el-dialog__header {
+ border-bottom: 1px solid #e4e7ed;
+ padding: 16px 20px;
+ }
+ .el-dialog__title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #303133;
+ }
+ .el-dialog__body {
+ padding: 20px;
+ }
+ .el-form-item {
+ margin-bottom: 16px;
+ }
+ .el-form-item__label {
+ font-weight: 500;
+ color: #606266;
+ }
+ .dialog-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ padding: 16px 20px;
+ border-top: 1px solid #e4e7ed;
+ background-color: #fafafa;
+ }
+ .PIMTable {
+ border-radius: 4px;
+ overflow: hidden;
+ }
+ .el-table {
+ border-radius: 4px;
+ }
+ .el-table th {
+ background-color: #fafafa;
+ font-weight: 600;
+ color: #303133;
+ }
+ .el-table tr:hover {
+ background-color: #f5f7fa;
+ }
</style>
--
Gitblit v1.9.3