yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: system views code style

pull/78/head
xingyu4j 2025-04-22 11:25:11 +08:00
parent 4e1d6812ff
commit da3fd5b718
84 changed files with 1200 additions and 624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web-antd/src/views/system/area/data.ts
View File

@ -1,10 +1,7 @@
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { SystemAreaApi } from '#/api/system/area';
import { z } from '#/adapter/form';
import { useAccess } from '@vben/access';
import type { VbenFormSchema } from '#/adapter/form';
import type { SystemAreaApi } from '#/api/system/area';
/** 查询 IP 的表单 */
export function useFormSchema(): VbenFormSchema[] {
@ -25,7 +22,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '展示查询 IP 结果',
readonly: true,
}
},
},
];
}

7
apps/web-antd/src/views/system/area/index.vue
View File

@ -2,15 +2,16 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Search } from '@vben/icons';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAreaTree } from '#/api/system/area';
import { DocAlert } from '#/components/doc-alert';
import { useGridColumns } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,

9
apps/web-antd/src/views/system/area/modules/form.vue
View File

@ -1,16 +1,15 @@
<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { getAreaByIp } from '#/api/system/area';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, { setFieldValue, setValues, validate, getValues }] = useVbenForm({
const [Form, { setFieldValue, validate, getValues }] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
@ -36,7 +35,7 @@ const [Modal, modalApi] = useVbenModal({
} finally {
modalApi.lock(false);
}
}
},
});
</script>

17
apps/web-antd/src/views/system/dept/data.ts
View File

@ -1,15 +1,17 @@
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { getDeptList } from '#/api/system/dept';
import { getSimpleUserList } from '#/api/system/user';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { handleTree } from '#/utils/tree';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
@ -93,7 +95,7 @@ export function useFormSchema(): VbenFormSchema[] {
rules: z
.string()
// TODO @芋艿：未来怎么拓展一个手机的
.regex(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/, '请输入正确的手机号码')
.regex(/^1[3-9|]\d{9}$/, '请输入正确的手机号码')
.optional(),
},
{
@ -103,10 +105,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入邮箱',
},
rules: z
.string()
.email('请输入正确的邮箱地址')
.optional(),
rules: z.string().email('请输入正确的邮箱地址').optional(),
},
{
fieldName: 'status',
@ -141,7 +140,9 @@ export function useGridColumns(
title: '负责人',
minWidth: 150,
formatter: (row) => {
return userList.find((user) => user.id === row.cellValue)?.nickname || '-';
return (
userList.find((user) => user.id === row.cellValue)?.nickname || '-'
);
},
},
{

37
apps/web-antd/src/views/system/dept/index.vue
View File

@ -1,18 +1,23 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { ref } from 'vue';
import { $t } from '#/locales';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeptList, deleteDept } from '#/api/system/dept';
import { deleteDept, getDeptList } from '#/api/system/dept';
import { $t } from '#/locales';
import { useGridColumns } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -60,7 +65,7 @@ async function onDelete(row: SystemDeptApi.SystemDept) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -75,14 +80,14 @@ function onActionClick({
onAppend(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -123,7 +128,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="部门列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:dept:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:dept:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['部门']) }}
</Button>

8
apps/web-antd/src/views/system/dept/modules/form.vue
View File

@ -1,13 +1,15 @@
<script lang="ts" setup>
import type { SystemDeptApi } from '#/api/system/dept';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { createDept, updateDept, getDept } from '#/api/system/dept';
import { createDept, getDept, updateDept } from '#/api/system/dept';
import { $t } from '#/locales';
import { useFormSchema } from '../data';

17
apps/web-antd/src/views/system/dict/index.vue
View File

@ -1,14 +1,17 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { Page } from '@vben/common-ui'
import { DocAlert } from '#/components/doc-alert'
import TypeGrid from './modules/type-grid.vue'
import DataGrid from './modules/data-grid.vue'
import { ref } from 'vue';
const searchDictType = ref<string>() // 搜索的字典类型
import { Page } from '@vben/common-ui';
import { DocAlert } from '#/components/doc-alert';
import DataGrid from './modules/data-grid.vue';
import TypeGrid from './modules/type-grid.vue';
const searchDictType = ref<string>(); // 搜索的字典类型
function onDictTypeSelect(dictType: string) {
searchDictType.value = dictType
searchDictType.value = dictType;
}
</script>

21
apps/web-antd/src/views/system/dict/modules/data-form.vue
View File

@ -1,12 +1,18 @@
<script lang="ts" setup>
import type { SystemDictDataApi } from '#/api/system/dict/data';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createDictData, getDictData, updateDictData } from '#/api/system/dict/data';
import {
createDictData,
getDictData,
updateDictData,
} from '#/api/system/dict/data';
import { $t } from '#/locales';
import { useDataFormSchema } from '../data';
@ -35,7 +41,8 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemDictDataApi.SystemDictData;
const data =
(await formApi.getValues()) as SystemDictDataApi.SystemDictData;
try {
await (formData.value?.id ? updateDictData(data) : createDictData(data));
// 关闭并提示
@ -54,8 +61,10 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<SystemDictDataApi.SystemDictData | { dictType?: string }>();
const data = modalApi.getData<
SystemDictDataApi.SystemDictData | { dictType?: string }
>();
// 如果有ID，表示是编辑
if (data && 'id' in data && data.id) {
modalApi.lock();
@ -82,4 +91,4 @@ const [Modal, modalApi] = useVbenModal({
<Modal :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>
</template>

53
apps/web-antd/src/views/system/dict/modules/data-grid.vue
View File

@ -1,18 +1,25 @@
<script lang="ts" setup>
import type { OnActionClickParams } from '#/adapter/vxe-table';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Download, Plus } from '@vben/icons';
import DataForm from './data-form.vue';
import { $t } from '#/locales';
import { watch } from 'vue';
import { useDataGridColumns, useDataGridFormSchema } from '../data';
import { deleteDictData, getDictDataPage, exportDictData } from '#/api/system/dict/data';
import { useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteDictData,
exportDictData,
getDictDataPage,
} from '#/api/system/dict/data';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useDataGridColumns, useDataGridFormSchema } from '../data';
import DataForm from './data-form.vue';
const props = defineProps({
dictType: {
type: String,
@ -66,17 +73,14 @@ async function onDelete(row: any) {
}
/** 表格操作按钮回调 */
function onActionClick({
code,
row,
}: OnActionClickParams) {
function onActionClick({ code, row }: OnActionClickParams) {
switch (code) {
case 'edit': {
onEdit(row);
case 'delete': {
onDelete(row);
break;
}
case 'delete': {
onDelete(row)
case 'edit': {
onEdit(row);
break;
}
}
@ -108,7 +112,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
toolbarConfig: {
refresh: { code: 'query' },
search: true,
}
},
},
});
@ -124,16 +128,25 @@ watch(
</script>
<template>
<div class="h-full flex flex-col">
<div class="flex h-full flex-col">
<DataFormModal @success="onRefresh" />
<Grid table-title="字典数据列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:dict:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['字典数据']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:dict:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

13
apps/web-antd/src/views/system/dict/modules/type-form.vue
View File

@ -1,12 +1,18 @@
<script lang="ts" setup>
import type { SystemDictTypeApi } from '#/api/system/dict/type';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createDictType, getDictType, updateDictType } from '#/api/system/dict/type';
import {
createDictType,
getDictType,
updateDictType,
} from '#/api/system/dict/type';
import { $t } from '#/locales';
import { useTypeFormSchema } from '../data';
@ -33,7 +39,8 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemDictTypeApi.SystemDictType;
const data =
(await formApi.getValues()) as SystemDictTypeApi.SystemDictType;
try {
await (formData.value?.id ? updateDictType(data) : createDictType(data));
// 关闭并提示

44
apps/web-antd/src/views/system/dict/modules/type-grid.vue
View File

@ -3,15 +3,21 @@ import type { OnActionClickParams } from '#/adapter/vxe-table';
import type { SystemDictTypeApi } from '#/api/system/dict/type';
import { useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Download, Plus } from '@vben/icons';
import TypeForm from './type-form.vue';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteDictType,
exportDictType,
getDictTypePage,
} from '#/api/system/dict/type';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useTypeGridColumns, useTypeGridFormSchema } from '../data';
import { $t } from '#/locales';
import { deleteDictType, getDictTypePage, exportDictType } from '#/api/system/dict/type';
import { downloadByData } from '#/utils/download';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import TypeForm from './type-form.vue';
const emit = defineEmits(['select']);
@ -61,19 +67,16 @@ async function onDelete(row: SystemDictTypeApi.SystemDictType) {
}
/** 表格操作按钮回调 */
function onActionClick({
code,
row,
}: OnActionClickParams) {
function onActionClick({ code, row }: OnActionClickParams) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -122,11 +125,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Grid table-title="字典类型列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:dict:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:dict:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['字典类型']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:dict:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:dict:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

5
apps/web-antd/src/views/system/loginlog/data.ts
View File

@ -2,10 +2,11 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemLoginLogApi } from '#/api/system/login-log';
import { DICT_TYPE } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */

23
apps/web-antd/src/views/system/loginlog/index.vue
View File

@ -1,19 +1,23 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemLoginLogApi } from '#/api/system/login-log';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download } from '@vben/icons';
import { Button } from 'ant-design-vue';
import { DocAlert } from '#/components/doc-alert';
import Detail from './modules/detail.vue';
import { $t } from '#/locales';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportLoginLog, getLoginLogPage } from '#/api/system/login-log';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
@ -86,11 +90,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DetailModal @success="onRefresh" />
<Grid table-title="登录日志列表">
<template #toolbar-tools>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:login-log:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:login-log:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
</template>
</Grid>
</Page>
</template>
</template>

35
apps/web-antd/src/views/system/loginlog/modules/detail.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemLoginLogApi } from '#/api/system/login-log';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const formData = ref<SystemLoginLogApi.SystemLoginLog>();
@ -32,13 +34,27 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="登录日志详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
<Descriptions bordered :column="1" size="middle" class="mx-4" :label-style="{ width: '110px' }">
<Modal
title="登录日志详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions
bordered
:column="1"
size="middle"
class="mx-4"
:label-style="{ width: '110px' }"
>
<Descriptions.Item label="日志编号">
{{ formData?.id }}
</Descriptions.Item>
<Descriptions.Item label="操作类型">
<DictTag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="formData?.logType" />
<DictTag
:type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
:value="formData?.logType"
/>
</Descriptions.Item>
<Descriptions.Item label="用户名称">
{{ formData?.username }}
@ -50,7 +66,10 @@ const [Modal, modalApi] = useVbenModal({
{{ formData?.userAgent }}
</Descriptions.Item>
<Descriptions.Item label="登录结果">
<DictTag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="formData?.result" />
<DictTag
:type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
:value="formData?.result"
/>
</Descriptions.Item>
<Descriptions.Item label="登录日期">
{{ formatDateTime(formData?.createTime || '') }}

13
apps/web-antd/src/views/system/mail/account/data.ts
View File

@ -2,9 +2,10 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMailAccountApi } from '#/api/system/mail/account';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
@ -94,7 +95,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
}
},
},
];
}
@ -109,7 +110,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入邮箱',
clearable: true,
}
},
},
{
fieldName: 'username',
@ -118,8 +119,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入用户名',
clearable: true,
}
}
},
},
];
}
@ -198,7 +199,7 @@ export function useGridColumns<T = SystemMailAccountApi.SystemMailAccount>(
{
code: 'delete',
show: hasAccessByCodes(['system:mail-account:delete']),
}
},
],
},
},

