@kyfe/fms-vue2-components 0.0.3 → 0.0.5

package/src/components/ks-decrypt/README.md

@@ -0,0 +1,140 @@
+#### 参数
+参数名 | 说明 | 类型 | 默认值 | 是否必须值
+-----------|--------|------|------|--
+v-model (value) | 当前输入的值| string, number  | - |-
+formData | 表单数据（或列表的行数据） | object | - | 是
+fieldName | 对应的后端字段名 | string | - |是
+fieldNameStr | 字段中文名称 | string | -|是
+idKey | 业务实体id的key |string  |id |是
+meunCode | {moduleCode：xx,  moduleName: xx} | object | -|是
+- | moduleCode：解密时菜单ID | string | - |是
+- | moduleName：当前模块名 | string | - |是
+isField | 是否是在表单中使用(为true时，可使用van-field的原生能力) |string  |false |-
+
+
+#### 事件
+事件名 | 说明
+-----------|--------
+input|	输入框内容变化时触发
+focus|	输入框获得焦点时触发
+blur|	输入框失去焦点时触发
+clear|	点击清除按钮时触发
+click-left-icon|	点击左侧图标时触发
+click-right-icon|	点击右侧图标时触发
+
+
+#### 用法
+```javascript
+<template>
+  <div>
+    <!-- 表单start -->
+    <ks-cell-group title="基础用法-表单">
+      <ks-decrypt v-model="formData.riskAmount"
+                  :meunCode="meunCode"
+                  :isField="true"
+                  :formData.sync="formData"
+                  fieldName='riskAmount'
+                  @blur="riskAmountBlur"
+                  placeholder="请输入用户名" />
+      <ks-decrypt v-model="formData.username"
+                  :isField="true"
+                  :meunCode="meunCode"
+                  :formData="formData"
+                  fieldName='username'
+                  required
+                  input-align="right"
+                  clearable
+                  label="解密可输入" />
+      <ks-decrypt v-model="formData.payLoanAmount"
+                  :isField="true"
+                  :meunCode="meunCode"
+                  :formData.sync="formData"
+                  disabled
+                  fieldName='payLoanAmount'
+                  type="digit"
+                  label="解密后禁用" />
+      <ks-decrypt v-model="formData.payLoan"
+                  :isField="true"
+                  :meunCode="meunCode"
+                  :formData.sync="formData"
+                  fieldName='payLoan'
+                  type="digit"
+                  label="敏感数据" />
+    </ks-cell-group>
+    <!-- 表单end -->
+
+    <!-- 列表start -->
+    <ks-cell-group title="列表中使用解密">
+      <div v-for="(item, index) in list"
+           :key="index">
+        <van-cell title="公司名称">
+          <ks-decrypt class="left"
+                      :value="item.username"
+                      :formData="item"
+                      idKey="id"
+                      fieldName="username"
+                      fieldNameStr="公司名称"
+                      :meunCode="meunCode"
+                      @decryptData="decryptData"></ks-decrypt>
+        </van-cell>
+      </div>
+    </ks-cell-group>
+
+    <!-- 列表end -->
+  </div>
+</template>
+
+<script>
+  import ksDecrypt from '../components/ks-decrypt';
+  export default {
+    name: "field",
+    data () {
+      return {
+        formData: {
+          riskAmount: '******',
+          riskAmountMask: 'ef2160623c6fd54a013e8ff9a379de9f',
+          username: '******',
+          usernameMask: '37e2e92d1007bb5a6fa66b98444fb3fd',
+          payLoanAmount: '******',
+          payLoanAmountMask: 'ef2160623c6fd54a013e8ff9a379de9f',
+          payLoan: '',
+          payLoanMaskSec: 'ef2160623c6fd54a013e8ff9a379de9f',
+        },
+        // 公共的菜单名称和模块编码（菜单ID）
+        meunCode: {
+          moduleCode: '00988d27e36247da91b4d5198e3d9517',
+          moduleName: '预存开户'
+        },
+        // 列表数据
+        list: [
+          {
+            username: '******',
+            usernameMask: '37e2e92d1007bb5a6fa66b98444fb3fd',
+            id: '111'
+          },
+          {
+            username: '',
+            usernameMaskSec: '37e2e92d1007bb5a6fa66b98444fb3fd',
+            id: '222'
+          },
+        ]
+      };
+    },
+    components: {
+      ksDecrypt
+    },
+    methods: {
+      riskAmountBlur (val) {
+        console.log('val', val)
+      },
+      clear () {
+        console.log('333333')
+      },
+      decryptData (val, key, id) {
+        console.log('val, key, id: ', val, key, id)
+      },
+    }
+  };
+</script>
+
+```

