This commit is contained in:
2026-07-27 17:19:36 +08:00
parent e50d1b8fda
commit 1c7532e0de
132 changed files with 7066 additions and 1241 deletions

View File

@@ -1,6 +1,6 @@
<template>
<el-row>
<el-col :span="9">
<el-row class="region-page">
<el-col class="region-page__tree-panel" :span="6">
<div class="box">
<el-scrollbar>
<basic-container>
@@ -9,7 +9,7 @@
</el-scrollbar>
</div>
</el-col>
<el-col :span="15">
<el-col class="region-page__form-panel" :span="18">
<basic-container>
<el-button-group>
<el-button
@@ -55,17 +55,34 @@
@click="handleSync"
>同步
</el-button>
<!-- <el-button-->
<!-- v-if="permission.region_debug"-->
<!-- type="primary"-->
<!-- icon="el-icon-video-play"-->
<!-- @click="handleDebug"-->
<!-- >调试-->
<!-- </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 #parentName="{}">
<el-select
class="region-parent-select"
v-model="regionForm.parentCode"
filterable
:disabled="isCountryRegion"
placeholder="请选择父区划"
@change="handleParentChange"
>
<el-option
v-for="item in parentOptions"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</template>
<template #code="{}">
<el-input
v-if="isCountryRegion"
@@ -83,7 +100,7 @@
</template>
</avue-form>
<el-dialog title="行政区划数据导入" append-to-body v-model="excelBox" width="555px">
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
<avue-form :option="excelOption" v-model="excelForm">
<template #excelTemplate>
<el-button type="primary" @click="handleTemplate">
点击下载<i class="el-icon-download el-icon--right"></i>
@@ -105,6 +122,7 @@ import { exportBlob } from '@/api/common';
import { mapGetters } from 'vuex';
import { validatenull } from '@/utils/validate';
import { downloadXls } from '@/utils/util';
import { openImportDialog } from '@/utils/import-excel';
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
@@ -118,6 +136,7 @@ export default {
treeCode: '',
treeParentCode: '',
treeData: [],
parentOptions: [],
syncLoading: false,
treeOption: {
nodeKey: 'id',
@@ -137,7 +156,7 @@ export default {
},
addBtn: false,
menu: false,
size: 'small',
size: 'default',
props: {
labelText: '标题',
label: 'title',
@@ -147,13 +166,13 @@ export default {
},
regionForm: {},
regionOption: {
labelWidth: 100,
labelWidth: 'auto',
column: [
{
label: '父区划编号',
prop: 'parentCode',
span: 24,
disabled: true,
display: false,
rules: [
{
required: true,
@@ -166,7 +185,7 @@ export default {
label: '父区划名称',
prop: 'parentName',
span: 24,
disabled: true,
formslot: true,
},
{
label: '区划编号',
@@ -295,7 +314,7 @@ export default {
debugBox: false,
debugForm: {},
debugOption: {
labelWidth: 50,
labelWidth: 'auto',
submitBtn: false,
emptyBtn: false,
column: [
@@ -345,24 +364,25 @@ export default {
if (this.isCountryRegion) {
return;
}
const parentCode = this.isProvinceRegion ? '' : this.regionForm.parentCode;
this.regionForm.code = parentCode + this.regionForm.subCode;
this.syncRegionCode();
},
'excelForm.isCovered'() {
if (this.excelForm.isCovered !== '') {
const column = this.findColumn(this.excelOption.column, 'excelFile');
column.action = `/blade-system/region/import-region?isCovered=${this.excelForm.isCovered}`;
}
this.syncImportAction();
},
},
computed: {
...mapGetters(['permission']),
isCountryRegion() {
return Number(this.regionForm.regionLevel) === 0 || this.regionForm.parentCode === this.topCode;
return (
Number(this.regionForm.regionLevel) === 0 || this.regionForm.parentCode === this.topCode
);
},
isProvinceRegion() {
return Number(this.regionForm.regionLevel) === 1;
},
isEditRegion() {
return !validatenull(this.regionForm.originalCode);
},
permissionList() {
return {
addBtn: this.validData(this.permission.region_add, false),
@@ -392,28 +412,30 @@ export default {
});
},
nodeClick(data) {
const column = this.findColumn(this.regionOption.column, 'parentCode');
column.disabled = true;
this.setRegionColumnDisplay('code', true);
this.treeCode = data.id;
this.treeParentCode = data.parentId;
getDetail(this.treeCode).then(res => {
this.regionForm = res.data.data;
this.regionForm.originalCode = this.regionForm.code;
this.regionForm.subCode =
this.regionForm.parentCode === this.topCode
? this.regionForm.code
: this.regionForm.code.replace(this.regionForm.parentCode, '');
this.loadParentOptions(this.regionForm.parentCode, this.regionForm.parentName);
});
},
addCountry() {
const column = this.findColumn(this.regionOption.column, 'parentCode');
column.disabled = true;
this.setRegionColumnDisplay('code', true);
this.treeCode = '';
this.treeParentCode = this.topCode;
this.parentOptions = this.getRootParentOptions();
this.regionForm = {
parentCode: this.topCode,
parentName: '根节点',
code: '',
subCode: '',
originalCode: '',
name: '',
regionLevel: 0,
sort: 1,
@@ -424,13 +446,84 @@ export default {
this.$message.warning('请先选择一项区划');
return;
}
this.regionForm.parentCode = this.regionForm.code;
this.regionForm.parentName = this.regionForm.name;
const parentCode = this.regionForm.code;
const parentName = this.regionForm.name;
const parentGroupCode = this.regionForm.parentCode || this.topCode;
this.setRegionColumnDisplay('code', true);
this.regionForm.parentCode = parentCode;
this.regionForm.parentName = parentName;
this.regionForm.code = '';
this.regionForm.subCode = '';
this.regionForm.originalCode = '';
this.regionForm.name = '';
this.regionForm.regionLevel =
this.regionForm.regionLevel === 5 ? 5 : this.regionForm.regionLevel + 1;
this.loadParentOptionsByGroup(parentGroupCode, parentCode, parentName);
},
setRegionColumnDisplay(prop, display) {
const column = this.findColumn(this.regionOption.column, prop);
if (column) {
column.display = display;
}
},
handleParentChange(value) {
const parent = this.parentOptions.find(item => item.code === value);
this.regionForm.parentName = parent ? parent.name : '';
this.syncRegionCode();
},
syncRegionCode() {
if (this.isCountryRegion) {
return;
}
const parentCode = this.isProvinceRegion ? '' : this.regionForm.parentCode || '';
this.regionForm.code = parentCode + (this.regionForm.subCode || '');
},
getRootParentOptions() {
return [
{
code: this.topCode,
name: '根节点',
},
];
},
normalizeParentOption(region) {
return {
code: String(region.code || region.id || ''),
name: region.name || region.title || '',
};
},
ensureSelectedParent(options, selectedCode, selectedName) {
if (validatenull(selectedCode) || options.some(item => item.code === selectedCode)) {
return options;
}
return [
...options,
{
code: String(selectedCode),
name: selectedName || selectedCode,
},
];
},
loadParentOptions(selectedCode, selectedName) {
if (validatenull(selectedCode) || selectedCode === this.topCode) {
this.parentOptions = this.getRootParentOptions();
return;
}
getDetail(selectedCode).then(res => {
const parent = res.data.data || {};
const groupCode = parent.parentCode || this.topCode;
this.loadParentOptionsByGroup(groupCode, selectedCode, selectedName);
});
},
loadParentOptionsByGroup(groupCode, selectedCode, selectedName) {
if (validatenull(groupCode)) {
this.parentOptions = this.ensureSelectedParent([], selectedCode, selectedName);
return;
}
getLazyTree(groupCode).then(res => {
const options = res.data.data.map(this.normalizeParentOption).filter(item => item.code);
this.parentOptions = this.ensureSelectedParent(options, selectedCode, selectedName);
});
},
handleSubmit(form, done) {
if (Number(form.regionLevel) === 0) {
@@ -481,18 +574,27 @@ export default {
this.$refs.form.resetForm();
});
},
uploadAfter(res, done, loading, column) {
window.console.log(column);
this.excelBox = false;
this.initTree();
done();
handleImport() {
this.syncImportAction();
openImportDialog(this, '行政区划', () => {
this.initTree();
});
},
syncImportAction() {
const column = this.findColumn(this.excelOption.column, 'excelFile');
if (!column) {
return;
}
const covered = this.excelForm.isCovered;
if (covered === '' || covered === undefined || covered === null) {
column.action = '/blade-system/region/import-region';
} else {
column.action = `/blade-system/region/import-region?isCovered=${covered}`;
}
},
handleDebug() {
this.debugBox = true;
},
handleImport() {
this.excelBox = true;
},
handleSync() {
this.$confirm('确定同步最新行政区划数据?', {
confirmButtonText: '确定',
@@ -553,4 +655,46 @@ export default {
.box .el-scrollbar__wrap {
overflow: scroll;
}
.region-parent-select {
width: 100%;
}
.region-page .region-page__tree-panel {
flex: 0 0 17.5%;
max-width: 17.5%;
}
.region-page .region-page__form-panel {
flex: 0 0 82.5%;
max-width: 82.5%;
}
.region-page__tree-panel .avue-tree__filter {
padding: 0 8px 8px;
}
.region-page__tree-panel .avue-tree__filter .el-input,
.region-page__tree-panel .avue-tree__filter .el-input__wrapper {
width: 100%;
min-height: 32px;
}
.region-page__tree-panel .el-tree.el-tree--highlight-current {
padding: 8px;
box-sizing: border-box;
}
.region-page__form-panel .avue-form__group.avue-form__group--flex {
padding: 12px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.region-page .region-page__tree-panel,
.region-page .region-page__form-panel {
flex: 0 0 100%;
max-width: 100%;
}
}
</style>