smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

!110 perf: 【ANTD】优化代码生成示例 demo03

Browse Source 
Merge pull request !110 from puhui999/dev-new
This commit is contained in:
芋道源码
2025-05-19 11:56:39 +00:00
committed by Gitee
parent 241e340c3f b410e50edb
commit 891daec857
19 changed files with 365 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web-antd/src/views/infra/demo/demo01/index.vue
View File

@@ -64,6 +64,13 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
// TODO @puhui999：:1）/** 批量删除示例联系人 */ 是不是放在 deleteIds 上面；2）showDeleteBatchBtn 是不是直接 disabled 哪里判断哈；
const deleteIds = ref<number[]>([]); // 待删除示例联系人 ID
const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
function setDeleteIds({
records,
}: {
records: Demo01ContactApi.Demo01Contact[];
}) {
deleteIds.value = records.map((item) => item.id);
}
/** 批量删除示例联系人 */
async function onDeleteBatch() {
const hideLoading = message.loading({
@@ -134,20 +141,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
gridEvents: {
checkboxAll: ({
records,
}: {
records: Demo01ContactApi.Demo01Contact[];
}) => {
deleteIds.value = records.map((item) => item.id);
},
checkboxChange: ({
records,
}: {
records: Demo01ContactApi.Demo01Contact[];
}) => {
deleteIds.value = records.map((item) => item.id);
},
checkboxAll: setDeleteIds,
checkboxChange: setDeleteIds,
},
});
</script>

3
apps/web-antd/src/views/infra/demo/demo03/erp/data.ts
View File

@@ -107,6 +107,7 @@ export function useGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '编号',
@@ -254,6 +255,7 @@ export function useDemo03CourseGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Course>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '编号',
@@ -391,6 +393,7 @@ export function useDemo03GradeGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Grade>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '编号',

52
apps/web-antd/src/views/infra/demo/demo03/erp/index.vue
View File

@@ -5,17 +5,18 @@ import type {
} from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { h, ref } from 'vue';
import { computed, h, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Download, Plus, Trash2 } from '@vben/icons';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { Button, message, Tabs } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteDemo03Student,
deleteDemo03StudentByIds,
exportDemo03Student,
getDemo03StudentPage,
} from '#/api/infra/demo/demo03/erp';
@@ -61,7 +62,25 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
await deleteDemo03Student(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh();
} catch {
} finally {
hideLoading();
}
}
const deleteIds = ref<number[]>([]); // 待删除学生 ID
const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
/** 批量删除学生 */
async function onDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteDemo03StudentByIds(deleteIds.value);
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
@@ -124,6 +143,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
cellClick: ({ row }: { row: Demo03StudentApi.Demo03Student }) => {
selectDemo03Student.value = row;
},
checkboxAll: ({
records,
}: {
records: Demo03StudentApi.Demo03Student[];
}) => {
deleteIds.value = records.map((item) => item.id);
},
checkboxChange: ({
records,
}: {
records: Demo03StudentApi.Demo03Student[];
}) => {
deleteIds.value = records.map((item) => item.id);
},
},
});
</script>
@@ -152,6 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
>
{{ $t('ui.actionTitle.export') }}
</Button>
<Button
:icon="h(Trash2)"
type="primary"
danger
class="ml-2"
:disabled="showDeleteBatchBtn"
@click="onDeleteBatch"
v-access:code="['infra:demo03-student:delete']"
>
批量删除
</Button>
</template>
</Grid>

48
apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
View File

