@kyfe/fms-vue2-components 0.0.2-beta.0

package/src/components/fms-ks-decrypt/component/call/index.vue

@@ -0,0 +1,283 @@
+
+<template>
+  <van-popup :value="value"
+             class="kts-call"
+             v-on="$listeners"
+             v-bind="$attrs"
+             round
+             @closed="onClosed"
+             get-container="body"
+             position="bottom"
+             :safe-area-inset-bottom="true">
+    <div class="call-content">
+      <div class="call-title">
+        <slot name="title">请输入您的号码</slot>
+      </div>
+      <div class="call-tips">
+        <slot name="tips">提示：本次通话记录将会被监控</slot>
+      </div>
+      <div class="call-input">
+        <van-field v-model="cellphone"
+                   :maxlength="maxlength"
+                   type="tel"
+                   :clearable="clearable"
+                   label="" />
+      </div>
+      <div class="call-btns">
+        <van-button plain
+                    type="default"
+                    @click="onClose">取消</van-button>
+        <van-button type="primary"
+                    @click="callPhone">呼叫</van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+  export default {
+    name: "call",
+    props: {
+      value: {
+        type: Boolean,
+        required: true,
+        default: () => false
+      },
+      maxlength: {
+        type: [Number, String],
+        default: 11
+      },
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      // 表单model
+      model: {
+        type: Object,
+        default: () => ({})
+      },
+      // 字段key
+      modelKey: {
+        type: String,
+        default: '',
+      },
+      // 传入的虚拟号解密入参
+      decrypt: {
+        type: Object,
+        default: () => {
+          // return {
+          //   dataId: '',
+          //   moduleCode: '',
+          //   fieldName: '',
+          //   fieldNameStr: '',
+          //   buttonName: '',
+          // }
+        }
+      },
+      // 传入的本机号码
+      phone: {
+        type: [String, Number],
+        default: () => ''
+      }
+    },
+    data () {
+      return {
+        cellphone: ''
+      }
+    },
+    watch: {
+      value (val) {
+        if (val) {
+          if (this.phone) {
+            this.cellphone = this.phone
+          }
+        }
+      }
+    },
+    methods: {
+      /**
+       * @description 支持多层级获取对象内属性值
+       * @param {Object} model
+       * @param {String} key 如'res[0]' 'res[0].a' 'res[0].c[2]'
+       * @returns {*}
+       */
+      getModelValue (model, key) {
+        if (!key) {
+          return ''
+        }
+        if (key.indexOf('.') > 0) {
+          let arr = key.split('.')
+          let length = arr.length - 1
+          return arr.reduce((s, k, i) => {
+            let index = k.indexOf('[')
+            if (i === length) {
+              if (index > 0) {
+                return (s[k.substr(0, index)] || [])[+k.substring(index + 1, k.length - 1)]
+              }
+              return s[k]
+            } else {
+              if (index > 0) {
+                return (s[k.substr(0, index)] || [])[+k.substring(index + 1, k.length - 1)] || {}
+              }
+              return s[k] || {}
+            }
+          }, model)
+        }
+        let index = key.indexOf('[')
+        if (index > 0) {
+          return (model[key.substr(0, index)] || [])[+key.substring(index + 1, key.length - 1)]
+        }
+        return model[key]
+      },
+      /**
+       * @desciption 拨打电话
+       */
+      async callPhone () {
+        const reg = /^1[0-9]{10}$/
+        if (reg.test(this.cellphone)) {
+          const phone = await this.decryptPhone(this.model)
+          if (phone) {
+            location.href = "tel:" + phone
+            return this.$emit('success', this.cellphone, phone)
+          }
+          return vant.Toast('未找到对应手机号！')
+        }
+        return vant.Toast('请输入正确手机号！')
+      },
+      /**
+       * @desciption 解密虚拟号
+       * @param {Object} model 解密model
+       * @param {Object} decrypt 解密配置
+       * @returns {String} 解密手机号
+       */
+      async decryptPhone (model) {
+        const virtual = this.getModelValue(model, `${this.modelKey}Virtual`)
+        if (virtual) {
+          return await this.decryptVirtual(model, virtual)
+        } else {
+          const mask = this.getModelValue(model, `${this.modelKey}Mask`)
+          if (mask) {
+            return await this.decryptMask(mask)
+          } else {
+            const maskSec = this.getModelValue(model, `${this.modelKey}MaskSec`)
+            console.log(maskSec, this.modelKey, 'maskSec')
+            if (!maskSec) {
+              return this.getModelValue(model, this.modelKey)
+            }
+          }
+        }
+      },
+      /**
+       * @desciption 解密虚拟号
+       * @param {Object} model 解密model
+       * @param {String} virtual 虚拟号加密字符串
+       * @returns {String} 解密数据
+       */
+      async decryptVirtual (model, virtual) {
+        try {
+          const data = await this.$http('basevirtual.virtualPhone.getVirtualNumber', 55041, {
+            ...this.decrypt,
+            fieldContent: virtual,
+            calloutPhone: this.cellphone,
+            callinPhone: this.getModelValue(model, this.modelKey)
+          })
+          return data
+        } catch (error) {
+          return ''
+        }
+      },
+      /**
+       * @desciption 解密敏感
+       * @param {String} mask 敏感加密字符串
+       * @returns {String} 解密数据
+       */
+      async decryptMask (mask) {
+        try {
+          const data = await this.$http('syslog.sensitiveFieldViewLog.save', 10135, {
+            ...this.decrypt,
+            fieldContent: mask,
+          })
+          return data
+        } catch (error) {
+          return ''
+        }
+      },
+      /**
+       * @desciption 关闭弹窗
+       */
+      onClose () {
+        this.$emit('input', false)
+      },
+      /**
+       * @desciption 弹窗关闭后data所有值reset
+       */
+      onClosed () {
+        Object.assign(this.$data, this.$options.data())
+      }
+    }
+  }
+</script>
+
+<style lang="less" scope>
+  @import "./mixin.less";
+  .kts-call {
+    width: 100%;
+    background-color: #ffffff;
+    .call-content {
+      width: 100%;
+      padding: 28 / @px 17 / @px 0;
+      box-sizing: border-box;
+      .call-title {
+        width: 100%;
+        height: 28 / @px;
+        font-size: 20 / @px;
+        font-weight: 500;
+        text-align: center;
+        color: #03050d;
+        line-height: 28 / @px;
+      }
+      .call-tips {
+        width: 100%;
+        height: 21 / @px;
+        font-size: 15 / @px;
+        font-weight: 400;
+        text-align: center;
+        color: #b0b3bf;
+        line-height: 21 / @px;
+      }
+      .call-input {
+        width: 100%;
+        margin-top: 32 / @px;
+        display: flex;
+        justify-content: center;
+        .borderHalf(#ebedf5, bottom);
+        .van-field {
+          width: 326 / @px;
+          font-size: 20 / @px;
+          .van-field__control {
+            text-align: center;
+          }
+        }
+      }
+      .call-btns {
+        box-sizing: border-box;
+        padding: 23 / @px 0;
+        display: flex;
+        justify-content: space-between;
+        .van-button {
+          height: 50 / @px;
+          flex: 1;
+          border-radius: 8 / @px;
+          &:first-of-type {
+            border: none;
+            color: #7972fe;
+            background-color: #f1f3f7;
+          }
+          &:not(:last-of-type) {
+            margin-right: 20 / @px;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/fms-ks-decrypt/component/call/mixin.less

@@ -0,0 +1,50 @@
+
+@px: 1px; // 12/@px 
+.subclass (@color) {
+    position: absolute;
+    content: ' ';
+    text-indent: -999rem;
+    // overflow: hidden;
+    background-color: @color;
+  }
+/**
+  * 0.5px边框
+  * @color 颜色
+  * @direction 方向（top, bottom, left, right）
+ */
+ .borderHalf (@color, @direction: bottom) when (@direction = top), (@direction = bottom) {
+    position: relative;
+    &::after {
+      .subclass(@color);
+      left: 0;
+      right: 0;
+      height: 1px;
+      @{direction}: 0;
+      transform: scaleY(0.5);
+    }
+  }
+  .borderHalf (@color, @direction) when (@direction = left), (@direction = right) {
+    position: relative;
+    &::after {
+      .subclass(@color);
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      border-top-width: 1px;
+      border-top-style: solid;
+      border-top-color: @color;
+      @{direction}: 0;
+      transform: scaleX(0.5);
+    }
+    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+      position: relative;
+      &::after {
+        .subclass(@color);
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        @{direction}: 0;
+        transform: scaleX(0.5);
+      }
+    }
+  }

package/src/components/fms-ks-decrypt/component/custom-call/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <call
+    @success="onSuccess"
+    v-on="$listeners"
+    v-bind="{
+      ...$attrs,
+      phone: $attrs.phone ? $attrs.phone : phone,
+    }"
+  >
+    <slot></slot>
+  </call>
+</template>
+
+<script>
+  import call from '../call/index.vue'
+  export default {
+    name: 'custom-call',
+    components: {
+      call,
+    },
+    watch: {
+      $attrs () {
+        this.getMobile()
+      },
+    },
+    data () {
+      return {
+        phone: '',
+      }
+    },
+    methods: {
+      /**
+       * @description 获取本机号码
+       */
+      getMobile () {
+        let { user = {} } = window.ksui
+        this.phone =
+          localStorage.getItem('mobile') ||
+          user.companyMobile ||
+          user.privateMobile
+      },
+      /**
+       * @description 保存拨打成功的号码
+       */
+      onSuccess (cellphone) {
+        localStorage.setItem('mobile', cellphone)
+      },
+    },
+  }
+</script>

package/src/components/fms-ks-decrypt/fms-ks-decrypt.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="kts-decrypt">
+    <!-- 表单场景结构 -->
+    <van-field
+      v-if="isField"
+      v-model="value"
+      v-bind="$attrs"
+      @blur="handleBlur"
+      @input="handleInput"
+      @clear="handleClear"
+      @focus="handleFocus"
+      @click-left-icon="clickLeftIcon"
+      @click-right-icon="clickRightIcon"
+    >
+      <!-- 监控 支持解密 -->
+      <div
+        v-if="maskFiled.mask"
+        slot="input"
+        class="kts-mobile-decrypt ks-mobile-decrypt"
+        @click="decryptBtn"
+      >
+        {{ value }}
+      </div>
+      <!-- 敏感 不可解密 -->
+      <div v-else-if="maskFiled.maskSec" class="kts-mobile-decrypt" slot="input">
+        {{ maskSecDefault }}
+      </div>
+      <!-- 虚拟号 支持拨打虚拟号码 -->
+      <div v-else-if="maskFiled.virtual" slot="input" class="kts-mobile-decrypt">
+        {{ value }}
+        <img class="phone-img" src="./phone.svg" @click="showCall" />
+      </div>
+    </van-field>
+    <!-- 非表单场景结构 -->
+    <template v-else>
+      <!-- 虚拟号 支持拨打虚拟号码 -->
+      <div v-if="maskFiled.virtual" slot="input" class="kts-mobile-decrypt">
+        {{ value }}
+        <img class="phone-img" src="./phone.svg" @click="showCall" />
+      </div>
+      <!-- 监控or敏感 -->
+      <span
+        v-else
+        :class="maskFiled.mask ? 'ks-mobile-decrypt' : ''"
+        @click="decryptBtn"
+        >{{ maskFiled.maskSec ? maskSecDefault : numberSplitInt(value) }}</span
+      >
+    </template>
+
+    <!-- 拨打虚拟号电话弹窗 -->
+    <CustomCall
+      v-model="callShow"
+      :decrypt="callDecrypt"
+      :model="formData"
+      :modelKey="fieldName"
+    ></CustomCall>
+  </div>
+</template>
+<script>
+// 拨打虚拟号电话弹窗组件
+import CustomCall from './component/custom-call/index.vue'
+import { numberSplitInt } from '@kyfe/fms-utils/filter.js'
+
+export default {
+  name: 'FmsKsDecrypt',
+  components: {
+    CustomCall,
+  },
+  /**
+   * formData 表单数据@必填
+   * fieldName 对应的后端字段名@必填
+   * fieldNameStr 和label名称一致
+   * maskSecDefault 敏感字段默认显示的内容
+   * isField 是否是在表单中使用 默认为否
+   * idKey 解密时的dataId 作为列表数据的唯一标识
+   * menuCode: {
+   *  moduleCode 解密时菜单ID@必填
+   *  moduleName 当前模块名@必填
+   * }
+   */
+  props: {
+    value: [String, Number],
+    formData: Object,
+    // 绑定属性、字段
+    fieldName: String,
+    // 字段中文名
+    fieldNameStr: String,
+    maskSecDefault: {
+      type: String,
+      default: '✽✽✽',
+    },
+    isField: {
+      type: Boolean,
+      default: false,
+    },
+    idKey: {
+      type: String,
+      default: 'id',
+    },
+    menuCode: {
+      type: Object,
+      default: () => ({
+        moduleCode: window.ksui?.menu?.id,
+        moduleName: window.ksui?.menu?.title,
+      }),
+    },
+    isMoney: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      callShow: false, // 是否展示打电话弹窗
+      callDecrypt: {}, // 虚拟号解密信息
+      menuCode() {},
+    }
+  },
+  computed: {
+    maskFiled() {
+      let mask = null
+      let maskSec = null
+      let virtual = null
+      if (this.formData) {
+        let tempModel = this.formData
+        // 付款公司监控字段显示为客户编码，不包含***
+        // if (tempModel[this.fieldName + 'Mask'] && this.value.includes('***')) {
+        if (tempModel[this.fieldName + 'Mask']) {
+          mask = tempModel[this.fieldName + 'Mask']
+        }
+
+        // formData无直接返回该字段，且只有formData[字段+MaskSec]时 才是敏感字段？
+        if (
+          !tempModel[this.fieldName] &&
+          tempModel.hasOwnProperty(this.fieldName + 'MaskSec')
+        ) {
+          maskSec = 'maskSec'
+        }
+
+        // 虚拟号
+        if (tempModel.hasOwnProperty(this.fieldName + 'Virtual')) {
+          virtual = tempModel[this.fieldName + 'Virtual']
+        }
+
+        tempModel = tempModel[this.fieldName]
+      }
+      return { mask, maskSec, virtual }
+    },
+  },
+  methods: {
+    numberSplitInt(value) {
+      const { isMoney } = this
+      return isMoney ? numberSplitInt(value) : value
+    },
+    /**
+     * @description 拨打电话
+     */
+    showCall() {
+      this.callDecrypt = {
+        dataId: this.formData[this.idKey] || this.createUuid(),
+        moduleCode: this.menuCode.moduleCode || 'kts-h5',
+        fieldName: this.fieldName,
+        fieldNameStr: this.fieldNameStr,
+      }
+      this.callShow = true
+    },
+    isEmpty(val) {
+      return val === '' || val === null || val === undefined
+    },
+    // 创建随机ID 保证解密唯一值
+    createUuid() {
+      return Math.random().toString(36).substr(3)
+    },
+    /**
+     * @description 监控字段 解密操作
+     */
+    decryptBtn() {
+      if (!this.maskFiled.mask) {
+        return
+      }
+      vant.Dialog.confirm({
+        title: '温馨提示',
+        message: `如非必要请勿查看，此操作会联动风控系统监控！`,
+      })
+        .then(() => {
+          this.decrypt()
+        })
+        .catch(() => {})
+    },
+    /**
+     * @description 监控字段 解密操作
+     */
+    async decrypt() {
+      try {
+        let params = {
+          dataId: this.formData[this.idKey] || this.createUuid(),
+          moduleCode: this.menuCode.moduleCode,
+          fieldName: this.fieldName,
+          fieldContent: this.formData[this.fieldName + 'Mask'],
+          fieldNameStr: this.fieldNameStr,
+          buttonName: this.menuCode.moduleName,
+        }
+        let res = await this.$http('syslog.sensitiveFieldViewLog.save', '10135', params)
+        this.value = this.isMoney ? numberSplitInt(res) : res
+        this.$emit('input', res)
+        // 解密之后去掉监控状态，避免再次可点击
+        this.$set(this.formData, this.fieldName, res)
+        this.$set(this.formData, this.fieldName + 'Mask', undefined)
+        if (this.idKey !== '') {
+          this.$emit('decryptData', res, this.fieldName, this.formData[this.idKey])
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    handleBlur() {
+      this.$emit('blur')
+    },
+    handleInput(val) {
+      this.$emit('input', val)
+    },
+    handleFocus(val) {
+      this.$emit('focus', val)
+    },
+    handleClear() {
+      this.$emit('clear')
+    },
+    clickLeftIcon() {
+      this.$emit('click-left-icon')
+    },
+    clickRightIcon() {
+      this.$emit('click-left-icon')
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.kts-decrypt {
+  display: inline-block;
+  .ks-mobile-decrypt {
+    color: #7972fe;
+  }
+  /* 使加密字段靠左展示 */
+  .kts-mobile-decrypt {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .phone-img {
+    width: 25px;
+    margin-left: 6px;
+  }
+}
+/deep/ .van-field__control--right .kts-mobile-decrypt {
+  justify-content: flex-end;
+}
+</style>

package/src/components/fms-ks-decrypt/index.js

@@ -0,0 +1,7 @@
+import FmsKsDecrypt from './fms-ks-decrypt.vue'
+
+FmsKsDecrypt.install = function(Vue) {
+  Vue.component(FmsKsDecrypt.name, FmsKsDecrypt)
+}
+
+export default FmsKsDecrypt

package/src/components/fms-ks-decrypt/phone.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>-mockplus-</title>
+    <defs>
+        <linearGradient x1="54.2285156%" y1="-5.81542969%" x2="54.2285156%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#9D98FF" offset="0%"></stop>
+            <stop stop-color="#6E66FB" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="220627_下单管理-【详情】最新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="订单详情-未报单" transform="translate(-203.000000, -232.000000)">
+            <g id="编组-19" transform="translate(10.000000, 218.000000)">
+                <g id="ic_details_waybill_phone" transform="translate(193.000000, 14.000000)">
+                    <rect id="形状结合" fill="#7972FE" opacity="0.100000001" x="0" y="0" width="17" height="17" rx="8.5"></rect>
+                    <g id="-mockplus-" transform="translate(4.000000, 4.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+                        <g id="icon-telephone" transform="translate(0.562500, 0.562500)">
+                            <path d="M2.95096251,4.92836852 C3.29102971,5.26581039 3.77628321,5.60277158 3.77628321,5.60277158 C3.77628321,5.60277158 4.40769739,6.08441938 4.84471786,5.79504615 C5.81571204,5.21726106 5.81571204,4.97691785 6.30145274,5.26581039 C8.00032717,6.18055666 7.90337391,6.80641039 7.85465368,6.99916564 C7.70898019,7.57695073 6.59279972,8.10666717 5.37869158,7.76970598 C4.11635041,7.4327448 2.90272948,6.80641039 1.97996832,5.89166412 C1.05769436,4.97691785 0.37804715,3.77279836 0.0867001737,2.52061022 C-0.204646803,1.31697141 0.28060669,0.209469884 0.912020873,0.0162339413 C1.05769436,-0.0318347013 1.68862134,-0.0799033438 2.65961553,1.55779531 C2.95096251,2.03896242 2.70833576,2.03896242 2.12564181,3.00225802 C1.83429483,3.43583717 2.32003553,4.0616909 2.32003553,4.0616909 C2.32003553,4.0616909 2.6113825,4.59140734 2.95096251,4.92836852 L2.95096251,4.92836852 Z" id="路径"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>