review:【INFRA】标准的代码生成

pull/85/head
YunaiV 2025-04-25 23:29:46 +08:00
parent e4267573e9
commit 7a9df83d71
7 changed files with 133 additions and 41 deletions

View File

@ -7,7 +7,7 @@ import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores'; import { initStores } from '@vben/stores';
import '@vben/styles'; import '@vben/styles';
import '@vben/styles/antd'; import '@vben/styles/antd';
import 'vxe-table/styles/cssvar.scss'; import 'vxe-table/styles/cssvar.scss'; // TODO @puhui999这个必须导入哇我看 use-vxe-grid.vue 已经导入了
import { useTitle } from '@vueuse/core'; import { useTitle } from '@vueuse/core';

View File

@ -1,3 +1,7 @@
<!--
参考自 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/ContentWrap/src/ContentWrap.vue
保证和 yudao-ui-admin-vue3 功能的一致性
-->
<script lang="ts" setup> <script lang="ts" setup>
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
@ -15,6 +19,7 @@ withDefaults(
title: '', title: '',
}, },
); );
// TODO @puhui999 vue3
</script> </script>
<template> <template>

View File

@ -59,8 +59,10 @@ function getDictObj(dictType: string, value: any) {
* select radio * select radio
* *
* @param dictType * @param dictType
* @param valueType string
* @returns * @returns
*/ */
// TODO @puhui999貌似可以定义一个类型不使用 any[]
function getDictOptions( function getDictOptions(
dictType: string, dictType: string,
valueType: 'boolean' | 'number' | 'string' = 'string', valueType: 'boolean' | 'number' | 'string' = 'string',

View File

@ -1,21 +1,36 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Demo01ContactApi } from '#/api/infra/demo/demo01'; import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
import { ContentWrap } from '#/components/content-wrap'; import { h, onMounted, reactive, ref } from 'vue';
import { DictTag } from '#/components/dict-tag';
import Demo01ContactForm from './modules/form.vue';
import { Page, useVbenModal } from '@vben/common-ui'; import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus, RefreshCw, Search } from '@vben/icons'; import { Download, Plus, RefreshCw, Search } from '@vben/icons';
import { Button, Form, Input, message, Pagination, RangePicker, Select } from 'ant-design-vue'; import { cloneDeep, formatDateTime } from '@vben/utils';
import {
Button,
Form,
Input,
message,
Pagination,
RangePicker,
Select,
} from 'ant-design-vue';
import { VxeColumn, VxeTable } from 'vxe-table'; import { VxeColumn, VxeTable } from 'vxe-table';
import { deleteDemo01Contact, exportDemo01Contact, getDemo01ContactPage } from '#/api/infra/demo/demo01'; import {
deleteDemo01Contact,
exportDemo01Contact,
getDemo01ContactPage,
} from '#/api/infra/demo/demo01';
import { ContentWrap } from '#/components/content-wrap';
import { DictTag } from '#/components/dict-tag';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { getRangePickerDefaultProps } from '#/utils/date'; import { getRangePickerDefaultProps } from '#/utils/date';
import { DICT_TYPE, getDictOptions } from '#/utils/dict'; import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { downloadByData } from '#/utils/download'; import { downloadByData } from '#/utils/download';
import { h, onMounted, reactive, ref } from 'vue';
import {cloneDeep, formatDateTime} from '@vben/utils'; import Demo01ContactForm from './modules/form.vue';
const loading = ref(true); // const loading = ref(true); //
const list = ref<Demo01ContactApi.Demo01Contact[]>([]); // const list = ref<Demo01ContactApi.Demo01Contact[]>([]); //
@ -34,9 +49,9 @@ const exportLoading = ref(false); // 导出的加载中
const getList = async () => { const getList = async () => {
loading.value = true; loading.value = true;
try { try {
const params = cloneDeep(queryParams) as any const params = cloneDeep(queryParams) as any;
if (params.createTime && Array.isArray(params.createTime)) { if (params.createTime && Array.isArray(params.createTime)) {
params.createTime = (params.createTime as string[]).join(',') params.createTime = (params.createTime as string[]).join(',');
} }
const data = await getDemo01ContactPage(params); const data = await getDemo01ContactPage(params);
list.value = data.list; list.value = data.list;
@ -115,8 +130,15 @@ onMounted(() => {
<ContentWrap> <ContentWrap>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<Form class="-mb-15px" :model="queryParams" ref="queryFormRef" layout="inline"> <!-- TODO @puhui999貌似 -mb-15px 没效果可能和 ContentWrap 有关系 -->
<Form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
layout="inline"
>
<Form.Item label="名字" name="name"> <Form.Item label="名字" name="name">
<!-- TODO @puhui999貌似不一定 240看着和 schema 还是不太一样 -->
<Input <Input
v-model:value="queryParams.name" v-model:value="queryParams.name"
placeholder="请输入名字" placeholder="请输入名字"
@ -126,9 +148,17 @@ onMounted(() => {
/> />
</Form.Item> </Form.Item>
<Form.Item label="性别" name="sex"> <Form.Item label="性别" name="sex">
<Select v-model:value="queryParams.sex" placeholder="请选择性别" allow-clear class="!w-240px"> <Select
v-model:value="queryParams.sex"
placeholder="请选择性别"
allow-clear
class="!w-240px"
>
<Select.Option <Select.Option
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')" v-for="dict in getDictOptions(
DICT_TYPE.SYSTEM_USER_SEX,
'number',
)"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
@ -136,11 +166,23 @@ onMounted(() => {
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="创建时间" name="createTime"> <Form.Item label="创建时间" name="createTime">
<RangePicker v-model:value="queryParams.createTime" v-bind="getRangePickerDefaultProps()" class="!w-220px" /> <!-- TODO @puhui999这里有个红色的告警看看有办法处理哇 -->
<RangePicker
v-model:value="queryParams.createTime"
v-bind="getRangePickerDefaultProps()"
class="!w-220px"
/>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button class="ml-2" @click="handleQuery" :icon="h(Search)">搜索</Button> <!-- TODO @puhui999搜索和重置貌似样子和位置不太一样有木有办法一致 -->
<Button class="ml-2" @click="resetQuery" :icon="h(RefreshCw)">重置</Button> <!-- TODO @puhui999收齐展开好弄哇 -->
<Button class="ml-2" @click="handleQuery" :icon="h(Search)">
搜索
</Button>
<Button class="ml-2" @click="resetQuery" :icon="h(RefreshCw)">
重置
</Button>
<!-- TODO @puhui999有办法放到 VxeTable 哪里么 -->
<Button <Button
class="ml-2" class="ml-2"
:icon="h(Plus)" :icon="h(Plus)"
@ -165,6 +207,7 @@ onMounted(() => {
</ContentWrap> </ContentWrap>
<!-- 列表 --> <!-- 列表 -->
<!-- TODO @puhui999title 要不还是假起来 -->
<ContentWrap> <ContentWrap>
<VxeTable :data="list" show-overflow :loading="loading"> <VxeTable :data="list" show-overflow :loading="loading">
<VxeColumn field="id" title="编号" align="center" /> <VxeColumn field="id" title="编号" align="center" />
@ -210,6 +253,7 @@ onMounted(() => {
</VxeTable> </VxeTable>
<!-- 分页 --> <!-- 分页 -->
<div class="mt-2 flex justify-end"> <div class="mt-2 flex justify-end">
<!-- TODO @puhui999这个分页看着不太一致 -->
<Pagination <Pagination
:total="total" :total="total"
v-model:current="queryParams.pageNo" v-model:current="queryParams.pageNo"

View File

@ -1,19 +1,34 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
import type { Rule } from 'ant-design-vue/es/form'; import type { Rule } from 'ant-design-vue/es/form';
import { Tinymce as RichTextarea } from '#/components/tinymce'; import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
import { ImageUpload } from '#/components/upload';
import { useVbenModal } from '@vben/common-ui';
import { DatePicker, Form, Input, message, Radio, RadioGroup } from 'ant-design-vue';
import { createDemo01Contact, getDemo01Contact, updateDemo01Contact } from '#/api/infra/demo/demo01';
import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
const emit = defineEmits(['success']); import { useVbenModal } from '@vben/common-ui';
import {
DatePicker,
Form,
Input,
message,
Radio,
RadioGroup,
} from 'ant-design-vue';
import {
createDemo01Contact,
getDemo01Contact,
updateDemo01Contact,
} from '#/api/infra/demo/demo01';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload } from '#/components/upload';
import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
const emit = defineEmits(['success']); // TODO @puhui999emit
const formRef = ref(); const formRef = ref();
// TODO @puhui999labelColwrapperCol
const labelCol = { span: 5 }; const labelCol = { span: 5 };
const wrapperCol = { span: 13 }; const wrapperCol = { span: 13 };
const formData = ref<Partial<Demo01ContactApi.Demo01Contact>>({ const formData = ref<Partial<Demo01ContactApi.Demo01Contact>>({
@ -31,7 +46,9 @@ const rules: Record<string, Rule[]> = {
description: [{ required: true, message: '简介不能为空', trigger: 'blur' }], description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
}; };
const getTitle = computed(() => { const getTitle = computed(() => {
return formData.value?.id ? $t('ui.actionTitle.edit', ['示例联系人']) : $t('ui.actionTitle.create', ['示例联系人']); return formData.value?.id
? $t('ui.actionTitle.edit', ['示例联系人'])
: $t('ui.actionTitle.create', ['示例联系人']);
}); });
/** 重置表单 */ /** 重置表单 */
@ -54,7 +71,9 @@ const [Modal, modalApi] = useVbenModal({
// //
const data = formData.value as Demo01ContactApi.Demo01Contact; const data = formData.value as Demo01ContactApi.Demo01Contact;
try { try {
await (formData.value?.id ? updateDemo01Contact(data) : createDemo01Contact(data)); await (formData.value?.id
? updateDemo01Contact(data)
: createDemo01Contact(data));
// //
await modalApi.close(); await modalApi.close();
emit('success'); emit('success');
@ -72,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
// // TODO @puhui999
let data = modalApi.getData<Demo01ContactApi.Demo01Contact>(); let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
if (!data) { if (!data) {
return; return;
@ -92,7 +111,13 @@ const [Modal, modalApi] = useVbenModal({
<template> <template>
<Modal :title="getTitle"> <Modal :title="getTitle">
<Form ref="formRef" :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"> <Form
ref="formRef"
:model="formData"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<Form.Item label="名字" name="name"> <Form.Item label="名字" name="name">
<Input v-model:value="formData.name" placeholder="请输入名字" /> <Input v-model:value="formData.name" placeholder="请输入名字" />
</Form.Item> </Form.Item>
@ -108,7 +133,11 @@ const [Modal, modalApi] = useVbenModal({
</RadioGroup> </RadioGroup>
</Form.Item> </Form.Item>
<Form.Item label="出生年" name="birthday"> <Form.Item label="出生年" name="birthday">
<DatePicker v-model:value="formData.birthday" value-format="x" placeholder="选择出生年" /> <DatePicker
v-model:value="formData.birthday"
value-format="x"
placeholder="选择出生年"
/>
</Form.Item> </Form.Item>
<Form.Item label="简介" name="description"> <Form.Item label="简介" name="description">
<RichTextarea v-model="formData.description" height="500px" /> <RichTextarea v-model="formData.description" height="500px" />

View File

@ -1,15 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { SystemNotifyMessageApi } from '#/api/system/notify/message'; import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '#/utils/dict';
import { h, ref } from 'vue'; import { h, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils'; import { formatDateTime } from '@vben/utils';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const formData = ref<SystemNotifyMessageApi.NotifyMessage>(); const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
const [Description, descApi] = useDescription({ const [Description, descApi] = useDescription({
@ -32,12 +32,20 @@ const [Description, descApi] = useDescription({
{ {
field: 'templateType', field: 'templateType',
label: '消息类型', label: '消息类型',
content: (data) => h(DictTag, { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, value: data?.templateType }), content: (data) =>
h(DictTag, {
type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
value: data?.templateType,
}),
}, },
{ {
field: 'readStatus', field: 'readStatus',
label: '是否已读', label: '是否已读',
content: (data) => h(DictTag, { type: DICT_TYPE.INFRA_BOOLEAN_STRING, value: data?.readStatus }), content: (data) =>
h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: data?.readStatus,
}),
}, },
{ {
field: 'readTime', field: 'readTime',
@ -74,7 +82,11 @@ const [Modal, modalApi] = useVbenModal({
</script> </script>
<template> <template>
<Modal title="消息详情" :show-cancel-button="false" :show-confirm-button="false"> <Modal
title="消息详情"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Description /> <Description />
</Modal> </Modal>
</template> </template>

View File

@ -755,13 +755,13 @@ importers:
vue-router: vue-router:
specifier: 'catalog:' specifier: 'catalog:'
version: 4.5.0(vue@3.5.13(typescript@5.8.3)) version: 4.5.0(vue@3.5.13(typescript@5.8.3))
vxe-table:
specifier: 'catalog:'
version: 4.13.7(vue@3.5.13(typescript@5.8.3))
devDependencies: devDependencies:
'@types/crypto-js': '@types/crypto-js':
specifier: 'catalog:' specifier: 'catalog:'
version: 4.2.2 version: 4.2.2
'@types/lodash.clonedeep':
specifier: 'catalog:'
version: 4.5.9
apps/web-ele: apps/web-ele:
dependencies: dependencies: