review:【INFRA】标准的代码生成
							parent
							
								
									e4267573e9
								
							
						
					
					
						commit
						7a9df83d71
					
				|  | @ -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'; | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -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> | ||||||
|  |  | ||||||
|  | @ -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', | ||||||
|  |  | ||||||
|  | @ -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 @puhui999:title 要不还是假起来? --> | ||||||
|     <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" | ||||||
|  |  | ||||||
|  | @ -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 @puhui999:emit 和下面空一行? | ||||||
| const formRef = ref(); | const formRef = ref(); | ||||||
|  | // TODO @puhui999:labelCol、wrapperCol 直接写?不用单独定义变量, | ||||||
| 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" /> | ||||||
|  |  | ||||||
|  | @ -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> | ||||||
|  |  | ||||||
|  | @ -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: | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 YunaiV
						YunaiV