@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-call-phone/call.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="ks-call">
+    <img class="ks-call_icon" src="https://erphostjs.kye-erp.com/kuasheng-h5/pe/ks-call-phone/phone.png" />
+    <div class="ks-call_desc">将使用此号码加密拨打</div>
+    <div class="ks-call_num">
+      <div class="ks-call_num_info" v-if="showPhoneInfo" @click="changePhoneStatus">
+        <div>{{ phone }}</div>
+        <img src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-call-phone/ks-call-phone-editor.png"/>
+      </div>
+      <div class="ks-call_num_editor" :class="{ 'ks-call_num_editor_error': showError}" v-else>
+        <van-field ref="callPhone" input-align="center" placeholder="请输入本机号码" v-model="phone" type="tel" label="" error-message="手机号格式错误" />
+        <img v-show="phone" @click="deletePhone" src="https://erphostjs.kye-erp.com/kuasheng-h5/assets/ks-call-phone/ks-call-phone-delete.png" />
+      </div>
+    </div>
+    <div class="ks-call_error" v-if="showError||!regPhone">请输入正确的手机号</div>
+    <div class="ks-call_tips">提示：本次通话记录会被监控</div>
+    <div class="ks-call_btn_group">
+      <ks-button type="primary" plain @click="cancelCall">取消</ks-button>
+      <ks-button type="primary" :disabled="!regPhone" @click="confirm">呼叫</ks-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'KsCall',
+  props: {
+    model: {
+      type: Object
+    },
+    phone: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      showPhoneInfo: true,
+      workStatusList: [],
+      showError: false
+    }
+  },
+  computed: {
+    regPhone() {
+      const reg = /^1[0-9]{10}$/
+      return reg.test(this.phone)
+    }
+  },
+  methods: {
+
+    // 呼叫事件
+    async confirm() {
+      if (this.regPhone) {
+        this.showError = false
+        const phone = await this.getCallPhone(this.model)
+        if (phone) {
+          location.href = "tel:" + phone
+          this.$emit('success', phone)
+          return
+        }
+        this.$toast('未找到对应手机号！')
+        this.$emit('callFail')
+        return
+      }
+      this.showError = true
+      this.$emit('callFail')
+      return
+    },
+    async getCallPhone() {
+      try {
+        const data = await this.$http('basevirtual.virtualPhoneV2.bindAxb', 10124 , {
+          callinPhone: this.model.callInPhone,
+          calloutPhone: this.phone,
+          business: 'sys',
+          source: '30',
+          isEncryptPhone: this.model.isEncrypt
+        })
+        return data.virtualPhone
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    changePhoneStatus() {
+      this.showPhoneInfo = false
+      this.$nextTick(() => {
+        this.$refs.callPhone && this.$refs.callPhone.focus()
+      })
+    },
+    // 取消事件
+    cancelCall() {
+      this.$emit('cancel')
+    },
+    deletePhone () {
+      this.phone = ''
+      this.$emit('deletePhone')
+      this.$refs.callPhone && this.$refs.callPhone.focus()
+    }
+  },
+}
+</script>
+<style lang="less">
+  .ks-call {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &_icon {
+      width: 88px;
+      margin-top: 10px;
+    }
+    &_desc {
+      font-size: 14px;
+      color: #181818;
+      line-height: 18px;
+      margin-top: 16px;
+    }
+    &_num {
+      color: #181818;
+      font-size: 24px;
+      margin-top: 20px;
+      display: flex;
+      &_info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-left: 10px;
+        }
+      }
+      &_editor {
+        padding-bottom: 10px;
+        border-bottom: 1px solid #d7d7db;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        &_error {
+          border-bottom: 1px solid #FD4948;
+        }
+        .van-cell {
+          padding: 0;
+          font-size: 24px;
+          width: 220px;
+        }
+        .van-cell:not(:last-child)::after {
+          border-bottom: none;
+        }
+        img {
+          width: 22px;
+          height: 22px;
+        }
+      }
+    }
+    &_error {
+        font-size: 14px;
+        color: #FD4948;
+        margin-top: 10px;
+      }
+    &_tips {
+      font-size: 14px;
+      color: #858793;
+      margin-top: 20px;
+    }
+    &_btn_group {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      margin-top: 26px;
+      margin-bottom: 30px;
+      .van-button {
+        width: 44%;
+        height: 40px;
+        border-radius: 8px;
+      }
+    }
+  }
+</style>

package/kuasheng-ui/components/ks-call-phone/index.js

