@kyfe/fms-vue2-components 0.0.3 → 0.0.4

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

@@ -0,0 +1,242 @@
+<template>
+  <div class="fms-search-tips-new">
+    <van-field @click="showPopup"
+               :required="required"
+               :inputAlign="inputAlign"
+               :placeholder="placeholder"
+               :value="value"
+               :rules="rules"
+               :label="label"
+               :maxlength="maxlength"
+               :is-link="isLink"
+               readonly>
+      <template slot="label"
+                v-if="$slots.label">
+        <slot name="label"></slot>
+      </template>
+      <template slot="right-icon"
+                v-if="$slots.rightIcon">
+        <slot name="rightIcon"></slot>
+      </template>
+    </van-field>
+    <van-popup v-model="show"
+               position="bottom"
+               :style="{ height: isFullPopup ? '100%' : popupHeight, ...popupStyle }"
+               :get-container="getContainer"
+               class="fms-search-tips-new__content"
+               :class="{'is-full-popup': isFullPopup}"
+               @opened="onOpened"
+               @close="onClose">
+      <div class="fms-search-tips-new__content-title close-left"
+           v-if="isFullPopup">
+        <van-icon name="arrow-left"
+                  color="#333"
+                  size="20"
+                  @click="hidePopup" />
+        {{label}}
+      </div>
+      <div class="fms-search-tips-new__content-title"
+           v-else>
+        {{label}}
+        <van-icon name="cross"
+                  color="#A2A2AD"
+                  @click="hidePopup" />
+      </div>
+      <form action="/">
+        <ks-input-search class="fms-search-tips-new__content-search"
+                         :class="{'has-action': $scopedSlots.action}"
+                         :placeholder="placeholder"
+                         :show-action="$scopedSlots.action ? true : false"
+                         ref="search"
+                         :maxlength="maxlength"
+                         v-model="searchStr"
+                         @change="onChange">
+          <slot name="action"
+                :input="searchStr"
+                :close="hidePopup"
+                slot="action" />
+        </ks-input-search>
+      </form>
+      <slot :list="searchList"
+            :input="searchStr"
+            :loading="loading"></slot>
+      <template v-if="!$scopedSlots.default">
+        <div class="fms-search-tips-new__content-current"
+             v-if="value">
+          <div class="current-title">当前选择</div>
+          <div class="current-value">
+            <span class="current-value__text">{{value}}</span>
+            <i class="current-value__line" />
+            <van-icon name="cross"
+                      color="#A2A2AD"
+                      @click="onClear"
+                      class="currnet-value__icon" />
+          </div>
+        </div>
+        <div class="fms-search-tips-new__content-list">
+          <div v-if="loading"
+               class="fms-search-tips-new__content-loading">
+            <van-loading size="36px"></van-loading>
+          </div>
+          <div v-for="item in searchList"
+               :key="item[valueKey]"
+               class="list-item"
+               @click="onSelect(item)"
+               v-else>
+            {{getValue(item)}}
+          </div>
+        </div>
+      </template>
+    </van-popup>
+  </div>
+</template>
+<script>
+  const Toast = window.vant && window.vant.Toast
+  export default {
+    name: 'FmsKsSearchTipsNew',
+    props: {
+      label: String, // 输入框的label值
+      disabled: Boolean, // 是否禁用
+      formatData: Function, // 模糊搜索入参格式化方法
+      formatResult: Function, // 搜索结果格式化方法
+      inputAlign: String, // 输入框内容对齐
+      inputLength: { // 触发查询的最小长度
+        type: Number,
+        default: 2
+      },
+      keys: Array, // 搜索结果显示的字段集合
+      message: String, // 搜索结果为空时的提示
+      placeholder: String, // placeholder
+      required: Boolean, // 是否必填
+      url: String, // 搜索请求的url
+      value: String, // 当前字段的值
+      valueKey: String, // 显示在输入框的字段key
+      appkey: String, // appkey
+      getDefault: Function, // 打开搜索框的默认数据方法,异步方法,
+      popupHeight: { // 当前popup内容的高度,默认60%
+        type: String,
+        default: () => '60%'
+      },
+      popupStyle: {
+        type: Object,
+        default: () => ({})
+      },
+      rules: Object, // 校验规则
+      isLink: {
+        type: Boolean,
+        default: () => true,
+      },
+      noEmptyMessage: Boolean,
+      isFullPopup: Boolean, // 是否是全屏
+      maxlength: -1
+    },
+    data () {
+      return {
+        show: false,
+        searchStr: '',
+        searchList: [],
+        loading: false,
+      }
+    },
+    methods: {
+      showPopup () {
+        if (this.disabled) return
+        this.show = true
+      },
+      hidePopup () {
+        this.show = false
+      },
+      async onOpened () {
+        // 输入框获得焦点
+        let $el = this.$refs.search.$el
+        if ($el) {
+          let $input = $el.querySelector("input")
+          $input.focus()
+        }
+        if (this.getDefault) {
+          try {
+            this.loading = true
+            this.searchList = await this.getDefault()
+          } catch (e) {
+            console.error(e)
+          } finally {
+            this.loading = false
+          }
+        }
+      },
+      // 清空搜索结果及搜索条件
+      onClose () {
+        this.searchList = []
+        let $search = this.$refs.search
+        let $el = $search.$el
+        let $input = $el.querySelector('input')
+        $input.value = ''
+        this.searchStr = ''
+        $search.inputValue = ''
+      },
+      async onChange (val) {
+        let len = val.length
+        this.searchStr = val
+        if (len === 0) return
+        if (len >= this.inputLength && this.url && this.appkey) {
+          try {
+            this.loading = true
+            let params = this.formatData(val)
+            let res = await this.$http(this.url, this.appkey, params) || []
+            res = this.formatResult ? this.formatResult(res, val) : res
+            if (res.length === 0 && !this.noEmptyMessage) {
+              Toast(this.message || '搜索结果为空')
+            }
+            this.searchList = res
+          } catch (e) {
+            this.onClose()
+          } finally {
+            this.loading = false
+          }
+        } else {
+          Toast(`字数不少于${this.inputLength}`)
+        }
+      },
+      // 获取显示行的值
+      getValue (row) {
+        let values = this.keys.reduce((acc, item) => {
+          acc.push(row[item])
+          return acc
+        }, [])
+        return values.join(', ')
+      },
+      onSelect (row) {
+        this.$emit('select', row)
+        this.$emit('selectItem', row)
+        this.hidePopup()
+        this.onClose()
+      },
+      onClear () {
+        this.$emit('selectItem', null)
+        this.$emit('select', null)
+        this.hidePopup()
+      },
+      getContainer () {
+        return document.body
+      },
+    }
+  }
+</script>
+<style lang="less" scoped src="./style.less"></style>
+<style lang="less">
+  .ios {
+    .fms-search-tips-new__content {
+      &.is-full-popup {
+        padding-top: 20px !important;
+      }
+    }
+  }
+
+  .ipx {
+    .fms-search-tips-new__content {
+      &.is-full-popup {
+        padding-top: 46px !important;
+      }
+    }
+  }
+</style>

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

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

