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

-前端提交：部门管理

master
静候秋冬 3 years ago
parent
c7ac208fb5
commit
b4dba6b928
7 changed files with 335 additions and 218 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. 63
      kicc-ui/src/api/system/dept.ts
  2. 61
      kicc-ui/src/views/system/depart/DeptModal.vue
  3. 108
      kicc-ui/src/views/system/depart/dept.data.ts
  4. 80
      kicc-ui/src/views/system/dept/DeptModal.vue
  5. 165
      kicc-ui/src/views/system/dept/dept.data.ts
  6. 70
      kicc-ui/src/views/system/dept/index.vue
  7. 6
      kicc-ui/src/views/system/user/DeptTree.vue

63
kicc-ui/src/api/system/dept.ts
Unescape View File

@ -1,25 +1,58 @@ @@ -1,25 +1,58 @@
import { DepartVO, DeptDto, Depart, DeptListItem, DeptListGetResultModel } from './model/deptModel';
import { defHttp } from '/@/utils/http/axios';
import {listToTree} from "/@/utils/helper/treeHelper";
import {isDef} from "/@/utils/is";
const prefix = '/system_proxy/system';
enum Api {
list = '/system_proxy/system/dept/list',
List = '/mate-system/depart/list',
Set = '/mate-system/depart/set',
Del = '/mate-system/depart/del',
DeptList = '/mate-system/depart/list',
List = '/dept/list',
Save = '/dept/save',
Update = '/dept/update',
Remove = '/dept/remove',
DeptList = '/dept/deptTree',
}
// 菜单树
export const departList = (params?: DepartVO) => defHttp.get({ url: Api.List, params });
//获取部门根据id
export const getDeptById = (params: {id: string}) =>
defHttp.get({url: prefix + `/dept/${params.id}` })
// 保存
export const departSet = (params: Depart) => defHttp.post<Depart>({ url: Api.Set, params });
//部门列表
export const deptList = (params?: Partial<DeptDto>) => defHttp.get({ url: prefix + Api.List, params });
// 删除
export const departDel = (params: { ids: String }) =>
defHttp.post<boolean>({ url: Api.Del + `?ids=${params.ids}` });
// 部门树
export const departTreeList = (params?: DepartVO) => {
return defHttp.get({ url: prefix + Api.List, params }).then(data => {
return listToTree(data, {
id: 'deptId',
children: 'children',
parentId: 'parentId',
}) as any[];
});
}
export const departTreeHasTop = (params?: DepartVO) => {
return defHttp.get({ url: prefix + Api.List, params }).then(data => {
data.unshift({ deptId: '0', sort: 0, name: '顶级部门', children: [] });
return listToTree(data, {
id: 'deptId',
children: 'children',
parentId: 'parentId',
}) as any[];
});
}
export const departSet = (params: Depart) => {
if (isDef(params.id)){
return defHttp.put({ url: prefix + Api.Update, params });
}else {
return defHttp.post({ url: prefix + Api.Save, params });
}
}
export const getDeptList = (params?: DeptListItem) => defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params });
// 删除
export const departRemove = (params: { id: String }) =>
defHttp.delete<boolean>({ url: prefix + Api.Remove + `/${params.id}` });
// 查询部门列表
export const deptList = (params?: Partial<DeptDto>) => defHttp.get({ url: Api.list, params });
export const getDeptList = (params?: DeptListItem) =>
defHttp.get<DeptListGetResultModel>({ url: prefix + Api.DeptList, params });

61
kicc-ui/src/views/system/depart/DeptModal.vue
Unescape View File

@ -1,61 +0,0 @@ @@ -1,61 +0,0 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './dept.data';
import { departList, departSet } from '/@/api/system/dept';
export default defineComponent({
name: 'DeptModal',
components: { BasicModal, BasicForm },
emits: ['success', 'register'],
setup(_, { emit }) {
const isUpdate = ref(true);
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
setFieldsValue({
...data.record,
});
}
const treeData = await departList();
treeData.unshift({ id: '-1', sort: 0, name: '顶级部门' });
updateSchema({
field: 'parentId',
componentProps: { treeData },
});
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
await departSet(values);
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
return { registerModal, registerForm, getTitle, handleSubmit };
},
});
</script>

