ylwl-cpscoms 1.0.0

package/src/SlPage/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <main :style="{ padding: notShowPadding ? '' : '20px' }" class="content-box">
+    <div class="sl-form">
+      <transition-group name="fade" tag="span" >
+        <slForm key="slForm" ref="slForm" v-model="form" :data="filterForm" :showlabel="false" :form-props="{ inline: true, size: 'small', labelStyle: { textAlign: 'left' }, labelWidth: 'auto' }" />
+      </transition-group>
+      <div class="search-btn">
+        <el-button type="primary" size="small" icon="el-icon-search" @click="searchTableData">搜索</el-button>
+        <el-button size="small" icon="el-icon-search" @click="resetTableData">重置</el-button>
+        <el-button v-show="options.length > showFormItem " size="small" type="text" @click="isShowMoreFilter">{{ isFold ? '折叠' : '展开' }}<i :class="isFold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" style="margin-left:3px"></i></el-button>
+      </div>
+    </div>
+    <div class="sl-table-header">
+      <div>
+        <slot :tablefilterFormData="$refs.slTable ? $refs.slTable.processedParams : {}" name="tableLeftButtons"></slot>
+      </div>
+      <div>
+        <slot :tablefilterFormData="$refs.slTable ? $refs.slTable.processedParams : {}" name="tableRightButtons" ></slot>
+        <el-button v-if="isShowColSetting" size="small" icon="el-icon-setting" @click="editCol">列设置</el-button>
+      </div>
+    </div>
+    <slTable ref="slTable" :table-api="tableApi" :columns="tableColumns" :project-from="projectFrom" :params="form" :filter-form="filterForm" :other-config="otherConfig" :default-seach-params="defaultSeachParams" v-bind="$attrs" v-on="$listeners" @setStorageCustomCol="setStorageCustomCol">
+      <template v-for="slotName in Object.keys($scopedSlots)" slot-scope="scope" :slot="slotName" >
+        <slot :name="slotName" v-bind="{ row: scope.row }"></slot>
+      </template>
+    </slTable>
+  </main>
+</template>
+<script>
+// import { mapGetters } from 'vuex'
+import slForm from '../SlForm/index.vue'
+import slTable from '../SlTable/index.vue'
+import { createCommandDrawer } from '@/components/global/SlDrawer'
+import colSetting from '@/components/global/SlTable/components/colSetting.vue'
+import { generateUniqueId, hasKey } from '@/components/global/utils'
+import store from '@/store'
+export default {
+  components: {
+    slForm,
+    slTable
+  },
+  props: {
+    tableApi: { type: Function, default: () => ({}) },
+    autoRequest: { type: Boolean, default: false },
+    tableColumns: { type: Array, default: () => [] },
+    filterForm: { type: Array, default: () => [] },
+    showFormItem: { type: Number, default: 3 },
+    projectFrom: { type: String, default: 'oldCpsb' },
+    initSeachParams: { type: Object, default: () => ({}) },
+    defaultSeachParams: { type: Object, default: () => ({}) },
+    isShowColSetting: { type: Boolean, default: true },
+    notShowPadding: { type: Boolean, default: false }, // 是否要padding效果
+    otherConfig: { type: Object, default: () => ({
+      rowKey: 'id',
+      responderCof: {},
+      requestBodyCof: {}
+    })
+    }
+  },
+  data() {
+    return {
+      options: this.filterForm,
+      form: {},
+      isFold: false,
+      headKey: '',
+      uniqueId: ''
+    }
+  },
+  computed: {
+    // ...mapGetters([
+    //   'currentColConfig'
+    // ]),
+    currentColConfig() {
+      // console.log(store.getters, "store.gettersxxxxxxx")
+      return store.state.tableConfig.colConfig[this.uniqueId] || {}
+    },
+    allColConfig() {
+      return store.state.tableConfig.colConfig
+    },
+    selectedList() {
+      return this.$refs.slTable ? this.$refs.slTable.selectedList : []
+    },
+    selectedListIds() {
+      return this.$refs.slTable ? this.$refs.slTable.selectedListIds : []
+    }
+
+  },
+  created() {
+    this.uniqueId = generateUniqueId(this.tableApi.toString())
+    // console.log(this.uniqueId, "this.uniqueIdthis.uniqueIdthis.uniqueIdthis.uniqueId", this.tableApi.toString())
+    store.dispatch('getStorageCustomCol', this.uniqueId)
+    this.options.forEach((option, index) => {
+      if (index > this.showFormItem - 1) {
+        option.show = false
+      }
+    })
+    this.tableColumns.forEach(item => {
+      if (!hasKey(item, 'isShow')) {
+        this.$set(item, 'isShow', true)
+      }
+      if (this.currentColConfig.hide && this.currentColConfig.hide.includes(item.prop)) {
+        this.$set(item, 'isShow', false)
+      }
+    })
+    // 表格排序
+    this.sortTalbeColumns()
+
+    if (this.initSeachParams && Object.keys(this.initSeachParams).length > 0) {
+      for (const key in this.initSeachParams) {
+        this.form[key] = this.initSeachParams[key]
+      }
+    }
+  },
+  async mounted() {
+    this.autoRequest && this.$refs.slTable.getTableData()
+    this.$refs.slTable.resetColumns(this.tableColumns.filter(item => item.isShow && this.isShowTableColumn(item)))
+  },
+  methods: {
+    hasKey,
+    generateUniqueId,
+    // 永久删除的
+    isShowTableColumn(item) {
+      if (hasKey(item, 'isAlwaysShow') && typeof item.isAlwaysShow === 'function') {
+        return item.isAlwaysShow({
+          item: item
+        })
+      } else if (hasKey(item, 'isAlwaysShow') && typeof item.isAlwaysShow === 'string') {
+        return item.isAlwaysShow
+      } else {
+        return true
+      }
+    },
+    sortTalbeColumns() {
+      // console.log(this.currentColConfig.sort && this.currentColConfig.sort.length > 0, '是否');
+      // console.log(store, 'store.getters', this.allColConfig);
+      if (this.currentColConfig.sort && this.currentColConfig.sort.length > 0) {
+        this.tableColumns.sort((a, b) => {
+          return this.currentColConfig.sort.indexOf(a.prop) - this.currentColConfig.sort.indexOf(b.prop)
+        })
+      }
+    },
+    searchTableData() {
+      console.log(this.form, this.$refs.slForm.$refs.form, this.$refs.slTable.processedParams)
+      this.$refs.slForm.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$refs.slTable.handleCurrentChange(1)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetTableData() {
+      this.$refs.slForm.$refs.form.resetFields()
+      for (const key in this.form) {
+        if (this.form.hasOwnProperty(key)) {
+          this.form[key] = ''
+        }
+      }
+      // console.log(this.form, "xxxxx");
+      this.$refs.slForm.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$refs.slTable.handleCurrentChange(1)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+      // this.$refs.slTable.handleCurrentChange(1)
+    },
+    getTableData() {
+      this.$refs.slForm.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$refs.slTable.getCurrentPageList()
+        } else {
+          console.log('error getCurrentPageList submit!!')
+          return false
+        }
+      })
+    },
+    isShowMoreFilter() {
+      this.isFold = !this.isFold
+      if (this.isFold) {
+        this.options.forEach(option => {
+          this.$set(option, 'show', true)
+        })
+      } else {
+        this.options.forEach((option, index) => {
+          if (index > this.showFormItem - 1) {
+            this.$set(option, 'show', false)
+          }
+        })
+      }
+      // this.$forceUpdate()
+    },
+    saveKeeyAlive() {
+      const hideColArray = this.tableColumns.reduce((acc, item) => {
+        if (!item.isShow) {
+          acc.push(item.prop)
+        }
+        return acc
+      }, [])
+      store.dispatch('saveStorageCustomCol', {
+        key: this.uniqueId,
+        type: 'hide',
+        value: hideColArray
+      })
+    },
+    editCol() {
+      console.log(this.tableColumns.filter(item => item.prop !== 'operate' || item.type !== 'selection' || item.isShow), 'this.tableColumns', this.tableColumns)
+      // console.log(this.tableColumns, "在这里点开");
+      this.sortTalbeColumns()
+      // console.log(this.tableColumns, "在这里点开2");
+      createCommandDrawer({
+        title: '列设置(可拖拽排序)',
+        size: '20%',
+        direction: 'rtl',
+        contentComponent: colSetting,
+        closeDrawer: () => {
+          this.saveKeeyAlive()
+          this.$refs.slTable.headKey = new Date().getTime() + ''
+          // this.$refs.slTable.resetColumns(this.tableColumns.filter(item => item.isShow))
+        },
+        contentProps: {
+          columns: this.tableColumns.filter(item => item.prop !== 'operate' && item.type !== 'selection' && this.isShowTableColumn(item))
+        }, // 如果需要传递 props 给内容组件，可以在这里定义
+        contentListeners: {
+          'update-columns': (columns) => {
+            // 处理列更新事件
+            // console.log('接收到更新的列数据:', columns, this.tableColumns)
+            // 如果有多选框和操作，要加上
+            const sortColumns = [...columns]
+            const findSelection = this.tableColumns.find(item => item.type === 'selection')
+            const findOperate = this.tableColumns.find(item => item.prop === 'operate')
+            if (findSelection) {
+              sortColumns.unshift(findSelection)
+            }
+            if (findOperate) {
+              sortColumns.push(findOperate)
+            }
+            // console.log(sortColumns, "sortColumns")
+            this.$refs.slTable.resetColumns(sortColumns.filter(item => item.isShow))
+            this.setStorageCustomCol(columns)
+          },
+          'change-columns': () => {
+            this.$refs.slTable.resetColumns(this.tableColumns.filter(item => item.isShow))
+            this.$refs.slTable.headKey = new Date().getTime() + ''
+          }
+        }
+      })
+    },
+    setStorageCustomCol(columns) {
+      // console.log(this.uniqueId, 'a ?');
+      store.dispatch('saveStorageCustomCol', {
+        key: this.uniqueId,
+        type: 'sort',
+        value: columns.map(item => item.prop)
+      })
+    }
+  }
+}
+</script>
+<style scoped >
+@import url('./index.css');
+</style>
+

