BJ_ZTEITS-Developers / parking-cloud-yudao

Commit a88c93fc609a3e435a98e492b53b4612a5297f57

Authored by puhui999
1 parent df69fecb

代码生成：重构 vue2 模版，适配树表和主子表（90%）

Inline Side-by-side
Showing 4 changed files with 428 additions and 540 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_erp.vue.vm
  View file @a88c93f
@@ -2,203 +2,211 @@ @@ -2,203 +2,211 @@
2 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) 2 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
3 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 3 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
4 <template> 4 <template>
5 - <Dialog :title="dialogTitle" :visible.sync="dialogVisible">  
6 - <el-form  
7 - ref="formRef"  
8 - :model="formData"  
9 - :rules="formRules"  
10 - label-width="100px"  
11 - v-loading="formLoading"  
12 - >  
13 -#foreach($column in $subColumns)  
14 - #if ($column.createOperation || $column.updateOperation)  
15 - #set ($dictType = $column.dictType)  
16 - #set ($javaField = $column.javaField)  
17 - #set ($javaType = $column.javaType)  
18 - #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})  
19 - #set ($comment = $column.columnComment)  
20 - #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法  
21 - #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")  
22 - #set ($dictMethod = "getIntDictOptions")  
23 - #elseif ($javaType == "String")  
24 - #set ($dictMethod = "getStrDictOptions")  
25 - #elseif ($javaType == "Boolean")  
26 - #set ($dictMethod = "getBoolDictOptions") 5 + <div class="app-container">
  6 + <!-- 对话框(添加 / 修改) -->
  7 + <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" v-dialogDrag append-to-body>
  8 + <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="80px">
  9 + #foreach($column in $subColumns)
  10 + #if ($column.createOperation || $column.updateOperation)
  11 + #set ($dictType = $column.dictType)
  12 + #set ($javaField = $column.javaField)
  13 + #set ($javaType = $column.javaType)
  14 + #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  15 + #set ($comment = $column.columnComment)
  16 + #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 TODO 芋艿：这里要忽略下 join 字段；
  17 + #if (!$column.primaryKey)## 忽略主键，不用在表单里
  18 + <el-form-item label="${comment}" prop="${javaField}">
  19 + <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />
  20 + </el-form-item>
  21 + #end
  22 + #elseif($column.htmlType == "imageUpload")## 图片上传
  23 + #set ($hasImageUploadColumn = true)
  24 + <el-form-item label="${comment}">
  25 + <ImageUpload v-model="form.${javaField}"/>
  26 + </el-form-item>
  27 + #elseif($column.htmlType == "fileUpload")## 文件上传
  28 + #set ($hasFileUploadColumn = true)
  29 + <el-form-item label="${comment}">
  30 + <FileUpload v-model="form.${javaField}"/>
  31 + </el-form-item>
  32 + #elseif($column.htmlType == "editor")## 文本编辑器
  33 + #set ($hasEditorColumn = true)
  34 + <el-form-item label="${comment}">
  35 + <editor v-model="form.${javaField}" :min-height="192"/>
  36 + </el-form-item>
  37 + #elseif($column.htmlType == "select")## 下拉框
  38 + <el-form-item label="${comment}" prop="${javaField}">
  39 + <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
  40 + #if ("" != $dictType)## 有数据字典
  41 + <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  42 + :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
  43 + #else##没数据字典
  44 + <el-option label="请选择字典生成" value="" />
  45 + #end
  46 + </el-select>
  47 + </el-form-item>
  48 + #elseif($column.htmlType == "checkbox")## 多选框
  49 + <el-form-item label="${comment}" prop="${javaField}">
  50 + <el-checkbox-group v-model="form.${javaField}">
  51 + #if ("" != $dictType)## 有数据字典
  52 + <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  53 + :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>
  54 + #else##没数据字典
  55 + <el-checkbox>请选择字典生成</el-checkbox>
  56 + #end
  57 + </el-checkbox-group>
  58 + </el-form-item>
  59 + #elseif($column.htmlType == "radio")## 单选框
  60 + <el-form-item label="${comment}" prop="${javaField}">
  61 + <el-radio-group v-model="form.${javaField}">
  62 + #if ("" != $dictType)## 有数据字典
  63 + <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  64 + :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"
  65 + #else:label="dict.value"#end>{{dict.label}}</el-radio>
  66 + #else##没数据字典
  67 + <el-radio label="1">请选择字典生成</el-radio>
  68 + #end
  69 + </el-radio-group>
  70 + </el-form-item>
  71 + #elseif($column.htmlType == "datetime")## 时间框
  72 + <el-form-item label="${comment}" prop="${javaField}">
  73 + <el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
  74 + </el-form-item>
  75 + #elseif($column.htmlType == "textarea")## 文本框
  76 + <el-form-item label="${comment}" prop="${javaField}">
  77 + <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
  78 + </el-form-item>
  79 + #end
  80 + #end
  81 + #end
  82 + </el-form>
  83 + <div slot="footer" class="dialog-footer">
  84 + <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
  85 + <el-button @click="dialogVisible = false">取 消</el-button>
  86 + </div>
  87 + </el-dialog>
  88 + </div>
  89 +</template>
  90 +
  91 +<script>
  92 + import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'
  93 + #if ($hasImageUploadColumn)
  94 + import ImageUpload from '@/components/ImageUpload';
  95 + #end
  96 + #if ($hasFileUploadColumn)
  97 + import FileUpload from '@/components/FileUpload';
  98 + #end
  99 + #if ($hasEditorColumn)
  100 + import Editor from '@/components/Editor';
  101 + #end
  102 + export default {
  103 + name: "${simpleClassName}",
  104 + components: {
  105 + #if ($hasImageUploadColumn)
  106 + ImageUpload,
27 #end 107 #end
28 - #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 TODO 芋艿：这里要忽略下 join 字段；  
29 - <el-form-item label="${comment}" prop="${javaField}">  
30 - <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />  
31 - </el-form-item>  
32 - #elseif($column.htmlType == "imageUpload")## 图片上传  
33 - <el-form-item label="${comment}" prop="${javaField}">  
34 - <UploadImg v-model="formData.${javaField}" />  
35 - </el-form-item>  
36 - #elseif($column.htmlType == "fileUpload")## 文件上传  
37 - <el-form-item label="${comment}" prop="${javaField}">  
38 - <UploadFile v-model="formData.${javaField}" />  
39 - </el-form-item>  
40 - #elseif($column.htmlType == "editor")## 文本编辑器  
41 - <el-form-item label="${comment}" prop="${javaField}">  
42 - <Editor v-model="formData.${javaField}" height="150px" />  
43 - </el-form-item>  
44 - #elseif($column.htmlType == "select")## 下拉框  
45 - <el-form-item label="${comment}" prop="${javaField}">  
46 - <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">  
47 - #if ("" != $dictType)## 有数据字典  
48 - <el-option  
49 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
50 - :key="dict.value"  
51 - :label="dict.label"  
52 - :value="dict.value"  
53 - />  
54 - #else##没数据字典  
55 - <el-option label="请选择字典生成" value="" /> 108 + #if ($hasFileUploadColumn)
  109 + FileUpload,
  110 + #end
  111 + #if ($hasEditorColumn)
  112 + Editor,
  113 + #end
  114 + },
  115 + data() {
  116 + return {
  117 + // 弹出层标题
  118 + dialogTitle: "",
  119 + // 是否显示弹出层
  120 + dialogVisible: false,
  121 + // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  122 + formLoading: false,
  123 + // 表单参数
  124 + formData: {
  125 + #foreach ($column in $columns)
  126 + #if ($column.createOperation || $column.updateOperation)
  127 + #if ($column.htmlType == "checkbox")
  128 + $column.javaField: [],
  129 + #else
  130 + $column.javaField: undefined,
  131 + #end
56 #end 132 #end
57 - </el-select>  
58 - </el-form-item>  
59 - #elseif($column.htmlType == "checkbox")## 多选框  
60 - <el-form-item label="${comment}" prop="${javaField}">  
61 - <el-checkbox-group v-model="formData.${javaField}">  
62 - #if ("" != $dictType)## 有数据字典  
63 - <el-checkbox  
64 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
65 - :key="dict.value"  
66 - :label="dict.value"  
67 - >  
68 - {{ dict.label }}  
69 - </el-checkbox>  
70 - #else##没数据字典  
71 - <el-checkbox>请选择字典生成</el-checkbox> 133 + #end
  134 + },
  135 + // 表单校验
  136 + formRules: {
  137 + #foreach ($column in $columns)
  138 + #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
  139 + #set($comment=$column.columnComment)
  140 + $column.javaField: [{ required: true, message: "${comment}不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }],
72 #end 141 #end
73 - </el-checkbox-group>  
74 - </el-form-item>  
75 - #elseif($column.htmlType == "radio")## 单选框  
76 - <el-form-item label="${comment}" prop="${javaField}">  
77 - <el-radio-group v-model="formData.${javaField}">  
78 - #if ("" != $dictType)## 有数据字典  
79 - <el-radio  
80 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
81 - :key="dict.value"  
82 - :label="dict.value"  
83 - >  
84 - {{ dict.label }}  
85 - </el-radio>  
86 - #else##没数据字典  
87 - <el-radio label="1">请选择字典生成</el-radio> 142 + #end
  143 + },
  144 + };
  145 + },
  146 + methods: {
  147 + /** 表单重置 */
  148 + reset() {
  149 + this.formData = {
  150 + #foreach ($column in $columns)
  151 + #if ($column.createOperation || $column.updateOperation)
  152 + #if ($column.htmlType == "checkbox")
  153 + $column.javaField: [],
  154 + #else
  155 + $column.javaField: undefined,
  156 + #end
88 #end 157 #end
89 - </el-radio-group>  
90 - </el-form-item>  
91 - #elseif($column.htmlType == "datetime")## 时间框  
92 - <el-form-item label="${comment}" prop="${javaField}">  
93 - <el-date-picker  
94 - v-model="formData.${javaField}"  
95 - type="date"  
96 - value-format="x"  
97 - placeholder="选择${comment}"  
98 - />  
99 - </el-form-item>  
100 - #elseif($column.htmlType == "textarea")## 文本框  
101 - <el-form-item label="${comment}" prop="${javaField}">  
102 - <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />  
103 - </el-form-item>  
104 - #end  
105 - #end  
106 -#end  
107 - </el-form>  
108 - <template v-slot:footer>  
109 - <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>  
110 - <el-button @click="dialogVisible = false">取 消</el-button>  
111 - </template>  
112 - </Dialog>  
113 -</template>  
114 -<script setup lang="ts">  
115 -import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'  
116 -import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'  
117 -  
118 -const { t } = useI18n() // 国际化  
119 -const message = useMessage() // 消息弹窗  
120 -  
121 -const dialogVisible = ref(false) // 弹窗的是否展示  
122 -const dialogTitle = ref('') // 弹窗的标题  
123 -const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用  
124 -const formType = ref('') // 表单的类型：create - 新增；update - 修改  
125 -const formData = ref({  
126 -#foreach ($column in $subColumns)  
127 - #if ($column.createOperation || $column.updateOperation)  
128 - #if ($column.htmlType == "checkbox")  
129 - $column.javaField: [],  
130 - #else  
131 - $column.javaField: undefined,  
132 - #end  
133 - #end  
134 -#end  
135 -})  
136 -const formRules = reactive({  
137 -#foreach ($column in $subColumns)  
138 - #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键  
139 - #set($comment=$column.columnComment)  
140 - $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],  
141 - #end  
142 -#end  
143 -})  
144 -const formRef = ref() // 表单 Ref  
145 -  
146 -/** 打开弹窗 */  
147 -const open = async (type: string, id?: number, ${subJoinColumn.javaField}: number) => {  
148 - dialogVisible.value = true  
149 - dialogTitle.value = t('action.' + type)  
150 - formType.value = type  
151 - resetForm()  
152 - formData.value.${subJoinColumn.javaField} = ${subJoinColumn.javaField}  
153 - // 修改时，设置数据  
154 - if (id) {  
155 - formLoading.value = true  
156 - try {  
157 - formData.value = await ${simpleClassName}Api.get${subSimpleClassName}(id)  
158 - } finally {  
159 - formLoading.value = false 158 + #end
  159 + };
  160 + this.resetForm("formRef");
  161 + },
  162 + /** 打开弹窗 */
  163 + open(id) {
  164 + this.dialogVisible = true;
  165 + this.reset();
  166 + const that = this;
  167 + // 修改时，设置数据
  168 + if (id) {
  169 + this.formLoading = true;
  170 + try {
  171 + ${simpleClassName}Api.get${subSimpleClassName}(id).then(res=>{
  172 + that.formData = res.data;
  173 + that.title = "修改${table.classComment}";
  174 + })
  175 + } finally {
  176 + this.formLoading = false;
  177 + }
  178 + }
  179 + this.title = "新增${table.classComment}";
  180 + },
  181 + /** 提交按钮 */
  182 + submitForm() {
  183 + this.formLoading = true;
  184 + try {
  185 + let data = this.formData;
  186 + this.#[[$]]#refs["formRef"].validate(valid => {
  187 + if (!valid) {
  188 + return;
  189 + }
  190 + // 修改的提交
  191 + if (data.${primaryColumn.javaField}) {
  192 + ${simpleClassName}Api.update${simpleClassName}(data).then(response => {
  193 + this.#[[$modal]]#.msgSuccess("修改成功");
  194 + this.dialogVisible = false;
  195 + this.#[[$]]#emit('success');
  196 + });
  197 + return;
  198 + }
  199 + // 添加的提交
  200 + ${simpleClassName}Api.create${simpleClassName}(data).then(response => {
  201 + this.#[[$modal]]#.msgSuccess("新增成功");
  202 + this.dialogVisible = false;
  203 + this.#[[$]]#emit('success');
  204 + });
  205 + });
  206 + }finally {
  207 + this.formLoading = false
  208 + }
  209 + }
160 } 210 }
161 - }  
162 -}  
163 -defineExpose({ open }) // 提供 open 方法，用于打开弹窗  
164 -  
165 -/** 提交表单 */  
166 -const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调  
167 -const submitForm = async () => {  
168 - // 校验表单  
169 - await formRef.value.validate()  
170 - // 提交请求  
171 - formLoading.value = true  
172 - try {  
173 - const data = formData.value  
174 - if (formType.value === 'create') {  
175 - await ${simpleClassName}Api.create${subSimpleClassName}(data)  
176 - message.success(t('common.createSuccess'))  
177 - } else {  
178 - await ${simpleClassName}Api.update${subSimpleClassName}(data)  
179 - message.success(t('common.updateSuccess'))  
180 - }  
181 - dialogVisible.value = false  
182 - // 发送操作成功的事件  
183 - emit('success')  
184 - } finally {  
185 - formLoading.value = false  
186 - }  
187 -}  
188 -  
189 -/** 重置表单 */  
190 -const resetForm = () => {  
191 - formData.value = {  
192 -#foreach ($column in $subColumns)  
193 - #if ($column.createOperation || $column.updateOperation)  
194 - #if ($column.htmlType == "checkbox")  
195 - $column.javaField: [],  
196 - #else  
197 - $column.javaField: undefined,  
198 - #end  
199 - #end  
200 -#end  
201 - }  
202 - formRef.value?.resetFields()  
203 -}  
204 -</script>  
205 \ No newline at end of file 211 \ No newline at end of file
  212 + };
  213 +</script>
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_inner.vue.vm
  View file @a88c93f
