BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 03d3239463702eaf99c52ff477ef8123dcf521bd

Authored by puhui999
1 parent ff39a2b5

【功能完善】INFRA：代码生成 vben5 antd 单表表单模版

Inline Side-by-side
Showing 2 changed files with 303 additions and 188 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/form.vue.vm
  View file @03d3239
@@ -7,7 +7,10 @@ import { Tinymce as RichTextarea } from '#/components/tinymce'; @@ -7,7 +7,10 @@ import { Tinymce as RichTextarea } from '#/components/tinymce';
7 import { ImageUpload, FileUpload } from "#/components/upload"; 7 import { ImageUpload, FileUpload } from "#/components/upload";
8 import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue'; 8 import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue';
9 import { DICT_TYPE, getDictOptions } from '#/utils/dict'; 9 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
10 - 10 +#if($table.templateType == 2)## 树表需要导入这些
  11 +import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
  12 +import { handleTree } from '#/utils/tree';
  13 +#end
11 ## 特殊：主子表专属逻辑 14 ## 特殊：主子表专属逻辑
12 #if ( $table.templateType == 10 || $table.templateType == 12 ) 15 #if ( $table.templateType == 10 || $table.templateType == 12 )
13 #foreach ($subSimpleClassName in $subSimpleClassNames) 16 #foreach ($subSimpleClassName in $subSimpleClassNames)
@@ -44,29 +47,19 @@ const rules: Record<string, Rule[]> = { @@ -44,29 +47,19 @@ const rules: Record<string, Rule[]> = {
44 #end 47 #end
45 #end 48 #end
46 }; 49 };
47 -#if (${table.templateType} == 2)## 树表特有：父ID处理  
48 -const parentId = ref<number>(); // 新增下级时的父级 ID  
49 -  
50 -const getTitle = computed(() => {  
51 - if (formData.value?.id) {  
52 - return $t('ui.actionTitle.edit', ['${table.classComment}']);  
53 - }  
54 - return parentId.value  
55 - ? $t('ui.actionTitle.create', ['下级${table.classComment}'])  
56 - : $t('ui.actionTitle.create', ['${table.classComment}']);  
57 -});  
58 -#else## 标准表标题 50 +## 特殊：树表专属逻辑
  51 +#if ( $table.templateType == 2 )
  52 +const ${classNameVar}Tree = ref<any[]>([]) // 树形结构
  53 +#end
