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

😎调整机构管理页面vxe-table

Browse Source
This commit is contained in:
zuohuaijun 2024-07-01 00:26:53 +08:00
parent 0646a1a7f3
commit 22807ac386
3 changed files with 199 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
Web/src/views/system/org/component/orgTree.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;width:100%;">
<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.lazy="filterText" clearable placeholder="机构名称" />
</div>
<div class="tree-h-right">
<el-dropdown @command="handleCommand">
@ -23,30 +23,33 @@
</template>
</el-dropdown>
</div>
<el-checkbox v-if="!props.checkStrictly && state.isShowCheckbox" v-model="state.strictly" label="联动" style="margin-left: 8px" border />
</div>
</div>
</template>
<div style="margin-bottom: 45px" v-loading="state.loading">
<el-tree
ref="treeRef"
class="filter-tree"
:data="state.orgData"
node-key="id"
:props="{ children: 'children', label: 'name' }"
:filter-node-method="filterNode"
@node-click="nodeClick"
:show-checkbox="state.isShowCheckbox"
:default-checked-keys="state.ownOrgData"
highlight-current
check-strictly
>
<template #default="{ node }">
<el-icon v-if="node.level == 1" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-School /></el-icon>
<el-icon v-else-if="node.level == 2" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-PriceTag /></el-icon>
<el-icon v-else size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-CollectionTag /></el-icon>
{{ node.label }}
</template>
</el-tree>
<el-scrollbar>
<el-tree
ref="treeRef"
class="filter-tree"
:data="state.orgData"
node-key="id"
:props="{ children: 'children', label: 'name' }"
:filter-node-method="filterNode"
@node-click="nodeClick"
:show-checkbox="state.isShowCheckbox"
:default-checked-keys="state.ownOrgData"
highlight-current
:check-strictly="!state.strictly"
>
<template #default="{ node }">
<el-icon v-if="node.level == 1" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-School /></el-icon>
<el-icon v-else-if="node.level == 2" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-PriceTag /></el-icon>
<el-icon v-else size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-CollectionTag /></el-icon>
{{ node.label }}
</template>
</el-tree>
</el-scrollbar>
</div>
</el-card>
</template>
@ -59,6 +62,11 @@ import { Search, MoreFilled } from '@element-plus/icons-vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi } from '/@/api-services/api';
import { SysOrg } from '/@/api-services/models';
import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
const props = defineProps({
checkStrictly: { type: Boolean, defaul: true },
});
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
@ -67,21 +75,26 @@ const state = reactive({
orgData: [] as Array<SysOrg>,
isShowCheckbox: false,
ownOrgData: [],
strictly: false,
});
onMounted(() => {
initTreeData();
// 页面初始化
onMounted(async () => {
await fetchTreeData();
});
// 查询监听
watch(filterText, (val) => {
treeRef.value!.filter(val);
});
const initTreeData = async () => {
state.loading = true;
// 获取树数据
const fetchTreeData = async (showLoading: boolean = true) => {
if (showLoading) state.loading = true;
var res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
state.orgData = res.data.result ?? [];
state.loading = false;
if (showLoading) state.loading = false;
return res.data.result ?? [];
};
// 设置默认选择
@ -96,11 +109,13 @@ const getCheckedKeys = () => {
return treeRef.value!.getCheckedKeys();
};
// 节点过滤
const filterNode = (value: string, data: any) => {
if (!value) return true;
return data.name.includes(value);
};
// 节点操作
const handleCommand = async (command: string | number | object) => {
if ('expandAll' == command) {
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
@ -111,8 +126,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: '' });
}
};
@ -123,11 +139,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, setCheckedKeys, getCheckedKeys });
defineExpose({ fetchTreeData, setCheckedKeys, getCheckedKeys, setCurrentKey });
</script>
<style lang="scss" scoped>
.box-card {
flex: 1;
> :deep(.el-card__header) {
padding: 5px;
}
}
.tree-h-flex {
display: flex;
}

222
Web/src/views/system/org/index.vue
View File