1 ## 主表的 normal 和 inner 使用相同的 form 表单 1 ## 主表的 normal 和 inner 使用相同的 form 表单
2 -#parse("codegen/vue3/views/components/form_sub_normal.vue.vm")  
3 \ No newline at end of file 2 \ No newline at end of file
  3 +#parse("codegen/vue/views/components/form_sub_normal.vue.vm")
4 \ No newline at end of file 4 \ No newline at end of file
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_normal.vue.vm
  View file @a88c93f
@@ -4,359 +4,239 @@ @@ -4,359 +4,239 @@
4 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) 4 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
5 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 5 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
6 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 6 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
  7 +
7 <template> 8 <template>
  9 + <div class="app-container">
8 #if ( $subTable.subJoinMany )## 情况一：一对多，table + form 10 #if ( $subTable.subJoinMany )## 情况一：一对多，table + form
9 - <el-form  
10 - ref="formRef"  
11 - :model="formData"  
12 - :rules="formRules"  
13 - v-loading="formLoading"  
14 - label-width="0px"  
15 - :inline-message="true"  
16 - >  
17 - <el-table :data="formData" class="-mt-10px">  
18 - <el-table-column label="序号" type="index" width="100" />  
19 -#foreach($column in $subColumns)  
20 - #if ($column.createOperation || $column.updateOperation)  
21 - #set ($dictType = $column.dictType)  
22 - #set ($javaField = $column.javaField)  
23 - #set ($javaType = $column.javaType)  
24 - #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})  
25 - #set ($comment = $column.columnComment)  
26 - #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法  
27 - #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")  
28 - #set ($dictMethod = "getIntDictOptions")  
29 - #elseif ($javaType == "String")  
30 - #set ($dictMethod = "getStrDictOptions")  
31 - #elseif ($javaType == "Boolean")  
32 - #set ($dictMethod = "getBoolDictOptions")  
33 - #end  
34 - #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写  
35 - #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里  
36 - <el-table-column label="${comment}" min-width="150">  
37 - <template #default="{ row, $index }">  
38 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
39 - <el-input v-model="row.${javaField}" placeholder="请输入${comment}" />  
40 - </el-form-item>  
41 - </template>  
42 - </el-table-column>  
43 - #elseif($column.htmlType == "imageUpload")## 图片上传  
44 - <el-table-column label="${comment}" min-width="200">  
45 - <template #default="{ row, $index }">  
46 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
47 - <UploadImg v-model="row.${javaField}" />  
48 - </el-form-item>  
49 - </template>  
50 - </el-table-column>  
51 - #elseif($column.htmlType == "fileUpload")## 文件上传  
52 - <el-table-column label="${comment}" min-width="200">  
53 - <template #default="{ row, $index }">  
54 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
55 - <UploadFile v-model="row.${javaField}" />  
56 - </el-form-item>  
57 - </template>  
58 - </el-table-column>  
59 - #elseif($column.htmlType == "editor")## 文本编辑器  
60 - <el-table-column label="${comment}" min-width="400">  
61 - <template #default="{ row, $index }">  
62 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
63 - <Editor v-model="row.${javaField}" height="150px" />  
64 - </el-form-item>  
65 - </template>  
66 - </el-table-column>  
67 - #elseif($column.htmlType == "select")## 下拉框  
68 - <el-table-column label="${comment}" min-width="150">  
69 - <template #default="{ row, $index }">  
70 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
71 - <el-select v-model="row.${javaField}" placeholder="请选择${comment}">  
72 - #if ("" != $dictType)## 有数据字典  
73 - <el-option  
74 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
75 - :key="dict.value"  
76 - :label="dict.label"  
77 - :value="dict.value"  
78 - />  
79 - #else##没数据字典  
80 - <el-option label="请选择字典生成" value="" />  
81 - #end  
82 - </el-select>  
83 - </el-form-item>  
84 - </template>  
85 - </el-table-column>  
86 - #elseif($column.htmlType == "checkbox")## 多选框  
87 - <el-table-column label="${comment}" min-width="150">  
88 - <template #default="{ row, $index }">  
89 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
90 - <el-checkbox-group v-model="row.${javaField}">  
91 - #if ("" != $dictType)## 有数据字典  
92 - <el-checkbox  
93 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
94 - :key="dict.value"  
95 - :label="dict.value"  
96 - >  
97 - {{ dict.label }}  
98 - </el-checkbox>  
99 - #else##没数据字典  
100 - <el-checkbox>请选择字典生成</el-checkbox>  
101 - #end  
102 - </el-checkbox-group>  
103 - </el-form-item>  
104 - </template>  
105 - </el-table-column>  
106 - #elseif($column.htmlType == "radio")## 单选框  
107 - <el-table-column label="${comment}" min-width="150">  
108 - <template #default="{ row, $index }">  
109 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
110 - <el-radio-group v-model="row.${javaField}">  
111 - #if ("" != $dictType)## 有数据字典  
112 - <el-radio  
113 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
114 - :key="dict.value"  
115 - :label="dict.value"  
116 - >  
117 - {{ dict.label }}  
118 - </el-radio>  
119 - #else##没数据字典  
120 - <el-radio label="1">请选择字典生成</el-radio>  
121 - #end  
122 - </el-radio-group>  
123 - </el-form-item>  
124 - </template>  
125 - </el-table-column>  
126 - #elseif($column.htmlType == "datetime")## 时间框  
127 - <el-table-column label="${comment}" min-width="150">  
128 - <template #default="{ row, $index }">  
129 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
130 - <el-date-picker  
131 - v-model="row.${javaField}"  
132 - type="date"  
133 - value-format="x"  
134 - placeholder="选择${comment}"  
135 - />  
136 - </el-form-item>  
137 - </template>  
138 - </el-table-column>  
139 - #elseif($column.htmlType == "textarea")## 文本框  
140 - <el-table-column label="${comment}" min-width="200">  
141 - <template #default="{ row, $index }">  
142 - <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">  
143 - <el-input v-model="row.${javaField}" type="textarea" placeholder="请输入${comment}" />  
144 - </el-form-item>  
145 - </template>  
146 - </el-table-column>  
147 - #end  
148 - #end  
149 -#end  
150 - <el-table-column align="center" fixed="right" label="操作" width="60">  
151 - <template #default="{ $index }">  
152 - <el-button @click="handleDelete($index)" link>—</el-button>  
153 - </template>  
154 - </el-table-column>  
155 - </el-table>  
156 - </el-form> 11 + <el-form
  12 + ref="formRef"
  13 + :model="formData"
  14 + :rules="formRules"
  15 + v-loading="formLoading"
  16 + label-width="0px"
  17 + :inline-message="true"
  18 + >
  19 +## // TODO puhui999: 看看样式是否需要调整
  20 + <el-table :data="formData" class="-mt-10px">
  21 + <el-table-column label="序号" type="index" width="100" />
  22 + #foreach($column in $subColumns)
  23 + #if ($column.createOperation || $column.updateOperation)
  24 + #set ($dictType = $column.dictType)
  25 + #set ($javaField = $column.javaField)
  26 + #set ($javaType = $column.javaType)
  27 + #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  28 + #set ($comment = $column.columnComment)
  29 + #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
  30 + #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
  31 + <el-table-column label="${comment}" min-width="150">
  32 + <template slot-scope="{ row, $index }">
  33 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  34 + <el-input v-model="row.${javaField}" placeholder="请输入${comment}" />
  35 + </el-form-item>
  36 + </template>
  37 + </el-table-column>
  38 + #elseif($column.htmlType == "imageUpload")## 图片上传
  39 + #set ($hasImageUploadColumn = true)
  40 + <el-table-column label="${comment}" min-width="200">
  41 + <template slot-scope="{ row, $index }">
  42 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  43 + <ImageUpload v-model="row.${javaField}"/>
  44 + </el-form-item>
  45 + </template>
  46 + </el-table-column>
  47 + #elseif($column.htmlType == "fileUpload")## 文件上传
  48 + #set ($hasFileUploadColumn = true)
  49 + <el-table-column label="${comment}" min-width="200">
  50 + <template slot-scope="{ row, $index }">
  51 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  52 + <FileUpload v-model="row.${javaField}"/>
  53 + </el-form-item>
  54 + </template>
  55 + </el-table-column>
  56 + #elseif($column.htmlType == "editor")## 文本编辑器
  57 + #set ($hasEditorColumn = true)
  58 + <el-table-column label="${comment}" min-width="400">
  59 + <template slot-scope="{ row, $index }">
  60 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  61 + <editor v-model="row.${javaField}" :min-height="192"/>
  62 + </el-form-item>
  63 + </template>
  64 + </el-table-column>
  65 + #elseif($column.htmlType == "select")## 下拉框
  66 + <el-table-column label="${comment}" min-width="150">
  67 + <template slot-scope="{ row, $index }">
  68 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  69 + <el-select v-model="row.${javaField}" placeholder="请选择${comment}">
  70 + #if ("" != $dictType)## 有数据字典
  71 + <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  72 + :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
  73 + #else##没数据字典
  74 + <el-option label="请选择字典生成" value="" />
  75 + #end
  76 + </el-select>
  77 + </el-form-item>
  78 + </template>
  79 + </el-table-column>
  80 + #elseif($column.htmlType == "checkbox")## 多选框
  81 + <el-table-column label="${comment}" min-width="150">
  82 + <template slot-scope="{ row, $index }">
  83 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  84 + <el-checkbox-group v-model="row.${javaField}">
  85 + #if ("" != $dictType)## 有数据字典
  86 + <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  87 + :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>
  88 + #else##没数据字典
  89 + <el-checkbox>请选择字典生成</el-checkbox>
  90 + #end
  91 + </el-checkbox-group>
  92 + </el-form-item>
  93 + </template>
  94 + </el-table-column>
  95 + #elseif($column.htmlType == "radio")## 单选框
  96 + <el-table-column label="${comment}" min-width="150">
  97 + <template slot-scope="{ row, $index }">
  98 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  99 + <el-radio-group v-model="row.${javaField}">
  100 + #if ("" != $dictType)## 有数据字典
  101 + <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
  102 + :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"
  103 + #else:label="dict.value"#end>{{dict.label}}</el-radio>
  104 + #else##没数据字典
  105 + <el-radio label="1">请选择字典生成</el-radio>
  106 + #end
  107 + </el-radio-group>
  108 + </el-form-item>
  109 + </template>
  110 + </el-table-column>
  111 + #elseif($column.htmlType == "datetime")## 时间框
  112 + <el-table-column label="${comment}" min-width="150">
  113 + <template slot-scope="{ row, $index }">
  114 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  115 + <el-date-picker
  116 + v-model="row.${javaField}"
  117 + type="date"
  118 + value-format="x"
  119 + placeholder="选择${comment}"
  120 + />
  121 + </el-form-item>
  122 + </template>
  123 + </el-table-column>
  124 + #elseif($column.htmlType == "textarea")## 文本框
  125 + <el-table-column label="${comment}" min-width="200">
  126 + <template slot-scope="{ row, $index }">
  127 + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
  128 + <el-input v-model="row.${javaField}" type="textarea" placeholder="请输入${comment}" />
  129 + </el-form-item>
  130 + </template>
  131 + </el-table-column>
  132 + #end
  133 + #end
  134 + #end
  135 + <el-table-column align="center" fixed="right" label="操作" width="60">
  136 + <template slot-scope="{ $index }">
  137 + <el-button @click="handleDelete($index)" link>—</el-button>
  138 + </template>
  139 + </el-table-column>
  140 + </el-table>
  141 + </el-form>