25
apps/web-antd/src/views/system/mail/account/index.vue
View File

@ -1,18 +1,25 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemMailAccountApi } from '#/api/system/mail/account';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMailAccount, getMailAccountPage } from '#/api/system/mail/account';
import {
deleteMailAccount,
getMailAccountPage,
} from '#/api/system/mail/account';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -106,7 +113,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="邮箱账号列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:mail-account:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:mail-account:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['邮箱账号']) }}
</Button>

23
apps/web-antd/src/views/system/mail/account/modules/form.vue
View File

@ -1,13 +1,19 @@
<script lang="ts" setup>
import type { SystemMailAccountApi } from '#/api/system/mail/account';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createMailAccount, getMailAccount, updateMailAccount,} from '#/api/system/mail/account';
import {
createMailAccount,
getMailAccount,
updateMailAccount,
} from '#/api/system/mail/account';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -24,8 +30,8 @@ const [Form, formApi] = useVbenForm({
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 140
}
labelWidth: 140,
},
});
const [Modal, modalApi] = useVbenModal({
@ -36,9 +42,12 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemMailAccountApi.SystemMailAccount;
const data =
(await formApi.getValues()) as SystemMailAccountApi.SystemMailAccount;
try {
await (formData.value?.id ? updateMailAccount(data) : createMailAccount(data));
await (formData.value?.id
? updateMailAccount(data)
: createMailAccount(data));
// 关闭并提示
await modalApi.close();
emit('success');

13
apps/web-antd/src/views/system/mail/log/data.ts
View File

@ -2,11 +2,12 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMailLogApi } from '#/api/system/mail/log';
import { getSimpleMailAccountList } from '#/api/system/mail/account';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { getSimpleMailAccountList } from '#/api/system/mail/account';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
@ -28,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
allowClear: true,
placeholder: '请输入用户编号',
}
},
},
{
fieldName: 'userType',
@ -69,7 +70,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
allowClear: true,
placeholder: '请输入模板编号',
}
},
},
];
}
@ -142,7 +143,7 @@ export function useGridColumns<T = SystemMailLogApi.SystemMailLog>(
code: 'detail',
text: '查看',
show: hasAccessByCodes(['system:mail-log:query']),
}
},
],
},
},

9
apps/web-antd/src/views/system/mail/log/index.vue
View File

@ -1,15 +1,18 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemMailLogApi } from '#/api/system/mail/log';
import { Page, useVbenModal } from '@vben/common-ui';
import Detail from './modules/detail.vue';
import { DocAlert } from '#/components/doc-alert';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getMailLogPage } from '#/api/system/mail/log';
import { DocAlert } from '#/components/doc-alert';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,

