feat: add IM admin P2 configuration modules
This commit is contained in:
richjohnrambo
@@ -0,0 +1,291 @@
|
||||
<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.code"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!hasPermission(['/imWorkbench/edit']) || !currentTenantReady"
|
||||
@click="handleCreate"
|
||||
>
|
||||
新增模块
|
||||
</n-button>
|
||||
<n-button
|
||||
:disabled="!hasPermission(['/imWorkbench/reorder']) || tableRows.length === 0"
|
||||
:loading="reorderLoading"
|
||||
@click="handleReorder"
|
||||
>
|
||||
保存排序
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
preset="dialog"
|
||||
:show-icon="false"
|
||||
:title="formValue.id > 0 ? '编辑工作台模块' : '新增工作台模块'"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
label-placement="left"
|
||||
label-width="92"
|
||||
>
|
||||
<n-form-item label="编码" path="code">
|
||||
<n-input
|
||||
v-model:value="formValue.code"
|
||||
:disabled="formValue.id > 0"
|
||||
placeholder="请输入模块编码"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="名称" path="name">
|
||||
<n-input v-model:value="formValue.name" placeholder="请输入模块名称" />
|
||||
</n-form-item>
|
||||
<n-form-item label="路由" path="route">
|
||||
<n-select
|
||||
v-model:value="formValue.route"
|
||||
:options="routeOptions"
|
||||
placeholder="请选择客户端路由"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="排序">
|
||||
<n-input-number v-model:value="formValue.sortOrder" :min="0" />
|
||||
</n-form-item>
|
||||
<n-form-item label="图标ID">
|
||||
<n-input v-model:value="formValue.iconFileId" placeholder="请输入图标文件ID" />
|
||||
</n-form-item>
|
||||
<n-form-item label="角标Key">
|
||||
<n-input v-model:value="formValue.unreadKey" placeholder="请输入未读角标Key" />
|
||||
</n-form-item>
|
||||
<n-form-item label="权限" path="permission">
|
||||
<n-select
|
||||
v-model:value="formValue.permission"
|
||||
:options="permissionOptions"
|
||||
placeholder="请选择权限策略"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="状态">
|
||||
<n-switch v-model:value="enabledValue" />
|
||||
</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 { 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 { Delete, Edit, List, Reorder } from '@/api/imWorkbench';
|
||||
import { adaModalWidth, adaTableScrollX } from '@/utils/hotgo';
|
||||
import {
|
||||
columns,
|
||||
loadOptions,
|
||||
loadTenantOptions,
|
||||
newState,
|
||||
rules,
|
||||
schemas,
|
||||
State,
|
||||
tenantOptions,
|
||||
} from './model';
|
||||
|
||||
const dict = useDictStore();
|
||||
const dialog = useDialog();
|
||||
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 reorderLoading = ref(false);
|
||||
const tableRows = ref<State[]>([]);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const dialogWidth = computed(() => adaModalWidth(640));
|
||||
const routeOptions = computed(() => dict.getOptions('ImWorkbenchRouteOptions'));
|
||||
const permissionOptions = computed(() => dict.getOptions('ImWorkbenchPermissionOptions'));
|
||||
const currentTenantReady = computed(
|
||||
() => !isPlatformAdmin.value || !!searchFormRef.value?.formModel?.tenantId
|
||||
);
|
||||
|
||||
const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
|
||||
if (tenantSchema) {
|
||||
tenantSchema.ifShow = () => isPlatformAdmin.value;
|
||||
}
|
||||
|
||||
const enabledValue = computed({
|
||||
get: () => formValue.value.enabled === 1,
|
||||
set: (value: boolean) => {
|
||||
formValue.value.enabled = value ? 1 : 0;
|
||||
},
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 150,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: State) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
auth: ['/imWorkbench/edit'],
|
||||
onClick: () => handleEdit(record),
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
auth: ['/imWorkbench/delete'],
|
||||
disabled: record.enabled === 0,
|
||||
onClick: () => handleDelete(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) {
|
||||
tableRows.value = [];
|
||||
return { list: [], page: 1, pageCount: 0, totalCount: 0 };
|
||||
}
|
||||
const data = await List(params);
|
||||
tableRows.value = data?.list || [];
|
||||
return data;
|
||||
};
|
||||
|
||||
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 handleCreate() {
|
||||
formValue.value = newState({
|
||||
tenantId: searchFormRef.value?.formModel?.tenantId || 0,
|
||||
enabled: 1,
|
||||
permission: 'enabled',
|
||||
sortOrder: (tableRows.value.length + 1) * 10,
|
||||
});
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
function handleEdit(record: State) {
|
||||
formValue.value = newState(record);
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
function handleDelete(record: State) {
|
||||
dialog.warning({
|
||||
title: '确认禁用',
|
||||
content: `确定禁用工作台模块「${record.name}」吗？`,
|
||||
positiveText: '禁用',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await Delete({ tenantId: record.tenantId, id: record.id, code: record.code });
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function handleReorder() {
|
||||
reorderLoading.value = true;
|
||||
try {
|
||||
const tenantId =
|
||||
searchFormRef.value?.formModel?.tenantId || tableRows.value[0]?.tenantId || 0;
|
||||
await Reorder({
|
||||
tenantId,
|
||||
items: tableRows.value.map((item, index) => ({
|
||||
code: item.code,
|
||||
sortOrder: item.sortOrder || (index + 1) * 10,
|
||||
})),
|
||||
});
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '操作失败');
|
||||
} finally {
|
||||
reorderLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
await Edit({ ...formValue.value });
|
||||
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,143 @@
|
||||
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 code = '';
|
||||
public name = '';
|
||||
public iconFileId = '';
|
||||
public route = '';
|
||||
public sortOrder = 0;
|
||||
public unreadKey = '';
|
||||
public enabled = 1;
|
||||
public permission = 'enabled';
|
||||
public createdAt = '';
|
||||
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: 'code',
|
||||
component: 'NInput',
|
||||
label: '编码',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: '请输入模块编码',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
component: 'NInput',
|
||||
label: '名称',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: '请输入模块名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'enabled',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImWorkbenchAppEnabledOptions')),
|
||||
placeholder: '请选择状态',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{ title: '编码', key: 'code', align: 'left', width: 150 },
|
||||
{ title: '名称', key: 'name', align: 'left', width: 140 },
|
||||
{
|
||||
title: '路由',
|
||||
key: 'route',
|
||||
align: 'left',
|
||||
width: 160,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImWorkbenchRouteOptions', row.route) || row.route;
|
||||
},
|
||||
},
|
||||
{ title: '排序', key: 'sortOrder', align: 'left', width: 90 },
|
||||
{ title: '图标ID', key: 'iconFileId', align: 'left', width: 150 },
|
||||
{ title: '角标Key', key: 'unreadKey', align: 'left', width: 130 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'enabled',
|
||||
align: 'left',
|
||||
width: 90,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImWorkbenchAppEnabledOptions', row.enabled);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '权限',
|
||||
key: 'permission',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImWorkbenchPermissionOptions', row.permission) || row.permission;
|
||||
},
|
||||
},
|
||||
{ title: '更新时间', key: 'updatedAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export const rules = {
|
||||
code: { required: true, trigger: ['blur', 'input'], type: 'string', message: '请输入模块编码' },
|
||||
name: { required: true, trigger: ['blur', 'input'], type: 'string', message: '请输入模块名称' },
|
||||
route: { required: true, trigger: ['blur', 'change'], type: 'string', message: '请选择路由' },
|
||||
permission: {
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
type: 'string',
|
||||
message: '请选择权限策略',
|
||||
},
|
||||
};
|
||||
|
||||
export function loadOptions() {
|
||||
dict.loadOptions([
|
||||
'ImWorkbenchAppEnabledOptions',
|
||||
'ImWorkbenchPermissionOptions',
|
||||
'ImWorkbenchRouteOptions',
|
||||
]);
|
||||
}
|
||||
|
||||
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