n20-common-lib 1.3.8 → 1.3.11

package/nstc-g6/components/Form/UploadCustom/index.vue

@@ -0,0 +1,506 @@
+<template>
+  <div
+    :key="key"
+    :class="['upload-custom',{ 'is-multiple': multiple || valueClassification.img.length }]"
+    :style="{ width: `${_width}px` }"
+  >
+    <input
+      v-if="isChoosing"
+      ref="fileInput"
+      type="file"
+      :multiple="multiple"
+      @change="handleFileChange"
+    >
+    <el-button
+      v-if="!isView"
+      :loading="loading"
+      :icon="_icon"
+      :disabled="_disabled"
+      class="button-cancel"
+      @click="chooseFile"
+    >
+      <span>{{ text }}</span>
+    </el-button>
+
+    <template v-if="showFile">
+      <template v-if="!multiple && valueClassification.other.length">
+        <div
+          v-if="fileName"
+          class="upload-file-name"
+          :title="fileName"
+        >
+          {{ fileName }}
+        </div>
+        <el-button
+          v-if="fileName"
+          class="upload-file-delete"
+          type="text"
+          @click="handleClickFileBtn"
+        >
+          {{ fileBtnName }}
+        </el-button>
+      </template>
+      <template v-else>
+        <div class="upload-file-other">
+          <div
+            v-for="(item,index) in valueClassification.other"
+            :key="index"
+            class="upload-file-other-item"
+          >
+            <div
+              class="upload-file-name"
+              :title="item.fileName"
+            >
+              {{ item.fileName }}
+            </div>
+            <el-button
+              class="upload-file-other-delete"
+              type="text"
+              @click="handleClickFileBtn(item) "
+            >
+              {{ fileBtnName }}
+            </el-button>
+          </div>
+        </div>
+        <div class="upload-file-img">
+          <div
+            v-for="(item,index) in valueClassification.img"
+            :key="index"
+            class="upload-file-img-item"
+          >
+            <el-image
+              :src="item.fileUrl"
+              :preview-src-list="getPreviewSrcList(index)"
+            />
+            <img
+              v-if="!isView"
+              :src="closeImg"
+              alt="#"
+              @click="handleDelete(item)"
+            >
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import closeImg from './iconxitongshezhi-yichu.png'
+
+import request from '@/utils/request'
+// import OSS from 'ali-oss'
+
+export default {
+  name: 'UploadCustom',
+
+  inheritAttrs: false,
+
+  props: {
+    text: {
+      type: String,
+      default: function () {
+        return '请选择附件'
+      }
+    },
+
+    icon: {
+      type: String,
+      default: undefined
+    },
+
+    value: { // 值格式为单选{ fileName,fileUrl }/{ fileName,file },或者多选[{ fileName,fileUrl }]/[{ fileName,file }]
+      type: [Object, Array],
+      default: null
+    },
+
+    valueIsFileUrl: { // true时，值返回格式为{ fileName,fileUrl }；false时，值返回格式为{ fileName,file }（file为文件类型）
+      type: Boolean,
+      default: false
+    },
+
+    url: { // 上传到自定义服务器的url
+      type: String,
+      default: null
+    },
+
+    disabled: { // 是否禁用
+      type: Boolean,
+      default: false
+    },
+
+    showFile: { // 是否展示长传结果
+      type: Boolean,
+      default: true
+    },
+
+    validator: { // 上传前的验证，参数为typeCode（文件头前8位，用于检测文件真实格式）, raw（文件buffer对象）
+      type: Function,
+      default: null
+    },
+
+    beforeChooseFile: { // 选择文件前的前置函数
+      type: Function,
+      default: null
+    },
+
+    width: {
+      type: [String, Number],
+      default: undefined
+    },
+
+    max: { // 多选时，最大上传文件个数
+      type: Number,
+      default: 5
+    },
+
+    multiple: { // 是否支持多选
+      type: Boolean,
+      default: false
+    },
+
+    isView: { // 是否仅查看
+      type: Boolean,
+      default: false
+    },
+
+    storeAsPrefix: { // ali-oss上传路径前缀
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      key: `UploadCustomID-${Math.random()
+        .toString(36)
+        .slice(2)}`,
+
+      loading: false,
+      isChoosing: false,
+      revokeObjectURL: [],
+      closeImg
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      }
+    },
+
+    fileName() {
+      return !this.multiple && this._value && this._value.fileName
+        ? this._value.fileName
+        : ''
+    },
+
+    _width() {
+      return this.width ? (this.width + '').replace(/px/, '') : undefined
+    },
+
+    _icon() {
+      return this.icon ? this.icon : undefined
+    },
+
+    _disabled() {
+      return this.disabled || (Array.isArray(this._value) && this._value.length >= this.max)
+    },
+
+    valueClassification() {
+      const _value = this.multiple ? this._value : this._value ? [this._value] : []
+      const reg = /\.(png|jpg|gif|jpeg)$/
+
+      return _value.reduce((prev, file, index) => {
+        if (reg.test(file.fileName)) {
+          let fileUrl = ''
+
+          if (file.fileUrl) {
+            fileUrl = file.fileUrl
+          } else {
+            fileUrl = window.URL.createObjectURL(file.file)
+            this.revokeObjectURL.push(fileUrl)
+          }
+
+          prev.img.push({
+            fileUrl,
+            index,
+            ...file
+          })
+        } else {
+          prev.other.push({
+            ...file,
+            index
+          })
+        }
+
+        return prev
+      }, { img: [], other: [] })
+    },
+
+    getPreviewSrcList() {
+      return index => {
+        const imgUrls = this.valueClassification.img.map(item => item.fileUrl)
+
+        return imgUrls.slice(index).concat(imgUrls.slice(0, index))
+      }
+    },
+
+    fileBtnName() {
+      return this.isView ? '下载' : '删除'
+    }
+  },
+
+  beforeDestroy() {
+    this.revokeObjectURL.forEach(fileUrl => window.URL.revokeObjectURL(fileUrl))
+  },
+
+  methods: {
+    async chooseFile() {
+      try {
+        this.isChoosing = true
+        this.beforeChooseFile && await this.beforeChooseFile()
+
+        await this.$nextTick()
+
+        this.$refs.fileInput.click()
+      } catch (err) {
+        console.error(err)
+        // this.$$message(err)
+      }
+    },
+
+    async handleFileChange(e) {
+      this.loading = true
+      this.isChoosing = false
+
+      try {
+        const files = Array.from(e.target.files)
+
+        await this.fileMaxCheck(files)
+        await Promise.all(files.map(file => this.fileTypeCheck(file)))
+
+        const value = await Promise.all(files.map(file => this.singleFileUpload(file)))
+
+        this._value = this.multiple
+          ? [...this._value, ...value]
+          : value[0]
+      } catch (err) {
+        // this.$$message(err.reason || '上传失败')
+      }
+
+      this.loading = false
+    },
+
+    async singleFileUpload(file) {
+      try {
+        const fileName = file.name
+
+        if (this.valueIsFileUrl) {
+          let fileUrl = ''
+
+          if (this.url) {
+            const fd = new FormData()
+
+            fd.append('file', file)
+
+            fileUrl = await request.post(this.url, fd, {
+              headers: {
+                'Content-Type': 'multipart/form-data'
+              }
+            })
+          } else {
+            // const data = await request.post('/api/upload/auth') // 授权
+            // const client = new OSS({
+            //   endpoint: data.region,
+            //   accessKeyId: data.accessKeyId,
+            //   accessKeySecret: data.accessKeySecret,
+            //   stsToken: data.securityToken,
+            //   bucket: data.bucket
+            // })
+            //
+            // const _name = data.fileName + fileName.substring(fileName.lastIndexOf('.'), fileName.length)
+            //
+            // const storeAs = this.storeAsPrefix + new Date().getTime() + '/' + _name
+            // const { res } = await client.multipartUpload(storeAs, file, {
+            //   mime: 'application/octet-stream',
+            //   secure: true
+            // })
+            //
+            // fileUrl = res.requestUrls[0]
+            //
+            // if (fileUrl.indexOf('?') > 0) {
+            //   fileUrl = fileUrl.substring(0, fileUrl.indexOf('?'))
+            // }
+          }
+
+          return {
+            fileUrl,
+            fileName
+          }
+        }
+
+        return {
+          file,
+          fileName
+        }
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+
+    handleClickFileBtn(item) {
+      if (this.isView) {
+        window.open(item.fileUrl)
+      } else {
+        this.handleDelete(item)
+      }
+    },
+
+    handleDelete(item) {
+      if (this.multiple) {
+        this._value.splice(item.index, 1)
+      } else {
+        this._value = null
+      }
+    },
+
+    fileTypeCheck(raw) {
+      const _this = this
+
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+
+        reader.onload = async function(r) {
+          try {
+            const buffer = r.target.result
+            const dataview = new DataView(buffer)
+            const ints = new Uint16Array(buffer.byteLength)
+
+            for (let i = 0; i < 4; i++) {
+              ints[i] = dataview.getUint8(i)
+            }
+
+            const typeCode = ints
+              .reduce((acc, val) => acc + val.toString(16), '')
+              .slice(0, 8)
+              .toLowerCase()
+
+            if (typeof _this.validator === 'function') {
+              await _this.validator(typeCode, raw)
+            }
+
+            resolve()
+          } catch (err) {
+            reject(err)
+          }
+        }
+
+        reader.readAsArrayBuffer(raw)
+      })
+    },
+
+    fileMaxCheck(files) {
+      return new Promise((resolve, reject) => {
+        if (this.multiple && (files.length + this._value.length > this.max)) {
+          reject({ reason: `最多上传文件数：${this.max}` })
+        }
+
+        resolve()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+    .upload-custom {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        padding-right: 32px;
+        &.is-multiple {
+            display: inline-block;
+        }
+
+        .button-cancel {
+            flex: none;
+            padding: 0 15px 0 12px;
+            width: auto;
+            display: inline-flex;
+            align-items: center;
+            i {
+                margin-right: 6px;
+                font-size: 9px;
+            }
+        }
+
+        input {
+            display: none;
+        }
+
+        .upload-file {
+            &-name {
+                font-size: 14px;
+                padding-left: 10px;
+                flex: auto;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            &-delete {
+                position: absolute;
+                top: 9px;
+                right: 0;
+            }
+
+            &-other {
+                display: flex;
+                flex-wrap: wrap;
+                margin-top: 5px;
+                &-item {
+                    flex: none;
+                    display: flex;
+                    align-items: center;
+                    margin-right: 40px;
+                    .upload-file-name {
+                        padding-left: 0;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+            &-img {
+                display: flex;
+                margin-top: 5px;
+                flex-wrap: wrap;
+                &-item {
+                    flex: none;
+                    margin-right: 10px;
+                    position: relative;
+                    .el-image {
+                        width: 72px;
+                        height: 72px;
+                        background-color: #fff;
+                        border-radius: 2px;
+                        border: #CFD8E6;
+                    }
+                    & > img {
+                        position: absolute;
+                        right: 0;
+                        top: 0;
+                        width: 16px;
+                        height: 16px;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+    }
+</style>

package/nstc-g6/components/Form/configs.js

@@ -0,0 +1,191 @@
+/**
+ * [important] 请添加支持组件的类型的同时， 指定组件引入 和 对应组件默认状态值
+ */
+
+// const DatepickerCustom = () => import('./DatepickerCustom')
+// const InputCustom = () => import('./InputCustom')
+// const IntervalinputCustom = () => import('./IntervalinputCustom')
+// const AutocompleteCustom = () => import('./AutocompleteCustom')
+// const SelectCustom = () => import('./SelectCustom')
+// const SelectindialogCustom = () => import('./SelectindialogCustom')
+// const UploadCustom = () => import('./UploadCustom')
+// const RadioCustom = () => import('./RadioCustom')
+// const CheckboxCustom = () => import('./CheckboxCustom')
+// const CascaderCustom = () => import('./CascaderCustom')
+// const TextCustom = () => import('./TextCustom')
+// const nstcuploadCustom = () => import('../Upload/src/main')
+// const FormItemTips = () => ('../FormCreate/component/FormItemTips')
+// const FormTooltips = () => ('../FormCreate/component/FormTooltips')
+// const nstcselecttreeCustom = () => import('../SelectTree/src/main')
+
+
+import DatepickerCustom from './DatepickerCustom'
+import InputCustom from './InputCustom'
+import IntervalinputCustom from './IntervalinputCustom'
+import AutocompleteCustom from './AutocompleteCustom'
+import SelectCustom from './SelectCustom'
+import SelectindialogCustom from './SelectindialogCustom'
+import UploadCustom from './UploadCustom'
+import RadioCustom from './RadioCustom'
+import CheckboxCustom from './CheckboxCustom'
+import CascaderCustom from './CascaderCustom'
+import TextCustom from './TextCustom'
+import nstcuploadCustom from '^/Upload/src/main'
+import nstcselecttreeCustom from '^/SelectTree/src/main'
+import nstcselecttreelistCustom from '^/SelectTreeList/src/main'
+import nstcfileuploadCustom from '^/FileUpload/src/main'
+
+// 特殊的业务组件
+import inputwithunitCustom from '^/Form/BusinessSpecific/InputWithUnit'
+import inputmultipleCustom from '^/Form/BusinessSpecific/InputMultiple'
+import selecttreedialogCustom from '^/Form/BusinessSpecific/SelectTreeDialog'
+import selectaccountCustom from '^/Form/SelectAccount'
+import selectcashflowCustom from '^/Form/SelectCashFlow'
+import selectsubjectCustom from '^/Form/SelectSubject'
+import payeePersonSelect from '^/Form/payeePersonSelect'
+import inputAndDialog from '^/Form/InputAndDialog'
+
+
+// 定义支持的类型
+export const SUPPORT_TYPE = [
+  'datepicker',
+  'input',
+  'intervalinput',
+  'autocomplete',
+  'select',
+  'selectindialog',
+  'upload',
+  'radio',
+  'checkbox',
+  'cascader',
+  'text',
+  'nstcupload',
+  'nstcselecttree',
+  'nstcselecttreelist',
+  'nstcfileupload',
+  'inputwithunit',
+  'inputmultiple',
+  'selecttreedialog',
+  'selectaccount',
+  'selectcashflow',
+  'selectsubject'
+]
+
+// 支持的类型对应的组件
+export const components = {
+  SelectindialogCustom, // loop
+  SelectCustom,
+  DatepickerCustom,
+  InputCustom,
+  IntervalinputCustom,
+  AutocompleteCustom,
+  UploadCustom,
+  RadioCustom,
+  CheckboxCustom,
+  CascaderCustom,
+  TextCustom,
+  nstcuploadCustom,
+  nstcselecttreeCustom,
+  nstcselecttreelistCustom,
+  nstcfileuploadCustom,
+  inputwithunitCustom,
+  inputmultipleCustom,
+  selecttreedialogCustom,
+  selectaccountCustom,
+  selectcashflowCustom,
+  selectsubjectCustom,
+  payeePersonSelect,
+  inputAndDialog
+}
+
+// 支持的类型对应的默认值
+export function getDefaultValue({ mold, multiple, type, default: def }) {
+  let _def
+  mold = mold.replace(/ /g, '')
+  switch (mold) {
+    case 'select':
+    case 'selectindialog':
+    case 'nstcBankBanchTree':
+    case 'selecttreedialog':
+      _def = {
+        value: isEmpty(def) ? multiple ? [] : null : def
+      }
+      break
+
+    case 'input':
+    case 'autocomplete':
+    case 'text':
+    case 'nstcselecttree':
+    case 'nstcselecttreelist':
+    case 'selectaccount':
+    case 'selectcashflow':
+    case 'selectsubject':
+      _def = {
+        value: isEmpty(def) ? '' : def
+      }
+      break
+
+    case 'upload':
+      _def = {
+        value: isEmpty(def)
+          ? multiple
+            ? []
+            : null
+          : multiple
+            ? [...def]
+            : def
+      }
+      break
+
+    case 'checkbox':
+    case 'cascader':
+    case 'intervalinput':
+    case 'nstcupload':
+    case 'nstcfileupload':
+    case 'inputwithunit':
+    case 'inputmultiple':
+      _def = {
+        value: isEmpty(def) ? [] : [...def]
+      }
+      break
+
+    case 'radio':
+      _def = {
+        value: isEmpty(def) ? null : def
+      }
+      break
+
+    case 'datewmqy':
+    case 'datepicker':
+      _def = {
+        value: type && type.includes('range')
+          ? isEmpty(def) ? [] : [...def]
+          : isEmpty(def) ? null : def
+      }
+      break
+
+    case 'switch':
+      _def = {
+        value: isEmpty(def) ? false : def
+      }
+      break
+
+    case 'querybutton':
+    case 'addbutton':
+    case 'otherbutton':
+      _def = null
+      break
+
+    default:
+      alert(`未匹配到符合该类型${mold}的功能,请联系开发人员`)
+      _def = null
+      break
+  }
+
+  return _def
+}
+
+export function isEmpty(def) {
+  return def === null || def === undefined
+}
+