108
kicc-ui/src/views/system/depart/dept.data.ts
Unescape View File

@ -1,108 +0,0 @@ @@ -1,108 +0,0 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
export const columns: BasicColumn[] = [
{
title: '部门名称',
dataIndex: 'name',
width: 160,
align: 'left',
},
{
title: '排序',
dataIndex: 'sort',
width: 50,
},
{
title: '状态',
dataIndex: 'status',
width: 80,
customRender: ({ record }) => {
const status = record.status;
const enable = ~~status === 0;
const color = enable ? 'green' : 'red';
const text = enable ? '启用' : '停用';
return h(Tag, { color: color }, () => text);
},
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 180,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: '关键字',
component: 'Input',
componentProps: {
placeholder: '请输入名称/编码',
},
colProps: { span: 8 },
},
{
field: 'startDate',
label: '起始时间',
component: 'DatePicker',
colProps: { span: 8 },
},
{
field: 'endDate',
label: '截止时间',
component: 'DatePicker',
colProps: { span: 8 },
},
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false,
},
{
field: 'name',
label: '部门名称',
component: 'Input',
required: true,
},
{
field: 'parentId',
label: '上级部门',
component: 'TreeSelect',
componentProps: {
replaceFields: {
title: 'name',
key: 'id',
value: 'id',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'sort',
label: '排序',
component: 'InputNumber',
required: true,
},
{
field: 'status',
label: '状态',
component: 'RadioButtonGroup',
defaultValue: '0',
componentProps: {
options: [
{ label: '启用', value: '0' },
{ label: '停用', value: '1' },
],
},
required: true,
},
];

80
kicc-ui/src/views/system/dept/DeptModal.vue
Unescape View File

@ -0,0 +1,80 @@ @@ -0,0 +1,80 @@
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
@ok="handleSubmit"
width="720px">
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import {BasicModal, ModalProps, useModalInner} from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './dept.data';
import { deptList, departSet } from '/@/api/system/dept';
import {isDef} from "/@/utils/is";
import {listToTree} from "/@/utils/helper/treeHelper";
export default defineComponent({
name: 'DeptModal',
components: { BasicModal, BasicForm },
emits: ['success', 'register'],
setup(_, { emit }) {
const isUpdate = ref(true);
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
const props: Partial<ModalProps> = { confirmLoading: false };
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
await setFieldsValue({
...data.record,
});
props.title = "编辑部门";
}else {
props.title = "新增部门";
}
let treeData = await deptList();
treeData.unshift({ deptId: '0', sort: 0, name: '顶级部门', children: [] });
treeData = listToTree(treeData,{
id: 'deptId',
children: 'children',
parentId: 'parentId',
});
await updateSchema({
field: 'parentId',
componentProps: { treeData },
});
if (isDef(data.record?.deptId)){
await setFieldsValue({parentId: data.record?.deptId})
}
setModalProps(props);
});
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
await departSet(values);
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
return { registerModal, registerForm, handleSubmit };
},
});
</script>

165
kicc-ui/src/views/system/dept/dept.data.ts
Unescape View File

