feat: 部门管理对接完成
This commit is contained in:
parent
c1444346e0
commit
ee5afcf20f
@ -8,6 +8,13 @@ export function fetchGetDeptList(params?: Api.System.DeptSearchParams) {
|
|||||||
params
|
params
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
/** 获取排除部门列表 */
|
||||||
|
export function fetchGetExcludeDeptList(deptId?: CommonType.IdType) {
|
||||||
|
return request<Api.System.Dept[]>({
|
||||||
|
url: `/system/dept/list/exclude/${deptId}`,
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/** 新增部门 */
|
/** 新增部门 */
|
||||||
export function fetchCreateDept(data: Api.System.DeptOperateParams) {
|
export function fetchCreateDept(data: Api.System.DeptOperateParams) {
|
||||||
|
@ -8,6 +8,13 @@ export function fetchGetUserList(params?: Api.System.UserSearchParams) {
|
|||||||
params
|
params
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
/** 获取部门用户信息列表 */
|
||||||
|
export function fetchGetDeptUserList(deptId: CommonType.IdType) {
|
||||||
|
return request<Api.System.User[]>({
|
||||||
|
url: `/system/user/list/dept/${deptId}`,
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/** 新增用户信息 */
|
/** 新增用户信息 */
|
||||||
export function fetchCreateUser(data: Api.System.UserOperateParams) {
|
export function fetchCreateUser(data: Api.System.UserOperateParams) {
|
||||||
|
@ -1,11 +1,12 @@
|
|||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import { NButton, NPopconfirm } from 'naive-ui';
|
import { NButton, NPopconfirm } from 'naive-ui';
|
||||||
|
import { jsonClone } from '@sa/utils';
|
||||||
|
import type { TableDataWithIndex } from '@sa/hooks';
|
||||||
import { fetchBatchDeleteDept, fetchGetDeptList } from '@/service/api/system/dept';
|
import { fetchBatchDeleteDept, fetchGetDeptList } from '@/service/api/system/dept';
|
||||||
import { $t } from '@/locales';
|
import { $t } from '@/locales';
|
||||||
import { useAuth } from '@/hooks/business/auth';
|
import { useAuth } from '@/hooks/business/auth';
|
||||||
import { useAppStore } from '@/store/modules/app';
|
import { useAppStore } from '@/store/modules/app';
|
||||||
import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
|
import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
|
||||||
import type { TableDataWithIndex } from '~/packages/hooks/src';
|
|
||||||
import DictTag from '@/components/custom/dict-tag.vue';
|
import DictTag from '@/components/custom/dict-tag.vue';
|
||||||
import { useDict } from '@/hooks/business/dict';
|
import { useDict } from '@/hooks/business/dict';
|
||||||
import DeptOperateDrawer from './modules/dept-operate-drawer.vue';
|
import DeptOperateDrawer from './modules/dept-operate-drawer.vue';
|
||||||
@ -76,7 +77,7 @@ const {
|
|||||||
key: 'operate',
|
key: 'operate',
|
||||||
title: $t('common.operate'),
|
title: $t('common.operate'),
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 130,
|
width: 180,
|
||||||
render: row => {
|
render: row => {
|
||||||
const editBtn = () => {
|
const editBtn = () => {
|
||||||
if (!hasAuth('system:dept:edit')) {
|
if (!hasAuth('system:dept:edit')) {
|
||||||
@ -88,7 +89,16 @@ const {
|
|||||||
</NButton>
|
</NButton>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
const addBtn = () => {
|
||||||
|
if (!hasAuth('system:dept:add')) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<NButton type="success" ghost size="small" onClick={() => addInRow(row)}>
|
||||||
|
{$t('common.add')}
|
||||||
|
</NButton>
|
||||||
|
);
|
||||||
|
};
|
||||||
const deleteBtn = () => {
|
const deleteBtn = () => {
|
||||||
if (!hasAuth('system:dept:remove')) {
|
if (!hasAuth('system:dept:remove')) {
|
||||||
return null;
|
return null;
|
||||||
@ -110,6 +120,7 @@ const {
|
|||||||
return (
|
return (
|
||||||
<div class="flex-center gap-8px">
|
<div class="flex-center gap-8px">
|
||||||
{editBtn()}
|
{editBtn()}
|
||||||
|
{addBtn()}
|
||||||
{deleteBtn()}
|
{deleteBtn()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -133,6 +144,11 @@ async function handleDelete(deptId: CommonType.IdType) {
|
|||||||
async function edit(row: TableDataWithIndex<Api.System.Dept>) {
|
async function edit(row: TableDataWithIndex<Api.System.Dept>) {
|
||||||
handleEdit(row);
|
handleEdit(row);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function addInRow(row: TableDataWithIndex<Api.System.Dept>) {
|
||||||
|
handleAdd();
|
||||||
|
editingData.value = jsonClone(row);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -1,10 +1,13 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, reactive, watch } from 'vue';
|
import { computed, reactive, ref, watch } from 'vue';
|
||||||
import { NInputNumber } from 'naive-ui';
|
import { NInputNumber } from 'naive-ui';
|
||||||
|
import { useLoading } from '@sa/hooks';
|
||||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||||
import { $t } from '@/locales';
|
import { $t } from '@/locales';
|
||||||
import { fetchCreateDept, fetchUpdateDept } from '@/service/api/system/dept';
|
import { fetchCreateDept, fetchGetDeptList, fetchGetExcludeDeptList, fetchUpdateDept } from '@/service/api/system/dept';
|
||||||
import { useDict } from '@/hooks/business/dict';
|
import { fetchGetDeptUserList } from '@/service/api/system/user';
|
||||||
|
import { handleTree } from '@/utils/common';
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'DeptOperateDrawer'
|
name: 'DeptOperateDrawer'
|
||||||
});
|
});
|
||||||
@ -28,10 +31,15 @@ const visible = defineModel<boolean>('visible', {
|
|||||||
default: false
|
default: false
|
||||||
});
|
});
|
||||||
|
|
||||||
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
|
|
||||||
|
|
||||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||||
const { createRequiredRule } = useFormRules();
|
const { createRequiredRule, patternRules } = useFormRules();
|
||||||
|
|
||||||
|
const { loading: deptLoading, startLoading: startDeptLoading, endLoading: endDeptLoading } = useLoading();
|
||||||
|
const { loading: userLoading, startLoading: startUserLoading, endLoading: endUserLoading } = useLoading();
|
||||||
|
const deptData = ref<Api.System.Dept[]>([]);
|
||||||
|
const userOptions = ref<CommonType.Option<CommonType.IdType>[]>([]);
|
||||||
|
const placeholder = ref<string>('请选择负责人');
|
||||||
|
const disabled = ref<boolean>(false);
|
||||||
|
|
||||||
const title = computed(() => {
|
const title = computed(() => {
|
||||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||||
@ -47,28 +55,31 @@ const model: Model = reactive(createDefaultModel());
|
|||||||
|
|
||||||
function createDefaultModel(): Model {
|
function createDefaultModel(): Model {
|
||||||
return {
|
return {
|
||||||
parentId: null,
|
parentId: props.rowData?.deptId,
|
||||||
deptName: '',
|
deptName: '',
|
||||||
deptCategory: '',
|
deptCategory: '',
|
||||||
orderNum: null,
|
orderNum: null,
|
||||||
leader: null,
|
leader: null,
|
||||||
phone: '',
|
phone: '',
|
||||||
email: '',
|
email: '',
|
||||||
status: ''
|
status: '0'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
type RuleKey = Extract<keyof Model, 'deptId' | 'status'>;
|
type RuleKey = Extract<keyof Model, 'deptId' | 'parentId' | 'orderNum' | 'deptName' | 'phone' | 'email'>;
|
||||||
|
|
||||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||||
deptId: createRequiredRule('部门id不能为空'),
|
deptId: createRequiredRule('部门id不能为空'),
|
||||||
status: createRequiredRule('部门状态(0正常 1停用)不能为空')
|
parentId: createRequiredRule('上级部门不能为空'),
|
||||||
|
orderNum: createRequiredRule('显示顺序不能为空'),
|
||||||
|
deptName: createRequiredRule('部门名称不能为空'),
|
||||||
|
phone: patternRules.phone,
|
||||||
|
email: patternRules.email
|
||||||
};
|
};
|
||||||
|
|
||||||
function handleUpdateModelWhenEdit() {
|
function handleUpdateModelWhenEdit() {
|
||||||
if (props.operateType === 'add') {
|
if (props.operateType === 'add') {
|
||||||
Object.assign(model, createDefaultModel());
|
Object.assign(model, createDefaultModel());
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.operateType === 'edit' && props.rowData) {
|
if (props.operateType === 'edit' && props.rowData) {
|
||||||
@ -120,8 +131,50 @@ async function handleSubmit() {
|
|||||||
emit('submitted');
|
emit('submitted');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function getDeptData() {
|
||||||
|
startDeptLoading();
|
||||||
|
const { data, error } =
|
||||||
|
props.operateType === 'add' ? await fetchGetDeptList() : await fetchGetExcludeDeptList(props.rowData?.deptId);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
window.$message?.error(error.message || '获取部门数据失败');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
deptData.value = handleTree(data, { idField: 'deptId' });
|
||||||
|
}
|
||||||
|
endDeptLoading();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getUserData() {
|
||||||
|
if (props.operateType === 'add' || !props.rowData?.deptId) {
|
||||||
|
placeholder.value = '仅在更新时可选择部门负责人';
|
||||||
|
disabled.value = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
startUserLoading();
|
||||||
|
const { data, error } = await fetchGetDeptUserList(props.rowData.deptId);
|
||||||
|
if (error) {
|
||||||
|
window.$message?.error(error.message || '获取部门用户数据失败');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (data.length === 0) {
|
||||||
|
placeholder.value = '该部门没有负责人';
|
||||||
|
disabled.value = true;
|
||||||
|
}
|
||||||
|
userOptions.value = data.map(item => ({
|
||||||
|
label: `${item.userName} | ${item.nickName}`,
|
||||||
|
value: item.userId
|
||||||
|
}));
|
||||||
|
endUserLoading();
|
||||||
|
}
|
||||||
|
|
||||||
watch(visible, () => {
|
watch(visible, () => {
|
||||||
if (visible.value) {
|
if (visible.value) {
|
||||||
|
disabled.value = false;
|
||||||
|
getDeptData();
|
||||||
|
getUserData();
|
||||||
handleUpdateModelWhenEdit();
|
handleUpdateModelWhenEdit();
|
||||||
restoreValidation();
|
restoreValidation();
|
||||||
}
|
}
|
||||||
@ -132,26 +185,38 @@ watch(visible, () => {
|
|||||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
||||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||||
<NForm ref="formRef" :model="model" :rules="rules">
|
<NForm ref="formRef" :model="model" :rules="rules">
|
||||||
<!--
|
<NFormItem label="上级部门" path="parentId">
|
||||||
<NFormItem label="父部门id" path="parentId">
|
<NTreeSelect
|
||||||
<NInput v-model:value="model.parentId" placeholder="请输入父部门id" />
|
v-model:value="model.parentId"
|
||||||
|
:loading="deptLoading"
|
||||||
|
clearable
|
||||||
|
:options="deptData"
|
||||||
|
label-field="deptName"
|
||||||
|
key-field="deptId"
|
||||||
|
default-expand-all
|
||||||
|
placeholder="请选择上级部门"
|
||||||
|
/>
|
||||||
</NFormItem>
|
</NFormItem>
|
||||||
-->
|
|
||||||
|
|
||||||
<NFormItem label="部门名称" path="deptName">
|
<NFormItem label="部门名称" path="deptName">
|
||||||
<NInput v-model:value="model.deptName" placeholder="请输入部门名称" />
|
<NInput v-model:value="model.deptName" placeholder="请输入部门名称" />
|
||||||
</NFormItem>
|
</NFormItem>
|
||||||
|
<NFormItem label="显示顺序" path="orderNum">
|
||||||
|
<NInputNumber v-model:value="model.orderNum" class="w-full" placeholder="请输入显示顺序" />
|
||||||
|
</NFormItem>
|
||||||
<NFormItem label="部门类别编码" path="deptCategory">
|
<NFormItem label="部门类别编码" path="deptCategory">
|
||||||
<NInput v-model:value="model.deptCategory" placeholder="请输入部门类别编码" />
|
<NInput v-model:value="model.deptCategory" placeholder="请输入部门类别编码" />
|
||||||
</NFormItem>
|
</NFormItem>
|
||||||
<NFormItem label="显示顺序" path="orderNum">
|
|
||||||
<NInputNumber v-model:value="model.orderNum" placeholder="请输入显示顺序" />
|
|
||||||
</NFormItem>
|
|
||||||
<!--
|
|
||||||
<NFormItem label="负责人" path="leader">
|
<NFormItem label="负责人" path="leader">
|
||||||
<NInput v-model:value="model.leader" placeholder="请输入负责人" />
|
<NSelect
|
||||||
|
v-model:value="model.leader"
|
||||||
|
:loading="userLoading"
|
||||||
|
:disabled="disabled"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:options="userOptions"
|
||||||
|
/>
|
||||||
</NFormItem>
|
</NFormItem>
|
||||||
-->
|
|
||||||
<NFormItem label="联系电话" path="phone">
|
<NFormItem label="联系电话" path="phone">
|
||||||
<NInput v-model:value="model.phone" placeholder="请输入联系电话" />
|
<NInput v-model:value="model.phone" placeholder="请输入联系电话" />
|
||||||
</NFormItem>
|
</NFormItem>
|
||||||
@ -159,12 +224,7 @@ watch(visible, () => {
|
|||||||
<NInput v-model:value="model.email" placeholder="请输入邮箱" />
|
<NInput v-model:value="model.email" placeholder="请输入邮箱" />
|
||||||
</NFormItem>
|
</NFormItem>
|
||||||
<NFormItem label="部门状态" path="status">
|
<NFormItem label="部门状态" path="status">
|
||||||
<NSelect
|
<DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
|
||||||
v-model:value="model.status"
|
|
||||||
placeholder="请选择部门状态"
|
|
||||||
:options="sysNormalDisableOptions"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</NFormItem>
|
</NFormItem>
|
||||||
</NForm>
|
</NForm>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import { NButton, NPopconfirm } from 'naive-ui';
|
import { NButton, NPopconfirm } from 'naive-ui';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import type { TableDataWithIndex } from '@sa/hooks';
|
||||||
import { fetchBatchDeleteDictType, fetchGetDictTypeList } from '@/service/api/system/dict';
|
import { fetchBatchDeleteDictType, fetchGetDictTypeList } from '@/service/api/system/dict';
|
||||||
import { $t } from '@/locales';
|
import { $t } from '@/locales';
|
||||||
import { useAuth } from '@/hooks/business/auth';
|
import { useAuth } from '@/hooks/business/auth';
|
||||||
import { useAppStore } from '@/store/modules/app';
|
import { useAppStore } from '@/store/modules/app';
|
||||||
import { useDownload } from '@/hooks/business/download';
|
import { useDownload } from '@/hooks/business/download';
|
||||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||||
import type { TableDataWithIndex } from '~/packages/hooks/src';
|
|
||||||
import { emitter } from '../mitt';
|
import { emitter } from '../mitt';
|
||||||
import DictTypeOperateDrawer from './modules/dict-type-operate-drawer.vue';
|
import DictTypeOperateDrawer from './modules/dict-type-operate-drawer.vue';
|
||||||
import DictTypeSearch from './modules/dict-type-search.vue';
|
import DictTypeSearch from './modules/dict-type-search.vue';
|
||||||
|
Loading…
Reference in New Issue
Block a user