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 | 387 +++++++++++++++++++++++++++++--------------------------
1 files changed, 204 insertions(+), 183 deletions(-)
diff --git a/src/views/energyManagement/energyArea/index.vue b/src/views/energyManagement/energyArea/index.vue
index 25ce083..63feff8 100644
--- a/src/views/energyManagement/energyArea/index.vue
+++ b/src/views/energyManagement/energyArea/index.vue
@@ -2,39 +2,72 @@
<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('add')" style="margin-left: 10px">鏂板鐖跺尯鍩�</el-button>
+ <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="
+ <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'" />
+ ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
</el-icon>
- {{ data.fuId==null ? data.id : '' || data.areaName }}
+ {{ data.label }}
</span>
<div>
- <el-button v-if="node.level < 2" type="primary" link @click="openProDia('edit', data)">
+ <el-button
+ type="primary"
+ link
+ @click="openProDia('edit', data)"
+ >
缂栬緫
</el-button>
- <!-- <el-button v-if="node.level < 2" type="primary" link @click="openProDia('add', data)" :disabled="node.level >= 3">
+ <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>
+ <el-button
+ v-if="!node.childNodes.length"
+ style="margin-left: 4px"
+ type="danger"
+ link
+ @click="remove(node, data)"
+ >
鍒犻櫎
- </el-button> -->
+ </el-button>
</div>
</div>
</template>
@@ -42,26 +75,47 @@
</div>
</div>
<div class="right">
- <div style="margin-bottom: 10px">
+ <div style="margin-bottom: 10px" v-if="isShowButton">
<el-button type="primary" @click="openModelDia('add')">
- 鏂板鍖哄煙
+ 鏂板瀛愬尯鍩�
</el-button>
- <ImportExcel @uploadSuccess="getModelList" />
- <el-button type="danger" @click="handleDelete" style="margin-left: 10px" plain>
+ <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>
+ <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>
+ <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="areaType">
- <el-select v-model="form.areaType" placeholder="璇烽�夋嫨鍖哄煙绫诲瀷" clearable @keydown.enter.prevent>
- <el-option v-for="item in areaTypeList" :key="item" :label="item" :value="item" />
- </el-select>
+ <el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
+ <el-input
+ v-model="form.areaName"
+ placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+ clearable
+ @keydown.enter.prevent
+ />
</el-form-item>
</el-col>
</el-row>
@@ -69,38 +123,45 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">纭</el-button>
- <!-- <el-button type="primary" @click="submitModelForm">纭</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="form" label-width="140px" label-position="top" :rules="modelRules" ref="modelFormRef">
- <el-row>
- <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-row>
- <el-col :span="24">
- <el-form-item label="鍖哄煙绫诲瀷锛�" prop="areaType">
- <el-select v-model="form.areaType" placeholder="璇烽�夋嫨鍖哄煙绫诲瀷" clearable @keydown.enter.prevent>
- <el-option v-for="item in areaTypeList" :key="item" :label="item" :value="item" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="鐖跺尯鍩燂細" prop="fuId">
- <el-select v-model="form.fuId" placeholder="璇烽�夋嫨鐖跺尯鍩�" clearable @keydown.enter.prevent>
- <el-option v-for="item in list" :key="item.id" :label="item.label" :value="item.id" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
+ <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">
@@ -113,10 +174,14 @@
</template>
<script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
import { ElMessageBox } from "element-plus";
-import { areaListPage, areaDelete, areaAdd, areaUpdate } from "@/api/energyManagement/index.js";
-// import ImportExcel from "../../../ImportExcel/index.vue";
+import {
+ areaAdd,
+ areaDelete,
+ areaListPage,
+ areaListTree,
+} from "@/api/energyManagement/index.js";
const { proxy } = getCurrentInstance();
const tree = ref(null);
@@ -132,37 +197,24 @@
const treeLoad = ref(false);
const list = ref([]);
const expandedKeys = ref([]);
-const areaTypeList = ref([
- "灞呮皯鐢ㄧ數鍖哄煙",
- "鍟嗕笟鐢ㄧ數鍖哄煙",
- "宸ヤ笟鐢ㄧ數鍖哄煙",
- "鍐滀笟鐢ㄧ數鍖哄煙",
- "鍏叡浜嬩笟鐢ㄧ數鍖哄煙",
- "浜ら�氱敤鐢靛尯鍩�",
- "鐗规畩鐢ㄧ數鍖哄煙"
-])
+const {area_type} = proxy.useDict("area_type")
const tableColumn = ref([
{
- label: "鍖哄煙缂栧彿",
- prop: "id"
- },
- {
label: "鍖哄煙鍚嶇О",
- prop: "areaName"
+ prop: "areaName",
},
{
label: "鍖哄煙绫诲瀷",
- prop: "areaType"
- },
- {
- label: "鐖跺尯鍩�",
- prop: "fuId",
+ prop: "areaType",
+ dataType: "tag",
+ formatData: (row) => {
+ return area_type.value.find(item => item.value == row)?.label;
+ }
},
{
dataType: "action",
label: "鎿嶄綔",
align: "center",
- fixed: 'right',
operation: [
{
name: "缂栬緫",
@@ -180,49 +232,36 @@
const selectedRows = ref([]);
const page = reactive({
current: 1,
- size: 30,
+ size: 10,
total: 0,
});
const data = reactive({
form: {
- id: "",
areaName: "",
- areaType: "",
+ },
+ rules: {
+ areaName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ },
+ modelForm: {
+ areaName: "",
fuId: "",
- sort: ""
},
modelRules: {
- model: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
- unit: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ areaName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+ fuId: [{ required: true, message: "璇疯緭鍏�", trigger: "change" }],
},
});
-const { form, rules, modelRules } = toRefs(data);
-// const originalRecords = ref([]);
-// const parentItems = ref([]);
+const { form, rules, modelForm, modelRules } = toRefs(data);
+
// 鏌ヨ浜у搧鏍�
-const getProductTeeList = () => {
+const getProductTreeList = () => {
treeLoad.value = true;
- areaListPage({
- current: page.current,
- size: page.size,
- })
+ areaListTree()
.then((res) => {
- const originalRecords = res.data.records;
- console.log(originalRecords);
- // 绛涢�塮uId涓虹┖鐨勯」浣滀负鐖惰妭鐐�
- list.value = originalRecords.filter(item => !item.fuId);
- // 涓烘瘡涓埗鑺傜偣娣诲姞children骞跺尮閰嶅瓙鑺傜偣
- list.value.forEach(parent => {
- parent.children = originalRecords.filter(child => child.fuId === parent.id);
+ list.value = res;
+ list.value.forEach((a) => {
+ expandedKeys.value.push(a.label);
});
- // // 鏇存柊鍒楄〃鏁版嵁涓烘爲褰㈢粨鏋�
- // list.value = parentItems.value;
-
- console.log('鏍戝舰缁撴瀯鏁版嵁:', list.value);
-
- // list.value.forEach((a) => {
- // expandedKeys.value.push(a.label);
- // });
treeLoad.value = false;
})
.catch((err) => {
@@ -236,28 +275,23 @@
// 鎵撳紑浜у搧寮规
const openProDia = (type, data) => {
operationType.value = type;
- modelOperationType.value = type;
-
productDia.value = true;
- form.value.areaType = "";
+ form.value.areaName = "";
if (type === "edit") {
- form.value.id = data.id;
form.value.areaName = data.areaName;
- form.value.areaType = data.areaType;
- form.value.fuId = data.fuId;
- form.value.sort = data.sort;
}
};
// 鎵撳紑瑙勬牸鍨嬪彿寮规
-const openModelDia = (type, data) => {
+const openModelDia = (type, data,fatherId) => {
modelOperationType.value = type;
modelDia.value = true;
- form.value.areaName = "";
- form.value.areaType = "";
- form.value.fuId = "";
- form.value.sort = "";
+ modelForm.value.fuId = "";
+ modelForm.value.areaType = "";
+ modelForm.value.areaName = "";
+ modelForm.value.id = "";
+ modelForm.value.fuId = fatherId;
if (type === "edit") {
- form.value = { ...data };
+ modelForm.value = { ...data };
}
};
// 鎻愪氦浜у搧鍚嶇О淇敼
@@ -265,24 +299,20 @@
proxy.$refs.formRef.validate((valid) => {
if (valid) {
if (operationType.value === "add") {
- // form.value.fuId = currentId.value;
- // form.value.id = "";
- areaAdd(form.value).then((res) => {
- proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
- closeProDia();
- getProductTeeList();
- getModelList();
-
- });
- }else {
+ 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;
- areaUpdate(form.value).then((res) => {
- proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
- closeProDia();
- getModelList();
- getProductTeeList();
- });
+ form.value.parentId = "";
}
+ areaAdd(form.value).then((res) => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeProDia();
+ getProductTreeList();
+ });
}
});
};
@@ -306,8 +336,7 @@
areaDelete(ids)
.then((res) => {
proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- getProductTeeList();
- getModelList();
+ getProductTreeList();
})
.finally(() => {
tableLoading.value = false;
@@ -320,32 +349,24 @@
// 閫夋嫨浜у搧
const handleNodeClick = (val, node, el) => {
// 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
- // isShowButton.value = !(val.children && val.children.length > 0);
+ isShowButton.value = !(val.children && val.children.length > 0);
// 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
currentId.value = val.id;
currentParentId.value = val.parentId;
- getModelList();
+ getModelList(true);
};
-// 鎻愪氦鍖哄煙
+// 鎻愪氦瑙勬牸鍨嬪彿淇敼
const submitModelForm = () => {
proxy.$refs.modelFormRef.validate((valid) => {
if (valid) {
- if (modelOperationType.value === "add") {
- form.value.fuId = currentId.value;
- areaAdd(form.value).then((res) => {
- proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
- });
- }
- else {
- // form.value.id = currentId.value;
- areaUpdate(form.value).then((res) => {
- proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
- });
- }
- closeModelDia();
- getModelList();
- getProductTeeList();
+ modelForm.value.fuId = currentId.value;
+ areaAdd(modelForm.value).then((res) => {
+ proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+ closeModelDia();
+ getModelList();
+ getProductTreeList();
+ });
}
});
};
@@ -359,19 +380,29 @@
selectedRows.value = selection;
};
-// 鏌ヨ鍖哄煙
-const getModelList = () => {
+// 鏌ヨ瑙勬牸鍨嬪彿
+const pagination = (obj) => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getModelList();
+};
+const getModelList = (val = false) => {
tableLoading.value = true;
- areaListPage({
- fuId: currentId.value,
+ let obj = {
+ id: currentId.value,
+ fuId:currentId.value,
current: page.current,
- size: page.size,
- }).then((res) => {
+ size: page.size
+ }
+ if(val){
+ delete obj.id;
+ }else{
+ delete obj.fuId
+ }
+ areaListPage(obj).then((res) => {
console.log("res", res);
- const originalRecords = res.data.records;
- // 绛涢�塮uId涓虹┖鐨勯」浣滀负鐖惰妭鐐�
- tableData.value = originalRecords.filter(item => item.fuId === currentId.value);
- page.total = res.total;
+ tableData.value = res.data.records;
+ page.total = res.data.total;
tableLoading.value = false;
});
};
@@ -394,8 +425,8 @@
areaDelete(ids)
.then((res) => {
proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
- getModelList();
- getProductTeeList();
+ getModelList();
+ getProductTreeList();
})
.finally(() => {
tableLoading.value = false;
@@ -441,30 +472,24 @@
// 娌″尮閰嶅埌杩斿洖false
return false;
};
-onMounted(() => {
- getProductTeeList();
-});
-
+getProductTreeList();
</script>
<style scoped>
.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;
@@ -473,18 +498,14 @@
font-size: 14px;
padding-right: 8px;
}
-
.tree-node-content {
display: flex;
- align-items: center;
- /* 鍨傜洿灞呬腑 */
+ align-items: center; /* 鍨傜洿灞呬腑 */
height: 100%;
}
-
.orange-icon {
color: orange;
font-size: 18px;
- margin-right: 8px;
- /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
+ margin-right: 8px; /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3