From 02409bfbe15f22fc3b5dccadabfd860a660a49d9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 11 Oct 2025 10:37:14 +0800
Subject: [PATCH] feat: 名称修改
---
src/views/base/region.vue | 307 ++++++++++++++++++++++++---------------------------
1 files changed, 144 insertions(+), 163 deletions(-)
diff --git a/src/views/base/region.vue b/src/views/base/region.vue
index 4b8e03c..79c0f49 100644
--- a/src/views/base/region.vue
+++ b/src/views/base/region.vue
@@ -1,112 +1,93 @@
<template>
- <el-row>
- <el-col :span="9">
- <div class="box">
+ <div class="manage-p-all-10 manage-p-t-0 manage-h-0 manage-flex-1 manage-flex">
+ <div
+ class="manage-p-all-20 manage-flex-2 manage-h-100 manage-b-r-5 manage-box-s-b-b manage-overflow-h manage-b-c-w">
+ <div class="box ">
<el-scrollbar>
- <basic-container>
+ <div class="manage-w-100 manage-h-100">
<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
- </basic-container>
+ </div>
</el-scrollbar>
</div>
- </el-col>
- <el-col :span="15">
- <basic-container>
- <el-button-group>
- <el-button
- v-if="permission.region_add"
- type="primary"
- icon="el-icon-plus"
- @click="addChildren"
- >新增下级
- </el-button>
- <el-button
- v-if="permission.region_delete"
- type="primary"
- icon="el-icon-delete"
- @click="handleDelete"
- >删除
- </el-button>
- <el-button
- v-if="permission.region_import"
- type="primary"
- icon="el-icon-upload"
- @click="handleImport"
- >导入
- </el-button>
- <el-button
- v-if="permission.region_export"
- type="primary"
- icon="el-icon-download"
- @click="handleExport"
- >导出
- </el-button>
- <el-button
- v-if="permission.region_debug"
- type="primary"
- icon="el-icon-video-play"
- @click="handleDebug"
- >调试
- </el-button>
- </el-button-group>
- </basic-container>
- <basic-container>
- <avue-form ref="form" :option="regionOption" v-model="regionForm" @submit="handleSubmit">
- <template #code="{}">
- <el-input placeholder="请输入 区划子编号" v-model="regionForm.subCode">
- <template #prepend>{{ regionForm.parentCode }}</template>
- </el-input>
- </template>
- </avue-form>
- <el-dialog title="行政区划数据导入" append-to-body v-model="excelBox" width="555px">
- <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
- <template #excelTemplate>
- <el-button type="primary" @click="handleTemplate">
- 点击下载<i class="el-icon-download el-icon--right"></i>
- </el-button>
+ </div>
+
+ <div
+ class="manage-p-all-10 manage-p-t-0 manage-p-b-0 manage-flex-4 manage-h-100 manage-flex manage-box-s-b-b manage-f-d-c">
+ <div class="manage-p-all-20 manage-flex manage-f-d-c manage-h-100 manage-box-s-b-b manage-b-c-w manage-b-r-5">
+ <div>
+ <el-button-group>
+ <el-button v-if="permission.region_add" type="primary" icon="el-icon-plus" @click="addChildren">新增下级
+ </el-button>
+ <el-button v-if="permission.region_delete" type="primary" icon="el-icon-delete" @click="handleDelete">删除
+ </el-button>
+ <el-button v-if="permission.region_import" type="primary" icon="el-icon-upload" @click="handleImport">导入
+ </el-button>
+ <el-button v-if="permission.region_export" type="primary" icon="el-icon-download" @click="handleExport">导出
+ </el-button>
+ <el-button v-if="permission.region_debug" type="primary" icon="el-icon-video-play" @click="handleDebug">调试
+ </el-button>
+ </el-button-group>
+ </div>
+
+ <div class="manage-m-t-20 manage-h-0 manage-flex-1 ">
+ <avue-form ref="form" :option="regionOption" v-model="regionForm" @submit="handleSubmit">
+ <template #code="{ }">
+ <el-input placeholder="请输入 区划子编号" v-model="regionForm.subCode">
+ <template #prepend>{{ regionForm.parentCode }}</template>
+ </el-input>
</template>
</avue-form>
- </el-dialog>
- <el-dialog title="行政区划数据调试" append-to-body v-model="debugBox" width="350px">
- <avue-form :option="debugOption" v-model="debugForm" />
- </el-dialog>
- </basic-container>
- </el-col>
- </el-row>
+ <el-dialog title="行政区划数据导入" append-to-body v-model="excelBox" width="555px">
+ <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
+ <template #excelTemplate>
+ <el-button type="primary" @click="handleTemplate">
+ 点击下载<i class="el-icon-download el-icon--right"></i>
+ </el-button>
+ </template>
+ </avue-form>
+ </el-dialog>
+ <el-dialog title="行政区划数据调试" append-to-body v-model="debugBox" width="350px">
+ <avue-form :option="debugOption" v-model="debugForm" />
+ </el-dialog>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import { getLazyTree, getDetail, submit, remove } from '@/api/base/region';
-import { exportBlob } from '@/api/common';
-import { mapGetters } from 'vuex';
-import { validatenull } from '@/utils/validate';
-import { downloadXls } from '@/utils/util';
-import { getToken } from '@/utils/auth';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
+import { getLazyTree, getDetail, submit, remove } from '@/api/base/region'
+import { exportBlob } from '@/api/common'
+import { mapGetters } from 'vuex'
+import { validatenull } from '@/utils/validate'
+import { downloadXls } from '@/utils/util'
+import { getToken } from '@/utils/auth'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
export default {
- data() {
+ data () {
return {
topCode: '00',
treeCode: '',
treeParentCode: '',
- loading:null,
+ loading: null,
treeData: [],
treeOption: {
nodeKey: 'id',
lazy: true,
treeLoad: function (node, resolve) {
- const parentCode = node.level === 0 ? '000000000000' : node.data.id;
+ const parentCode = node.level === 0 ? '000000000000' : node.data.id
getLazyTree(parentCode).then(res => {
resolve(
res.data.data.map(item => {
return {
...item,
leaf: !item.hasChildren,
- };
+ }
})
- );
- });
+ )
+ })
},
addBtn: false,
menu: false,
@@ -311,99 +292,99 @@
},
],
},
- };
+ }
},
watch: {
- 'regionForm.subCode'() {
- this.regionForm.code = this.regionForm.parentCode + this.regionForm.subCode;
+ 'regionForm.subCode' () {
+ this.regionForm.code = this.regionForm.parentCode + this.regionForm.subCode
},
- 'excelForm.isCovered'() {
+ 'excelForm.isCovered' () {
if (this.excelForm.isCovered !== '') {
- const column = this.findObject(this.excelOption.column, 'excelFile');
- column.action = `/blade-system/region/import-region?isCovered=${this.excelForm.isCovered}`;
+ const column = this.findObject(this.excelOption.column, 'excelFile')
+ column.action = `/blade-system/region/import-region?isCovered=${this.excelForm.isCovered}`
}
},
},
computed: {
...mapGetters(['permission']),
- permissionList() {
+ permissionList () {
return {
addBtn: this.validData(this.permission.region_add, false),
viewBtn: this.validData(this.permission.region_view, false),
delBtn: this.validData(this.permission.region_delete, false),
editBtn: this.validData(this.permission.region_edit, false),
- };
+ }
},
- ids() {
- let ids = [];
+ ids () {
+ let ids = []
this.selectionList.forEach(ele => {
- ids.push(ele.id);
- });
- return ids.join(',');
+ ids.push(ele.id)
+ })
+ return ids.join(',')
},
},
methods: {
- initTree() {
- this.treeData = [];
+ initTree () {
+ this.treeData = []
getLazyTree(this.topCode).then(res => {
this.treeData = res.data.data.map(item => {
return {
...item,
leaf: !item.hasChildren,
- };
- });
- });
+ }
+ })
+ })
},
- nodeClick(data) {
- const column = this.findObject(this.regionOption.column, 'parentCode');
- column.disabled = true;
- this.treeCode = data.id;
- this.treeParentCode = data.parentId;
+ nodeClick (data) {
+ const column = this.findObject(this.regionOption.column, 'parentCode')
+ column.disabled = true
+ this.treeCode = data.id
+ this.treeParentCode = data.parentId
getDetail(this.treeCode).then(res => {
- this.regionForm = res.data.data;
- this.regionForm.subCode = this.regionForm.code.replace(this.regionForm.parentCode, '');
- });
+ this.regionForm = res.data.data
+ this.regionForm.subCode = this.regionForm.code.replace(this.regionForm.parentCode, '')
+ })
},
- addChildren() {
+ addChildren () {
if (validatenull(this.regionForm.code) || validatenull(this.regionForm.name)) {
- this.$message.warning('请先选择一项区划');
- return;
+ this.$message.warning('请先选择一项区划')
+ return
}
- this.regionForm.parentCode = this.regionForm.code;
- this.regionForm.parentName = this.regionForm.name;
- this.regionForm.code = '';
- this.regionForm.subCode = '';
- this.regionForm.name = '';
+ this.regionForm.parentCode = this.regionForm.code
+ this.regionForm.parentName = this.regionForm.name
+ this.regionForm.code = ''
+ this.regionForm.subCode = ''
+ this.regionForm.name = ''
this.regionForm.regionLevel =
- this.regionForm.regionLevel === 5 ? 5 : this.regionForm.regionLevel + 1;
+ this.regionForm.regionLevel === 5 ? 5 : this.regionForm.regionLevel + 1
},
- handleSubmit(form, done, loading) {
- const parentCode = form.parentCode === this.topCode ? '' : form.parentCode;
+ handleSubmit (form, done, loading) {
+ const parentCode = form.parentCode === this.topCode ? '' : form.parentCode
// form.code = parentCode + form.subCode;
- form.code = form.subCode;
+ form.code = form.subCode
submit(form).then(
() => {
this.$message({
type: 'success',
message: '操作成功!',
- });
- this.initTree();
- this.regionForm.subCode = '';
- this.$refs.form.resetForm();
- done();
- console.log('成功');
-
+ })
+ this.initTree()
+ this.regionForm.subCode = ''
+ this.$refs.form.resetForm()
+ done()
+ console.log('成功')
+
},
error => {
// loading();
- window.console.log(error);
+ window.console.log(error)
}
- );
+ )
},
- handleDelete() {
+ handleDelete () {
if (validatenull(this.regionForm.code)) {
- this.$message.warning('请先选择一项区划');
- return;
+ this.$message.warning('请先选择一项区划')
+ return
}
this.$confirm(`确定将 [${this.regionForm.name}] 数据删除?`, {
confirmButtonText: '确定',
@@ -411,66 +392,66 @@
type: 'warning',
})
.then(() => {
- return remove(this.treeCode);
+ return remove(this.treeCode)
})
.then(() => {
this.$message({
type: 'success',
message: '操作成功!',
- });
- this.initTree();
- this.regionForm.subCode = '';
- this.$refs.form.resetForm();
- });
+ })
+ this.initTree()
+ this.regionForm.subCode = ''
+ this.$refs.form.resetForm()
+ })
},
- uploadAfter(res, done, loading, column) {
- window.console.log(column);
- this.excelBox = false;
- this.initTree();
- done();
+ uploadAfter (res, done, loading, column) {
+ window.console.log(column)
+ this.excelBox = false
+ this.initTree()
+ done()
},
- handleDebug() {
- this.debugBox = true;
+ handleDebug () {
+ this.debugBox = true
},
- handleImport() {
- this.excelBox = true;
+ handleImport () {
+ this.excelBox = true
},
- handleExport() {
+ handleExport () {
this.$confirm('是否导出行政区划数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
- NProgress.start();
+ NProgress.start()
exportBlob(
`/blade-system/region/export-region?${this.website.tokenHeader}=${getToken()}`
).then(res => {
- downloadXls(res.data, `行政区划数据${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
- NProgress.done();
- });
- });
+ downloadXls(res.data, `行政区划数据${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`)
+ NProgress.done()
+ })
+ })
},
- handleTemplate() {
+ handleTemplate () {
exportBlob(
`/blade-system/region/export-template?${this.website.tokenHeader}=${getToken()}`
).then(res => {
- downloadXls(res.data, '行政区划模板.xlsx');
- });
+ downloadXls(res.data, '行政区划模板.xlsx')
+ })
},
},
-};
+}
</script>
-<style>
+<style lang="scss" scoped>
.box {
- height: 800px;
-}
-
-.el-scrollbar {
height: 100%;
}
-.box .el-scrollbar__wrap {
- overflow: scroll;
+::v-deep(.el-scrollbar) {
+ height: 100%;
+
+ .el-scrollbar__wrap {
+ overflow: auto;
+ }
}
</style>
--
Gitblit v1.9.3