kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🚀 重新调整架构

master
wangxiang 3 years ago
parent
a4dcf3897d
commit
1df0aa3dce
4 changed files with 123 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/api/platform/system/controller/region.ts
  2. 131
      src/views/system/dept/index.vue
  3. 57
      src/views/system/region/RegionModal.vue
  4. 19
      src/views/system/region/index.vue

5
src/api/platform/system/controller/region.ts
Unescape View File

@ -4,6 +4,7 @@
* author entfrm开发团队-王翔 * author entfrm开发团队-王翔
*/ */
import { RegionParams, Region, RegionResult } from '/@/api/platform/system/entity/region'; import { RegionParams, Region, RegionResult } from '/@/api/platform/system/entity/region';
import { ResultVo } from '/@/api/common/base/entity';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
enum Api { enum Api {
@ -21,13 +22,11 @@ export const listRegion = (params?: Partial<RegionParams>) => {
return defHttp.get({ url: url, params }); return defHttp.get({ url: url, params });
}; };
export const listRegionAll = () => defHttp.get({ url: Api.list });
export const addRegion =(params:Partial<Region>) => defHttp.post({ url: Api.add,data:params }); export const addRegion =(params:Partial<Region>) => defHttp.post({ url: Api.add,data:params });
export const editRegion =(params:Partial<Region>) => defHttp.put({ url: Api.edit,data:params }); export const editRegion =(params:Partial<Region>) => defHttp.put({ url: Api.edit,data:params });
export const getRegion = (id: string) => defHttp.get<Region>({ url: `${Api.get}/${id}` }); export const getRegion = (id: string) => defHttp.get<ResultVo<Region>>({ url: `${Api.get}/${id}` });
export const delRegion = (id: string) => defHttp.delete({ url: `${Api.del}/${id}` }); export const delRegion = (id: string) => defHttp.delete({ url: `${Api.del}/${id}` });

131
src/views/system/dept/index.vue
Unescape View File

@ -39,74 +39,73 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/** /**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 setup 写法 * 采用vben-动态表格表单封装组件编写,采用 setup 写法
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved. * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔 * author entfrm开发团队-王翔
*/ */
import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import DeptModal from './DeptModal.vue'; import DeptModal from './DeptModal.vue';
import { columns, searchFormSchema } from './dept.data'; import { columns, searchFormSchema } from './dept.data';
import { delDept, listDept } from '/@/api/platform/system/controller/dept'; import { delDept, listDept } from '/@/api/platform/system/controller/dept';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { listToTree } from '/@/utils/helper/treeHelper'; import { listToTree } from '/@/utils/helper/treeHelper';
/** 通用变量统一声明区域 */ /** 通用变量统一声明区域 */
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, expandAll, collapseAll, getDataSource }] = useTable({ const [registerTable, { reload, expandAll, collapseAll, getDataSource }] = useTable({
title: '部门列表', title: '部门列表',
api: listDept, api: listDept,
rowKey: 'deptId', rowKey: 'deptId',
columns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 120,
schemas: searchFormSchema, schemas: searchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']] fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
}, },
isTreeTable: true, isTreeTable: true,
pagination: false, pagination: false,
striped: false, striped: false,
useSearchForm: true, useSearchForm: true,
showTableSetting: true, showTableSetting: true,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
canResize: false, canResize: false,
actionColumn: { actionColumn: {
width: 250, width: 250,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, slots: { customRender: 'action' },
fixed: false fixed: false
}, },
afterFetch: result => listToTree(result, { id: 'deptId' }), afterFetch: result => listToTree(result, { id: 'deptId' }),
});
}); /** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd(record?: Recordable) {
openModal(true, { _tag: 'add', record });
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */ /** 编辑按钮操作,行内编辑 */
function handleAdd(record?: Recordable) { function handleEdit(record: Recordable) {
openModal(true, { _tag: 'add', record }); openModal(true, { _tag: 'edit', record });
} }
/** 编辑按钮操作,行内编辑 */ /** 删除按钮操作,行内删除 */
function handleEdit(record: Recordable) { async function handleDel(record: Recordable) {
openModal(true, { _tag: 'edit', record }); await delDept(record.deptId);
} createMessage.success('删除成功!');
handleRefreshTable();
/** 删除按钮操作,行内删除 */ }
async function handleDel(record: Recordable) { function rowClick(record, index, event) {
await delDept(record.deptId); console.log(record, index, event);
createMessage.success('删除成功!'); }
handleRefreshTable(); /** 处理表格刷新 */
} function handleRefreshTable() {
function rowClick(record, index, event) { reload();
console.log(record, index, event); }
}
/** 处理表格刷新 */
function handleRefreshTable() {
reload();
}
</script> </script>

57
src/views/system/region/RegionModal.vue
Unescape View File