package/src/components/ks-decrypt/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <van-field v-if="isField"
+               v-model="value"
+               v-bind="$attrs"
+               @blur="handleBlur"
+               @input="handleInput"
+               @clear="handleClear"
+               @focus="handleFocus"
+               @click-left-icon="clickLeftIcon"
+               @click-right-icon="clickRightIcon">
+      <div v-if="maskFiled.mask"
+           slot="input"
+           class="ks-mobile-decrypt"
+           @click="decryptBtn">
+        {{ value }}
+      </div>
+      <div v-else-if="maskFiled.maskSec"
+           slot="input">
+        {{ maskSecDefault }}
+      </div>
+
+    </van-field>
+    <span v-else
+          :class="maskFiled.mask ? 'ks-mobile-decrypt' : ''"
+          @click="decryptBtn">{{maskFiled.maskSec ? maskSecDefault : value}}</span>
+  </div>
+</template>
+<script>
+  export default {
+    /**
+     * formData 表单数据@必填
+     * fieldName 对应的后端字段名@必填
+     * fieldNameStr 和label名称一致
+     * maskSecDefault 敏感字段默认显示的内容
+     * isField 是否是在表单中使用 默认为否
+     * idKey 解密时的dataId 作为列表数据的唯一标识
+     * meunCode: {
+     *  moduleCode 解密时菜单ID@必填
+     *  moduleName 当前模块名@必填
+     * }
+     */
+    props: {
+      value: [String, Number],
+      formData: Object,
+      // 绑定属性、字段
+      fieldName: String,
+      // 字段中文名
+      fieldNameStr: String,
+      maskSecDefault: {
+        type: String,
+        default: '✽✽✽'
+      },
+      isField: {
+        type: Boolean,
+        default: false
+      },
+      idKey: {
+        type: String,
+        default: 'id'
+      },
+      meunCode: {
+        type: Object,
+        default: () => {
+          return {
+            moduleCode: '',
+            moduleName: ''
+          }
+        }
+      }
+    },
+    computed: {
+      maskFiled () {
+        let mask = null
+        let maskSec = null
+        if (this.formData) {
+          let tempModel = this.formData
+          if (tempModel[this.fieldName + 'Mask'] && this.value.includes('***')) {
+            mask = tempModel[this.fieldName + 'Mask']
+          }
+          if (!tempModel[this.fieldName] && tempModel.hasOwnProperty(this.fieldName + 'MaskSec')) {
+            maskSec = 'maskSec'
+          }
+          tempModel = tempModel[this.fieldName]
+        }
+        return { mask, maskSec }
+      }
+    },
+    methods: {
+      isEmpty (val) {
+        return val === '' || val === null || val === undefined
+      },
+      // 创建随机ID 保证解密唯一值
+      createUuid () {
+        return Math.random().toString(36).substr(3)
+      },
+      decryptBtn () {
+        if (!this.maskFiled.mask) {
+          return
+        }
+        vant.Dialog.confirm({
+          title: '温馨提示',
+          message: `如非必要请勿查看，此操作会联动风控系统监控！`
+        }).then(() => {
+          this.decrypt()
+        }).catch(() => {
+        })
+      },
+      async decrypt () {
+        try {
+          let params = {
+            dataId: this.formData[this.idKey] || this.createUuid(),
+            moduleCode: this.meunCode.moduleCode,
+            fieldName: this.fieldName,
+            fieldContent: this.formData[this.fieldName + 'Mask'],
+            fieldNameStr: this.fieldNameStr,
+            buttonName: this.meunCode.moduleName
+          }
+          let res = await this.$http('syslog.sensitiveFieldViewLog.save', '10135', params)
+          this.value = res
+          this.$emit('input', res)
+          if (this.idKey !== '') {
+            this.$emit('decryptData', res, this.fieldName, this.formData[this.idKey])
+          }
+        } catch (err) {
+          console.log(err)
+        }
+
+      },
+      handleBlur () {
+        this.$emit('blur')
+      },
+      handleInput (val) {
+        this.$emit('input', val)
+      },
+      handleFocus (val) {
+        this.$emit('focus', val)
+      },
+      handleClear () {
+        this.$emit('clear')
+      },
+      clickLeftIcon () {
+        this.$emit('click-left-icon')
+      },
+      clickRightIcon () {
+        this.$emit('click-left-icon')
+      }
+    }
+  }
+</script>
+<style scoped>
+  .ks-mobile-decrypt {
+    color: #7972fe;
+  }
+</style>