@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-quarter/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <van-popup
+    :value="value"
+    position="bottom"
+    get-container="body"
+    close-icon-position="top-left"
+    close-icon="arrow-left"
+    class="ks-quarter-popup"
+    duration="0.2"
+    :closeable="true"
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <div :class="['ks-quarter', { 'ks-quarter-horizontal': horizontal }]">
+      <div class="van-calendar__body ks-quarter-body" ref="body">
+        <div class="van-calendar__month" v-for="y of years" :key="y">
+          <div class="van-calendar__month-title">{{ y }}年</div>
+          <div class="van-calendar__days">
+            <div class="van-calendar__day ks-quarter__day" v-for="q of quarters" :key="q" @click="handleSelectQuarter(y, q)">
+              <div :class="{ 'select-quarter': y === numYear && q === numQuarter }">{{ cnQuarters[q] }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ks-quarter-header">
+        <span class="ks-quarter-header__title">季度选择</span>
+        <span class="ks-quarter-header__daterange">{{ quarterStr }}</span>
+      </div>
+      <div v-if="showConfirm" class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom">
+        <ks-button type="primary" :disabled="!currentQuarter" round block class="van-calendar__confirm" @click="handleSelect">
+          确定
+        </ks-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+// const getNowQuarter = () => {
+//   let _date = new Date()
+//   let y = _date.getFullYear()
+//   let m = _date.getMonth()
+//   if (m < 3) {
+//     return `${y}-1`
+//   } else if (m < 6) {
+//     return `${y}-2`
+//   } else if (m < 9) {
+//     return `${y}-3`
+//   } else if (m < 12) {
+//     return `${y}-4`
+//   }
+// }
+
+const getYears = arr => {
+  let num = arr[1]
+  let years = []
+  while (num >= arr[0]) {
+    years.unshift(num)
+    num = num - 1
+  }
+  return years
+}
+
+export default {
+  name: 'ks-quarter',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    defaultQuarter: {
+      type: String,
+      default: ''
+    },
+    yearRange: {
+      type: Array,
+      default: () => [new Date().getFullYear() - 2, new Date().getFullYear()]
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    showConfirm: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      quarters: [1, 2, 3, 4],
+      years: getYears(this.yearRange),
+      cnQuarters: {
+        '1': '一季度',
+        '2': '二季度',
+        '3': '三季度',
+        '4': '四季度'
+      },
+      currentQuarter: this.defaultQuarter
+    }
+  },
+  computed: {
+    numYear() {
+      return Number(this.currentQuarter.split('-')[0])
+    },
+    numQuarter() {
+      return Number(this.currentQuarter.split('-')[1])
+    },
+    quarterStr() {
+      return `${this.numYear}年 ${this.cnQuarters[this.numQuarter]}`
+    }
+  },
+  methods: {
+    handleSelectQuarter(y, q) {
+      this.currentQuarter = `${y}-${q}`
+      this.$emit('select', this.currentQuarter, this.quarterStr)
+    },
+    handleSelect() {
+      this.$emit('confirm', this.currentQuarter, this.quarterStr)
+    },
+    handleClosePopup(e) {
+      this.$emit('input', e)
+      this.scrollClear()
+    },
+    handleOpenPopup() {
+      this.currentQuarter = this.defaultQuarter
+      this.$nextTick(() => {
+        this.scrollInto()
+      })
+    },
+    scrollInto() {
+      setTimeout(() => {
+        if (this.currentQuarter) {
+          let top = this.$el.querySelector('.select-quarter')
+          this.$refs.body.scrollTop = top && top.getBoundingClientRect().top - 120
+        }
+      }, 240)
+    },
+    scrollClear() {
+      this.$refs.body.scrollTop = 0
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-quarter .van-calendar__day {
+  margin-bottom: 6px;
+}
+
+.ios .ks-quarter-header {
+  padding-top: 20px;
+}
+
+.ipx .ks-quarter-header {
+  padding-top: 44px;
+}
+
+.afc .ks-quarter-header {
+  padding-top: var(--status-bar-height, 0px);
+}
+
+.ks-quarter-popup {
+  height: 100%;
+  .van-popup__close-icon--top-left {
+    top: 12px;
+  }
+}
+
+.ios .ks-quarter-popup .van-popup__close-icon--top-left {
+  top: 32px;
+}
+
+.ipx .ks-quarter-popup .van-popup__close-icon--top-left {
+  top: 56px;
+}
+
+.afc .ks-quarter-popup .van-popup__close-icon--top-left {
+  top: calc(12px + var(--status-bar-height, 0px))
+}
+
+.ios .ks-quarter-body {
+  padding-top: 64px;
+}
+
+.ipx .ks-quarter-body {
+  padding-top: 84px;
+}
+
+.afc .ks-quarter-body {
+  padding-top: calc(44px + var(--status-bar-height, 0px));
+}
+
+.ks-quarter {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  &-header {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    text-align: left;
+    height: 44px;
+    line-height: 28px;
+    font-weight: 500;
+    box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
+    background-color: #fff;
+    &__title {
+      padding-left: 44px;
+      font-size: 16px;
+    }
+    &__daterange {
+      margin-left: 20px;
+      color: #165DFF;
+      font-size: 14px;
+    }
+  }
+  &-body {
+    padding-top: 44px;
+  }
+  &__day {
+    width: 25%;
+  }
+  .van-calendar {
+    &__confirm {
+      height: 40px;
+      background-color: #165DFF;
+      border: 1px solid #165DFF;
+      border-radius: 8px;
+    }
+    &__day {
+      height: 38px;
+      font-size: 14px;
+    }
+    &__bottom-info {
+      line-height: 10px;
+    }
+    &__month-title {
+      margin-top: 12px;
+    }
+  }
+  .select-quarter {
+    font-size: 14px;
+    color: #fff;
+    background-color: #165DFF;
+    font-weight: 500;
+    border-radius: 22px;
+    padding: 6px 16px;
+  }
+}
+.ks-quarter-horizontal {
+  .ks-quarter-header {
+    line-height: 8px;
+  }
+}
+</style>

package/kuasheng-ui/components/ks-table/README.md

@@ -0,0 +1,103 @@
+#### 参数
+参数名 | 说明 | 默认值
+-----------|--------|--------
+headerHeight | 表头高度 | 40
+lineHeight | 表格行高 | 40
+offsetTop | 设置表头吸顶的距顶高度 | ios：76，android：56
+columns | 表格列配置 | []
+data | 表格数据（每行必须有id字段） | []
+pagination | 是否显示分页 | true
+page | 分页当前页码 | 1
+total | 总条数 | 0
+pageSize | 每页条数 | 10
+index | 是否显示序号
+indexWidth | 序号列宽度 | 40
+stripe | 是否启用斑马纹背景 | true
+border | 是否显示边框 | true
+storageKey | 用于列显示个性设置本地数据保存的key
+headerFormatter | 表头jsx渲染函数，字段作为key
+formatter | 单元格jsx渲染函数，字段作为key
+highlightRow | 高亮显示行函数，需返回一个颜色值
+
+#### 事件
+事件名 | 说明
+-----------|--------
+sort | 排序事件，点击表头触发，返回排序类型（升序、降序）和排序字段，数据格式：```{key: 'name', sortType: 'asc'}```
+change-page | 翻页事件，改变页码触发，返回页码
+cell-click | 单元格点击事件，参数（行数据、列配置、索引）
+sticky-scroll | sticky组件scroll事件，参数（滚动距离、是否吸顶）
+
+#### 方法
+方法名 | 说明
+-----------|--------
+setTableHeight | 设置表格高度，该方法根据表格组件的父元素高度自动计算表格的高度，组件会在mounted时调用该方法，如果父元素在第一次渲染后改变高度，可在组件外部自行调用该方法重新计算高度。调用是可传入高度作为参数，不传参数则获取父元素的高度用于计算
+clearScroll | 清除滚动
+setSort | 设置默认排序字段
+openHorizontal | 开启横屏模式
+openSettings | 打开个性设置
+
+#### slot
+--------|------
+| nodata | 暂无数据的插槽 |
+
+#### 用法
+```javascript
+<template>
+  <div class="demo-tabbar">
+    <ks-table
+      :columns="columns"
+      :data="data"
+      :page="page"
+      :pageSize="100"
+      :total="1000"
+      @sort="onSort"
+      @change-page="onChangePage"
+    ></ks-table>
+  </div>
+</template>
+
+<script>
+import KsTable from '../components/ks-table/index'
+export default {
+  name: "table",
+  components: {KsTable},
+  data() {
+    return {
+      page: 1,
+      columns: [
+        {title: '姓名', key: 'name', width: 100, sort: true},
+        {title: '年龄', key: 'age', width: 100, sort: true},
+        {title: '手机', key: 'phone', width: 100, sort: true},
+        {title: '姓名', key: 'name1', width: 100, sort: true},
+        {title: '年龄', key: 'age1', width: 100, sort: true},
+        {title: '手机', key: 'phone1', width: 100, sort: true}
+      ],
+      data: [
+        {id: '1', name: 'tom', age: 18, phone: 13211111111},
+        {id: '2', name: 'jack', age: 20, phone: 13211111112},
+        {id: '3', name: 'jojo', age: 22, phone: 13211111113},
+        {id: '4', name: 'tom', age: 18, phone: 13211111111},
+        {id: '5', name: 'jack', age: 20, phone: 13211111112},
+        {id: '6', name: 'jojo', age: 22, phone: 13211111113}
+      ]
+    }
+  },
+  methods: {
+    onSort (e) {
+      console.log(e)
+    },
+    onChangePage (e) {
+      console.log(e)
+      this.page = e
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-tabbar {
+  height: 300px;
+}
+</style>
+
+```

package/kuasheng-ui/components/ks-table/cell.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  name: 'cell',
+  props: {
+    popover: {
+      type: Object
+    },
+    column: {
+      type: Object
+    }
+  },
+  render () {
+    return this.popover ? <ks-popover
+            v-model="column.popover.show"
+            trigger="click"
+            theme="dark"
+          >
+          <div style="font-size: 14px;">气泡内容</div>
+            <template #reference>
+              <van-button type="primary">浅色风格</van-button>
+            </template>
+          </ks-popover> : <span :style="{ width: `${(column.width || 50) - 8}px` }">{{ item[column.key] }}</span>
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="less">
+
+</style>
+

package/kuasheng-ui/components/ks-table/index.js

@@ -0,0 +1,8 @@
+ import ksTable from './index.vue'
+
+ export default {
+  install: (Vue) => {
+    Vue.component('ksTable', ksTable)
+  },
+  ...ksTable
+ }