@kyfe/fms-vue2-components 0.0.3 → 0.0.4

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

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

package/src/components/fms-ks-components/money-directive.js

@@ -0,0 +1,73 @@
+function getTextWidth (str, fontSize) {
+  var width = 0
+  var html = document.createElement('span')
+  html.innerText = str
+  html.style.fontSize = `${fontSize}px`
+  html.className = 'getTextWidth'
+  document.querySelector('body').appendChild(html)
+  width = document.querySelector('.getTextWidth').offsetWidth
+  document.querySelector('.getTextWidth').remove()
+  return width
+}
+
+export default {
+  update: function (el, binding, vNode) {
+    // 显示提示
+    // binding.value = 123
+    let data = binding.value
+    let oldData = binding.oldValue
+    const offset = el.querySelector('.van-cell__right-icon') ? 21 : 0
+    if (data.value === oldData.value) {
+      return // 新旧值相同
+    }
+    const integerLength = String(parseInt(data.value || 0)).length
+    const VERNIER_FONTSIZE = '8'
+    let content = ''
+    if (integerLength < 3) {
+      content = ''
+    } else if (integerLength >= 3 && integerLength < 4) {
+      content = '百'
+    } else if (integerLength >= 4 && integerLength < 5) {
+      content = '千'
+    } else if (integerLength >= 5 && integerLength < 6) {
+      content = '万'
+    } else if (integerLength >= 6 && integerLength < 7) {
+      content = '十万'
+    } else if (integerLength >= 7 && integerLength < 8) {
+      content = '百万'
+    } else if (integerLength >= 8) {
+      // 超长不能输入
+    }
+
+    let valuePixel = getTextWidth(data.value, 15)
+    let rightSpace = valuePixel + 8
+    if (content.length > 1) {
+      rightSpace = rightSpace - (content.length / 2) * VERNIER_FONTSIZE + 6
+    }
+    rightSpace = rightSpace + offset
+    const tag = Array.from(el.childNodes).find(item => item.className === 'tag')
+    const arrowStyle = 'width: 6px;height: 6px;text-align: center;border: .5px solid transparent;border-top: .5px solid #888;border-right: .5px solid #888;position:absolute;top:-7px;left:50%;transform: rotateZ(-45deg) translateX(-50%);'
+    if (tag) {
+      tag.style.right = `${rightSpace}px`
+      const innerText = content ? `${content}<div class="arrow"  style="${arrowStyle}"></div>` : ''
+      tag.innerHTML = innerText
+    } else if (content) {
+      const dom = document.createElement('div')
+      dom.style.color = '#666'
+      dom.style.fontSize = `${VERNIER_FONTSIZE}px`
+      dom.style.position = 'absolute'
+      dom.style.right = `${rightSpace}px`
+      dom.style.bottom = '3px'
+      // dom.style.border = '1px solid #666'
+      dom.style.lineHeight = `${VERNIER_FONTSIZE}px`
+      dom.classList.add('tag')
+      const innerText = content ? `${content}<div class="arrow"  style="${arrowStyle}"></div>` : ''
+      dom.innerHTML = innerText
+      el.appendChild(dom)
+    }
+  },
+  unbind () {
+    const tag = document.querySelector('.tag')
+    tag && tag.remove()
+  }
+}

package/src/components/fms-ks-components//350/241/250/345/215/225/351/205/215/347/275/256/347/273/204/344/273/266/350/257/264/346/230/216.md

@@ -0,0 +1,10 @@
+## 支持的功能
+1 支持加解密
+2 每个组件都支持传入headerTips
+3 支持传入slot label,自定义label
+
+## 标题popover的配置
+col.headerTips
+
+## 新增KsDecrypt支持
+支持敏感字段解密操作。

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

