@kyfe/fms-vue2-components 0.0.3 → 0.0.4

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

@@ -0,0 +1,421 @@
+<template>
+  <div class="flow-fms-select-component">
+    <van-field :name="title"
+               error-message-align="right"
+               readonly
+               :required="required"
+               :rules="[{ required: required, message: `请选择${label}` }]"
+               :value="value"
+               :label="label"
+               v-bind="$attrs"
+               :placeholder="placeholder"
+               @click="openPicker">
+      <span slot="label" :class="{'tips-label': tipText||$attrs.headerTips}">
+        {{ label }}
+        <ks-popover v-if="tipText||$attrs.headerTips"
+                    v-model="showPopover"
+                    trigger='click'
+                    placement="bottom"
+                    theme="dark"
+                    get-container=".flow-fms-select-component"
+                    :offset="[60,10]">
+          <div v-html="tipText||$attrs.headerTips" style="font-size:14px;width: 300px;padding: 12px;line-height:20px;">
+          </div>
+          <template slot='reference'>
+            <van-icon name="question-o"
+                      style="color:#858793;" />
+          </template>
+        </ks-popover>
+      </span>
+    </van-field>
+    <van-popup v-model="show"
+               class="flow-fms-select-popup"
+               :class="{'is-custome-toolbar': customeToolbar}"
+               get-container="body"
+               position="bottom">
+      <!-- 新版样式 -->
+      <div v-if="customeToolbar">
+        <div class="fms-select__header">
+          <div v-if="customeToolbar"
+             class="custome-toolbar">
+            <strong>{{label}}</strong>
+            <van-icon name="cross"
+                      color="#A2A2AD"
+                      @click="show = false;" />
+          </div>
+          <div class="fms-select__search" v-if="search.show">
+            <ks-search
+              v-model.trim="searchValue"
+              v-bind="search.props"
+              @input="handleSearchInput"
+            />
+          </div>
+        </div>
+        <van-picker v-if="type === 'single'"
+                    :columns="columns"
+                    :title="label"
+                    @cancel="show = false"
+                    @confirm="onChange"
+                    ref="single" />
+        <div class="muiltiple"
+             v-else>
+          <div v-for="(col, i) in columnList" :key="col.code">
+            <van-cell
+                    v-if="col.show === undefined || col.show"
+                    clickable
+                    :title="col.text"
+                    :title-style="`${col.active ? 'color: #8b83ff' : ''}`"
+                    @click="clickHandle(col, i)"
+                    class="muiltiple-item">
+              <template #right-icon>
+                <van-checkbox v-model="col.active"
+                              ref="checkboxes"
+                              icon-size="16px"
+                              checked-color="#8b83ff" />
+              </template>
+            </van-cell>
+          </div>
+        </div>
+        <div class="custome-btn">
+          <div class="van-picker__selectAll"
+               v-if="showSelectAll && type === 'multiple'">
+            <van-checkbox v-model="selectAll"
+                          ref="checkboxes"
+                          icon-size="16px"
+                          checked-color="#8b83ff"
+                          @click="selectAllChange">全选</van-checkbox>
+          </div>
+          <van-button type="primary"
+                      class="btn"
+                      @click="customeConfirm">确定</van-button>
+        </div>
+      </div>
+      <!-- 旧版样式 -->
+      <div v-else>
+        <van-picker v-if="type === 'single'"
+                    :columns="columns"
+                    show-toolbar
+                    :title="label"
+                    @cancel="show = false"
+                    @confirm="onChange" />
+        <div class="muiltiple"
+             v-else>
+          <div class="van-hairline--top-bottom van-picker__toolbar">
+            <button type="button"
+                    class="van-picker__cancel"
+                    @click="show = false">取消</button>
+            <div class="van-ellipsis van-picker__title">
+              {{label}}
+            </div>
+            <button type="button"
+                    class="van-picker__confirm"
+                    @click="onChange">确认</button>
+          </div>
+          <div class="van-picker__columns">
+            <div class="van-picker-column">
+              <ul class="van-picker-column__wrapper">
+                <li role="button"
+                    tabindex="0"
+                    class="van-ellipsis van-picker-column__item van-hairline-unset--top-bottom"
+                    v-for="(col, i) in columnList"
+                    :key="col.code"
+                    @click="clickHandle(col, i)">
+                  <span>{{col.text}}</span>
+                  <van-icon v-show="col.active"
+                            name="success"
+                            class="selected-icon" />
+                </li>
+              </ul>
+            </div>
+            <!-- 这里是遮罩 -->
+            <!-- <div class="van-picker__mask"
+               style="background-size: 100% 88px;"></div> -->
+            <!-- <div class="van-hairline-unset--top-bottom van-picker__frame"
+               style="height: 44px;"></div> -->
+          </div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import { cloneDeep } from 'lodash'
+  import FmsPopover from '../fms-ks-popover/fms-ks-popover.vue'
+  export default {
+    name: 'FmsKsSelect',
+    components: {
+      FmsPopover
+    },
+    props: {
+      value: [String, Number, Array],
+      label: String,
+      placeholder: String,
+      required: Boolean,
+      tipText: String,
+      popoverStyle: {
+        type: Object,
+        default: () => { }
+      },
+      arrowStyle: {
+        type: Object,
+        default: () => { }
+      },
+      type: { // 单选与多选 'single' 'multiple'
+        type: String,
+        default: () => 'single'
+      },
+      columns: {
+        type: Array,
+        default: () => []
+      },
+      // 自定义picker顶部栏
+      customeToolbar: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示全选
+      showSelectAll: Boolean,
+      search: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    watch: {
+      value: {
+        handler () {
+          this.exchangeActiveOfList()
+        },
+        immediate: true
+      },
+      show (val) {
+        if (val) {
+          this.exchangeActiveOfList()
+        } else {
+          this.searchValue = ''
+          this.columnList.forEach(item => {
+            item.show = true
+          })
+        }
+      },
+      columns () {
+        this.columnList = cloneDeep(this.columns)
+      }
+    },
+    data () {
+      return {
+        showPopover: false,
+        show: false,
+        columnList: cloneDeep(this.columns),
+        selectAll: false,
+        searchValue: ''
+      }
+    },
+    methods: {
+      //点击提示
+      setPopoverOpt () {
+        console.log('1222--', this.showPopover)
+        this.showPopover = !this.showPopover
+      },
+      exchangeActiveOfList () {
+        if (this.type === 'multiple') {
+          const textList = this.value instanceof Array ? this.value : (this.value || '').split(',')
+          // // 形如 ['增值税', '其他']
+          // 将对应的columnList中的值切换为active
+          this.columnList.forEach(item => {
+            item.active = (textList.includes(item.text))
+          })
+        }
+      },
+      onChange (value) {
+        console.log('点击', this.columnList)
+        if (this.type === 'single') {
+          this.$emit('input', value && value.code)
+          this.$emit('blur')
+        } else {
+          // 如果是多选,将code以数组的形式传出去
+          const selectedList = this.columnList.filter(item => item.active)
+          console.log('selectedList', selectedList)
+          this.value = selectedList.map(item => item.text).join(',')
+          this.$emit('input', selectedList.map(item => item.code))
+          this.$emit('blur')
+        }
+        this.show = false
+      },
+      clickHandle (col, index) {
+        // TODO:没看懂,为什么第一次进来,第一次点击这里,会触发父组件的filter和bindProps方法重新执行
+        console.log('col', col, index)
+        const newCol = {
+          ...col,
+          active: !col.active
+        }
+        this.columnList.splice(index, 1, newCol)
+        this.selectAll = !this.columnList.some(x => !x.active)
+      },
+      customeConfirm () {
+        if (this.type === 'single') {
+          this.$refs.single.confirm()
+        } else {
+          this.onChange()
+        }
+      },
+      // 打开选择器，如果是禁用状态，则禁止打开
+      openPicker () {
+        this.$emit('openPicker')
+        if (!this.$attrs.disabled) {
+          this.show = true
+        }
+      },
+      selectAllChange () {
+        this.selectAll = !this.selectAll
+        this.columnList = this.columnList.map(x => {
+          x.active = this.selectAll
+          return x
+        })
+      },
+      handleSearchInput() {
+        this.columnList.forEach(item => {
+          if (!this.searchValue || item.text.includes(this.searchValue)) {
+            this.$set(item, 'show', true)
+          } else {
+            this.$set(item, 'show', false)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .flow-fms-select-component {
+    .van-cell: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);
+    }
+    /deep/ .van-popover {
+      .van-popover__arrow {
+        left: 30%;
+      }
+    }
+    
+    .tips-label {
+      display: inline-flex;
+      align-items: center;
+      ::v-deep .van-popover__wrapper {
+        margin-left: 2px;
+      }
+    }
+  }
+  .flow-fms-select-popup {
+    &.is-custome-toolbar {
+      border-radius: 12px 12px 0 0;
+      .van-icon-cross {
+        font-size: 16px!important;
+      }
+      .muiltiple {
+        max-height: 300px;
+        min-height: 100px;
+        overflow: auto;
+        margin-bottom: 2px;
+        .van-cell__title span {
+          word-break: break-all;
+        }
+      }
+    }
+    .fms-select__header {
+      border-bottom: 1px solid #ebedf5;
+    }
+    .custome-toolbar {
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+      strong {
+        font-size: 16px;
+        color: #333333;
+      }
+      .van-icon-cross {
+        font-size: 16px!important;
+      }
+    }
+    .custome-btn {
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      background: #fff;
+      padding-bottom: 24px;
+      padding-bottom: calc(constant(safe-area-inset-bottom) + 24px);
+      padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
+      .btn {
+        background: #7972fe;
+        border-radius: 8px;
+        color: #fff;
+        font-size: 16px;
+        flex: 2;
+        height: 40px;
+      }
+    }
+    .muiltiple {
+      /deep/ .van-checkbox__icon .van-icon {
+        width: 16px;
+        height: 16px;
+      }
+      .muiltiple-item {
+        padding: 12px 16px;
+        &::after {
+          left: 0px !important;
+          right: 0px !important;
+        }
+        /deep/ .van-cell__title {
+          font-size: 14px;
+          color: #333;
+        }
+      }
+    }
+    .van-picker__columns {
+      max-height: 200px;
+      height: auto !important;
+      .van-picker-column {
+        max-height: 200px;
+        overflow-y: auto;
+      }
+    }
+    .van-picker-column__item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      height: auto !important;
+      font-size: 14px;
+      span {
+        padding: 14px 0;
+        text-align: center;
+        width: calc(100% - 16px);
+        white-space: pre-wrap;
+        line-height: 1.2;
+        word-break: break-all;
+      }
+    }
+    .van-picker__selectAll {
+      display: flex;
+      align-items: center;
+      // margin-right: 24px;
+      flex: 1;
+      .van-checkbox {
+        width: 100%;
+      }
+    }
+    .selected-icon {
+      width: 16px;
+      color: #7972fe;
+    }
+  }
+</style>

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

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

package/src/components/fms-ks-select-box/fms-ks-select-box.vue

@@ -0,0 +1,84 @@
+<template>
+  <van-field class="fms-select-box"
+             :name="label"
+             input-align="right"
+             error-message-align="right"
+             readonly
+             :required="required"
+             :rules="[{ required: required, message: `请选择${label}` }]"
+             :value="value"
+             :label="label">
+    <template #label>
+      <slot name="label"/>
+    </template>
+    <template #input>
+      <!-- value{{value}}{{columns}} -->
+      <div class="list"
+           :value="value">
+           <!-- TODO:这里有点扯,页面选择后输出为10,但是最终拿到的是餐饮,所以这里需要通过item.text判断 -->
+        <div class="item"
+             :class="{active: value === item.text }"
+             v-for="item in columns"
+             :key="item.code"
+             @click="change(item.code, item.text)">
+          {{item.text}}
+        </div>
+      </div>
+    </template>
+  </van-field>
+</template>
+
+<script>
+  export default {
+    name: 'FmsKsSelectBox',
+    props: [
+      'value', 'required', 'label', 'columns'
+    ],
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+      change (code, text) {
+        console.log('val', code)
+        if (text !== this.value) {
+          this.$emit('input', code)
+          this.$emit('change', code)
+        } else {
+          this.$emit('input', code)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .fms-select-box {
+    /deep/ .van-field__label {
+      color: #858793;
+    }
+    .list {
+      display: flex;
+      .item {
+        // width: 64px;
+        height: 22px;
+        background: #f7f8fa;
+        border-radius: 16px;
+        font-size: 13px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: #1b2240;
+        line-height: 22px;
+        letter-spacing: -0.3px;
+        margin-left: 12px;
+        padding: 0 12px;
+        &.active {
+          background: #7972fe;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>

package/src/components/fms-ks-select-box/index.js

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

package/src/components/fms-ks-warn-drawer/fms-ks-warn-drawer.vue

@@ -0,0 +1,111 @@
+<!--预警组件-->
+<template>
+  <div class="flow-fms-warning-box">
+    <div class="flow-fms-warning-title">
+      <div class="flow-fms-title-text">
+        <img class="icon-waring" :src="require('@/assets/images/icon-forewarning.svg')">单据存在<span class="flow-fms-warning-number">1</span>项预警
+      </div>
+      <div @click="arrowClick" class="arrow-icon">
+        <img :class="{ 'closures': arrowShow }"
+            src="@/assets/images/icon-arrow.png"
+            class="arrow">
+      </div>
+    </div>
+    <div v-if="arrowShow"
+         class="flow-fms-warning-detail">
+      <div class="flow-fms-waring-present">预警信息供参考，请结合实际合理性审批</div>
+      <div class="title flow-fms-warning-content">{{ title }}</div>
+      <slot :warningInfos="warningInfos"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'FmsKsWarnDrawer',
+    props: ['warningInfos', 'warningColor', 'title'],
+    data () {
+      return {
+        arrowShow: false,
+      }
+    },
+    methods: {
+      arrowClick () {
+        this.arrowShow = !this.arrowShow
+      },
+    }
+  }
+</script>
+<style scoped lang="less">
+  .flow-fms-warning-box {
+    position: absolute;
+    bottom: 0;
+    z-index: 999;
+    width: 100%;
+    .flow-fms-warning-title {
+      border-radius: 10px 20px 0 0;
+      height: 36px;
+      background-color: #ffecec;
+      line-height: 36px;
+      font-size: 14px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      .arrow-icon {
+        width: 100px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      .flow-fms-title-text {
+        .flow-fms-warning-number {
+          color: #fd4948;
+          margin: 0 5px;
+        }
+        .icon-waring {
+          width: 12px;
+          margin-right: 4px;
+        }
+      }
+      .arrow {
+        display: block;
+        width: 17px;
+        height: 17px;
+        &.closures {
+          transform: rotate(180deg);
+        }
+      }
+    }
+    .flow-fms-warning-detail {
+      background-color: #ffffff;
+      padding: 8px 16px 10px 16px;
+      max-height: 55vh;
+      overflow: auto;
+      .flow-fms-waring-present {
+        font-size: 12px;
+        color: #6e6d72;
+      }
+      .flow-fms-warning-content {
+        font-size: 12px;
+        margin-top: 10px;
+        .red {
+          color: #fd4948;
+        }
+        .yellow {
+          color: #ffbb00;
+        }
+        .orange {
+          color: #ff7613;
+        }
+      }
+    }
+    .title {
+      font-size: 12px;
+      margin: 5px 0;
+      color: #fd4948;
+    }
+  }
+</style>

package/src/components/fms-ks-warn-drawer/index.js

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