@@ -0,0 +1,48 @@
+
+import KsCallPhone from './index.vue'
+
+class CallPhoneTool {
+  constructor() {
+    this.instance = null
+  }
+  open(model, eventHandlers = {}) {
+    // 创建一个新的 Vue 实例
+    const KsCallPhoneExtend = Vue.extend(KsCallPhone)
+    this.instance = new KsCallPhoneExtend({
+      el: document.createElement('div')
+    })
+    this.instance.model = model
+    this.instance.value = true
+    document.body.appendChild(this.instance.$el)
+
+    this.instance.$on('cancel', () => {
+      if (eventHandlers.cancel) {
+        eventHandlers.cancel()
+      }
+      this.close()
+    })
+
+    this.instance.$on('success', (val) => {
+      if (eventHandlers.success) {
+        eventHandlers.success(val)
+      }
+      this.close()
+    })
+
+    this.instance.$on('fail', () => {
+      if (eventHandlers.fail) {
+        eventHandlers.fail()
+      }
+      this.close()
+    })
+  }
+  close() {
+    if (this.instance) {
+      this.instance.$destroy() // 销毁实例
+      this.instance.$el.parentNode.removeChild(this.instance.$el) // 移除 DOM
+      this.instance = null // 清空实例
+    }
+  }
+}
+
+export default new CallPhoneTool()

