@kyfe/fms-vue2-components 0.0.3 → 0.0.5

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

@@ -0,0 +1,699 @@
+<!--
+ * @Description: 渲染组件:根据配置生成对应的组件
+-->
+<template>
+  <div class="fms-component"
+       :class="[`fms-component_${col.key}`, getClass()]"
+       :style="bindProps().style">
+    <template v-if="col.component === 'van-field'">
+      <!-- 普通输入框:可以编辑-->
+      <van-field v-on="listeners"
+                 :class="col.class"
+                 v-bind="bindProps()"
+                 @input="formatter"
+                 :value="filter()">
+        <span class="flex-center"
+              slot="label">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+        <span slot="button">
+          <slot :name="col.slotButton"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotButton"></slot>
+        </span>
+      </van-field>
+    </template>
+    <template v-else-if="col.component === 'money'">
+      <van-field v-on="listeners"
+                 type="number"
+                 v-bind="bindProps()"
+                 @input="formatter"
+                 :value="filter()">
+        <span style="vertical-align: middle;"
+              slot="label">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+      </van-field>
+    </template>
+    <template v-else-if="col.component === 'date'">
+      <!-- 日期选择组件-旧 -->
+      <datetime-picker v-on="listeners"
+                       v-bind="bindProps()"
+                       @input="formatter"
+                       :value="filter()" />
+    </template>
+    <template v-else-if="col.component === 'date-minuteX'">
+      <!-- 新选择框，新ui样式-->
+      <datetime-picker-general v-on="listeners"
+                               v-bind="bindProps()"
+                               @confirm="formatter"
+                               :value="filter()" />
+    </template>
+    <template v-else-if="col.component === 'date-new'">
+      <!-- 日期选择组件-新(日历格式,但是只支持部分场景,没有旧的使用场景多) -->
+      <oa-datetime-picker-new v-on="listeners"
+                              v-bind="bindProps()"
+                              @input="formatter"
+                              :value="filter()">
+        <template #label>
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </template>
+      </oa-datetime-picker-new>
+    </template>
+    <template v-else-if="col.component === 'select'">
+      <!-- 下拉选择组件,支持多选和单选 -->
+      <fms-select :value="filter()"
+                  v-bind="bindProps()"
+                  @input="formatter"
+                  v-on="listeners" />
+    </template>
+    <template v-else-if="col.component === 'picker'">
+      <!-- 下拉选择组件,支持多选和单选 -->
+      <fms-picker :value="filter()"
+                  v-bind="bindProps()"
+                  @input="formatter"
+                  v-on="listeners" />
+    </template>
+    <template v-else-if="col.component === 'select-box'">
+      <!-- 直接在页面选择的选择组件 -->
+      <fms-select-box :value="filter()"
+                      v-bind="bindProps()"
+                      @input="formatter"
+                      v-on="listeners">
+        <template #label>
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </template>
+      </fms-select-box>
+    </template>
+    <template v-else-if="col.component === 'van-cell'">
+      <!-- 显示状态,不能编辑(适用于form界面) -->
+      <van-cell v-bind="bindProps()"
+                :value="filter()"
+                value-class="fms-van-cell">
+        <span slot="title">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.title || col.label}}</span>
+        </span>
+        <span v-if="col.isDecrypt"
+              class="value"
+              :class="{ link: col.isAllApply }"
+              v-on="listeners"
+              v-bind="bindProps()">
+          <decrypt :model="model"
+                   :decryptKey="col.key"
+                   :label="col.label"
+                   :value="filter()"
+                   @click="handlerClick"
+                   style="word-break: break-all"></decrypt>
+        </span>
+      </van-cell>
+    </template>
+    <template v-else-if="col.component === 'list-item'">
+      <!-- 另一种显示状态,不能编辑:适用于明细页面 -->
+      <div class="list-item"
+           :style="col.style ? { ...col.style } : {}">
+        <span class="label"
+              :style="col.labelStyle ? { ...col.labelStyle } : {}">{{col.label}}
+        </span>
+        <span class="value list-item-value"
+              :class="{ link: col.isAllApply || col.func, 'one-line': col.oneLine }"
+              v-on="listeners"
+              v-bind="bindProps()">
+          <ks-popover v-if="isShowPopover()"
+                      v-model="col.showPopover"
+                      theme="light"
+                      trigger="click"
+                      placement="top">
+            <div v-if="isShowPopover()"
+                 class="popover-text"
+                 style="padding: 8px; font-size: 14px; color: #333333;">
+              {{ bindShowPopoverText() }}
+            </div>
+            <template #reference>
+              <decrypt :model="model"
+                       :decryptKey="col.key"
+                       :label="col.label"
+                       :value="filter()"
+                       ref="decryptRef"
+                       @click="handlerClick"
+                       style="word-break: break-all"></decrypt>
+            </template>
+          </ks-popover>
+          <template v-else>
+            <decrypt :model="model"
+                     :decryptKey="col.key"
+                     :label="col.label"
+                     :value="filter()"
+                     ref="decryptRef"
+                     @click="handlerClick"
+                     style="word-break: break-all"></decrypt>
+          </template>
+        </span>
+        <div class="clipboard-wrap"
+             @click="pasteFn"
+             v-if="col.clipboard">
+          <img class="icon-clipboard"
+               src="@/assets/images/copy-icon.png">
+        </div>
+      </div>
+    </template>
+    <template v-else-if="col.component === 'search-tips'">
+      <fms-search-tips :value="filter()"
+                       v-bind="bindProps()"
+                       @input="formatter"
+                       v-on="listeners">
+        <span slot="label">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+      </fms-search-tips>
+    </template>
+    <template v-else-if="col.component === 'search-tips-new'">
+      <FmsSearchTipsNew :value="filter()"
+                        v-bind="bindProps()"
+                        @input="formatter"
+                        v-on="listeners">
+        <span slot="label">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+      </FmsSearchTipsNew>
+    </template>
+    <template v-else-if="col.component === 'user'">
+      <van-field v-bind="bindProps()"
+                 :value="filter()"
+                 value-class="fms-van-cell"
+                 right-icon="arrow"
+                 @clear="clearUser"
+                 @click="showEmployee = true">
+        <span slot="label">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+      </van-field>
+    </template>
+    <template v-else-if="col.component === 'org'">
+      <van-field v-bind="bindProps()"
+                 :value="filter()"
+                 value-class="fms-van-cell"
+                 right-icon="arrow"
+                 @click="showOrg = true"
+                 readonly>
+        <span slot="label">
+          <slot :name="col.slotLabel" :col="col" :model="model" :index="i" v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+      </van-field>
+    </template>
+    <template v-else-if="col.component === 'KsDecrypt'">
+      <div class="list-item">
+        <span class="label">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+        <span class="value decrypt-value">
+          <KsDecrypt :value="filter()"
+                     v-bind="bindProps()"
+                     @decryptData="onDecryptData"
+                     v-if="!decryptValue"></KsDecrypt>
+          <span v-else>{{decryptValue}}</span>
+        </span>
+      </div>
+    </template>
+    <template v-else-if="col.component === 'fmsClampText'">
+      <div class="list-item"
+           :style="col.style ? { ...col.style } : {}">
+        <span class="label"
+              :style="col.labelStyle ? { ...col.labelStyle } : {}">{{col.label}}
+        </span>
+        <span class="value decrypt-value">
+          <fmsClampText :value="filter()"
+                        v-bind="bindProps()"></fmsClampText>
+        </span>
+      </div>
+    </template>
+    <template v-else>
+      <component :is="col.component"
+                 :value="filter()"
+                 v-bind="bindProps()"
+                 @input="formatter"
+                 v-on="listeners">
+        <span slot="label">
+          <slot :name="col.slotLabel"
+                :col="col"
+                :model="model"
+                :index="i"
+                v-if="col.slotLabel"></slot>
+          <span v-else>{{col.label}}</span>
+        </span>
+      </component>
+    </template>
+  </div>
+</template>
+<script>
+  import { get, set } from 'lodash'
+  import * as filter from '@kyfe/fms-utils/filter'
+  import { isDecryptFieldPlus } from '@kyfe/fms-utils/decrypt'
+  import money from './money-directive'
+  import decrypt from '../decrypt/index.vue'
+  import DatePicker from '../date-picker/index.vue'
+  import DatetimePicker from '../oa-datetime-picker/index.vue'
+  import OaDatetimePickerNew from '../oa-datetime-picker-new/index.vue'
+  import DatetimePickerGeneral from "../datetime-picker-general/index.vue";
+  import KsDecrypt from '../ks-decrypt/index.vue'
+  import FmsSelect from '../fms-ks-select/fms-ks-select.vue'
+  import FmsPicker from '../fms-ks-picker/fms-ks-picker.vue'
+  import FmsSelectBox from '../fms-ks-select-box/fms-ks-select-box.vue'
+  import FmsSearchTips from '../fms-ks-search-tips/fms-ks-search-tips.vue'
+  import FmsSearchTipsNew from '../fms-ks-search-tips-new/fms-ks-search-tips-new.vue'
+  import FmsClampText from '../fms-ks-clamp-text/fms-ks-clamp-text.vue'
+
+  export default {
+    name: 'FmsKsComponents',
+    components: {
+      KsDecrypt,
+      decrypt,
+      DatePicker,
+      DatetimePicker,
+      OaDatetimePickerNew,
+      DatetimePickerGeneral,
+      FmsSelect,
+      FmsPicker,
+      FmsSelectBox,
+      FmsSearchTips,
+      FmsSearchTipsNew,
+      FmsClampText
+    },
+    directives: {
+      money
+    },
+    props: {
+      col: Object,
+      model: Object
+    },
+    data () {
+      return {
+        showEmployee: false,
+        showPopover: false,
+        showOrg: false,
+        decryptValue: '',
+        selectedOrg: {},
+        defaultOrgCheckedKeys: [],
+      }
+    },
+    computed: {
+      listeners () {
+        if (!this.col.component || this.col.component === 'van-cell') {
+          return {}
+        } else {
+          const _listeners = this.col.componentListeners || this.col.listeners || {}
+          return this.bindListeners(_listeners)
+        }
+      },
+      orgOption () {
+        const opt = get(this, 'col.componentProps.orgOption') || {}
+        return opt
+      }
+    },
+    methods: {
+      getClass () {
+        if (typeof this.col.class === 'function') {
+          return this.col.class()
+        }
+        return this.col.class
+      },
+      handlerClick () {
+        if (this.col.isAllApply && this.model[this.col.key]) {
+          this.$router.push(`/detail/${this.model[this.col.key]}?isFromAllApply=1`)
+        }
+        if (this.col.func && typeof this.col.func === 'function') {
+          this.col.func(this.model[this.col.key], this.col, this.model)
+        }
+      },
+      // 将['10']或'10'转为其在数据字典中对应的label,如果为数组,转为逗号隔开的串
+      lookup (val, list) {
+        // val 不能为 null 和 undefined 和 空字符串,可以为0
+        // console.log('val111', val, list)
+        if (list && (list.length > 0) && (val === 0 || val)) {
+          if (Array.isArray(val)) {
+            // 如果是多选,传进来是数组
+            const existList = list.filter(e => val.includes(String(e.code)) || val.includes(Number(e.code)))
+            const codeList = existList.map(item => item.text)
+            return codeList.join(',')
+          } else {
+            let { text } = list.find(x => String(x.code) === String(val)) || {}
+            return text || val
+          }
+        }
+      },
+      confirm (list) {
+        if (this.col.component === 'user') {
+          // 人员搜索选择事件
+          this.listeners
+          const { select } = this.listeners || {}
+          select && select(list[0])
+        }
+      },
+      clearUser () {
+        if (this.col.component === 'user') {
+          // 人员搜索选择事件
+          this.listeners
+          const { clear } = this.listeners || {}
+          clear && clear()
+        }
+      },
+      bindListeners (listeners) {
+        const _listeners = {}
+        Object.keys(listeners).forEach(key => {
+          _listeners[key] = listeners[key].bind(this)
+        })
+        return _listeners
+      },
+      bindProps () {
+        let props = {}
+        // componentProps中支持修改当前组件样式
+        let style = get(this.col, 'componentProps.style')
+        if (style) {
+          if (style instanceof Function) {
+            props.style = style()
+          } else {
+            props.style = style
+          }
+        }
+        const { label, lookupCode, componentProps = {}, component, required, headerTips, headerTipsIconStyle, key } = this.col
+
+        // 默认input靠右
+        props.inputAlign = 'right'
+        props.label = label
+
+        // 如果是van-field组件,把label赋值到title上
+        if (component === 'van-cell') {
+          props.title = label
+          props.label = ''
+        }
+
+        // 如果有数据字典
+        if (lookupCode) {
+          const lookupCodeMap = get(this, '$store.getters.lookUpOptions' , {})
+          // 把[{lable: '其他', value: '20'}] 转为 [{text: '其他', code: '20'}]格式
+          let columns = []
+          if (lookupCodeMap[lookupCode]) {
+            columns = lookupCodeMap[lookupCode].map(item => {
+              return {
+                text: item.label,
+                code: item.value
+              }
+            })
+          }
+          props.columns = columns
+          props.isLink = true
+        }
+
+        // 处理必填
+        let isRequired = required
+        if (typeof required === 'function') {
+          isRequired = required()
+        }
+        if (isRequired) {
+          props.required = true
+          const _message = componentProps.errorTip || componentProps.placeholder || `请选择`
+          // 之前不知道为什么这里要直接通过isRequired写死一个rules，导致配置的rules不生效
+          // 这里增加判断，避免覆盖用户自定义的rules
+          if (!componentProps.rules) {
+            props.rules = [{ required: true, message: _message }] // 必须写这个,校验时文字才会变红
+          }
+        }
+        // 解密组件处理
+        if (['KsDecrypt'].includes(component)) {
+          props.formData = this.model
+          props.fieldName = key
+          props.fieldNameStr = label
+          props.menuCode = {
+            moduleCode: 'OA',
+            moduleName: 'OA申请详情页'
+          }
+          props.isField = true
+        }
+
+        // 处理headertips,后续统一写在col.headerTips中
+        // 这里需要兼容部分历史写法,fms-select组件的提示信息写在了componentProps.tipText中
+        props.headerTips = headerTips || componentProps.tipText
+        props.headerTipsIconStyle = headerTipsIconStyle || componentProps.headerTipsIconStyle
+        // 这里需要兼容后续fms-select组件的提示信息写在col.headerTips中,实际fms-select组件内部使用的是tipText
+        props.tipText = headerTips
+
+        props = {
+          ...props,
+          ...componentProps
+        }
+        // 下拉选项的columns支持方法返回结果
+        if (typeof props.columns === 'function') {
+          props.columns = props.columns()
+        }
+        if (typeof props.disabled === 'function') {
+          props.disabled = props.disabled()
+        }
+        if (Array.isArray(props.columns)) {
+          props.isLink = true
+        }
+        if (component === 'date-minuteX') {
+          if (!props.minDate) {
+            // 类型为date-minuteX的,如果没有设置最小日期,默认最小是10年前, 根据月-日 周会存在重复的可能
+            let currentYear = new Date().getFullYear()
+            props.minDate = new Date(currentYear - 1, 0, 1)
+          }
+        }
+        if (Object.keys(props).includes('disabled')) {
+          // 如果props里包含disabled属性，且值为true,且isLink为true时，则设置isLink为false
+          if (props.disabled && props.isLink) {
+            props.isLink = false
+          }
+        }
+        // van-cell组件不需要展示箭头
+        if (component === 'van-cell') {
+          props.isLink = false
+        }
+        return props
+      },
+      filter () {
+        // select组件的处理
+        const { key, lookupCode, component, componentProps } = this.col
+        const value = get(this.model, key)
+        let columns = get(componentProps, 'columns')
+        if (lookupCode || Array.isArray(columns)) {
+          let list = get(this, `$store.getters.lookUpOptions.${lookupCode}`) || []
+          list = list.map(x => {
+            x.text = x.label
+            x.code = x.value
+            return x
+          })
+          return this.lookup(value, Array.isArray(columns) ? columns : list)
+        }
+        // 如果是van-field或list-item或van-cell,需要处理filter
+        if (value && ['van-field', 'list-item', 'van-cell'].includes(component) && this.col.filter && typeof this.col.filter === 'string') {
+          return filter[this.col.filter](String(value))
+        }
+        if (this.col.formatter) {
+          return this.col.formatter(value, this.model)
+        }
+        if (typeof this.col.filter === 'function') {
+          return this.col.filter(value, this.model)
+        }
+        return value
+      },
+      formatter (value) {
+        // TODO:这里需要加一个节流,输入停止后再处理
+        const { trim, number, formatter, key, component, componentProps = {} } = this.col
+        if (trim && typeof value !== 'object') {
+          value = trim(value)
+        }
+        if (number) {
+          value = Number(value)
+        }
+        if (component === 'ks-field-money' && value) {
+          value = Decimal(value).toFixed(componentProps.decimal || 2, Decimal.ROUND_DOWN)
+        }
+        const _value = formatter ? formatter(value, this) : value
+        set(this.model, key, _value)
+        // this.$emit('input', _value)
+      },
+      onDecryptData (val) {
+        this.decryptValue = val
+      },
+      pasteFn () {
+        window.ks.callFunc({ method: "paste", params: { str: this.bindClipboardValue() } }).then(() => {
+          vant.Toast("复制成功")
+        })
+      },
+      bindClipboardValue () {
+        if (this.col.clipboardValue) {
+          if (typeof this.col.clipboardValue === 'function') {
+            return this.col.clipboardValue(this.filter())
+          } else {
+            return this.col.clipboardValue
+          }
+        }
+        return this.filter()
+      },
+      isShowPopover () {
+        const isDecryptField = isDecryptFieldPlus(this.col.key, this.model)
+        // 加密状态的字段不展示Popover，否则会和解密点击事件重合
+        return this.col.showPopoverText && !isDecryptField
+      },
+      bindShowPopoverText () {
+        if (this.col.showPopoverText) {
+          if (typeof this.col.showPopoverText === 'function') {
+            return this.col.showPopoverText(this.filter())
+          } else {
+            return this.col.showPopoverText
+          }
+        } else {
+          return ''
+        }
+      },
+    }
+  }
+</script>
+<style lang="less"  scoped>
+  .fms-component {
+    .list-item {
+      display: flex;
+      // justify-content: space-between;
+      line-height: 20px;
+      margin-bottom: 10px;
+      padding: 0 16px;
+      font-size: 14px;
+      .label {
+        color: #858793;
+        width: 96px;
+        // word-break: break-all;
+        // display: flex;
+        // align-items: center;
+        // flex-shrink: 0;
+        overflow-wrap: break-word;
+      }
+      .value {
+        color: #000;
+        flex: 1;
+        &.link {
+          color: #8b60f0;
+        }
+        &.one-line {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          /deep/ .van-popover__wrapper {
+            display: flex;
+          }
+          .flow-fms-decrypt {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+        }
+      }
+      .clipboard-wrap {
+        padding-left: 2px;
+        line-height: 1;
+        margin-top: 2px;
+      }
+      .icon-clipboard {
+        width: 14px;
+        height: 14px;
+        margin-right: -4px;
+      }
+    }
+    .flex-center {
+      display: inline-flex;
+      align-items: center;
+    }
+    /deep/ .van-cell {
+      overflow: visible;
+      padding: 11px 16px;
+      &::after {
+        position: absolute;
+        box-sizing: border-box;
+        content: " ";
+        pointer-events: none;
+        right: 16px;
+        bottom: 0;
+        left: 16px;
+        border-bottom: 1px solid #ebedf0;
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+      }
+      .van-cell__label {
+        margin: 0;
+      }
+    }
+    .fms-van-cell {
+      flex: 1.5;
+    }
+    /deep/ .flow-fms-components-popover {
+      // display: inline-flex;
+      display: inline-block;
+      align-items: center;
+      margin-left: 2px;
+      .van-icon {
+        vertical-align: middle;
+      }
+      .van-popup {
+        max-height: max-content;
+        .van-popover__arrow {
+          left: 23%;
+        }
+      }
+    }
+    .decrypt-value .kts-decrypt {
+      /deep/ .van-field {
+        height: 20px !important;
+        &::after,
+        .van-field__label {
+          display: none;
+        }
+      }
+    }
+  }
+</style>