From 20cfb19d192127e304a081ceb60ca9052f813bf7 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 15 一月 2025 13:32:43 +0800
Subject: [PATCH] U 修改完成
---
src/views/system/region/index.vue | 253 +++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 247 insertions(+), 6 deletions(-)
diff --git a/src/views/system/region/index.vue b/src/views/system/region/index.vue
index 577fd85..637c8ef 100644
--- a/src/views/system/region/index.vue
+++ b/src/views/system/region/index.vue
@@ -1,15 +1,256 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup name="RegionManage">
+ import { ref, reactive, onMounted } from "vue";
+ import { getAreaTreeApi } from "@/api/area";
+ import { formatAreaTree } from "@/utils/tree";
+ import { Search, Plus } from "@element-plus/icons-vue";
+ import { delArea } from "@/api/area";
+ import addEdit from "./addEdit.vue";
+ import useElement from "@/hooks/useElement.js";
+ const tableData = ref([]);
+ const tableRef = ref();
+ const { $loading, $message, $confirm } = useElement();
-export default defineComponent({
- name: 'RegionManage'
-});
+ onMounted(() => {
+ getAreaTree();
+ });
+
+ const dialogTitle = ref('娣诲姞鍖哄煙');
+ const addEditVisible = ref(false);
+ const areaInfo = reactive({});
+ const isEdit = ref(false);
+
+ function onOk () {
+ addEditVisible.value = false;
+ getAreaTree();
+ }
+
+ function onCanel () {
+ addEditVisible.value = false;
+ }
+
+ // 閫掑綊鍑芥暟锛岀敤浜庡睍寮�鎴栨姌鍙犳墍鏈夎鍙婂叾瀛愯
+ const toggleRowsExpansion = (rows, expand, ref) => {
+ rows.forEach((row) => {
+ ref.toggleRowExpansion(row, expand);
+ if (row.children && row.children.length) {
+ // 濡傛灉褰撳墠琛屾湁瀛愯锛屽垯閫掑綊璋冪敤
+ toggleRowsExpansion(row.children, expand, ref);
+ }
+ });
+ };
+
+ const expandAll = (expand) => {
+ toggleRowsExpansion(tableData.value, expand, tableRef.value);
+ };
+
+ async function getAreaTree() {
+ try {
+ const res = await getAreaTreeApi();
+ let _data = [];
+ if (res.code === 1 && res.data) {
+ _data = res.data2;
+ }
+ const treeList = [];
+ let ids = _data.map((v) => v.id);
+ for (let i = 0; i < _data.length; i++) {
+ formatAreaTree(_data[i], ids, treeList);
+ }
+ // console.log(_data, 'data');
+ console.log(treeList, "treeList");
+ tableData.value = treeList;
+ } catch (e) {
+ console.log(e);
+ }
+ }
+
+
+ // 娣诲姞
+ function add(scope) {
+ dialogTitle.value = '娣诲姞鍖哄煙';
+ areaInfo.value = scope.row.data;
+ isEdit.value = false;
+ addEditVisible.value = true;
+
+ // addArea().then((res) => {
+ // let { code, data } = res.data;
+ // if (code && data) {
+ // console.log(data);
+ // }
+ // })
+ // .catch((err) => {
+ // console.log(err);
+ // });
+
+ }
+
+ function edit(scope) {
+ dialogTitle.value = '缂栬緫鍖哄煙';
+ areaInfo.value = scope.row.data;
+ isEdit.value = true;
+ addEditVisible.value = true;
+ }
+
+ function del(scope) {
+ $confirm('鍒犻櫎璇ュ尯鍩�', () =>{
+ let loading = $loading();
+ delArea(scope.row.id).then((res) => {
+ let { code, data, msg } = res;
+ if (code && data) {
+ $message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ });
+ getAreaTree();
+ } else {
+ $message.error(msg);
+ }
+ loading.close();
+ });
+ });
+ }
</script>
<template>
- <div>鍖哄煙绠＄悊</div>
+ <div class="page-wrapper">
+ <div class="page-content">
+ <hdw-card is-full>
+ <div class="page-content-wrapper">
+ <div class="page-content-tools">
+ <!-- <el-button type="primary" size="small" :icon="Plus" @click="add"
+ >娣诲姞</el-button
+ >
+ <el-button
+ type="primary"
+ size="small"
+ :icon="Plus"
+ @click="test"
+ >淇敼</el-button
+ >
+ <el-button type="danger" size="small" icon="del" @click="test"
+ >鍒犻櫎</el-button
+ > -->
+ <el-button
+ type="primary"
+ size="small"
+ :icon="Plus"
+ @click="expandAll(true)"
+ >鍏ㄩ儴灞曞紑</el-button
+ >
+ <el-button
+ type="primary"
+ size="small"
+ :icon="Search"
+ @click="expandAll(false)"
+ >鍏ㄩ儴鎶樺彔</el-button
+ >
+ </div>
+ <div class="page-content-table">
+ <div class="pos-rel">
+ <div class="pos-abs">
+ <el-table
+ stripe
+ ref="tableRef"
+ :data="tableData"
+ :tree-props="{ children: 'children', checkStrictly: true }"
+ row-key="id"
+ default-expand-all
+ >
+ <!-- <el-table-column type="selection" width="55" /> -->
+ <el-table-column prop="label" label="鍖哄煙鍚嶇О" />
+ <el-table-column prop="charger" label="鍖哄煙璐熻矗浜�" />
+ <el-table-column prop="areaDescript" label="鍖哄煙鎻忚堪" />
+ <el-table-column align="center" fixed="right" label="鎿嶄綔" width="240">
+ <template #default="scope">
+ <el-button type="primary" size="small" :disabled="scope.row.data.areaLevel >= 4" @click="add(scope)">娣诲姞</el-button>
+ <el-button type="primary" size="small" @click="edit(scope)">缂栬緫</el-button>
+ <el-button type="danger" size="small" @click="del(scope)">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </hdw-card>
+ </div>
+ <div class="page-footer"></div>
+ <!-- 寮圭獥 -->
+ <el-dialog :title="dialogTitle" v-model="addEditVisible" top="0" :close-on-click-modal="false" class="dialog-center"
+ width="700px" center>
+ <add-edit v-if="addEditVisible" @success="onOk" :info="areaInfo" :is-edit="isEdit" @cancel="onCanel"></add-edit>
+ </el-dialog>
+ </div>
</template>
<style scoped lang="scss">
+ .page-wrapper {
+ display: flex;
+ flex-direction: row;
+ padding: 8px;
+ height: 100%;
+ .page-content {
+ flex: 1;
+ }
+ }
+ .page-content-wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ .page-content-tools {
+ padding-bottom: 8px;
+ }
+ .page-content-table {
+ border-top: 1px solid var(--border-light-color);
+ box-sizing: border-box;
+ flex: 1;
+ margin-left: -8px;
+ margin-right: -8px;
+ }
+ .page-content-page {
+ padding: 8px 8px 0 8px;
+ text-align: center;
+ .el-page-container {
+ display: inline-block;
+ padding: 0 16px;
+ }
+ .page-tool {
+ display: inline-block;
+ }
+ }
+ }
+
+ .hdw-card-container {
+ width: 240px;
+ padding-right: 8px;
+ height: 100%;
+ }
+ .pos-rel {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ .pos-abs {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .tools-filter {
+ display: inline-block;
+ font-size: 14px;
+ .tools-filter-item {
+ display: inline-block;
+ margin-right: 8px;
+ .filter-label {
+ display: inline-block;
+ }
+ .filter-content {
+ display: inline-block;
+ }
+ }
+ }
</style>
--
Gitblit v1.9.1