@ -0,0 +1,165 @@ @@ -0,0 +1,165 @@
import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import {h} from 'vue';
import {Tag} from 'ant-design-vue';
export const columns: BasicColumn[] = [
{
title: '部门名称',
dataIndex: 'name',
width: 160,
align: 'left',
},
{
title: '部门编码',
dataIndex: 'code',
width: 160,
},
{
title: '排序',
dataIndex: 'sort',
width: 50,
},
{
title: '状态',
dataIndex: 'status',
width: 80,
customRender: ({record}) => {
const status = record.status;
const enable = ~~status === 0;
const color = enable ? 'green' : 'red';
const text = enable ? '启用' : '停用';
return h(Tag, {color: color}, () => text);
},
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 180,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: '关键字',
component: 'Input',
componentProps: {
placeholder: '请输入名称/编码',
},
colProps: {span: 8},
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
export const formSchema: FormSchema[] = [
{
field: 'deptId',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'name',
label: '部门名称',
component: 'Input',
required: true
},
{
field: 'parentId',
label: '上级部门',
component: 'TreeSelect',
componentProps: {
replaceFields: {
title: 'name',
key: 'deptId',
value: 'deptId',
},
getPopupContainer: () => document.body,
},
required: true,
colProps: {
span: 12
}
},
{
field: 'code',
label: '部门编码',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'sort',
label: '排序',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'contacts',
label: '联系人',
component: 'Input',
required: false,
colProps: {
span: 12
}
},
{
field: 'phone',
label: '联系人电话',
component: 'Input',
required: false,
colProps: {
span: 12
}
},
{
field: 'address',
label: '联系地址',
component: 'Input',
required: false,
colProps: {
span: 12
}
},
{
field: 'email',
label: '邮箱',
component: 'Input',
required: false,
colProps: {
span: 12
}
},
{
field: 'status',
label: '状态',
component: 'RadioButtonGroup',
defaultValue: '0',
componentProps: {
options: [
{label: '启用', value: '0'},
{label: '停用', value: '1'},
],
},
required: true,
colProps: {
span: 12
}
},
];

70
kicc-ui/src/views/system/depart/index.vue → kicc-ui/src/views/system/dept/index.vue
Unescape View File

@ -2,24 +2,33 @@ @@ -2,24 +2,33 @@
<div>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate"> 新增部门 </a-button>
<a-button type="primary"
@click="handleAdd()"
>新增部门</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
:actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
onClick: handleEdit.bind(null, record)
},
{
label: '新增',
icon: 'ant-design:plus-circle-outlined',
onClick: handleAdd.bind(null, record),
},
},
]"
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
title: '是否确认删除',
confirm: handleDel.bind(null, record),
},
}]"
/>
</template>
</BasicTable>
@ -32,8 +41,9 @@ @@ -32,8 +41,9 @@
import { useModal } from '/@/components/Modal';
import DeptModal from './DeptModal.vue';
import { columns, searchFormSchema } from './dept.data';
import { departDel, departList } from '/@/api/system/dept';
import { departRemove, departTreeList } from '/@/api/system/dept';
import { useMessage } from '/@/hooks/web/useMessage';
import {convertDateRange} from "/@/utils/dateUtil";
const { createMessage } = useMessage();
@ -44,7 +54,7 @@ @@ -44,7 +54,7 @@
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '部门列表',
api: departList,
api: departTreeList,
columns,
formConfig: {
labelWidth: 120,
@ -58,33 +68,33 @@ @@ -58,33 +68,33 @@
showIndexColumn: false,
canResize: false,
actionColumn: {
width: 80,
width: 150,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
fixed: undefined,
fixed: false,
},
handleSearchInfoFn: (queryParams) => convertDateRange(queryParams, 'dateRange')
});
function handleCreate() {
openModal(true, {
isUpdate: false,
});
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd(record?: Recordable) {
openModal(true,{ isUpdate: false, record });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
openModal(true, { isUpdate: true, record });
}
async function handleDelete(record: Recordable) {
await departDel({ ids: record.id });
/** 删除按钮操作,行内删除 */
async function handleDel(record: Recordable) {
await departRemove(record.id);
createMessage.success('删除成功!');
handleSuccess();
}
/** 处理表单提交成功 */
function handleSuccess() {
reload();
}
@ -92,9 +102,9 @@ @@ -92,9 +102,9 @@
return {
registerTable,
registerModal,
handleCreate,
handleAdd,
handleEdit,
handleDelete,
handleDel,
handleSuccess,
};
},

6
kicc-ui/src/views/system/user/DeptTree.vue
Unescape View File

@ -13,8 +13,7 @@ @@ -13,8 +13,7 @@
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { BasicTree, TreeItem } from '/@/components/Tree';
import { deptList } from '/@/api/system/dept';
import {listToTree} from "/@/utils/helper/treeHelper";
import { departTreeList } from '/@/api/system/dept';
export default defineComponent({
name: 'DeptTree',
@ -24,12 +23,11 @@ @@ -24,12 +23,11 @@
const treeData = ref<TreeItem[]>([]);
async function fetch() {
treeData.value = listToTree(await deptList());
treeData.value = await departTreeList();
}
function handleSelect(keys: string, e) {
emit('select', keys[0]);
console.log(keys, e);
}
onMounted(() => {

Write Preview
Loading…
Cancel
Save