22
apps/web-antd/src/views/system/mail/log/modules/detail.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemMailLogApi } from '#/api/system/mail/log';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const formData = ref<SystemMailLogApi.SystemMailLog>();
@ -32,7 +34,12 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="邮件日志详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
<Modal
title="邮件日志详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<div class="p-4">
<Descriptions :column="2" bordered :label-style="{ width: '140px' }">
<Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
@ -64,7 +71,10 @@ const [Modal, modalApi] = useVbenModal({
<div v-html="formData?.templateContent"></div>
</Descriptions.Item>
<Descriptions.Item label="发送状态">
<DictTag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="formData?.sendStatus" />
<DictTag
:type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS"
:value="formData?.sendStatus"
/>
</Descriptions.Item>
<Descriptions.Item label="发送时间">
{{ formatDateTime(formData?.sendTime || '') }}

9
apps/web-antd/src/views/system/mail/template/data.ts
View File

@ -2,14 +2,14 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMailTemplateApi } from '#/api/system/mail/template';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { getSimpleMailAccountList } from '#/api/system/mail/account';
import { CommonStatusEnum } from '#/utils/constants';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
@ -193,7 +193,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
const accountList = await getSimpleMailAccountList();
export function useGridColumns<T = SystemMailTemplateApi.SystemMailTemplate>(
onActionClick: OnActionClickFn<T>
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
@ -220,7 +220,8 @@ export function useGridColumns<T = SystemMailTemplateApi.SystemMailTemplate>(
field: 'accountId',
title: '邮箱账号',
minWidth: 120,
formatter: ({ cellValue }) => accountList.find((account) => account.id === cellValue)?.mail || '-',
formatter: ({ cellValue }) =>
accountList.find((account) => account.id === cellValue)?.mail || '-',
},
{
field: 'nickname',

36
apps/web-antd/src/views/system/mail/template/index.vue
View File

@ -1,19 +1,26 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemMailTemplateApi } from '#/api/system/mail/template';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { DocAlert } from '#/components/doc-alert';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMailTemplate, getMailTemplatePage } from '#/api/system/mail/template';
import {
deleteMailTemplate,
getMailTemplatePage,
} from '#/api/system/mail/template';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -65,16 +72,19 @@ async function onDelete(row: SystemMailTemplateApi.SystemMailTemplate) {
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<SystemMailTemplateApi.SystemMailTemplate>) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemMailTemplateApi.SystemMailTemplate>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'send': {
onSend(row);
break;
@ -119,7 +129,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
<SendModal />
<Grid table-title="邮件模板列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:mail-template:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:mail-template:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['邮件模板']) }}
</Button>

19
apps/web-antd/src/views/system/mail/template/modules/form.vue
View File

@ -1,13 +1,19 @@
<script lang="ts" setup>
import type { SystemMailTemplateApi } from '#/api/system/mail/template';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '#/locales';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createMailTemplate, getMailTemplate, updateMailTemplate} from '#/api/system/mail/template';
import {
createMailTemplate,
getMailTemplate,
updateMailTemplate,
} from '#/api/system/mail/template';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -33,9 +39,12 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemMailTemplateApi.SystemMailTemplate;
const data =
(await formApi.getValues()) as SystemMailTemplateApi.SystemMailTemplate;
try {
await (formData.value?.id ? updateMailTemplate(data) : createMailTemplate(data));
await (formData.value?.id
? updateMailTemplate(data)
: createMailTemplate(data));
// 关闭并提示
await modalApi.close();
emit('success');

4
apps/web-antd/src/views/system/mail/template/modules/send-form.vue
View File

@ -1,10 +1,12 @@
<script lang="ts" setup>
import type { SystemMailTemplateApi } from '#/api/system/mail/template';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { sendMail } from '#/api/system/mail/template';

50
apps/web-antd/src/views/system/menu/data.ts
View File

@ -1,20 +1,22 @@
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMenuApi } from '#/api/system/menu';
import type { VbenFormSchema } from '#/adapter/form';
import type { Recordable } from '@vben/types';
import { IconifyIcon } from '@vben/icons';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMenuApi } from '#/api/system/menu';
import { $t } from '#/locales';
import { h } from 'vue';
import { useAccess } from '@vben/access';
import { IconifyIcon } from '@vben/icons';
import { isHttpUrl } from '@vben/utils';
import { z } from '#/adapter/form';
import { componentKeys } from '#/router/routes';
import { getMenuList } from '#/api/system/menu';
import { $t } from '#/locales';
import { componentKeys } from '#/router/routes';
import { CommonStatusEnum, SystemMenuTypeEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { handleTree } from '#/utils/tree';
import { CommonStatusEnum, SystemMenuTypeEnum } from '#/utils/constants';
import { isHttpUrl } from '@vben/utils';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
@ -62,7 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
rules: 'selectRequired',
renderComponentContent() {
return {
title({ label, icon }: { label: string; icon: string }) {
title({ label, icon }: { icon: string; label: string }) {
const components = [];
if (!label) return '';
if (icon) {
@ -106,7 +108,9 @@ export function useFormSchema(): VbenFormSchema[] {
dependencies: {
triggerFields: ['type'],
show: (values) => {
return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(values.type);
return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(
values.type,
);
},
},
},
@ -122,7 +126,9 @@ export function useFormSchema(): VbenFormSchema[] {
dependencies: {
triggerFields: ['type', 'parentId'],
show: (values) => {
return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(values.type);
return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(
values.type,
);
},
rules: (values) => {
const schema = z.string().min(1, '路由地址不能为空');
@ -130,11 +136,17 @@ export function useFormSchema(): VbenFormSchema[] {
return schema;
}
if (values.parentId === 0) {
return schema.refine((path) => path.charAt(0) === '/', '路径必须以 / 开头');
return schema.refine(
(path) => path.charAt(0) === '/',
'路径必须以 / 开头',
);
}
return schema.refine((path) => path.charAt(0) !== '/', '路径不能以 / 开头');
return schema.refine(
(path) => path.charAt(0) !== '/',
'路径不能以 / 开头',
);
},
}
},
},
{
fieldName: 'component',
@ -147,7 +159,7 @@ export function useFormSchema(): VbenFormSchema[] {
triggerFields: ['type'],
show: (values) => {
return [SystemMenuTypeEnum.MENU].includes(values.type);
}
},
},
},
{
@ -167,7 +179,7 @@ export function useFormSchema(): VbenFormSchema[] {
triggerFields: ['type'],
show: (values) => {
return [SystemMenuTypeEnum.MENU].includes(values.type);
}
},
},
},
{
@ -179,7 +191,7 @@ export function useFormSchema(): VbenFormSchema[] {
},
dependencies: {
show: (values) => {
return [SystemMenuTypeEnum.MENU, SystemMenuTypeEnum.BUTTON].includes(
return [SystemMenuTypeEnum.BUTTON, SystemMenuTypeEnum.MENU].includes(
values.type,
);
},
@ -253,7 +265,7 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
},
]
];
}
/** 列表的字段 */

48
apps/web-antd/src/views/system/menu/index.vue
View File

@ -1,20 +1,25 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemMenuApi } from '#/api/system/menu';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { IconifyIcon, Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { ref } from 'vue';
import { $t } from '#/locales';
import { Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getMenuList, deleteMenu } from '#/api/system/menu';
import { deleteMenu, getMenuList } from '#/api/system/menu';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { SystemMenuTypeEnum } from '#/utils/constants';
import { useGridColumns } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -55,29 +60,29 @@ async function onDelete(row: SystemMenuApi.SystemMenu) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
code,
row,
}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
switch (code) {
case 'append': {
onAppend(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -121,13 +126,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<DocAlert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
<DocAlert
title="功能权限"
url="https://doc.iocoder.cn/resource-permission"
/>
<DocAlert title="菜单路由" url="https://doc.iocoder.cn/vue3/route/" />
<FormModal @success="onRefresh" />
<Grid>
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:menu:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:menu:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['菜单']) }}
</Button>

8
apps/web-antd/src/views/system/menu/modules/form.vue
View File

@ -1,14 +1,16 @@
<script lang="ts" setup>
import type { SystemMenuApi } from '#/api/system/menu';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createMenu, getMenu, updateMenu } from '#/api/system/menu';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createMenu, getMenu, updateMenu } from '#/api/system/menu';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);

14
apps/web-antd/src/views/system/notice/data.ts
View File

@ -1,11 +1,13 @@
import {type VbenFormSchema, z} from '#/adapter/form';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNoticeApi } from '#/api/system/notice';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { CommonStatusEnum } from '#/utils/constants';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
@ -59,7 +61,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
}
},
},
];
}
@ -74,7 +76,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入公告标题',
allowClear: true,
}
},
},
{
fieldName: 'status',
@ -85,7 +87,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
placeholder: '请选择公告状态',
allowClear: true,
},
}
},
];
}

37
apps/web-antd/src/views/system/notice/index.vue
View File

@ -1,16 +1,21 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemNoticeApi } from '#/api/system/notice';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getNoticePage, deleteNotice, pushNotice } from '#/api/system/notice';
import { deleteNotice, getNoticePage, pushNotice } from '#/api/system/notice';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -46,7 +51,7 @@ async function onDelete(row: SystemNoticeApi.SystemNotice) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -64,7 +69,7 @@ async function onPush(row: SystemNoticeApi.SystemNotice) {
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} catch (error) {
} catch {
hideLoading();
}
}
@ -75,14 +80,14 @@ function onActionClick({
row,
}: OnActionClickParams<SystemNoticeApi.SystemNotice>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'push': {
onPush(row);
break;
@ -92,7 +97,7 @@ function onActionClick({
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema()
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
@ -125,11 +130,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="公告列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:notice:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:notice:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['公告']) }}
</Button>
</template>
</Grid>
</Page>
</template>
</template>

6
apps/web-antd/src/views/system/notice/modules/form.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemNoticeApi } from '#/api/system/notice';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createNotice, updateNotice, getNotice } from '#/api/system/notice';
import { createNotice, getNotice, updateNotice } from '#/api/system/notice';
import { $t } from '#/locales';
import { useFormSchema } from '../data';

9
apps/web-antd/src/views/system/notify/message/data.ts
View File

@ -2,11 +2,11 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { useAccess } from '@vben/access';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
@ -45,7 +45,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '模版类型',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, 'number'),
options: getDictOptions(
DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
'number',
),
allowClear: true,
placeholder: '请选择模版类型',
},

9
apps/web-antd/src/views/system/notify/message/index.vue
View File

@ -1,15 +1,18 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { Page, useVbenModal } from '@vben/common-ui';
import { DocAlert } from '#/components/doc-alert';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getNotifyMessagePage } from '#/api/system/notify/message';
import Detail from './modules/detail.vue';
import { DocAlert } from '#/components/doc-alert';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,

