@kyfe/ks-query-table 0.0.21 → 0.0.22

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

@@ -0,0 +1,78 @@
+#### API接口
+搜索联系人: kuasheng.ksBookVersion.contactSearch
+搜索记录-记录列表: kuasheng.ksSearchRecord.listV2
+上报搜索记录: kuasheng.ksSearchRecord.changeV2
+删除所有记录: kuasheng.ksSearchRecord.deleteAll
+
+#### 参数
+参数名 | 说明 | 默认值
+-----------|--------|--------
+| value              | 如果是弹出层组件，则是 Boolean，表示显示隐藏(可使用 v-model 绑定), 如果是员工搜索组件，则是 Array, 表示默认值可使用 v-model 绑定) | \_disabledItem: 设置为 true 禁用列表某项 |
+| popAttr            | 弹出层组件属性                                                                                                                    |{}
+| defaultValue       | 弹出层组件默认值                                                                                                                  | []                                       |
+| multiple           | 多选                                                                                                                              | false                                    |
+| menuId             | 轻应用菜单id (3.0.37版本必填)                                                                                                        |''                                     |
+| showCancel         | 是否展示取消按钮                                                                                                                  | true                                     |
+| showHistory        | 是否显示历史搜索                                                                                                                  | true                                     |
+| placeholder        | 输入框的提示语                                                                                                                    | 请搜索人名/工号                          |
+| clearable          | 是否展示输入框的清除按钮                                                                                                          | true                                     |
+| repeatText         | 多选重复添加的提示文案                                                                                                            | 请勿重复添加                             |
+| title         | 弹出层的 title 文案（ks-employee-popup组件的属性）                                                                                                            | 选择成员                             |
+| searchParams         | 人员搜索自定义参数
+| safeAreaTop        | 已选人员列表ios头部安全距离                                                                                              |true                        |
+| selected           | 选择事件前的钩子函数（item:当前选中值）return true 阻止当前选择                                                                   | function(item)                           |
+| historyListHandler | 历史记录列表显示前的数据处理（list:历史记录列表数据）return list                                                                  | function(list)                           |
+| searchListHandler  | 搜索查询列表显示前的数据处理（list:搜索查询列表数据）return list                                                                  | function(list)                           |
+| disabledItemClick  | 点击查询列表和历史记录列表中被禁用的(属性\_disabledItem 为 true)item 事件处理 return item                                         | function(item)    
+
+#### searchParams(自定义查询参数)
+
+| 参数  | 说明        | 默认值                                 |
+| ------- | -------|------------------------------------ |
+| searchParams| 示例：        {filterOffice: 2,deptCodeList: ['1,066,000,000,0000,0000,0000,0000,0000']} |
+| filterOffice   | 过滤在职状态：1：全部，2：在职，3：离职；默认1 | 1
+| deptCodeList   | 组织code集合，限制5个| []
+
+
+#### 事件
+事件名 | 说明
+|-----------|--------
+| input   | 选中人员事件（v-model 绑定不用监听） |
+| focus   | 输入框的聚焦事件回调                 |
+| blur    | 输入框的失焦事件回调                 |
+| clear   | 输入框的删除按钮事件回调             |
+| cancel  | 取消事件回调                         |
+| confirm | 确认事件回调 返回当前选中人员数组    |
+
+
+
+#### 插槽
+| 插槽名称 | 说明 ｜ 参数
+| -----------|--------｜------------
+| employeeListInfo | 搜索查询列表内容展示信息 | {item} |
+| historyListInfo  | 历史记录列表内容展示信息 | {item} |
+
+#### 用法
+```javascript
+<template>
+    <ks-button @click="show4 != show4">弹出层场景</ks-button>
+    <ks-employee-popup :style="{ height: '100%', width: '100%' }" v-model="show4" placeholder="测试" :multiple="multiple"  @confirm="confirm"></ks-employee-popup>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show4: false,
+      multiple: true
+    }
+  },
+  methods: {
+    confirm(list) {
+      console.log('popup选中的值', list)
+    }
+  }
+}
+</script>
+
+```

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="ks-employee-input-bar">
+    <div class="ks-employee-input-content">
+      <div class="user-box" v-if="multiple"
+          ref="userBox">
+          <template v-for="(item, index) in value">
+            <img
+                :key="index"
+                :class="{'photo-user': true, 'gray-user': item._disabledUser}"
+                @click="deleteSelect(item, index)"
+                :src="item.headUrl + imgSize"
+                alt="">
+          </template>
+      </div>
+      <ks-input-search ref="ksInputSearch" :value="searchVal" :autofocus="true" :clearable="false" :placeholder="placeholder" @focus="focus" @blur="blur" @change="change" @deleteKeyEvent="deleteKeyEvent">
+        <template v-if="clearable" #right-icon>
+          <div
+            v-show="showClearVal.length > 0"
+            style="color: #c8c9cc;padding: 0 8px;"
+            @click.stop="clear">
+            <van-icon name="clear" />
+          </div>
+        </template>
+      </ks-input-search>
+    </div>
+    <div v-if="showCancel" class="ks-employee-input-cancel" @click="cancel">取消</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ks-employee-input',
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '请搜索人名/工号'
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否展示取消按钮
+    showCancel: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      imgSize: '?imageView2/1/w/132/h/132/q/90',
+      searchVal: '',
+      showClearVal: ''
+    }
+  },
+  methods:{
+    deleteSelect (item, index) {
+      this.$emit('delete', item)
+      this.value.splice(index, 1)
+      this.$emit('input', this.value)
+    },
+    clear () {
+      this.searchVal = ''
+      this.showClearVal = ''
+      this.$refs.ksInputSearch && this.$refs.ksInputSearch.setValue('')
+      this.$emit('clear', this.searchVal)
+    },
+    moveRight() {
+      // 将头部的头像滚动区域平移至最后，选中需要展示最后一个
+      const scrollWidth = this.$refs.userBox.scrollWidth
+      this.$refs.userBox.scrollLeft = scrollWidth
+    },
+    // 删除按钮事件处理
+    deleteKeyEvent() {
+      if (this.showClearVal === '' && this.value.length) {
+        // 多选情况需要删除列表最后数据
+        const lastIndex = this.value.length - 1
+        if( this.value[lastIndex] && this.value[lastIndex]._disabledUser) {
+          this.deleteSelect(this.value[lastIndex], lastIndex)
+        } else {
+          this.$set(this.value[lastIndex], '_disabledUser', true )
+        }
+      }
+    },
+    focus () {
+      this.$emit('focus')
+    },
+    blur () {
+      this.$emit('blur')
+    },
+    cancel () {
+      this.$emit('cancel', false)
+    },
+    change (val) {
+      this.showClearVal = val
+      this.$emit('change', val)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-employee-input-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background-color: #ffffff;
+  margin-bottom: 0.5px;
+  .ks-employee-input-content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    width: calc(100% - 40px);
+    .user-box {
+      max-width: calc(100% - 100px);
+      overflow-x: auto;
+      display: flex;
+      align-items: center;
+      .photo-user {
+        flex-shrink: 0;
+        width: 36px;
+        height: 36px;
+        margin-right: 12px;
+        border-radius: 6px;
+         &:last-child {
+          margin-right: 0px;
+        }
+      }
+      .gray-user {
+        opacity: 0.6;
+      }
+    }
+    /deep/ .van-search {
+      flex-grow: 1;
+      min-width: 100px;
+      padding: 0 !important;
+      background-color: #ffffff;
+      height: 36px;
+      .van-field__control {
+        line-height: 1;
+      }
+      .van-search__content {
+        background-color: #ffffff;
+      }
+      .van-field__left-icon {
+        display: none;
+      }
+    }
+  }
+  .ks-employee-input-cancel {
+    color: #165DFF;
+    flex-shrink: 0;
+    text-align: right;
+    width: 40px;
+    font-size: 16px;
+  }
+}
+</style>
+
+
+