@kyfe/ks-query-table 0.0.21 → 0.0.22

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

@@ -0,0 +1,662 @@
+<template>
+  <div class="ks-employee-list-box">
+    <div class="ks-employee-list-content" :style="{ height: multiple ? 'calc(100% - 50px)' : '100%' }">
+      <div class="history" v-if="historyList.length">
+        <div class="title">
+          <span>搜索历史</span>
+          <img @click="clearAll" src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-employee/delete.png" />
+        </div>
+        <div class="list-row">
+          <div class="row" v-for="(item, index) in historyList" :key="index">
+            <div :class="{'row-context': true, 'history-item-disabled': item._disabledItem || historySelected(item)}" @click="selectHistory(item)">
+              <slot name="historyListInfo" :item="item">
+                <div class="context-left">
+                  <img class="avatar" :src="item.headUrl + imgSize" />
+                  <span class="name">{{ item.employeeName }}-{{ item.position }}</span>
+                </div>
+                <div class="work-context" v-if="item.workingContent">
+                  <img :src="item.workingIconUrl" />
+                  {{ item.workingContent }}
+                </div>
+                <div class="work-status half-pixel-border" v-if="item.workType" :style="workStatusStyle(item)">
+                  <span class="border-block" :style="workStatusStyle(item)"></span>
+                  {{ getWorkText(item.workType) }}
+                </div>
+              </slot>
+              <div class="close" @click.stop="deleteRecord(item)">
+                <img src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-employee/close.png" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="list" v-else>
+        <div class="lis-loading" v-if="loadding">
+          <ks-loading size="16px">加载中...</ks-loading>
+        </div>
+        <div class="cell-box" v-if="searchList.length > 0 && !loadding">
+          <div class="cell" v-for="(item, index) in searchList" :key="index" @click="handleSelect(item)">
+            <div class="cell-checked" v-if="multiple">
+              <img v-if="item._disabledItem" class="radio-icon" src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-employee/disabled-user.png" />
+              <img v-else-if="item._isChecked" class="radio-icon" src="https://erphostjs.kye-erp.com/kuasheng-h5/pe/radio-sel.png" />
+              <img v-else class="radio-icon" src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-employee/radio.png" />
+            </div>
+            <img :class="{'employee-img': true, 'employee-img-disabled': item._disabledItem}" :src="item.headUrl + imgSize" alt="" />
+            <slot name="employeeListInfo" :item="item">
+              <div class="info">
+                <div class="info-top">
+                  <div :class="{'info-name': true, 'info-name-disabled': item._disabledItem}" v-if="item.$name" v-html="item.$name"></div>
+                  <div class="info-name" v-else>{{ item.employeeName }}</div>
+                  <div class="info-tag">
+                    <div class="work-context" v-if="item.workingContent">
+                      <img :src="item.workingIconUrl" />
+                      {{ item.workingContent }}
+                    </div>
+                    <div class="work-status half-pixel-border" v-if="item.workType" :style="workStatusStyle(item)">
+                      <span class="border-block" :style="workStatusStyle(item)"></span>
+                      {{ getWorkText(item.workType) }}
+                    </div>
+                  </div>
+                </div>
+                <div :class="{'info-deparetment': true, 'info-deparetment-disabled': item._disabledItem}" >{{ item.departmentName }}</div>
+              </div>
+            </slot>
+          </div>
+        </div>
+        <div v-else-if="!searchList.length && isNoData && !loadding" class="no-data-container">
+          <img class="no-data" src="https://erphostjs.kye-erp.com/kuasheng-h5/pe/empty-image/NoContent.png" />
+          <div>没有找到“<span class="no-data-text-color">{{ inputSearchVal }}</span>”相关结果</div>
+        </div>
+      </div>
+    </div>
+    <div class="ks-employee-list-footer" v-if="multiple">
+      <div class="select-text" @click="openSelected">
+        已选：
+        <div :class="{'select-num':true, 'select-color': selectValue.length > 0}">
+          {{ selectValue.length }}
+          <span v-if="limit">/{{ limit }}</span>
+        </div>
+        人
+      </div>
+      <van-button type="primary" @click="confirm">完成</van-button>
+    </div>
+  </div>
+</template>
+<script>
+const Dialog = window.vant && window.vant.Dialog
+export default {
+  name: 'ks-employee-list',
+  props: {
+    showHistory: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 最大选择数
+    limit: Number,
+    limitTips: {
+      type:String,
+      default: '超过最大勾选人数'
+    },
+    // 菜单id
+    menuId: {
+      type: String,
+      default: ''
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 多选重复添加的提示文案
+    repeatText: {
+      type: String,
+      default: '请勿重复添加'
+    },
+    selected: {
+      type: Function
+    },
+    historyListHandler: {
+      type: Function
+    },
+    searchListHandler: {
+      type: Function
+    },
+    disabledItemClick: {
+      type: Function
+    },
+    searchParams: {
+      type: Object,
+      default: () => {},
+    }
+  },
+  data() {
+    return {
+      imgSize: '?imageView2/1/w/132/h/132/q/90',
+      selectValue: this.value,
+      historyList: [],
+      searchList: [],
+      inputSearchVal: '',
+      isNoData: false,
+      loadding: false,
+      workStatusList: []
+    }
+  },
+  watch: {
+    value(val) {
+      this.selectValue = val
+    }
+  },
+  async mounted() {
+    await this.getWorkConfigData()
+    await this.getHistory()
+  },
+  methods: {
+    getWorkText(type) {
+      const workItem = this.workStatusList && this.workStatusList.find(status => status.workType === type)
+      return (workItem && workItem.workTypeWord) || ''
+    },
+    async getWorkConfigData() {
+      const res = await this.$http('kuasheng.ksWorkType.getWorkTypeList', 10184, {})
+      this.workStatusList = res
+    },
+    // ARGB => RGBA
+    ArgbtoRgba(color) {
+      const parseColorString = function(color) {
+        let hex = color.slice(1)
+        let a = 1
+        if (hex.length === 8) {
+          a = parseInt(hex.slice(6), 16) / 255
+          hex = hex.slice(0, 6)
+        }
+        const bigint = parseInt(hex, 16);
+        return {
+            r: (bigint >> 16) & 255,
+            g: (bigint >> 8) & 255,
+            b: bigint & 255,
+            a,
+        }
+      }
+      const toRgbaString = function (colorObj, n = 10) {
+        const { r, g, b, a = 1 } = colorObj
+        return `rgba(${r},${g},${b},${Math.floor(a * n ) / n})`
+      }
+      const rgbaColor = `#${color.slice(3, 9)}${color.slice(1, 3)}`
+      const colorObj = parseColorString(rgbaColor)
+      return toRgbaString(colorObj)
+    },
+    workStatusStyle(item) {
+      const workStatus = this.workStatusList && this.workStatusList.find(status => status.workType === item.workType)
+      return {
+        color: workStatus && this.ArgbtoRgba(workStatus.foreColor),
+        'background-color': workStatus && this.ArgbtoRgba(workStatus.bgColor),
+        'border-color': workStatus && this.ArgbtoRgba(workStatus.borderColor)
+      }
+    },
+    async getHistory() {
+      if (!this.showHistory) {
+        return
+      }
+      try {
+        const list = await this.$http('kuasheng.search.appSearchRecord.list', 10184, {
+          menuId: this.menuId
+        })
+        this.historyList = list
+        if (list && list.length) {
+          const ids = list.map(item => item.employeeNumber)
+          const workList = await this.getWorkData(ids)
+          const newList = list.map(item => {
+            const workItem = workList.find(work => work.employeeNumber === item.employeeNumber)
+            if (workItem) {
+              item = { ...item, ...workItem }
+            }
+            return item
+          })
+          if (this.historyListHandler && typeof this.historyListHandler === 'function' ) {
+            this.historyList = this.historyListHandler(newList)
+          } else {
+            this.historyList = newList
+          }
+        }
+        this.searchList = []
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async getWorkData(ids) {
+      if (ids && ids.length) {
+        const workDataList = await this.$http('kuasheng.nimTeam.workingContent', 10184, {
+          employeeNumbers: ids
+        })
+        return workDataList
+      }
+    },
+    deleteSelect(item) {
+      const hasItem = this.searchList.find(cell => cell.employeeNumber === item.employeeNumber)
+      if (hasItem) {
+        hasItem._isChecked = false
+      }
+    },
+    async getSearch(val) {
+      if (val === '') {
+        this.isNoData = false
+        this.getHistory()
+        return
+      }
+      try {
+        this.inputSearchVal = val
+        this.loadding = true
+        this.historyList = []
+        let res = await this.$http('kuasheng.ksBookVersion.contactSearch', 10184, {
+          keywords: val,
+          ...this.searchParams,
+        })
+        this.loadding = false
+        const selectNumberArry = this.selectValue.map(v => v.employeeNumber)
+        const reg = new RegExp(val, 'gi')
+        let listItem =
+          res &&
+          res.map(item => {
+            if (selectNumberArry.includes(item.employeeNumber)) {
+              item._isChecked = true
+            } else {
+              item._isChecked = false
+            }
+            let $name = item.employeeName && item.employeeName.replace(reg, value => `<span style="color: #165DFF;">${value}</span>`)
+            item.$name = $name
+            return item
+          })
+        if (this.searchListHandler && typeof this.searchListHandler === 'function' ) {
+          this.searchList = await this.searchListHandler(listItem)
+        } else {
+          this.searchList = listItem
+        }
+        const ids = res.map(item => item.employeeNumber)
+        if (!this.searchList.length) {
+            this.isNoData = true
+        }
+        const workList = await this.getWorkData(ids)
+        if (workList && workList.length) {
+          this.searchList  =
+            this.searchList &&
+            this.searchList.map(item => {
+              const workItem = workList.find(work => work.employeeNumber === item.employeeNumber)
+              if (workItem) {
+                item = { ...item, ...workItem }
+              }
+              return item
+            })
+        }
+      } catch (error) {
+        this.loadding = false
+        console.log(error)
+      }
+    },
+    selectHistory(item) {
+      const selectItem = {
+        ...item,
+        employeeName: item.position ? `${item.employeeName}-${item.position}` : item.employeeName
+      }
+      this.handleSelect(selectItem)
+    },
+    historySelected(item) {
+      return this.selectValue.find(i => i.id === item.id)
+    },
+    async handleSelect(item, type) {
+      try {
+        console.log(this.$props)
+        if (item._disabledItem) {
+          this.disabledItemClick && this.disabledItemClick(item)
+          return
+        }
+        const selectCb = this.selected
+        if (selectCb && typeof selectCb === 'function') {
+          const _selected = await selectCb(item)
+          if (_selected === true) {
+            return Promise.resolve(false)
+          }
+        }
+        this.$emit('selectItem', item, type)
+        if (this.multiple) {
+          // 多选
+          if (item._isChecked) {
+            const itemIndex = this.selectValue.findIndex(cell => cell.employeeNumber === item.employeeNumber)
+            item._isChecked = !item._isChecked
+            this.selectValue.splice(itemIndex, 1)
+          } else {
+            const hasItem = this.selectValue.find(cell => cell.employeeNumber === item.employeeNumber)
+            if(this.limit && this.selectValue.length >= this.limit){
+              window.vant.Toast(this.limitTips)
+              return
+            }
+            if (hasItem) {
+              window.vant.Toast(this.repeatText)
+              return
+            }
+            item._isChecked = !item._isChecked
+            this.selectValue.push(item)
+            this.$emit('input', this.selectValue)
+            this.$nextTick(() => {
+              // 数组插入后，头像平移到最右边
+              this.$emit('_moveHeadRight')
+            })
+          }
+        } else {
+          // 单选
+          this.selectValue = [item]
+          this.confirm()
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 删除记录
+    async deleteRecord(item) {
+      await this.addHistoryRecord([item], 0)
+      await this.getHistory()
+      window.vant.Toast('删除成功!')
+    },
+    async addHistoryRecord(list, type) {
+      try {
+        if (!list.length) {
+          return
+        }
+        const recordList = list.map(item => {
+          return {
+            employeeNumber: item.employeeNumber,
+            state: type
+          }
+        })
+        await this.$http('kuasheng.search.appSearchRecord.change', 10184, {
+          menuId: this.menuId,
+          changeDataList: recordList
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    openSelected() {
+      if (this.selectValue.length > 0) {
+        this.$emit('openSelect')
+      }
+    },
+    confirm() {
+      this.addHistoryRecord(this.selectValue, 1)
+      this.getHistory()
+      this.$emit('input', this.selectValue)
+      this.$emit('confirm', this.selectValue)
+      this.$emit('clearInput')
+    },
+    async clearAll() {
+      try {
+        Dialog.confirm({
+            title:"清空搜索历史",
+            message: "确认清空全部搜索历史？"
+        }).then(async () => {
+          await this.$http('kuasheng.search.appSearchRecord.deleteAll', 10184, {
+            menuId: this.menuId
+          })
+          this.getHistory()
+          window.vant.Toast('删除成功!')
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.ks-employee-list-box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.ks-employee-list-content {
+  background-color: #f4f6fa;
+  overflow: hidden;
+  box-sizing: border-box;
+  .history {
+    height: 100%;
+    box-sizing: border-box;
+    padding: 10px 16px 6px 16px;
+    background-color: #fff;
+    .title {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #1b2240;
+      font-weight: 500;
+      font-size: 14px;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .list-row {
+      max-height: calc(100% - 32px);
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      .row {
+        height: 34px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+        &:last-child {
+          margin-bottom: 30px;
+        }
+        .row-context {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #03050D;
+          .context-left {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            width: 0;
+            .name {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+          .avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+            margin-right: 8px;
+            display: inline-block;
+            vertical-align: middle;
+          }
+          .close {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background-color: #f0f0f5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 8px;
+            img {
+              width: 14px;
+              height: 14px;
+            }
+          }
+        }
+        .history-item-disabled {
+          color: #B0B3BF;
+          .avatar {
+            opacity: 0.6;
+          }
+        }
+        span {
+          font-size: 14px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .list {
+    height: 100%;
+    font-size: 16px;
+    background: #fff;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    .lis-loading {
+      text-align: center;
+      margin-top: 20px;
+    }
+    .cell {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px 10px 14px;
+      // border-bottom: 1px solid #ebedf5;
+      &-checked {
+        margin-right: 10px;
+        .radio-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .employee-img {
+        width: 36px;
+        height: 36px;
+        border-radius: 6px;
+        margin-right: 10px;
+      }
+      .employee-img-disabled {
+        opacity: 0.6;
+      }
+      .info {
+        display: flex;
+        flex: 1;
+        width: 0;
+        flex-direction: column;
+        justify-content: space-around;
+        .info-top {
+          display: flex;
+          flex: 1;
+          flex-direction: row;
+          justify-content: space-between;
+          .info-tag {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            flex: none;
+          }
+        }
+        &-name {
+          flex: 1;
+          color: #03050D;
+          font-size: 14px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        &-name-disabled {
+          opacity: 0.4;
+        }
+        &-deparetment {
+          font-size: 12px;
+          color: #858793;
+        }
+        &-deparetment-disabled {
+          opacity: 0.4;
+        }
+      }
+    }
+    .cell:active {
+        background-color:#F8f8f8;
+      }
+  }
+  .no-data-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #b0b3bf;
+    flex-direction: column;
+    width: 100%;
+  }
+  .no-data {
+    width: 120px;
+    height: 120px;
+    &-text-color {
+      color: #165DFF;
+    }
+  }
+  .work-status {
+    border-radius: 2px;
+    font-size: 10px;
+    text-align: center;
+    line-height: 12px;
+    margin-left: 4px;
+    //border: 0.5px solid rgba(154, 156, 176, 0.25);
+    padding: 2px;
+    flex: none;
+  }
+  .half-pixel-border{
+    position: relative;
+    .border-block{
+      position: absolute;
+      width: calc(200% + 1px);
+      height: calc(200% + 1px);
+      top: -1px;
+      left: -1px;
+      right: 0;
+      bottom: 0;
+      border: 1px solid rgba(154, 156, 176, 0.25);
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      border-radius: 4px;
+      pointer-events: none; /* 防止覆盖按钮的交互区域 */
+    }
+  }
+  .work-context {
+    border-radius: 2px;
+    font-size: 10px;
+    margin-left: 4px;
+    background: rgba(177, 188, 207, 0.1);
+    box-shadow: 0 0 0 1px rgba(154, 156, 176, 0.2);
+    color: #6e6d72;
+    line-height: 12px;
+    padding: 2px;
+    display: flex;
+    flex: none;
+    img {
+      width: 12px;
+      height: 12px;
+      margin-right: 2px;
+    }
+  }
+}
+.ks-employee-list-footer {
+  background: #ffffff;
+  border-top: 1px solid #e8edf5;
+  height: 50px;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  .select-text {
+    display: flex;
+    line-height: 18px;
+    .select-num {
+      font-size: 14px;
+    }
+    .select-color {
+      color: #165DFF;
+    }
+  }
+}
+</style>