27
apps/web-antd/src/views/system/notify/message/modules/detail.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const formData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
@ -32,7 +34,12 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="站内信详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
<Modal
title="站内信详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions bordered :column="1" size="middle" class="mx-4">
<Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
<Descriptions.Item label="用户类型">
@ -57,10 +64,16 @@ const [Modal, modalApi] = useVbenModal({
{{ formData?.templateParams }}
</Descriptions.Item>
<Descriptions.Item label="模版类型">
<DictTag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="formData?.templateType" />
<DictTag
:type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
:value="formData?.templateType"
/>
</Descriptions.Item>
<Descriptions.Item label="是否已读">
<DictTag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.readStatus" />
<DictTag
:type="DICT_TYPE.INFRA_BOOLEAN_STRING"
:value="formData?.readStatus"
/>
</Descriptions.Item>
<Descriptions.Item label="阅读时间">
{{ formatDateTime(formData?.readTime || '') }}

13
apps/web-antd/src/views/system/notify/my/index.vue
View File

@ -8,9 +8,8 @@ import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { Page, useVbenModal } from '@vben/common-ui';
import { MdiCheckboxMarkedCircleOutline } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import Detail from './modules/detail.vue';
import { DocAlert } from '#/components/doc-alert';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -18,8 +17,10 @@ import {
updateAllNotifyMessageRead,
updateNotifyMessageRead,
} from '#/api/system/notify/message';
import { DocAlert } from '#/components/doc-alert';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
@ -67,7 +68,9 @@ async function onMarkRead() {
return;
}
const ids = rows.map((row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id);
const ids = rows.map(
(row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id,
);
message.loading({
content: '正在标记已读...',
duration: 0,
@ -146,7 +149,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
search: true,
},
checkboxConfig: {
checkMethod: (params: { row: SystemNotifyMessageApi.SystemNotifyMessage }) => !params.row.readStatus,
checkMethod: (params: {
row: SystemNotifyMessageApi.SystemNotifyMessage;
}) => !params.row.readStatus,
highlight: true,
},
} as VxeTableGridOptions<SystemNotifyMessageApi.SystemNotifyMessage>,

26
apps/web-antd/src/views/system/notify/my/modules/detail.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const formData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
@ -32,7 +34,11 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="消息详情" :show-cancel-button="false" :show-confirm-button="false">
<Modal
title="消息详情"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions bordered :column="1" size="middle" class="mx-4">
<Descriptions.Item label="发送人">
{{ formData?.templateNickname }}
@ -41,10 +47,16 @@ const [Modal, modalApi] = useVbenModal({
{{ formatDateTime(formData?.createTime) }}
</Descriptions.Item>
<Descriptions.Item label="消息类型">
<DictTag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="formData?.templateType" />
<DictTag
:type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
:value="formData?.templateType"
/>
</Descriptions.Item>
<Descriptions.Item label="是否已读">
<DictTag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.readStatus" />
<DictTag
:type="DICT_TYPE.INFRA_BOOLEAN_STRING"
:value="formData?.readStatus"
/>
</Descriptions.Item>
<Descriptions.Item label="阅读时间">
{{ formatDateTime(formData?.readTime || '') }}

15
apps/web-antd/src/views/system/notify/template/data.ts
View File

@ -2,11 +2,12 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
@ -191,9 +192,9 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemNotifyTemplateApi.SystemNotifyTemplate>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns<
T = SystemNotifyTemplateApi.SystemNotifyTemplate,
>(onActionClick: OnActionClickFn<T>): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
@ -267,8 +268,8 @@ export function useGridColumns<T = SystemNotifyTemplateApi.SystemNotifyTemplate>
code: 'edit',
show: hasAccessByCodes(['system:notify-template:update']),
},
{
code: 'send',
{
code: 'send',
text: '测试',
show: hasAccessByCodes(['system:notify-template:send-notify']),
},

43
apps/web-antd/src/views/system/notify/template/index.vue
View File

@ -1,20 +1,28 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteNotifyTemplate, exportNotifyTemplate, getNotifyTemplatePage } from '#/api/system/notify/template';
import {
deleteNotifyTemplate,
exportNotifyTemplate,
getNotifyTemplatePage,
} from '#/api/system/notify/template';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -77,14 +85,14 @@ function onActionClick({
row,
}: OnActionClickParams<SystemNotifyTemplateApi.SystemNotifyTemplate>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'send': {
onSend(row);
break;
@ -130,11 +138,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<SendModal />
<Grid table-title="站内信模板列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:notify-template:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:notify-template:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['站内信模板']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:notify-template:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:notify-template:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

22
apps/web-antd/src/views/system/notify/template/modules/form.vue
View File

@ -1,13 +1,19 @@
<script lang="ts" setup>
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createNotifyTemplate, getNotifyTemplate, updateNotifyTemplate } from '#/api/system/notify/template';
import {
createNotifyTemplate,
getNotifyTemplate,
updateNotifyTemplate,
} from '#/api/system/notify/template';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -33,9 +39,12 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemNotifyTemplateApi.SystemNotifyTemplate;
const data =
(await formApi.getValues()) as SystemNotifyTemplateApi.SystemNotifyTemplate;
try {
await (formData.value?.id ? updateNotifyTemplate(data) : createNotifyTemplate(data));
await (formData.value?.id
? updateNotifyTemplate(data)
: createNotifyTemplate(data));
// 关闭并提示
await modalApi.close();
emit('success');
@ -52,7 +61,8 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
const data =
modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
if (!data || !data.id) {
return;
}

9
apps/web-antd/src/views/system/notify/template/modules/send-form.vue
View File

@ -1,10 +1,12 @@
<script lang="ts" setup>
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { sendNotify } from '#/api/system/notify/template';
import { $t } from '#/locales';
@ -65,7 +67,8 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 获取数据
const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
const data =
modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
if (!data || !data.id) {
return;
}
@ -93,7 +96,7 @@ const buildFormSchema = () => {
rules: 'required',
componentProps: {
placeholder: `请输入参数 ${param}`,
}
},
});
});
}

15
apps/web-antd/src/views/system/oauth2/client/data.ts
View File

@ -1,11 +1,13 @@
import { type VbenFormSchema, z } from '#/adapter/form';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { CommonStatusEnum } from '#/utils/constants';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
@ -62,7 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Textarea',
componentProps: {
placeholder: '请输入应用描述',
}
},
},
{
fieldName: 'status',
@ -130,7 +132,7 @@ export function useFormSchema(): VbenFormSchema[] {
mode: 'multiple',
class: 'w-full',
// TODO @芋艿：根据权限，自动授权范围
}
},
},
{
fieldName: 'redirectUris',
@ -160,7 +162,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
mode: 'tags',
placeholder: '请输入资源',
mode: 'tags',
class: 'w-full',
},
},
@ -184,7 +185,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Input',
componentProps: {
placeholder: '请输入应用名',
}
},
},
{
fieldName: 'status',

43
apps/web-antd/src/views/system/oauth2/client/index.vue
View File

@ -1,17 +1,25 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getOAuth2ClientPage, deleteOAuth2Client } from '#/api/system/oauth2/client';
import {
deleteOAuth2Client,
getOAuth2ClientPage,
} from '#/api/system/oauth2/client';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -47,7 +55,7 @@ async function onDelete(row: SystemOAuth2ClientApi.SystemOAuth2Client) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -58,20 +66,20 @@ function onActionClick({
row,
}: OnActionClickParams<SystemOAuth2ClientApi.SystemOAuth2Client>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema()
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
@ -101,12 +109,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<DocAlert title="OAuth 2.0（SSO 单点登录)" url="https://doc.iocoder.cn/oauth2/" />
<DocAlert
title="OAuth 2.0（SSO 单点登录)"
url="https://doc.iocoder.cn/oauth2/"
/>
<FormModal @success="onRefresh" />
<Grid table-title="OAuth2 客户端列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:oauth2-client:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:oauth2-client:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', [' OAuth2.0 客户端']) }}
</Button>

19
apps/web-antd/src/views/system/oauth2/client/modules/form.vue
View File

@ -1,12 +1,18 @@
<script lang="ts" setup>
import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createOAuth2Client, updateOAuth2Client, getOAuth2Client } from '#/api/system/oauth2/client';
import {
createOAuth2Client,
getOAuth2Client,
updateOAuth2Client,
} from '#/api/system/oauth2/client';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -25,7 +31,7 @@ const [Form, formApi] = useVbenForm({
showDefaultActions: false,
commonConfig: {
labelWidth: 140,
}
},
});
const [Modal, modalApi] = useVbenModal({
@ -36,9 +42,12 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemOAuth2ClientApi.SystemOAuth2Client;
const data =
(await formApi.getValues()) as SystemOAuth2ClientApi.SystemOAuth2Client;
try {
await (formData.value?.id ? updateOAuth2Client(data) : createOAuth2Client(data));
await (formData.value?.id
? updateOAuth2Client(data)
: createOAuth2Client(data));
// 关闭并提示
await modalApi.close();
emit('success');

7
apps/web-antd/src/views/system/oauth2/token/data.ts
View File

@ -2,9 +2,10 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
@ -16,7 +17,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Input',
componentProps: {
placeholder: '请输入用户编号',
}
},
},
{
fieldName: 'userType',
@ -33,7 +34,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Input',
componentProps: {
placeholder: '请输入客户端编号',
}
},
},
];
}

27
apps/web-antd/src/views/system/oauth2/token/index.vue
View File