157 <el-row justify="center" class="mt-3"> 142 <el-row justify="center" class="mt-3">
158 <el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button> 143 <el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button>
159 </el-row> 144 </el-row>
160 -#else## 情况二：一对一，form  
161 - <el-form  
162 - ref="formRef"  
163 - :model="formData"  
164 - :rules="formRules"  
165 - label-width="100px"  
166 - v-loading="formLoading"  
167 - >  
168 -#foreach($column in $subColumns)  
169 - #if ($column.createOperation || $column.updateOperation)  
170 - #set ($dictType = $column.dictType)  
171 - #set ($javaField = $column.javaField)  
172 - #set ($javaType = $column.javaType)  
173 - #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})  
174 - #set ($comment = $column.columnComment)  
175 - #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法  
176 - #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")  
177 - #set ($dictMethod = "getIntDictOptions")  
178 - #elseif ($javaType == "String")  
179 - #set ($dictMethod = "getStrDictOptions")  
180 - #elseif ($javaType == "Boolean")  
181 - #set ($dictMethod = "getBoolDictOptions")  
182 - #end  
183 - #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写  
184 - #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里  
185 - <el-form-item label="${comment}" prop="${javaField}">  
186 - <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />  
187 - </el-form-item>  
188 - #elseif($column.htmlType == "imageUpload")## 图片上传  
189 - <el-form-item label="${comment}" prop="${javaField}">  
190 - <UploadImg v-model="formData.${javaField}" />  
191 - </el-form-item>  
192 - #elseif($column.htmlType == "fileUpload")## 文件上传  
193 - <el-form-item label="${comment}" prop="${javaField}">  
194 - <UploadFile v-model="formData.${javaField}" />  
195 - </el-form-item>  
196 - #elseif($column.htmlType == "editor")## 文本编辑器  
197 - <el-form-item label="${comment}" prop="${javaField}">  
198 - <Editor v-model="formData.${javaField}" height="150px" />  
199 - </el-form-item>  
200 - #elseif($column.htmlType == "select")## 下拉框  
201 - <el-form-item label="${comment}" prop="${javaField}">  
202 - <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">  
203 - #if ("" != $dictType)## 有数据字典  
204 - <el-option  
205 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
206 - :key="dict.value"  
207 - :label="dict.label"  
208 - :value="dict.value"  
209 - />  
210 - #else##没数据字典  
211 - <el-option label="请选择字典生成" value="" />  
212 - #end  
213 - </el-select>  
214 - </el-form-item>  
215 - #elseif($column.htmlType == "checkbox")## 多选框  
216 - <el-form-item label="${comment}" prop="${javaField}">  
217 - <el-checkbox-group v-model="formData.${javaField}">  
218 - #if ("" != $dictType)## 有数据字典  
219 - <el-checkbox  
220 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
221 - :key="dict.value"  
222 - :label="dict.value"  
223 - >  
224 - {{ dict.label }}  
225 - </el-checkbox>  
226 - #else##没数据字典  
227 - <el-checkbox>请选择字典生成</el-checkbox>  
228 - #end  
229 - </el-checkbox-group>  
230 - </el-form-item>  
231 - #elseif($column.htmlType == "radio")## 单选框  
232 - <el-form-item label="${comment}" prop="${javaField}">  
233 - <el-radio-group v-model="formData.${javaField}">  
234 - #if ("" != $dictType)## 有数据字典  
235 - <el-radio  
236 - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"  
237 - :key="dict.value"  
238 - :label="dict.value"  
239 - >  
240 - {{ dict.label }}  
241 - </el-radio>  
242 - #else##没数据字典  
243 - <el-radio label="1">请选择字典生成</el-radio>  
244 - #end  
245 - </el-radio-group>  
246 - </el-form-item>  
247 - #elseif($column.htmlType == "datetime")## 时间框  
248 - <el-form-item label="${comment}" prop="${javaField}">  
249 - <el-date-picker  
250 - v-model="formData.${javaField}"  
251 - type="date"  
252 - value-format="x"  
253 - placeholder="选择${comment}"  
254 - />  
255 - </el-form-item>  
256 - #elseif($column.htmlType == "textarea")## 文本框  
257 - <el-form-item label="${comment}" prop="${javaField}">  
258 - <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />  
259 - </el-form-item>  
260 - #end  
261 - #end  
262 -#end  
263 - </el-form>  
264 #end 145 #end
  146 + </div>