@@ -5,16 +5,18 @@ import type {
} from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { h, nextTick, watch } from 'vue';
import { computed, h, nextTick, ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Plus, Trash2 } from '@vben/icons';
import { isEmpty } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteDemo03Course,
deleteDemo03CourseByIds,
getDemo03CoursePage,
} from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
@@ -59,7 +61,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Course) {
await deleteDemo03Course(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh();
} catch {
} finally {
hideLoading();
}
}
const deleteIds = ref<number[]>([]); // 待删除学生课程 ID
const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
function setDeleteIds({
records,
}: {
records: Demo03StudentApi.Demo03Course[];
}) {
deleteIds.value = records.map((item) => item.id);
}
/** 批量删除学生课程 */
async function onDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteDemo03CourseByIds(deleteIds.value);
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
@@ -115,6 +142,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
isHover: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
gridEvents: {
checkboxAll: setDeleteIds,
checkboxChange: setDeleteIds,
},
});
/** 刷新表格 */
@@ -148,6 +179,17 @@ watch(
>
{{ $t('ui.actionTitle.create', ['学生课程']) }}
</Button>
<Button
:icon="h(Trash2)"
type="primary"
danger
class="ml-2"
:disabled="showDeleteBatchBtn"
@click="onDeleteBatch"
v-access:code="['infra:demo03-student:delete']"
>
批量删除
</Button>
</template>
</Grid>
</template>

48
apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
View File

@@ -5,16 +5,18 @@ import type {
} from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
import { h, nextTick, watch } from 'vue';
import { computed, h, nextTick, ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';
import { Plus, Trash2 } from '@vben/icons';
import { isEmpty } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteDemo03Grade,
deleteDemo03GradeByIds,
getDemo03GradePage,
} from '#/api/infra/demo/demo03/erp';
import { $t } from '#/locales';
@@ -59,7 +61,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Grade) {
await deleteDemo03Grade(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh();
} catch {
} finally {
hideLoading();
}
}
const deleteIds = ref<number[]>([]); // 待删除学生班级 ID
const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
function setDeleteIds({
records,
}: {
records: Demo03StudentApi.Demo03Grade[];
}) {
deleteIds.value = records.map((item) => item.id);
}
/** 批量删除学生班级 */
async function onDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteDemo03GradeByIds(deleteIds.value);
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
@@ -115,6 +142,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
isHover: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
gridEvents: {
checkboxAll: setDeleteIds,
checkboxChange: setDeleteIds,
},
});
/** 刷新表格 */
@@ -148,6 +179,17 @@ watch(
>
{{ $t('ui.actionTitle.create', ['学生班级']) }}
</Button>
<Button
:icon="h(Trash2)"
type="primary"
danger
class="ml-2"
:disabled="showDeleteBatchBtn"
@click="onDeleteBatch"
v-access:code="['infra:demo03-student:delete']"
>
批量删除
</Button>
</template>
</Grid>
</template>

1
apps/web-antd/src/views/infra/demo/demo03/erp/modules/form.vue
View File

@@ -64,7 +64,6 @@ const [Modal, modalApi] = useVbenModal({
formData.value = undefined;
return;
}
// 加载数据
let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
if (!data) {

1
apps/web-antd/src/views/infra/demo/demo03/inner/data.ts
View File

@@ -107,6 +107,7 @@ export function useGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
return [
{ type: 'checkbox', width: 40 },
{ type: 'expand', width: 80, slots: { content: 'expand_content' } },
{
field: 'id',

49
apps/web-antd/src/views/infra/demo/demo03/inner/index.vue
View File

@@ -5,17 +5,18 @@ import type {
} from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
import { h, ref } from 'vue';
import { computed, h, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Download, Plus, Trash2 } from '@vben/icons';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { Button, message, Tabs } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteDemo03Student,
deleteDemo03StudentByIds,
exportDemo03Student,
getDemo03StudentPage,
} from '#/api/infra/demo/demo03/inner';
@@ -60,7 +61,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
await deleteDemo03Student(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh();
} catch {
} finally {
hideLoading();
}
}
const deleteIds = ref<number[]>([]); // 待删除学生 ID
const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
function setDeleteIds({
records,
}: {
records: Demo03StudentApi.Demo03Student[];
}) {
deleteIds.value = records.map((item) => item.id);
}
/** 批量删除学生 */
async function onDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteDemo03StudentByIds(deleteIds.value);
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
@@ -118,6 +144,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
search: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
gridEvents: {
checkboxAll: setDeleteIds,
checkboxChange: setDeleteIds,
},
});
</script>
@@ -155,6 +185,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
>
{{ $t('ui.actionTitle.export') }}
</Button>
<Button
:icon="h(Trash2)"
type="primary"
danger
class="ml-2"
:disabled="showDeleteBatchBtn"
@click="onDeleteBatch"
v-access:code="['infra:demo03-student:delete']"
>
批量删除
</Button>
</template>
</Grid>
</Page>

12
apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
View File

@@ -16,18 +16,18 @@ const props = defineProps<{
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDemo03CourseGridColumns(),
height: 'auto',
rowConfig: {
keyField: 'id',
isHover: true,
},
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
height: '600px',
rowConfig: {
keyField: 'id',
isHover: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
});
/** 刷新表格 */

7
apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue
View File

@@ -11,6 +11,13 @@ const props = defineProps<{
}>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useDemo03GradeFormSchema(),
showDefaultActions: false,

12
apps/web-antd/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
View File

@@ -16,18 +16,18 @@ const props = defineProps<{
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDemo03GradeGridColumns(),
height: 'auto',
rowConfig: {
keyField: 'id',
isHover: true,
},
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
height: '600px',
rowConfig: {
keyField: 'id',
isHover: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
});
/** 刷新表格 */

5
apps/web-antd/src/views/infra/demo/demo03/inner/modules/form.vue
View File

@@ -61,8 +61,8 @@ const [Modal, modalApi] = useVbenModal({
// 提交表单
const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
// 拼接子表的数据
data.demo03courses = demo03CourseFormRef.value?.getData();
data.demo03grade = await demo03GradeFormRef.value?.getValues();
data.demo03Courses = demo03CourseFormRef.value?.getData();
data.demo03Grade = await demo03GradeFormRef.value?.getValues();
try {
await (formData.value?.id
? updateDemo03Student(data)
@@ -80,7 +80,6 @@ const [Modal, modalApi] = useVbenModal({
formData.value = undefined;
return;
}
// 加载数据
let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
if (!data) {

1
apps/web-antd/src/views/infra/demo/demo03/normal/data.ts
View File

@@ -107,6 +107,7 @@ export function useGridColumns(
onActionClick?: OnActionClickFn<Demo03StudentApi.Demo03Student>,
): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '编号',

49
apps/web-antd/src/views/infra/demo/demo03/normal/index.vue
View File

@@ -5,17 +5,18 @@ import type {
} from '#/adapter/vxe-table';
import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
import { h } from 'vue';
import { computed, h, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Download, Plus, Trash2 } from '@vben/icons';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteDemo03Student,
deleteDemo03StudentByIds,
exportDemo03Student,
getDemo03StudentPage,
} from '#/api/infra/demo/demo03/normal';
@@ -55,7 +56,32 @@ async function onDelete(row: Demo03StudentApi.Demo03Student) {
await deleteDemo03Student(row.id as number);
message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
onRefresh();
} catch {
} finally {
hideLoading();
}
}
const deleteIds = ref<number[]>([]); // 待删除学生 ID
const showDeleteBatchBtn = computed(() => isEmpty(deleteIds.value));
function setDeleteIds({
records,
}: {
records: Demo03StudentApi.Demo03Student[];
}) {
deleteIds.value = records.map((item) => item.id);
}
/** 批量删除学生 */
async function onDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteDemo03StudentByIds(deleteIds.value);
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
@@ -113,6 +139,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
search: true,
},
} as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
gridEvents: {
checkboxAll: setDeleteIds,
checkboxChange: setDeleteIds,
},
});
</script>
@@ -139,6 +169,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
>
{{ $t('ui.actionTitle.export') }}
</Button>
<Button
:icon="h(Trash2)"
type="primary"
danger
class="ml-2"
:disabled="showDeleteBatchBtn"
@click="onDeleteBatch"
v-access:code="['infra:demo03-student:delete']"
>
批量删除
</Button>
</template>
</Grid>
</Page>

7
apps/web-antd/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue
View File

@@ -11,6 +11,13 @@ const props = defineProps<{
}>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useDemo03GradeFormSchema(),
showDefaultActions: false,

5
apps/web-antd/src/views/infra/demo/demo03/normal/modules/form.vue
View File

@@ -61,8 +61,8 @@ const [Modal, modalApi] = useVbenModal({
// 提交表单
const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
// 拼接子表的数据
data.demo03courses = demo03CourseFormRef.value?.getData();
data.demo03grade = await demo03GradeFormRef.value?.getValues();
data.demo03Courses = demo03CourseFormRef.value?.getData();
data.demo03Grade = await demo03GradeFormRef.value?.getValues();
try {
await (formData.value?.id
? updateDemo03Student(data)
@@ -80,7 +80,6 @@ const [Modal, modalApi] = useVbenModal({
formData.value = undefined;
return;
}
// 加载数据
let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
if (!data) {