@ -1,14 +1,22 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
import { Page } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getOAuth2TokenPage, deleteOAuth2Token } from '#/api/system/oauth2/token';
import {
deleteOAuth2Token,
getOAuth2TokenPage,
} from '#/api/system/oauth2/token';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
/** 刷新表格 */
@ -30,7 +38,7 @@ async function onDelete(row: SystemOAuth2TokenApi.SystemOAuth2Token) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -50,7 +58,7 @@ function onActionClick({
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema()
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
@ -80,7 +88,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<DocAlert title="OAuth 2.0（SSO 单点登录)" url="https://doc.iocoder.cn/oauth2/" />
<DocAlert
title="OAuth 2.0（SSO 单点登录)"
url="https://doc.iocoder.cn/oauth2/"
/>
<Grid table-title="令牌列表" />
</Page>

3
apps/web-antd/src/views/system/operatelog/data.ts
View File

@ -2,9 +2,10 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { useAccess } from '@vben/access';
import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
const { hasAccessByCodes } = useAccess();

21
apps/web-antd/src/views/system/operatelog/index.vue
View File

@ -1,19 +1,23 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Download } from '@vben/icons';
import Detail from './modules/detail.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportOperateLog, getOperateLogPage } from '#/api/system/operate-log';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
@ -86,7 +90,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DetailModal @success="onRefresh" />
<Grid table-title="操作日志列表">
<template #toolbar-tools>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:operate-log:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:operate-log:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

24
apps/web-antd/src/views/system/operatelog/modules/detail.vue
View File

@ -1,12 +1,13 @@
<script lang="ts" setup>
import type { SystemOperateLogApi } from '#/api/system/operate-log';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions } from 'ant-design-vue';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions } from 'ant-design-vue';
const formData = ref<SystemOperateLogApi.SystemOperateLog>();
const [Modal, modalApi] = useVbenModal({
@ -30,8 +31,19 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="操作日志详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
<Descriptions bordered :column="1" size="middle" class="mx-4" :label-style="{ width: '110px' }">
<Modal
title="操作日志详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions
bordered
:column="1"
size="middle"
class="mx-4"
:label-style="{ width: '110px' }"
>
<Descriptions.Item label="日志编号">
{{ formData?.id }}
</Descriptions.Item>
@ -73,4 +85,4 @@ const [Modal, modalApi] = useVbenModal({
</Descriptions.Item>
</Descriptions>
</Modal>
</template>
</template>

10
apps/web-antd/src/views/system/post/data.ts
View File

@ -1,11 +1,13 @@
import {type VbenFormSchema, z} from '#/adapter/form';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemPostApi } from '#/api/system/post';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { CommonStatusEnum } from '#/utils/constants';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
@ -83,7 +85,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
}
},
];
}

44
apps/web-antd/src/views/system/post/index.vue
View File

@ -1,18 +1,23 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemPostApi } from '#/api/system/post';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus, Download } from '@vben/icons';
import Form from './modules/form.vue';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPostPage, deletePost, exportPost } from '#/api/system/post';
import { useGridColumns, useGridFormSchema } from './data';
import { deletePost, exportPost, getPostPage } from '#/api/system/post';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
@ -53,7 +58,7 @@ async function onDelete(row: SystemPostApi.SystemPost) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -64,20 +69,20 @@ function onActionClick({
row,
}: OnActionClickParams<SystemPostApi.SystemPost>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema()
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
@ -110,11 +115,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="岗位列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:post:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:post:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['岗位']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:post:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:post:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

6
apps/web-antd/src/views/system/post/modules/form.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemPostApi } from '#/api/system/post';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createPost, updatePost, getPost } from '#/api/system/post';
import { createPost, getPost, updatePost } from '#/api/system/post';
import { $t } from '#/locales';
import { useFormSchema } from '../data';

9
apps/web-antd/src/views/system/role/data.ts
View File