package/src/SlPage/remark.md

@@ -0,0 +1,283 @@
+<template>
+
+  <div class="slPage_main">
+    <SlMessage>
+      <template slot="operate">
+        <el-button>123</el-button>
+      </template>
+      <template slot="message">
+        <span>123</span><br>
+        <span>123</span><br>
+      </template>
+    </SlMessage>
+    <!-- project-from  艾瑞斯的数组入参不一致 
+    initSeachParams  初始化参数
+    -->
+    <SlPage
+      :table-api="rechargeApi.getRechargeList"
+      :auto-request="true"
+      :table-columns="columns"
+      :filter-form="filterForm"
+      :initSeachParams="initSeachParams"
+      :show-form-item="5"
+       :project-from="'ares'" 
+      :other-config= "{
+         rowKey: 'buserId',
+          responderCof: {
+            'total': ['data', 'page', 'total'],
+            'list': ['data', 'page', 'list'],
+            'statusCode': 'flag',
+          },
+          requestBodyCof: {
+            currentPage: 'pageNo',
+          },
+          responderCof: {
+            'total': ['data', 'count'],
+          },
+          donShowOverflowTooltip: true,
+      }"
+    >
+      <template slot="tableLeftButtons" slot-scope="{ tablefilterFormData }">
+        <el-button size="small" type="primary">新增</el-button>
+        <el-button size="small" type="success">导出</el-button>
+      </template>
+      <template slot="tableRightButtons" slot-scope="{ tablefilterFormData }">
+        <el-button size="small" type="primary">新增</el-button>
+        <el-button size="small" type="success">导出</el-button>
+      </template>
+    </SlPage>
+    <!-- <SlTable /> -->
+  </div>
+</template>
+
+<script>
+import SlPage from '@/components/global/SlPage'
+import SlTable from '@/components/global/SlTable'
+import SlForm from '@/components/global/SlForm'
+import * as rechargeApi from '@/api/propertyManagement/rechargeOrder'
+import SlMessage from '@/components/global/SlAlert'
+import { showConfirmMessageBox } from '@/components/global/SlMessageBox'
+import { createCommandDialog } from '@/components/global/SlDialog'
+import aa from './aa.vue'
+export default {
+  components: {
+    SlPage,
+    SlTable,
+    SlMessage,
+    SlForm
+  },
+  data() {
+    const tableData = [
+      { id: 10001, name: 'Test1', role: 'Develop', flag1: false, flag2: false },
+      { id: 10002, name: 'Test2', role: 'Test', flag1: true, flag2: true },
+      { id: 10003, name: 'Test3', role: 'PM', flag1: false, flag2: false }
+    ]
+    const columns = [
+      { prop: 'buserId', label: '日期', width: '180', sortable: true, isShow: false },
+      { prop: 'applyTime', label: '姓名', width: '180', isShow: false },
+      { prop: 'coinName', label: '姓名zzzzz', width: '180', isShow: false, tip: {
+        key: 'cuserAccount',
+        isShow: (row) => row.id === 513910
+
+      }},
+      { prop: 'depositOrderType', label: '姓名', width: '180', isShow: false,
+
+        // tip: {
+        //   // key: 'cuserAccount'
+        // }
+      },
+      { prop: 'completeTime', label: '姓名', width: '180', isShow: false },
+      { prop: 'coinType', label: '姓名', width: '180', isShow: false },
+      { prop: 'id', label: '姓名123', width: '180', isShow: false },
+      { prop: 'paymentType', label: '姓名423', width: '180', isShow: false },
+      { prop: 'paymentVoucher', label: '姓名77', width: '180', isShow: false },
+      { prop: 'rechargeRatio', label: '姓名', width: '180', isShow: false },
+      { prop: 'rechargeRealAmount', label: '姓名', width: '180', isShow: false },
+      { prop: 'rechargeStatusName', label: '姓名', width: '180', isShow: false },
+      { prop: 'rechargeStatus', label: '姓名', width: '180', isShow: false },
+      { prop: 'rechargeType', label: '姓名', width: '180', isShow: false },
+      { prop: 'reviewRemark', label: '姓名', width: '180', isShow: false },
+
+      { prop: 'rechargeNum', label: '地址', isShow: false },
+      { prop: 'operate', label: '操作', fixed: 'right', list: [
+        {
+          label: '编辑',
+          type: 'primary',
+          size: 'mini',
+           isShow: (row, column, $index) => {
+            console.log(row, column, $index, this, "000000")
+            return row.id === 513910
+          },
+          click: (row, column, $index, $event) => {
+            console.log(row, column, $index, $event, this, "000000")
+            this.$message.success('编辑')
+            showConfirmMessageBox({
+              message: '是否删除爱吧爱吧',
+              api: async(aaaa) => {
+                console.log("---------", aaaa)
+              },
+              params: {
+                bbbb: '人啊人啊'
+              }
+            })
+          }
+        },
+        {
+          label: '编辑2',
+          type: 'primary',
+          size: 'mini',
+          click: (row, column, $index, $event) => {
+            console.log(row, column, $index, $event, this, "000000")
+            this.$message.success('编辑')
+            createCommandDialog({
+              title: 'My Dialog',
+              width: '50%',
+              contentComponent: aa,
+              // footerSlot: 'footerSlot'
+              // contentProps: {
+              //   data: this.filterForms
+              // },
+              // footerSlot: aa
+            })
+          }
+        }
+      ] }
+    ]
+    const filterForm = [
+
+    // {
+    //   type: 'select',
+    //   model: 'publisherId',
+    //   label: '聚的话',
+    //   labelKey: 'label',
+    //   valueKey: 'value',
+    //   props: { placeholder: '请输入聚合', disabled: false },
+    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+    //   options: [ { label: 'Android', value: 1 },
+    //     { label: 'iOS', value: 2 },
+    //     { label: 'H5', value: 3 }],
+    //   view: 'auto'
+    // },
+    // {
+    //   label: '聚戏ID',
+    //   type: 'input',
+    //   model: 'aggGameId',
+    //   privateAttrs: { placeholder: '请输入聚合游戏ID' },
+    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+    //   view: 'auto'
+    // },
+    // {
+    //   type: 'select',
+    //   model: 'publisherId',
+    //   label: '哈苏话',
+    //   labelKey: 'label',
+    //   valueKey: 'value',
+    //   props: { placeholder: '请输入聚合', disabled: false },
+    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+    //   options: [ { label: 'Android', value: 1 },
+    //     { label: 'iOS', value: 2 },
+    //     { label: 'H5', value: 3 }],
+    //   view: 'auto'
+    // },
+      {
+        label: '游戏ID',
+        type: 'input',
+        rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+        model: 'aggGxxzxcameId',
+        privateAttrs: { placeholder: '请输入聚合游戏ID' },
+        // rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+        view: 'auto'
+      },
+      {
+        type: 'select',
+        model: 'publisherId',
+        label: '聚c23213',
+        labelKey: 'label',
+        valueKey: 'value',
+        props: { placeholder: '请输入聚合', disabled: false },
+        // rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+        options: [ { label: 'Android', value: 1 },
+          { label: 'iOS', value: 2 },
+          { label: 'H5', value: 3 }],
+        view: 'auto'
+      },
+      {
+        label: '游戏ID',
+        type: 'input',
+        model: 'aggzxczzxcameId',
+        privateAttrs: { placeholder: '请输入聚合游戏ID' },
+        // rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+        view: 'auto'
+      },
+      {
+        label: '时间',
+        type: 'datePicker',
+        model: 'aggGamezxcId',
+        privateProps: { type: 'daterange', startPlaceholder: '我是开始时间' },
+        attrs: { placeholder: '请输入聚合游戏ID', type: 'daterange' },
+        view: 'auto'
+      },
+      {
+        type: 'select',
+        model: 'publisasaherId',
+        label: '桑的话',
+        labelKey: 'label',
+        valueKey: 'value',
+        props: { placeholder: '请输入聚合', disabled: false },
+        options: [ { label: 'Android', value: 1 },
+          { label: 'iOS', value: 2 },
+          { label: 'H5', value: 3 }],
+        view: 'auto'
+      },
+      {
+        label: '聚合游戏ID',
+        type: 'input',
+        model: 'aggGameId',
+        privateAttrs: { placeholder: '请输入聚合游戏ID' },
+        rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+        view: 'auto'
+      },
+    // {
+    //   label: 'swich',
+    //   type: 'switch', // 渲染为select
+    //   model: 'problemxxFileInfo', // 给form对象绑定followUserId字段
+    //   // rules: [{ required: true, message: '该项为必填', trigger: 'change' }], //规则
+    //   view: 'auto',
+    //   props: {
+    //     stip: '最多20张，每个大小不超过100M，支持 .png .jpg .jpeg .mp4',
+    //     limit: 20,
+    //     perSize: 100,
+    //     accept: '.png, .jpg, .jpeg, .mp4, .MP4',
+    //     max: 2000
+    //     // style: 'width:350px'
+    //   },
+    //   privateAttrs: {
+    //     style: 'width:350px'
+    //   },
+    //   remark: '备注'
+    //   // show: false
+    // }
+    // {
+    //   label: '多选框',
+    //   type: 'checkbox',
+    //   model: 'gameApk',
+    //   options: [
+    //     { label: 'Android', value: 1 },
+    //     { label: 'iOS', value: 2 },
+    //     { label: 'H5', value: 3 }
+    //   ],
+    //   rules: [{ required: true, message: '该项为必填', trigger: 'change' }],
+    //   view: 'auto',
+    // },
+
+    ]
+    return {
+      rechargeApi,
+      tableData,
+      filterForm,
+      columns
+    }
+  },
+
+}
+</script>

