@kyfe/fms-vue2-components 0.0.3 → 0.0.5

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="pick-box">
+    <div class="pick-field-box"
+         @click="showPickerFn">
+      <ks-field readonly
+                clickable
+                input-align="right"
+                error-message-align="right"
+                :required="required"
+                name="picker"
+                :value="value"
+                :label="label"
+                right-icon="arrow"
+                :rules="[{ required: required, message: `请选择${label}` }]"
+                :placeholder="placeholder" />
+    </div>
+    <ks-popup v-model="showPicker"
+              position="bottom">
+      <ks-picker show-toolbar
+                 :columns="columns"
+                 @confirm="onConfirm"
+                 @cancel="showPicker = false" />
+    </ks-popup>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'FmsKsPicker',
+    props: {
+      value: {
+        type: String,
+        default: ""
+      },
+      label: {
+        type: String,
+        default: ""
+      },
+      placeholder: {
+        type: String,
+        default: ""
+      },
+      columns: {
+        type: Array,
+        default: () => []
+      },
+      required: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        showPicker: false
+      }
+    },
+    methods: {
+      showPickerFn () {
+        this.showPicker = true
+      },
+      onConfirm (value) {
+        const { code = '' } = value
+        this.$emit('input', code, value)
+        this.showPicker = false
+      }
+    }
+  }
+</script>

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

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

package/src/components/fms-ks-popover/click-outside.js

