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
Split 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 @@ @@ -4,6 +4,7 @@
* author entfrm开发团队-王翔
*/
import { RegionParams, Region, RegionResult } from '/@/api/platform/system/entity/region';
import { ResultVo } from '/@/api/common/base/entity';
import { defHttp } from '/@/utils/http/axios';
enum Api {
@ -21,13 +22,11 @@ export const listRegion = (params?: Partial<RegionParams>) => { @@ -21,13 +22,11 @@ export const listRegion = (params?: Partial<RegionParams>) => {
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 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}` });

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

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

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

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

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

@ -1,4 +1,3 @@ @@ -1,4 +1,3 @@
<template>
<div>
<BasicTable @register="registerTable"
@ -53,7 +52,7 @@ @@ -53,7 +52,7 @@
/** 通用变量统一声明区域 */
const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, getDataSource }] = useTable({
const [registerTable, { reload, getDataSource, setLoading, collapseAll }] = useTable({
title: '区域列表',
api: listRegion,
rowKey: 'id',
@ -79,11 +78,19 @@ @@ -79,11 +78,19 @@
slots: { customRender: 'action' },
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 @@ @@ -106,5 +113,7 @@
/** 处理表格刷新 */
function handleRefreshTable() {
reload();
collapseAll();
}
</script>

Write Preview
Loading…
Cancel
Save