package/src/SlTable/SlTable.stories.js

@@ -0,0 +1,118 @@
+import SlTable from './index.vue'
+
+export default {
+  title: 'Components/SlTable',
+  component: SlTable,
+  parameters: {
+    docs: {
+      description: {
+        component: '业务表格组件，基于 el-table 封装。支持远程分页、多选、排序、自定义列、操作列渲染、列拖拽排序等功能。通过 columns 配置驱动表格渲染。'
+      }
+    }
+  }
+}
+
+const codeBlock = (code) => `
+  <div style="margin-top:24px;border-top:1px solid #eee;padding-top:16px">
+    <p style="font-size:14px;font-weight:600;color:#666;margin-bottom:8px;">使用代码：</p>
+    <pre style="background:#f5f5f5;padding:16px;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all"><code>${escapeHtml(code.trim())}</code></pre>
+  </div>`
+
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+// mock 数据
+const mockData = [
+  { id: 1, name: '张三', age: 28, dept: '研发部', status: 1 },
+  { id: 2, name: '李四', age: 32, dept: '产品部', status: 0 },
+  { id: 3, name: '王五', age: 25, dept: '设计部', status: 1 },
+  { id: 4, name: '赵六', age: 30, dept: '研发部', status: 1 },
+  { id: 5, name: '孙七', age: 27, dept: '运营部', status: 0 }
+]
+
+function mockApi(params) {
+  const { currentPage, pageSize } = params
+  const start = (currentPage - 1) * pageSize
+  const list = mockData.slice(start, start + pageSize)
+  return Promise.resolve({
+    code: 1,
+    data: { list, total: mockData.length }
+  })
+}
+
+// ---- 基础用法 ----
+const defaultColumns = [
+  { type: 'selection' },
+  { prop: 'id', label: 'ID', width: '80' },
+  { prop: 'name', label: '姓名' },
+  { prop: 'age', label: '年龄', sortable: true },
+  { prop: 'dept', label: '部门' },
+  { prop: 'status', label: '状态', template: 'statusTpl' },
+  { prop: 'operate', label: '操作', width: '150', list: [
+    { label: '编辑', click: () => {} },
+    { label: '删除', type: 'danger', click: () => {} }
+  ]}
+]
+
+const defaultCode = `<!-- 使用方式 -->
+<sl-table ref="table" :table-api="fetchList" :columns="columns"
+  :auto-request="true" />
+
+<!-- columns 配置 -->
+columns: [
+  { type: 'selection' },
+  { prop: 'id', label: 'ID', width: '80' },
+  { prop: 'name', label: '姓名' },
+  { prop: 'operate', label: '操作', list: [...] }
+]`
+
+export const Default = () => ({
+  components: { SlTable },
+  data() {
+    return {
+      tableApi: mockApi,
+      columns: defaultColumns
+    }
+  },
+  template: `
+    <div>
+      <sl-table ref="table" :table-api="tableApi" :columns="columns" :auto-request="true">
+        <template slot="statusTpl" slot-scope="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
+            {{ scope.row.status === 1 ? '启用' : '禁用' }}
+          </el-tag>
+        </template>
+      </sl-table>
+      ${codeBlock(defaultCode)}
+    </div>`
+})
+
+Default.storyName = '基础用法'
+
+// ---- 无分页 ----
+const noPageCode = `<!-- 无分页模式 -->
+<sl-table :table-api="fetchList" :columns="columns"
+  :show-pagination="false" :auto-request="true" />`
+
+export const NoPagination = () => ({
+  components: { SlTable },
+  data() {
+    return {
+      tableApi: mockApi,
+      columns: [
+        { prop: 'id', label: 'ID', width: '80' },
+        { prop: 'name', label: '姓名' },
+        { prop: 'age', label: '年龄' },
+        { prop: 'dept', label: '部门' }
+      ]
+    }
+  },
+  template: `
+    <div>
+      <sl-table :table-api="tableApi" :columns="columns" :show-pagination="false" :auto-request="true" />
+      ${codeBlock(noPageCode)}
+    </div>`
+})
+
+NoPagination.storyName = '无分页模式'