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

puhui999
1 parent 515cbbb2
Showing 3 changed files with 162 additions and 29 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/index.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/form_sub_erp.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm
@@ -38,6 +38,9 @@ import { downloadByData } from &#39;#/utils/download&#39;;
 const subTabsName = ref('$subClassNameVars.get(0)')
 #if ($table.templateType == 11)
 const select${simpleClassName} = ref<${simpleClassName}Api.${simpleClassName}>();
+async function onCellClick({ row }: { row: ${simpleClassName}Api.${simpleClassName} }) {
+  select${simpleClassName}.value = row
+}
 #end
 #end
@@ -323,7 +326,15 @@ onMounted(async () =&gt; {
           expandAll: true,
           reserve: true,
         }"
-          #end
+        #end
+#if ($table.templateType == 11) ## erp情况
+          @cell-click="onCellClick"
+          :row-config="{
+            keyField: 'id',
+            isHover: true,
+            isCurrent: true,
+          }"
+#end
           show-overflow
           :loading="loading"
       >
@@ -4,49 +4,54 @@
 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
 <script lang="ts" setup>
   import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+  import type { Rule } from 'ant-design-vue/es/form';
   import { useVbenModal } from '@vben/common-ui';
-  import { message } from 'ant-design-vue';
+  import { Tinymce as RichTextarea } from '#/components/tinymce';
+  import { ImageUpload, FileUpload } from "#/components/upload";
+  import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
+  import { DICT_TYPE, getDictOptions } from '#/utils/dict';
   import { computed, ref } from 'vue';
   import { $t } from '#/locales';
-  import { useVbenForm } from '#/adapter/form';
-  import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  import { use${subSimpleClassName}FormSchema } from '../data';
+  import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
   const emit = defineEmits(['success']);
-  const formData = ref<${simpleClassName}Api.${subSimpleClassName}>();
   const getTitle = computed(() => {
     return formData.value?.id
         ? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
         : $t('ui.actionTitle.create', ['${subTable.classComment}']);
   });
