行政区划
This commit is contained in:
parent
14c63a176f
commit
0391204510
287
src/views/data/city/edit.vue
Normal file
287
src/views/data/city/edit.vue
Normal file
@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<basicModal
|
||||
@register="modalRegister"
|
||||
ref="modalRef"
|
||||
class="basicModal basicFormModal"
|
||||
@on-ok="handleSubmit"
|
||||
@on-close="handleClose"
|
||||
>
|
||||
<template #default>
|
||||
<n-form ref="formRef" :model="formData" label-width="85px" label-placement="left">
|
||||
<div class="flex">
|
||||
<n-form-item
|
||||
label="上级城市"
|
||||
path="pid"
|
||||
class="flex-1"
|
||||
:rule="{ type: 'number', required: true, message: '请选择上级城市', trigger: 'change' }"
|
||||
>
|
||||
<n-tree-select
|
||||
v-model:value="formData.pid"
|
||||
:options="cityOptions"
|
||||
:on-load="loadTree"
|
||||
@update:value="handleNodeClick"
|
||||
label-field="name"
|
||||
key-field="id"
|
||||
children-field="children"
|
||||
:disabled="parentData?.areaCode || cityId ? true : false"
|
||||
placeholder="上级城市"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="城市级别" path="level" class="flex-1">
|
||||
<n-select
|
||||
v-model:value="formData.level"
|
||||
clearable
|
||||
placeholder="请选择城市级别"
|
||||
:options="optionData.cityTypeList"
|
||||
label-field="name"
|
||||
value-field="id"
|
||||
/>
|
||||
</n-form-item>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<n-form-item
|
||||
label="城市名称"
|
||||
path="name"
|
||||
class="flex-1"
|
||||
:rule="{ required: true, message: '请输入城市名称', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.name" placeholder="请输入城市名称" clearable />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="城市简称"
|
||||
path="shortName"
|
||||
class="flex-1"
|
||||
:rule="{ required: true, message: '城市简称称', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.shortName" placeholder="请输入城市简称称" clearable />
|
||||
</n-form-item>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<n-form-item
|
||||
label="城市区号"
|
||||
path="cityCode"
|
||||
class="flex-1"
|
||||
:rule="{ required: true, message: '城市区号', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.cityCode" placeholder="请输入城市区号" clearable />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="行政编码"
|
||||
path="areaCode"
|
||||
class="flex-1"
|
||||
:rule="{ required: true, message: '行政编码', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.areaCode" placeholder="请输入行政编码" clearable />
|
||||
</n-form-item>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<n-form-item
|
||||
label="城市经度"
|
||||
path="lng"
|
||||
class="flex-1"
|
||||
:rule="{ required: true, message: '城市经度', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.lng" placeholder="请输入城市经度" clearable />
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
label="城市纬度"
|
||||
path="lat"
|
||||
class="flex-1"
|
||||
:rule="{ required: true, message: '城市纬度', trigger: 'blur' }"
|
||||
>
|
||||
<n-input v-model:value="formData.lat" placeholder="请输入城市纬度" clearable />
|
||||
</n-form-item>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<n-form-item label="邮政编码" path="zipCode" class="flex-1">
|
||||
<n-input v-model:value="formData.zipCode" placeholder="请输入邮政编码" clearable />
|
||||
</n-form-item>
|
||||
</div>
|
||||
</n-form>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { cityAdd, cityUpdate, getCityDetail } from '@/api/data/city';
|
||||
import { onMounted, reactive, ref, shallowRef, nextTick } from 'vue';
|
||||
import { getCityByList } from '@/api/system/user';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formRef = ref();
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
cityId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
parentData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
itemData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义选项数据
|
||||
*/
|
||||
const optionData = reactive({
|
||||
cityTypeList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '省份',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '城市',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '县区',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '街道',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '居委会',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义表单参数
|
||||
*/
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
pid: 0,
|
||||
level: '',
|
||||
name: '',
|
||||
cityCode: '',
|
||||
areaCode: '',
|
||||
parentCode: '',
|
||||
zipCode: '',
|
||||
shortName: '',
|
||||
lng: '',
|
||||
lat: '',
|
||||
});
|
||||
const [modalRegister, { openModal, setSubLoading }] = useModal({
|
||||
title: props.cityId ? '编辑' : '添加',
|
||||
subBtuText: '确定',
|
||||
width: 700,
|
||||
});
|
||||
const message = useMessage();
|
||||
const parentCode = ref({});
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
formData.pid = 0;
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载树结构
|
||||
*/
|
||||
const cityOptions = ref([{ id: 0, name: '根目录', areaCode: 0, isLeaf: false }]);
|
||||
const loadTree = async (treeNode) => {
|
||||
console.log(treeNode);
|
||||
return new Promise<void>(async (resolve) => {
|
||||
const data = await getCityByList(treeNode.areaCode);
|
||||
data.map((item) => {
|
||||
item.isLeaf = item.level == 3 ? true : false;
|
||||
});
|
||||
treeNode.children = data;
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行节点点击事件
|
||||
*/
|
||||
const handleNodeClick = (data, node, extra) => {
|
||||
parentCode.value = node;
|
||||
formData.parentCode = node.areaCode;
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行提交表单
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
if (formData.pid == 0) {
|
||||
formData.parentCode = '0';
|
||||
}
|
||||
props.cityId ? await cityUpdate(formData) : await cityAdd(formData);
|
||||
message.success('操作成功');
|
||||
setSubLoading(false);
|
||||
emit('update:visible', false);
|
||||
emit('success', parentCode.value);
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
* @param data 参数
|
||||
*/
|
||||
const setFormData = (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
parentCode.value = { areaCode: formData.parentCode };
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取详情
|
||||
*/
|
||||
const getDetail = async () => {
|
||||
const data = await getCityDetail(props.cityId);
|
||||
setFormData(data);
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.parentData && Object.keys(props.parentData).length !== 0) {
|
||||
cityOptions.value[0].children = [];
|
||||
cityOptions.value[0].children.push(props.parentData);
|
||||
}
|
||||
if (props.cityId) {
|
||||
getDetail();
|
||||
formData.pid = props.itemData.pid;
|
||||
} else if (props.itemData) {
|
||||
formData.pid = props.itemData.id;
|
||||
formData.parentCode = props.itemData.areaCode;
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
308
src/views/data/city/index.vue
Normal file
308
src/views/data/city/index.vue
Normal file
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="menu-index">
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<div>
|
||||
<n-button type="primary" @click="handleAdd()" v-perm="['sys:city:add']">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
新增
|
||||
</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<n-spin :show="!showTable">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
@load="getChild"
|
||||
:paginate-single-page="false"
|
||||
:data="lists"
|
||||
v-if="showTable"
|
||||
:row-key="(row) => row.areaCode"
|
||||
>
|
||||
<template #description> 加载中 </template>
|
||||
</n-data-table>
|
||||
</n-spin>
|
||||
</n-card>
|
||||
<editDialog
|
||||
ref="createModalRef"
|
||||
v-if="editVisible"
|
||||
:cityId="cityId"
|
||||
:parentData="parentData"
|
||||
:itemData="itemData"
|
||||
v-model:visible="editVisible"
|
||||
@success="refreshDataList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="menu">
|
||||
import { defineAsyncComponent, nextTick, onMounted, ref, reactive, h } from 'vue';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, FormOutlined } from '@vicons/antd';
|
||||
import { cityDelete } from '@/api/data/city';
|
||||
import { getCityByList } from '@/api/system/user';
|
||||
import editDialog from './edit.vue';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import { renderIcon } from '@/utils';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const columns = [
|
||||
{
|
||||
title: '城市名称',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: '城市拼音',
|
||||
key: 'pinyin',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '城市级别',
|
||||
key: 'level',
|
||||
width: 100,
|
||||
customRender({ record }) {
|
||||
let levelText = '';
|
||||
switch (record.level) {
|
||||
case 0:
|
||||
levelText = '省份';
|
||||
break;
|
||||
case 1:
|
||||
levelText = '城市';
|
||||
break;
|
||||
case 2:
|
||||
levelText = '县区';
|
||||
break;
|
||||
case 3:
|
||||
levelText = '街道';
|
||||
break;
|
||||
case 4:
|
||||
levelText = '居委会';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return h('span', levelText || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '城市区号',
|
||||
key: 'cityCode',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '行政编码',
|
||||
key: 'areaCode',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '城市邮编',
|
||||
key: 'zipCode',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '新增',
|
||||
type: 'info',
|
||||
icon: renderIcon(PlusOutlined),
|
||||
auth: ['sys:city:add'],
|
||||
onclick: handleAdd.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
type: 'warning',
|
||||
icon: renderIcon(FormOutlined),
|
||||
auth: ['sys:city:update'],
|
||||
onclick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'error',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
auth: ['sys:city:delete'],
|
||||
onclick: handleDelete.bind(null, record),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const fwbHeight = document.body.clientHeight - 350;
|
||||
const loading = ref(false);
|
||||
const createModalRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const showTable = ref(true);
|
||||
const cityId = ref(0);
|
||||
const parentData = ref();
|
||||
const itemData = ref({});
|
||||
const lists = ref([]);
|
||||
const expandKeys = ref([]);
|
||||
|
||||
/**
|
||||
* 获取行政区划列表
|
||||
* @param code 参数
|
||||
*/
|
||||
const loadDataTable = async (code: any) => {
|
||||
let res = await getCityByList(0);
|
||||
let data = res.length > 0 ? res : [];
|
||||
data.map((item) => {
|
||||
item.isLeaf = false;
|
||||
});
|
||||
lists.value = data;
|
||||
};
|
||||
/**
|
||||
* 刷新数据列表
|
||||
*/
|
||||
const refreshDataList = async (code) => {
|
||||
showTable.value = false;
|
||||
let res = await getCityByList(0);
|
||||
let data = res.length > 0 ? res : [];
|
||||
data.map((item) => {
|
||||
item.isLeaf = false;
|
||||
});
|
||||
lists.value = data;
|
||||
|
||||
showTable.value = true;
|
||||
};
|
||||
const actionColumn = reactive({
|
||||
width: 220,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '新增',
|
||||
type: 'info',
|
||||
icon: renderIcon(PlusOutlined),
|
||||
auth: ['sys:city:add'],
|
||||
onclick: handleAdd.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
type: 'warning',
|
||||
icon: renderIcon(FormOutlined),
|
||||
auth: ['sys:city:update'],
|
||||
onclick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'error',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
auth: ['sys:city:delete'],
|
||||
onclick: handleDelete.bind(null, record),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行添加
|
||||
* @param data 参数
|
||||
*/
|
||||
const handleAdd = async (data: any) => {
|
||||
cityId.value = 0;
|
||||
if (data) {
|
||||
itemData.value = data;
|
||||
let datas = findParentNode(lists.value, data.pid);
|
||||
if (datas) {
|
||||
parentData.value = datas;
|
||||
} else {
|
||||
parentData.value = data;
|
||||
}
|
||||
} else {
|
||||
parentData.value = {};
|
||||
}
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行编辑
|
||||
* @param data 参数
|
||||
*/
|
||||
const handleEdit = async (data: any) => {
|
||||
cityId.value = data.id;
|
||||
parentData.value = findParentNode(lists.value, data.pid);
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
* @param row 参数
|
||||
*/
|
||||
const handleDelete = async (row: any) => {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await cityDelete(row.id);
|
||||
message.success('删除成功');
|
||||
refreshDataList();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const getChild = async (row: Record<string, unknown>) => {
|
||||
expandKeys.value.push(row.areaCode);
|
||||
return new Promise<void>(async (resolve) => {
|
||||
const data = await getCityByList(row.areaCode);
|
||||
data.map((item) => {
|
||||
item.isLeaf = item.level == 3 ? true : false;
|
||||
});
|
||||
row.children = data;
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据子节点找到父节点
|
||||
* @param nodes 节点
|
||||
* @param targetId 目标节点ID
|
||||
*/
|
||||
const findParentNode = (nodes, targetId) => {
|
||||
for (let node of nodes) {
|
||||
if (node.id == targetId) {
|
||||
return node;
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
const result = findParentNode(node.children, targetId);
|
||||
if (result) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
loadDataTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user