Merge pull request #10157 from ulleo/table-pager

feat(图表): 明细表的分页，可以自定义输入跳转到多少页

core/core-frontend/src/locales/zh-CN.ts

@@ -939,6 +939,9 @@ export default {
     table_align_center: '居中',
     table_align_right: '右对齐',
     table_scroll_bar_color: '滚动条颜色',
+    table_pager_style: '分页器风格',
+    page_pager_simple: '精简',
+    page_pager_general: '常规',
     draw_back: '收回',
     senior: '高级',
     senior_cfg: '高级设置',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -92,6 +92,10 @@ declare interface ChartBasicStyle {
    * 表格分页模式
    */
   tablePageMode: 'page' | 'pull'
+  /**
+   * 表格分页器风格
+   */
+  tablePageStyle: 'simple' | 'general'
   /**
    * 表格分页大小
    */

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -718,49 +718,61 @@ onMounted(() => {
       </el-col>
     </el-row>
 
-    <el-row :gutter="8">
-      <el-col :span="12" v-if="showProperty('tablePageMode')">
-        <el-form-item
-          :label="t('chart.table_page_mode')"
-          class="form-item"
-          :class="'form-item-' + themes"
-        >
-          <el-select
-            :effect="themes"
-            v-model="state.basicStyleForm.tablePageMode"
-            :placeholder="t('chart.table_page_mode')"
-            @change="changeBasicStyle('tablePageMode', true)"
-          >
-            <el-option :label="t('chart.page_mode_page')" value="page" />
-            <el-option :label="t('chart.page_mode_pull')" value="pull" />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col
-        :span="12"
-        v-if="showProperty('tablePageMode') && state.basicStyleForm.tablePageMode === 'page'"
+    <el-form-item
+      v-if="showProperty('tablePageMode')"
+      :label="t('chart.table_page_mode')"
+      class="form-item"
+      :class="'form-item-' + themes"
+    >
+      <el-radio-group
+        :effect="themes"
+        v-model="state.basicStyleForm.tablePageMode"
+        @change="changeBasicStyle('tablePageMode', true)"
       >
-        <el-form-item
-          :label="t('chart.table_page_size')"
-          class="form-item"
-          :class="'form-item-' + themes"
-        >
-          <el-select
-            :effect="themes"
-            v-model="state.basicStyleForm.tablePageSize"
-            :placeholder="t('chart.table_page_size')"
-            @change="changeBasicStyle('tablePageSize', true)"
-          >
-            <el-option
-              v-for="item in pageSizeOptions"
-              :key="item.value"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
+        <el-radio :effect="themes" label="page">{{ t('chart.page_mode_page') }}</el-radio>
+        <el-radio :effect="themes" label="pull">{{ t('chart.page_mode_pull') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="showProperty('tablePageMode')"
+      :label="t('chart.table_pager_style')"
+      class="form-item"
+      :class="'form-item-' + themes"
+    >
+      <el-radio-group
+        :effect="themes"
+        v-model="state.basicStyleForm.tablePageStyle"
+        @change="changeBasicStyle('tablePageStyle', true)"
+      >
+        <el-radio :effect="themes" label="simple">{{ t('chart.page_pager_simple') }}</el-radio>
+        <el-radio :effect="themes" label="general">{{ t('chart.page_pager_general') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="
+        showProperty('tablePageMode') &&
+        state.basicStyleForm.tablePageMode === 'page' &&
+        state.basicStyleForm.tablePageStyle === 'simple'
+      "
+      :label="t('chart.table_page_size')"
+      class="form-item"
+      :class="'form-item-' + themes"
+    >
+      <el-select
+        :effect="themes"
+        v-model="state.basicStyleForm.tablePageSize"
+        :placeholder="t('chart.table_page_size')"
+        @change="changeBasicStyle('tablePageSize', true)"
+      >
+        <el-option
+          v-for="item in pageSizeOptions"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+
     <!--table end-->
 
     <!--table2 start-->

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1401,6 +1401,7 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   tableColumnWidth: 100,
   tableFieldWidth: [],
   tablePageMode: 'page',
+  tablePageStyle: 'simple',
   tablePageSize: 20,
   gaugeStyle: 'default',
   colorScheme: 'default',

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -90,7 +90,9 @@ const state = reactive({
     currentPage: 1
   },
   totalItems: 0,
-  showPage: false
+  showPage: false,
+  pageStyle: 'simple',
+  currentPageSize: 0
 })
 // 图表数据不用全响应式
 let chartData = shallowRef<Partial<Chart['data']>>({
@@ -182,6 +184,12 @@ const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {
   if (resetPageInfo) {
     state.pageInfo.currentPage = 1
   }
+  state.pageStyle = customAttr.basicStyle.tablePageStyle
+  if (state.pageStyle === 'general') {
+    if (state.currentPageSize == 0) {
+      state.currentPageSize = pageInfo.pageSize
+    }
+  }
 }
 
 const initScroll = () => {
@@ -242,6 +250,16 @@ const handleCurrentChange = pageNum => {
   const chart = { ...view.value, chartExtRequest: extReq }
   calcData(chart, null, false)
 }
+
+const handlePageSizeChange = pageSize => {
+  let extReq = { pageSize: pageSize }
+  if (chartExtRequest.value) {
+    extReq = { ...extReq, ...chartExtRequest.value }
+  }
+  const chart = { ...view.value, chartExtRequest: extReq }
+  calcData(chart, null, false)
+}
+
 const pointClickTrans = () => {
   if (embeddedCallBack.value === 'yes') {
     trackClick('pointClick')
@@ -457,6 +475,7 @@ const tabStyle = computed(() => [
       <div class="table-page-info" :style="tabStyle">
         <div>共{{ state.pageInfo.total }}条</div>
         <el-pagination
+          v-if="state.pageStyle !== 'general'"
           class="table-page-content"
           layout="prev, pager, next"
           v-model:page-size="state.pageInfo.pageSize"
@@ -465,6 +484,17 @@ const tabStyle = computed(() => [
           :total="state.pageInfo.total"
           @update:current-page="handleCurrentChange"
         />
+        <el-pagination
+          v-else
+          class="table-page-content"
+          layout="prev, pager, next, sizes, jumper"
+          v-model:page-size="state.currentPageSize"
+          v-model:current-page="state.pageInfo.currentPage"
+          :pager-count="5"
+          :total="state.pageInfo.total"
+          @update:current-page="handleCurrentChange"
+          @update:page-size="handlePageSizeChange"
+        />
       </div>
     </el-row>
     <chart-error v-if="isError" :err-msg="errMsg" />