BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 9b39f86718482f80f7819ef434e2533e0137b01e

Authored by puhui999
1 parent 68c80336

feat: 新增 vben5-ele-general 代码生成模板

Inline Side-by-side
Showing 8 changed files with 389 additions and 381 deletions
yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
  View file @9b39f86
... ... @@ -201,6 +201,23 @@ public class CodegenEngine {
201 201 vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
202 202 .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_SCHEMA.getType(), vue3Vben5EpSchemaTemplatePath("views/modules/list_sub_erp.vue"), // 特殊：主子表专属逻辑
203 203 vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
  204 + // VUE3_VBEN5_EP
  205 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/index.vue"),
  206 + vue3FilePath("views/${table.moduleName}/${table.businessName}/index.vue"))
  207 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/form.vue"),
  208 + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/form.vue"))
  209 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("api/api.ts"),
  210 + vue3FilePath("api/${table.moduleName}/${table.businessName}/index.ts"))
  211 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/form_sub_normal.vue"), // 特殊：主子表专属逻辑
  212 + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-form.vue"))
  213 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/form_sub_inner.vue"), // 特殊：主子表专属逻辑
  214 + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-form.vue"))
  215 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/form_sub_erp.vue"), // 特殊：主子表专属逻辑
  216 + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-form.vue"))
  217 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/list_sub_inner.vue"), // 特殊：主子表专属逻辑
  218 + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
  219 + .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/list_sub_erp.vue"), // 特殊：主子表专属逻辑
  220 + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
204 221 .build();
205 222  
206 223 @Resource
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/form.vue.vm
  View file @9b39f86
1 1 <script lang="ts" setup>
2 2 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
3   -import type { Rule } from 'ant-design-vue/es/form';
  3 +import type { FormRules } from 'element-plus';
4 4  
5 5 import { useVbenModal } from '@vben/common-ui';
6 6 import { Tinymce as RichTextarea } from '#/components/tinymce';
7 7 import { ImageUpload, FileUpload } from "#/components/upload";
8   -import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
  8 +import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus';
9 9 import { DICT_TYPE, getDictOptions } from '#/utils';
10 10 #if($table.templateType == 2)## 树表需要导入这些
11   -import { get${simpleClassName}List } from '#/api/${table.moduleName}/${table.businessName}';
  11 +import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
12 12 import { handleTree } from '@vben/utils'
13 13 #end
14 14 ## 特殊：主子表专属逻辑
... ... @@ -20,9 +20,9 @@ import { handleTree } from &#39;@vben/utils&#39;
20 20 #end
21 21 #end
22 22  
23   -import { computed, ref } from 'vue';
  23 +import { computed, ref, reactive } from 'vue';
24 24 import { $t } from '#/locales';
25   -import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
  25 +import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
26 26  
27 27 const emit = defineEmits(['success']);
28 28  
... ... @@ -38,14 +38,14 @@ const formData = ref&lt;Partial&lt;${simpleClassName}Api.${simpleClassName}&gt;&gt;({
38 38 #end
39 39 #end
40 40 });
41   -const rules: Record<string, Rule[]> = {
  41 +const rules = reactive<FormRules>({
42 42 #foreach ($column in $columns)
43 43 #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
44 44 #set($comment=$column.columnComment)
45 45 $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
46 46 #end
47 47 #end
48   -};
  48 +});
