@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-employee/employee-popup.vue

@@ -0,0 +1,197 @@
+<template>
+  <van-popup
+    ref="employeePopup"
+    :value="value"
+    v-bind="bindAttr"
+    v-on="$listeners"
+    class="ks-employee-popup"
+  >
+    <div class="ks-employee-popup-header" v-if="title">{{ title }}</div>
+    <employee-search
+      ref="employeeSearch"
+      class="ks-employee-search"
+      v-bind="$attrs"
+      v-model="employee"
+      :menuId="menuId"
+      :selectPopupAttr="bindAttr"
+      :selectPopupStyle="selectPopupStyle"
+      @focus="focus"
+      @blur="blur"
+      @clear="clear"
+      @cancel="cancel"
+      @confirm="confirm"
+      @selectListItem="selectListItem"
+      @openSelect="openSelect"
+    >
+      <template slot="employeeListInfo" slot-scope="{item}">
+        <slot name="employeeListInfo" :item='item'></slot>
+      </template>
+    </employee-search>
+  </van-popup>
+</template>
+
+<script>
+  import employeeSearch from './employee-search'
+
+  export default {
+    name: 'ks-employee-popup',
+    props: {
+      value: Boolean,
+      popAttr: {
+        type: Object,
+        default: () => ({})
+      },
+      title: {
+        type: String,
+        default: '选择成员'
+      },
+      // 最大选择数
+      limit: Number,
+      limitTips: String,
+      // 菜单id
+      menuId: {
+        type: String,
+        default: ''
+      },
+      // 默认选中人员
+      defaultValue: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+      safeAreaTop: {
+        type: Boolean,
+        default: true
+      }
+    },
+    components: { employeeSearch },
+    data () {
+      return {
+        employee: [...this.defaultValue],
+        selectPopupStyle: {}
+      }
+    },
+    watch: {
+      value(val) {
+        if (val) {
+          this.setFocus()
+          this.getPopupStyle()
+        }
+        window.ks && window.ks.setCloseButton && window.ks.setCloseButton({ isShow: !val })
+      },
+      defaultValue (val) {
+        this.employee = val
+      }
+    },
+    computed: {
+      bindAttr () {
+        return {
+          position: 'bottom',
+          getContainer: 'body',
+          closeIconPosition: 'top-left',
+          closeIcon: 'arrow-left',
+          closeable: true,
+          ...this.popAttr
+        }
+      },
+    },
+    methods: {
+      openSelect() {
+        this.$emit('openSelect')
+      },
+      setFocus() {
+        try {
+          setTimeout(() => {
+            const inputEl = this.$refs.employeeSearch.$refs.input.$refs.ksInputSearch
+            inputEl.setFocus()
+          }, 200)
+        } catch (error) {
+          console.log(error)
+        }
+      },
+      getPopupStyle() {
+        this.$nextTick(() => {
+          const computedStyle = window.getComputedStyle(this.$el)
+          this.selectPopupStyle = {
+            width: computedStyle.width,
+            height: computedStyle.height
+          }
+        })
+      },
+      confirm (list) {
+        this.$emit('input', false)
+        this.$emit('confirm', list)
+      },
+      selectListItem(...arg){
+        this.$emit('selectListItem', ...arg)
+      },
+      cancel () {
+        this.$emit('cancel', false)
+      },
+      focus () {
+        this.$emit('focus')
+      },
+      blur () {
+        this.$emit('blur')
+      },
+      clear () {
+        this.$emit('clear')
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .ks-employee-popup-header {
+    padding-left: 44px;
+    text-align: left;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+  }
+  .ios .ks-employee-popup-header {
+    padding-top: 20px;
+  }
+
+  .ipx .ks-employee-popup-header {
+    padding-top: 44px;
+  }
+
+  .afc .ks-employee-popup-header {
+    padding-top: var(--status-bar-height, 0px);
+  }
+
+  .ks-employee-popup {
+    // height: 100%;
+    .van-popup__close-icon--top-left {
+      top: 12px;
+    }
+    .ks-employee-search {
+      height: calc(100% - 44px);
+    }
+  }
+  .ios .ks-employee-popup .van-popup__close-icon--top-left {
+    top: 32px;
+  }
+
+  .ipx .ks-employee-popup .van-popup__close-icon--top-left {
+    top: 56px;
+  }
+
+  .afc .ks-employee-popup .van-popup__close-icon--top-left {
+    top: calc(12px + var(--status-bar-height, 0px))
+  }
+
+  .ios .ks-employee-popup .ks-employee-search {
+    height: calc(100% - 44px - 20px);
+  }
+
+  .ipx .ks-employee-popup .ks-employee-search {
+    height: calc(100% - 44px - 44px);
+  }
+
+  .afc .ks-employee-popup .ks-employee-search {
+    height: calc(100% - 44px - var(--status-bar-height, 0px));
+  }
+</style>

package/kuasheng-ui/components/ks-employee/employee-search.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="ks-employee-search" ref="ksEmployeeSearch">
+    <employeeInput
+      ref="input"
+      v-model="selectValue"
+      :clearable="clearable"
+      :multiple="multiple"
+      :placeholder="placeholder"
+      :showCancel="showCancel"
+      :autofocus="autofocus"
+      @focus="focus"
+      @blur="blur"
+      @clear="clear"
+      @change="inputChange"
+      @delete="inputDelete"
+      @cancel="cancel" />
+    <employeeList
+      ref="list"
+      class="ks-employee-search-list"
+      v-model="selectValue"
+      :multiple="multiple"
+      :limit="limit"
+      :limitTips="limitTips"
+      :repeatText="repeatText"
+      :menuId="menuId"
+      :selected="selected"
+      :selectPopupAttr="popupAttr"
+      :selectPopupStyle="popupStyle"
+      :showHistory="showHistory"
+      :searchParams="searchParams"
+      :searchListHandler="searchListHandler"
+      :historyListHandler="historyListHandler"
+      :disabledItemClick="disabledItemClick"
+      @_moveHeadRight="moveHeadRight"
+      @clearInput="clearInput"
+      @openSelect="openSelect"
+      @confirm="confirm"
+      @selectItem="selectListItem">
+      <template slot="employeeListInfo" slot-scope="{item}">
+        <slot name="employeeListInfo" :item='item'></slot>
+      </template>
+      <template slot="historyListInfo" slot-scope="{item}">
+        <slot name="historyListInfo" :item='item'></slot>
+      </template>
+    </employeeList>
+    <employee-selected
+      v-model="showSelect"
+      :style="popupStyle"
+      :popupAttr="popupAttr"
+      :safeAreaTop="safeAreaTop"
+      :list="selectValue"
+      @clearInput="clearInput"
+      @confirm="confirm"
+      @delete="inputDelete"></employee-selected>
+  </div>
+</template>
+
+<script>
+import employeeInput from './employee-input.vue'
+import employeeList from './employee-list.vue'
+import employeeSelected from './employee-selected.vue'
+export default {
+  name: 'ks-employee-search',
+  components: {
+    employeeInput,
+    employeeList,
+    employeeSelected,
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 最大选择数
+    limit: Number,
+    limitTips: String,
+    // 是否展示取消按钮
+    showCancel: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '请搜索人名/工号'
+    },
+    // 多选重复添加的提示文案
+    repeatText: {
+      type: String,
+      default: '请勿重复添加'
+    },
+    showHistory: {
+      type: Boolean,
+      default: true
+    },
+    // 选中事件前的fetch
+    selected: {
+      type: Function
+    },
+    historyListHandler: {
+      type: Function
+    },
+    searchListHandler: {
+      type: Function
+    },
+    disabledItemClick: {
+      type: Function
+    },
+    selectPopupAttr: {
+      type: Object
+    },
+    selectPopupStyle: {
+      type: Object,
+    },
+    // 菜单id
+    menuId: {
+      type: String,
+      default: ''
+    },
+    // 自定义查询条件
+    searchParams: {
+      type: Object
+    },
+    // 已选列表安全距离
+    safeAreaTop: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      selectValue: this.value,
+      popupStyle: {},
+      popupAttr: {},
+      showSelect: false
+    }
+  },
+  mounted () {
+  },
+  watch: {
+    value(val) {
+      this.selectValue = val
+    },
+  },
+  methods: {
+    openSelect() {
+      this.getPopupAttr()
+      this.getPopupStyle()
+      this.showSelect = true
+      this.$emit('openSelect')
+    },
+    getPopupStyle() {
+      if (this.selectPopupStyle) {
+        this.popupStyle = this.selectPopupStyle
+      } else {
+        const computedStyle = window.getComputedStyle(this.$el)
+        const style = {
+          width: computedStyle.width,
+          height: computedStyle.height,
+          position: 'absoulte'
+        }
+        this.popupStyle = style
+      }
+    },
+    getPopupAttr() {
+      if (this.selectPopupAttr) {
+        this.popupAttr = this.selectPopupAttr
+      } else {
+        this.popupAttr = {
+          position: 'bottom',
+          getContainer: this.$refs.ksEmployeeSearch,
+          closeIconPosition: 'top-left',
+          closeIcon: 'arrow-left',
+          overlay: false,
+          closeable: true,
+        }
+      }
+    },
+    moveHeadRight() {
+      // 将头部的头像滚动区域平移至最后，选中需要展示最后一个
+     this.$refs.input.moveRight()
+    },
+    inputChange(val) {
+      // input组件搜索触发查询
+      this.$refs.list.getSearch(val)
+    },
+    inputDelete(item) {
+      // input的删除触发
+      this.$refs.list.deleteSelect(item)
+    },
+    focus () {
+      this.$emit('focus')
+    },
+    clear () {
+      this.$refs.list.getSearch('')
+      this.$emit('clear')
+    },
+    blur () {
+      this.$emit('blur')
+    },
+    cancel () {
+      this.$emit('cancel', false)
+    },
+    confirm (list) {
+      this.$emit('input', list)
+      this.$emit('confirm', list)
+    },
+    clearInput () {
+      this.$refs.input.clear()
+    },
+    selectListItem(item, isClearInput) {
+      // 列表选中需要清空input的value
+      if(isClearInput === true) {
+        this.$refs.input.clear()
+      }
+      this.$emit('selectListItem', item)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ks-employee-search {
+  background-color: #f4f6fa;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  font-size: 14px;
+}
+.ks-employee-search-list {
+  width: 100%;
+  height: calc(100% - 53px);
+}
+</style>

package/kuasheng-ui/components/ks-employee/employee-selected.vue

@@ -0,0 +1,173 @@
+<template>
+  <van-popup
+    :value="value"
+    v-bind="popupAttr"
+    v-on="$listeners"
+    :class="{'ks-employee-select-popup-safe-top': safeAreaTop, 'ks-employee-select': true}"
+  >
+    <div class="ks-employee-select-header" @click="comeback">已选（{{ list.length }}人）</div>
+    <div class="select-list">
+      <div v-if="list.length" class="select-list-item">
+        <div  class="select-list-cell" v-for="(item, index) in list" :key="index">
+          <img class="select-img" :src="item.headUrl + imgSize" alt="" />
+          <div class="select-content">
+            <div>{{ item.employeeName }}</div>
+            <div class="close" @click="deleteList(index, item)">
+              <img src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-employee/close.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="select-no-data" v-else>
+        <ks-no-data type="NoContent" text="暂无人员" />
+      </div>
+    </div>
+    <div class="ks-employee-select-footer">
+      <van-button type="primary" @click="confirm">完成</van-button>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+  export default {
+    name: 'ks-employee-selected',
+    props: {
+      value: Boolean,
+      list: Array,
+      popupAttr: Object,
+      safeAreaTop: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data () {
+      return {
+        imgSize: '?imageView2/1/w/132/h/132/q/90'
+      }
+    },
+    watch: {
+    },
+    computed: {
+      popupStyle () {
+        const searchStyle = window.getComputedStyle(this.$parent.$parent)
+        const width = searchStyle.width
+        const height = searchStyle.height
+        const style = {
+          width,
+          height
+        }
+        console.log('style', style)
+        return style
+      },
+    },
+    methods: {
+      comeback() {
+        this.value = false
+      },
+      confirm() {
+        this.value = false
+        setTimeout(() => {
+          this.$emit('confirm', this.list)
+          this.$emit('clearInput')
+        })
+      },
+      deleteList(index, item) {
+        this.list.splice(index, 1)
+        this.$emit('delete', item)
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+.ks-select-safe-area-top() {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.ks-employee-select-popup-safe-top {
+  .ks-employee-select-header {
+    .ks-select-safe-area-top()
+  }
+  .van-popup__close-icon--top-left {
+    .ks-select-safe-area-top()
+  }
+}
+.ks-employee-select {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  &-header {
+    padding-left: 44px;
+    text-align: left;
+    height: 44px;
+    line-height: 50px;
+    font-size: 16px;
+  }
+  .select-list {
+    display: flex;
+    flex-direction: column;
+    padding: 0 16px 20px 16px;
+    flex: 1;
+    overflow: hidden;
+    justify-content: center;
+    &-item {
+      overflow-y: auto;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+    .select-list-cell {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      color: #181818;
+      margin-top: 20px;
+      .select-img {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        margin-right: 12px;
+      }
+      .select-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-content: center;
+        align-items: center;
+        flex: 1;
+        &-list {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+        }
+        .close {
+          padding: 4px;
+          img {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+    .select-no-data {
+      margin-top: -20px;
+      color: #7A7D89;
+    }
+  }
+  &-footer {
+    bottom: 40px;
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+    .van-button {
+      width: 100%;
+      height: 40px;
+      margin: 0 20px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,17 @@
+ import ksEmployee from './employee-search.vue'
+ import ksEmployeeInput from './employee-input.vue'
+ import ksEmployeeList from './employee-list.vue'
+ import ksEmployeePopup from './employee-popup.vue'
+
+ export default {
+  install: (Vue) => {
+    Vue.component('ksEmployee', ksEmployee)
+  },
+  ...ksEmployee
+ }
+ export {
+  ksEmployee,
+  ksEmployeeInput,
+  ksEmployeeList,
+  ksEmployeePopup
+ }

package/kuasheng-ui/components/ks-employee/package-lock.json

@@ -0,0 +1,5 @@
+{
+  "name": "@kyfe/ks-employee",
+  "version": "0.0.1",
+  "lockfileVersion": 1
+}

package/kuasheng-ui/components/ks-employee/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@kyfe/ks-employee",
+  "version": "0.0.4",
+  "description": "ks-employee",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/kuasheng-ui/components/ks-employee/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

package/kuasheng-ui/components/ks-field-money/index.js

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