@kyfe/fms-vue2-components 0.0.2 → 0.0.4

package/src/components/decrypt/index.vue

@@ -0,0 +1,73 @@
+<!-- 解密组件 -->
+<template>
+  <span class="flow-fms-decrypt" :class="{ decrypt: isDecrypt}" @click="handlerDecrypt">{{value || model[decryptKey]}}</span>
+</template>
+<script>
+  export default {
+    name: 'decrypt',
+    props: {
+      model: {
+        type: String,
+        default: () => {}
+      },
+      decryptKey: {
+        type: String,
+        default: ''
+      },
+      label: {
+        type: String,
+        default: ''
+      },
+      value: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      isDecrypt() {
+        return this.decryptKey && this.model[`${this.decryptKey}Mask`]
+      }
+    },
+    methods: {
+      async handlerDecrypt(e) {
+        if (this.isDecrypt) {
+          vant.Dialog.confirm({
+            title: '温馨提示',
+            message: `如非必要请勿查看，此操作会联动风控系统监控！`
+          }).then(() => {
+            this.decrypt()
+          }).catch(() => {})
+        } else {
+          this.$emit('click', e)
+        }
+      },
+      async decrypt () {
+        try {
+          const val = await this.$http('syslog.sensitiveFieldViewLog.save', '10135', {
+            dataId: this.model.id || '0',
+            moduleCode: 'OA',
+            fieldName: this.decryptKey,
+            fieldContent: this.model[`${this.decryptKey}Mask`],
+            fieldNameStr: this.label,
+            buttonName: this.label
+          })
+          this.model[this.decryptKey] = val
+          //  delete 未触发isDecrypt，所以直接赋值位空
+          this.model[`${this.decryptKey}Mask`] = ''
+        } catch (error) {
+          console.log(error)
+        }
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+.flow-fms-decrypt {
+  &.decrypt {
+     color: #8b60f0;
+  }
+}
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="fms-block-title">
+    <div class="fms-block-title-text">
+      <div class="content">
+        <div :class="{ 'title-flag': titleFlag }">
+          <slot name="title">
+            <span class="title">{{title}}</span>
+          </slot>
+        </div>
+        <template v-if="$slots.right">
+          <slot name="right" />
+        </template>
+      </div>
+      <div v-if="showLine" class="split-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'FmsKsBlockTitle',
+    props: {
+      title: String,
+      showLine: {
+        type: Boolean,
+        default: true
+      },
+      titleFlag: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .fms-block-title {
+    height: 40px;
+    padding: 0 16px;
+    .fms-block-title-text {
+      position: relative;
+      height: 40px;
+      line-height: 39px;
+      font-size: 16px;
+      color: #333;
+      font-weight: 500;
+      text-align: left;
+      .content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .split-line {
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: #ededed;
+        box-shadow: 0px 0px 0px 0px #ededed inset;
+      }
+    }
+    .title-flag {
+      display: flex;
+      align-items: center;
+      &::before {
+        content: " ";
+        display: inline-block;
+        background: #7972fe;
+        width: 3px;
+        height: 14px;
+        // margin-top: 1px;
+        margin-right: 8px;
+      }
+    }
+  }
+</style>

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

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

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="flow-fms__full-text-box">
+    <div :class="['txt', { 'over-hidden': !unfold }]"
+         ref="textBox">
+      <span ref="spanBox">{{value}}</span>
+    </div>
+    <div class="btn"
+         v-if="ifOver"
+         @click="unfold = !unfold">{{unfold ? '收起' : '展开'}}</div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'FmsKsClampText',
+    data () {
+      return {
+        ifOver: false, // 文本是否超出2行，默认否
+        unfold: false // 文本是否是展开状态 默认为收起
+      }
+    },
+    props: {
+      value: {
+        type: String,
+        default: ""
+      }
+    },
+    watch: {
+      value: {
+        handler () {
+          this.setOver()
+        },
+        immediate: true
+      },
+    },
+    mounted () {
+      // 判断是否显示展开收起按钮
+      this.setOver()
+    },
+    methods: {
+      setOver () {
+        this.$nextTick(() => {
+          this.ifOver = this.$refs.spanBox.offsetHeight > this.$refs.textBox.offsetHeight
+        })
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .flow-fms__full-text-box {
+    .txt {
+      font-size: 14px;
+    }
+    .over-hidden {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+    .btn {
+      color: #7972fe;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+</style>
+

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

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