-  const [Form, formApi] = useVbenForm({
-    commonConfig: {
-      componentProps: {
-        class: 'w-full',
-      },
-      formItemClass: 'col-span-2',
-      labelWidth: 80,
-    },
-    layout: 'horizontal',
-    schema: use${subSimpleClassName}FormSchema(),
-    showDefaultActions: false
+  const formRef = ref();
+  const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({
+    #foreach ($column in $subColumns)
+      #if ($column.createOperation || $column.updateOperation)
+        #if ($column.htmlType == "checkbox")
+            $column.javaField: [],
+        #else
+            $column.javaField: undefined,
+        #end
+      #end
+    #end
   });
+  const rules: Record<string, Rule[]> = {
+    #foreach ($column in $subColumns)
+      #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
+        #set($comment=$column.columnComment)
+          $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
+      #end
+    #end
+  };
   const [Modal, modalApi] = useVbenModal({
     async onConfirm() {
-      const { valid } = await formApi.validate();
-      if (!valid) {
-        return;
-      }
+      await formRef.value?.validate();
       modalApi.lock();
       // 提交表单
-      const data = (await formApi.getValues()) as ${simpleClassName}Api.${subSimpleClassName};
-      data.${subJoinColumn.javaField} = formData.value?.${subJoinColumn.javaField};
+      const data = formData.value as ${simpleClassName}Api.${subSimpleClassName};
       try {
         await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
         // 关闭并提示
@@ -62,7 +67,7 @@
     },
     async onOpenChange(isOpen: boolean) {
       if (!isOpen) {
-        formData.value = undefined;
+        resetForm()
         return;
       }
@@ -81,13 +86,127 @@
       }
       // 设置到 values
       formData.value = data;
-      await formApi.setValues(formData.value);
     },
   });
+
+  /** 重置表单 */
+  const resetForm = () => {
+    formData.value = {
+      #foreach ($column in $subColumns)
+        #if ($column.createOperation || $column.updateOperation)
+          #if ($column.htmlType == "checkbox")
+              $column.javaField: [],
+          #else
+              $column.javaField: undefined,
+          #end
+        #end
+      #end
+    };
+    formRef.value?.resetFields();
+  }
 </script>
 <template>
   <Modal :title="getTitle">
-    <Form class="mx-4" />
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      #foreach($column in $subColumns)
+        #if ($column.createOperation || $column.updateOperation)
+          #set ($dictType = $column.dictType)
+          #set ($javaField = $column.javaField)
+          #set ($javaType = $column.javaType)
+          #set ($comment = $column.columnComment)
+          #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
+            #set ($dictMethod = "number")
+          #elseif ($javaType == "String")
+            #set ($dictMethod = "string")
+          #elseif ($javaType == "Boolean")
+            #set ($dictMethod = "boolean")
+          #end
+          #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
+            <Form.Item label="${comment}" name="${javaField}">
+              <Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
+            </Form.Item>
+          #elseif($column.htmlType == "imageUpload")## 图片上传
+            <Form.Item label="${comment}" name="${javaField}">
+              <ImageUpload v-model:value="formData.${javaField}" />
+            </Form.Item>
+          #elseif($column.htmlType == "fileUpload")## 文件上传
+            <Form.Item label="${comment}" name="${javaField}">
+              <FileUpload v-model:value="formData.${javaField}" />
+            </Form.Item>
+          #elseif($column.htmlType == "editor")## 文本编辑器
+            <Form.Item label="${comment}" name="${javaField}">
+              <RichTextarea v-model="formData.${javaField}" height="500px" />
+            </Form.Item>
+          #elseif($column.htmlType == "select")## 下拉框
+            <Form.Item label="${comment}" name="${javaField}">
+              <Select v-model:value="formData.${javaField}" placeholder="请选择${comment}">
+                #if ("" != $dictType)## 有数据字典
+                  <Select.Option
+                          v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                          :key="dict.value"
+                          :value="dict.value"
+                  >
+                    {{ dict.label }}
+                  </Select.Option>
+                #else##没数据字典
+                  <Select.Option label="请选择字典生成" value="" />
+                #end
+              </Select>
+            </Form.Item>
+          #elseif($column.htmlType == "checkbox")## 多选框
+            <Form.Item label="${comment}" name="${javaField}">
+              <CheckboxGroup v-model:value="formData.${javaField}">
+                #if ("" != $dictType)## 有数据字典
+                  <Checkbox
+                          v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                          :key="dict.value"
+                          :value="dict.value"
+                  >
+                    {{ dict.label }}
+                  </Checkbox>
+                #else##没数据字典
+                  <Checkbox label="请选择字典生成" />
+                #end
+              </CheckboxGroup>
+            </Form.Item>
+          #elseif($column.htmlType == "radio")## 单选框
+            <Form.Item label="${comment}" name="${javaField}">
+              <RadioGroup v-model:value="formData.${javaField}">
+                #if ("" != $dictType)## 有数据字典
+                  <Radio
+                          v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                          :key="dict.value"
+                          :value="dict.value"
+                  >
+                    {{ dict.label }}
+                  </Radio>
+                #else##没数据字典
+                  <Radio value="1">请选择字典生成</Radio>
+                #end
+              </RadioGroup>
+            </Form.Item>
+          #elseif($column.htmlType == "datetime")## 时间框
+            <Form.Item label="${comment}" name="${javaField}">
+              <DatePicker
+                      v-model:value="formData.${javaField}"
+                      valueFormat="x"
+                      placeholder="选择${comment}"
+              />
+            </Form.Item>
+          #elseif($column.htmlType == "textarea")## 文本框
+            <Form.Item label="${comment}" name="${javaField}">
+              <Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
+            </Form.Item>
+          #end
+        #end
+      #end
+    </Form>
   </Modal>
 </template>
@@ -14,11 +14,15 @@
   import { VxeColumn, VxeTable } from 'vxe-table';
   import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
   import { cloneDeep, formatDateTime } from '@vben/utils';
+  import { ContentWrap } from "#/components/content-wrap";
 #if ($table.templateType == 11) ## erp
     import { useVbenModal } from '@vben/common-ui';
     import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
-    import { Button, message } from 'ant-design-vue';
+    import { Tinymce as RichTextarea } from '#/components/tinymce';
+    import { ImageUpload, FileUpload } from "#/components/upload";
+    import { message,Button, Tabs,Pagination, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox,RangePicker, DatePicker, TreeSelect } from 'ant-design-vue';
+    import { DICT_TYPE, getDictOptions } from '#/utils/dict';
     import { Plus } from '@vben/icons';
     import { $t } from '#/locales';
     import { TableToolbar } from '#/components/table-toolbar';
@@ -99,8 +103,6 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
               #end
           #end
       #end
-
-    ${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
   })
 /** 搜索按钮操作 */
@@ -134,6 +136,7 @@ const resetQuery = () =&gt; {
                     #end
                 #end
             #end
+          params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
           const data = await get${subSimpleClassName}Page(params)
           list.value = data.list
           total.value = data.total