@kyfe/fms-vue2-components 0.0.2-beta.0

package/src/components/fms-ks-decrypt//346/225/217/346/204/237/347/233/221/346/216/247/347/273/204/344/273/266.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/fms-ks-file-upload/fms-ks-file-upload.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="ks-file-upload">
+    <div class="upload-title">
+      {{ titleName }}({{ value.length }}/{{ maxLength }})
+      <span class="required-tip" v-if="required">*</span>
+    </div>
+    <div class="van-uploader">
+      <div class="van-uploader__wrapper">
+        <div v-for="(item, index) of value" :key="index" class="van-uploader__preview">
+          <div
+            class="van-image van-uploader__preview-image"
+            style="overflow: hidden; border-radius: 4px; border: 1px solid #f2f0f4"
+          >
+            <img
+              :src="item.url"
+              @click="previewAssets(index, value)"
+              class="van-image__img"
+              style="object-fit: cover"
+            />
+          </div>
+          <img
+            v-if="!disabled && canDelete"
+            src="./assets/icon_close.png"
+            class="van-uploader__preview-delete"
+            @click="onDelete(index)"
+          />
+        </div>
+        <div
+          v-if="(maxLength && value.length < maxLength) || !maxLength"
+          class="van-uploader__upload"
+          @click="onPreview"
+        >
+          <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
+        </div>
+      </div>
+      <ks-action-sheet
+        v-model="show"
+        :actions="actions"
+        get-container="body"
+        cancel-text="取消"
+        @select="onSelect"
+        @cancel="onCancel"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+const Toast = window.vant && window.vant.Toast
+
+export default {
+  name: 'FmsKsFileUpload',
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    bizId: String,
+    bizCode: String,
+    maxLength: {
+      type: Number,
+      default: 9,
+    },
+    // 标题
+    titleName: {
+      type: String,
+      default: '附件',
+    },
+    // 自动获取该 bizId&bizCode 对应文件中心的文件
+    autoGetFile: {
+      type: Boolean,
+      default: false,
+    },
+    // 显示附件必填标识
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: Boolean,
+    canDelete: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      show: false,
+      actions: [],
+    }
+  },
+  watch: {
+    bizId: {
+      immediate: true,
+      handler(val) {
+        if (val && this.autoGetFile) {
+          this.getImageList()
+        }
+      },
+    },
+  },
+  created() {
+    if (window.isKsPcMiniProgram) {
+      // PC跨声环境，去掉拍照选项
+      this.actions = [{ name: '从相册选择' }]
+    } else {
+      this.actions = [{ name: '从相册选择' }, { name: '拍照' }]
+    }
+  },
+  methods: {
+    onPreview() {
+      if (this.disabled) {
+        return
+      }
+      this.show = true
+    },
+    onCancel() {
+      this.show = false
+    },
+    async onSelect(item) {
+      let fileList = null
+      try {
+        // NOTE: 此处原代码为 this.$store.commit('setPreviewFile', true)，因改为组件库，所以此处改为暴露事件 beforeSelect
+        this.$emit('beforeSelect', item)
+        if (item.name === '从相册选择') {
+          // 选择照片的数量( 默认可选9张图片 )
+          const totalCount = Number(this.maxLength - this.value.length)
+          fileList = await window.ks.callFunc({
+            method: 'pickAssets',
+            params: {
+              totalCount: totalCount,
+              allowRecordVideo: false,
+              selectType: 1,
+              quality: 80,
+            },
+          })
+        } else if (item.name === '拍照') {
+          fileList = await window.ks.takeByCamera()
+        }
+        this.onCancel()
+        if (this.maxLength && fileList.length > this.maxLength) {
+          Toast('选择文件太多')
+        } else {
+          this.upload(fileList)
+        }
+      } catch (error) {
+        console.info('onSelect--error', error)
+        if (error && error.msg) {
+          Toast(error.msg)
+        }
+        this.onCancel()
+      }
+    },
+
+    async getImageList() {
+      const imgList = await this.$http('file.getByBizCodeAndBizId', '10124', {
+        bizCode: this.bizCode,
+        bizId: this.bizId,
+      })
+      this.$emit('input', imgList)
+    },
+
+    onDelete(index) {
+      let list = JSON.parse(JSON.stringify(this.value))
+      let data = list[index]
+      list.splice(index, 1)
+      this.$emit('input', list)
+      this.$http('file.deleteByBizAndId', 10124, data)
+        .then((res) => {
+          this.$emit('deleteSuccess', res, data)
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    async upload(list) {
+      let res = await window.ks.uploadAssets({
+        filePaths: list.map((item) => item.filePath),
+        fileNames: list.map((item) => item.fileName),
+        bizCode: this.bizCode,
+        bizId: this.bizId,
+      })
+      this.$emit('input', res.reverse())
+      this.$emit('uploadSuccess')
+      this.onCancel()
+    },
+    previewAssets(index, list) {
+      // NOTE: 此处原代码为 this.$store.commit('setPreviewFile', true)，因改为组件库，所以此处改为暴露事件 beforePreviewAssets
+      this.$emit('beforePreviewAssets', {
+        index,
+        list,
+      })
+      let filePaths = list.map((item) => item.url)
+      window.ks.previewAssets({
+        index, // 默认从第几个资源开始浏览 index不能大于assetsPaths的长度
+        filePaths, // 接口返回的文件系统路径，或者本地路径
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.ks-file-upload {
+  padding: 12px 16px 16px 16px;
+  .upload-title {
+    font-size: 14px;
+    text-align: left;
+    color: #858793;
+    .required-tip {
+      margin-top: 2px;
+      color: #f99257;
+    }
+  }
+  .van-uploader {
+    padding: 0;
+    .van-uploader__wrapper {
+      margin-top: 12px;
+    }
+    .van-uploader__upload {
+      margin: 0;
+    }
+    .van-uploader__preview {
+      margin: 0 12px 8px 0;
+    }
+    .van-uploader__preview-image {
+      width: 52px;
+      height: 52px;
+    }
+    &__upload {
+      border: 0.5px dashed #c6c6d0;
+      background-color: #fff;
+      cursor: pointer;
+      border-radius: 4px;
+      width: 52px;
+      height: 52px;
+    }
+    &__preview-delete {
+      width: 18px;
+      height: 18px;
+      font-size: 18px;
+      top: -8px;
+      right: -8px;
+      bottom: unset;
+      border-radius: 100%;
+      background-color: #fff;
+      color: #969799;
+    }
+  }
+}
+</style>

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

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

package/src/components/fms-ks-file-view/assets/icon_default.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_通用文件</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单5已撤销" transform="translate(-47.000000, -1919.000000)" fill-rule="nonzero">
+            <g id="编组-9备份-2" transform="translate(0.000000, 1880.000000)">
+                <g id="icon_通用文件" transform="translate(47.000000, 39.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)">
+                        <path d="M36,9.67000003 L28.82,9.67000003 C27.7154305,9.67000003 26.82,8.77456952 26.82,7.67000002 L26.82,0 L2,0 C0.895430507,0 0,0.895430507 0,2 L0,38 C0.00223279535,38.5295769 0.214412225,39.0366497 0.590000016,39.41 C0.958779535,39.792325 1.4688337,40.0057519 2,40.0001134 L34,40.0001134 C35.1045695,40.0001134 36,39.1045695 36,38 L36,9.68000002 L36,9.67000003 Z" id="路径" fill="#978AF9"></path>
+                        <g id="编组-10" transform="translate(9.000000, 12.000000)">
+                            <path d="M8.7133758,7.36050955 C8.91974522,7.24585987 9.17197452,7.17707006 9.42420382,7.17707006 C9.67643312,7.17707006 9.92866242,7.24585987 10.1350318,7.36050955 L18.4127389,12.1528662 C18.6191083,12.2675159 18.7796178,12.5197452 18.7796178,12.7719745 C18.7796178,13.0242038 18.6420382,13.2764331 18.4127389,13.3910828 L10.066242,18.2292994 C9.85987261,18.343949 9.60764331,18.4127389 9.35541401,18.4127389 C9.10318471,18.4127389 8.85095541,18.343949 8.64458599,18.2292994 L0.366878981,13.4140127 C0.160509554,13.2993631 3.55271368e-15,13.0471338 3.55271368e-15,12.7949045 C3.55271368e-15,12.5426752 0.137579618,12.2904459 0.366878981,12.1757962 L8.7133758,7.36050955 L8.7133758,7.36050955 Z" id="路径" fill="#BAB0FF"></path>
+                            <path d="M8.7133758,0.18343949 C8.91974522,0.0687898089 9.17197452,-2.39808173e-14 9.42420382,-2.39808173e-14 C9.67643312,-2.39808173e-14 9.92866242,0.0687898089 10.1350318,0.18343949 L18.4127389,4.97579618 C18.6191083,5.09044586 18.7796178,5.34267516 18.7796178,5.59490446 C18.7796178,5.84713376 18.6420382,6.09936306 18.4127389,6.21401274 L10.066242,11.0522293 C9.85987261,11.166879 9.60764331,11.2356688 9.35541401,11.2356688 C9.10318471,11.2356688 8.85095541,11.166879 8.64458599,11.0522293 L0.366878981,6.25987261 C0.160509554,6.14522293 1.42108547e-14,5.89299363 1.42108547e-14,5.64076433 C1.42108547e-14,5.38853503 0.137579618,5.13630573 0.366878981,5.02165605 L8.7133758,0.18343949 L8.7133758,0.18343949 Z" id="路径" fill="#FFFFFF"></path>
+                        </g>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" fill="#BAB0FF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/fms-ks-file-view/assets/icon_excel.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_excel</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单支持附件显示" transform="translate(-47.000000, -1874.000000)" fill-rule="nonzero">
+            <g id="编组-9备份-2" transform="translate(0.000000, 1844.000000)">
+                <g id="icon_excel" transform="translate(47.000000, 30.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)">
+                        <path d="M36,9.67000003 L28.82,9.67000003 C27.7154305,9.67000003 26.82,8.77456952 26.82,7.67000002 L26.82,0 L2,0 C0.895430507,0 0,0.895430507 0,2 L0,38 C0.00223279535,38.5295769 0.214412225,39.0366497 0.590000016,39.41 C0.958779535,39.792325 1.4688337,40.0057519 2,40.0001134 L34,40.0001134 C35.1045695,40.0001134 36,39.1045695 36,38 L36,9.68000002 L36,9.67000003 Z" id="路径" fill="#5ACC9B"></path>
+                        <polygon id="路径" fill="#FFFFFF" points="16.2308917 20.8073248 11.3582803 14 14.7261146 14 17.9148089 18.8726115 21.2468153 14 24.5071656 14 19.5270701 20.8073248 24.7579618 28.044586 21.3542994 28.044586 17.8431529 22.8853503 14.3320064 28.080414 11 28.080414"></polygon>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" fill="#BDEBD7"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/fms-ks-file-view/assets/icon_ppt.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_ppt</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单支持附件显示" transform="translate(-47.000000, -1670.000000)" fill-rule="nonzero">
+            <g id="编组-9" transform="translate(0.000000, 1640.000000)">
+                <g id="icon_ppt" transform="translate(47.000000, 30.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)" fill="#F25B4C">
+                        <path d="M21.8,17.775625 C21.8,19.475625 20.8,20.285625 18.8,20.315625 L15.65,20.315625 L15.65,15.405625 L18.77,15.405625 C20.76,15.455625 21.73,16.215625 21.8,17.775625 Z" id="路径"></path>
+                        <path d="M36,9.68562502 L28.82,9.68562502 C27.7154305,9.68562502 26.82,8.79019451 26.82,7.685625 L26.82,0.0156249844 L2,0.0156249844 C0.895430507,0.0156249844 0,0.911055492 0,2.01562498 L0,38.015625 C0.00223279535,38.5452019 0.214412225,39.0522747 0.590000016,39.425625 C0.958779535,39.80795 1.4688337,40.0213769 2,40.0157383 L34,40.0157383 C35.1045695,40.0157383 36,39.1201945 36,38.015625 L36,9.695625 L36,9.68562502 Z M19.06,22.955625 L15.65,22.955625 L15.65,28.585625 L12.53,28.585625 L12.53,12.825625 L19.28,12.825625 C22.86,12.985625 24.78,14.615625 25,17.715625 C25,21.145625 22.94,22.895625 19.06,22.955625 Z" id="形状"></path>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" opacity="0.6"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/fms-ks-file-view/assets/icon_word.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_word</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单支持附件显示" transform="translate(-47.000000, -1772.000000)" fill-rule="nonzero">
+            <g id="编组-9备份" transform="translate(0.000000, 1742.000000)">
+                <g id="icon_word" transform="translate(47.000000, 30.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)">
+                        <path d="M26.82,0.0156249844 L26.82,7.685625 C26.82,8.79019451 27.7154305,9.68562502 28.82,9.68562502 L28.82,9.68562502 L36,9.68562502 L36,38.015625 C36,39.1201945 35.1045695,40.0157383 34,40.0157383 L34,40.0157383 L2,40.0157383 C1.4688337,40.0213769 0.958779535,39.80795 0.590000016,39.425625 C0.214412225,39.0522747 0.00223279535,38.5452019 0,38.015625 L0,38.015625 L0,2.01562498 C0,0.911055492 0.895430507,0.0156249844 2,0.0156249844 L2,0.0156249844 L26.82,0.0156249844 Z M11.2072929,14.0285714 L8.94375,14.0285714 L12.7234072,29.1142857 L14.7832928,29.1142857 L17.78535,18.0427428 L17.9211214,18.0427428 L20.9327786,29.1142857 L22.9830643,29.1142857 L26.7723214,14.0285714 L24.5087786,14.0285714 L21.9435214,25.5808 L21.80775,25.5808 L18.8632929,14.0285714 L16.8431786,14.0285714 L13.9186072,25.5808 L13.7828357,25.5808 L11.2072929,14.0285714 Z" id="形状" fill="#2C97FF"></path>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" fill="#80C0FF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>