添加抽屉表单模板.

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-form-drawer.vue.vm

@@ -0,0 +1,144 @@
+<template>
+  <a-drawer :visible="visible"
+            :title="title"
+            :width="430"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
+    <a-spin :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '380px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }"
+              :rules="formRules">
+        #foreach($field in ${table.fields})
+        #if("$field.propertyName" != "id")
+        <!-- $field.comment -->
+        <a-form-item field="${field.propertyName}" label="${field.comment}">
+        #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
+          <a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
+        #elseif("$field.propertyType" == "Date")
+          <a-date-picker v-model="formModel.${field.propertyName}"
+                         style="width: 100%"
+                         placeholder="请选择${field.comment}"
+                         show-time />
+        #else
+          <a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" />
+        #end
+        </a-form-item>
+        #end
+        #end
+      </a-form>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: '${vue.module}-${vue.feature}-form-drawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { create${vue.featureEntity}, update${vue.featureEntity} } from '@/api/${vue.module}/${vue.feature}';
+  import { Message } from '@arco-design/web-vue';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
+  import { toOptions } from '@/utils/enum';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+
+  const defaultForm = () => {
+    return {
+    #foreach($field in ${table.fields})
+      ${field.propertyName}: undefined,
+    #end
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = reactive<Record<string, any>>(defaultForm());
+
+  const emits = defineEmits(['added', 'updated']);
+
+  // 打开新增
+  const openAdd = () => {
+    title.value = '添加${table.comment}';
+    isAddHandle.value = true;
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 打开修改
+  const openUpdate = (record: any) => {
+    title.value = '修改${table.comment}';
+    isAddHandle.value = false;
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    Object.keys(formModel).forEach(k => {
+      formModel[k] = record[k];
+    });
+  };
+
+  defineExpose({ openAdd, openUpdate });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      if (isAddHandle.value) {
+        // 新增
+        await create${vue.featureEntity}(formModel as any);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await update${vue.featureEntity}(formModel as any);
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-form-modal.vue.vm

@@ -55,8 +55,8 @@
   import formRules from '../types/form.rules';
   import { create${vue.featureEntity}, update${vue.featureEntity} } from '@/api/${vue.module}/${vue.feature}';
   import { Message } from '@arco-design/web-vue';
-  import { } from '../types/enum.types';
-  import { } from '../types/const';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
   import { toOptions } from '@/utils/enum';
 
   const { visible, setVisible } = useVisible();

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm

@@ -115,8 +115,8 @@
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { defaultPagination, defaultRowSelection } from '@/types/table';
-  import { } from '../types/enum.types';
-  import { } from '../types/const';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
   import { toOptions } from '@/utils/enum';
 
   const tableRenderData = ref<${vue.featureEntity}QueryResponse[]>();

orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm

@@ -1,13 +1,25 @@
 <template>
   <div class="layout-container">
+    #if($vue.drawerForm)
+    <!-- 表格 -->
+    <${vue.feature}-table ref="table"
+                  @openAdd="() => drawer.openAdd()"
+                  @openUpdate="(e) => drawer.openUpdate(e)" />
+    <!-- 添加修改模态框 -->
+    <${vue.feature}-form-drawer ref="drawer"
+                   @added="() => table.addedCallback()"
+                   @updated="() => table.updatedCallback()" />
+    #else
     <!-- 表格 -->
     <${vue.feature}-table ref="table"
                   @openAdd="() => modal.openAdd()"
                   @openUpdate="(e) => modal.openUpdate(e)" />
     <!-- 添加修改模态框 -->
     <${vue.feature}-form-modal ref="modal"
-                       @added="() => table.addedCallback()"
-                       @updated="() => table.updatedCallback()" />
+                   @added="() => table.addedCallback()"
+                   @updated="() => table.updatedCallback()" />
+    #end
+
   </div>
 </template>
 
@@ -19,11 +31,20 @@
 
 <script lang="ts" setup>
   import ${vue.featureEntity}Table from './components/${vue.feature}-table.vue';
+  #if($vue.drawerForm)
+  import ${vue.featureEntity}FormDrawer from './components/${vue.feature}-form-drawer.vue';
+  #else
   import ${vue.featureEntity}FormModal from './components/${vue.feature}-form-modal.vue';
+  #end
+
   import { ref } from 'vue';
 
   const table = ref();
+  #if($vue.drawerForm)
+  const drawer = ref();
+  #else
   const modal = ref();
+  #end
 
 </script>