@ -2,11 +2,12 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemRoleApi } from '#/api/system/role';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum, SystemDataScopeEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
@ -264,7 +265,9 @@ export function useGridColumns<T = SystemRoleApi.SystemRole>(
{
code: 'assign-data-permission',
text: '数据权限',
show: hasAccessByCodes(['system:permission:assign-role-data-scope']),
show: hasAccessByCodes([
'system:permission:assign-role-data-scope',
]),
},
{
code: 'assign-menu',

73
apps/web-antd/src/views/system/role/index.vue
View File

@ -1,36 +1,41 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemRoleApi } from '#/api/system/role';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus, Download } from '@vben/icons';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getRolePage, deleteRole, exportRole } from '#/api/system/role';
import AssignDataPermissionForm from './modules/assign-data-permission-form.vue';
import AssignMenuForm from './modules/assign-menu-form.vue';
import { deleteRole, exportRole, getRolePage } from '#/api/system/role';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import AssignDataPermissionForm from './modules/assign-data-permission-form.vue';
import AssignMenuForm from './modules/assign-menu-form.vue';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [AssignDataPermissionFormModel, assignDataPermissionFormApi] = useVbenModal({
connectedComponent: AssignDataPermissionForm,
destroyOnClose: true,
});
const [AssignDataPermissionFormModel, assignDataPermissionFormApi] =
useVbenModal({
connectedComponent: AssignDataPermissionForm,
destroyOnClose: true,
});
const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
connectedComponent: AssignMenuForm,
destroyOnClose: true,
})
});
/** 刷新表格 */
function onRefresh() {
@ -67,7 +72,7 @@ async function onDelete(row: SystemRoleApi.SystemRole) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -84,18 +89,10 @@ function onAssignMenu(row: SystemRoleApi.SystemRole) {
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row
code,
row,
}: OnActionClickParams<SystemRoleApi.SystemRole>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'assign-data-permission': {
onAssignDataPermission(row);
break;
@ -104,6 +101,14 @@ function onActionClick({
onAssignMenu(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -139,7 +144,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template>
<Page auto-content-height>
<DocAlert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
<DocAlert
title="功能权限"
url="https://doc.iocoder.cn/resource-permission"
/>
<DocAlert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
<FormModal @success="onRefresh" />
@ -147,11 +155,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<AssignMenuFormModel @success="onRefresh" />
<Grid table-title="角色列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:role:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:role:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['角色']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:role:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:role:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

29
apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
View File

@ -1,19 +1,20 @@
<script lang="ts" setup>
import type { SystemRoleApi } from '#/api/system/role';
import type { SystemDeptApi } from '#/api/system/dept';
import { VbenTree } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { message, Checkbox } from 'ant-design-vue';
import type { SystemRoleApi } from '#/api/system/role';
import { ref } from 'vue';
import { $t } from '#/locales';
import { useVbenModal, VbenTree } from '@vben/common-ui';
import { Checkbox, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { getRole } from '#/api/system/role';
import { assignRoleDataScope } from '#/api/system/permission';
import { getDeptList } from '#/api/system/dept';
import { handleTree } from '#/utils/tree';
import { assignRoleDataScope } from '#/api/system/permission';
import { getRole } from '#/api/system/role';
import { $t } from '#/locales';
import { SystemDataScopeEnum } from '#/utils/constants';
import { handleTree } from '#/utils/tree';
import { useAssignDataPermissionFormSchema } from '../data';
@ -85,7 +86,7 @@ async function loadDeptTree() {
deptLoading.value = true;
try {
const data = await getDeptList();
deptTree.value = handleTree(data);
deptTree.value = handleTree(data) as SystemDeptApi.SystemDept[];
} finally {
deptLoading.value = false;
}
@ -105,12 +106,8 @@ function toggleSelectAll() {
/** 展开/折叠所有节点 */
function toggleExpandAll() {
isExpanded.value = !isExpanded.value;
if (isExpanded.value) {
// 获取所有节点的 ID
expandedKeys.value = getAllNodeIds(deptTree.value);
} else {
expandedKeys.value = [];
}
// 获取所有节点的 ID
expandedKeys.value = isExpanded.value ? getAllNodeIds(deptTree.value) : [];
}
/** 切换父子联动 */

27
apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
View File

@ -1,16 +1,17 @@
<script lang="ts" setup>
import type { SystemRoleApi } from '#/api/system/role';
import type { SystemDeptApi } from '#/api/system/dept';
import { VbenTree } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { message, Checkbox } from 'ant-design-vue';
import type { SystemRoleApi } from '#/api/system/role';
import { ref } from 'vue';
import { $t } from '#/locales';
import { useVbenModal, VbenTree } from '@vben/common-ui';
import { Checkbox, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { assignRoleMenu, getRoleMenuList } from '#/api/system/permission';
import { getMenuList } from '#/api/system/menu';
import { assignRoleMenu, getRoleMenuList } from '#/api/system/permission';
import { $t } from '#/locales';
import { handleTree } from '#/utils/tree';
import { useAssignMenuFormSchema } from '../data';
@ -41,7 +42,7 @@ const [Modal, modalApi] = useVbenModal({
try {
await assignRoleMenu({
roleId: data.id,
menuIds: data.menuIds
menuIds: data.menuIds,
});
// 关闭并提示
await modalApi.close();
@ -82,7 +83,7 @@ async function loadMenuTree() {
menuLoading.value = true;
try {
const data = await getMenuList();
menuTree.value = handleTree(data);
menuTree.value = handleTree(data) as SystemDeptApi.SystemDept[];
} finally {
menuLoading.value = false;
}
@ -102,12 +103,8 @@ function toggleSelectAll() {
/** 展开/折叠所有节点 */
function toggleExpandAll() {
isExpanded.value = !isExpanded.value;
if (isExpanded.value) {
// 获取所有节点的 ID
expandedKeys.value = getAllNodeIds(menuTree.value);
} else {
expandedKeys.value = [];
}
// 获取所有节点的 ID
expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
}
/** 递归获取所有节点 ID */

8
apps/web-antd/src/views/system/role/modules/form.vue
View File

@ -1,13 +1,15 @@
<script lang="ts" setup>
import type { SystemRoleApi } from '#/api/system/role';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createRole, updateRole, getRole } from '#/api/system/role';
import { createRole, getRole, updateRole } from '#/api/system/role';
import { $t } from '#/locales';
import { useFormSchema } from '../data';

7
apps/web-antd/src/views/system/sms/channel/data.ts
View File

@ -2,11 +2,12 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
@ -211,7 +212,7 @@ export function useGridColumns<T = SystemSmsChannelApi.SystemSmsChannel>(
{
code: 'delete',
show: hasAccessByCodes(['system:sms-channel:delete']),
}
},
],
},
},

41
apps/web-antd/src/views/system/sms/channel/index.vue
View File

@ -1,19 +1,27 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Download, Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSmsChannelPage, deleteSmsChannel, exportSmsChannel } from '#/api/system/sms/channel';
import {
deleteSmsChannel,
exportSmsChannel,
getSmsChannelPage,
} from '#/api/system/sms/channel';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -66,14 +74,14 @@ function onActionClick({
row,
}: OnActionClickParams<SystemSmsChannelApi.SystemSmsChannel>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -114,11 +122,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="短信渠道列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:sms-channel:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:sms-channel:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['短信渠道']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:sms-channel:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:sms-channel:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

23
apps/web-antd/src/views/system/sms/channel/modules/form.vue
View File

@ -1,13 +1,19 @@
<script lang="ts" setup>
import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { getSmsChannel, createSmsChannel, updateSmsChannel } from '#/api/system/sms/channel';
import {
createSmsChannel,
getSmsChannel,
updateSmsChannel,
} from '#/api/system/sms/channel';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -24,8 +30,8 @@ const [Form, formApi] = useVbenForm({
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 120
}
labelWidth: 120,
},
});
const [Modal, modalApi] = useVbenModal({
@ -36,9 +42,12 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemSmsChannelApi.SystemSmsChannel;
const data =
(await formApi.getValues()) as SystemSmsChannelApi.SystemSmsChannel;
try {
await (formData.value?.id ? updateSmsChannel(data) : createSmsChannel(data));
await (formData.value?.id
? updateSmsChannel(data)
: createSmsChannel(data));
// 关闭并提示
await modalApi.close();
emit('success');

7
apps/web-antd/src/views/system/sms/log/data.ts
View File

@ -2,11 +2,12 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */

15
apps/web-antd/src/views/system/sms/log/index.vue
View File

@ -1,14 +1,18 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download } from '@vben/icons';
import { Button } from 'ant-design-vue';
import { DocAlert } from '#/components/doc-alert';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
@ -86,7 +90,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DetailModal @success="onRefresh" />
<Grid table-title="短信日志列表">
<template #toolbar-tools>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:sms-log:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:sms-log:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

40
apps/web-antd/src/views/system/sms/log/modules/detail.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const formData = ref<SystemSmsLogApi.SystemSmsLog>();
@ -32,8 +34,19 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="短信日志详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
<Descriptions bordered :column="2" size="middle" class="mx-4" :label-style="{ width: '140px' }">
<Modal
title="短信日志详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions
bordered
:column="2"
size="middle"
class="mx-4"
:label-style="{ width: '140px' }"
>
<Descriptions.Item label="创建时间">
{{ formatDateTime(formData?.createTime || '') }}
</Descriptions.Item>
@ -47,13 +60,19 @@ const [Modal, modalApi] = useVbenModal({
{{ formData?.templateId }}
</Descriptions.Item>
<Descriptions.Item label="模板类型">
<DictTag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="formData?.templateType" />
<DictTag
:type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE"
:value="formData?.templateType"
/>
</Descriptions.Item>
<Descriptions.Item label="短信内容">
{{ formData?.templateContent }}
</Descriptions.Item>
<Descriptions.Item label="发送状态">
<DictTag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="formData?.sendStatus" />
<DictTag
:type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS"
:value="formData?.sendStatus"
/>
</Descriptions.Item>
<Descriptions.Item label="发送时间">
{{ formatDateTime(formData?.sendTime || '') }}
@ -65,7 +84,10 @@ const [Modal, modalApi] = useVbenModal({
{{ formData?.apiSendMsg }}
</Descriptions.Item>
<Descriptions.Item label="接收状态">
<DictTag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="formData?.receiveStatus" />
<DictTag
:type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS"
:value="formData?.receiveStatus"
/>
</Descriptions.Item>
<Descriptions.Item label="接收时间">
{{ formatDateTime(formData?.receiveTime || '') }}

5
apps/web-antd/src/views/system/sms/template/data.ts
View File

@ -2,12 +2,13 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();

43
apps/web-antd/src/views/system/sms/template/index.vue
View File

@ -1,20 +1,28 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteSmsTemplate, exportSmsTemplate, getSmsTemplatePage } from '#/api/system/sms/template';
import {
deleteSmsTemplate,
exportSmsTemplate,
getSmsTemplatePage,
} from '#/api/system/sms/template';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -77,14 +85,14 @@ function onActionClick({
row,
}: OnActionClickParams<SystemSmsTemplateApi.SystemSmsTemplate>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'sms-send': {
onSend(row);
break;
@ -130,11 +138,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<SendModal />
<Grid table-title="短信模板列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:sms-template:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:sms-template:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['短信模板']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:sms-template:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:sms-template:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

16
apps/web-antd/src/views/system/sms/template/modules/form.vue
View File

@ -1,13 +1,19 @@
<script lang="ts" setup>
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createSmsTemplate, getSmsTemplate, updateSmsTemplate } from '#/api/system/sms/template';
import {
createSmsTemplate,
getSmsTemplate,
updateSmsTemplate,
} from '#/api/system/sms/template';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -24,8 +30,8 @@ const [Form, formApi] = useVbenForm({
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 140
}
labelWidth: 140,
},
});
const [Modal, modalApi] = useVbenModal({

4
apps/web-antd/src/views/system/sms/template/modules/send-form.vue
View File

@ -1,10 +1,12 @@
<script lang="ts" setup>
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { sendSms } from '#/api/system/sms/template';

11
apps/web-antd/src/views/system/social/client/data.ts
View File

@ -1,11 +1,13 @@
import { type VbenFormSchema, z } from '#/adapter/form';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSocialClientApi } from '#/api/system/social/client';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { CommonStatusEnum, SystemUserSocialTypeEnum } from '#/utils/constants';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum, SystemUserSocialTypeEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */
@ -76,7 +78,8 @@ export function useFormSchema(): VbenFormSchema[] {
},
dependencies: {
triggerFields: ['socialType'],
show: (values) => values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
show: (values) =>
values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
},
},
{

40
apps/web-antd/src/views/system/social/client/index.vue
View File

@ -1,17 +1,25 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemSocialClientApi } from '#/api/system/social/client';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSocialClientPage, deleteSocialClient } from '#/api/system/social/client';
import {
deleteSocialClient,
getSocialClientPage,
} from '#/api/system/social/client';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -47,7 +55,7 @@ async function onDelete(row: SystemSocialClientApi.SystemSocialClient) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -58,20 +66,20 @@ function onActionClick({
row,
}: OnActionClickParams<SystemSocialClientApi.SystemSocialClient>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema()
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
@ -106,11 +114,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="社交客户端列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:social-client:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:social-client:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['社交客户端']) }}
</Button>
</template>
</Grid>
</Page>
</template>
</template>

19
apps/web-antd/src/views/system/social/client/modules/form.vue
View File

@ -1,13 +1,19 @@
<script lang="ts" setup>
import type { SystemSocialClientApi } from '#/api/system/social/client';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createSocialClient, updateSocialClient, getSocialClient } from '#/api/system/social/client';
import {
createSocialClient,
getSocialClient,
updateSocialClient,
} from '#/api/system/social/client';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@ -33,9 +39,12 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemSocialClientApi.SystemSocialClient;
const data =
(await formApi.getValues()) as SystemSocialClientApi.SystemSocialClient;
try {
await (formData.value?.id ? updateSocialClient(data) : createSocialClient(data));
await (formData.value?.id
? updateSocialClient(data)
: createSocialClient(data));
// 关闭并提示
await modalApi.close();
emit('success');

3
apps/web-antd/src/views/system/social/user/data.ts
View File

@ -2,9 +2,10 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSocialUserApi } from '#/api/system/social/user';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { useAccess } from '@vben/access';
import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();

20
apps/web-antd/src/views/system/social/user/index.vue
View File

@ -1,14 +1,18 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemSocialUserApi } from '#/api/system/social/user';
import { Page, useVbenModal } from '@vben/common-ui';
import Detail from './modules/detail.vue';
import { DocAlert } from '#/components/doc-alert';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSocialUserPage } from '#/api/system/social/user';
import { DocAlert } from '#/components/doc-alert';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
@ -16,9 +20,9 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
// function onRefresh() {
// gridApi.query();
// }
/** 查看详情 */
function onDetail(row: SystemSocialUserApi.SystemSocialUser) {
@ -38,9 +42,9 @@ function onActionClick({
}
}
const [Grid, gridApi] = useVbenVxeGrid({
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema()
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),

27
apps/web-antd/src/views/system/social/user/modules/detail.vue
View File

@ -1,13 +1,15 @@
<script lang="ts" setup>
import type { SystemSocialUserApi } from '#/api/system/social/user';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem, Image } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { $t } from '#/locales';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem, Image } from 'ant-design-vue';
import { getSocialUser } from '#/api/system/social/user';
import { DictTag } from '#/components/dict-tag';
import { $t } from '#/locales';
import { DICT_TYPE } from '#/utils/dict';
const formData = ref<SystemSocialUserApi.SystemSocialUser>();
@ -34,8 +36,19 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="社交用户详情" class="w-1/2" :show-cancel-button="false" :show-confirm-button="false">
<Descriptions bordered :column="1" size="middle" class="mx-4" :label-style="{ width: '185px' }">
<Modal
title="社交用户详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions
bordered
:column="1"
size="middle"
class="mx-4"
:label-style="{ width: '185px' }"
>
<DescriptionsItem label="社交平台">
<DictTag :type="DICT_TYPE.SYSTEM_SOCIAL_TYPE" :value="formData?.type" />
</DescriptionsItem>

11
apps/web-antd/src/views/system/tenant/data.ts
View File

@ -2,12 +2,13 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemTenantApi } from '#/api/system/tenant';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { getTenantPackageList } from '#/api/system/tenant-package';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
@ -202,7 +203,11 @@ export function useGridColumns<T = SystemTenantApi.SystemTenant>(
minWidth: 180,
formatter: (row) => {
const packageId = row.cellValue;
return packageId === 0 ? '系统租户' : tenantPackageList.find((tenantPackage) => tenantPackage.id === packageId)?.name || '-';
return packageId === 0
? '系统租户'
: tenantPackageList.find(
(tenantPackage) => tenantPackage.id === packageId,
)?.name || '-';
},
},
{

39
apps/web-antd/src/views/system/tenant/index.vue
View File

@ -1,19 +1,23 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemTenantApi } from '#/api/system/tenant';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import { Plus, Download } from '@vben/icons';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTenantPage, deleteTenant, exportTenant } from '#/api/system/tenant';
import { deleteTenant, exportTenant, getTenantPage } from '#/api/system/tenant';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -66,14 +70,14 @@ function onActionClick({
row,
}: OnActionClickParams<SystemTenantApi.SystemTenant>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -113,11 +117,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="租户列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:tenant:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:tenant:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['租户']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:tenant:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:tenant:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>

6
apps/web-antd/src/views/system/tenant/modules/form.vue
View File

@ -1,13 +1,15 @@
<script lang="ts" setup>
import type { SystemTenantApi } from '#/api/system/tenant';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createTenant, getTenant, updateTenant } from '#/api/system/tenant';
import { $t } from '#/locales';
import { useFormSchema } from '../data';

11
apps/web-antd/src/views/system/tenantPackage/data.ts
View File

@ -2,11 +2,12 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { CommonStatusEnum } from '#/utils/constants';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const { hasAccessByCodes } = useAccess();
@ -53,7 +54,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
}
},
},
];
}
@ -93,7 +94,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemTenantPackageApi.SystemTenantPackage>(onActionClick: OnActionClickFn<T>): VxeTableGridOptions['columns'] {
export function useGridColumns<T = SystemTenantPackageApi.SystemTenantPackage>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',

38
apps/web-antd/src/views/system/tenantPackage/index.vue
View File

@ -1,17 +1,24 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message } from 'ant-design-vue';
import Form from './modules/form.vue';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteTenantPackage, getTenantPackagePage } from '#/api/system/tenant-package';
import {
deleteTenantPackage,
getTenantPackagePage,
} from '#/api/system/tenant-package';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -53,16 +60,19 @@ async function onDelete(row: SystemTenantPackageApi.SystemTenantPackage) {
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<SystemTenantPackageApi.SystemTenantPackage>) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemTenantPackageApi.SystemTenantPackage>) {
switch (code) {
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
}
}
@ -104,7 +114,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" />
<Grid table-title="租户套餐列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:tenant-package:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:tenant-package:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['套餐']) }}
</Button>