59 const getTitle = computed(() => { 54 const getTitle = computed(() => {
60 return formData.value?.id 55 return formData.value?.id
61 ? $t('ui.actionTitle.edit', ['${table.classComment}']) 56 ? $t('ui.actionTitle.edit', ['${table.classComment}'])
62 : $t('ui.actionTitle.create', ['${table.classComment}']); 57 : $t('ui.actionTitle.create', ['${table.classComment}']);
63 }); 58 });
64 -#end  
65 59
66 ## 特殊：主子表专属逻辑 60 ## 特殊：主子表专属逻辑
67 #if ( $table.templateType == 10 || $table.templateType == 12 ) 61 #if ( $table.templateType == 10 || $table.templateType == 12 )
68 #if ( $subTables && $subTables.size() > 0 ) 62 #if ( $subTables && $subTables.size() > 0 )
69 -  
70 /** 子表的表单 */ 63 /** 子表的表单 */
71 const subTabsName = ref('$subClassNameVars.get(0)') 64 const subTabsName = ref('$subClassNameVars.get(0)')
72 #foreach ($subClassNameVar in $subClassNameVars) 65 #foreach ($subClassNameVar in $subClassNameVars)
@@ -77,6 +70,34 @@ const getTitle = computed(() =&gt; { @@ -77,6 +70,34 @@ const getTitle = computed(() =&gt; {
77 #end 70 #end
78 #end 71 #end
79 72
  73 +/** 重置表单 */
  74 +const resetForm = () => {
  75 + formData.value = {
  76 + #foreach ($column in $columns)
  77 + #if ($column.createOperation || $column.updateOperation)
  78 + #if ($column.htmlType == "checkbox")
  79 + $column.javaField: [],
  80 + #else
  81 + $column.javaField: undefined,
  82 + #end
  83 + #end
  84 + #end
  85 + };
  86 + formRef.value?.resetFields();
  87 +}
  88 +
  89 +## 特殊：树表专属逻辑
  90 +#if ( $table.templateType == 2 )
  91 +/** 获得${table.classComment}树 */
  92 +const get${simpleClassName}Tree = async () => {
  93 + ${classNameVar}Tree.value = []
  94 + const data = await get${simpleClassName}List()
  95 + const root: Tree = { id: 0, name: '顶级${table.classComment}', children: [] }
  96 + root.children = handleTree(data, 'id', '${treeParentColumn.javaField}')
  97 + ${classNameVar}Tree.value.push(root)
  98 +}
  99 +#end
  100 +
80 const [Modal, modalApi] = useVbenModal({ 101 const [Modal, modalApi] = useVbenModal({
81 async onConfirm() { 102 async onConfirm() {
82 await formRef.value?.validate(); 103 await formRef.value?.validate();
@@ -101,7 +122,7 @@ const [Modal, modalApi] = useVbenModal({ @@ -101,7 +122,7 @@ const [Modal, modalApi] = useVbenModal({
101 #end 122 #end
102 modalApi.lock(); 123 modalApi.lock();
103 // 提交表单 124 // 提交表单
104 - const data = formData.value; 125 + const data = formData.value as ${simpleClassName}Api.${simpleClassName};
105 ## 特殊：主子表专属逻辑 126 ## 特殊：主子表专属逻辑
106 #if ( $table.templateType == 10 || $table.templateType == 12 ) 127 #if ( $table.templateType == 10 || $table.templateType == 12 )
107 #if ( $subTables && $subTables.size() > 0 ) 128 #if ( $subTables && $subTables.size() > 0 )
@@ -132,18 +153,7 @@ const [Modal, modalApi] = useVbenModal({ @@ -132,18 +153,7 @@ const [Modal, modalApi] = useVbenModal({
132 }, 153 },
133 async onOpenChange(isOpen: boolean) { 154 async onOpenChange(isOpen: boolean) {
134 if (!isOpen) { 155 if (!isOpen) {
135 - formData.value = {  
136 - #foreach ($column in $columns)  
137 - #if ($column.createOperation || $column.updateOperation)  
138 - #if ($column.htmlType == "checkbox")  
139 - $column.javaField: [],  
140 - #else  
141 - $column.javaField: undefined,  
142 - #end  
143 - #end  
144 - #end  
145 - };  
146 - formRef.value?.resetFields(); 156 + resetForm()
147 return; 157 return;
148 } 158 }
149 159
@@ -160,8 +170,11 @@ const [Modal, modalApi] = useVbenModal({ @@ -160,8 +170,11 @@ const [Modal, modalApi] = useVbenModal({
160 modalApi.lock(false); 170 modalApi.lock(false);
161 } 171 }
162 } 172 }
163 - // 设置到 values  
164 formData.value = data; 173 formData.value = data;
  174 +#if ( $table.templateType == 2 )
  175 + // 加载树数据
  176 + await get${simpleClassName}Tree()
  177 +#end
165 }, 178 },
166 }); 179 });
167 </script> 180 </script>
@@ -180,7 +193,6 @@ const [Modal, modalApi] = useVbenModal({ @@ -180,7 +193,6 @@ const [Modal, modalApi] = useVbenModal({
180 #set ($dictType = $column.dictType) 193 #set ($dictType = $column.dictType)
181 #set ($javaField = $column.javaField) 194 #set ($javaField = $column.javaField)
182 #set ($javaType = $column.javaType) 195 #set ($javaType = $column.javaType)
183 - #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})  
184 #set ($comment = $column.columnComment) 196 #set ($comment = $column.columnComment)
185 #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short") 197 #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
186 #set ($dictMethod = "number") 198 #set ($dictMethod = "number")
@@ -224,14 +236,14 @@ const [Modal, modalApi] = useVbenModal({ @@ -224,14 +236,14 @@ const [Modal, modalApi] = useVbenModal({
224 <Form.Item label="${comment}" name="${javaField}"> 236 <Form.Item label="${comment}" name="${javaField}">
225 <Select v-model:value="formData.${javaField}" placeholder="请选择${comment}"> 237 <Select v-model:value="formData.${javaField}" placeholder="请选择${comment}">
226 #if ("" != $dictType)## 有数据字典 238 #if ("" != $dictType)## 有数据字典
227 - <SelectOption 239 + <Select.Option
228 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" 240 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
229 :key="dict.value" 241 :key="dict.value"
230 :label="dict.label" 242 :label="dict.label"
231 :value="dict.value" 243 :value="dict.value"
232 /> 244 />
233 #else##没数据字典 245 #else##没数据字典
234 - <SelectOption label="请选择字典生成" value="" /> 246 + <Select.Option label="请选择字典生成" value="" />
235 #end 247 #end
236 </Select> 248 </Select>
237 </Form.Item> 249 </Form.Item>
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/index.vue.vm
  View file @03d3239
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 -import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';  
3 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 2 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
4 3
5 import { Page, useVbenModal } from '@vben/common-ui'; 4 import { Page, useVbenModal } from '@vben/common-ui';
6 -import { Button, message,Tabs } from 'ant-design-vue';  
7 -import { Download, Plus } from '@vben/icons';  
8 -import Form from './modules/form.vue'; 5 +import { formatDateTime } from '@vben/utils';
  6 +import { Button, message,Tabs,Pagination,Form,RangePicker,DatePicker,Select,Input } from 'ant-design-vue';
  7 +import { DictTag } from '#/components/dict-tag';
  8 +import { DICT_TYPE, getDictOptions } from '#/utils/dict';
  9 +import ${simpleClassName}Form from './modules/form.vue';
  10 +import { Download, Plus, RefreshCw, Search } from '@vben/icons';
  11 +import { ContentWrap } from "#/components/content-wrap";
  12 +import { VxeColumn, VxeTable } from 'vxe-table';
  13 +import { getRangePickerDefaultProps } from '#/utils/date';
9 14
10 ## 特殊：主子表专属逻辑 15 ## 特殊：主子表专属逻辑
11 #if ( $table.templateType == 11 || $table.templateType == 12 ) 16 #if ( $table.templateType == 11 || $table.templateType == 12 )
@@ -16,18 +21,16 @@ import Form from &#39;./modules/form.vue&#39;; @@ -16,18 +21,16 @@ import Form from &#39;./modules/form.vue&#39;;
16 #end 21 #end
17 #end 22 #end
18 23
19 -import { ref, h } from 'vue'; 24 +import { ref, h, reactive,onMounted } from 'vue';
20 import { $t } from '#/locales'; 25 import { $t } from '#/locales';
21 -import { useVbenVxeGrid } from '#/adapter/vxe-table';  
22 #if (${table.templateType} == 2)## 树表接口 26 #if (${table.templateType} == 2)## 树表接口
  27 +import { handleTree } from '@/utils/tree'
23 import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 28 import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
24 #else## 标准表接口 29 #else## 标准表接口
25 import { get${simpleClassName}Page, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 30 import { get${simpleClassName}Page, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
26 #end 31 #end
27 import { downloadByData } from '#/utils/download'; 32 import { downloadByData } from '#/utils/download';
28 33
29 -import { useGridColumns, useGridFormSchema } from './data';  
30 -  
31 #if ($table.templateType == 12 || $table.templateType == 11) ## 内嵌和erp情况 34 #if ($table.templateType == 12 || $table.templateType == 11) ## 内嵌和erp情况
32 /** 子表的列表 */ 35 /** 子表的列表 */
33 const subTabsName = ref('$subClassNameVars.get(0)') 36 const subTabsName = ref('$subClassNameVars.get(0)')
@@ -36,29 +39,67 @@ const select${simpleClassName} = ref&lt;${simpleClassName}Api.${simpleClassName}&gt;() @@ -36,29 +39,67 @@ const select${simpleClassName} = ref&lt;${simpleClassName}Api.${simpleClassName}&gt;()
36 #end 39 #end
37 #end 40 #end
38 41
39 -const [FormModal, formModalApi] = useVbenModal({  
40 - connectedComponent: Form,  
41 - destroyOnClose: true,  
42 -}); 42 +const loading = ref(true) // 列表的加载中
  43 +const list = ref<${simpleClassName}Api.${simpleClassName}[]>([]) // 列表的数据
  44 +## 特殊：树表专属逻辑（树不需要分页接口）
  45 +#if ( $table.templateType != 2 )
  46 +const total = ref(0) // 列表的总页数
  47 +#end
  48 +const queryParams = reactive({
  49 +## 特殊：树表专属逻辑（树不需要分页接口）
  50 +#if ( $table.templateType != 2 )
  51 + pageNo: 1,
  52 + pageSize: 10,
  53 +#end
  54 +#foreach ($column in $columns)
  55 + #if ($column.listOperation)
  56 + #if ($column.listOperationCondition != 'BETWEEN')
  57 + $column.javaField: undefined,
  58 + #end
  59 + #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
  60 + $column.javaField: undefined,
  61 + #end
  62 + #end
  63 +#end
  64 +})
  65 +const queryFormRef = ref() // 搜索的表单
  66 +const exportLoading = ref(false) // 导出的加载中
43 67
44 -#if (${table.templateType} == 2)## 树表特有：控制表格展开收缩  
45 -/** 切换树形展开/收缩状态 */  
46 -const isExpanded = ref(true);  
47 -function toggleExpand() {  
48 - isExpanded.value = !isExpanded.value;  
49 - gridApi.grid.setAllTreeExpand(isExpanded.value); 68 +/** 查询列表 */
  69 +const getList = async () => {
  70 + loading.value = true
  71 + try {
  72 + ## 特殊：树表专属逻辑（树不需要分页接口）
  73 + #if ( $table.templateType == 2 )
  74 + const data = await get${simpleClassName}List(queryParams)
  75 + list.value = handleTree(data, 'id', '${treeParentColumn.javaField}')
  76 + #else
  77 + const data = await get${simpleClassName}Page(queryParams)
  78 + list.value = data.list
  79 + total.value = data.total
  80 + #end
  81 + } finally {
  82 + loading.value = false
  83 + }
50 } 84 }
51 -#end  
52 85
53 -/** 刷新表格 */  
54 -function onRefresh() {  
55 -#if ($table.templateType == 12) ## 内嵌情况  
56 - gridApi.reload();  
57 -#else  
58 - gridApi.query();  
59 -#end 86 +/** 搜索按钮操作 */
  87 +const handleQuery = () => {
  88 + queryParams.pageNo = 1
  89 + getList()
  90 +}
  91 +
  92 +/** 重置按钮操作 */
  93 +const resetQuery = () => {
  94 + queryFormRef.value.resetFields()
  95 + handleQuery()
60 } 96 }
61 97
  98 +const [FormModal, formModalApi] = useVbenModal({
  99 + connectedComponent: ${simpleClassName}Form,
  100 + destroyOnClose: true,
  101 +});
  102 +
62 /** 创建${table.classComment} */ 103 /** 创建${table.classComment} */
63 function onCreate() { 104 function onCreate() {
64 formModalApi.setData({}).open(); 105 formModalApi.setData({}).open();
@@ -89,7 +130,7 @@ async function onDelete(row: ${simpleClassName}Api.${simpleClassName}) { @@ -89,7 +130,7 @@ async function onDelete(row: ${simpleClassName}Api.${simpleClassName}) {
89 content: $t('ui.actionMessage.deleteSuccess', [row.id]), 130 content: $t('ui.actionMessage.deleteSuccess', [row.id]),
90 key: 'action_process_msg', 131 key: 'action_process_msg',
91 }); 132 });
92 - onRefresh(); 133 + await getList();
93 } catch { 134 } catch {
94 hideLoading(); 135 hideLoading();
95 } 136 }
@@ -97,147 +138,209 @@ async function onDelete(row: ${simpleClassName}Api.${simpleClassName}) { @@ -97,147 +138,209 @@ async function onDelete(row: ${simpleClassName}Api.${simpleClassName}) {
97 138
98 /** 导出表格 */ 139 /** 导出表格 */
99 async function onExport() { 140 async function onExport() {
100 - const data = await export${simpleClassName}(await gridApi.formApi.getValues()); 141 +try {
  142 + exportLoading.value = true;
  143 + const data = await export${simpleClassName}(queryParams);
101 downloadByData(data, '${table.classComment}.xls'); 144 downloadByData(data, '${table.classComment}.xls');
  145 +}finally {
  146 + exportLoading.value = false;
102 } 147 }
103 -  
104 -/** 表格操作按钮的回调函数 */  
105 -function onActionClick({  
106 - code,  
107 - row,  
108 -}: OnActionClickParams<${simpleClassName}Api.${simpleClassName}>) {  
109 - switch (code) {  
110 - #if (${table.templateType} == 2)## 树表特有：新增下级  
111 - case 'append': {  
112 - onAppend(row);  
113 - break;  
114 - }  
115 - #end  
116 - case 'edit': {  
117 - onEdit(row);  
118 - break;  
119 - }  
120 - case 'delete': {  
121 - onDelete(row);  
122 - break;  
123 - }  
124 - }  
125 } 148 }
126 149
127 -const [Grid, gridApi] = useVbenVxeGrid({  
128 - formOptions: {  
129 - schema: useGridFormSchema(),  
130 - },  
131 - gridOptions: {  
132 - columns: useGridColumns(onActionClick),  
133 -#if (${table.templateType} == 11)  
134 - height: '600px',  
135 -#else  
136 - height: 'auto',  
137 -#end  
138 -#if (${table.templateType} == 2)## 树表设置  
139 - treeConfig: {  
140 - parentField: '${treeParentColumn.javaField}',  
141 - rowField: 'id',  
142 - transform: true,  
143 - expandAll: true,  
144 - reserve: true,  
145 - },  
146 - pagerConfig: {  
147 - enabled: false,  
148 - },  
149 -#else## 标准表设置  
150 - pagerConfig: {  
151 - enabled: true,  
152 - },  
153 -#end  
154 - proxyConfig: {  
155 - ajax: {  
156 -#if (${table.templateType} == 2)## 树表数据加载  
157 - query: async (_, formValues) => {  
158 - return await get${simpleClassName}List(formValues);  
159 - },  
160 -#else## 标准表数据加载  
161 - query: async ({ page }, formValues) => {  
162 - return await get${simpleClassName}Page({  
163 - pageNo: page.currentPage,  
164 - pageSize: page.pageSize,  
165 - ...formValues,  
166 - });  
167 - },  
168 -#end  
169 - },  
170 - },  
171 - rowConfig: {  
172 - keyField: 'id',  
173 - isHover: true,  
174 -#if (${table.templateType} == 11)  
175 - isCurrent: true,  
176 -#end  
177 - },  
178 - toolbarConfig: {  
179 - refresh: { code: 'query' },  
180 - search: true,  
181 - },  
182 - } as VxeTableGridOptions<${simpleClassName}Api.${simpleClassName}>,  
183 -#if (${table.templateType} == 11)  
184 - gridEvents:{  
185 - cellClick: ({ row }: { row: ${simpleClassName}Api.${simpleClassName}}) => {  
186 - select${simpleClassName}.value = row;  
187 - },  
188 - }  
189 -#end  
190 -}); 150 +/** 初始化 **/
  151 +onMounted(() => {
  152 + getList()
  153 +})
191 </script> 154 </script>
192 155
193 <template> 156 <template>
194 <Page auto-content-height> 157 <Page auto-content-height>
195 - <FormModal @success="onRefresh" /> 158 + <FormModal @success="getList" />
196 159
197 -#if ($table.templateType == 11) ## erp情况  
198 - <div>  
199 -#end  
200 - <Grid table-title="${table.classComment}列表">  
201 - #if ($table.templateType == 12) ## 内嵌情况  
202 - <template #expand_content="{ row }">  
203 - <!-- 子表的表单 -->  
204 - <Tabs v-model:active-key="subTabsName" class="mx-8">  
205 - #foreach ($subTable in $subTables)  
206 - #set ($index = $foreach.count - 1)  
207 - #set ($subClassNameVar = $subClassNameVars.get($index))  
208 - #set ($subSimpleClassName = $subSimpleClassNames.get($index))  
209 - #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))  
210 - <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render>  
211 - <${subSimpleClassName}List :${subJoinColumn_strikeCase}="row?.id" />  
212 - </Tabs.TabPane>  
213 - #end  
214 - </Tabs> 160 + <ContentWrap>
  161 + <!-- 搜索工作栏 -->
  162 + <Form
  163 + class="-mb-15px"
  164 + :model="queryParams"
  165 + ref="queryFormRef"
  166 + layout="inline"
  167 + >
  168 + #foreach($column in $columns)
  169 + #if ($column.listOperation)
  170 + #set ($dictType = $column.dictType)
  171 + #set ($javaField = $column.javaField)
  172 + #set ($javaType = $column.javaType)
  173 + #set ($comment = $column.columnComment)
  174 + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
  175 + #set ($dictMethod = "number")
  176 + #elseif ($javaType == "String")
  177 + #set ($dictMethod = "string")
  178 + #elseif ($javaType == "Boolean")
  179 + #set ($dictMethod = "boolean")
  180 + #end
  181 + #if ($column.htmlType == "input")
  182 + <Form.Item label="${comment}" name="${javaField}">
  183 + <Input
  184 + v-model:value="queryParams.${javaField}"
  185 + placeholder="请输入${comment}"
  186 + allowClear
  187 + @pressEnter="handleQuery"
  188 + class="!w-240px"
  189 + />
  190 + </Form.Item>
  191 + #elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
  192 + <Form.Item label="${comment}" name="${javaField}">
  193 + <Select
  194 + v-model:value="queryParams.${javaField}"
  195 + placeholder="请选择${comment}"
  196 + allowClear
  197 + class="!w-240px"
  198 + >
  199 + #if ("" != $dictType)## 设置了 dictType 数据字典的情况
  200 + <Select.Option
  201 + v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
  202 + :key="dict.value"
  203 + :label="dict.label"
  204 + :value="dict.value"
  205 + />
  206 + #else## 未设置 dictType 数据字典的情况
  207 + <Select.Option label="请选择字典生成" value="" />
  208 + #end
  209 + </Select>
  210 + </Form.Item>
  211 + #elseif($column.htmlType == "datetime")
  212 + #if ($column.listOperationCondition != "BETWEEN")## 非范围
  213 + <Form.Item label="${comment}" name="${javaField}">
  214 + <DatePicker
  215 + v-model:value="queryParams.${javaField}"
  216 + valueFormat="YYYY-MM-DD"
  217 + placeholder="选择${comment}"
  218 + allowClear
  219 + class="!w-240px"
  220 + />
  221 + </Form.Item>
  222 + #else## 范围
  223 + <Form.Item label="${comment}" name="${javaField}">
  224 + <RangePicker
  225 + v-model:value="queryParams.${javaField}"
  226 + v-bind="getRangePickerDefaultProps()"
  227 + class="!w-220px"
  228 + />
  229 + </Form.Item>
  230 + #end
  231 + #end
  232 + #end
  233 + #end
  234 + <Form.Item>
  235 + <Button class="ml-2" @click="handleQuery" :icon="h(Search)">搜索</Button>
  236 + <Button class="ml-2" @click="resetQuery" :icon="h(RefreshCw)">重置</Button>
  237 + <Button
  238 + class="ml-2"
  239 + :icon="h(Plus)"
  240 + type="primary"
  241 + @click="onCreate"
  242 + v-access:code="['${permissionPrefix}:create']"
  243 + >
  244 + {{ $t('ui.actionTitle.create', ['示例联系人']) }}
  245 + </Button>
  246 + <Button
  247 + :icon="h(Download)"
  248 + type="primary"
  249 + class="ml-2"
  250 + :loading="exportLoading"
  251 + @click="onExport"
  252 + v-access:code="['${permissionPrefix}:export']"
  253 + >
  254 + {{ $t('ui.actionTitle.export') }}
  255 + </Button>
  256 + </Form.Item>
  257 + </Form>
  258 + </ContentWrap>
  259 +
  260 + <!-- 列表 -->
  261 + <ContentWrap>
  262 + <vxe-table :data="list" show-overflow :loading="loading">
  263 + ## 特殊：主子表专属逻辑
  264 + #if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 )
  265 + <!-- 子表的列表 -->
  266 + <vxe-column type="expand" width="60">
  267 + <template #content="{ row }">
  268 + <!-- 子表的表单 -->
  269 + <Tabs v-model:active-key="subTabsName" class="mx-8">
  270 + #foreach ($subTable in $subTables)
  271 + #set ($index = $foreach.count - 1)
  272 + #set ($subClassNameVar = $subClassNameVars.get($index))
  273 + #set ($subSimpleClassName = $subSimpleClassNames.get($index))
  274 + #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
  275 + <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render>
  276 + <${subSimpleClassName}List :${subJoinColumn_strikeCase}="row?.id" />
  277 + </Tabs.TabPane>
  278 + #end
  279 + </Tabs>
  280 + </template>
  281 + </vxe-column>
  282 + #end
  283 + #foreach($column in $columns)
  284 + #if ($column.listOperationResult)
  285 + #set ($dictType=$column.dictType)
  286 + #set ($javaField = $column.javaField)
  287 + #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  288 + #set ($comment=$column.columnComment)
  289 + #if ($column.javaType == "LocalDateTime")## 时间类型
  290 + <vxe-column field="${javaField}" title="${comment}" align="center">
  291 + <template #default="{row}">
  292 + {{formatDateTime(row.${javaField})}}
  293 + </template>
  294 + </vxe-column>
  295 + #elseif($column.dictType && "" != $column.dictType)## 数据字典
  296 + <vxe-column field="${javaField}" title="${comment}" align="center">
  297 + <template #default="{row}">
  298 + <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
  299 + </template>
  300 + </vxe-column>
  301 + #else
  302 + <vxe-column field="${javaField}" title="${comment}" align="center" />
  303 + #end
  304 + #end
  305 + #end
  306 + <vxe-column field="operation" title="操作" align="center">
  307 + <template #default="{row}">
  308 + <Button
  309 + size="small"
  310 + type="link"
  311 + @click="onEdit(row as any)"
  312 + v-access:code="['${permissionPrefix}:update']"
  313 + >
  314 + {{ $t('ui.actionTitle.edit') }}
  315 + </Button>
  316 + <Button
  317 + size="small"
  318 + type="link"
  319 + class="ml-2"
  320 + @click="onDelete(row as any)"
  321 + v-access:code="['${permissionPrefix}:delete']"
  322 + >
  323 + {{ $t('ui.actionTitle.delete') }}
  324 + </Button>
215 </template> 325 </template>
216 - #end  
217 - <template #toolbar-tools>  
218 -#if (${table.templateType} == 2)## 树表特有：展开/收缩按钮  
219 - <Button @click="toggleExpand" class="mr-2">  
220 - {{ isExpanded ? '收缩' : '展开' }}  
221 - </Button>  
222 -#end  
223 - <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:create']">  
224 - {{ $t('ui.actionTitle.create', ['${table.classComment}']) }}  
225 - </Button>  
226 - <Button  
227 - :icon="h(Download)"  
228 - type="primary"  
229 - class="ml-2"  
230 - @click="onExport"  
231 - v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:export']"  
232 - >  
233 - {{ $t('ui.actionTitle.export') }}  
234 - </Button>  
235 - </template>  
236 - </Grid> 326 + </vxe-column>
  327 + </vxe-table>
  328 + <!-- 分页 -->
  329 + <div class="mt-2 flex justify-end">
  330 + <Pagination
  331 + :total="total"
  332 + v-model:current="queryParams.pageNo"
  333 + v-model:page-size="queryParams.pageSize"
  334 + show-size-changer
  335 + @change="getList"
  336 + />
  337 + </div>
  338 + </ContentWrap>
237 339
238 #if ($table.templateType == 11) ## erp情况 340 #if ($table.templateType == 11) ## erp情况
  341 + <ContentWrap>
239 <!-- 子表的表单 --> 342 <!-- 子表的表单 -->
240 - <Tabs v-model:active-key="subTabsName" class="mt-2"> 343 + <Tabs v-model:active-key="subTabsName">
241 #foreach ($subTable in $subTables) 344 #foreach ($subTable in $subTables)
242 #set ($index = $foreach.count - 1) 345 #set ($index = $foreach.count - 1)
243 #set ($subClassNameVar = $subClassNameVars.get($index)) 346 #set ($subClassNameVar = $subClassNameVars.get($index))
@@ -248,7 +351,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ @@ -248,7 +351,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
248 </Tabs.TabPane> 351 </Tabs.TabPane>
249 #end 352 #end
250 </Tabs> 353 </Tabs>
251 - </div> 354 + </ContentWrap>
252 #end 355 #end
253 </Page> 356 </Page>
254 </template> 357 </template>