feat: add IM org and notification admin
This commit is contained in:
richjohnrambo
@@ -0,0 +1,9 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
export function TemplateList(params) {
|
||||
return http.request({ url: '/imNotification/templateList', method: 'GET', params });
|
||||
}
|
||||
|
||||
export function TemplateUpdate(params) {
|
||||
return http.request({ url: '/imNotification/templateUpdate', method: 'POST', params });
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
export function DepartmentList(params) {
|
||||
return http.request({ url: '/imOrg/departmentList', method: 'GET', params });
|
||||
}
|
||||
|
||||
export function DepartmentEdit(params) {
|
||||
return http.request({ url: '/imOrg/departmentEdit', method: 'POST', params });
|
||||
}
|
||||
|
||||
export function DepartmentDelete(params) {
|
||||
return http.request({ url: '/imOrg/departmentDelete', method: 'POST', params });
|
||||
}
|
||||
|
||||
export function MemberList(params) {
|
||||
return http.request({ url: '/imOrg/memberList', method: 'GET', params });
|
||||
}
|
||||
|
||||
export function MemberEdit(params) {
|
||||
return http.request({ url: '/imOrg/memberEdit', method: 'POST', params });
|
||||
}
|
||||
|
||||
export function MemberDelete(params) {
|
||||
return http.request({ url: '/imOrg/memberDelete', method: 'POST', params });
|
||||
}
|
||||
|
||||
export function Search(params) {
|
||||
return http.request({ url: '/imOrg/search', method: 'GET', params });
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<n-card :bordered="false" title="IM通知模板" />
|
||||
</div>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicForm
|
||||
ref="searchFormRef"
|
||||
@register="register"
|
||||
@submit="reloadTable"
|
||||
@reset="handleReset"
|
||||
@keyup.enter="reloadTable"
|
||||
/>
|
||||
<BasicTable
|
||||
ref="actionRef"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.tenantId + '-' + row.scene"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
preset="dialog"
|
||||
:show-icon="false"
|
||||
:title="'通知模板 - ' + sceneLabel"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
label-placement="left"
|
||||
label-width="90"
|
||||
>
|
||||
<n-form-item label="站内通知">
|
||||
<n-switch v-model:value="inAppEnabled" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Push通知">
|
||||
<n-switch v-model:value="pushEnabled" />
|
||||
</n-form-item>
|
||||
<n-form-item label="短信通知">
|
||||
<n-switch v-model:value="smsEnabled" />
|
||||
</n-form-item>
|
||||
<n-form-item label="状态">
|
||||
<n-select
|
||||
v-model:value="formValue.status"
|
||||
:options="statusOptions"
|
||||
placeholder="请选择状态"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="标题模板" path="titleTemplate">
|
||||
<n-input v-model:value="formValue.titleTemplate" placeholder="请输入标题模板" />
|
||||
</n-form-item>
|
||||
<n-form-item label="内容模板" path="contentTemplate">
|
||||
<n-input
|
||||
v-model:value="formValue.contentTemplate"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
placeholder="请输入内容模板"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="扩展JSON">
|
||||
<n-input
|
||||
v-model:value="formValue.payloadJson"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
placeholder="请输入JSON配置"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="showModal = false">取消</n-button>
|
||||
<n-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { usePermission } from '@/hooks/web/usePermission';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { TemplateList, TemplateUpdate } from '@/api/imNotification';
|
||||
import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
|
||||
import {
|
||||
columns,
|
||||
loadOptions,
|
||||
loadTenantOptions,
|
||||
newState,
|
||||
rules,
|
||||
schemas,
|
||||
State,
|
||||
tenantOptions,
|
||||
} from './model';
|
||||
|
||||
const dict = useDictStore();
|
||||
const message = useMessage();
|
||||
const { hasPermission } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
const isPlatformAdmin = computed(() => userStore.isCompanyDept);
|
||||
const actionRef = ref();
|
||||
const searchFormRef = ref<any>({});
|
||||
const formRef = ref();
|
||||
const showModal = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const dialogWidth = computed(() => adaModalWidth(720));
|
||||
const statusOptions = computed(() => dict.getOptions('ImNotificationTemplateStatusOptions'));
|
||||
const sceneLabel = computed(
|
||||
() => dict.getLabel('ImNotificationSceneOptions', formValue.value.scene) || formValue.value.name
|
||||
);
|
||||
|
||||
const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
|
||||
if (tenantSchema) {
|
||||
tenantSchema.ifShow = () => isPlatformAdmin.value;
|
||||
}
|
||||
|
||||
const inAppEnabled = computed({
|
||||
get: () => formValue.value.inAppEnabled === 1,
|
||||
set: (value: boolean) => {
|
||||
formValue.value.inAppEnabled = value ? 1 : 0;
|
||||
},
|
||||
});
|
||||
const pushEnabled = computed({
|
||||
get: () => formValue.value.pushEnabled === 1,
|
||||
set: (value: boolean) => {
|
||||
formValue.value.pushEnabled = value ? 1 : 0;
|
||||
},
|
||||
});
|
||||
const smsEnabled = computed({
|
||||
get: () => formValue.value.smsEnabled === 1,
|
||||
set: (value: boolean) => {
|
||||
formValue.value.smsEnabled = value ? 1 : 0;
|
||||
},
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 100,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: State) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
auth: ['/imNotification/templateUpdate'],
|
||||
onClick: () => handleEdit(record),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));
|
||||
|
||||
const [register, { setFieldsValue }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 90,
|
||||
schemas,
|
||||
});
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
const params = { ...searchFormRef.value?.formModel, ...res };
|
||||
if (isPlatformAdmin.value && !params.tenantId)
|
||||
return { list: [], page: 1, pageCount: 0, totalCount: 0 };
|
||||
return await TemplateList(params);
|
||||
};
|
||||
|
||||
function reloadTable() {
|
||||
actionRef.value?.reload();
|
||||
}
|
||||
|
||||
async function handleReset() {
|
||||
const defaults: Recordable = {};
|
||||
if (isPlatformAdmin.value && tenantOptions.value.length > 0)
|
||||
defaults.tenantId = tenantOptions.value[0].value;
|
||||
await setFieldsValue(defaults);
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleEdit(record: State) {
|
||||
formValue.value = newState(record);
|
||||
if (!formValue.value.payloadJson) formValue.value.payloadJson = '{}';
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
let payloadJson = {};
|
||||
const text = (formValue.value.payloadJson || '').trim();
|
||||
if (text) payloadJson = JSON.parse(text);
|
||||
await TemplateUpdate({ ...formValue.value, payloadJson });
|
||||
message.success('操作成功');
|
||||
showModal.value = false;
|
||||
reloadTable();
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '操作失败');
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadOptions();
|
||||
if (isPlatformAdmin.value) {
|
||||
await loadTenantOptions();
|
||||
if (tenantOptions.value.length > 0) {
|
||||
await setFieldsValue({ tenantId: tenantOptions.value[0].value });
|
||||
} else {
|
||||
message.warning('暂无可用租户');
|
||||
}
|
||||
}
|
||||
reloadTable();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,150 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { List as TenantList } from '@/api/imTenant';
|
||||
|
||||
const dict = useDictStore();
|
||||
|
||||
export const tenantOptions = ref<any[]>([]);
|
||||
|
||||
export class State {
|
||||
public tenantId = 0;
|
||||
public tenantName = '';
|
||||
public id = 0;
|
||||
public scene = '';
|
||||
public name = '';
|
||||
public inAppEnabled = 1;
|
||||
public pushEnabled = 1;
|
||||
public smsEnabled = 0;
|
||||
public status = 1;
|
||||
public titleTemplate = '';
|
||||
public contentTemplate = '';
|
||||
public payloadJson = '{}';
|
||||
public updatedAt = '';
|
||||
|
||||
constructor(state?: Partial<State>) {
|
||||
if (state) Object.assign(this, state);
|
||||
}
|
||||
}
|
||||
|
||||
export function newState(state: State | Record<string, any> | null): State {
|
||||
if (state !== null) {
|
||||
if (state instanceof State) return cloneDeep(state);
|
||||
return new State(state);
|
||||
}
|
||||
return new State();
|
||||
}
|
||||
|
||||
export const schemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'tenantId',
|
||||
component: 'NSelect',
|
||||
label: '租户',
|
||||
componentProps: {
|
||||
clearable: false,
|
||||
options: computed(() => tenantOptions.value),
|
||||
placeholder: '请选择租户',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'scene',
|
||||
component: 'NSelect',
|
||||
label: '场景',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImNotificationSceneOptions')),
|
||||
placeholder: '请选择场景',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImNotificationTemplateStatusOptions')),
|
||||
placeholder: '请选择状态',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{ title: '租户', key: 'tenantName', align: 'left', width: 150 },
|
||||
{
|
||||
title: '场景',
|
||||
key: 'scene',
|
||||
align: 'left',
|
||||
width: 140,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImNotificationSceneOptions', row.scene) || row.name;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
align: 'left',
|
||||
width: 90,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImNotificationTemplateStatusOptions', row.status);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '站内',
|
||||
key: 'inAppEnabled',
|
||||
align: 'left',
|
||||
width: 80,
|
||||
render(row: State) {
|
||||
return row.inAppEnabled === 1 ? '开启' : '关闭';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Push',
|
||||
key: 'pushEnabled',
|
||||
align: 'left',
|
||||
width: 80,
|
||||
render(row: State) {
|
||||
return row.pushEnabled === 1 ? '开启' : '关闭';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '短信',
|
||||
key: 'smsEnabled',
|
||||
align: 'left',
|
||||
width: 80,
|
||||
render(row: State) {
|
||||
return row.smsEnabled === 1 ? '开启' : '关闭';
|
||||
},
|
||||
},
|
||||
{ title: '标题模板', key: 'titleTemplate', align: 'left', width: 180 },
|
||||
{ title: '内容模板', key: 'contentTemplate', align: 'left', width: 260 },
|
||||
{ title: '更新时间', key: 'updatedAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export const rules = {
|
||||
titleTemplate: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
type: 'string',
|
||||
message: '请输入标题模板',
|
||||
},
|
||||
contentTemplate: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
type: 'string',
|
||||
message: '请输入内容模板',
|
||||
},
|
||||
};
|
||||
|
||||
export function loadOptions() {
|
||||
dict.loadOptions(['ImNotificationSceneOptions', 'ImNotificationTemplateStatusOptions']);
|
||||
}
|
||||
|
||||
export async function loadTenantOptions() {
|
||||
const res = await TenantList({ page: 1, perPage: 100 });
|
||||
tenantOptions.value = (res?.list || []).map((item) => ({
|
||||
label: `${item.name}（${item.code}）`,
|
||||
value: item.id,
|
||||
}));
|
||||
return tenantOptions.value;
|
||||
}
|
||||
@@ -0,0 +1,501 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<n-card :bordered="false" title="IM组织架构" />
|
||||
</div>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<n-grid :x-gap="16" :y-gap="16" responsive="screen" cols="1 l:2">
|
||||
<n-grid-item>
|
||||
<BasicForm
|
||||
ref="departmentSearchRef"
|
||||
@register="registerDepartment"
|
||||
@submit="reloadDepartments"
|
||||
@reset="handleDepartmentReset"
|
||||
@keyup.enter="reloadDepartments"
|
||||
/>
|
||||
<n-space class="table-toolbar">
|
||||
<n-button
|
||||
v-if="hasPermission(['/imOrg/departmentEdit'])"
|
||||
type="primary"
|
||||
@click="handleDepartmentAdd"
|
||||
>
|
||||
新增部门
|
||||
</n-button>
|
||||
</n-space>
|
||||
<BasicTable
|
||||
ref="departmentTableRef"
|
||||
:columns="departmentColumns"
|
||||
:request="loadDepartmentTable"
|
||||
:row-key="(row) => row.departmentId"
|
||||
:actionColumn="departmentActionColumn"
|
||||
:scroll-x="departmentScrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
@update:checked-row-keys="handleDepartmentChecked"
|
||||
/>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<BasicForm
|
||||
ref="memberSearchRef"
|
||||
@register="registerMember"
|
||||
@submit="reloadMembers"
|
||||
@reset="handleMemberReset"
|
||||
@keyup.enter="reloadMembers"
|
||||
/>
|
||||
<n-space class="table-toolbar">
|
||||
<n-button
|
||||
v-if="hasPermission(['/imOrg/memberEdit'])"
|
||||
type="primary"
|
||||
:disabled="!selectedDepartment.departmentId"
|
||||
@click="handleMemberAdd"
|
||||
>
|
||||
添加成员
|
||||
</n-button>
|
||||
</n-space>
|
||||
<BasicTable
|
||||
ref="memberTableRef"
|
||||
:columns="memberColumns"
|
||||
:request="loadMemberTable"
|
||||
:row-key="(row) => row.id"
|
||||
:actionColumn="memberActionColumn"
|
||||
:scroll-x="memberScrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-card>
|
||||
|
||||
<n-modal
|
||||
v-model:show="departmentModalVisible"
|
||||
preset="dialog"
|
||||
:show-icon="false"
|
||||
:title="departmentForm.id > 0 ? '编辑部门' : '新增部门'"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-form
|
||||
ref="departmentFormRef"
|
||||
:model="departmentForm"
|
||||
:rules="departmentRules"
|
||||
label-placement="left"
|
||||
label-width="90"
|
||||
>
|
||||
<n-form-item label="部门名称" path="name">
|
||||
<n-input v-model:value="departmentForm.name" placeholder="请输入部门名称" />
|
||||
</n-form-item>
|
||||
<n-form-item label="上级部门">
|
||||
<n-select
|
||||
v-model:value="departmentForm.parentId"
|
||||
:options="parentDepartmentOptions"
|
||||
filterable
|
||||
placeholder="请选择上级部门"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="部门ID">
|
||||
<n-input
|
||||
v-model:value="departmentForm.departmentId"
|
||||
:disabled="departmentForm.id > 0"
|
||||
placeholder="留空自动生成"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="排序">
|
||||
<n-input-number v-model:value="departmentForm.sortOrder" />
|
||||
</n-form-item>
|
||||
<n-form-item label="状态" path="state">
|
||||
<n-select
|
||||
v-model:value="departmentForm.state"
|
||||
:options="departmentStateOptions"
|
||||
placeholder="请选择状态"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="departmentModalVisible = false">取消</n-button>
|
||||
<n-button type="primary" :loading="submitLoading" @click="submitDepartment"
|
||||
>保存</n-button
|
||||
>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<n-modal
|
||||
v-model:show="memberModalVisible"
|
||||
preset="dialog"
|
||||
:show-icon="false"
|
||||
:title="memberForm.id > 0 ? '编辑成员' : '添加成员'"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-form
|
||||
ref="memberFormRef"
|
||||
:model="memberForm"
|
||||
:rules="memberRules"
|
||||
label-placement="left"
|
||||
label-width="90"
|
||||
>
|
||||
<n-form-item label="部门" path="departmentId">
|
||||
<n-select
|
||||
v-model:value="memberForm.departmentId"
|
||||
:options="departmentOptions"
|
||||
filterable
|
||||
placeholder="请选择部门"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="用户ID" path="userId">
|
||||
<n-input-number v-model:value="memberForm.userId" :disabled="memberForm.id > 0" />
|
||||
</n-form-item>
|
||||
<n-form-item label="姓名">
|
||||
<n-input v-model:value="memberForm.displayName" placeholder="请输入展示姓名" />
|
||||
</n-form-item>
|
||||
<n-form-item label="岗位">
|
||||
<n-input v-model:value="memberForm.position" placeholder="请输入岗位" />
|
||||
</n-form-item>
|
||||
<n-form-item label="手机号">
|
||||
<n-input v-model:value="memberForm.mobile" placeholder="请输入手机号" />
|
||||
</n-form-item>
|
||||
<n-form-item label="邮箱">
|
||||
<n-input v-model:value="memberForm.email" placeholder="请输入邮箱" />
|
||||
</n-form-item>
|
||||
<n-form-item label="在职状态" path="employmentState">
|
||||
<n-select
|
||||
v-model:value="memberForm.employmentState"
|
||||
:options="employmentStateOptions"
|
||||
placeholder="请选择在职状态"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="可联系">
|
||||
<n-switch v-model:value="memberContactable" />
|
||||
</n-form-item>
|
||||
<n-form-item label="排序">
|
||||
<n-input-number v-model:value="memberForm.sortOrder" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="memberModalVisible = false">取消</n-button>
|
||||
<n-button type="primary" :loading="submitLoading" @click="submitMember">保存</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { usePermission } from '@/hooks/web/usePermission';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
|
||||
import {
|
||||
DepartmentDelete,
|
||||
DepartmentEdit,
|
||||
DepartmentList,
|
||||
MemberDelete,
|
||||
MemberEdit,
|
||||
MemberList,
|
||||
} from '@/api/imOrg';
|
||||
import {
|
||||
departmentColumns,
|
||||
departmentOptions,
|
||||
departmentRules,
|
||||
departmentSchemas,
|
||||
DepartmentState,
|
||||
loadOptions,
|
||||
loadTenantOptions,
|
||||
memberColumns,
|
||||
memberRules,
|
||||
memberSchemas,
|
||||
MemberState,
|
||||
newDepartmentState,
|
||||
newMemberState,
|
||||
tenantOptions,
|
||||
} from './model';
|
||||
|
||||
const dict = useDictStore();
|
||||
const dialog = useDialog();
|
||||
const message = useMessage();
|
||||
const { hasPermission } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
const isPlatformAdmin = computed(() => userStore.isCompanyDept);
|
||||
|
||||
const departmentSearchRef = ref<any>({});
|
||||
const memberSearchRef = ref<any>({});
|
||||
const departmentTableRef = ref();
|
||||
const memberTableRef = ref();
|
||||
const departmentFormRef = ref();
|
||||
const memberFormRef = ref();
|
||||
const selectedDepartment = ref<DepartmentState>(newDepartmentState(null));
|
||||
const departmentRows = ref<DepartmentState[]>([]);
|
||||
const departmentForm = ref<DepartmentState>(newDepartmentState(null));
|
||||
const memberForm = ref<MemberState>(newMemberState(null));
|
||||
const departmentModalVisible = ref(false);
|
||||
const memberModalVisible = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const dialogWidth = computed(() => adaModalWidth(640));
|
||||
|
||||
const tenantSchema = departmentSchemas.value.find((item) => item.field === 'tenantId');
|
||||
if (tenantSchema) {
|
||||
tenantSchema.ifShow = () => isPlatformAdmin.value;
|
||||
}
|
||||
|
||||
const departmentStateOptions = computed(() => dict.getOptions('ImOrgDepartmentStateOptions'));
|
||||
const employmentStateOptions = computed(() => dict.getOptions('ImOrgEmploymentStateOptions'));
|
||||
const parentDepartmentOptions = computed(() => [
|
||||
{ label: '根部门', value: 'root' },
|
||||
...departmentOptions.value.filter((item) => item.value !== departmentForm.value.departmentId),
|
||||
]);
|
||||
const memberContactable = computed({
|
||||
get: () => memberForm.value.contactable === 1,
|
||||
set: (value: boolean) => {
|
||||
memberForm.value.contactable = value ? 1 : 0;
|
||||
},
|
||||
});
|
||||
|
||||
const departmentActionColumn = reactive({
|
||||
width: 180,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: DepartmentState) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '成员',
|
||||
auth: ['/imOrg/memberList'],
|
||||
onClick: () => selectDepartment(record),
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
auth: ['/imOrg/departmentEdit'],
|
||||
onClick: () => handleDepartmentEdit(record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'error',
|
||||
auth: ['/imOrg/departmentDelete'],
|
||||
ifShow: () => record.childCount === 0 && record.memberCount === 0,
|
||||
onClick: () => handleDepartmentDelete(record),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const memberActionColumn = reactive({
|
||||
width: 150,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: MemberState) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
auth: ['/imOrg/memberEdit'],
|
||||
onClick: () => handleMemberEdit(record),
|
||||
},
|
||||
{
|
||||
label: '移除',
|
||||
type: 'error',
|
||||
auth: ['/imOrg/memberDelete'],
|
||||
onClick: () => handleMemberDelete(record),
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const departmentScrollX = computed(() =>
|
||||
adaTableScrollX(departmentColumns, departmentActionColumn.width)
|
||||
);
|
||||
const memberScrollX = computed(() => adaTableScrollX(memberColumns, memberActionColumn.width));
|
||||
|
||||
const [registerDepartment, { setFieldsValue: setDepartmentFields }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:3 2xl:3' },
|
||||
labelWidth: 90,
|
||||
schemas: departmentSchemas,
|
||||
});
|
||||
|
||||
const [registerMember, { setFieldsValue: setMemberFields }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:2 xl:2 2xl:2' },
|
||||
labelWidth: 90,
|
||||
schemas: memberSchemas,
|
||||
});
|
||||
|
||||
const currentTenantId = computed(() => departmentSearchRef.value?.formModel?.tenantId || 0);
|
||||
|
||||
const loadDepartmentTable = async (res) => {
|
||||
const params = { ...departmentSearchRef.value?.formModel, ...res };
|
||||
if (isPlatformAdmin.value && !params.tenantId)
|
||||
return { list: [], page: 1, pageCount: 0, totalCount: 0 };
|
||||
const data = await DepartmentList(params);
|
||||
departmentRows.value = data?.list || [];
|
||||
departmentOptions.value = departmentRows.value.map((item) => ({
|
||||
label: `${item.name}（${item.departmentId}）`,
|
||||
value: item.departmentId,
|
||||
}));
|
||||
if (!selectedDepartment.value.departmentId && departmentRows.value.length > 0) {
|
||||
selectedDepartment.value = newDepartmentState(departmentRows.value[0]);
|
||||
reloadMembers();
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
const loadMemberTable = async (res) => {
|
||||
if (!selectedDepartment.value.departmentId)
|
||||
return { list: [], page: 1, pageCount: 0, totalCount: 0 };
|
||||
const params = {
|
||||
...memberSearchRef.value?.formModel,
|
||||
...res,
|
||||
tenantId: currentTenantId.value,
|
||||
departmentId: selectedDepartment.value.departmentId,
|
||||
};
|
||||
return await MemberList(params);
|
||||
};
|
||||
|
||||
function reloadDepartments() {
|
||||
departmentTableRef.value?.reload();
|
||||
}
|
||||
|
||||
function reloadMembers() {
|
||||
memberTableRef.value?.reload();
|
||||
}
|
||||
|
||||
async function handleDepartmentReset() {
|
||||
const defaults: Recordable = {};
|
||||
if (isPlatformAdmin.value && tenantOptions.value.length > 0)
|
||||
defaults.tenantId = tenantOptions.value[0].value;
|
||||
selectedDepartment.value = newDepartmentState(null);
|
||||
await setDepartmentFields(defaults);
|
||||
reloadDepartments();
|
||||
}
|
||||
|
||||
async function handleMemberReset() {
|
||||
await setMemberFields({});
|
||||
reloadMembers();
|
||||
}
|
||||
|
||||
function handleDepartmentChecked(keys) {
|
||||
const key = keys?.[0];
|
||||
const row = departmentRows.value.find((item) => item.departmentId === key);
|
||||
if (row) selectDepartment(row);
|
||||
}
|
||||
|
||||
function selectDepartment(record: DepartmentState) {
|
||||
selectedDepartment.value = newDepartmentState(record);
|
||||
reloadMembers();
|
||||
}
|
||||
|
||||
function handleDepartmentAdd() {
|
||||
departmentForm.value = newDepartmentState({
|
||||
tenantId: currentTenantId.value,
|
||||
parentId: selectedDepartment.value.departmentId || 'root',
|
||||
state: 'active',
|
||||
});
|
||||
departmentModalVisible.value = true;
|
||||
}
|
||||
|
||||
function handleDepartmentEdit(record: DepartmentState) {
|
||||
departmentForm.value = newDepartmentState(record);
|
||||
departmentModalVisible.value = true;
|
||||
}
|
||||
|
||||
async function submitDepartment() {
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
await departmentFormRef.value?.validate();
|
||||
await DepartmentEdit({ ...departmentForm.value, tenantId: currentTenantId.value });
|
||||
message.success('操作成功');
|
||||
departmentModalVisible.value = false;
|
||||
selectedDepartment.value = newDepartmentState(null);
|
||||
reloadDepartments();
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleDepartmentDelete(record: DepartmentState) {
|
||||
dialog.error({
|
||||
title: '删除部门',
|
||||
content: `确认删除部门 ${record.name}？`,
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await DepartmentDelete({
|
||||
tenantId: currentTenantId.value,
|
||||
departmentId: record.departmentId,
|
||||
});
|
||||
message.success('操作成功');
|
||||
selectedDepartment.value = newDepartmentState(null);
|
||||
reloadDepartments();
|
||||
reloadMembers();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleMemberAdd() {
|
||||
memberForm.value = newMemberState({
|
||||
tenantId: currentTenantId.value,
|
||||
departmentId: selectedDepartment.value.departmentId,
|
||||
employmentState: 'active',
|
||||
contactable: 1,
|
||||
});
|
||||
memberModalVisible.value = true;
|
||||
}
|
||||
|
||||
function handleMemberEdit(record: MemberState) {
|
||||
memberForm.value = newMemberState(record);
|
||||
memberModalVisible.value = true;
|
||||
}
|
||||
|
||||
async function submitMember() {
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
await memberFormRef.value?.validate();
|
||||
await MemberEdit({ ...memberForm.value, tenantId: currentTenantId.value });
|
||||
message.success('操作成功');
|
||||
memberModalVisible.value = false;
|
||||
reloadDepartments();
|
||||
reloadMembers();
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleMemberDelete(record: MemberState) {
|
||||
dialog.error({
|
||||
title: '移除成员',
|
||||
content: `确认将 ${record.displayName || record.userId} 从部门移除？`,
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await MemberDelete({ tenantId: currentTenantId.value, id: record.id });
|
||||
message.success('操作成功');
|
||||
reloadDepartments();
|
||||
reloadMembers();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadOptions();
|
||||
if (isPlatformAdmin.value) {
|
||||
await loadTenantOptions();
|
||||
if (tenantOptions.value.length > 0) {
|
||||
await setDepartmentFields({ tenantId: tenantOptions.value[0].value });
|
||||
} else {
|
||||
message.warning('暂无可用租户');
|
||||
}
|
||||
}
|
||||
reloadDepartments();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table-toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { List as TenantList } from '@/api/imTenant';
|
||||
|
||||
const dict = useDictStore();
|
||||
|
||||
export const tenantOptions = ref<any[]>([]);
|
||||
export const departmentOptions = ref<any[]>([]);
|
||||
|
||||
export class DepartmentState {
|
||||
public tenantId = 0;
|
||||
public tenantName = '';
|
||||
public id = 0;
|
||||
public departmentId = '';
|
||||
public name = '';
|
||||
public parentId = 'root';
|
||||
public sortOrder = 0;
|
||||
public version = 1;
|
||||
public state = 'active';
|
||||
public childCount = 0;
|
||||
public memberCount = 0;
|
||||
public createdAt = '';
|
||||
public updatedAt = '';
|
||||
|
||||
constructor(state?: Partial<DepartmentState>) {
|
||||
if (state) Object.assign(this, state);
|
||||
}
|
||||
}
|
||||
|
||||
export class MemberState {
|
||||
public tenantId = 0;
|
||||
public tenantName = '';
|
||||
public id = 0;
|
||||
public departmentId = '';
|
||||
public departmentName = '';
|
||||
public userId = 0;
|
||||
public displayName = '';
|
||||
public position = '';
|
||||
public avatarFileId = '';
|
||||
public mobile = '';
|
||||
public email = '';
|
||||
public employmentState = 'active';
|
||||
public contactable = 1;
|
||||
public sortOrder = 0;
|
||||
public version = 1;
|
||||
public createdAt = '';
|
||||
public updatedAt = '';
|
||||
|
||||
constructor(state?: Partial<MemberState>) {
|
||||
if (state) Object.assign(this, state);
|
||||
}
|
||||
}
|
||||
|
||||
export function newDepartmentState(state: DepartmentState | Record<string, any> | null) {
|
||||
if (state !== null) {
|
||||
if (state instanceof DepartmentState) return cloneDeep(state);
|
||||
return new DepartmentState(state);
|
||||
}
|
||||
return new DepartmentState();
|
||||
}
|
||||
|
||||
export function newMemberState(state: MemberState | Record<string, any> | null) {
|
||||
if (state !== null) {
|
||||
if (state instanceof MemberState) return cloneDeep(state);
|
||||
return new MemberState(state);
|
||||
}
|
||||
return new MemberState();
|
||||
}
|
||||
|
||||
export const departmentSchemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'tenantId',
|
||||
component: 'NSelect',
|
||||
label: '租户',
|
||||
componentProps: {
|
||||
clearable: false,
|
||||
options: computed(() => tenantOptions.value),
|
||||
placeholder: '请选择租户',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
component: 'NInput',
|
||||
label: '部门名称',
|
||||
componentProps: { placeholder: '请输入部门名称' },
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImOrgDepartmentStateOptions')),
|
||||
placeholder: '请选择状态',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const memberSchemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'query',
|
||||
component: 'NInput',
|
||||
label: '关键词',
|
||||
componentProps: { placeholder: '姓名/手机号/邮箱/用户ID' },
|
||||
},
|
||||
{
|
||||
field: 'employmentState',
|
||||
component: 'NSelect',
|
||||
label: '在职状态',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImOrgEmploymentStateOptions')),
|
||||
placeholder: '请选择在职状态',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const departmentColumns = [
|
||||
{ title: '部门ID', key: 'departmentId', align: 'left', width: 170 },
|
||||
{ title: '部门名称', key: 'name', align: 'left', width: 160 },
|
||||
{ title: '上级部门', key: 'parentId', align: 'left', width: 130 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'state',
|
||||
align: 'left',
|
||||
width: 90,
|
||||
render(row: DepartmentState) {
|
||||
return dict.getLabel('ImOrgDepartmentStateOptions', row.state);
|
||||
},
|
||||
},
|
||||
{ title: '子部门', key: 'childCount', align: 'left', width: 80 },
|
||||
{ title: '成员', key: 'memberCount', align: 'left', width: 80 },
|
||||
{ title: '排序', key: 'sortOrder', align: 'left', width: 80 },
|
||||
{ title: '更新时间', key: 'updatedAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export const memberColumns = [
|
||||
{ title: '用户ID', key: 'userId', align: 'left', width: 110 },
|
||||
{ title: '姓名', key: 'displayName', align: 'left', width: 130 },
|
||||
{ title: '部门', key: 'departmentName', align: 'left', width: 130 },
|
||||
{ title: '岗位', key: 'position', align: 'left', width: 130 },
|
||||
{ title: '手机号', key: 'mobile', align: 'left', width: 140 },
|
||||
{ title: '邮箱', key: 'email', align: 'left', width: 180 },
|
||||
{
|
||||
title: '在职状态',
|
||||
key: 'employmentState',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
render(row: MemberState) {
|
||||
return dict.getLabel('ImOrgEmploymentStateOptions', row.employmentState);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '可联系',
|
||||
key: 'contactable',
|
||||
align: 'left',
|
||||
width: 90,
|
||||
render(row: MemberState) {
|
||||
return dict.getLabel('ImOrgContactableOptions', row.contactable);
|
||||
},
|
||||
},
|
||||
{ title: '排序', key: 'sortOrder', align: 'left', width: 80 },
|
||||
{ title: '更新时间', key: 'updatedAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export const departmentRules = {
|
||||
name: { required: true, trigger: ['blur', 'input'], type: 'string', message: '请输入部门名称' },
|
||||
state: { required: true, trigger: ['blur', 'change'], type: 'string', message: '请选择状态' },
|
||||
};
|
||||
|
||||
export const memberRules = {
|
||||
departmentId: {
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
type: 'string',
|
||||
message: '请选择部门',
|
||||
},
|
||||
userId: { required: true, trigger: ['blur', 'input'], type: 'number', message: '请输入用户ID' },
|
||||
employmentState: {
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
type: 'string',
|
||||
message: '请选择在职状态',
|
||||
},
|
||||
};
|
||||
|
||||
export function loadOptions() {
|
||||
dict.loadOptions([
|
||||
'ImOrgDepartmentStateOptions',
|
||||
'ImOrgEmploymentStateOptions',
|
||||
'ImOrgContactableOptions',
|
||||
]);
|
||||
}
|
||||
|
||||
export async function loadTenantOptions() {
|
||||
const res = await TenantList({ page: 1, perPage: 100 });
|
||||
tenantOptions.value = (res?.list || []).map((item) => ({
|
||||
label: `${item.name}（${item.code}）`,
|
||||
value: item.id,
|
||||
}));
|
||||
return tenantOptions.value;
|
||||
}
|
||||
Reference in New Issue
Block a user