@ -1,145 +1,193 @@
<template>
<div class="sys-org-container">
<el-row :gutter="5" style="width: 100%; flex: 1">
<el-col :span="4" :xs="24">
<OrgTree ref="orgTreeRef" @node-click="nodeClick" />
<div class="sys-org-container" v-loading="options.loading">
<el-row :gutter="5" style="width: 100%; height: 100%">
<el-col :span="4" :xs="24" style="display: flex; height: 100%">
<OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
</el-col>
<el-col :span="20" :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 label="机构类型">
<el-select v-model="state.queryParams.type" filterable clearable>
<el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.value" :value="item.code" />
</el-select>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </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="openAddOrg" v-auth="'sysOrg:add'"> 新增 </el-button>
</el-form-item>
<el-col :span="20" :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="6" :xl="6">
<el-form-item label="机构名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="机构名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="机构编码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="机构编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="机构类型" prop="type">
<el-select v-model="state.queryParams.type" filterable clearable class="w100" @clear="state.queryParams.type = undefined">
<el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.value" :value="item.code" />
</el-select>
</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" :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.orgData" 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="机构名称" min-width="160" header-align="center" show-overflow-tooltip />
<el-table-column prop="code" label="机构编码" align="center" show-overflow-tooltip />
<el-table-column prop="level" label="级别" width="70" align="center" show-overflow-tooltip />
<el-table-column prop="type" label="机构类型" align="center" :formatter="dictFormatter" show-overflow-tooltip />
<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip />
<el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
<el-tag type="danger" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
<template #default="scope">
<ModifyRecord :data="scope.row" />
</template>
</el-table-column>
<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="openEditOrg(scope.row)" v-auth="'sysOrg:update'"> 编辑 </el-button>
<el-button icon="ele-Delete" size="small" text type="danger" @click="delOrg(scope.row)" v-auth="'sysOrg:delete'"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
<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="{}">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysOrg: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_status="{ row }">
<el-tag v-if="row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="danger">禁用</el-tag>
</template>
<template #row_record="{ row }">
<ModifyRecord :data="row" />
</template>
<template #row_buttons="{ row }">
<el-tooltip content="编辑" placement="top">
<el-button icon="ele-Edit" size="small" text type="primary" @click="handleEdit(row)" v-auth="'sysOrg:update'"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)" v-auth="'sysOrg:delete'"></el-button>
</el-tooltip>
</template>
</vxe-grid>
</el-card>
</el-col>
</el-row>
<EditOrg ref="editOrgRef" :title="state.editOrgTitle" :orgData="state.orgTreeData" @handleQuery="handleQuery" />
<EditOrg ref="editOrgRef" :title="state.title" :orgData="state.treeData" @reload="handleQuery" />
</div>
</template>
<script lang="ts" setup name="sysOrg">
import { onMounted, reactive, ref } from 'vue';
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditOrg from '/@/views/system/org/component/editOrg.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi, SysDictDataApi } from '/@/api-services/api';
import { SysDictDataApi, SysOrgApi } from '/@/api-services';
import { SysOrg } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editOrgRef = ref<InstanceType<typeof EditOrg>>();
const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
const state = reactive({
loading: false,
orgData: [] as Array<SysOrg>, // 机构列表数据
orgTreeData: [] as Array<SysOrg>, // 机构树所有数据
treeData: [] as Array<SysOrg>, // 机构树所有数据
queryParams: {
id: 0,
name: undefined,
code: undefined,
type: undefined,
},
editOrgTitle: '',
title: '',
orgTypeList: [] as any,
});
onMounted(async () => {
handleQuery();
// 表格参数配置
const options = useVxeTable<SysOrg>(
{
id: 'sysOrg',
name: '机构',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '机构名称', minWidth: 200, showOverflow: 'tooltip', treeNode: true },
{ field: 'code', title: '机构编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'level', title: '级别', minWidth: 70, showOverflow: 'tooltip' },
{ field: 'type', title: '机构类型', minWidth: 80, formatter: ({ cellValue }: any) => state.orgTypeList.find((u: any) => u.code == cellValue)?.value, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysOrg:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
},
{ stripe: false, checkboxConfig: { range: false } }
);
// 页面初始化
onMounted(async () => {
await handleQuery();
let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('org_type');
state.orgTypeList = resDicData.data.result;
// 展开表格所有数据，数据量大时请勿开启
nextTick(async () => {
if (state.treeData?.length < 100) await xGrid.value?.setAllTreeExpand(true);
});
});
// 查询操作
const handleQuery = async (updateTree: boolean = false) => {
state.loading = true;
var res = await getAPI(SysOrgApi).apiSysOrgListGet(state.queryParams.id, state.queryParams.name, state.queryParams.code, state.queryParams.type);
state.orgData = res.data.result ?? [];
state.loading = false;
options.loading = true;
var res = await fetchData(null);
xGrid.value?.loadData(res.data.result ?? []);
options.loading = false;
// 是否更新左侧机构列表树
if (updateTree == true) {
orgTreeRef.value?.initTreeData();
// 更新编辑页面机构列表树
var res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
state.orgTreeData = res.data.result ?? [];
const data = await orgTreeRef.value?.fetchTreeData();
state.treeData = data ?? [];
}
// 若无选择节点并且查询条件为空时，更新编辑页面机构列表树
if (state.queryParams.id == 0 && state.queryParams.name == undefined && state.queryParams.code == undefined && state.queryParams.type == undefined && updateTree == false)
state.orgTreeData = state.orgData;
state.treeData = res.data.result ?? [];
};
// 获取表数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, tableParams);
return getAPI(SysOrgApi).apiSysOrgListGet(params.id, params.name, params.code, params.type);
};
// 重置操作
const resetQuery = () => {
const resetQuery = async () => {
state.queryParams.id = 0;
state.queryParams.name = undefined;
state.queryParams.code = undefined;
state.queryParams.type = undefined;
handleQuery();
await handleQuery();
};
// 打开新增页面
const openAddOrg = () => {
state.editOrgTitle = '添加机构';
const handleAdd = () => {
state.title = '添加机构';
editOrgRef.value?.openDialog({ status: 1, orderNo: 100 });
};
// 打开编辑页面
const openEditOrg = (row: any) => {
state.editOrgTitle = '编辑机构';
const handleEdit = (row: any) => {
state.title = '编辑机构';
editOrgRef.value?.openDialog(row);
};
// 删除
const delOrg = (row: any) => {
const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除机构：【${row.name}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -148,22 +196,28 @@ const delOrg = (row: any) => {
.then(async () => {
await getAPI(SysOrgApi).apiSysOrgDeletePost({ id: row.id });
ElMessage.success('删除成功');
handleQuery(true);
await handleQuery(true);
})
.catch(() => {});
};
// 树组件点击
const nodeClick = async (node: any) => {
const handleNodeChange = async (node: any) => {
state.queryParams.id = node.id;
state.queryParams.name = undefined;
state.queryParams.code = undefined;
state.queryParams.type = undefined;
handleQuery();
orgTreeRef?.value?.setCurrentKey();
await handleQuery();
};
// 字典转换
const dictFormatter = (row: any, column: any, cellValue: any) => {
return state.orgTypeList.find((u: any) => u.code == cellValue)?.value;
// 全部展开
const handleExpand = () => {
xGrid.value?.setAllTreeExpand(true);
};
// 全部折叠
const handleFold = () => {
xGrid.value?.clearTreeExpand();
};
</script>

9
Web/src/views/system/pos/index.vue
View File

@ -99,6 +99,7 @@ const state = reactive({
visible: false,
title: '',
});
//表格参数配置
const options = useVxeTable<PosOutput>({
id: 'sysPos',
@ -106,10 +107,10 @@ const options = useVxeTable<PosOutput>({
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '职位名称', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'code', title: '职位编码', minWidth: 200, showOverflow: 'tooltip', sortable: true },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip', sortable: true },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', sortable: true, slots: { default: 'row_status' } },
{ field: 'name', title: '职位名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'code', title: '职位编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],