gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

😎调整行政区域页面

Browse Source
This commit is contained in:
zuohuaijun 2024-07-01 14:00:16 +08:00
parent 4b3c5d97e1
commit abda065883
3 changed files with 180 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Web/src/views/system/region/component/editRegion.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="sys-region-container"> <div class="sys-region-container">
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px"> <el-dialog v-model="state.isShowDialog" draggable overflow destroy-on-close width="700px">
<template #header> <template #header>
<div style="color: #fff"> <div style="color: #fff">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon> <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
@ -8,7 +8,7 @@
</div> </div>
</template> </template>
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto"> <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
<el-row :gutter="35"> <el-row :gutter="10">
<!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级名称"> <el-form-item label="上级名称">
<el-cascader <el-cascader

55
Web/src/views/system/region/component/regionTree.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:100%; overflow:auto"> <el-card class="box-card" shadow="hover" body-style="height:100%; overflow:auto;padding:5px;">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<div class="tree-h-flex"> <div class="tree-h-flex">
<div class="tree-h-left"> <div class="tree-h-left">
<el-input :prefix-icon="Search" v-model="filterText" placeholder="行政区域名称" /> <el-input :prefix-icon="Search" v-model="filterText" clearable placeholder="行政区域名称" />
</div> </div>
<div class="tree-h-right"> <div class="tree-h-right">
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
@ -27,20 +27,22 @@
</div> </div>
</template> </template>
<div style="margin-bottom: 45px" v-loading="state.loading"> <div style="margin-bottom: 45px" v-loading="state.loading">
<el-tree <el-scrollbar>
ref="treeRef" <el-tree
class="filter-tree" ref="treeRef"
:data="state.regionData" class="filter-tree"
node-key="id" :data="state.regionData"
:props="{ children: 'children', label: 'name' }" node-key="id"
:filter-node-method="filterNode" :props="{ children: 'children', label: 'name' }"
@node-click="nodeClick" :filter-node-method="filterNode"
highlight-current @node-click="nodeClick"
check-strictly highlight-current
accordion check-strictly
lazy accordion
:load="loadNode" lazy
/> :load="loadNode"
/>
</el-scrollbar>
</div> </div>
</el-card> </el-card>
</template> </template>
@ -49,6 +51,7 @@
import { onMounted, reactive, ref, watch } from 'vue'; import { onMounted, reactive, ref, watch } from 'vue';
import type { ElTree } from 'element-plus'; import type { ElTree } from 'element-plus';
import { Search, MoreFilled } from '@element-plus/icons-vue'; import { Search, MoreFilled } from '@element-plus/icons-vue';
import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { SysRegionApi } from '/@/api-services/api'; import { SysRegionApi } from '/@/api-services/api';
@ -62,14 +65,14 @@ const state = reactive({
}); });
onMounted(() => { onMounted(() => {
initTreeData(); fetchTreeData();
}); });
watch(filterText, (val) => { watch(filterText, (val) => {
treeRef.value!.filter(val); treeRef.value!.filter(val);
}); });
const initTreeData = async () => { const fetchTreeData = async () => {
state.loading = true; state.loading = true;
var res = await getAPI(SysRegionApi).apiSysRegionListGet(0); var res = await getAPI(SysRegionApi).apiSysRegionListGet(0);
state.regionData = res.data.result ?? []; state.regionData = res.data.result ?? [];
@ -106,8 +109,9 @@ const handleCommand = async (command: string | number | object) => {
treeRef.value!.store._getAllNodes()[i].expanded = false; treeRef.value!.store._getAllNodes()[i].expanded = false;
} }
} else if ('refresh' == command) { } else if ('refresh' == command) {
initTreeData(); fetchTreeData();
} else if ('rootNode' == command) { } else if ('rootNode' == command) {
treeRef.value?.setCurrentKey();
emits('node-click', { id: 0, name: '' }); emits('node-click', { id: 0, name: '' });
} }
}; };
@ -118,11 +122,22 @@ const nodeClick = (node: any) => {
emits('node-click', { id: node.id, name: node.name }); emits('node-click', { id: node.id, name: node.name });
}; };
// 设置当前选中节点
const setCurrentKey = (key?: TreeKey | undefined, shouldAutoExpandParent?: boolean | undefined) => {
treeRef.value?.setCurrentKey(key, shouldAutoExpandParent);
};
// 导出对象 // 导出对象
defineExpose({ initTreeData, getCheckedKeys }); defineExpose({ fetchTreeData, getCheckedKeys, setCurrentKey });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box-card {
flex: 1;
> :deep(.el-card__header) {
padding: 5px;
}
}
.tree-h-flex { .tree-h-flex {
display: flex; display: flex;
} }

220
Web/src/views/system/region/index.vue
View File

