添加表格模板页面.

2023-08-11 15:36:59 +08:00
parent 9eb47370a6
commit 01ba756fa4
8 changed files with 226 additions and 18 deletions
--- a/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java
+++ b/orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java
@@ -12,9 +12,6 @@ import com.orion.lang.constant.Const;
 import com.orion.lang.utils.ext.yml.YmlExt;
 import com.orion.ops.framework.mybatis.core.domain.BaseDO;
 import com.orion.ops.framework.mybatis.core.mapper.IMapper;
-import com.orion.ops.module.infra.enums.RoleStatusEnum;
-import com.orion.ops.module.infra.enums.TestTableStatusEnum;
-import com.orion.ops.module.infra.enums.UserStatusEnum;
 import org.apache.ibatis.annotations.Mapper;

 import java.io.File;
@@ -41,9 +38,6 @@ public class CodeGenerator {
        String module = "infra";
        // 生成的表
        GenTable[] tables = {
-                new GenTable("test_table", "表", "test")
-                        .vue("test", "table")
-                        .enums(TestTableStatusEnum.class),
                // new GenTable("system_user", "用户", "user")
                //         .vue("user", "user")
                //         .enums(UserStatusEnum.class),
--- a/orion-ops-launch/src/main/resources/templates/orion-server-entity-request-create.java.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-server-entity-request-create.java.vm
@@ -1,5 +1,6 @@
 package ${currentPackage};

+import com.fasterxml.jackson.annotation.JsonFormat;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
@@ -37,6 +38,9 @@ public class ${type}CreateRequest implements Serializable {
    #if("$!field.comment" != "")
    @Schema(description = "${field.comment}")
    #end
+    #if("$field.propertyType" == "Date")
+    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+    #end
    private ${field.propertyType} ${field.propertyName};

    #end
--- a/orion-ops-launch/src/main/resources/templates/orion-server-entity-request-query.java.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-server-entity-request-query.java.vm
@@ -1,5 +1,6 @@
 package ${currentPackage};

+import com.fasterxml.jackson.annotation.JsonFormat;
 import com.orion.ops.framework.common.entity.PageRequest;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.*;
@@ -29,6 +30,9 @@ public class ${type}QueryRequest extends PageRequest {
    #if("$!field.comment" != "")
    @Schema(description = "${field.comment}")
    #end
+    #if("$field.propertyType" == "Date")
+    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+    #end
    private ${field.propertyType} ${field.propertyName};
    #end

--- a/orion-ops-launch/src/main/resources/templates/orion-server-entity-request-update.java.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-server-entity-request-update.java.vm
@@ -1,5 +1,6 @@
 package ${currentPackage};

+import com.fasterxml.jackson.annotation.JsonFormat;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
@@ -36,6 +37,9 @@ public class ${type}UpdateRequest implements Serializable {
    #if("$!field.comment" != "")
    @Schema(description = "${field.comment}")
    #end
+    #if("$field.propertyType" == "Date")
+    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+    #end
    private ${field.propertyType} ${field.propertyName};
    #end

--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-form-modal.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-form-modal.vue.vm
@@ -27,7 +27,10 @@
        #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}" placeholder="请选择${field.comment}" show-time />
+          <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
@@ -61,7 +64,7 @@
  const defaultForm = () => {
    return {
    #foreach($field in ${table.fields})
-      ${field.propertyName}: underfined,
+      ${field.propertyName}: undefined,
    #end
    };
  };
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-components-table.vue.vm
@@ -1 +1,197 @@
-table
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <a-query-header :model="formModel"
+                    label-align="left"
+                    @submit="fetchTableData"
+                    @reset="fetchTableData">
+      #foreach($field in ${table.fields})
+      <!-- $field.comment -->
+      <a-form-item field="${field.propertyName}" label="${field.comment}" label-col-flex="60px">
+      #if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
+        <a-input-number v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear/>
+      #elseif("$field.propertyType" == "Date")
+        <a-date-picker v-model="formModel.${field.propertyName}"
+                       style="width: 100%"
+                       placeholder="请选择${field.comment}"
+                       show-time
+                       allow-clear/>
+      #else
+        <a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear/>
+      #end
+      </a-form-item>
+      #end
+    </a-query-header>
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <div class="table-title">
+        ${table.comment}列表
+      </div>
+      <div class="table-bar-handle">
+        <a-space>
+          <!-- 新增 -->
+          <a-button type="primary"
+                    v-permission="['${package.ModuleName}:${typeHyphen}:create']"
+                    @click="emits('openAdd')">
+            新增
+            <template #icon>
+              <icon-plus />
+            </template>
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm position="br"
+                        type="warning"
+                        :content="`确认删除选中的${selectedKeys.length}条记录吗?`"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['${package.ModuleName}:${typeHyphen}:delete']"
+                      type="secondary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             class="table-wrapper-8"
+             ref="tableRef"
+             label-align="left"
+             :loading="loading"
+             :columns="columns"
+             v-model:selectedKeys="selectedKeys"
+             :row-selection="rowSelection"
+             :data="tableRenderData"
+             :pagination="pagination"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(pagination.current, size)"
+             :bordered="false">
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 修改 -->
+          <a-button type="text"
+                    size="mini"
+                    v-permission="['${package.ModuleName}:${typeHyphen}:update']"
+                    @click="emits('openUpdate', record)">
+            修改
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button type="text" size="mini"
+                      status="danger"
+                      v-permission="['${package.ModuleName}:${typeHyphen}:delete']">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: '${vue.module}-${vue.feature}-table'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { batchDelete${vue.featureFirstUpper}, delete${vue.featureFirstUpper}, get${vue.featureFirstUpper}Page, ${vue.featureFirstUpper}QueryRequest, ${vue.featureFirstUpper}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { defaultPagination, defaultRowSelection } from '@/types/table';
+
+  const tableRenderData = ref<${vue.featureFirstUpper}QueryResponse[]>();
+  const { loading, setLoading } = useLoading();
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const pagination = reactive(defaultPagination());
+  const selectedKeys = ref<number[]>([]);
+  const rowSelection = reactive(defaultRowSelection());
+
+  const formModel = reactive<${vue.featureFirstUpper}QueryRequest>({
+    #foreach($field in ${table.fields})
+    ${field.propertyName}: undefined,
+    #end
+  });
+
+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDelete${vue.featureFirstUpper}(selectedKeys.value);
+      Message.success(`成功删除${selectedKeys.value.length}条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      await fetchTableData();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除当前行
+  const deleteRow = async ({ id }: { id: number }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await delete${vue.featureFirstUpper}(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      await fetchTableData();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchTableData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchTableData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 加载数据
+  const doFetchTableData = async (request: ${vue.featureFirstUpper}QueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await get${vue.featureFirstUpper}Page(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+  fetchTableData();
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm
@@ -2,12 +2,12 @@
  <div class="layout-container">
    <!-- 表格 -->
    <${vue.feature}-table ref="table"
-                 @openAdd="() => modal.openAdd()"
-                 @openUpdate="(e) => modal.openUpdate(e)" />
+                  @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()" />
  </div>
 </template>

@@ -19,7 +19,7 @@

 <script lang="ts" setup>
  import ${vue.featureFirstUpper}Table from './components/${vue.feature}-table.vue';
-  import ${vue.featureFirstUpper}Modal from './components/${vue.feature}-form-modal.vue';
+  import ${vue.featureFirstUpper}FormModal from './components/${vue.feature}-form-modal.vue';
  import { ref } from 'vue';

  const table = ref();
--- a/orion-ops-launch/src/main/resources/templates/orion-vue-views-types-table.columns.ts.vm
+++ b/orion-ops-launch/src/main/resources/templates/orion-vue-views-types-table.columns.ts.vm
@@ -1,5 +1,5 @@
 import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-import { formatMilliSecond, YMD_HMS } from '@/utils';
+import { dateFormat } from '@/utils';

 const columns = [
  {
@@ -14,24 +14,27 @@ const columns = [
    dataIndex: '${field.propertyName}',
    slotName: '${field.propertyName}',
    align: 'center',
-    width: 100,
    #if(${field.propertyType} == 'String')
    ellipsis: true,
    tooltip: true,
+    #elseif(${field.propertyType} == 'Date')
+    render: ({ record }) => {
+      return dateFormat(new Date(record.${field.propertyName}));
+    },
    #end
  }, #end#end{
    title: '创建时间',
    dataIndex: 'createTime',
    slotName: 'createTime',
    render: ({ record }) => {
-      return formatMilliSecond(record.createTime, YMD_HMS);
+      return dateFormat(new Date(record.createTime));
    },
  }, {
    title: '修改时间',
    dataIndex: 'updateTime',
    slotName: 'updateTime',
    render: ({ record }) => {
-      return formatMilliSecond(record.createTime, YMD_HMS);
+      return dateFormat(new Date(record.createTime));
    },
  }, {
    title: '创建人',