265 </template> 147 </template>
266 -<script setup lang="ts">  
267 -import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'  
268 -import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'  
269 148
270 -const props = defineProps<{  
271 - ${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}（主表的关联字段）  
272 -}>()  
273 -const formLoading = ref(false) // 表单的加载中  
274 -const formData = ref([])  
275 -const formRules = reactive({  
276 -#foreach ($column in $subColumns)  
277 - #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键  
278 - #set($comment=$column.columnComment)  
279 - $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],  
280 - #end  
281 -#end  
282 -})  
283 -const formRef = ref() // 表单 Ref  
284 -  
285 -/** 监听主表的关联字段的变化，加载对应的子表数据 */  
286 -watch(  
287 - () => props.${subJoinColumn.javaField},  
288 - async (val) => {  
289 - // 1. 重置表单  
290 -#if ( $subTable.subJoinMany )  
291 - formData.value = []  
292 -#else  
293 - formData.value = {  
294 - #foreach ($column in $subColumns)  
295 - #if ($column.createOperation || $column.updateOperation)  
296 - #if ($column.htmlType == "checkbox")  
297 - $column.javaField: [],  
298 - #else  
299 - $column.javaField: undefined,  
300 - #end 149 +<script>
  150 + import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'
  151 + #if ($hasImageUploadColumn)
  152 + import ImageUpload from '@/components/ImageUpload';
301 #end 153 #end
302 - #end  
303 - }  
304 -#end  
305 - // 2. val 非空，则加载数据  
306 - if (!val) {  
307 - return;  
308 - }  
309 - try {  
310 - formLoading.value = true  
311 -#if ( $subTable.subJoinMany )  
312 - formData.value = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val)  
313 -#else  
314 - const data = await ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(val)  
315 - if (!data) {  
316 - return  
317 - }  
318 - formData.value = data  
319 -#end  
320 - } finally {  
321 - formLoading.value = false  
322 - }  
323 - },  
324 - { immediate: true }  
325 -)  
326 -#if ( $subTable.subJoinMany )  
327 -  
328 -/** 新增按钮操作 */  
329 -const handleAdd = () => {  
330 - const row = {  
331 -#foreach ($column in $subColumns)  
332 - #if ($column.createOperation || $column.updateOperation)  
333 - #if ($column.htmlType == "checkbox")  
334 - $column.javaField: [],  
335 - #else  
336 - $column.javaField: undefined, 154 + #if ($hasFileUploadColumn)
  155 + import FileUpload from '@/components/FileUpload';
337 #end 156 #end
338 - #end  
339 -#end  
340 - }  
341 - row.${subJoinColumn.javaField} = props.${subJoinColumn.javaField}  
342 - formData.value.push(row)  
343 -}  
344 -  
345 -/** 删除按钮操作 */  
346 -const handleDelete = (index) => {  
347 - formData.value.splice(index, 1)  
348 -}  
349 -#end 157 + #if ($hasEditorColumn)
  158 + import Editor from '@/components/Editor';
  159 + #end
  160 + export default {
  161 + name: "${simpleClassName}",
  162 + components: {
  163 + #if ($hasImageUploadColumn)
  164 + ImageUpload,
  165 + #end
  166 + #if ($hasFileUploadColumn)
  167 + FileUpload,
  168 + #end
  169 + #if ($hasEditorColumn)
  170 + Editor,
  171 + #end
  172 + },
  173 + data() {
  174 + return {
  175 + // 弹出层标题
  176 + dialogTitle: "",
  177 + // 是否显示弹出层
  178 + dialogVisible: false,
  179 + // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  180 + formLoading: false,
  181 + // 表单参数
  182 + formData: {
  183 + #foreach ($column in $columns)
  184 + #if ($column.createOperation || $column.updateOperation)
  185 + #if ($column.htmlType == "checkbox")
  186 + $column.javaField: [],
  187 + #else
  188 + $column.javaField: undefined,
  189 + #end
  190 + #end
  191 + #end
  192 + },
  193 + // 表单校验
  194 + formRules: {
  195 + #foreach ($column in $columns)
  196 + #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
  197 + #set($comment=$column.columnComment)
  198 + $column.javaField: [{ required: true, message: "${comment}不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }],
  199 + #end
  200 + #end
  201 + },
  202 + };
  203 + },
  204 + props:{
  205 + ${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}（主表的关联字段）
  206 + },
  207 + methods: {
  208 + #if ( $subTable.subJoinMany )
350 209
351 -/** 表单校验 */  
352 -const validate = () => {  
353 - return formRef.value.validate()  
354 -} 210 + /** 新增按钮操作 */
  211 + handleAdd(){
  212 + const row = {
  213 + #foreach ($column in $subColumns)
  214 + #if ($column.createOperation || $column.updateOperation)
  215 + #if ($column.htmlType == "checkbox")
  216 + $column.javaField: [],
  217 + #else
  218 + $column.javaField: undefined,
  219 + #end
  220 + #end
  221 + #end
  222 + }
  223 + row.${subJoinColumn.javaField} = this.${subJoinColumn.javaField}
  224 + this.formData.push(row)
  225 + },
355 226
356 -/** 表单值 */  
357 -const getData = () => {  
358 - return formData.value  
359 -} 227 + /** 删除按钮操作 */
  228 + handleDelete(index) {
  229 + this.formData.splice(index, 1)
  230 + },
  231 + #end
  232 + /** 表单值 */
  233 + getData() {
  234 + return this.formData
  235 + },
  236 + /** 表单校验 */
  237 + validate() {
360 238
361 -defineExpose({ validate, getData })  
362 -</script>  
363 \ No newline at end of file 239 \ No newline at end of file
  240 + }
  241 + }
  242 + };
  243 +</script>
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/list_sub_inner.vue.vm
  View file @a88c93f
1 ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点： 1 ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点：
2 ## 1）inner 使用 list 不分页，erp 使用 page 分页 2 ## 1）inner 使用 list 不分页，erp 使用 page 分页
3 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持 3 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持
4 -#parse("codegen/vue3/views/components/list_sub_erp.vue.vm")  
5 \ No newline at end of file 4 \ No newline at end of file
  5 +#parse("codegen/vue/views/components/list_sub_erp.vue.vm")
6 \ No newline at end of file 6 \ No newline at end of file