@ -1,68 +1,86 @@
<template> <template>
<div class="sys-region-container"> <div class="sys-region-container" v-loading="options.loading">
<el-row :gutter="8" style="width: 100%; flex: 1"> <el-row :gutter="5" style="width: 100%; height: 100%">
<el-col :span="6" :xs="24"> <el-col :span="6" :xs="24" style="display: flex; height: 100%">
<RegionTree ref="regionTreeRef" @node-click="nodeClick" /> <RegionTree ref="regionTreeRef" @node-click="handleNodeChange" />
</el-col> </el-col>
<el-col :span="18" :xs="24" style="display: flex; flex-direction: column"> <el-col :span="18" :xs="24" style="display: flex; flex-direction: column; height: 100%">
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :inline="true"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
<el-form-item label="行政名称"> <el-row :gutter="10">
<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable /> <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
</el-form-item> <el-form-item label="行政名称" prop="name">
<el-form-item label="行政代码"> <el-input v-model="state.queryParams.name" placeholder="行政名称" clearable @keyup.enter.native="handleQuery(true)" />
<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable /> </el-form-item>
</el-form-item> </el-col>
<el-form-item> <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-button-group> <el-form-item label="行政代码" prop="code">
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRegion:page'"> 查询 </el-button> <el-input v-model="state.queryParams.code" placeholder="行政代码" clearable @keyup.enter.native="handleQuery(true)" />
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button> </el-form-item>
</el-button-group> </el-col>
</el-form-item> </el-row>
<el-form-item>
<el-button type="primary" icon="ele-Plus" @click="openAddRegion" v-auth="'sysRegion:add'"> 新增 </el-button>
<el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:sync'"> 同步统计局 </el-button>
</el-form-item>
</el-form> </el-form>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" v-auth="'sysRegion:page'" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
</el-row>
</el-card> </el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px"> <el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
<el-table :data="state.regionData" style="width: 100%" v-loading="state.loading" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border> <vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{ transform: true, parentField: 'pid' }" @sort-change="sortChange">
<el-table-column prop="name" label="行政名称" align="center" show-overflow-tooltip /> <template #toolbar_buttons>
<el-table-column prop="code" label="行政代码" align="center" show-overflow-tooltip /> <el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysRegion:add'"> 新增 </el-button>
<el-table-column prop="cityCode" label="区号" align="center" show-overflow-tooltip /> <el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:add'"> 同步统计局 </el-button>
<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip /> <el-button-group style="padding-left: 12px">
<el-table-column prop="remark" label="备注" header-align="center" show-overflow-tooltip /> <el-button type="primary" icon="ele-Expand" @click="handleExpand"> 全部展开 </el-button>
<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip> <el-button type="primary" icon="ele-Fold" @click="handleFold"> 全部折叠 </el-button>
<template #default="scope"> </el-button-group>
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditRegion(scope.row)" v-auth="'sysRegion:update'"> 编辑 </el-button> </template>
<el-button icon="ele-Delete" size="small" text type="danger" @click="delRegion(scope.row)" v-auth="'sysRegion:delete'"> 删除 </el-button> <template #toolbar_tools> </template>
</template> <template #empty>
</el-table-column> <el-empty :image-size="200" />
</el-table> </template>
<el-pagination <template #row_buttons="{ row }">
v-model:currentPage="state.tableParams.page" <el-tooltip content="编辑" placement="top">
v-model:page-size="state.tableParams.pageSize" <el-button icon="ele-Edit" text type="primary" v-auth="'sysRegion:update'" @click="handleEdit(row)"> </el-button>
:total="state.tableParams.total" </el-tooltip>
:page-sizes="[10, 20, 50, 100]" <el-tooltip content="删除" placement="top">
small <el-button icon="ele-Delete" text type="danger" v-auth="'sysRegion:delete'" @click="handleDelete(row)"> </el-button>
background </el-tooltip>
@size-change="handleSizeChange" </template>
@current-change="handleCurrentChange" <template #pager>
layout="total, sizes, prev, pager, next, jumper" <vxe-pager
/> :loading="options.loading"
v-model:current-page="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
@page-change="pageChange"
/>
</template>
</vxe-grid>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<EditRegion ref="editRegionRef" :title="state.editRegionTitle" @handleQuery="handleQuery" /> <EditRegion ref="editRegionRef" :title="state.title" @handleQuery="handleQuery" />
</div> </div>
</template> </template>
<script lang="ts" setup name="sysRegion"> <script lang="ts" setup name="sysRegion">
import { onMounted, reactive, ref } from 'vue'; import { nextTick, onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'; import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance, VxePagerEvents, VxePagerDefines } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import RegionTree from '/@/views/system/region/component/regionTree.vue'; import RegionTree from '/@/views/system/region/component/regionTree.vue';
import EditRegion from '/@/views/system/region/component/editRegion.vue'; import EditRegion from '/@/views/system/region/component/editRegion.vue';
@ -70,11 +88,10 @@ import { getAPI } from '/@/utils/axios-utils';
import { SysRegionApi } from '/@/api-services/api'; import { SysRegionApi } from '/@/api-services/api';
import { SysRegion } from '/@/api-services/models'; import { SysRegion } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editRegionRef = ref<InstanceType<typeof EditRegion>>(); const editRegionRef = ref<InstanceType<typeof EditRegion>>();
const regionTreeRef = ref<InstanceType<typeof RegionTree>>(); const regionTreeRef = ref<InstanceType<typeof RegionTree>>();
const state = reactive({ const state = reactive({
loading: false,
regionData: [] as Array<SysRegion>, // 列表数据
queryParams: { queryParams: {
id: -1, id: -1,
pid: undefined, pid: undefined,
@ -83,24 +100,61 @@ const state = reactive({
}, },
tableParams: { tableParams: {
page: 1, page: 1,
pageSize: 20, pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
total: 0 as any, total: 0 as any,
}, },
editRegionTitle: '', visible: false,
title: '',
}); });
onMounted(() => { // 表格参数配置
handleQuery(); const options = useVxeTable<SysRegion>({
id: 'sysRegion',
name: '区域信息',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 100, fixed: 'left' },
{ field: 'name', title: '行政名称', minWidth: 280, showOverflow: 'tooltip', treeNode: true },
{ field: 'code', title: '行政代码', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'cityCode', title: '区号', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'createTime', title: '修改时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remark', title: '备注', minWidth: 300, showOverflow: 'tooltip' },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysRegion:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
});
// 页面初始化
onMounted(async () => {
await handleQuery();
// 展开表格所有数据，数据量大时请勿开启
nextTick(() => {
setTimeout(() => {
xGrid.value?.setAllTreeExpand(true);
}, 1000);
});
}); });
// 查询操作 // 查询操作
const handleQuery = async () => { const handleQuery = async (reset = false) => {
state.loading = true; options.loading = true;
let params = Object.assign(state.queryParams, state.tableParams); if (reset) state.tableParams.page = 1;
var res = await getAPI(SysRegionApi).apiSysRegionPagePost(params); var res = await fetchData(null);
state.regionData = res.data.result?.items ?? []; xGrid.value?.loadData(res.data.result?.items ?? []);
state.tableParams.total = res.data.result?.total; state.tableParams.total = res.data.result?.total;
state.loading = false; options.loading = false;
};
// 获取数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, state.tableParams, tableParams);
return getAPI(SysRegionApi).apiSysRegionPagePost(params);
}; };
// 重置操作 // 重置操作
@ -109,23 +163,37 @@ const resetQuery = () => {
state.queryParams.pid = undefined; state.queryParams.pid = undefined;
state.queryParams.name = undefined; state.queryParams.name = undefined;
state.queryParams.code = undefined; state.queryParams.code = undefined;
handleQuery(true);
};
// 改变页码序号或页面容量
const pageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }: VxePagerDefines.PageChangeEventParams) => {
state.tableParams.page = currentPage;
state.tableParams.pageSize = pageSize;
handleQuery();
};
// 列排序
const sortChange = (options: any) => {
state.tableParams.field = options.field;
state.tableParams.order = options.order;
handleQuery(); handleQuery();
}; };
// 打开新增页面 // 打开新增页面
const openAddRegion = () => { const handleAdd = () => {
state.editRegionTitle = '添加行政区域'; state.title = '添加行政区域';
editRegionRef.value?.openDialog({ orderNo: 100 }); editRegionRef.value?.openDialog({ orderNo: 100 });
}; };
// 打开编辑页面 // 打开编辑页面
const openEditRegion = (row: any) => { const handleEdit = (row: any) => {
state.editRegionTitle = '编辑行政区域'; state.title = '编辑行政区域';
editRegionRef.value?.openDialog(row); editRegionRef.value?.openDialog(row);
}; };
// 删除 // 删除
const delRegion = (row: any) => { const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除行政区域：【${row.name}】?`, '提示', { ElMessageBox.confirm(`确定删除行政区域：【${row.name}】?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -135,14 +203,14 @@ const delRegion = (row: any) => {
await getAPI(SysRegionApi).apiSysRegionDeletePost({ id: row.id }); await getAPI(SysRegionApi).apiSysRegionDeletePost({ id: row.id });
handleQuery(); handleQuery();
// 编辑删除后更新机构数据 // 编辑删除后更新机构数据
regionTreeRef.value?.initTreeData(); regionTreeRef.value?.fetchTreeData();
ElMessage.success('删除成功'); ElMessage.success('删除成功');
}) })
.catch(() => {}); .catch(() => {});
}; };
// 树组件点击 // 树组件点击
const nodeClick = async (node: any) => { const handleNodeChange = async (node: any) => {
state.queryParams.pid = node.id; state.queryParams.pid = node.id;
state.queryParams.name = undefined; state.queryParams.name = undefined;
state.queryParams.code = undefined; state.queryParams.code = undefined;
@ -168,15 +236,13 @@ const handlSync = async () => {
.catch(() => {}); .catch(() => {});
}; };
// 改变页面容量 // 全部展开
const handleSizeChange = (val: number) => { const handleExpand = () => {
state.tableParams.pageSize = val; xGrid.value?.setAllTreeExpand(true);
handleQuery();
}; };
// 改变页码序号 // 全部折叠
const handleCurrentChange = (val: number) => { const handleFold = () => {
state.tableParams.page = val; xGrid.value?.clearTreeExpand();
handleQuery();
}; };
</script> </script>