@@ -0,0 +1,68 @@
+function validate(binding) {
+  if (typeof binding.value !== 'function') {
+    return false
+  }
+
+  return true
+}
+
+function isPopup(popupItem, elements) {
+  if (!popupItem || !elements)
+    return false
+
+  for (var i = 0, len = elements.length; i < len; i++) {
+    try {
+      if (popupItem.contains(elements[i])) {
+        return true
+      }
+      if (elements[i].contains(popupItem)) {
+        return false
+      }
+    } catch(e) {
+      return false
+    }
+  }
+
+  return false
+}
+
+function isServer(vNode) {
+  return typeof vNode.componentInstance !== 'undefined' && vNode.componentInstance.$isServer
+}
+
+export default {
+  bind: function (el, binding, vNode) {
+    if (!validate(binding)) return
+
+    // Define Handler and cache it on the element
+    function handler(e) {
+      if (!vNode.context) return
+
+      // some components may have related popup item, on which we shall prevent the click outside event handler.
+      var elements = e.path || (e.composedPath && e.composedPath())
+      elements && elements.length > 0 && elements.unshift(e.target)
+      if (el.contains(e.target) || isPopup(vNode.context.popupItem, elements)) return
+
+      el.__vueClickOutside__.callback(e)
+    }
+
+    // add Event Listeners
+    el.__vueClickOutside__ = {
+      handler: handler,
+      callback: binding.value
+    }
+    const clickHandler = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click';
+    !isServer(vNode) && document.addEventListener(clickHandler, handler)
+  },
+
+  update: function (el, binding) {
+    if (validate(binding)) el.__vueClickOutside__.callback = binding.value
+  },
+
+  unbind: function (el, binding, vNode) {
+    // Remove Event Listeners
+    const clickHandler = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click';
+    !isServer(vNode) && el.__vueClickOutside__ && document.removeEventListener(clickHandler, el.__vueClickOutside__.handler)
+    delete el.__vueClickOutside__
+  }
+}

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="flow-fms-popover"
+       v-clickoutside="close">
+    <div v-if="show"
+         class="flow-fms-popover-content"
+         :style="popoverStyle"
+         @click="close">
+      <div v-if="showHtml"
+           v-html="content"></div>
+      <div v-else>{{content}}</div>
+    </div>
+    <div v-if="show"
+         class="flow-fms-popover-arrow"
+         :style="arrowStyle"
+         @click="close"></div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+  import clickoutside from './click-outside'
+  export default {
+    name: 'FmsKsPopover',
+    directives: {
+      clickoutside
+    },
+    props: {
+      content: String,
+      showHtml: {
+        type: Boolean,
+        default: false
+      },
+      show: {
+        type: Boolean,
+        default: false
+      },
+      popoverStyle: {
+        type: Object,
+        default: () => { }
+      },
+      arrowStyle: {
+        type: Object,
+        default: () => { }
+      },
+    },
+    methods: {
+      close (e) {
+        console.log('122--')
+        e.stopPropagation()
+        this.$emit('update:show', false)
+        this.$emit('close', false)
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .flow-fms-popover {
+    display: inline-block;
+    position: relative;
+  }
+  .flow-fms-popover-arrow {
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-top-color: #4a4a4a;
+    position: absolute;
+  }
+  .flow-fms-popover-content {
+    position: absolute;
+    // left: -9999;
+    bottom: -9999;
+    font-size: 12px;
+    font-weight: 500;
+    z-index: 9999999;
+    background: #4a4a4a;
+    padding: 5px;
+    border-width: 1px;
+    border-radius: 4px;
+    border-style: solid;
+    border-color: #4a4a4a;
+    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
+    line-height: 1.5;
+    overflow: hidden;
+    color: #fff;
+    width: 300px;
+    left: -60px;
+    top: -48px;
+  }
+</style>

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

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

package/src/components/fms-ks-search-tips/fms-ks-search-tips.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="fms-search-tips-wrapper">
+    <van-field :value="fieldValue"
+               :input-align="inputAlign"
+               error-message-align="right"
+               :required="required"
+               :rules="rules"
+               :placeholder="placeholder"
+               v-bind="$attrs"
+               @focus="focus"
+               @input="inputChange"
+               @blur="blur">
+      <template slot="label">
+        {{ label }}
+      </template>
+      <!-- @blur="blur" -->
+      <template #right-icon>
+        <slot></slot>
+      </template>
+    </van-field>
+    <transition name="van-fade">
+      <div class="tips-list"
+           v-show="showTips">
+        <div class="arrow"></div>
+        <div class="content">
+          <slot name="content"
+                v-if="tipsList.length < 1"></slot>
+          <div class="holder"
+               v-if="tipsList.length < 1">
+            <van-loading v-if="loading"
+                         size="24px" />
+            <span v-if="!loading">暂无数据</span>
+          </div>
+          <div class="items"
+               v-for="e in tipsList"
+               :key="e"
+               @click="pick(e)">
+            <span v-for="item in valueKey"
+                  :key="item">{{e[item]}}</span>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+  const Toast = window.vant && window.vant.Toast
+  export default {
+    name: 'FmsKsSearchTips',
+    props: {
+      value: String,
+      employeeName: String,
+      label: String,
+      labelKey: String,
+      placeholder: String,
+      required: Boolean,
+      url: String,
+      appkey: String,
+      formatData: Function,
+      formatResult: Function,
+      valueKey: Array,
+      timeout: { //在审批页面时候修改，避免自动触发
+        type: Boolean,
+        default: () => {
+          return false
+        }
+      },
+      blurClear: { // 是否搜不出来，失去焦点就清空，默认为true
+        type: Boolean,
+        default: () => {
+          return true
+        }
+      },
+      searchNullClear: { // 是否搜不出来，就立即清空输入，默认为true
+        type: Boolean,
+        default: () => {
+          return true
+        }
+      },
+      inputLength: {
+        type: Number,
+        default: 2
+      },
+      isWatch: { // 是否value改变就触发，默认为true，false代表只手动输入才触发查询
+        type: Boolean,
+        default: () => {
+          return true
+        }
+      },
+      triggerOnFocus: { // 是否获取焦点就触发
+        type: Boolean,
+        default: false
+      },
+      message: String,
+    },
+    data () {
+      return {
+        fieldValue: '',
+        tipsList: [],
+        loading: false,
+        showTips: false,
+        hasSelected: false // 记录是否选中过
+      }
+    },
+    watch: {
+      value (val) {
+        this.fieldValue = val
+        if (this.isWatch) {
+          console.log(val, 'watch触发')
+          this.inputChange(val)
+        }
+
+      }
+    },
+    computed: {
+      rules () {
+        const required = { required: this.required, message: `请选择${this.label}` }
+        return [
+          required,
+          ...this.$attrs.rules || []
+        ]
+      },
+      inputAlign () {
+        return this.$attrs['input-align'] || 'right'
+      }
+    },
+    mounted () {
+      console.log(this.value, 'mounted触发')
+      this.fieldValue = this.value
+    },
+    methods: {
+      filterKeyLight (e) {
+        let text = e.name
+        if (!this.fieldValue) return text;
+        let result = text.replace(new RegExp(this.fieldValue, 'g'), `<span class="primary_title" style="color:#7a77fb;font-weight:400;">${this.fieldValue}</span>`);
+        result = `${result}`
+        return result
+      },
+      inputChange (e) {
+        if (this.hasSelected || this.timeout) {
+          return
+        }
+        let val = e
+        this.$emit('input', e) // 为了内部的输入，让外部的值也跟着改变
+        this.fieldValue = val
+        // console.log('fieldValue', val)
+        if (val && val.length >= this.inputLength) {
+          this.tipsList = []
+          this.filterFunc(val)
+        } else {
+          this.tipsList = []
+          this.showTips = false
+          this.$emit('search', null)
+        }
+      },
+      async filterFunc () {
+        console.log(9999)
+        this.showTips = true
+        this.loading = true
+        try {
+          // const comList = await this.getCompanyList()
+          this.tipsList = await this.getCompanyList()
+          if (this.tipsList.length <= 0 && this.searchNullClear) {
+            Toast(this.message || `${this.label}搜索为空，请重新输入！`)
+            this.showTips = false
+            this.fieldValue = ''
+            this.$emit('input', '') // 为了内部的输入，让外部的值也跟着改变
+          }
+          if (this.tipsList.length <= 0 && !this.searchNullClear) {
+            this.showTips = false
+          }
+          this.$emit('search', this.tipsList, this.searchNullClear)
+        } catch (error) {
+          console.log('error', error)
+          this.showTips = false
+        } finally {
+          this.loading = false
+        }
+      },
+      async getCompanyList () {
+        let res = await this.$http(this.url, this.appkey, this.formatData(this.fieldValue))
+        return typeof this.formatResult === 'function' ? this.formatResult(res) : (Array.isArray(res) ? res : res.rows)
+      },
+      blur () {
+        if (!this.showTips) {
+          if (this.blurClear) { // 搜不出来，且失去焦点需要清空,才需要clear;searchNullClear为true的就不需要清空
+            this.clear()
+          }
+          this.$emit('blur')
+          return
+        }
+        // 这里 真正的失去焦点 跟 pick都会触发，并且是在pick事件之前触发
+        // 必须是失去焦点和搜索为空都需要清空时,才清空
+        if (this.blurClear && this.searchNullClear) {
+          this.clear()
+        }
+        setTimeout(() => {
+          this.showTips = false
+          this.$emit('blur')
+          // TODO: 如何处理更舒服：更健壮：这里 真正的失去焦点 跟 pick都会触发，并且是在pick事件之前触发
+          // if (this.blurClear && !this.hasSelected) {
+          //   this.clear()
+          // }
+        })
+      },
+      focus () {
+        if (this.triggerOnFocus) {
+          this.tipsList = []
+          this.filterFunc()
+        }
+        this.hasSelected = false
+      },
+      clear () {
+        this.loading = false
+        this.fieldValue = ''
+        this.$emit('selectItem', {})
+      },
+      // 点击某个下拉选项触发
+      pick (val) {
+        // this.showTips = false
+        this.fieldValue = val[this.labelKey]
+        this.hasSelected = true
+        this.$emit('selectItem', val)
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .fms-search-tips-wrapper {
+    position: relative;
+    .van-cell {
+      /deep/ .van-field__value {
+        height: 24px;
+      }
+      &::after {
+        position: absolute;
+        content: " ";
+        pointer-events: none;
+        right: 0;
+        bottom: 0;
+        left: 16px;
+        right: 16px;
+        border-bottom: 1px solid #d9d9d9;
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+      }
+    }
+    .tips-list {
+      position: absolute;
+      top: 54px;
+      right: 10px;
+      border: 1px solid #ededed;
+      width: 60%;
+      color: #999;
+      background-color: #fff;
+      font-weight: 300;
+      box-shadow: 1px 1px 8px #dfdede;
+      // filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+      z-index: 999;
+      .arrow {
+        width: 0;
+        height: 0;
+        border: 10px solid transparent;
+        border-bottom: 10px solid #fff;
+        position: absolute;
+        right: 35px;
+        top: -18px;
+      }
+      .content {
+        overflow: scroll;
+        max-height: 120px;
+        .items {
+          padding-right: 15px;
+          box-sizing: border-box;
+          width: 100%;
+          height: 40px;
+          border-bottom: 0.5px solid #ededed;
+          font-size: 15px;
+          line-height: 40px;
+          text-align: left;
+          overflow: hidden;
+          span {
+            display: inline-block;
+            padding-left: 16px;
+          }
+        }
+        .holder {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>

package/src/components/fms-ks-search-tips/index.js

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

package/src/components/fms-ks-search-tips//350/277/234/347/250/213/346/220/234/347/264/242.md

@@ -0,0 +1,118 @@
+# 模糊搜索组件
+这是一个 Vue 组件，用于实现搜索提示功能。  
+选择搜索结果后,会派发select及selectItem方法;  
+再次打开时,会展示当前选中的值,并可以做清空操作.   
+可以通过getDefault设置打开时默认展示的搜索选项.
+
+## 属性props
+类似与pc端的kye-search-tips的入参
+| 参数         | 类型     | 默认值 | 说明                               |
+| ------------ | -------- | ------ | ---------------------------------- |
+| label        | String   | -      | 输入框的标签名称                   |
+| disabled     | Boolean  |        | 是否禁用输入框                     |
+| formatData   | Function |        | 模糊搜索入参格式化方法             |
+| formatResult | Function |        | 搜索结果格式化方法                 |
+| inputLength  | Number   | 2      | 触发查询的最小长度                 |
+| keys         | Array    |        | 搜索结果显示的字段集合             |
+| message      | String   |        | 搜索结果为空时的提示信息           |
+| placeholder  | String   |        | 输入框的占位符                     |
+| url          | String   |        | 搜索请求的 URL                     |
+| value        | String   |        | 当前字段的值                       |
+| valueKey     | String   |        | 显示在输入框的字段 key             |
+| appkey       | String   |        | 接口请求的appkey                   |
+| required     | Boolean  |        | 是否必填                           |
+| inputAlign   | String   |        | 输入框内容对齐方式                 |
+| getDefault   | Function |        | 打开搜索框的默认数据方法，异步方法 |
+| popupHeight  | String   | 60%    | 当前弹出层内容的高度，默认为 '60%' |
+| popupStyle   | Object   | {}    | 当前弹出层内容的样式，默认为 {}      |
+| rules        | Object   |        | 校验规则                           |
+| isLink       | Boolean  | true   | 是否为链接类型                     |
+| isFullPopup  | Boolean  | false  | 是否为全屏显示popup,全屏显示关闭按钮在左侧，显示为箭头  |
+
+
+## 示例代码：
+```
+<template>
+  <fms-search-tips-new label="车牌号"
+                        ref="carNumber"
+                        v-model="model"
+                        input-align="right"
+                        url="vms.vehicle.listByPlateNumber"
+                        appkey="10184"
+                        class="search-tips-carNumber search-tips-carNumber-none"
+                        required
+                        :formatData="(data)=>{return {'plateNumber':data}}"
+                        :keys="['plateNumber']"
+                        :isLink="false"
+                        valueKey="plateNumber"
+                        placeholder="请扫描车牌号或查询历史车牌号"
+                        error-message-align="right"
+                        :getDefault="() => searchHistory(i)"
+                        @selectItem="(e) => carNumberSelect(e,  i)">
+    <van-icon name="scan"
+              class="icon-color"
+              slot="rightIcon"
+              style="display: inline-block;"
+              @click="e => scanClick(formModel.expenseDetailCommonList[i], 'carNumber', i, e)" />
+  </fms-search-tips-new>
+</template>
+
+<script>
+import { Toast } from 'vant';
+
+export default {
+  // ...属性和方法定义...
+};
+</script>
+
+```
+
+## fms-form-grid中添加了支持,配置示例如下
+```
+{
+  label: '原报销编码',
+  key: 'oldExpenseNumber',
+  component: 'search-tips-new',
+  show: () => vm.oldExpenseNumberShow,
+  componentProps: {
+    url: 'ers.customerExpense.overdueExemptionQuery',
+    inputLength: 16,
+    // 显示在输入框中的字段
+    valueKey: 'expenseNumber',
+    // keys 显示在下拉框中的字段
+    keys: ['expenseNumber', 'expenseRecordName', 'expenseAmount'],
+    message: '报销单据录入有误，请核实',
+    // 根据输入的值设置请求参数
+    formatData: val => {
+      let { guestDate } = vm.model || {}
+      return {
+        type: 3,
+        guestDate,
+        expenseNumber: val
+      }
+    },
+    appkey: '10214',
+    placeholder: '请选择原报销编码',
+    getDefault: async () => {
+      let { guestDate, consumptionAmount, customerNumber } = vm.model || {}
+      let params = {
+        type: 2,
+        guestDate,
+        consumptionAmount,
+        customerNumber,
+      }
+      const list = await vm.$http('ers.customerExpense.overdueExemptionQuery', 10214, params)
+      return list
+    },
+  },
+  componentListeners: {
+    select: (row) => {
+      let { expenseNumber, detailId } = row || {}
+      vm.model.oldId = detailId
+      vm.model.oldExpenseNumber = expenseNumber
+      vm.model.overdueExemptionType = expenseNumber ? '2' : ''
+    },
+  },
+  required: true,
+}
+```