@kyfe/ks-query-table 0.0.22 → 0.0.23

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

@@ -1,662 +0,0 @@
-<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>