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 2 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
3 3 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
4 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 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 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 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 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 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 1 ## 主表的 normal 和 inner 使用相同的 form 表单
2   -#parse("codegen/vue3/views/components/form_sub_normal.vue.vm")
3 2 \ No newline at end of file
  3 +#parse("codegen/vue/views/components/form_sub_normal.vue.vm")
4 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 4 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
5 5 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
6 6 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
  7 +
7 8 <template>
  9 + <div class="app-container">
8 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 142 <el-row justify="center" class="mt-3">
158 143 <el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button>
159 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 145 #end
  146 + </div>
265 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 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 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 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 1 ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点：
2 2 ## 1）inner 使用 list 不分页，erp 使用 page 分页
3 3 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持
4   -#parse("codegen/vue3/views/components/list_sub_erp.vue.vm")
5 4 \ No newline at end of file
  5 +#parse("codegen/vue/views/components/list_sub_erp.vue.vm")
6 6 \ No newline at end of file
... ...