@@ -84,7 +84,8 @@ export default {
     canDelete: {
       type: Boolean,
       default: true
-    }
+    },
+    onPreviewBefore: Function, // 点击上传按钮之前的操作，可终止唤起弹框
   },
   data() {
     return {
@@ -112,6 +113,12 @@ export default {
   },
   methods: {
     onPreview() {
+      if (this.onPreviewBefore && typeof this.onPreviewBefore === 'function') {
+        const flag = this.onPreviewBefore()
+        if (flag) {
+          return
+        }
+        }
       if (this.disabled) {
         return
       }

package/src/components/fms-ks-form-grid/fields-conversion.js

@@ -0,0 +1,107 @@
+/*
+ * @Description: fms-form-grid.vue formFileds处理类
+ * @Date: 2024-07-18 10:35:05
+ */
+import { get } from 'lodash'
+
+export default class {
+  constructor(cols) {
+    this.cols = cols
+    return this.cols.reduce((acc, col) => {
+      let newCol = {
+        ...col,
+        component: this.getComponent(col),
+        componentProps: this.getComponentProps(col),
+        // 字段提示处理
+        headerTips: get(col, 'headerTips') || get(col, 'tipsContent'),
+        // 必填
+        required: this.getRequired(col),
+      }
+      acc.push(newCol)
+      return acc
+    }, [])
+  }
+  // 组件component处理
+  getComponent (col) {
+    let comp = get(col, 'component')
+    // 远程搜索处理
+    if (['kye-search-tips', 'fms-search-tips'].includes(comp)) {
+      comp = 'search-tips-new'
+    }
+    // 下拉选项处理
+    if (['kye-select', 'el-select'].includes(comp)) {
+      comp = 'select'
+    }
+    // 输入组件
+    if (['kye-input', 'el-input', 'kye-textarea', 'kye-number'].includes(comp)) {
+      comp = 'van-field'
+    }
+    // 日期组件,datetime用旧版组件，其它的用新版
+    if (['kye-date-picker', 'el-date-picker'].includes(comp)) {
+      let type = get(col, 'componentProps.type')
+      comp = type === 'datetime' ? 'date' : 'date-new'
+    }
+    return comp
+  }
+  // componentProps处理
+  getComponentProps (col) {
+    let props = get(col, 'componentProps') || {}
+    let maxlength = get(props, 'maxLength') || get(props, 'maxlength')
+    // options处理
+    let options = get(col, 'options')
+    let columns = null
+    if (typeof options === 'function') {
+      columns = options().map(x => {
+        return {
+          text: x.label,
+          code: x.value
+        }
+      })
+    }
+    // 是否显示全选
+    let showSelectAll = get(props, 'showSwitch')
+    // 是否显示数字统计
+    let showWordLimit = false
+    if (props.hasOwnProperty('showWordLimit') || props.hasOwnProperty('show-word-limit')) {
+      showWordLimit = props.showWordLimit || props['show-word-limit']
+    }
+    let obj = {
+      ...props,
+      maxlength,
+      showSelectAll,
+      type: this.getPropsType(col),
+      showWordLimit,
+    }
+    if (columns) {
+      obj.columns = columns
+    }
+    return obj
+  }
+  // 必填处理
+  getRequired (col) {
+    let required = get(col, 'required')
+    if (typeof required === 'boolean') {
+      return required
+    }
+    if (typeof required === 'function') {
+      return required()
+    }
+    let rules = get(col, 'rules')
+    return get(rules, '[0].required') || get(rules, 'required')
+  }
+  getPropsType (col) {
+    // 设置type
+    let comp = this.getComponent(col)
+    let props = get(col, 'componentProps') || {}
+    let type = get(col, 'componentProps.type')
+    if (comp === 'select') {
+      type = props.hasOwnProperty('multiple') || type === 'multiple' ? 'multiple' : 'single'
+    }
+    if (col.component === 'kye-number') {
+      let precision = get(props, 'precision')
+      // 精度为0是，设置type为digit,不为0时，设置为number
+      type = +precision === 0 ? 'digit' : 'number'
+    }
+    return type
+  }
+}

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

@@ -0,0 +1,127 @@
+<!--
+ * @Description: form组件集合:根据配置生成页面
+ * @Date: 2022-04-08 11:36:27
+-->
+<template>
+  <div class="flow-fms-form-grid">
+    <!-- <van-form validate-first ref="form"> -->
+    <template v-for="(col, i) in fields">
+      <template v-if="col.slot">
+        <slot :name="col.slot"
+              :props="col"></slot>
+      </template>
+      <template v-else-if="col.render">
+        <RenderComponent :render="col.render"
+                         :model="formModel || model"
+                         :col="col"
+                         :index="index"
+                         :key="col.key" />
+      </template>
+      <fms-component v-else
+                     :col="col"
+                     :model="formModel || model"
+                     :key="col.key"
+                     :index="i">
+        <template v-for="slot in Object.keys($slots)"
+                  :slot="slot">
+          <slot :name="slot"></slot>
+        </template>
+      </fms-component>
+    </template>
+    <!-- </van-form> -->
+  </div>
+</template>
+<script>
+  import { get } from 'lodash'
+  import FmsComponent from '../fms-ks-components/fms-ks-components.vue'
+  import FieldsConversion from './fields-conversion.js'
+
+  export default {
+    name: 'FmsKsFormGrid',
+    components: {
+      FmsComponent,
+      RenderComponent: {
+        functional: true,
+        props: { render: { type: Function, required: true } },
+        render (h, c) {
+          return c.props.render(h, c)
+        }
+      }
+    },
+    props: {
+      formFields: Array,
+      formModel: Object,
+      grid: Object,
+      model: Object,
+    },
+    computed: {
+      fields () {
+        let cols = get(this.grid, 'cols') || []
+        let fields = new FieldsConversion(this.formFields || cols)
+        // show处理
+        fields.map(x => {
+          if (typeof x.show === 'function') {
+            x.show = x.show(this.formModel)
+          }
+          // 不存在show属性时，默认show为true
+          if (!x.hasOwnProperty('show')) {
+            x.show = true
+          }
+          return x
+        })
+        // 过滤掉show为false列表
+        return fields.filter(x => x.show)
+      }
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+.flow-fms-form-grid {
+  // 时间实在不够优化，先用css的样式处理textarea的样式，后续有规范后再改成组件属性
+  /deep/ .fms-field-textarea {
+    display: block;
+    border-radius: 0 0 4px 4px;
+    &:after {
+      border: none !important;
+    }
+    .van-field__value {
+      border-radius: 4px;
+      background-color: #f7f8fa;
+      margin-top: 8px;
+      .van-field__body {
+        .van-field__control {
+          padding: 12px;
+        }
+        .van-field__right-icon {
+          position: absolute;
+          bottom: 0;
+          right: 16px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          padding: 0;
+        }
+      }
+      .van-field__word-limit {
+        margin-right: 10px;
+        color: #858793;
+        padding-bottom: 8px;
+      }
+    }
+  }
+  /deep/.van-cell--required:before {
+    content: none;
+  }
+  /deep/.van-cell--required .van-cell__title::after {
+    position: absolute;
+    margin-top: 2px;
+    margin-left: 4px;
+    color: #f99257;
+    font-size: 16px;
+    content: "*";
+  }
+}
+
+</style>
+

package/src/components/fms-ks-form-grid/index.js

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

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

@@ -0,0 +1,108 @@
+<template>
+  <div class="fms-more-lines-warp">
+    <div class="fms-more-lines">
+      <input id="exp" class="fms-more-lines_exp" type="checkbox">
+      <div class="fms-more-lines_text">
+        <label class="fms-more-lines_btn" for="exp"></label>
+      <span v-html="text"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FmsKsMoreLines',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.fms-more-lines-warp {
+  max-height: 220px;
+  overflow-y: auto;
+}
+.fms-more-lines {
+  display: flex;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #03050D;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 18px;
+  &_text {
+    overflow: hidden;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: justify;
+    position: relative;
+    line-height: 1.5;
+    max-height: 36px;
+    transition: .3s max-height;
+    word-break: break-all;
+    &::before {
+      content: '';
+      height: calc(100% - 18px);
+      float: right;
+    }
+    &:after {
+      content: '';
+      width: 999vw;
+      height: 999vw;
+      position: absolute;
+      box-shadow: inset calc(100px - 999vw) calc(18px - 999vw) 0 0 #fff;
+      margin-left: -100px;
+    }
+  }
+
+  &_btn {
+    position: relative;
+    float: right;
+    clear: both;
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    font-variation-settings: "opsz" auto;
+    color: #7972FE;
+    padding-left: 18px;
+    cursor: pointer;
+    &::after {
+     content: '展开'
+    }
+    &::before{
+      content: '...';
+      position: absolute;
+      left: 12px;
+      color: #333;
+      transform: translateX(-100%)
+    }
+  }
+  &_exp {
+    display: none;
+    &:checked+.fms-more-lines_text {
+      max-height: none;
+      &::after {
+        visibility: hidden;
+      }
+      &::before {
+        height: calc(100% - 17px);
+      }
+    }
+    &:checked+.fms-more-lines_text .fms-more-lines_btn {
+      padding-left: 0px;
+      &::before {
+        visibility: hidden;
+      }
+      &::after{
+        content:'收起';
+      }
+    }
+  }
+}
+</style>

package/src/components/fms-ks-more-lines/index.js

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

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

@@ -0,0 +1,153 @@
+<!--
+ * @Description: 需要满屏铺满的popup场景可以使用这个，从报销申请-草稿箱组件抽出来的
+-->
+<template>
+  <div class="flow-fms__page-popup">
+    <van-popup v-model="showDetailSelect"
+               class="apply-pop apply-style"
+               position="right"
+               get-container="#ksui-app"
+               :duration="isDraftRN ? 0 : 0.3"
+               :style="{width:'100%', height: '100%' }">
+      <div class="fms-popup-box">
+        <div class="fms-popup-header">
+          <div class="back-btn"
+               @click="back">
+            <van-icon size="24"
+                      style="padding-right: 5px;display: inline-block;vertical-align: middle;"
+                      name="arrow-left" />
+            {{ title }}
+          </div>
+        </div>
+        <div class="fms-popup-content">
+          <slot />
+        </div>
+        <!-- 用于处理异形屏 -->
+        <div class="fms-popup-inset-bottom"></div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'FmsKsPagePopup',
+    model: {
+      prop: 'show',
+      event: 'update:show'
+    },
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      isDraftRN: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      showDetailSelect: {
+        get () {
+          return this.show
+        },
+        set (val) {
+          this.$emit('update:show', val)
+        }
+      },
+    },
+    data () {
+      return {
+        isNoData: false,
+      }
+    },
+    methods: {
+      back () {
+        if (this.isDraftRN) {
+          ks.forceBack()
+        } else {
+          this.$emit('update:show', false)
+        }
+      },
+      closePop () {
+        this.$emit('update:show', false)
+      },
+    },
+  }
+
+</script>
+
+<style lang="less" scoped>
+  .ios .fms-popup-header {
+    padding-top: 20px !important;
+  }
+  // 不同机型的特殊样式处理,状态栏额头的高度不同
+  .ipx {
+    .fms-popup-header {
+      padding-top: 46px !important;
+    }
+  }
+  .ipx .fms-footer-btn {
+    padding-bottom: 24px;
+  }
+
+  .ipx .fms-popup-box .invoice-folder__btn {
+    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
+  }
+  .fms-popup-box {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: #f3f4f6;
+    .fms-popup-header {
+      width: 100%;
+      font-weight: 500;
+      display: flex;
+      flex-shrink: 0;
+      padding: 0 16px 17px 16px;
+      font-size: 18px;
+      justify-content: space-between;
+      align-items: center;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      background-color: #7972fe;
+      color: #fff;
+
+      .back-btn {
+        display: flex;
+        align-items: center;
+        height: 44px;
+      }
+      .img-box {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        line-height: 40px;
+      }
+      img {
+        width: 22px;
+        height: 22px;
+      }
+    }
+    font-size: 12px;
+    .fms-popup-content {
+      flex-grow: 1;
+      overflow: scroll;
+    }
+    .fms-popup-inset-bottom {
+      width: 100%;
+      height: 0;
+      background: #f3f4f6;
+      padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
+      padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
+    }
+  }
+</style>

package/src/components/fms-ks-page-popup/index.js

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