feat: add IM admin P1 operations
This commit is contained in:
richjohnrambo
@@ -0,0 +1,17 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
export function List(params) {
|
||||
return http.request({ url: '/imExternalConfig/list', method: 'GET', params });
|
||||
}
|
||||
|
||||
export function View(params) {
|
||||
return http.request({ url: '/imExternalConfig/view', method: 'GET', params });
|
||||
}
|
||||
|
||||
export function Update(params) {
|
||||
return http.request({ url: '/imExternalConfig/update', method: 'POST', params });
|
||||
}
|
||||
|
||||
export function Check(params) {
|
||||
return http.request({ url: '/imExternalConfig/check', method: 'POST', params });
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
// 获取IM文件列表
|
||||
export function List(params) {
|
||||
return http.request({
|
||||
url: '/imFile/list',
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取IM文件详情
|
||||
export function View(params) {
|
||||
return http.request({
|
||||
url: '/imFile/view',
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 隔离IM文件
|
||||
export function Quarantine(params) {
|
||||
return http.request({
|
||||
url: '/imFile/quarantine',
|
||||
method: 'POST',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除IM文件
|
||||
export function Delete(params) {
|
||||
return http.request({
|
||||
url: '/imFile/delete',
|
||||
method: 'POST',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 清理IM孤儿文件
|
||||
export function CleanupOrphan(params) {
|
||||
return http.request({
|
||||
url: '/imFile/cleanupOrphan',
|
||||
method: 'POST',
|
||||
params,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { http } from '@/utils/http/axios';
|
||||
|
||||
export function List(params) {
|
||||
return http.request({ url: '/imTaskDashboard/list', method: 'GET', params });
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
preset="dialog"
|
||||
:show-icon="false"
|
||||
:title="'外部服务配置 - ' + serviceLabel"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-form ref="formRef" :model="formValue" label-placement="left" label-width="90">
|
||||
<n-form-item label="服务商">
|
||||
<n-input v-model:value="formValue.provider" placeholder="请输入服务商" />
|
||||
</n-form-item>
|
||||
<n-form-item label="端点">
|
||||
<n-input v-model:value="formValue.endpoint" placeholder="请输入服务端点" />
|
||||
</n-form-item>
|
||||
<n-form-item label="启用">
|
||||
<n-switch v-model:value="enabledValue" />
|
||||
</n-form-item>
|
||||
<n-form-item label="普通配置">
|
||||
<n-input
|
||||
v-model:value="formValue.configJson"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 5, maxRows: 10 }"
|
||||
placeholder="请输入JSON配置"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="敏感配置">
|
||||
<n-input
|
||||
v-model:value="formValue.secretJson"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
placeholder="留空则保持原敏感配置"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm">取消</n-button>
|
||||
<n-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
import { newState, State } from './model';
|
||||
import { Update } from '@/api/imExternalConfig';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const message = useMessage();
|
||||
const dict = useDictStore();
|
||||
const showModal = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const formRef = ref();
|
||||
const formValue = ref<State>(newState(null));
|
||||
const dialogWidth = computed(() => adaModalWidth(760));
|
||||
const serviceLabel = computed(
|
||||
() =>
|
||||
dict.getLabel('ImExternalServiceOptions', formValue.value.service) || formValue.value.service
|
||||
);
|
||||
const enabledValue = computed({
|
||||
get: () => formValue.value.enabled === 1,
|
||||
set: (value: boolean) => {
|
||||
formValue.value.enabled = value ? 1 : 0;
|
||||
},
|
||||
});
|
||||
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
}
|
||||
|
||||
function parseJson(value: string, field: string) {
|
||||
const text = (value || '').trim();
|
||||
if (!text) return null;
|
||||
try {
|
||||
return JSON.parse(text);
|
||||
} catch {
|
||||
throw new Error(`${field}不是合法JSON`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
const configJson = parseJson(formValue.value.configJson || '{}', '普通配置') || {};
|
||||
const secretJson = parseJson(formValue.value.secretJson, '敏感配置');
|
||||
await Update({
|
||||
tenantId: formValue.value.tenantId,
|
||||
service: formValue.value.service,
|
||||
provider: formValue.value.provider,
|
||||
endpoint: formValue.value.endpoint,
|
||||
enabled: formValue.value.enabled,
|
||||
configJson,
|
||||
secretJson,
|
||||
});
|
||||
message.success('操作成功');
|
||||
closeForm();
|
||||
emit('reloadTable');
|
||||
} catch (e: any) {
|
||||
message.error(e.message || '操作失败');
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(state: State) {
|
||||
formValue.value = newState(state);
|
||||
formValue.value.secretJson = '';
|
||||
if (!formValue.value.configJson) formValue.value.configJson = '{}';
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
defineExpose({ openModal });
|
||||
</script>
|
||||
@@ -0,0 +1,133 @@
|
||||
<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.service"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-card>
|
||||
<EditModal ref="editRef" @reload-table="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
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 { Check, List } from '@/api/imExternalConfig';
|
||||
import { columns, loadOptions, loadTenantOptions, schemas, State, tenantOptions } from './model';
|
||||
import { adaTableScrollX } from '@/utils/hotgo';
|
||||
import EditModal from './edit.vue';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const { hasPermission } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
const isPlatformAdmin = computed(() => userStore.isCompanyDept);
|
||||
const actionRef = ref();
|
||||
const searchFormRef = ref<any>({});
|
||||
const editRef = ref();
|
||||
|
||||
const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
|
||||
if (tenantSchema) {
|
||||
tenantSchema.ifShow = () => isPlatformAdmin.value;
|
||||
}
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 170,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: State) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
auth: ['/imExternalConfig/update'],
|
||||
onClick: () => editRef.value.openModal(record),
|
||||
},
|
||||
{
|
||||
label: '检查',
|
||||
type: 'warning',
|
||||
auth: ['/imExternalConfig/check'],
|
||||
onClick: () => handleCheck(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 List(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 handleCheck(record: State) {
|
||||
dialog.warning({
|
||||
title: '检查配置',
|
||||
content: '将执行基础配置完整性检查，是否确认？',
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await Check({ tenantId: record.tenantId, service: record.service });
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,138 @@
|
||||
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 service = '';
|
||||
public provider = '';
|
||||
public endpoint = '';
|
||||
public enabled = 0;
|
||||
public status = '';
|
||||
public configJson = '{}';
|
||||
public secretJson = '';
|
||||
public hasSecret = false;
|
||||
public checkedAt = '';
|
||||
public checkResult = '';
|
||||
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: 'service',
|
||||
component: 'NSelect',
|
||||
label: '服务',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImExternalServiceOptions')),
|
||||
placeholder: '请选择服务',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
component: 'NInput',
|
||||
label: '服务商',
|
||||
componentProps: { placeholder: '请输入服务商' },
|
||||
},
|
||||
{
|
||||
field: 'enabled',
|
||||
component: 'NSelect',
|
||||
label: '启用',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 0 },
|
||||
],
|
||||
placeholder: '请选择启用状态',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: '服务',
|
||||
key: 'service',
|
||||
align: 'left',
|
||||
width: 130,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImExternalServiceOptions', row.service);
|
||||
},
|
||||
},
|
||||
{ title: '服务商', key: 'provider', align: 'left', width: 140 },
|
||||
{ title: '端点', key: 'endpoint', align: 'left', width: 220 },
|
||||
{
|
||||
title: '启用',
|
||||
key: 'enabled',
|
||||
align: 'left',
|
||||
width: 90,
|
||||
render(row: State) {
|
||||
return row.enabled ? '启用' : '停用';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '配置状态',
|
||||
key: 'status',
|
||||
align: 'left',
|
||||
width: 110,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImExternalConfigStatusOptions', row.status);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '敏感配置',
|
||||
key: 'hasSecret',
|
||||
align: 'left',
|
||||
width: 110,
|
||||
render(row: State) {
|
||||
return row.hasSecret ? '已配置' : '未配置';
|
||||
},
|
||||
},
|
||||
{ title: '检查结果', key: 'checkResult', align: 'left', width: 220 },
|
||||
{ title: '检查时间', key: 'checkedAt', align: 'left', width: 180 },
|
||||
{ title: '更新时间', key: 'updatedAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export function loadOptions() {
|
||||
dict.loadOptions(['ImExternalServiceOptions', 'ImExternalConfigStatusOptions']);
|
||||
}
|
||||
|
||||
export async function loadTenantOptions() {
|
||||
const res = await TenantList({ page: 1, perPage: 20 });
|
||||
tenantOptions.value = (res?.list || []).map((item) => ({
|
||||
label: `${item.name}（${item.code}）`,
|
||||
value: item.id,
|
||||
}));
|
||||
return tenantOptions.value;
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
<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"
|
||||
/>
|
||||
<n-space class="table-toolbar">
|
||||
<n-button
|
||||
v-if="hasPermission(['/imFile/cleanupOrphan'])"
|
||||
type="warning"
|
||||
@click="handleCleanupOrphan"
|
||||
>
|
||||
清理孤儿文件
|
||||
</n-button>
|
||||
</n-space>
|
||||
<BasicTable
|
||||
ref="actionRef"
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.tenantId + '-' + row.id"
|
||||
:actionColumn="actionColumn"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-card>
|
||||
<ViewModal ref="viewRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||||
import { useDialog, useMessage } from 'naive-ui';
|
||||
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 { CleanupOrphan, Delete, List, Quarantine } from '@/api/imFile';
|
||||
import { columns, loadOptions, loadTenantOptions, schemas, State, tenantOptions } from './model';
|
||||
import { adaTableScrollX } from '@/utils/hotgo';
|
||||
import ViewModal from './view.vue';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const { hasPermission } = usePermission();
|
||||
const userStore = useUserStore();
|
||||
const isPlatformAdmin = computed(() => userStore.isCompanyDept);
|
||||
const actionRef = ref();
|
||||
const searchFormRef = ref<any>({});
|
||||
const viewRef = ref();
|
||||
|
||||
const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
|
||||
if (tenantSchema) {
|
||||
tenantSchema.ifShow = () => isPlatformAdmin.value;
|
||||
}
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 220,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record: State) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
auth: ['/imFile/view'],
|
||||
onClick: () => viewRef.value.openModal(record),
|
||||
},
|
||||
{
|
||||
label: '隔离',
|
||||
type: 'warning',
|
||||
ifShow: () => record.status === 1,
|
||||
auth: ['/imFile/quarantine'],
|
||||
onClick: () => handleQuarantine(record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'error',
|
||||
ifShow: () => record.status !== 3,
|
||||
auth: ['/imFile/delete'],
|
||||
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)
|
||||
return { list: [], page: 1, pageCount: 0, totalCount: 0 };
|
||||
return await List(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 handleQuarantine(record: State) {
|
||||
dialog.warning({
|
||||
title: '隔离文件',
|
||||
content: '隔离后客户端将无法按正常文件状态访问该资源，是否确认？',
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await Quarantine({ tenantId: record.tenantId, id: record.id, reason: '后台管理员隔离' });
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(record: State) {
|
||||
dialog.error({
|
||||
title: '删除文件',
|
||||
content: '删除会把文件标记为已删除，后续由清理任务处理物理对象，是否确认？',
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
await Delete({ tenantId: record.tenantId, id: record.id, reason: '后台管理员删除' });
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleCleanupOrphan() {
|
||||
const params = searchFormRef.value?.formModel || {};
|
||||
if (isPlatformAdmin.value && !params.tenantId) {
|
||||
message.warning('请先选择租户');
|
||||
return;
|
||||
}
|
||||
dialog.warning({
|
||||
title: '清理孤儿文件',
|
||||
content: '将标记7天前无引用的文件为已删除，单次最多100个，是否确认？',
|
||||
positiveText: '确认',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
const res = await CleanupOrphan({ tenantId: params.tenantId, days: 7, limit: 100 });
|
||||
message.success(`已标记 ${res?.count || 0} 个孤儿文件`);
|
||||
reloadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table-toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { FormSchema } from '@/components/Form';
|
||||
import { defRangeShortcuts } from '@/utils/dateUtil';
|
||||
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 createdAt = '';
|
||||
public updatedAt = '';
|
||||
public userId = 0;
|
||||
public status = 0;
|
||||
public mimeType = '';
|
||||
public size = 0;
|
||||
public etag = '';
|
||||
public location = '';
|
||||
public purpose = '';
|
||||
public linkCount = 0;
|
||||
public firstTopic = '';
|
||||
public firstMsgId = 0;
|
||||
public firstLinkAt = '';
|
||||
public links: any[] = [];
|
||||
|
||||
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: 'fileId',
|
||||
component: 'NInput',
|
||||
label: '文件ID',
|
||||
componentProps: { placeholder: '请输入文件ID' },
|
||||
},
|
||||
{
|
||||
field: 'userId',
|
||||
component: 'NInput',
|
||||
label: '上传用户',
|
||||
componentProps: { placeholder: '请输入上传用户ID' },
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImFileStatusOptions')),
|
||||
placeholder: '请选择状态',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'purpose',
|
||||
component: 'NSelect',
|
||||
label: '用途',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImFilePurposeOptions')),
|
||||
placeholder: '请选择用途',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'mimeType',
|
||||
component: 'NInput',
|
||||
label: 'MIME',
|
||||
componentProps: { placeholder: '请输入MIME类型' },
|
||||
},
|
||||
{
|
||||
field: 'topic',
|
||||
component: 'NInput',
|
||||
label: 'Topic',
|
||||
componentProps: { placeholder: '请输入关联Topic' },
|
||||
},
|
||||
{
|
||||
field: 'updatedAt',
|
||||
component: 'NDatePicker',
|
||||
label: '更新时间',
|
||||
componentProps: {
|
||||
type: 'datetimerange',
|
||||
clearable: true,
|
||||
shortcuts: defRangeShortcuts(),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{ title: '文件ID', key: 'id', align: 'left', width: 180 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
align: 'left',
|
||||
width: 110,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImFileStatusOptions', row.status);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '用途',
|
||||
key: 'purpose',
|
||||
align: 'left',
|
||||
width: 120,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImFilePurposeOptions', row.purpose) || row.purpose;
|
||||
},
|
||||
},
|
||||
{ title: '上传用户', key: 'userId', align: 'left', width: 120 },
|
||||
{ title: 'MIME', key: 'mimeType', align: 'left', width: 180 },
|
||||
{ title: '大小', key: 'size', align: 'left', width: 110 },
|
||||
{ title: '引用数', key: 'linkCount', align: 'left', width: 90 },
|
||||
{ title: '首个Topic', key: 'firstTopic', align: 'left', width: 180 },
|
||||
{ title: '首个消息', key: 'firstMsgId', align: 'left', width: 110 },
|
||||
{ title: '位置', key: 'location', align: 'left', width: 260 },
|
||||
{ title: '创建时间', key: 'createdAt', align: 'left', width: 180 },
|
||||
{ title: '更新时间', key: 'updatedAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export const linkColumns = [
|
||||
{ title: 'ID', key: 'id', align: 'left', width: 90 },
|
||||
{ title: '消息ID', key: 'msgId', align: 'left', width: 100 },
|
||||
{ title: 'Topic', key: 'topic', align: 'left', width: 180 },
|
||||
{ title: '用户ID', key: 'userId', align: 'left', width: 120 },
|
||||
{ title: '创建时间', key: 'createdAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export function loadOptions() {
|
||||
dict.loadOptions(['ImFileStatusOptions', 'ImFilePurposeOptions']);
|
||||
}
|
||||
|
||||
export async function loadTenantOptions() {
|
||||
const res = await TenantList({ page: 1, perPage: 20 });
|
||||
tenantOptions.value = (res?.list || []).map((item) => ({
|
||||
label: `${item.name}（${item.code}）`,
|
||||
value: item.id,
|
||||
}));
|
||||
return tenantOptions.value;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
preset="dialog"
|
||||
:show-icon="false"
|
||||
:title="'文件详情 #' + formValue.id"
|
||||
:style="{ width: dialogWidth }"
|
||||
>
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<n-descriptions label-placement="left" bordered :column="settingStore.isMobile ? 1 : 2">
|
||||
<n-descriptions-item label="租户">{{ formValue.tenantName }}</n-descriptions-item>
|
||||
<n-descriptions-item label="状态">{{ statusLabel }}</n-descriptions-item>
|
||||
<n-descriptions-item label="用途">{{ purposeLabel }}</n-descriptions-item>
|
||||
<n-descriptions-item label="上传用户">{{ formValue.userId || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="MIME">{{ formValue.mimeType }}</n-descriptions-item>
|
||||
<n-descriptions-item label="大小">{{ formValue.size }}</n-descriptions-item>
|
||||
<n-descriptions-item label="ETag">{{ formValue.etag || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="引用数">{{ formValue.linkCount }}</n-descriptions-item>
|
||||
<n-descriptions-item label="创建时间">{{ formValue.createdAt }}</n-descriptions-item>
|
||||
<n-descriptions-item label="更新时间">{{ formValue.updatedAt }}</n-descriptions-item>
|
||||
<n-descriptions-item label="文件位置" :span="2">
|
||||
{{ formValue.location || '-' }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<BasicTable
|
||||
class="link-table"
|
||||
:columns="linkColumns"
|
||||
:dataSource="formValue.links"
|
||||
:pagination="false"
|
||||
:scroll-x="760"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-spin>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { BasicTable } from '@/components/Table';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
import { linkColumns, newState, State } from './model';
|
||||
import { View } from '@/api/imFile';
|
||||
|
||||
const dict = useDictStore();
|
||||
const settingStore = useProjectSettingStore();
|
||||
const showModal = ref(false);
|
||||
const loading = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const dialogWidth = computed(() => adaModalWidth(980));
|
||||
const statusLabel = computed(() => dict.getLabel('ImFileStatusOptions', formValue.value.status));
|
||||
const purposeLabel = computed(
|
||||
() => dict.getLabel('ImFilePurposeOptions', formValue.value.purpose) || formValue.value.purpose
|
||||
);
|
||||
|
||||
function openModal(state: State) {
|
||||
showModal.value = true;
|
||||
formValue.value = newState(state);
|
||||
loading.value = true;
|
||||
View({ tenantId: state.tenantId, id: state.id })
|
||||
.then((res) => {
|
||||
formValue.value = newState(res);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({ openModal });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.link-table {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<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"
|
||||
:scroll-x="scrollX"
|
||||
:resizeHeightOffset="-10000"
|
||||
/>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { BasicTable } from '@/components/Table';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { List } from '@/api/imTaskDashboard';
|
||||
import { columns, loadOptions, loadTenantOptions, schemas, tenantOptions } from './model';
|
||||
import { adaTableScrollX } from '@/utils/hotgo';
|
||||
|
||||
const message = useMessage();
|
||||
const userStore = useUserStore();
|
||||
const isPlatformAdmin = computed(() => userStore.isCompanyDept);
|
||||
const actionRef = ref();
|
||||
const searchFormRef = ref<any>({});
|
||||
|
||||
const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
|
||||
if (tenantSchema) {
|
||||
tenantSchema.ifShow = () => isPlatformAdmin.value;
|
||||
}
|
||||
|
||||
const scrollX = computed(() => adaTableScrollX(columns, 0));
|
||||
|
||||
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 };
|
||||
return await List(params);
|
||||
};
|
||||
|
||||
function reloadTable() {
|
||||
actionRef.value?.reload();
|
||||
}
|
||||
|
||||
async function handleReset() {
|
||||
await setFieldsValue({});
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadOptions();
|
||||
if (isPlatformAdmin.value) {
|
||||
await loadTenantOptions();
|
||||
if (tenantOptions.value.length === 0) {
|
||||
message.warning('暂无可用租户');
|
||||
}
|
||||
}
|
||||
reloadTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,88 @@
|
||||
import { computed, ref } from 'vue';
|
||||
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 tenantCode = '';
|
||||
public tenantState = '';
|
||||
public dbStatus = '';
|
||||
public status = '';
|
||||
public outboxPendingCount = 0;
|
||||
public outboxFailedCount = 0;
|
||||
public groupOutboxPending = 0;
|
||||
public groupOutboxFailed = 0;
|
||||
public orphanFileCount = 0;
|
||||
public deletedFileCount = 0;
|
||||
public lastOutboxCreatedAt = '';
|
||||
public lastGroupEventAt = '';
|
||||
public lastFileUpdatedAt = '';
|
||||
public recommendedNextAction = '';
|
||||
}
|
||||
|
||||
export const schemas = ref<FormSchema[]>([
|
||||
{
|
||||
field: 'tenantId',
|
||||
component: 'NSelect',
|
||||
label: '租户',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => tenantOptions.value),
|
||||
placeholder: '请选择租户',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
options: computed(() => dict.getOptions('ImTaskDashboardStatusOptions')),
|
||||
placeholder: '请选择状态',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const columns = [
|
||||
{ title: '租户', key: 'tenantName', align: 'left', width: 160 },
|
||||
{ title: '企业码', key: 'tenantCode', align: 'left', width: 120 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
align: 'left',
|
||||
width: 110,
|
||||
render(row: State) {
|
||||
return dict.getLabel('ImTaskDashboardStatusOptions', row.status);
|
||||
},
|
||||
},
|
||||
{ title: 'DB', key: 'dbStatus', align: 'left', width: 90 },
|
||||
{ title: '业务待投递', key: 'outboxPendingCount', align: 'left', width: 110 },
|
||||
{ title: '业务失败', key: 'outboxFailedCount', align: 'left', width: 100 },
|
||||
{ title: '群待投递', key: 'groupOutboxPending', align: 'left', width: 100 },
|
||||
{ title: '群失败', key: 'groupOutboxFailed', align: 'left', width: 90 },
|
||||
{ title: '孤儿文件', key: 'orphanFileCount', align: 'left', width: 100 },
|
||||
{ title: '待物理清理', key: 'deletedFileCount', align: 'left', width: 110 },
|
||||
{ title: '建议动作', key: 'recommendedNextAction', align: 'left', width: 220 },
|
||||
{ title: '最新业务事件', key: 'lastOutboxCreatedAt', align: 'left', width: 180 },
|
||||
{ title: '最新群事件', key: 'lastGroupEventAt', align: 'left', width: 180 },
|
||||
{ title: '最新文件更新', key: 'lastFileUpdatedAt', align: 'left', width: 180 },
|
||||
];
|
||||
|
||||
export function loadOptions() {
|
||||
dict.loadOptions(['ImTaskDashboardStatusOptions']);
|
||||
}
|
||||
|
||||
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