43
apps/web-antd/src/views/system/tenantPackage/modules/form.vue
View File

@ -2,14 +2,20 @@
import type { SystemDeptApi } from '#/api/system/dept';
import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
import { computed, ref } from 'vue';
import { useVbenModal, VbenTree } from '@vben/common-ui';
import { Checkbox, message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { getMenuList } from '#/api/system/menu';
import { createTenantPackage, getTenantPackage, updateTenantPackage } from '#/api/system/tenant-package';
import {
createTenantPackage,
getTenantPackage,
updateTenantPackage,
} from '#/api/system/tenant-package';
import { $t } from '#/locales';
import { handleTree } from '#/utils/tree';
import { useFormSchema } from '../data';
@ -17,7 +23,9 @@ import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemTenantPackageApi.SystemTenantPackage>();
const getTitle = computed(() => {
return formData.value ? $t('ui.actionTitle.edit', ['套餐']) : $t('ui.actionTitle.create', ['套餐']);
return formData.value
? $t('ui.actionTitle.edit', ['套餐'])
: $t('ui.actionTitle.create', ['套餐']);
});
const menuTree = ref<SystemDeptApi.SystemDept[]>([]); // 菜单树
const menuLoading = ref(false); // 加载菜单列表
@ -39,9 +47,12 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as SystemTenantPackageApi.SystemTenantPackage;
const data =
(await formApi.getValues()) as SystemTenantPackageApi.SystemTenantPackage;
try {
await (formData.value ? updateTenantPackage(data) : createTenantPackage(data));
await (formData.value
? updateTenantPackage(data)
: createTenantPackage(data));
// 关闭并提示
await modalApi.close();
emit('success');
@ -78,7 +89,7 @@ async function loadMenuTree() {
menuLoading.value = true;
try {
const data = await getMenuList();
menuTree.value = handleTree(data);
menuTree.value = handleTree(data) as SystemDeptApi.SystemDept[];
} finally {
menuLoading.value = false;
}
@ -119,14 +130,26 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
<template #menuIds="slotProps">
<Spin :spinning="menuLoading" class="w-full">
<!-- TODO @芋艿：可优化，使用 antd 的 tree？原因是，更原生 -->
<VbenTree :tree-data="menuTree" multiple bordered :expanded="expandedKeys" v-bind="slotProps" value-field="id" label-field="name" />
<VbenTree
:tree-data="menuTree"
multiple
bordered
:expanded="expandedKeys"
v-bind="slotProps"
value-field="id"
label-field="name"
/>
</Spin>
</template>
</Form>
<template #prepend-footer>
<div class="flex flex-auto items-center">
<Checkbox :checked="isAllSelected" @change="toggleSelectAll"> 全选 </Checkbox>
<Checkbox :checked="isExpanded" @change="toggleExpandAll"> 全部展开 </Checkbox>
<Checkbox :checked="isAllSelected" @change="toggleSelectAll">
全选
</Checkbox>
<Checkbox :checked="isExpanded" @change="toggleExpandAll">
全部展开
</Checkbox>
</div>
</template>
</Modal>

25
apps/web-antd/src/views/system/user/data.ts
View File

@ -1,16 +1,17 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemUserApi } from '#/api/system/user';
import { useAccess } from '@vben/access';
import { z } from '#/adapter/form';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { CommonStatusEnum } from '#/utils/constants';
import { getDeptList } from '#/api/system/dept';
import { getSimplePostList } from '#/api/system/post';
import { getSimpleRoleList } from '#/api/system/role';
import { handleTree } from '#/utils/tree';
import { CommonStatusEnum } from '#/utils/constants';
import { getRangePickerDefaultProps } from '#/utils/date';
import { useAccess } from '@vben/access';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { handleTree } from '#/utils/tree';
const { hasAccessByCodes } = useAccess();
@ -101,7 +102,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Input',
componentProps: {
placeholder: '请输入手机号码',
}
},
},
{
fieldName: 'sex',
@ -131,7 +132,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
}
},
},
];
}
@ -174,7 +175,7 @@ export function useResetPasswordFormSchema(): VbenFormSchema[] {
triggerFields: ['newPassword'],
},
},
]
];
}
/** 分配角色的表单 */
@ -217,7 +218,7 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
placeholder: '请选择角色',
},
},
]
];
}
/** 用户导入的表单 */
@ -244,7 +245,6 @@ export function useImportFormSchema(): VbenFormSchema[] {
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -281,7 +281,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 列表的字段 */
export function useGridColumns<T = SystemUserApi.SystemUser>(
onActionClick: OnActionClickFn<T>,
onStatusChange?: (newStatus: number, row: T) => PromiseLike<boolean | undefined>,
onStatusChange?: (
newStatus: number,
row: T,
) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] {
return [
{

104
apps/web-antd/src/views/system/user/index.vue
View File

@ -1,26 +1,36 @@
<script lang="ts" setup>
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemUserApi } from '#/api/system/user';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
import type { SystemUserApi } from '#/api/system/user';
import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, message, Modal } from 'ant-design-vue';
import { Plus, Download, Upload } from '@vben/icons';
import Form from './modules/form.vue';
import ResetPasswordForm from './modules/reset-password-form.vue';
import AssignRoleForm from './modules/assign-role-form.vue';
import ImportForm from './modules/import-form.vue';
import DeptTree from './modules/dept-tree.vue';
import { DocAlert } from '#/components/doc-alert';
import { Download, Plus, Upload } from '@vben/icons';
import { Button, message, Modal } from 'ant-design-vue';
import { $t } from '#/locales';
import { ref } from 'vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserPage, deleteUser, exportUser, updateUserStatus } from '#/api/system/user';
import { downloadByData } from '#/utils/download';
import {
deleteUser,
exportUser,
getUserPage,
updateUserStatus,
} from '#/api/system/user';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
import { DICT_TYPE, getDictLabel } from '#/utils/dict';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import AssignRoleForm from './modules/assign-role-form.vue';
import DeptTree from './modules/dept-tree.vue';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';
import ResetPasswordForm from './modules/reset-password-form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -55,7 +65,7 @@ async function onExport() {
/** 选择部门 */
const searchDeptId = ref<number | undefined>(undefined);
async function onDeptSelect (dept: SystemDeptApi.SystemDept) {
async function onDeptSelect(dept: SystemDeptApi.SystemDept) {
searchDeptId.value = dept.id;
onRefresh();
}
@ -89,7 +99,7 @@ async function onDelete(row: SystemUserApi.SystemUser) {
key: 'action_process_msg',
});
onRefresh();
} catch (error) {
} catch {
hideLoading();
}
}
@ -106,7 +116,10 @@ function onAssignRole(row: SystemUserApi.SystemUser) {
// TODO @芋艿：后续怎么简化一下 confirm 的实现。
/** 更新用户状态 */
async function onStatusChange(newStatus: number, row: SystemUserApi.SystemUser): Promise<boolean | undefined> {
async function onStatusChange(
newStatus: number,
row: SystemUserApi.SystemUser,
): Promise<boolean | undefined> {
return new Promise((resolve, reject) => {
Modal.confirm({
title: '切换状态',
@ -116,16 +129,18 @@ async function onStatusChange(newStatus: number, row: SystemUserApi.SystemUser):
},
onOk() {
// 更新用户状态
updateUserStatus(row.id as number, newStatus).then(() => {
// 提示并返回成功
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
updateUserStatus(row.id as number, newStatus)
.then(() => {
// 提示并返回成功
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
resolve(true);
})
.catch((error) => {
reject(error);
});
resolve(true);
}).catch((error) => {
reject(error);
});
},
});
});
@ -137,20 +152,20 @@ function onActionClick({
row,
}: OnActionClickParams<SystemUserApi.SystemUser>) {
switch (code) {
case 'edit': {
onEdit(row);
case 'assign-role': {
onAssignRole(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'reset-password': {
onResetPassword(row);
case 'edit': {
onEdit(row);
break;
}
case 'assign-role': {
onAssignRole(row);
case 'reset-password': {
onResetPassword(row);
break;
}
}
@ -191,7 +206,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Page auto-content-height>
<DocAlert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
<DocAlert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
<DocAlert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
<DocAlert
title="Excel 导入导出"
url="https://doc.iocoder.cn/excel-import-and-export/"
/>
<FormModal @success="onRefresh" />
<ResetPasswordModal @success="onRefresh" />
@ -207,15 +225,29 @@ const [Grid, gridApi] = useVbenVxeGrid({
<div class="w-18/24">
<Grid table-title="用户列表">
<template #toolbar-tools>
<Button type="primary" @click="onCreate" v-access:code="['system:user:create']">
<Button
type="primary"
@click="onCreate"
v-access:code="['system:user:create']"
>
<Plus class="size-5" />
{{ $t('ui.actionTitle.create', ['用户']) }}
</Button>
<Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:user:export']">
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:user:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
<Button type="primary" class="ml-2" @click="onImport" v-access:code="['system:user:import']">
<Button
type="primary"
class="ml-2"
@click="onImport"
v-access:code="['system:user:import']"
>
<Upload class="size-5" />
{{ $t('ui.actionTitle.import', ['用户']) }}
</Button>

5
apps/web-antd/src/views/system/user/modules/assign-role-form.vue
View File

@ -2,11 +2,12 @@
import type { SystemUserApi } from '#/api/system/user';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { getUserRoleList, assignUserRole } from '#/api/system/permission';
import { assignUserRole, getUserRoleList } from '#/api/system/permission';
import { $t } from '#/locales';
import { useAssignRoleFormSchema } from '../data';

26
apps/web-antd/src/views/system/user/modules/dept-tree.vue
View File

@ -1,10 +1,12 @@
<script lang="ts" setup>
import { type SystemDeptApi} from '#/api/system/dept';
import type { SystemDeptApi } from '#/api/system/dept';
import { Tree, Input, Spin } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
import { ref, onMounted } from 'vue';
import { Search } from '@vben/icons';
import { Input, Spin, Tree } from 'ant-design-vue';
import { getSimpleDeptList } from '#/api/system/dept';
import { handleTree } from '#/utils/tree';
@ -19,12 +21,14 @@ const searchValue = ref(''); // 搜索值
function handleSearch(e: any) {
const value = e.target.value;
searchValue.value = value;
const filteredList = value ? deptList.value.filter(item =>
item.name.toLowerCase().includes(value.toLowerCase())
) : deptList.value;
const filteredList = value
? deptList.value.filter((item) =>
item.name.toLowerCase().includes(value.toLowerCase()),
)
: deptList.value;
deptTree.value = handleTree(filteredList);
// 展开所有节点
expandedKeys.value = deptTree.value.map(node => node.id as number);
expandedKeys.value = deptTree.value.map((node) => node.id as number);
}
/** 选中部门 */
@ -52,7 +56,7 @@ onMounted(async () => {
<div class="mb-2">
<Input
placeholder="搜索部门"
allowClear
allow-clear
v-model:value="searchValue"
@change="handleSearch"
class="w-full"
@ -67,11 +71,11 @@ onMounted(async () => {
class="pt-2"
v-if="deptTree.length > 0"
:tree-data="deptTree"
:fieldNames="{ title: 'name', key: 'id', children: 'children' }"
:field-names="{ title: 'name', key: 'id', children: 'children' }"
@select="handleSelect"
:defaultExpandAll="true"
:default-expand-all="true"
/>
<div v-else-if="!loading" class="text-center text-gray-500 py-4">
<div v-else-if="!loading" class="py-4 text-center text-gray-500">
暂无数据
</div>
</Spin>

6
apps/web-antd/src/views/system/user/modules/form.vue
View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import type { SystemUserApi } from '#/api/system/user';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createUser, updateUser, getUser } from '#/api/system/user';
import { createUser, getUser, updateUser } from '#/api/system/user';
import { $t } from '#/locales';
import { useFormSchema } from '../data';

14
apps/web-antd/src/views/system/user/modules/import-form.vue
View File

@ -2,12 +2,12 @@
import type { FileType } from 'ant-design-vue/es/upload/interface';
import { useVbenModal } from '@vben/common-ui';
import { message} from 'ant-design-vue';
import { Button, Upload } from 'ant-design-vue';
import { $t } from '#/locales';
import { Button, message, Upload } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { importUser, importUserTemplate } from '#/api/system/user';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useImportFormSchema } from '../data';
@ -41,7 +41,7 @@ const [Modal, modalApi] = useVbenModal({
} finally {
modalApi.lock(false);
}
}
},
});
/** 上传前 */
@ -62,7 +62,11 @@ async function onDownload() {
<Form class="mx-4">
<template #file>
<div class="w-full">
<Upload :max-count="1" accept=".xls,.xlsx" :beforeUpload="beforeUpload">
<Upload
:max-count="1"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
>
<Button type="primary"> 选择 Excel 文件 </Button>
</Upload>
</div>

3
apps/web-antd/src/views/system/user/modules/reset-password-form.vue
View File

@ -2,11 +2,12 @@
import type { SystemUserApi } from '#/api/system/user';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form';
import { resetUserPassword } from '#/api/system/user';
import { $t } from '#/locales';
import { useResetPasswordFormSchema } from '../data';