@ -1,6 +1,7 @@
<template> <template>
<BasicModal v-bind="$attrs" <BasicModal v-bind="$attrs"
width="720px" width="720px"
:maskClosable="false"
@ok="handleSubmit" @ok="handleSubmit"
@register="registerModal" @register="registerModal"
> >
@ -14,15 +15,18 @@
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved. * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔 * author entfrm开发团队-王翔
*/ */
import { ref, unref } from 'vue'; import { reactive } from 'vue';
import { BasicForm, useForm } from '/@/components/Form'; import { BasicForm, useForm } from '/@/components/Form';
import { regionFormSchema } from './region.data'; import { regionFormSchema } from './region.data';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { listRegionAll, addRegion, editRegion, getRegion } from '/@/api/platform/system/controller/region'; import { listRegion, addRegion, editRegion, getRegion } from '/@/api/platform/system/controller/region';
import { listToTree } from '/@/utils/helper/treeHelper';
/** 通用变量统一声明区域 */ /** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>(''); const state = reactive({
tag: '',
parentId: '',
topRegion: [{ id: '0', name: '顶级区域', children: [] }]
});
/** https://v3.cn.vuejs.org/api/options-data.html#emits */ /** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({ const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
@ -31,36 +35,58 @@
showActionButtonGroup: false, showActionButtonGroup: false,
baseColProps: { span: 24 } baseColProps: { span: 24 }
}); });
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => { const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
setModalProps({ loading: true } as Partial<ModalProps>); changeLoading(true);
// 处理清除脏数据 // 处理清除脏数据
await resetFields(); await resetFields();
await clearValidate(); await clearValidate();
// 处理设置数据 // 处理设置数据
tag.value = data._tag; state.tag = data._tag;
const topRegion = { id: '0', name: '顶级区域', children: [] };
topRegion.children = listToTree(await listRegionAll());
await updateSchema({ await updateSchema({
field: 'parentId', field: 'parentId',
componentProps: { componentProps: {
treeData: [topRegion] treeData: state.topRegion,
onChange: (selectedRowKeys: string) => {
selectedRowKeys && (state.parentId = selectedRowKeys);
},
loadData: (treeNode: any) => {
const { id } = treeNode.dataRef;
return listRegion({ parentId: id }).then(res => {
treeNode.dataRef.children = (res || [])?.map(item => {
if(item.hasOwnProperty('children')) {
item.isLeaf = false;
} else item.isLeaf = true;
return item;
});
});
}
} }
}); });
const regionId = data.record?.id; const regionId = data.record?.id;
const props: Partial<ModalProps> = { confirmLoading: false, loading: false }; const props: Partial<ModalProps> = { confirmLoading: false };
// 采用tag标签区分操作 // 采用tag标签区分操作
switch (unref(tag)) { switch (state.tag) {
case 'add': case 'add':
props.title = '新增区域'; props.title = '新增区域';
regionId && await setFieldsValue({ parentId: regionId }); if(regionId) {
state.parentId = regionId;
await setFieldsValue({ parentId: data.record?.name });
}
break; break;
case 'edit': case 'edit':
props.title = '编辑区域'; props.title = '编辑区域';
await setFieldsValue(await getRegion(regionId)); const result = await getRegion(regionId);
const region = result.result;
state.parentId = region.parentId;
if (result?.extend) {
region.parentId = result?.extend.name;
}
await setFieldsValue(region);
break; break;
} }
// 尾部:设置处理后的最终配置数据 // 尾部:设置处理后的最终配置数据
setModalProps(props); setModalProps(props);
changeLoading(false);
}); });
/** 处理弹出框提交 */ /** 处理弹出框提交 */
@ -70,8 +96,9 @@
const formData = await validate(); const formData = await validate();
// 处理提交之前逻辑 // 处理提交之前逻辑
setModalProps({ confirmLoading: true }); setModalProps({ confirmLoading: true });
formData.parentId = state.parentId;
// 采用tag标签区分操作 // 采用tag标签区分操作
switch (unref(tag)) { switch (state.tag) {
case 'add': case 'add':
await addRegion(formData); await addRegion(formData);
break; break;

19
src/views/system/region/index.vue
Unescape View File

@ -1,4 +1,3 @@
<template> <template>
<div> <div>
<BasicTable @register="registerTable" <BasicTable @register="registerTable"
@ -53,7 +52,7 @@
/** 通用变量统一声明区域 */ /** 通用变量统一声明区域 */
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, getDataSource }] = useTable({ const [registerTable, { reload, getDataSource, setLoading, collapseAll }] = useTable({
title: '区域列表', title: '区域列表',
api: listRegion, api: listRegion,
rowKey: 'id', rowKey: 'id',
@ -79,11 +78,19 @@
slots: { customRender: 'action' }, slots: { customRender: 'action' },
fixed: false fixed: false
}, },
searchInfo: { parentId: '0' } searchInfo: { parentId: '0' },
handleSearchInfoFn: () => collapseAll()
}); });
function onExpandClick(e, info) { /** 处理点击展示子集数据 */
listRegion({ parentId: info.id }).then((res) => info.children = res); function onExpandClick(expanded, info) {
if (expanded) {
setLoading(true);
listRegion({ parentId: info.id }).then(res => {
info.children = res;
setLoading(false);
}).catch(() => setLoading(false));
}
} }
/** 新增按钮操作,行内新增与工具栏局域新增通用 */ /** 新增按钮操作,行内新增与工具栏局域新增通用 */
@ -106,5 +113,7 @@
/** 处理表格刷新 */ /** 处理表格刷新 */
function handleRefreshTable() { function handleRefreshTable() {
reload(); reload();
collapseAll();
} }
</script> </script>

Write Preview
Loading…
Cancel
Save