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>
<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>
<div style="color: #fff">
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
@ -8,7 +8,7 @@
</div>
</template>
<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-form-item label="上级名称">
<el-cascader

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

@ -1,10 +1,10 @@
<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>
<div class="card-header">
<div class="tree-h-flex">
<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 class="tree-h-right">
<el-dropdown @command="handleCommand">
@ -27,20 +27,22 @@
</div>
</template>
<div style="margin-bottom: 45px" v-loading="state.loading">
<el-tree
ref="treeRef"
class="filter-tree"
:data="state.regionData"
node-key="id"
:props="{ children: 'children', label: 'name' }"
:filter-node-method="filterNode"
@node-click="nodeClick"
highlight-current
check-strictly
accordion
lazy
:load="loadNode"
/>
<el-scrollbar>
<el-tree
ref="treeRef"
class="filter-tree"
:data="state.regionData"
node-key="id"
:props="{ children: 'children', label: 'name' }"
:filter-node-method="filterNode"
@node-click="nodeClick"
highlight-current
check-strictly
accordion
lazy
:load="loadNode"
/>
</el-scrollbar>
</div>
</el-card>
</template>
@ -49,6 +51,7 @@
import { onMounted, reactive, ref, watch } from 'vue';
import type { ElTree } from 'element-plus';
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 { SysRegionApi } from '/@/api-services/api';
@ -62,14 +65,14 @@ const state = reactive({
});
onMounted(() => {
initTreeData();
fetchTreeData();
});
watch(filterText, (val) => {
treeRef.value!.filter(val);
});
const initTreeData = async () => {
const fetchTreeData = async () => {
state.loading = true;
var res = await getAPI(SysRegionApi).apiSysRegionListGet(0);
state.regionData = res.data.result ?? [];
@ -106,8 +109,9 @@ const handleCommand = async (command: string | number | object) => {
treeRef.value!.store._getAllNodes()[i].expanded = false;
}
} else if ('refresh' == command) {
initTreeData();
fetchTreeData();
} else if ('rootNode' == command) {
treeRef.value?.setCurrentKey();
emits('node-click', { id: 0, name: '' });
}
};
@ -118,11 +122,22 @@ const nodeClick = (node: any) => {
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>
<style lang="scss" scoped>
.box-card {
flex: 1;
> :deep(.el-card__header) {
padding: 5px;
}
}
.tree-h-flex {
display: flex;
}

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

@ -1,68 +1,86 @@
<template>
<div class="sys-region-container">
<el-row :gutter="8" style="width: 100%; flex: 1">
<el-col :span="6" :xs="24">
<RegionTree ref="regionTreeRef" @node-click="nodeClick" />
<div class="sys-region-container" v-loading="options.loading">
<el-row :gutter="5" style="width: 100%; height: 100%">
<el-col :span="6" :xs="24" style="display: flex; height: 100%">
<RegionTree ref="regionTreeRef" @node-click="handleNodeChange" />
</el-col>
<el-col :span="18" :xs="24" style="display: flex; flex-direction: column">
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
<el-form :model="state.queryParams" ref="queryForm" :inline="true">
<el-form-item label="行政名称">
<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable />
</el-form-item>
<el-form-item label="行政代码">
<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable />
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysRegion:page'"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
</el-button-group>
</el-form-item>
<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-col :span="18" :xs="24" style="display: flex; flex-direction: column; height: 100%">
<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" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-form-item label="行政名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="行政名称" clearable @keyup.enter.native="handleQuery(true)" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-form-item label="行政代码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="行政代码" clearable @keyup.enter.native="handleQuery(true)" />
</el-form-item>
</el-col>
</el-row>
</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 class="full-table" shadow="hover" style="margin-top: 5px">
<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>
<el-table-column prop="name" label="行政名称" align="center" show-overflow-tooltip />
<el-table-column prop="code" label="行政代码" align="center" show-overflow-tooltip />
<el-table-column prop="cityCode" label="区号" align="center" show-overflow-tooltip />
<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip />
<el-table-column prop="remark" label="备注" header-align="center" show-overflow-tooltip />
<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
<template #default="scope">
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditRegion(scope.row)" v-auth="'sysRegion:update'"> 编辑 </el-button>
<el-button icon="ele-Delete" size="small" text type="danger" @click="delRegion(scope.row)" v-auth="'sysRegion:delete'"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:currentPage="state.tableParams.page"
v-model:page-size="state.tableParams.pageSize"
:total="state.tableParams.total"
:page-sizes="[10, 20, 50, 100]"
small
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
/>
<el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{ transform: true, parentField: 'pid' }" @sort-change="sortChange">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysRegion:add'"> 新增 </el-button>
<el-button type="danger" icon="ele-Lightning" @click="handlSync" v-auth="'sysRegion:add'"> 同步统计局 </el-button>
<el-button-group style="padding-left: 12px">
<el-button type="primary" icon="ele-Expand" @click="handleExpand"> 全部展开 </el-button>
<el-button type="primary" icon="ele-Fold" @click="handleFold"> 全部折叠 </el-button>
</el-button-group>
</template>
<template #toolbar_tools> </template>
<template #empty>
<el-empty :image-size="200" />
</template>
<template #row_buttons="{ row }">
<el-tooltip content="编辑" placement="top">
<el-button icon="ele-Edit" text type="primary" v-auth="'sysRegion:update'" @click="handleEdit(row)"> </el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button icon="ele-Delete" text type="danger" v-auth="'sysRegion:delete'" @click="handleDelete(row)"> </el-button>
</el-tooltip>
</template>
<template #pager>
<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-col>
</el-row>
<EditRegion ref="editRegionRef" :title="state.editRegionTitle" @handleQuery="handleQuery" />
<EditRegion ref="editRegionRef" :title="state.title" @handleQuery="handleQuery" />
</div>
</template>
<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 { 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 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 { SysRegion } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editRegionRef = ref<InstanceType<typeof EditRegion>>();
const regionTreeRef = ref<InstanceType<typeof RegionTree>>();
const state = reactive({
loading: false,
regionData: [] as Array<SysRegion>, // 列表数据
queryParams: {
id: -1,
pid: undefined,
@ -83,24 +100,61 @@ const state = reactive({
},
tableParams: {
page: 1,
pageSize: 20,
pageSize: 50,
field: 'id', // 默认的排序字段
order: 'aes', // 排序方向
descStr: 'desc', // 降序排序的关键字符
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 () => {
state.loading = true;
let params = Object.assign(state.queryParams, state.tableParams);
var res = await getAPI(SysRegionApi).apiSysRegionPagePost(params);
state.regionData = res.data.result?.items ?? [];
const handleQuery = async (reset = false) => {
options.loading = true;
if (reset) state.tableParams.page = 1;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result?.items ?? []);
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.name = 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();
};
// 打开新增页面
const openAddRegion = () => {
state.editRegionTitle = '添加行政区域';
const handleAdd = () => {
state.title = '添加行政区域';
editRegionRef.value?.openDialog({ orderNo: 100 });
};
// 打开编辑页面
const openEditRegion = (row: any) => {
state.editRegionTitle = '编辑行政区域';
const handleEdit = (row: any) => {
state.title = '编辑行政区域';
editRegionRef.value?.openDialog(row);
};
// 删除
const delRegion = (row: any) => {
const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除行政区域：【${row.name}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -135,14 +203,14 @@ const delRegion = (row: any) => {
await getAPI(SysRegionApi).apiSysRegionDeletePost({ id: row.id });
handleQuery();
// 编辑删除后更新机构数据
regionTreeRef.value?.initTreeData();
regionTreeRef.value?.fetchTreeData();
ElMessage.success('删除成功');
})
.catch(() => {});
};
// 树组件点击
const nodeClick = async (node: any) => {
const handleNodeChange = async (node: any) => {
state.queryParams.pid = node.id;
state.queryParams.name = undefined;
state.queryParams.code = undefined;
@ -168,15 +236,13 @@ const handlSync = async () => {
.catch(() => {});
};
// 改变页面容量
const handleSizeChange = (val: number) => {
state.tableParams.pageSize = val;
handleQuery();
// 全部展开
const handleExpand = () => {
xGrid.value?.setAllTreeExpand(true);
};
// 改变页码序号
const handleCurrentChange = (val: number) => {
state.tableParams.page = val;
handleQuery();
// 全部折叠
const handleFold = () => {
xGrid.value?.clearTreeExpand();
};
</script>