模板

njzscloud-common/njzscloud-common-gen/src/main/resources/templates/ts/page_vue.btl

@@ -11,8 +11,12 @@ var apiTsName = dc + "-api.ts";
 var dTsName = dc + ".d.ts";
 %>
 <template>
-  <Page>
+    <FormPage
-    <ElForm v-show="showSearchForm" inline @submit.prevent="paging">
+      ref="formPage"
+      :action-column="actionColumn"
+      :left-tools="leftTools"
+      :paging="paging">
+    <template #searchFormItem="{ searchForm }">
        <%
        for(column in table.columns) {
            var map = tsType(column.dataType);
@@ -23,177 +27,74 @@ var dTsName = dc + ".d.ts";
           placeholder="${column.comment}"/>
       </ElFormItem>
      <%}%>
-      <ElFormItem>
+    </template>
-        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
-        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
-      </ElFormItem>
-    </ElForm>
 
-    <div class="tool-bar">
+    <template #columns>
-      <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
-      <ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
-    </div>
-
-    <ElTable v-loading="searching" :data="tableData"
-      cell-class-name="table-cell"
-      class="table-list"
-      empty-text="暂无数据"
-      header-row-class-name="table-header"
-      row-key="id">
         <%
         for(column in table.columns) {
             var map = tsType(column.dataType);
         %>
         <ElTableColumn label="${column.comment}" prop="${toCamelCase(column.name)}"/>
        <%}%>
-      <ElTableColumn label="操作" width="180">
-        <template #default="scope">
-          <div class="action-btn">
-            <ElPopconfirm
-              confirm-button-text="是"
-              cancel-button-text="否"
-              confirm-button-type="danger"
-              cancel-button-type="primary"
-              placement="top"
-              title="是否删除当前数据?"
-              width="180"
-              @confirm="delHandler(scope)">
-              <template #reference>
-                <ElButton text type="danger" :loading="deling">删除</ElButton>
     </template>
-            </ElPopconfirm>
+    <${ucc}Form ref="${lcc}Form" @edit-succ="research"/>
-            <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
-          </div>
-        </template>
-      </ElTableColumn>
-    </ElTable>
-     <ElPagination
-      layout="->, sizes, total, prev, pager, next"
-      v-model:current-page="searchForm.current"
-      v-model:page-size="searchForm.size"
-      :total="totalCount"
-      :page-sizes="[10, 20, 50, 100, 500]"
-      :hide-on-single-page="false"
-      :teleported="false"
-      @change="paging"/>
-    <${ucc}Form ref="${lcc}Form" @edit-succ="paging"/>
   </Page>
 </template>
 
 <script lang="ts" setup>
 import ${ucc}Api from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${apiTsName}'
 import ${ucc}Form from '@/pages/${moduleName}<%if(subModuleName != null){%>/${subModuleName}<%}%>/${formVueName}'
-import Page from '@/components/page/Page.vue'
+import FormPage, {
-import { elIcons } from '@/common/element/element.ts'
+  type ActionColumnType,
-import Utils from '@/common/utils'
+  type ToolType,
+} from '@/components/page/FormPage.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
 
-const totalCount = ref(0)
+const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
-const tableData = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Result[]>([]))
-const searchForm = Utils.resetAble(reactive<${ucc}Types.Search${ucc}Param>({
-  current: 1,
-  size: 20,
-}))
-const searching = ref(false)
-const deling = ref(false)
-const showSearchForm = ref(true)
 const ${lcc}FormIns = useTemplateRef<InstanceType<typeof ${ucc}Form>>('${lcc}Form')
 
-function showDialog(data?: ${ucc}Types.Search${ucc}Result) {
+function research() {
-  ${lcc}FormIns.value?.open(data)
+  formPageIns.value?.doSearch()
 }
 
-function delHandler({row}: { row: ${ucc}Types.Search${ucc}Result }) {
+function paging(params: ${ucc}Types.Search${ucc}Param) {
-  deling.value = true
+  return ${ucc}Api.paging(params)
-  ${ucc}Api.del([ row.id! ])
+}
+
+const leftTools: ToolType[] = [
+  {
+    icon: 'Plus',
+    label: '新建',
+    action() {
+      ${lcc}FormIns.value?.open()
+    },
+  },
+]
+const actionColumn = reactive<ActionColumnType<${ucc}Types.Search${ucc}Result>>({
+  tableActions: [
+    {
+      tooltip: '编辑',
+      icon: 'Edit',
+      action({row}) {
+        ${lcc}FormIns.value?.open(row)
+      },
+    },
+    {
+      icon: 'Delete',
+      loading: false,
+      type: 'danger',
+      tooltip: '删除',
+      confirm: {
+        title: '是否删除当前数据',
+      },
+      action({row}) {
+        return ${ucc}Api.del([ row.id! ])
           .then(() => {
             ElMessage.success('删除成功')
-      paging()
+            return true
           })
-  .finally(() => {
+      },
-      deling.value = false
+    },
+  ],
 })
-}
-
-function modifyHandler({row}: { row: ${ucc}Types.Search${ucc}Result }) {
-  showDialog(row)
-}
-
-function addHandler() {
-  showDialog()
-}
-
-function reset() {
-  searchForm.$reset()
-  paging()
-}
-
-function paging() {
-  searching.value = true
-  ${ucc}Api.paging(searchForm)
-    .then(res => {
-      totalCount.value = res.data?.total ?? 0
-      tableData.$reset(res.data?.records ?? [])
-    })
-    .finally(() => {
-      searching.value = false
-    })
-}
-onMounted(() => {
-  paging()
-})
-
 </script>
-
-<style lang="stylus" scoped>
-.table-list {
-  flex 1;
-  margin 0 0 20px 0
-  width 100%
-
-  :deep(.table-header) {
-    color #454C59
-
-    th {
-      background-color #EDF1F7
-      font-weight 500
-      position relative
-
-      & > div {
-        display flex
-        gap 5px
-        align-items center
-      }
-
-      &:not(:first-child) > div::before {
-        position: absolute;
-        top: 50%;
-        left: 1px;
-        width: 1px;
-        background-color: #D3D7DE;
-        transform: translateY(-50%);
-        content: "";
-        height 50%
-      }
-    }
-  }
-
-  :deep(.table-cell) {
-    color #2F3540
-  }
-  .action-btn {
-    width 100%
-    display flex
-    flex-wrap wrap
-
-    & > button {
-      margin 0
-    }
-  }
-}
-
-.tool-bar {
-  display flex
-  justify-content space-between
-  margin 0 0 20px 0
-}
-</style>