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