49 49 ## 特殊：树表专属逻辑
50 50 #if ( $table.templateType == 2 )
51 51 const ${classNameVar}Tree = ref<any[]>([]) // 树形结构
... ... @@ -145,10 +145,7 @@ const [Modal, modalApi] = useVbenModal({
145 145 // 关闭并提示
146 146 await modalApi.close();
147 147 emit('success');
148   - message.success({
149   - content: $t('ui.actionMessage.operationSuccess'),
150   - key: 'action_process_msg',
151   - });
  148 + ElMessage.success($t('ui.actionMessage.operationSuccess'));
152 149 } finally {
153 150 modalApi.unlock();
154 151 }
... ... @@ -182,12 +179,12 @@ const [Modal, modalApi] = useVbenModal({
182 179  
183 180 <template>
184 181 <Modal :title="getTitle">
185   - <Form
  182 + <el-form
186 183 ref="formRef"
187 184 :model="formData"
188 185 :rules="rules"
189   - :label-col="{ span: 5 }"
190   - :wrapper-col="{ span: 18 }"
  186 + label-width="120px"
  187 + label-position="right"
191 188 >
192 189 #foreach($column in $columns)
193 190 #if ($column.createOperation || $column.updateOperation)
... ... @@ -203,122 +200,121 @@ const [Modal, modalApi] = useVbenModal({
203 200 #set ($dictMethod = "boolean")
204 201 #end
205 202 #if ( $table.templateType == 2 && $column.id == $treeParentColumn.id )
206   - <Form.Item label="${comment}" name="${javaField}">
207   - <TreeSelect
208   - v-model:value="formData.${javaField}"
209   - :treeData="${classNameVar}Tree"
  203 + <el-form-item label="${comment}" prop="${javaField}">
  204 + <el-tree-select
  205 + v-model="formData.${javaField}"
  206 + :data="${classNameVar}Tree"
210 207 #if ($treeNameColumn.javaField == "name")
211   - :fieldNames="{
  208 + :props="{
212 209 label: 'name',
213 210 value: 'id',
214 211 children: 'children',
215 212 }"
216 213 #else
217   - :fieldNames="{
  214 + :props="{
218 215 label: '$treeNameColumn.javaField',
219 216 value: 'id',
220 217 children: 'children',
221 218 }"
222 219 #end
223   - checkable
224   - treeDefaultExpandAll
  220 + check-strictly
  221 + default-expand-all
225 222 placeholder="请选择${comment}"
226 223 />
227   - </Form.Item>
  224 + </el-form-item>
228 225 #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
229   - <Form.Item label="${comment}" name="${javaField}">
230   - <Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
231   - </Form.Item>
  226 + <el-form-item label="${comment}" prop="${javaField}">
  227 + <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
  228 + </el-form-item>
232 229 #elseif($column.htmlType == "imageUpload")## 图片上传
233   - <Form.Item label="${comment}" name="${javaField}">
234   - <ImageUpload v-model:value="formData.${javaField}" />
235   - </Form.Item>
  230 + <el-form-item label="${comment}" prop="${javaField}">
  231 + <ImageUpload v-model="formData.${javaField}" />
  232 + </el-form-item>
236 233 #elseif($column.htmlType == "fileUpload")## 文件上传
237   - <Form.Item label="${comment}" name="${javaField}">
238   - <FileUpload v-model:value="formData.${javaField}" />
239   - </Form.Item>
  234 + <el-form-item label="${comment}" prop="${javaField}">
  235 + <FileUpload v-model="formData.${javaField}" />
  236 + </el-form-item>
240 237 #elseif($column.htmlType == "editor")## 文本编辑器
241   - <Form.Item label="${comment}" name="${javaField}">
  238 + <el-form-item label="${comment}" prop="${javaField}">
242 239 <RichTextarea v-model="formData.${javaField}" height="500px" />
243   - </Form.Item>
  240 + </el-form-item>
244 241 #elseif($column.htmlType == "select")## 下拉框
245   - <Form.Item label="${comment}" name="${javaField}">
246   - <Select v-model:value="formData.${javaField}" placeholder="请选择${comment}">
  242 + <el-form-item label="${comment}" prop="${javaField}">
  243 + <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
247 244 #if ("" != $dictType)## 有数据字典
248   - <Select.Option
  245 + <el-option
249 246 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
250 247 :key="dict.value"
251 248 :value="dict.value"
252   - >
253   - {{ dict.label }}
254   - </Select.Option>
  249 + :label="dict.label"
  250 + />
255 251 #else##没数据字典
256   - <Select.Option label="请选择字典生成" value="" />
  252 + <el-option label="请选择字典生成" value="" />
257 253 #end
258   - </Select>
259   - </Form.Item>
  254 + </el-select>
  255 + </el-form-item>
260 256 #elseif($column.htmlType == "checkbox")## 多选框
261   - <Form.Item label="${comment}" name="${javaField}">
262   - <CheckboxGroup v-model:value="formData.${javaField}">
  257 + <el-form-item label="${comment}" prop="${javaField}">
  258 + <el-checkbox-group v-model="formData.${javaField}">
263 259 #if ("" != $dictType)## 有数据字典
264   - <Checkbox
  260 + <el-checkbox
265 261 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
266 262 :key="dict.value"
267   - :value="dict.value"
  263 + :label="dict.value"
268 264 >
269 265 {{ dict.label }}
270   - </Checkbox>
  266 + </el-checkbox>
271 267 #else##没数据字典
272   - <Checkbox label="请选择字典生成" />
  268 + <el-checkbox label="请选择字典生成" />
273 269 #end
274   - </CheckboxGroup>
275   - </Form.Item>
  270 + </el-checkbox-group>
  271 + </el-form-item>
276 272 #elseif($column.htmlType == "radio")## 单选框
277   - <Form.Item label="${comment}" name="${javaField}">
278   - <RadioGroup v-model:value="formData.${javaField}">
  273 + <el-form-item label="${comment}" prop="${javaField}">
  274 + <el-radio-group v-model="formData.${javaField}">
279 275 #if ("" != $dictType)## 有数据字典
280   - <Radio
  276 + <el-radio
281 277 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
282 278 :key="dict.value"
283   - :value="dict.value"
  279 + :label="dict.value"
284 280 >
285 281 {{ dict.label }}
286   - </Radio>
  282 + </el-radio>
287 283 #else##没数据字典
288   - <Radio value="1">请选择字典生成</Radio>
  284 + <el-radio :label="1">请选择字典生成</el-radio>
289 285 #end
290   - </RadioGroup>
291   - </Form.Item>
  286 + </el-radio-group>
  287 + </el-form-item>
292 288 #elseif($column.htmlType == "datetime")## 时间框
293   - <Form.Item label="${comment}" name="${javaField}">
294   - <DatePicker
295   - v-model:value="formData.${javaField}"
296   - valueFormat="x"
  289 + <el-form-item label="${comment}" prop="${javaField}">
  290 + <el-date-picker
  291 + v-model="formData.${javaField}"
  292 + value-format="x"
297 293 placeholder="选择${comment}"
298 294 />
299   - </Form.Item>
  295 + </el-form-item>
300 296 #elseif($column.htmlType == "textarea")## 文本框
301   - <Form.Item label="${comment}" name="${javaField}">
302   - <Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
303   - </Form.Item>
  297 + <el-form-item label="${comment}" prop="${javaField}">
  298 + <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
  299 + </el-form-item>
304 300 #end
305 301 #end
306 302 #end
307   - </Form>
  303 + </el-form>
308 304 ## 特殊：主子表专属逻辑
309 305 #if ( $table.templateType == 10 || $table.templateType == 12 )
310 306 <!-- 子表的表单 -->
311   - <Tabs v-model:active-key="subTabsName">
  307 + <el-tabs v-model="subTabsName">
312 308 #foreach ($subTable in $subTables)
313 309 #set ($index = $foreach.count - 1)
314 310 #set ($subClassNameVar = $subClassNameVars.get($index))
315 311 #set ($subSimpleClassName = $subSimpleClassNames.get($index))
316 312 #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
317   - <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render>
  313 + <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
318 314 <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData?.id" />
319   - </Tabs.TabPane>
  315 + </el-tab-pane>
320 316 #end
321   - </Tabs>
  317 + </el-tabs>
322 318 #end
323 319 </Modal>
324 320 </template>
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/index.vue.vm
  View file @9b39f86
... ... @@ -4,7 +4,7 @@ import type { VxeTableInstance } from &#39;#/adapter/vxe-table&#39;;
4 4  
5 5 import { Page, useVbenModal } from '@vben/common-ui';
6 6 import { cloneDeep, formatDateTime } from '@vben/utils';
7   -import { Button, message,Tabs,Pagination,Form,RangePicker,DatePicker,Select,Input } from 'ant-design-vue';
  7 +import { ElButton, ElMessage, ElLoading, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus';
8 8 import { DictTag } from '#/components/dict-tag';
9 9 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
10 10 import ${simpleClassName}Form from './modules/form.vue';
... ... @@ -30,7 +30,7 @@ import { handleTree,isEmpty } from &#39;@vben/utils&#39;
30 30 import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
31 31 #else## 标准表接口
32 32 import { isEmpty } from '@vben/utils';
33   -import { get${simpleClassName}Page, delete${simpleClassName},#if ($deleteBatchEnable) delete${simpleClassName}List,#end export${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
  33 +import { get${simpleClassName}Page, delete${simpleClassName},#if ($deleteBatchEnable) delete${simpleClassName}List,#end export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
34 34 #end
35 35 import { downloadFileFromBlobPart } from '@vben/utils';
36 36  
... ... @@ -141,37 +141,32 @@ function handleAppend(row: ${simpleClassName}Api.${simpleClassName}) {
141 141  
142 142 /** 删除${table.classComment} */
143 143 async function handleDelete(row: ${simpleClassName}Api.${simpleClassName}) {
144   - const hideLoading = message.loading({
145   - content: $t('ui.actionMessage.deleting', [row.id]),
146   - duration: 0,
147   - key: 'action_process_msg',
  144 + const loadingInstance = ElLoading.service({
  145 + text: $t('ui.actionMessage.deleting', [row.id]),
  146 + background: 'rgba(0, 0, 0, 0.7)',
148 147 });
149 148 try {
150 149 await delete${simpleClassName}(row.id as number);
151   - message.success({
152   - content: $t('ui.actionMessage.deleteSuccess', [row.id]),
153   - key: 'action_process_msg',
154   - });
  150 + ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
155 151 await getList();
156 152 } finally {
157   - hideLoading();
  153 + loadingInstance.close();
158 154 }
159 155 }
160 156  
161 157 #if ($table.templateType != 2 && $deleteBatchEnable)
162 158 /** 批量删除${table.classComment} */
163 159 async function handleDeleteBatch() {
164   - const hideLoading = message.loading({
165   - content: $t('ui.actionMessage.deleting'),
166   - duration: 0,
167   - key: 'action_process_msg',
  160 + const loadingInstance = ElLoading.service({
  161 + text: $t('ui.actionMessage.deleting'),
  162 + background: 'rgba(0, 0, 0, 0.7)',
168 163 });
169 164 try {
170 165 await delete${simpleClassName}List(checkedIds.value);
171   - message.success( $t('ui.actionMessage.deleteSuccess') );
  166 + ElMessage.success($t('ui.actionMessage.deleteSuccess'));
172 167 await getList();
173 168 } finally {
174   - hideLoading();
  169 + loadingInstance.close();
175 170 }
176 171 }
177 172  
... ... @@ -218,10 +213,10 @@ onMounted(() =&gt; {
218 213  
219 214 <ContentWrap v-if="!hiddenSearchBar">
220 215 <!-- 搜索工作栏 -->
221   - <Form
  216 + <el-form
222 217 :model="queryParams"
223 218 ref="queryFormRef"
224   - layout="inline"
  219 + inline
225 220 >
226 221 #foreach($column in $columns)
227 222 #if ($column.listOperation)
... ... @@ -237,66 +232,69 @@ onMounted(() =&gt; {
237 232 #set ($dictMethod = "boolean")
238 233 #end
239 234 #if ($column.htmlType == "input")
240   - <Form.Item label="${comment}" name="${javaField}">
241   - <Input
242   - v-model:value="queryParams.${javaField}"
  235 + <el-form-item label="${comment}">
  236 + <el-input
  237 + v-model="queryParams.${javaField}"
243 238 placeholder="请输入${comment}"
244   - allowClear
245   - @pressEnter="handleQuery"
246   - class="w-full"
  239 + clearable
  240 + @keyup.enter="handleQuery"
  241 + class="!w-[240px]"
247 242 />
248   - </Form.Item>
  243 + </el-form-item>
249 244 #elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
250   - <Form.Item label="${comment}" name="${javaField}">
251   - <Select
252   - v-model:value="queryParams.${javaField}"
  245 + <el-form-item label="${comment}">
  246 + <el-select
  247 + v-model="queryParams.${javaField}"
253 248 placeholder="请选择${comment}"
254   - allowClear
255   - class="w-full"
  249 + clearable
  250 + class="!w-[240px]"
256 251 >
257 252 #if ("" != $dictType)## 设置了 dictType 数据字典的情况
258   - <Select.Option
  253 + <el-option
259 254 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
260 255 :key="dict.value"
261 256 :value="dict.value"
262   - >
263   - {{ dict.label }}
264   - </Select.Option>
  257 + :label="dict.label"
  258 + />
265 259 #else## 未设置 dictType 数据字典的情况
266   - <Select.Option label="请选择字典生成" value="" />
  260 + <el-option label="请选择字典生成" value="" />
267 261 #end
268   - </Select>
269   - </Form.Item>
  262 + </el-select>
  263 + </el-form-item>
270 264 #elseif($column.htmlType == "datetime")
271 265 #if ($column.listOperationCondition != "BETWEEN")## 非范围
272   - <Form.Item label="${comment}" name="${javaField}">
273   - <DatePicker
274   - v-model:value="queryParams.${javaField}"
275   - valueFormat="YYYY-MM-DD"
  266 + <el-form-item label="${comment}">
  267 + <el-date-picker
  268 + v-model="queryParams.${javaField}"
  269 + value-format="YYYY-MM-DD"
276 270 placeholder="选择${comment}"
277   - allowClear
278   - class="w-full"
  271 + clearable
  272 + class="!w-[240px]"
279 273 />
280   - </Form.Item>
  274 + </el-form-item>
281 275 #else## 范围
282   - <Form.Item label="${comment}" name="${javaField}">
283   - <RangePicker
284   - v-model:value="queryParams.${javaField}"
285   - v-bind="getRangePickerDefaultProps()"
286   - class="w-full"
  276 + <el-form-item label="${comment}">
  277 + <el-date-picker
  278 + v-model="queryParams.${javaField}"
  279 + type="daterange"
  280 + value-format="YYYY-MM-DD"
  281 + range-separator="至"
  282 + start-placeholder="开始日期"
  283 + end-placeholder="结束日期"
  284 + class="!w-[240px]"
287 285 />
288   - </Form.Item>
  286 + </el-form-item>
289 287 #end
290 288 #end
291 289 #end
292 290 #end
293   - <Form.Item>
294   - <Button class="ml-2" @click="resetQuery"> 重置 </Button>
295   - <Button class="ml-2" @click="handleQuery" type="primary">
  291 + <el-form-item>
  292 + <el-button class="ml-2" @click="resetQuery"> 重置 </el-button>
  293 + <el-button class="ml-2" @click="handleQuery" type="primary">
296 294 搜索
297   - </Button>
298   - </Form.Item>
299   - </Form>
  295 + </el-button>
  296 + </el-form-item>
  297 + </el-form>
300 298 </ContentWrap>
301 299  
302 300 <!-- 列表 -->
... ... @@ -307,11 +305,11 @@ onMounted(() =&gt; {
307 305 v-model:hidden-search="hiddenSearchBar"
308 306 >
309 307 #if (${table.templateType} == 2)
310   - <Button @click="toggleExpand" class="mr-2">
  308 + <el-button @click="toggleExpand" class="mr-2">
311 309 {{ isExpanded ? '收缩' : '展开' }}
312   - </Button>
  310 + </el-button>
313 311 #end
314   - <Button
  312 + <el-button
315 313 class="ml-2"
316 314 :icon="h(Plus)"
317 315 type="primary"
... ... @@ -319,8 +317,8 @@ onMounted(() =&gt; {
319 317 v-access:code="['${permissionPrefix}:create']"
320 318 >
321 319 {{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
322   - </Button>
323   - <Button
  320 + </el-button>
  321 + <el-button
324 322 :icon="h(Download)"
325 323 type="primary"
326 324 class="ml-2"
... ... @@ -329,19 +327,18 @@ onMounted(() =&gt; {
329 327 v-access:code="['${permissionPrefix}:export']"
330 328 >
331 329 {{ $t('ui.actionTitle.export') }}
332   - </Button>
  330 + </el-button>
333 331 #if ($table.templateType != 2 && $deleteBatchEnable)
334   - <Button
  332 + <el-button
335 333 :icon="h(Trash2)"
336   - type="primary"
337   - danger
  334 + type="danger"
338 335 class="ml-2"
339 336 :disabled="isEmpty(checkedIds)"
340 337 @click="handleDeleteBatch"
341 338 v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']"
342 339 >
343 340 批量删除
344   - </Button>
  341 + </el-button>
345 342 #end
346 343 </TableToolbar>
347 344 </template>
... ... @@ -381,17 +378,17 @@ onMounted(() =&gt; {
381 378 <vxe-column type="expand" width="60">
382 379 <template #content="{ row }">
383 380 <!-- 子表的表单 -->
384   - <Tabs v-model:active-key="subTabsName" class="mx-8">
  381 + <el-tabs v-model="subTabsName" class="mx-8">
385 382 #foreach ($subTable in $subTables)
386 383 #set ($index = $foreach.count - 1)
387 384 #set ($subClassNameVar = $subClassNameVars.get($index))
388 385 #set ($subSimpleClassName = $subSimpleClassNames.get($index))
389 386 #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
390   - <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render>
  387 + <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
391 388 <${subSimpleClassName}List :${subJoinColumn_strikeCase}="row?.id" />
392   - </Tabs.TabPane>
  389 + </el-tab-pane>
393 390 #end
394   - </Tabs>
  391 + </el-tabs>
395 392 </template>
396 393 </vxe-column>
397 394 #end
... ... @@ -423,27 +420,29 @@ onMounted(() =&gt; {
423 420 <vxe-column field="operation" title="操作" align="center">
424 421 <template #default="{row}">
425 422 #if ( $table.templateType == 2 )
426   - <Button
  423 + <el-button
427 424 size="small"
428   - type="link"
  425 + type="primary"
  426 + link
429 427 @click="handleAppend(row as any)"
430 428 v-access:code="['${permissionPrefix}:create']"
431 429 >
432 430 新增下级
433   - </Button>
  431 + </el-button>
434 432 #end
435   - <Button
  433 + <el-button
436 434 size="small"
437   - type="link"
  435 + type="primary"
  436 + link
438 437 @click="handleEdit(row as any)"
439 438 v-access:code="['${permissionPrefix}:update']"
440 439 >
441 440 {{ $t('ui.actionTitle.edit') }}
442   - </Button>
443   - <Button
  441 + </el-button>
  442 + <el-button
444 443 size="small"
445   - type="link"
446   - danger
  444 + type="danger"
  445 + link
447 446 class="ml-2"
448 447 #if ( $table.templateType == 2 )
449 448 :disabled="!isEmpty(row?.children)"
... ... @@ -452,19 +451,21 @@ onMounted(() =&gt; {
452 451 v-access:code="['${permissionPrefix}:delete']"
453 452 >
454 453 {{ $t('ui.actionTitle.delete') }}
455   - </Button>
  454 + </el-button>
456 455 </template>
457 456 </vxe-column>
458 457 </vxe-table>
459 458 #if ( $table.templateType != 2 )
460 459 <!-- 分页 -->
461 460 <div class="mt-2 flex justify-end">
462   - <Pagination
  461 + <el-pagination
463 462 :total="total"
464   - v-model:current="queryParams.pageNo"
  463 + v-model:current-page="queryParams.pageNo"
465 464 v-model:page-size="queryParams.pageSize"
466   - show-size-changer
467   - @change="getList"
  465 + :page-sizes="[10, 20, 50, 100]"
  466 + layout="total, sizes, prev, pager, next, jumper"
  467 + @size-change="getList"
  468 + @current-change="getList"
468 469 />
469 470 </div>
470 471 #end
... ... @@ -472,17 +473,17 @@ onMounted(() =&gt; {
472 473 #if ($table.templateType == 11) ## erp情况
473 474 <ContentWrap>
474 475 <!-- 子表的表单 -->
475   - <Tabs v-model:active-key="subTabsName">
  476 + <el-tabs v-model="subTabsName">
476 477 #foreach ($subTable in $subTables)
477 478 #set ($index = $foreach.count - 1)
478 479 #set ($subClassNameVar = $subClassNameVars.get($index))
479 480 #set ($subSimpleClassName = $subSimpleClassNames.get($index))
480 481 #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
481   - <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render>
  482 + <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
482 483 <${subSimpleClassName}List :${subJoinColumn_strikeCase}="select${simpleClassName}?.id" />
483   - </Tabs.TabPane>
  484 + </el-tab-pane>
484 485 #end
485   - </Tabs>
  486 + </el-tabs>
486 487 </ContentWrap>
487 488 #end
488 489 </Page>
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_erp.vue.vm
  View file @9b39f86
... ... @@ -4,15 +4,15 @@
4 4 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
5 5 <script lang="ts" setup>
6 6 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
7   - import type { Rule } from 'ant-design-vue/es/form';
  7 + import type { FormRules } from 'element-plus';
8 8  
9 9 import { useVbenModal } from '@vben/common-ui';
10 10 import { Tinymce as RichTextarea } from '#/components/tinymce';
11 11 import { ImageUpload, FileUpload } from "#/components/upload";
12   - import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
  12 + import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus';
13 13 import { DICT_TYPE, getDictOptions } from '#/utils';
14 14  
15   - import { computed, ref } from 'vue';
  15 + import { computed, ref, reactive } from 'vue';
16 16 import { $t } from '#/locales';
17 17  
18 18 import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
... ... @@ -36,14 +36,14 @@
36 36 #end
37 37 #end
38 38 });
39   - const rules: Record<string, Rule[]> = {
  39 + const rules = reactive<FormRules>({
40 40 #foreach ($column in $subColumns)
41 41 #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
42 42 #set($comment=$column.columnComment)
43 43 $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
44 44 #end
45 45 #end
46   - };
  46 + });
47 47  
48 48 const [Modal, modalApi] = useVbenModal({
49 49 async onConfirm() {
... ... @@ -57,10 +57,7 @@
57 57 // 关闭并提示
58 58 await modalApi.close();
59 59 emit('success');
60   - message.success({
61   - content: $t('ui.actionMessage.operationSuccess'),
62   - key: 'action_process_msg',
63   - });
  60 + ElMessage.success($t('ui.actionMessage.operationSuccess'));
64 61 } finally {
65 62 modalApi.unlock();
66 63 }
... ... @@ -108,12 +105,12 @@
108 105  
109 106 <template>
110 107 <Modal :title="getTitle">
111   - <Form
  108 + <el-form
112 109 ref="formRef"
113 110 :model="formData"
114 111 :rules="rules"
115   - :label-col="{ span: 5 }"
116   - :wrapper-col="{ span: 18 }"
  112 + label-width="120px"
  113 + label-position="right"
117 114 >
118 115 #foreach($column in $subColumns)
119 116 #if ($column.createOperation || $column.updateOperation)
... ... @@ -129,84 +126,83 @@
129 126 #set ($dictMethod = "boolean")
130 127 #end
131 128 #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
132   - <Form.Item label="${comment}" name="${javaField}">
133   - <Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
134   - </Form.Item>
  129 + <el-form-item label="${comment}" prop="${javaField}">
  130 + <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
  131 + </el-form-item>
135 132 #elseif($column.htmlType == "imageUpload")## 图片上传
136   - <Form.Item label="${comment}" name="${javaField}">
137   - <ImageUpload v-model:value="formData.${javaField}" />
138   - </Form.Item>
  133 + <el-form-item label="${comment}" prop="${javaField}">
  134 + <ImageUpload v-model="formData.${javaField}" />
  135 + </el-form-item>
139 136 #elseif($column.htmlType == "fileUpload")## 文件上传
140   - <Form.Item label="${comment}" name="${javaField}">
141   - <FileUpload v-model:value="formData.${javaField}" />
142   - </Form.Item>
  137 + <el-form-item label="${comment}" prop="${javaField}">
  138 + <FileUpload v-model="formData.${javaField}" />
  139 + </el-form-item>
143 140 #elseif($column.htmlType == "editor")## 文本编辑器
144   - <Form.Item label="${comment}" name="${javaField}">
  141 + <el-form-item label="${comment}" prop="${javaField}">
145 142 <RichTextarea v-model="formData.${javaField}" height="500px" />
146   - </Form.Item>
  143 + </el-form-item>
147 144 #elseif($column.htmlType == "select")## 下拉框
148   - <Form.Item label="${comment}" name="${javaField}">
149   - <Select v-model:value="formData.${javaField}" placeholder="请选择${comment}">
  145 + <el-form-item label="${comment}" prop="${javaField}">
  146 + <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
150 147 #if ("" != $dictType)## 有数据字典
151   - <Select.Option
  148 + <el-option
152 149 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
153 150 :key="dict.value"
154 151 :value="dict.value"
155   - >
156   - {{ dict.label }}
157   - </Select.Option>
  152 + :label="dict.label"
  153 + />
158 154 #else##没数据字典
159   - <Select.Option label="请选择字典生成" value="" />
  155 + <el-option label="请选择字典生成" value="" />
160 156 #end
161   - </Select>
162   - </Form.Item>
  157 + </el-select>
  158 + </el-form-item>
163 159 #elseif($column.htmlType == "checkbox")## 多选框
164   - <Form.Item label="${comment}" name="${javaField}">
165   - <CheckboxGroup v-model:value="formData.${javaField}">
  160 + <el-form-item label="${comment}" prop="${javaField}">
  161 + <el-checkbox-group v-model="formData.${javaField}">
166 162 #if ("" != $dictType)## 有数据字典
167   - <Checkbox
  163 + <el-checkbox
168 164 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
169 165 :key="dict.value"
170   - :value="dict.value"
  166 + :label="dict.value"
171 167 >
172 168 {{ dict.label }}
173   - </Checkbox>
  169 + </el-checkbox>
174 170 #else##没数据字典
175   - <Checkbox label="请选择字典生成" />
  171 + <el-checkbox label="请选择字典生成" />
176 172 #end
177   - </CheckboxGroup>
178   - </Form.Item>
  173 + </el-checkbox-group>
  174 + </el-form-item>
179 175 #elseif($column.htmlType == "radio")## 单选框
180   - <Form.Item label="${comment}" name="${javaField}">
181   - <RadioGroup v-model:value="formData.${javaField}">
  176 + <el-form-item label="${comment}" prop="${javaField}">
  177 + <el-radio-group v-model="formData.${javaField}">
182 178 #if ("" != $dictType)## 有数据字典
183   - <Radio
  179 + <el-radio
184 180 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
185 181 :key="dict.value"
186   - :value="dict.value"
  182 + :label="dict.value"
187 183 >
188 184 {{ dict.label }}
189   - </Radio>
  185 + </el-radio>
190 186 #else##没数据字典
191   - <Radio value="1">请选择字典生成</Radio>
  187 + <el-radio :label="1">请选择字典生成</el-radio>
192 188 #end
193   - </RadioGroup>
194   - </Form.Item>
  189 + </el-radio-group>
  190 + </el-form-item>
195 191 #elseif($column.htmlType == "datetime")## 时间框
196   - <Form.Item label="${comment}" name="${javaField}">
197   - <DatePicker
198   - v-model:value="formData.${javaField}"
199   - valueFormat="x"
  192 + <el-form-item label="${comment}" prop="${javaField}">
  193 + <el-date-picker
  194 + v-model="formData.${javaField}"
  195 + value-format="x"
200 196 placeholder="选择${comment}"
201 197 />
202   - </Form.Item>
  198 + </el-form-item>
203 199 #elseif($column.htmlType == "textarea")## 文本框
204   - <Form.Item label="${comment}" name="${javaField}">
205   - <Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
206   - </Form.Item>
  200 + <el-form-item label="${comment}" prop="${javaField}">
  201 + <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
  202 + </el-form-item>
207 203 #end
208 204 #end
209 205 #end
210   - </Form>
  206 + </el-form>
211 207 </Modal>
212 208 </template>
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_inner.vue.vm
  View file @9b39f86
1 1 ## 主表的 normal 和 inner 使用相同的 form 表单
2   -#parse("codegen/vue3_vben5_antd/general/views/modules/form_sub_normal.vue.vm")
3 2 \ No newline at end of file
  3 +#parse("codegen/vue3_vben5_ele/general/views/modules/form_sub_normal.vue.vm")
4 4 \ No newline at end of file
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_normal.vue.vm
  View file @9b39f86
... ... @@ -7,8 +7,8 @@
7 7 <script lang="ts" setup>
8 8 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
9 9  
10   - import { message, Tabs, Form, Input, Textarea,Button, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue';
11   - import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
  10 + import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker } from 'element-plus';
  11 + import { computed, ref, reactive, h, onMounted,watch,nextTick } from 'vue';
12 12 import { $t } from '#/locales';
13 13 import { DICT_TYPE, getDictOptions } from '#/utils';
14 14  
... ... @@ -18,7 +18,7 @@ import { Plus } from &quot;@vben/icons&quot;;
18 18 import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
19 19 import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
20 20 #else
21   -import type { Rule } from 'ant-design-vue/es/form';
  21 +import type { FormRules } from 'element-plus';
22 22 import { Tinymce as RichTextarea } from '#/components/tinymce';
23 23 import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
24 24 #end
... ... @@ -76,14 +76,14 @@ const formData = ref&lt;Partial&lt;${simpleClassName}Api.${subSimpleClassName}&gt;&gt;({
76 76 #end
77 77 #end
78 78 });
79   -const rules: Record<string, Rule[]> = {
  79 +const rules = reactive<FormRules>({
80 80 #foreach ($column in $subColumns)
81 81 #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
82 82 #set($comment=$column.columnComment)
83 83 $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
84 84 #end
85 85 #end
86   -};
  86 +});
87 87 /** 暴露出表单校验方法和表单值获取方法 */
88 88 defineExpose({
89 89 validate: async () => await formRef.value?.validate(),
... ... @@ -124,90 +124,89 @@ watch(
124 124 #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
125 125 <vxe-column field="${javaField}" title="${comment}" align="center">
126 126 <template #default="{row}">
127   - <Input v-model:value="row.${javaField}" />
  127 + <el-input v-model="row.${javaField}" />
128 128 </template>
129 129 </vxe-column>
130 130 #elseif($column.htmlType == "imageUpload")## 图片上传
131 131 <vxe-column field="${javaField}" title="${comment}" align="center">
132 132 <template #default="{row}">
133   - <ImageUpload v-model:value="row.${javaField}" />
  133 + <ImageUpload v-model="row.${javaField}" />
134 134 </template>
135 135 </vxe-column>
136 136 #elseif($column.htmlType == "fileUpload")## 文件上传
137 137 <vxe-column field="${javaField}" title="${comment}" align="center">
138 138 <template #default="{row}">
139   - <FileUpload v-model:value="row.${javaField}" />
  139 + <FileUpload v-model="row.${javaField}" />
140 140 </template>
141 141 </vxe-column>
142 142 #elseif($column.htmlType == "select")## 下拉框
143 143 <vxe-column field="${javaField}" title="${comment}" align="center">
144 144 <template #default="{row}">
145   - <Select v-model:value="row.${javaField}" placeholder="请选择${comment}">
  145 + <el-select v-model="row.${javaField}" placeholder="请选择${comment}">
146 146 #if ("" != $dictType)## 有数据字典
147   - <Select.Option
  147 + <el-option
148 148 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
149 149 :key="dict.value"
150 150 :value="dict.value"
151   - >
152   - {{ dict.label }}
153   - </Select.Option>
  151 + :label="dict.label"
  152 + />
154 153 #else##没数据字典
155   - <Select.Option label="请选择字典生成" value="" />
  154 + <el-option label="请选择字典生成" value="" />
156 155 #end
157   - </Select>
  156 + </el-select>
158 157 </template>
159 158 </vxe-column>
160 159 #elseif($column.htmlType == "checkbox")## 多选框
161 160 <vxe-column field="${javaField}" title="${comment}" align="center">
162 161 <template #default="{row}">
163   - <CheckboxGroup v-model:value="row.${javaField}">
  162 + <el-checkbox-group v-model="row.${javaField}">
164 163 #if ("" != $dictType)## 有数据字典
165   - <Checkbox
  164 + <el-checkbox
166 165 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
167 166 :key="dict.value"
168   - :value="dict.value"
  167 + :label="dict.value"
169 168 >
170 169 {{ dict.label }}
171   - </Checkbox>
  170 + </el-checkbox>
172 171 #else##没数据字典
173   - <Checkbox label="请选择字典生成" />
  172 + <el-checkbox label="请选择字典生成" />
174 173 #end
175   - </CheckboxGroup>
  174 + </el-checkbox-group>
176 175 </template>
177 176 </vxe-column>
178 177 #elseif($column.htmlType == "radio")## 单选框
179 178 <vxe-column field="${javaField}" title="${comment}" align="center">
180 179 <template #default="{row}">
181   - <RadioGroup v-model:value="row.${javaField}">
  180 + <el-radio-group v-model="row.${javaField}">
182 181 #if ("" != $dictType)## 有数据字典
183   - <Radio
  182 + <el-radio
184 183 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
185 184 :key="dict.value"
186   - :value="dict.value"
  185 + :label="dict.value"
187 186 >
188 187 {{ dict.label }}
189   - </Radio>
  188 + </el-radio>
190 189 #else##没数据字典
191   - <Radio value="1">请选择字典生成</Radio>
  190 + <el-radio :label="1">请选择字典生成</el-radio>
192 191 #end
193   - </RadioGroup>
  192 + </el-radio-group>
194 193 </template>
195 194 </vxe-column>
196 195 #elseif($column.htmlType == "datetime")## 时间框
197 196 <vxe-column field="${javaField}" title="${comment}" align="center">
198 197 <template #default="{row}">
199   - <DatePicker
200   - v-model:value="row.${javaField}"
201   - :showTime="true"
  198 + <el-date-picker
  199 + v-model="row.${javaField}"
  200 + type="datetime"
  201 + value-format="x"
202 202 format="YYYY-MM-DD HH:mm:ss"
203   - valueFormat='x'
204 203 />
205 204 </template>
206 205 </vxe-column>
207 206 #elseif($column.htmlType == "textarea" || $column.htmlType == "editor")## 文本框
208 207 <vxe-column field="${javaField}" title="${comment}" align="center">
209 208 <template #default="{row}">
210   - <Textarea v-model:value="row.${javaField}" />
  209 + <el-input v-model="row.${javaField}" type="textarea" />
211 210 </template>
212 211 </vxe-column>
213 212 #end
... ... @@ -215,31 +214,31 @@ watch(
215 214 #end
216 215 <vxe-column field="operation" title="操作" align="center">
217 216 <template #default="{row}">
218   - <Button
  217 + <el-button
219 218 size="small"
220   - type="link"
221   - danger
  219 + type="danger"
  220 + link
222 221 @click="onDelete(row as any)"
223 222 v-access:code="['${permissionPrefix}:delete']"
224 223 >
225 224 {{ $t('ui.actionTitle.delete') }}
226   - </Button>
  225 + </el-button>
227 226 </template>
228 227 </vxe-column>
229 228 </vxe-table>
230 229 <div class="flex justify-center mt-4">
231   - <Button :icon="h(Plus)" type="primary" ghost @click="onAdd" v-access:code="['${permissionPrefix}:create']">
  230 + <el-button :icon="h(Plus)" type="primary" plain @click="onAdd" v-access:code="['${permissionPrefix}:create']">
232 231 {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
233   - </Button>
  232 + </el-button>
234 233 </div>
235 234 #else
236   - <Form
  235 + <el-form
237 236 ref="formRef"
238 237 class="mx-4"
239 238 :model="formData"
240 239 :rules="rules"
241   - :label-col="{ span: 5 }"
242   - :wrapper-col="{ span: 18 }"
  240 + label-width="120px"
  241 + label-position="right"
243 242 >
244 243 #foreach($column in $subColumns)
245 244 #if ($column.createOperation || $column.updateOperation)
... ... @@ -255,84 +254,83 @@ watch(
255 254 #set ($dictMethod = "boolean")
256 255 #end
257 256 #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
258   - <Form.Item label="${comment}" name="${javaField}">
259   - <Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
260   - </Form.Item>
  257 + <el-form-item label="${comment}" prop="${javaField}">
  258 + <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
  259 + </el-form-item>
261 260 #elseif($column.htmlType == "imageUpload")## 图片上传
262   - <Form.Item label="${comment}" name="${javaField}">
263   - <ImageUpload v-model:value="formData.${javaField}" />
264   - </Form.Item>
  261 + <el-form-item label="${comment}" prop="${javaField}">
  262 + <ImageUpload v-model="formData.${javaField}" />
  263 + </el-form-item>
265 264 #elseif($column.htmlType == "fileUpload")## 文件上传
266   - <Form.Item label="${comment}" name="${javaField}">
267   - <FileUpload v-model:value="formData.${javaField}" />
268   - </Form.Item>
  265 + <el-form-item label="${comment}" prop="${javaField}">
  266 + <FileUpload v-model="formData.${javaField}" />
  267 + </el-form-item>
269 268 #elseif($column.htmlType == "editor")## 文本编辑器
270   - <Form.Item label="${comment}" name="${javaField}">
  269 + <el-form-item label="${comment}" prop="${javaField}">
271 270 <RichTextarea v-model="formData.${javaField}" height="500px" />
272   - </Form.Item>
  271 + </el-form-item>
273 272 #elseif($column.htmlType == "select")## 下拉框
274   - <Form.Item label="${comment}" name="${javaField}">
275   - <Select v-model:value="formData.${javaField}" placeholder="请选择${comment}">
  273 + <el-form-item label="${comment}" prop="${javaField}">
  274 + <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
276 275 #if ("" != $dictType)## 有数据字典
277   - <Select.Option
  276 + <el-option
278 277 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
279 278 :key="dict.value"
280 279 :value="dict.value"
281   - >
282   - {{ dict.label }}
283   - </Select.Option>
  280 + :label="dict.label"
  281 + />
284 282 #else##没数据字典
285   - <Select.Option label="请选择字典生成" value="" />
  283 + <el-option label="请选择字典生成" value="" />
286 284 #end
287   - </Select>
288   - </Form.Item>
  285 + </el-select>
  286 + </el-form-item>
289 287 #elseif($column.htmlType == "checkbox")## 多选框
290   - <Form.Item label="${comment}" name="${javaField}">
291   - <CheckboxGroup v-model:value="formData.${javaField}">
  288 + <el-form-item label="${comment}" prop="${javaField}">
  289 + <el-checkbox-group v-model="formData.${javaField}">
292 290 #if ("" != $dictType)## 有数据字典
293   - <Checkbox
  291 + <el-checkbox
294 292 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
295 293 :key="dict.value"
296   - :value="dict.value"
  294 + :label="dict.value"
297 295 >
298 296 {{ dict.label }}
299   - </Checkbox>
  297 + </el-checkbox>
300 298 #else##没数据字典
301   - <Checkbox label="请选择字典生成" />
  299 + <el-checkbox label="请选择字典生成" />
302 300 #end
303   - </CheckboxGroup>
304   - </Form.Item>
  301 + </el-checkbox-group>
  302 + </el-form-item>
305 303 #elseif($column.htmlType == "radio")## 单选框
306   - <Form.Item label="${comment}" name="${javaField}">
307   - <RadioGroup v-model:value="formData.${javaField}">
  304 + <el-form-item label="${comment}" prop="${javaField}">
  305 + <el-radio-group v-model="formData.${javaField}">
308 306 #if ("" != $dictType)## 有数据字典
309   - <Radio
  307 + <el-radio
310 308 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
311 309 :key="dict.value"
312   - :value="dict.value"
  310 + :label="dict.value"
313 311 >
314 312 {{ dict.label }}
315   - </Radio>
  313 + </el-radio>
316 314 #else##没数据字典
317   - <Radio value="1">请选择字典生成</Radio>
  315 + <el-radio :label="1">请选择字典生成</el-radio>
318 316 #end
319   - </RadioGroup>
320   - </Form.Item>
  317 + </el-radio-group>
  318 + </el-form-item>
321 319 #elseif($column.htmlType == "datetime")## 时间框
322   - <Form.Item label="${comment}" name="${javaField}">
323   - <DatePicker
324   - v-model:value="formData.${javaField}"
325   - valueFormat="x"
  320 + <el-form-item label="${comment}" prop="${javaField}">
  321 + <el-date-picker
  322 + v-model="formData.${javaField}"
  323 + value-format="x"
326 324 placeholder="选择${comment}"
327 325 />
328   - </Form.Item>
  326 + </el-form-item>
329 327 #elseif($column.htmlType == "textarea")## 文本框
330   - <Form.Item label="${comment}" name="${javaField}">
331   - <Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
332   - </Form.Item>
  328 + <el-form-item label="${comment}" prop="${javaField}">
  329 + <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
  330 + </el-form-item>
333 331 #end
334 332 #end
335 333 #end
336   - </Form>
  334 + </el-form>
337 335 #end
338 336 </template>
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/list_sub_erp.vue.vm
  View file @9b39f86
... ... @@ -21,7 +21,7 @@
21 21 import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
22 22 import { Tinymce as RichTextarea } from '#/components/tinymce';
23 23 import { ImageUpload, FileUpload } from "#/components/upload";
24   - import { message,Button, Tabs,Pagination, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox,RangePicker, DatePicker, TreeSelect } from 'ant-design-vue';
  24 + import { ElMessage, ElLoading, ElButton, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus';
25 25 import { Plus, Trash2 } from '@vben/icons';
26 26 import { $t } from '#/locales';
27 27 import { TableToolbar } from '#/components/table-toolbar';
... ... @@ -29,7 +29,7 @@
29 29 #end
30 30  
31 31 #if ($table.templateType == 11) ## erp
32   - import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}List,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${table.businessName}';
  32 + import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}List,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
33 33 import { isEmpty } from '@vben/utils';
34 34 #else
35 35 #if ($subTable.subJoinMany) ## 一对多
... ... @@ -52,7 +52,7 @@ const props = defineProps&lt;{
52 52 /** 创建${subTable.classComment} */
53 53 function handleCreate() {
54 54 if (!props.${subJoinColumn.javaField}){
55   - message.warning("请先选择一个${table.classComment}!")
  55 + ElMessage.warning("请先选择一个${table.classComment}!")
56 56 return
57 57 }
58 58 formModalApi.setData({${subJoinColumn.javaField}: props.${subJoinColumn.javaField}}).open();
... ... @@ -65,37 +65,32 @@ function handleEdit(row: ${simpleClassName}Api.${subSimpleClassName}) {
65 65  
66 66 /** 删除${subTable.classComment} */
67 67 async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
68   - const hideLoading = message.loading({
69   - content: $t('ui.actionMessage.deleting', [row.id]),
70   - duration: 0,
71   - key: 'action_process_msg',
  68 + const loadingInstance = ElLoading.service({
  69 + text: $t('ui.actionMessage.deleting', [row.id]),
  70 + background: 'rgba(0, 0, 0, 0.7)',
72 71 });
73 72 try {
74 73 await delete${subSimpleClassName}(row.id as number);
75   - message.success({
76   - content: $t('ui.actionMessage.deleteSuccess', [row.id]),
77   - key: 'action_process_msg',
78   - });
  74 + ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
79 75 await getList();
80 76 } finally {
81   - hideLoading();
  77 + loadingInstance.close();
82 78 }
83 79 }
84 80  
85 81 #if ($deleteBatchEnable)
86 82 /** 批量删除${subTable.classComment} */
87 83 async function handleDeleteBatch() {
88   - const hideLoading = message.loading({
89   - content: $t('ui.actionMessage.deleting'),
90   - duration: 0,
91   - key: 'action_process_msg',
  84 + const loadingInstance = ElLoading.service({
  85 + text: $t('ui.actionMessage.deleting'),
  86 + background: 'rgba(0, 0, 0, 0.7)',
92 87 });
93 88 try {
94 89 await delete${subSimpleClassName}List(checkedIds.value);
95   - message.success( $t('ui.actionMessage.deleteSuccess') );
  90 + ElMessage.success($t('ui.actionMessage.deleteSuccess'));
96 91 await getList();
97 92 } finally {
98   - hideLoading();
  93 + loadingInstance.close();
99 94 }
100 95 }
101 96  
... ... @@ -207,10 +202,10 @@ onMounted(() =&gt; {
207 202 <div class="h-[600px]">
208 203 <ContentWrap v-if="!hiddenSearchBar">
209 204 <!-- 搜索工作栏 -->
210   - <Form
  205 + <el-form
211 206 :model="queryParams"
212 207 ref="queryFormRef"
213   - layout="inline"
  208 + inline
214 209 >
215 210 #foreach($column in $subColumns)
216 211 #if ($column.listOperation)
... ... @@ -226,66 +221,69 @@ onMounted(() =&gt; {
226 221 #set ($dictMethod = "boolean")
227 222 #end
228 223 #if ($column.htmlType == "input")
229   - <Form.Item label="${comment}" name="${javaField}">
230   - <Input
231   - v-model:value="queryParams.${javaField}"
  224 + <el-form-item label="${comment}">
  225 + <el-input
  226 + v-model="queryParams.${javaField}"
232 227 placeholder="请输入${comment}"
233   - allowClear
234   - @pressEnter="handleQuery"
235   - class="w-full"
  228 + clearable
  229 + @keyup.enter="handleQuery"
  230 + class="!w-[240px]"
236 231 />
237   - </Form.Item>
  232 + </el-form-item>
238 233 #elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
239   - <Form.Item label="${comment}" name="${javaField}">
240   - <Select
241   - v-model:value="queryParams.${javaField}"
  234 + <el-form-item label="${comment}">
  235 + <el-select
  236 + v-model="queryParams.${javaField}"
242 237 placeholder="请选择${comment}"
243   - allowClear
244   - class="w-full"
  238 + clearable
  239 + class="!w-[240px]"
245 240 >
246 241 #if ("" != $dictType)## 设置了 dictType 数据字典的情况
247   - <Select.Option
  242 + <el-option
248 243 v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
249 244 :key="dict.value"
250 245 :value="dict.value"
251   - >
252   - {{ dict.label }}
253   - </Select.Option>
  246 + :label="dict.label"
  247 + />
254 248 #else## 未设置 dictType 数据字典的情况
255   - <Select.Option label="请选择字典生成" value="" />
  249 + <el-option label="请选择字典生成" value="" />
256 250 #end
257   - </Select>
258   - </Form.Item>
  251 + </el-select>
  252 + </el-form-item>
259 253 #elseif($column.htmlType == "datetime")
260 254 #if ($column.listOperationCondition != "BETWEEN")## 非范围
261   - <Form.Item label="${comment}" name="${javaField}">
262   - <DatePicker
263   - v-model:value="queryParams.${javaField}"
264   - valueFormat="YYYY-MM-DD"
  255 + <el-form-item label="${comment}">
  256 + <el-date-picker
  257 + v-model="queryParams.${javaField}"
  258 + value-format="YYYY-MM-DD"
265 259 placeholder="选择${comment}"
266   - allowClear
267   - class="w-full"
  260 + clearable
  261 + class="!w-[240px]"
268 262 />
269   - </Form.Item>
  263 + </el-form-item>
270 264 #else## 范围
271   - <Form.Item label="${comment}" name="${javaField}">
272   - <RangePicker
273   - v-model:value="queryParams.${javaField}"
274   - v-bind="getRangePickerDefaultProps()"
275   - class="w-full"
  265 + <el-form-item label="${comment}">
  266 + <el-date-picker
  267 + v-model="queryParams.${javaField}"
  268 + type="daterange"
  269 + value-format="YYYY-MM-DD"
  270 + range-separator="至"
  271 + start-placeholder="开始日期"
  272 + end-placeholder="结束日期"
  273 + class="!w-[240px]"
276 274 />
277   - </Form.Item>
  275 + </el-form-item>
278 276 #end
279 277 #end
280 278 #end
281 279 #end
282   - <Form.Item>
283   - <Button class="ml-2" @click="resetQuery"> 重置 </Button>
284   - <Button class="ml-2" @click="handleQuery" type="primary">
  280 + <el-form-item>
  281 + <el-button class="ml-2" @click="resetQuery"> 重置 </el-button>
  282 + <el-button class="ml-2" @click="handleQuery" type="primary">
285 283 搜索
286   - </Button>
287   - </Form.Item>
288   - </Form>
  284 + </el-button>
  285 + </el-form-item>
  286 + </el-form>
289 287 </ContentWrap>
290 288  
291 289 <!-- 列表 -->
... ... @@ -295,7 +293,7 @@ onMounted(() =&gt; {
295 293 ref="tableToolbarRef"
296 294 v-model:hidden-search="hiddenSearchBar"
297 295 >
298   - <Button
  296 + <el-button
299 297 class="ml-2"
300 298 :icon="h(Plus)"
301 299 type="primary"
... ... @@ -303,19 +301,18 @@ onMounted(() =&gt; {
303 301 v-access:code="['${permissionPrefix}:create']"
304 302 >
305 303 {{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
306   - </Button>
  304 + </el-button>
307 305 #if ($deleteBatchEnable)
308   - <Button
  306 + <el-button
309 307 :icon="h(Trash2)"
310   - type="primary"
311   - danger
  308 + type="danger"
312 309 class="ml-2"
313 310 :disabled="isEmpty(checkedIds)"
314 311 @click="handleDeleteBatch"
315 312 v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']"
316 313 >
317 314 批量删除
318   - </Button>
  315 + </el-button>
319 316 #end
320 317 </TableToolbar>
321 318 </template>
... ... @@ -358,35 +355,38 @@ onMounted(() =&gt; {
358 355 #end
359 356 <vxe-column field="operation" title="操作" align="center">
360 357 <template #default="{row}">
361   - <Button
  358 + <el-button
362 359 size="small"
363   - type="link"
  360 + type="primary"
  361 + link
364 362 @click="handleEdit(row as any)"
365 363 v-access:code="['${permissionPrefix}:update']"
366 364 >
367 365 {{ $t('ui.actionTitle.edit') }}
368   - </Button>
369   - <Button
  366 + </el-button>
  367 + <el-button
370 368 size="small"
371   - type="link"
372   - danger
  369 + type="danger"
  370 + link
373 371 class="ml-2"
374 372 @click="handleDelete(row as any)"
375 373 v-access:code="['${permissionPrefix}:delete']"
376 374 >
377 375 {{ $t('ui.actionTitle.delete') }}
378   - </Button>
  376 + </el-button>
379 377 </template>
380 378 </vxe-column>
381 379 </vxe-table>
382 380 <!-- 分页 -->
383 381 <div class="mt-2 flex justify-end">
384   - <Pagination
  382 + <el-pagination
385 383 :total="total"
386   - v-model:current="queryParams.pageNo"
  384 + v-model:current-page="queryParams.pageNo"
387 385 v-model:page-size="queryParams.pageSize"
388   - show-size-changer
389   - @change="getList"
  386 + :page-sizes="[10, 20, 50, 100]"
  387 + layout="total, sizes, prev, pager, next, jumper"
  388 + @size-change="getList"
  389 + @current-change="getList"
390 390 />
391 391 </div>
392 392 </ContentWrap>
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/list_sub_inner.vue.vm
  View file @9b39f86
1 1 ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点：
2 2 ## 1）inner 使用 list 不分页，erp 使用 page 分页
3 3 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持
4   -#parse("codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm")
5 4 \ No newline at end of file
  5 +#parse("codegen/vue3_vben5_ele/general/views/modules/list_sub_erp.vue.vm")
6 6 \ No newline at end of file
... ...