package/src/components/fms-ks-search-tips-new/style.less

@@ -0,0 +1,137 @@
+.fms-search-tips-new {
+  /deep/ .van-cell__value {
+    overflow: initial;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    border-radius: 12px 12px 0 0;
+    font-size: 14px;
+    overflow: hidden;
+
+    &-title {
+      height: 48px;
+      color: #333;
+      font-weight: bold;
+      padding: 0 16px;
+      border-bottom: 1px solid #ebedf5;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+      flex-grow: 0;
+      font-size: 16px;
+
+      .van-icon {
+        cursor: pointer;
+      }
+
+      &.close-left {
+        justify-content: flex-start;
+
+        .van-icon {
+          margin-right: 8px;
+        }
+      }
+    }
+
+    &-search {
+      flex-shrink: 0;
+      flex-grow: 0;
+      padding: 8px 16px !important;
+
+      /deep/ .van-cell {
+        background-color: transparent !important;
+
+        .van-field__body {
+          padding-left: 0;
+        }
+      }
+
+      &.has-action {
+        /deep/ .van-search__content {
+          border-radius: 8px 0 0 8px !important;
+        }
+
+        /deep/ .van-search__action {
+          padding: 0;
+          height: 100%;
+
+          .van-button {
+            border-radius: 0 8px 8px 0 !important;
+            height: 36px;
+          }
+        }
+      }
+    }
+
+    &-loading {
+      display: flex;
+      justify-content: center;
+      padding: 12px 0;
+    }
+
+    &-current {
+      flex-shrink: 0;
+      flex-grow: 0;
+      margin: 0 16px;
+      border-bottom: 1px solid #ebedf5;
+
+      .current-title {
+        color: #1a1a1a;
+        font-weight: bold;
+      }
+
+      .current-value {
+        height: 36px;
+        line-height: 36px;
+        border-radius: 18px;
+        background: #f7f8fa;
+        display: inline-flex;
+        padding: 0 12px;
+        align-items: center;
+        margin: 8px 0;
+        max-width: 100%;
+        overflow: hidden;
+
+        &__text {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &__line {
+          width: 1px;
+          height: 12px;
+          opacity: 1;
+          flex-grow: 0;
+          flex-shrink: 0;
+          background: #d7d7db;
+          margin: 0 8px;
+        }
+
+        &__icon {
+          flex-grow: 0;
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    &-list {
+      padding: 0 16px;
+      overflow: auto;
+      height: 0;
+      flex: 1;
+      -webkit-overflow-scrolling: touch;
+
+      .list-item {
+        line-height: 1.2;
+        padding: 12px 0;
+        color: #333;
+        word-break: break-all;
+      }
+    }
+  }
+}

package/src/components/fms-ks-search-tips-new//350/277/234/347/250/213/346/220/234/347/264/242-/346/226/260.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,
+}
+```