From 4fef2b8afba85d8f2f8be70b85ffc105cfc4deda Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 13 三月 2026 11:49:12 +0800
Subject: [PATCH] 生产维护树形结构加载慢改成懒加载
---
src/views/basicData/product/index.vue | 556 +++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 418 insertions(+), 138 deletions(-)
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index e15c286..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"
@@ -24,28 +27,20 @@
: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">
- <component :is="data.children && data.children.length > 0
- ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
+ <el-icon class="tree-icon">
+ <component :is="node.expanded ? 'FolderOpened' : 'Folder'" />
</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 +57,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)">
鍒犻櫎
@@ -81,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')">
@@ -89,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>
@@ -134,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"
@@ -150,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"
@@ -204,42 +210,18 @@
<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 />
</el-form-item>
</el-col>
- </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="鐗╂枡浠ｇ爜锛�"
+ <el-form-item label="鐗╂枡缂栫爜锛�"
prop="materialCode">
<el-input v-model="modelForm.materialCode"
- placeholder="璇疯緭鍏ョ墿鏂欎唬鐮�"
+ placeholder="璇疯緭鍏ョ墿鏂欑紪鐮�"
clearable
@keydown.enter.prevent />
</el-form-item>
@@ -247,45 +229,18 @@
</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
+ filterable
+ style="width: 100%">
+ <el-option label="鑷埗"
+ value="鑷埗" />
+ <el-option label="澶栬喘"
+ value="澶栬喘" />
+ </el-select>
</el-form-item>
</el-col>
</el-row>
@@ -295,6 +250,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>
@@ -315,9 +301,11 @@
delProductModel,
modelListPage,
productTreeList,
+ productTreeListQuery,
addOrEditProductConfig,
updateOrEditProductConfig,
delProductConfig,
+ loadData,
} from "@/api/basicData/newProduct.js";
import ImportExcel from "./ImportExcel/index.vue";
@@ -327,7 +315,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 +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 = () => {
@@ -375,6 +381,10 @@
prop: "specification",
},
{
+ label: "鐗╂枡缂栫爜",
+ prop: "materialCode",
+ },
+ {
label: "鍗曚綅",
prop: "baseUnit",
},
@@ -402,6 +412,7 @@
size: 10,
total: 0,
});
+
const data = reactive({
form: {
materialTypeId: null,
@@ -421,51 +432,47 @@
baseUnit: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
},
modelForm: {
- model: "",
- unit: "",
- identifierCode: "",
- materialCode: "",
specification: "",
supplyType: "",
- originatorName: "",
- originatorOrg: "",
+ materialCode: "",
+ 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" }],
+ materialCode: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ },
+ 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;
- productTreeList()
+ productTreeList({ type: 2 })
.then(res => {
// 杞崲鏂扮殑鏁版嵁鏍煎紡
const newList = [];
expandedKeys.value = [];
for (const category of res.data) {
- // 娣诲姞鍒嗙被鑺傜偣
+ // 娣诲姞鍒嗙被鑺傜偣锛堝彧杩斿洖涓�灞傛暟鎹紝涓嶅寘鍚瓙鑺傜偣锛�
const categoryNode = {
label: category.configName,
id: category.configId,
- children: category.materialList.map(item => ({
- id: item.id,
- label: item.materialName,
- inventoryCategoryId: item.inventoryCategoryId,
- materialTypeId: item.materialTypeId,
- remark: item.remark,
- baseUnit: item.baseUnit,
- })),
+ isLeaf: false,
+ children: [], // 鍒濆鍖栦负绌烘暟缁勶紝鐐瑰嚮鏃跺啀鍔犺浇
};
newList.push(categoryNode);
- expandedKeys.value.push(category.configName);
}
list.value = newList;
treeLoad.value = false;
@@ -474,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) => {
@@ -503,24 +565,38 @@
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;
+ modelForm.value.materialCode = null;
if (type === "edit" && data) {
// 缂栬緫妯″紡锛屽洖濉暟鎹�
- modelForm.value = { ...data };
+ modelForm.value.specification = data.specification || "";
+ modelForm.value.supplyType = data.supplyType || "";
+ modelForm.value.id = data.skuId || null;
+ modelForm.value.materialCode = data.materialCode || null;
}
};
// 鎻愪氦浜у搧鍚嶇О淇敼
@@ -572,7 +648,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 +730,37 @@
};
// 閫夋嫨浜у搧
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;
+ }
// 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
isShowButton.value = !(val.children && val.children.length > 0);
// 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
@@ -614,12 +776,9 @@
// 鏋勫缓鎻愪氦鍙傛暟
const params = {
materialId: currentId.value,
- identifierCode: modelForm.value.identifierCode,
- materialCode: modelForm.value.materialCode,
specification: modelForm.value.specification,
+ materialCode: modelForm.value.materialCode,
supplyType: modelForm.value.supplyType,
- originatorName: modelForm.value.originatorName,
- originatorOrg: modelForm.value.originatorOrg,
};
if (modelOperationType.value === "add") {
// 娣诲姞瑙勬牸鍨嬪彿
@@ -630,6 +789,7 @@
});
} else if (modelOperationType.value === "edit") {
// 淇敼瑙勬牸鍨嬪彿
+ params.id = modelForm.value.id;
updateOrEditProductModel(params).then(res => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeModelDia();
@@ -664,10 +824,12 @@
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;
- page.total = res.total;
+ tableData.value = res.data.records || [];
+ page.total = res.data.total;
tableLoading.value = false;
});
};
@@ -675,7 +837,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 +907,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 +958,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 +974,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