From 0d0a26f9c6af83e04909412dea29921f16ad1b2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 14 八月 2025 17:16:07 +0800
Subject: [PATCH] 重写用电区域，设备能耗添加用电区域字段
---
src/views/energyManagement/energyArea/index.vue | 844 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 489 insertions(+), 355 deletions(-)
diff --git a/src/views/energyManagement/energyArea/index.vue b/src/views/energyManagement/energyArea/index.vue
index b1ce8cb..63feff8 100644
--- a/src/views/energyManagement/energyArea/index.vue
+++ b/src/views/energyManagement/energyArea/index.vue
@@ -1,377 +1,511 @@
<template>
- <div class="app-container">
- <div class="search_form">
- <div>
- <span class="search_title">鍖哄煙鍚嶇О锛�</span>
- <el-input
- v-model="searchForm.areaName"
- style="width: 240px;margin-right: 30px"
- placeholder="璇疯緭鍏�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search"
- />
- <span class="search_title">鍖哄煙绫诲瀷锛�</span>
- <el-input
- v-model="searchForm.areaType"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- @change="handleQuery"
- clearable
- :prefix-icon="Search"
- />
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
- >鎼滅储</el-button
- >
- </div>
- <div>
- <el-button type="primary" @click="openForm('add')">鏂板</el-button>
- <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
- </div>
- </div>
- <div class="table_list">
- <PIMTable
- rowKey="id"
- :column="tableColumn"
- :tableData="tableData"
- :page="page"
- :isSelection="true"
- @selection-change="handleSelectionChange"
- :tableLoading="tableLoading"
- @pagination="pagination"
- ></PIMTable>
- </div>
- <el-dialog
- v-model="dialogFormVisible"
- title="鍖哄煙绠＄悊"
- width="70%"
- @close="closeDia"
- >
- <el-form
- :model="form"
- label-width="140px"
- label-position="top"
- :rules="rules"
- ref="formRef"
- >
- <el-row :gutter="30">
- <el-col :span="12">
- <el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
- <el-input
- v-model="form.areaName"
- placeholder="璇疯緭鍏�"
- clearable
- @change="setName"
- :disabled="operationType !== 'add'"
- >
- <!-- <el-option
- v-for="item in areaTypeList"
- :key="item"
- :label="item"
- :value="item"
- >
- {{item}}
- </el-option> -->
- </el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="鍖哄煙绫诲瀷锛�" prop="areaType">
- <el-input
- v-model="form.areaType"
- placeholder="璇疯緭鍏�"
- clearable
- />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row :gutter="30">
- <!-- <el-col :span="12">
- <el-form-item label="杩愯鏃堕棿锛�" prop="runDate">
- <el-date-picker
- style="width: 100%"
- v-model="form.runDate"
- value-format="YYYY-MM-DD"
- format="YYYY-MM-DD"
- type="date"
- placeholder="璇烽�夋嫨"
- clearable
- />
- </el-form-item>
- </el-col> -->
- <el-col :span="12">
- <el-form-item label="鐖跺尯鍩燂細" prop="fuId">
- <el-input
- v-model="form.fuId"
- placeholder="璇疯緭鍏�"
- clearable
- />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">纭</el-button>
- <el-button @click="closeDia">鍙栨秷</el-button>
- </div>
- </template>
- </el-dialog>
-
- </div>
+ <div class="app-container product-view">
+ <div class="left">
+ <div>
+ <el-input
+ v-model="search"
+ style="width: 210px"
+ placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�"
+ @change="searchFilter"
+ @clear="searchFilter"
+ clearable
+ prefix-icon="Search"
+ />
+ <el-button
+ type="primary"
+ @click="openProDia('addOne')"
+ style="margin-left: 10px"
+ >鏂板鐖跺尯鍩�</el-button
+ >
+ </div>
+ <div ref="containerRef">
+ <el-tree
+ ref="tree"
+ v-loading="treeLoad"
+ :data="list"
+ @node-click="handleNodeClick"
+ :expand-on-click-node="false"
+ default-expand-all
+ :default-expanded-keys="expandedKeys"
+ :draggable="true"
+ :filter-node-method="filterNode"
+ :props="{ children: 'children', label: 'label' }"
+ highlight-current
+ node-key="id"
+ style="
+ height: calc(100vh - 190px);
+ overflow-y: scroll;
+ scrollbar-width: none;
+ margin-top: 10px;
+ "
+ >
+ <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>
+ {{ data.label }}
+ </span>
+ <div>
+ <el-button
+ type="primary"
+ link
+ @click="openProDia('edit', data)"
+ >
+ 缂栬緫
+ </el-button>
+ <el-button type="primary" link @click="openModelDia('add','', data.id)">
+ 娣诲姞瀛愬尯鍩�
+ </el-button>
+ <el-button
+ v-if="!node.childNodes.length"
+ style="margin-left: 4px"
+ type="danger"
+ link
+ @click="remove(node, data)"
+ >
+ 鍒犻櫎
+ </el-button>
+ </div>
+ </div>
+ </template>
+ </el-tree>
+ </div>
+ </div>
+ <div class="right">
+ <div style="margin-bottom: 10px" v-if="isShowButton">
+ <el-button type="primary" @click="openModelDia('add')">
+ 鏂板瀛愬尯鍩�
+ </el-button>
+ <el-button
+ type="danger"
+ @click="handleDelete"
+ style="margin-left: 10px"
+ plain
+ >
+ 鍒犻櫎
+ </el-button>
+ </div>
+ <PIMTable
+ rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ :isSelection="true"
+ @selection-change="handleSelectionChange"
+ :tableLoading="tableLoading"
+ @pagination="pagination"
+ ></PIMTable>
+ </div>
+ <el-dialog v-model="productDia" title="鍖哄煙" width="400px" @keydown.enter.prevent>
+ <el-form
+ :model="form"
+ label-width="140px"
+ label-position="top"
+ :rules="rules"
+ ref="formRef"
+ >
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
+ <el-input
+ v-model="form.areaName"
+ placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+ clearable
+ @keydown.enter.prevent
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitForm">纭</el-button>
+ <el-button @click="closeProDia">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <el-dialog
+ v-model="modelDia"
+ title="瀛愬尯鍩�"
+ width="400px"
+ @close="closeModelDia"
+ @keydown.enter.prevent
+ >
+ <el-form
+ :model="modelForm"
+ label-width="140px"
+ label-position="top"
+ :rules="modelRules"
+ ref="modelFormRef"
+ >
+ <el-form-item label="鐖跺尯鍩燂細" prop="fuId">
+ <el-cascader v-model="modelForm.fuId" :options="list" :props="{
+ value: 'id',
+ label: 'label',
+ children: 'children',
+ checkStrictly: true,
+ }" />
+ </el-form-item>
+ <el-form-item label="鍖哄煙绫诲瀷锛�" prop="areaType">
+ <el-select v-model="modelForm.areaType" placeholder="璇烽�夋嫨">
+ <el-option v-for="item in area_type" :key="item.value" :label="item.label" :value="item.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
+ <el-input
+ v-model="modelForm.areaName"
+ placeholder="璇疯緭鍏ュ崟浣�"
+ clearable
+ @keydown.enter.prevent
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="primary" @click="submitModelForm">纭</el-button>
+ <el-button @click="closeModelDia">鍙栨秷</el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
</template>
<script setup>
-import {Search} from "@element-plus/icons-vue";
-import {onMounted, ref} from "vue";
-import {ElMessageBox} from "element-plus";
-import {getToken} from "@/utils/auth.js";
-import {areaListPage,areaDelete,areaAdd,areaUpdate} from "@/api/energyManagement/index.js";
-const { proxy } = getCurrentInstance();
+import { ref } from "vue";
+import { ElMessageBox } from "element-plus";
+import {
+ areaAdd,
+ areaDelete,
+ areaListPage,
+ areaListTree,
+} from "@/api/energyManagement/index.js";
-const data = reactive({
- searchForm: {
- areaName: "",
- areaType: ""
- },
- form: {
- areaName: "",
- areaType: "",
- fuId: ""
- }
-});
-const { searchForm,form } = toRefs(data);
-const page = ref({
+const { proxy } = getCurrentInstance();
+const tree = ref(null);
+const containerRef = ref(null);
+
+const productDia = ref(false);
+const modelDia = ref(false);
+const modelOperationType = ref("");
+const search = ref("");
+const currentId = ref("");
+const currentParentId = ref("");
+const operationType = ref("");
+const treeLoad = ref(false);
+const list = ref([]);
+const expandedKeys = ref([]);
+const {area_type} = proxy.useDict("area_type")
+const tableColumn = ref([
+ {
+ label: "鍖哄煙鍚嶇О",
+ prop: "areaName",
+ },
+ {
+ label: "鍖哄煙绫诲瀷",
+ prop: "areaType",
+ dataType: "tag",
+ formatData: (row) => {
+ return area_type.value.find(item => item.value == row)?.label;
+ }
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => {
+ openModelDia("edit", row);
+ },
+ },
+ ],
+ },
+]);
+const tableData = ref([]);
+const tableLoading = ref(false);
+const isShowButton = ref(false);
+const selectedRows = ref([]);
+const page = reactive({
current: 1,
size: 10,
- total: 0
+ total: 0,
});
-const dialogFormVisible = ref(false);
-const selectedRows = ref([]);
-const operationType = ref('');
-const tableData = ref([]);
-const emit = defineEmits(['close'])
-const tableLoading = ref(false);
-const tableColumn = ref([
- {
- label: "鍖哄煙鍚嶇О",
- prop: "areaName",
- width: 200,
- },
- {
- label: "鍖哄煙绫诲瀷",
- prop: "areaType",
- width: 200,
- },
- {
- label: "鐖跺尯鍩�",
- prop: "fuId",
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: 'right',
- operation: [
- {
- name: "缂栬緫",
- type: "text",
- clickFun: (row) => {
- openForm("edit", row);
- },
- },
- ],
- },
-]);
+const data = reactive({
+ form: {
+ areaName: "",
+ },
+ rules: {
+ areaName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ },
+ modelForm: {
+ areaName: "",
+ fuId: "",
+ },
+ modelRules: {
+ areaName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ fuId: [{ required: true, message: "璇疯緭鍏�", trigger: "change" }],
+ },
+});
+const { form, rules, modelForm, modelRules } = toRefs(data);
+// 鏌ヨ浜у搧鏍�
+const getProductTreeList = () => {
+ treeLoad.value = true;
+ areaListTree()
+ .then((res) => {
+ list.value = res;
+ list.value.forEach((a) => {
+ expandedKeys.value.push(a.label);
+ });
+ treeLoad.value = false;
+ })
+ .catch((err) => {
+ treeLoad.value = false;
+ });
+};
+// 杩囨护浜у搧鏍�
+const searchFilter = () => {
+ proxy.$refs.tree.filter(search.value);
+};
+// 鎵撳紑浜у搧寮规
+const openProDia = (type, data) => {
+ operationType.value = type;
+ productDia.value = true;
+ form.value.areaName = "";
+ if (type === "edit") {
+ form.value.areaName = data.areaName;
+ }
+};
+// 鎵撳紑瑙勬牸鍨嬪彿寮规
+const openModelDia = (type, data,fatherId) => {
+ modelOperationType.value = type;
+ modelDia.value = true;
+ modelForm.value.fuId = "";
+ modelForm.value.areaType = "";
+ modelForm.value.areaName = "";
+ modelForm.value.id = "";
+ modelForm.value.fuId = fatherId;
+ if (type === "edit") {
+ modelForm.value = { ...data };
+ }
+};
+// 鎻愪氦浜у搧鍚嶇О淇敼
+const submitForm = () => {
+ proxy.$refs.formRef.validate((valid) => {
+ if (valid) {
+ if (operationType.value === "add") {
+ form.value.parentId = currentId.value;
+ form.value.id = "";
+ } else if (operationType.value === "addOne") {
+ form.value.id = "";
+ form.value.parentId = "";
+ } else {
+ form.value.id = currentId.value;
+ form.value.parentId = "";
+ }
+ areaAdd(form.value).then((res) => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeProDia();
+ getProductTreeList();
+ });
+ }
+ });
+};
+// 鍏抽棴浜у搧寮规
+const closeProDia = () => {
+ proxy.$refs.formRef.resetFields();
+ productDia.value = false;
+};
+// 鍒犻櫎浜у搧
+const remove = (node, data) => {
+ let ids = [];
+ ids.push(data.id);
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ tableLoading.value = true;
+ areaDelete(ids)
+ .then((res) => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getProductTreeList();
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+};
+// 閫夋嫨浜у搧
+const handleNodeClick = (val, node, el) => {
+ // 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
+ isShowButton.value = !(val.children && val.children.length > 0);
+ // 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
+ currentId.value = val.id;
+ currentParentId.value = val.parentId;
+ getModelList(true);
+};
+
+// 鎻愪氦瑙勬牸鍨嬪彿淇敼
+const submitModelForm = () => {
+ proxy.$refs.modelFormRef.validate((valid) => {
+ if (valid) {
+ modelForm.value.fuId = currentId.value;
+ areaAdd(modelForm.value).then((res) => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeModelDia();
+ getModelList();
+ getProductTreeList();
+ });
+ }
+ });
+};
+// 鍏抽棴鍨嬪彿寮规
+const closeModelDia = () => {
+ proxy.$refs.modelFormRef.resetFields();
+ modelDia.value = false;
+};
// 琛ㄦ牸閫夋嫨鏁版嵁
const handleSelectionChange = (selection) => {
- selectedRows.value = selection;
+ selectedRows.value = selection;
};
-const formDia = ref()
-const upload = reactive({
- // 鏄惁鏄剧ず寮瑰嚭灞傦紙瀹㈡埛瀵煎叆锛�
- open: false,
- // 寮瑰嚭灞傛爣棰橈紙瀹㈡埛瀵煎叆锛�
- title: "",
- // 鏄惁绂佺敤涓婁紶
- isUploading: false,
- // 璁剧疆涓婁紶鐨勮姹傚ご閮�
- headers: { Authorization: "Bearer " + getToken() },
- // 涓婁紶鐨勫湴鍧�
- url: import.meta.env.VITE_APP_BASE_API + "/equipmentEnergyConsumption/importData",
- // 鏂囦欢涓婁紶鍓嶇殑鍥炶皟
- beforeUpload: (file) => {
- console.log('鏂囦欢鍗冲皢涓婁紶', file);
- // 鍙互鍦ㄦ澶勫仛鏂囦欢绫诲瀷鎴栧ぇ灏忔牎楠�
- const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
- if (!isValid) {
- proxy.$modal.msgError("鍙兘涓婁紶 Excel 鏂囦欢");
- }
- return isValid;
- },
- // 鏂囦欢鐘舵�佹敼鍙樻椂鐨勫洖璋�
- onChange: (file, fileList) => {
- console.log('鏂囦欢鐘舵�佹敼鍙�', file, fileList);
- },
- // 鏂囦欢涓婁紶鎴愬姛鏃剁殑鍥炶皟
- onSuccess: (response, file, fileList) => {
- console.log('涓婁紶鎴愬姛', response, file, fileList);
- if(response.code === 200){
- proxy.$modal.msgSuccess("鏂囦欢涓婁紶鎴愬姛");
- }else if(response.code === 500){
- ElMessageBox.error(response.msg);
- }else{
- ElMessageBox.warning(response.msg);
- }
- },
- // 鏂囦欢涓婁紶澶辫触鏃剁殑鍥炶皟
- onError: (error, file, fileList) => {
- console.error('涓婁紶澶辫触', error, file, fileList);
- ElMessageBox.error("鏂囦欢涓婁紶澶辫触");
- },
- // 鏂囦欢涓婁紶杩涘害鍥炶皟
- onProgress: (event, file, fileList) => {
- console.log('涓婁紶涓�...', event.percent);
- }
-});
-// 鏌ヨ鍒楄〃
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-const handleQuery = () => {
- page.current = 1;
- getList();
-};
+// 鏌ヨ瑙勬牸鍨嬪彿
const pagination = (obj) => {
- page.current = obj.page;
- page.size = obj.limit;
- getList();
+ page.current = obj.page;
+ page.size = obj.limit;
+ getModelList();
};
-const getList = () => {
- tableLoading.value = true;
- areaListPage({ ...searchForm.value, ...page.value }).then((res) => {
- tableLoading.value = false;
- if (res && res.data) {
- tableData.value = res.data.records || [];
- page.total = res.data.total || 0;
- } else {
- tableData.value = [];
- page.total = 0;
- ElMessageBox.warning('鏈幏鍙栧埌鏁版嵁');
- }
- })
- .catch((err) => {
- tableLoading.value = false;
- console.error('鏁版嵁鍔犺浇澶辫触:', err);
- ElMessageBox.error('鏁版嵁鍔犺浇澶辫触锛岃閲嶈瘯');
- });
+const getModelList = (val = false) => {
+ tableLoading.value = true;
+ let obj = {
+ id: currentId.value,
+ fuId:currentId.value,
+ current: page.current,
+ size: page.size
+ }
+ if(val){
+ delete obj.id;
+ }else{
+ delete obj.fuId
+ }
+ areaListPage(obj).then((res) => {
+ console.log("res", res);
+ tableData.value = res.data.records;
+ page.total = res.data.total;
+ tableLoading.value = false;
+ });
};
-// 鎵撳紑寮规
-const openDialog = (type, row) => {
- operationType.value = type;
- dialogFormVisible.value = true;
- // form.value.maintainer = userStore.nickName;
- // form.value.maintenanceTime = getCurrentDate();
- form.value = {}
- proxy.resetForm("formRef");
- areaListPage().then((res) => {
- codeList.value = res.data;
- });
- if (type === "edit") {
- form.value = {...row}
- }
-}
-// 鎵撳紑寮规
-const openForm = (type, row) => {
- openDialog(type, row)
-};
-// 鎻愪氦琛ㄥ崟
-const submitForm = () => {
- proxy.$refs["formRef"].validate(valid => {
- if (valid) {
- if (operationType.value === "add") {
- areaAdd(form.value).then(response => {
- proxy.$modal.msgSuccess("鏂板鎴愬姛")
- closeDia()
- })
- } else {
- areaUpdate(form.value).then(response => {
- proxy.$modal.msgSuccess("淇敼鎴愬姛")
- closeDia()
- })
- }
- }
- })
-}
-// 鍏抽棴寮规
-const closeDia = () => {
- proxy.resetForm("formRef");
- dialogFormVisible.value = false;
- emit('close')
-};
-/** 瀵煎叆鎸夐挳鎿嶄綔 */
-function handleImport() {
- upload.title = "璁惧鑳借��";
- upload.open = true;
- // 娓呯┖涓婃涓婁紶鐨勬枃浠跺垪琛�
- nextTick(() => {
- proxy.$refs["uploadRef"]?.clearFiles();
- });
-}
-function importTemplate() {
- proxy.download(
- "/equipmentEnergyConsumption/export",
- {},
- '璁惧鑳借�楀鍏ユā鐗�.xlsx'
- );
-}
-/** 鎻愪氦涓婁紶鏂囦欢 */
-function submitFileForm() {
- proxy.$refs["uploadRef"].submit();
-}
-
-/** 寮规鍏抽棴鏃舵竻绌烘枃浠跺垪琛� */
-function handleDialogClose() {
- nextTick(() => {
- proxy.$refs["uploadRef"]?.clearFiles();
- });
-}
-
+// 鍒犻櫎瑙勬牸鍨嬪彿
const handleDelete = () => {
- let ids = [];
- if (selectedRows.value.length > 0) {
- ids = selectedRows.value.map((item) => item.id);
- } else {
- proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
- return;
- }
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- tableLoading.value = true;
- areaDelete(ids)
- .then((res) => {
- proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- getList();
- })
- .finally(() => {
- tableLoading.value = false;
- });
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
+ let ids = [];
+ if (selectedRows.value.length > 0) {
+ ids = selectedRows.value.map((item) => item.id);
+ } else {
+ proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+ return;
+ }
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "鍒犻櫎鎻愮ず", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ tableLoading.value = true;
+ areaDelete(ids)
+ .then((res) => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getModelList();
+ getProductTreeList();
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
};
-onMounted(() => {
- getList();
-});
+// 璋冪敤tree杩囨护鏂规硶 涓枃鑻辫繃婊�
+const filterNode = (value, data, node) => {
+ if (!value) {
+ //濡傛灉鏁版嵁涓虹┖锛屽垯杩斿洖true,鏄剧ず鎵�鏈夌殑鏁版嵁椤�
+ return true;
+ }
+ // 鏌ヨ鍒楄〃鏄惁鏈夊尮閰嶆暟鎹紝灏嗗�煎皬鍐欙紝鍖归厤鑻辨枃鏁版嵁
+ let val = value.toLowerCase();
+ return chooseNode(val, data, node); // 璋冪敤杩囨护浜屽眰鏂规硶
+};
+// 杩囨护鐖惰妭鐐� / 瀛愯妭鐐� (濡傛灉杈撳叆鐨勫弬鏁版槸鐖惰妭鐐逛笖鑳藉尮閰嶏紝鍒欒繑鍥炶鑺傜偣浠ュ強鍏朵笅鐨勬墍鏈夊瓙鑺傜偣锛涘鏋滃弬鏁版槸瀛愯妭鐐癸紝鍒欒繑鍥炶鑺傜偣鐨勭埗鑺傜偣銆俷ame鏄腑鏂囧瓧绗︼紝enName鏄嫳鏂囧瓧绗�.
+const chooseNode = (value, data, node) => {
+ if (data.label.indexOf(value) !== -1) {
+ return true;
+ }
+ const level = node.level;
+ // 濡傛灉浼犲叆鐨勮妭鐐规湰韬氨鏄竴绾ц妭鐐瑰氨涓嶇敤鏍￠獙浜�
+ if (level === 1) {
+ return false;
+ }
+ // 鍏堝彇褰撳墠鑺傜偣鐨勭埗鑺傜偣
+ let parentData = node.parent;
+ // 閬嶅巻褰撳墠鑺傜偣鐨勭埗鑺傜偣
+ let index = 0;
+ while (index < level - 1) {
+ // 濡傛灉鍖归厤鍒扮洿鎺ヨ繑鍥烇紝姝ゅname鍊兼槸涓枃瀛楃锛宔nName鏄嫳鏂囧瓧绗︺�傚垽鏂尮閰嶄腑鑻辨枃杩囨护
+ if (parentData.data.label.indexOf(value) !== -1) {
+ return true;
+ }
+ // 鍚﹀垯鐨勮瘽鍐嶅線涓婁竴灞傚仛鍖归厤
+ parentData = parentData.parent;
+ index++;
+ }
+ // 娌″尮閰嶅埌杩斿洖false
+ return false;
+};
+getProductTreeList();
</script>
<style scoped>
-
-</style>
\ No newline at end of file
+.product-view {
+ display: flex;
+}
+.left {
+ width: 380px;
+ padding: 16px;
+ background: #ffffff;
+}
+.right {
+ width: calc(100% - 380px);
+ padding: 16px;
+ margin-left: 20px;
+ background: #ffffff;
+}
+.custom-tree-node {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 14px;
+ padding-right: 8px;
+}
+.tree-node-content {
+ display: flex;
+ align-items: center; /* 鍨傜洿灞呬腑 */
+ height: 100%;
+}
+.orange-icon {
+ color: orange;
+ font-size: 18px;
+ margin-right: 8px; /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
+}
+</style>
--
Gitblit v1.9.3