@idooel/components 0.0.2-beta.23 → 0.0.2-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.2-beta.23",
+  "version": "0.0.2-beta.25",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",
@@ -10,6 +10,9 @@
   },
   "author": "Ruster <protagonisths@gmail.com> (https://github.com/Protagonistss)",
   "scripts": {
+    "dev": "rollup --config scripts/rollup.esm.config.js --watch",
+    "dev:umd": "rollup --config scripts/rollup.umd.config.js --watch",
+    "dev:esm": "rollup --config scripts/rollup.esm.config.js --watch",
     "build": "pnpm build:umd && pnpm build:esm",
     "build:umd": "rollup --config scripts/rollup.umd.config.js",
     "build:esm": "rollup --config scripts/rollup.esm.config.js",

package/packages/form/src/index.vue

@@ -4,7 +4,7 @@
       <a-row :gutter="24">
         <template v-for="ele in elements">
           <a-col v-if="executeExpression(ele._show)" :span="ele.span" :key="ele.name">
-            <template v-if="ele.type == 'Input'">
+            <template v-if="ele.type == 'ele-input' || ele.type == 'Input'">
               <a-form-item :label="`${ele.label}：`">
                 <ele-input 
                   @change="onChange($event, ele)" 
@@ -15,7 +15,7 @@
                 </ele-input>
               </a-form-item>
             </template>
-            <template v-else-if="ele.type == 'Textarea'">
+            <template v-else-if="ele.type == 'ele-textarea' || ele.type == 'Textarea'">
               <a-form-item :label="`${ele.label}：`">
                 <ele-textarea 
                   @change="onChange($event, ele)"
@@ -29,7 +29,7 @@
                 </ele-textarea>
               </a-form-item>
             </template>
-            <template v-else-if="ele.type == 'Select'">
+            <template v-else-if="ele.type == 'ele-select' || ele.type == 'Select'">
               <a-form-item :label="`${ele.label}：`">
                 <ele-select 
                   :data-source="ele.optionList" 
@@ -84,7 +84,7 @@
                 </ele-date>
               </a-form-item>
             </template>
-            <template v-else-if="ele.type == 'SelectEntity'">
+            <template v-else-if="ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'">
               <a-form-item :label="`${ele.label}：`">
                 <ele-select-entity 
                   v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
@@ -104,7 +104,7 @@
                 </ele-input-number>
               </a-form-item>
             </template>
-            <template v-else-if="ele.type == 'Checkbox'">
+            <template v-else-if="ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'">
               <a-form-item :label="`${ele.label}：`">
                 <ele-checkbox 
                   :data-source="ele.optionList" 
@@ -114,7 +114,7 @@
                 </ele-checkbox>
               </a-form-item>
             </template>
-            <template v-else-if="ele.type == 'Radio'">
+            <template v-else-if="ele.type == 'ele-radio' || ele.type == 'Radio'">
               <a-form-item :label="`${ele.label}：`">
                 <ele-radio 
                   @change="onChange($event, ele)" 
@@ -212,7 +212,7 @@ export default {
       return this.executeExpression(this.disabled)
     },
     form () {
-      const ref = this.$form.createForm(this, { name: this.formName })
+      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })
       return ref
     },
     exposedMethods () {
@@ -226,6 +226,29 @@ export default {
     this.setDefaultValues()
   },
   methods: {
+    onFieldsChange () {
+      this.executeOptionListExpression()
+    },
+    executeOptionListExpression () {
+      this.elements.forEach(ele => {
+        if (ele.optionList) {
+          const optionList = this.evalOptionListExpression(ele.optionList)
+          this.$set(ele, 'optionList', optionList)
+        }
+      })
+    },
+    evalOptionListExpression (optionList = []) {
+      const executeExpression = (expression) => {
+        if (type.isBool(expression)) return expression
+        if (type.isEmpty(expression)) return true
+        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })
+        return ret
+      }
+      return optionList.map(item => {
+        const { show } = item
+        return { ...item, _show: executeExpression(show) }
+      })
+    },
     setFormModel (props = {}) {
       this.formModel = props
       this.dispatchExpression()

package/packages/index.js

@@ -27,6 +27,7 @@ import EleTextEditor from './text-editor/index.js'
 import EleTextarea from './textarea/index.js'
 import EleLoading from './loading/index.js'
 import EleTreeSelect from './tree-select/index.js'
+import ElePagination from './pagination/index.js'
 
 import EleSearchArea from './composite-components/search-area/index.js'
 import EleButtonGroup from './composite-components/button-group/index.js'
@@ -98,6 +99,7 @@ const components = [
   EleTextarea,
   EleLoading,
   EleTreeSelect,
+  ElePagination,
   ...compositeComponents,
   ...businessComponents,
   ...models,
@@ -153,5 +155,6 @@ export {
   EleLoading,
   EleTabsSubCenter,
   EleFormImgCrop,
-  EleSelectEntityModalTable
+  EleSelectEntityModalTable,
+  ElePagination
 }

package/packages/models/tree-table-model/src/index.vue

@@ -44,6 +44,7 @@
           :pageSize="pageSize"
           :pageSizeOptions="pageSizeOptions"
           :data-source="tableData"
+          :mode="mode"
           @change-page="onChangePage"
         ></ele-table>
       </section>
@@ -322,6 +323,10 @@ export default {
       const { page = {} } = this.tableMeta
       return page.pageSize || 10
     },
+    mode () {
+      const { page = {} } = this.tableMeta
+      return page.mode
+    },
     pageSizeOptions () {
       const { page = {} } = this.tableMeta
       return page.pageSizeOptions || ['10', '20', '30', '40']
@@ -447,6 +452,14 @@ export default {
       } else {
         this.tableData = await this.requestTableData(initQuerys)
       }
+    } else {
+      const { params = {}, fieldMap = {} } = this.tableMeta
+      const currentRowData = this.getCurrentRowData()
+      const ctx = { 
+        _route: this.$route.query, 
+        currentRowData: currentRowData
+      }
+      this.tableQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))
     }
   },
   methods: {
@@ -675,7 +688,7 @@ export default {
     },
     async requestTableData (props = {}) {
       const { url, requestType = 'GET', page = {} } = this.tableMeta
-      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || 10 }, props)
+      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || page.pageSize || 10 }, props)
       this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })
       this.loading = true
       const ret = await net[requestType.toLowerCase()](

package/packages/pagination/index.js

@@ -0,0 +1,5 @@
+import ElePagination from './src/index.vue'
+
+ElePagination.install = Vue => Vue.component(ElePagination.name, ElePagination)
+
+export default ElePagination

package/packages/pagination/src/index.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="ele-page--wrapper">
+    <section class="ele-page--panel">
+      <div class="total">
+        共
+        <span v-if="!currentTotalLoading">{{ currentTotal }}</span>
+        <a-icon v-else type="loading" />
+        条
+      </div>
+      <div class="page">
+        <div class="home" @click="handleClickHome">首页</div>
+        <div :class="['page--prev', loading && 'page-disabled', disabledPrev && 'page-disabled']" @click="handleClickPrev">
+          <a-icon type="left"></a-icon>
+        </div>
+        <div class="page--current">
+          {{ currentPage }}
+        </div>
+        <div :class="['page--next', loading && 'page-disabled', disabledNext && 'page-disabled']" @click="handleClickNext">
+          <a-icon type="right"></a-icon>
+        </div>
+      </div>
+      <div class="size">
+        <a-select v-model="currentPageSize" @change="handleChangePageSize">
+          <a-select-option v-for="item in innerPageSizeOptions" :value="item" :key="item">
+            {{ item }} 条/页
+          </a-select-option>
+        </a-select>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { util } from '@idooel/shared'
+const { toNumber } = util
+export default {
+  name: 'ele-pagination',
+  props: {
+    query: {
+      type: Object,
+      default: () => ({})
+    },
+    data: {
+      type: Array,
+      default: () => ([])
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }, 
+    total: {
+      type: [String, Number],
+      default: 0
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => ([50, 100, 500, 1000])
+    },
+    current: {
+      type: [Number, String],
+      default: 1
+    },
+    pageSize: {
+      type: [Number, String],
+      default: 10
+    },
+    disabledNextButton: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      currentPage: 1,
+      currentPageSize: 0,
+      disabledPrev: false,
+      disabledNext: false,
+      currentTotal: 0,
+      currentTotalLoading: true,
+      cacheQuery: []
+    }
+  },
+  computed: {
+    innerPageSizeOptions () {
+      const normalized = this.pageSizeOptions
+        .map(item => toNumber(item))
+        .filter(n => typeof n === 'number' && Number.isFinite(n) && n > 0)
+
+      // 兜底：避免 a-select option 出现 undefined/空数组
+      return normalized.length ? normalized : [10]
+    },
+    pageQuery () {
+      const { currentPage, pageSize } = this.query
+      return { currentPage, pageSize }
+    }
+  },
+  watch: {
+    current: {
+      handler (current) {
+        this.syncCurrentFromProps(current)
+      },
+      immediate: true
+    },
+    total: {
+      handler (total) {
+        this.currentTotalLoading = true
+        if (typeof total === 'number') {
+          this.currentTotal = total
+          this.currentTotalLoading = false
+        }
+      },
+      immediate: true
+    },
+    query: {
+      handler (newQuery, oldQuery) {
+        // 1s内多次请求合并
+        // clearTimeout(this.timer)
+        // this.timer = setTimeout(() => {
+        //   this.requestHandler(this.total, { ...newQuery, ...this.pageQuery })
+        // }, 1000)
+      }
+    },
+    data: {
+      handler (data) {
+        if (!this.currentPageSize) return
+        if (data.length != this.currentPageSize) {
+          this.disabledNext = true
+        } else {
+          this.disabledNext = false
+        }
+      },
+      immediate: true
+    },
+    disabledNextButton: {
+      handler (status) {
+        this.disabledNext = status
+      },
+      immediate: true
+    },
+    pageSize: {
+      handler (size) {
+        this.syncPageSizeFromProps(size)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChangePageSize (value) {
+      const nextSize = this.normalizePageSize(value, this.currentPageSize || 10)
+      if (!nextSize) return
+
+      this.currentPageSize = nextSize
+      // pageSize 变化建议回到第一页，避免页码越界
+      this.currentPage = 1
+      this.setDisabledPrev(this.currentPage)
+
+      // 仅用户交互时触发
+      this.$emit('showSizeChange', this.currentPage, this.currentPageSize)
+    },
+    setDisabledNext (status) {
+      this.disabledNext = status
+    },
+    handleClickHome () {
+      this.currentPage = 1
+      this.setDisabledPrev(this.currentPage)
+      // 仅用户交互时触发
+      this.$emit('change', this.currentPage, this.currentPageSize)
+    },
+    setDisabledPrev (currentPage) {
+      if (currentPage > 1) {
+        this.disabledPrev = false
+      } else {
+        this.disabledPrev = true
+      }
+    },
+    handleClickPrev () {
+      if (this.currentPage > 1) {
+        this.currentPage -= 1
+        this.setDisabledPrev(this.currentPage)
+        // 仅用户交互时触发
+        this.$emit('change', this.currentPage, this.currentPageSize)
+      }
+    },
+    handleClickNext () {
+      if (this.disabledNext) return
+      this.currentPage += 1
+      this.setDisabledPrev(this.currentPage)
+      // 仅用户交互时触发
+      this.$emit('change', this.currentPage, this.currentPageSize)
+    },
+    normalizePage (value, fallback = 1) {
+      const n = toNumber(value)
+      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback
+      const page = Math.floor(n)
+      return page >= 1 ? page : fallback
+    },
+    normalizePageSize (value, fallback = 10) {
+      const n = toNumber(value)
+      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback
+      const size = Math.floor(n)
+      return size >= 1 ? size : fallback
+    },
+    // props 同步：只更新内部 state，不触发 emit
+    syncCurrentFromProps (current) {
+      this.currentPage = this.normalizePage(current, 1)
+      this.setDisabledPrev(this.currentPage)
+    },
+    // props 同步：只更新内部 state，不触发 emit
+    syncPageSizeFromProps (size) {
+      this.currentPageSize = this.normalizePageSize(size, this.currentPageSize || 10)
+    }
+  },
+  destroyed () {
+    this.cacheQuery = []
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @keyframes ani-load-loop {
+  0% {
+    transform: rotate(0);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.ele-page--wrapper {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border-top: unset;
+  padding: 0px 16px 16px 16px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: end;
+  /* margin-left: 16px;
+  margin-right: 16px; */
+  .ele-page--panel {
+    width: auto;
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .total {
+      .ivu-load-loop {
+        color: #409EFF;
+        animation: ani-load-loop 1s linear infinite;
+      }
+      color: rgba(0, 0, 0, 0.88);
+      font-family: 'AlibabaPuHuiTi_2_55_Regular';
+      font-size: 14px;
+      font-weight: 400;
+    }
+    .page {
+      margin-left: 12px;
+      display: flex;
+      flex-direction: row;
+      .home {
+        height: auto;
+        width: auto;
+        color: rgba(0, 0, 0, 0.88);
+        padding: 5px 4px 5px 4px;
+        text-align: center;
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        background: #FFF;
+        box-sizing: border-box;
+        cursor: pointer;
+      }
+      .page--prev {
+        margin-left: 12px;
+        cursor: pointer;
+        height: 32px;
+        width: 32px;
+        color: rgba(0, 0, 0, 0.88);
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        background: #FFF;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        .ivu-icon-ios-arrow-left {
+          font-size: 16px;
+        }
+      }
+      .page--current {
+        margin-left: 12px;
+        height: 32px;
+        width: 32px;
+        color: rgba(0, 0, 0, 0.88);
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        background: #409EFF;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+      }
+      .page--next {
+        margin-left: 12px;
+        cursor: pointer;
+        height: 32px;
+        width: 32px;
+        color: rgba(0, 0, 0, 0.88);
+        font-family: 'AlibabaPuHuiTi_2_55_Regular';
+        font-size: 14px;
+        font-weight: 400;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        background: #FFF;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        .ivu-icon-ios-arrow-right {
+          font-size: 16px;
+        }
+      }
+      .page--prev, .page--next {
+        &.page-disabled {
+          margin-left: 12px;
+          height: 32px;
+          width: 32px;
+          color: rgba(0, 0, 0, 0.88);
+          font-family: 'AlibabaPuHuiTi_2_55_Regular';
+          font-size: 14px;
+          font-weight: 400;
+          border-radius: 2px;
+          border: 1px solid rgba(0, 0, 0, 0.16);
+          background: rgba(0, 0, 0, 0.04);
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          cursor: not-allowed;
+        }
+      }
+    }
+    .size {
+      width: auto;
+      display: flex;
+      flex-direction: row;
+      margin-left: 12px;
+      .ant-select {
+        min-width: 91px;
+        flex-basis: 91px;
+        /* flex-shrink: 0; */
+        flex-grow: 1;
+      }
+    }
+  }
+}
+</style>

package/packages/select/src/index.vue

@@ -1,8 +1,13 @@
 <template>
   <a-select :disabled="disabled" :mode="getMode" :value="value" style="width: 100%" @change="onChange">
-    <a-select-option v-for="item in innerDataSource" :key="item.value" :value="item.value">
-      {{ item.label }}
-    </a-select-option>
+    <template v-for="item in innerDataSource">
+      <a-select-option v-if="item._show" :key="item.value" :value="item.value">
+        {{ item.label }}
+      </a-select-option>
+      <a-select-option v-if="isUndefined(item._show)" :key="item.value" :value="item.value">
+        {{ item.label }}
+      </a-select-option>
+    </template>
   </a-select>
 </template>
 
@@ -82,6 +87,9 @@ export default {
     this.isInitRequest && this.fetchDataSourceByUrl()
   },
   methods: {
+    isUndefined (arg) {
+      return type.isUndefined(arg)
+    },
     fetchDataSourceByUrl () {
       net.get(this.url, { code: this.code, ...this.params }).then(resp => {
         const { data } = resp

package/packages/table/src/index.vue

@@ -18,6 +18,7 @@
     <div class="g-table__pagination">
       <a-pagination
         :show-total="all => `共 ${all} 条数据`"
+        v-if="mode === 'default'"
         show-size-changer 
         show-quick-jumper
         :pageSize="innerPageSize"
@@ -27,6 +28,15 @@
         @showSizeChange="onShowSizeChange"
         :total="total">
       </a-pagination>
+      <ele-pagination
+        v-else
+        :pageSize="innerPageSize"
+        :current="innerCurrentPage"
+        :pageSizeOptions="pageSizeOptions"
+        @change="onChangePagination"
+        @showSizeChange="onShowSizeChange"
+        :total="total"
+      ></ele-pagination>
     </div>
   </div>
 </template>
@@ -39,6 +49,13 @@ export default {
     Actions
   },
   props: {
+    mode: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return ['default', 'next-cursor'].includes(value)
+      }
+    },
     // ant table wrapper
     height: {
       type: Number
@@ -81,7 +98,7 @@ export default {
       default: () => []
     },
     pageSize: {
-      type: Number,
+      type: [Number, String],
       default: 10
     },
     pageSizeOptions: {
@@ -165,6 +182,8 @@ export default {
   },
   methods: {
     onShowSizeChange (current, pageSize) {
+      console.log('onShowSizeChangecurrent', current)
+      console.log(' onShowSizeChangepageSize', pageSize)
       this.innerCurrentPage = current
       this.innerPageSize = pageSize
       this.$emit('change-page', current, pageSize)
@@ -193,6 +212,7 @@ export default {
       return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
     },
     onChangePagination (page, pageSize) {
+      console.log('page', page)
       this.innerCurrentPage = page
       this.innerPageSize = pageSize
       this.$emit('change-page', page, pageSize)

package/vitest.config.js

@@ -1,17 +1,17 @@
-import { defineConfig } from 'vitest/config'
-import vue from '@vitejs/plugin-vue2'
-import path from 'path'
-
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'packages')
-    }
-  },
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['__tests__/setup.js']
-  }
-})
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue2'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'packages')
+    }
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['__tests__/setup.js']
+  }
+})