package/kuasheng-ui/components/ks-call-phone/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="ks-call-phone">
+    <ks-popup :value="showPopup"
+             class="ks-call-phone-popup"
+             v-on="$listeners"
+             v-bind="$attrs"
+             :lazy-render="false"
+             round
+             @closed="closed"
+             @click-overlay="cancel"
+             get-container="body"
+             position="bottom"
+             :safe-area-inset-bottom="true">
+        <ks-call ref="callPhone" :model="model" v-if="showCall" :phone="phone" @cancel="cancel" @success="success" @callFail="callFail"></ks-call>
+        <ks-call-tips :statusText="workStatusText" v-else @cancel="cancel" @changeCall="changeCall"></ks-call-tips>
+    </ks-popup>
+  </div>
+</template>
+<script>
+import KsCall from './call.vue'
+import { getLookup } from '../../utils/apis'
+import KsCallTips from './call-tips.vue'
+export default {
+  name: 'KsCallPhone',
+  components: {
+    KsCall,
+    KsCallTips
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    model: {
+      type: Object,
+      require: true,
+      default: () => {
+        return {
+          callOutUserId: '', // 呼叫用户id
+          callInPhone: '',  // 呼入号码
+          callOutPhone: '',  // 呼出号码
+          isEncrypt: 0,  // 是否加密
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      showCall: true,
+      workStatusText: '',
+      showPopup: false
+    }
+  },
+  watch: {
+    value(val) {
+      if (val) {
+        this.getEmployeeWorkStates()
+      }
+    }
+  },
+  mounted() {
+    this.getWorkList()
+  },
+  methods: {
+    setPhone() {
+      if (this.model.callOutPhone) {
+        this.phone = this.model.callOutPhone
+      } else {
+        ks.getUserInfo().then(res => {
+          const user = res.userInfo
+          this.phone = user.companyMobile || user.privateMobile
+        })
+      }
+    },
+    // 取消弹窗
+    cancel() {
+      this.showPopup = false
+      this.showCall = true
+      this.$refs.callPhone && (this.$refs.callPhone.showPhoneInfo = true)
+      ks.setCloseButton({ isShow: true })
+      this.$emit('input', false)
+      this.$emit('cancel')
+    },
+    closed() {
+      this.cancel()
+    },
+    changeCall() {
+      this.showCall = true
+    },
+    showPopUp() {
+      ks.setCloseButton({ isShow: false })
+      this.showPopup = true
+      this.setPhone()
+    },
+    // 判断当前用户的状态
+    async getEmployeeWorkStates() {
+      try {
+        const data = await this.$http('hr.remoteEmployee.getWorkStates', 10124, {
+          id: this.model.callOutUserId
+        })
+        const employeeStatus = data.workState
+        if (!this.workStatusList.length) {
+          await this.getWorkList()
+        }
+        // 判断是否为非工作中状态
+        if (employeeStatus && Number(employeeStatus)!== 10) {
+          this.workStatusText = this.workStatusList.find(item => Number(item.lookupCode) === Number(employeeStatus)).lookupValue
+          this.showCall = false
+        }
+        this.showPopUp()
+      } catch (error) {
+        this.changeCall()
+        this.showPopUp()
+      }
+    },
+    async getWorkList() {
+      const data = await getLookup(['hrms_employee_work_states'])
+      this.workStatusList = data[0].childrenLookupValues || []
+    },
+    success(val) {
+      this.$emit('success', val)
+    },
+    callFail() {
+      this.$emit('fail')
+    }
+  }
+}
+</script>
+<style>
+
+</style>

package/kuasheng-ui/components/ks-date-picker/README.md

@@ -0,0 +1,23 @@
+## 日期选择组件
+
+### 参数
+
+| 参数名        | 类型                              | 说明                                        | 可选值                                                           | 默认值 |
+| ------------- | --------------------------------- | ------------------------------------------- | ---------------------------------------------------------------- | ------ |
+| v-model       | boolean                           | 是否显示                                    | true、false                                                      | false  |
+| horizontal    | boolean                           | 是否横屏                                    | true、false                                                      | false  |
+| position      | string                            | 弹出位置                                    | top、bottom、dropdown                                            | bottom |
+| top           | number                            | position 为 dropdown 时需传入距屏幕顶部高度 |                                                                  |
+| default-value | date、number、string、array(范围) | 默认时间                                    |                                                                  |
+| year-range    | array                             | 可选时间年限范围                            |                                                                  |
+| min           | date、number、string              | 最小可选日期(月份)                          |                                                                  |
+| max           | date、number、string              | 最大可选日期(月份)                          |                                                                  |
+| showConfirm   | boolean                           | 是否显示确认按钮                            | true、false                                                      | true   |
+| type          | string                            | 时间控件类型                                | date、daterange、month、monthrange、week、quarter、dateweekmonth | date   |
+
+### 事件
+
+| 事件名  | 说明                                                 |
+| ------- | ---------------------------------------------------- |
+| select  | 选中日期或月份等触发，返回时间对象、范围选择返回数组 |
+| confirm | 点击确认按钮触发，返回时间对象、范围选择返回数组     |

package/kuasheng-ui/components/ks-date-picker/date-picker-bottom.vue

@@ -0,0 +1,123 @@
+<template>
+  <van-popup
+    :value="value"
+    position="bottom"
+    get-container="body"
+    class="ks-date-picker-bottom-popup"
+    duration="0.2"
+    :closeable="true"
+    :close-on-click-overlay="closeOverlay"
+    safe-area-inset-bottom
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <div class="ks-date-picker ks-date-picker-bottom">
+      <div class="ks-date-picker-bottom__header">
+        <div class="ks-date-picker-bottom__header-title">
+          <span class="ks-date-picker-bottom__header-title-text">{{title}}</span>
+          <span class="ks-date-picker-bottom__header-title-start">{{startText}}</span>
+          <span v-show="type.includes('range') && startText" class="ks-date-picker-bottom__header-title-split"> - </span>
+          <span
+            v-show="type.includes('range') && startText"
+            class="ks-date-picker-bottom__header-title-end"
+            :class="{'ks-date-picker-bottom__header-title-end-not': startText && !endText}"
+          >
+            {{endText || (type === 'monthrange' ? '结束月份' : '结束时间')}}
+          </span>
+        </div>
+      </div>
+      <div class="ks-date-picker__body">
+        <component
+          ref="selector"
+          :is="currentCom"
+          v-bind="$attrs"
+          @select="handleSelect"
+          @change-type="changeType"
+        />
+      </div>
+      <div v-if="showConfirm" class="ks-date-picker-bottom__footer">
+        <slot name="reset"></slot>
+        <van-button type="primary" :disabled="!currentSelectedValue" block class="van-calendar__confirm" @click="handleConfirm">确定</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import Mixins from './mixin.js'
+
+const titleMap = {
+  'date': '日期选择',
+  'daterange': '日期选择',
+  'month': '月份选择',
+  'monthrange': '月份选择',
+  'week': '周选择',
+  'quarter': '季度选择',
+}
+
+export default {
+  name: 'date-picker-bottom',
+  mixins: [Mixins],
+  data () {
+    return {
+      dateweekmonthType: 'date'
+    }
+  },
+  computed: {
+    title () {
+      if (this.type === 'dateweekmonth') {
+        return titleMap[this.dateweekmonthType]
+      } else {
+        return titleMap[this.type]
+      }
+    }
+  },
+  methods: {
+    changeType (e) {
+      this.dateweekmonthType = e
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import url("./style.less");
+.ks-date-picker-bottom-popup {
+  height: 82%;
+  border-radius: 12px 12px 0 0;
+  .van-popup__close-icon--top-right {
+    top: 13px;
+    color: #999999;
+  }
+}
+.ks-date-picker-bottom {
+  height: 82vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &__header {
+    height: 48px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 3px 8px 0 rgba(235,235,235,0.30);
+    &-title {
+      position: relative;
+      .header-title-text(48px);
+      &-text {
+        font-size: 18px;
+        font-weight: bold;
+        position: absolute;
+        left: 16px;
+        color: #333;
+      }
+    }
+  }
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    .van-calendar__confirm:nth-child(2) {
+      margin-left: 16px;
+    }
+    .footer-btn();
+  }
+}
+</style>

package/kuasheng-ui/components/ks-date-picker/date-picker-dropdown.vue

@@ -0,0 +1,80 @@
+<template>
+  <div v-show="value" ref="datepickerDropdown" class="ks-date-picker-dropdown-warpper" :style="{top: `${top}px`}">
+    <van-popup
+      :value="value"
+      position="top"
+      :overlay-style="{position: 'absolute'}"
+      :get-container="getContainer"
+      class="ks-date-picker-dropdown-popup"
+      duration="0.2"
+      :closeable="false"
+      :close-on-click-overlay="closeOverlay"
+      @input="handleClosePopup"
+      @open="handleOpenPopup"
+    >
+      <div class="ks-date-picker ks-date-picker-dropdown">
+        <div class="ks-date-picker__body">
+          <component
+            ref="selector"
+            :is="currentCom"
+            v-bind="$attrs"
+            @select="handleSelect"
+          />
+        </div>
+        <div v-if="showConfirm" class="ks-date-picker-dropdown__footer">
+          <van-button type="primary" :disabled="!currentSelectedValue" block class="van-calendar__confirm" @click="handleConfirm">确定</van-button>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import Mixins from './mixin.js'
+
+export default {
+  name: 'date-picker-dropdown',
+  mixins: [Mixins],
+  props: {
+    top: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    getContainer () {
+      return this.$refs.datepickerDropdown
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import url("./style.less");
+.ks-date-picker-dropdown-warpper {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  overflow: hidden;
+}
+.ks-date-picker-dropdown-popup {
+  position: absolute;
+  height: 88%;
+  border-radius: 0 0 12px 12px;
+  .van-popup__close-icon--top-left {
+    top: 10px;
+    color: #999999;
+  }
+}
+.ks-date-picker-dropdown {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &__footer {
+    .footer-btn();
+  }
+}
+</style>

package/kuasheng-ui/components/ks-date-picker/date-picker-right.vue

@@ -0,0 +1,87 @@
+<template>
+  <van-popup
+    :value="value"
+    position="right"
+    get-container="body"
+    class="ks-date-picker-right-popup"
+    duration="0.2"
+    :closeable="true"
+    :close-on-click-overlay="closeOverlay"
+    close-icon-position="top-left"
+    close-icon="arrow-left"
+    @input="handleClosePopup"
+    @open="handleOpenPopup"
+  >
+    <div class="ks-date-picker ks-date-picker-right">
+      <div class="ks-date-picker-right__header">
+        <div class="ks-date-picker-right__header-title">
+          <span class="ks-date-picker-right__header-title-start">{{startText}}</span>
+          <span v-show="type.includes('range') && startText" class="ks-date-picker-right__header-title-split"> - </span>
+          <span
+            v-show="type.includes('range') && startText"
+            class="ks-date-picker-right__header-title-end"
+            :class="{'ks-date-picker-right__header-title-end-not': startText && !endText}"
+          >
+            {{endText || (type === 'monthrange' ? '结束月份' : '结束时间')}}
+          </span>
+        </div>
+      </div>
+      <div class="ks-date-picker__body">
+        <component
+          ref="selector"
+          :is="currentCom"
+          v-bind="$attrs"
+          @select="handleSelect"
+        />
+      </div>
+      <div v-if="showConfirm" class="ks-date-picker-right__footer">
+        <van-button type="primary" :disabled="!currentSelectedValue" block class="van-calendar__confirm" @click="handleConfirm">确定</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+import Mixins from './mixin.js'
+
+export default {
+  name: 'date-picker-right',
+  mixins: [Mixins]
+}
+</script>
+
+<style lang="less">
+@import url("./style.less");
+.ks-date-picker-right-popup {
+  width: 70%;
+  .van-popup__close-icon--top-left {
+    top: 10px;
+    color: #999999;
+  }
+}
+.ks-date-picker-right {
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &__header {
+    height: 40px;
+    width: 375px;
+    margin: 0 auto;
+    &-title {
+      .header-title-text();
+      box-shadow: 0 3px 10px 0 rgba(235,235,235,0.30);
+    }
+  }
+  .ks-date-picker__body {
+    width: 375px;
+    margin: 0 auto;
+  }
+  &__footer {
+    height: 60px;
+    padding: 16px 80px 0 80px;
+    box-shadow: 0 0 4px 0 rgba(115,162,255,0.22);
+    z-index: 1;
+  }
+}
+</style>