t20-common-lib 0.15.21 → 0.15.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.15.21",
+  "version": "0.15.23",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/dynamic-form/api/fileApi.js

@@ -0,0 +1,12 @@
+/**
+ * 电子档案 / 附件相关接口（与 Demo DynamicForm 一致）
+ */
+import service from '../../../src/utils/request'
+
+export function getByBussValue(data = {}) {
+  return service.post(`/api/neams/eamsattachfile/getByBussValue`, data)
+}
+
+export function getUploadedFile(data = {}) {
+  return service.post(`/api/neams/eamsbaserecord/queryList`, data)
+}

package/packages/dynamic-form/mixins/fileUpload.js

@@ -0,0 +1,243 @@
+import axios from 'axios'
+import { getByBussValue, getUploadedFile } from '../api/fileApi'
+
+function randomString(num) {
+  num = num || 32
+  const t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
+  const a = t.length
+  let n = ''
+  for (let i = 0; i < num; i++) n += t.charAt(Math.floor(Math.random() * a))
+  return n
+}
+
+function getBearerToken() {
+  return sessionStorage.getItem('token') || ''
+}
+
+export const fileUploadTableMixin = {
+  data() {
+    return {
+      fileUploadTableData: [],
+      fileAction: '/api/neams/eamsbaserecord/save',
+      seeTypes: /\.(jpg|png|gif|svg|pdf|swf|xlsx|xls|docx|doc)$/i,
+      dataPorp: {
+        fileAccept: '.rar,.zip,.doc,.docx,.pdf,image/*,.xls,.xlsx',
+        typeOptions: [],
+        multiple: false
+      },
+      mapdata: {}
+    }
+  },
+  methods: {
+    addRow() {
+      this.fileUploadTableData.splice(0, 0, {
+        id: 'n' + Math.random(),
+        type: '',
+        name: '',
+        time: '',
+        user: '',
+        _fileData: {}
+      })
+    },
+    downRows(rows) {
+      if (!rows || rows.length === 0) return this.$message.error('请选择数据')
+      const token = getBearerToken()
+      rows.map(item => {
+        axios({
+          method: 'POST',
+          url: '/api/neams/eamsbaserecord/downloadFile',
+          responseType: 'blob',
+          headers: {
+            charset: 'utf-8',
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+            timestamp: Date.now(),
+            OperationDesc: 'yYarJp',
+            requestKey: randomString(16)
+          },
+          data: { beid: item.beid }
+        })
+          .then(response => {
+            const resp = response.data
+            if (resp.type === 'application/octet-stream') {
+              if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                const blob = new Blob([resp], { type: 'application/zip' })
+                window.navigator.msSaveOrOpenBlob(blob, item.name)
+              } else {
+                const blob = new Blob([resp], { type: 'application/zip' })
+                const url = window.URL.createObjectURL(blob)
+                const link = document.createElement('a')
+                link.href = url
+                link.download = item.name
+                link.click()
+                URL.revokeObjectURL(url)
+              }
+            } else {
+              this.$message.error((this.$t && this.$t('common_w_0094')) || '下载失败' + '!')
+            }
+          })
+          .catch(error => this.$message.error(error))
+      })
+    },
+    deleteRows(rows) {
+      rows.forEach(row => {
+        const index = this.fileUploadTableData.findIndex(r => r.id === row.id)
+        if (index > -1 && !row.notBeDelete) {
+          this.fileUploadTableData.splice(index, 1)
+          this.$message.success('删除成功')
+        }
+      })
+    },
+    uploadRequest(options, row) {
+      const token = getBearerToken()
+      const { file } = options
+      const data = new FormData()
+      data.append('file', file)
+      const uploadParam = this.uploadParam || {}
+      data.append(
+        'data',
+        JSON.stringify({
+          syscode: uploadParam.syscode,
+          appno: uploadParam.appno,
+          bussValue: this.mapdata[row.type],
+          attno: row.type,
+          bussId:
+            uploadParam && uploadParam.paymentTemplate === 'REQUEST_PAYOUT' ? '' : uploadParam.bussId,
+          cltno: JSON.parse(sessionStorage.getItem('userInfo') || '{}').cltNo,
+          memo: file.name,
+          recordname: file.name,
+          fileSize: file.size
+        })
+      )
+      data.append('date', '2022-01-01 00:00:00' + ',2099-12-31 23:59:59')
+      return new Promise((resolve, reject) => {
+        axios
+          .post(`/api/neams/eamsbaserecord/batchSavejson`, data, {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+              charset: 'utf-8',
+              timestamp: Date.now(),
+              Authorization: `Bearer ${token}`,
+              requestKey: randomString(16),
+              OperationDesc: 'yYarJp'
+            },
+            loading: false,
+            noMsg: true
+          })
+          .then(({ data: res }) => resolve(res))
+          .catch(err => reject(err))
+      })
+    },
+    getByBussValueFn() {
+      this.mapdata = {}
+      if (!this.uploadParam || !this.uploadParam.bussValue) return
+      if (this.uploadParam.bussValue.split(',').length > 1) {
+        this.dataPorp.typeOptions = []
+        this.uploadParam.bussValue.split(',').map(item => {
+          getByBussValue({
+            bussValue: item
+          }).then(res => {
+            res &&
+              res.map(t => {
+                this.dataPorp.typeOptions.push({
+                  ...t,
+                  type: t.attno,
+                  label: t.attname
+                })
+                this.mapdata[t.attno] = item
+              })
+          })
+        })
+        return
+      }
+      getByBussValue({
+        bussValue: this.uploadParam.bussValue
+      }).then(res => {
+        this.dataPorp.typeOptions = (res.data || []).map(item => {
+          item.type = item.attno
+          item.label = item.attname
+          this.mapdata[item.attno] = this.uploadParam.bussValue
+          return item
+        })
+      })
+    },
+    getUploadedFiles() {
+      if (!this.uploadParam) return
+      if (this.uploadParam.bussValue && this.uploadParam.bussValue.includes(',')) {
+        this.uploadParam.bussValue.split(',').map(async t => {
+          const rr = await getUploadedFile({
+            bussId: this.uploadParam && this.uploadParam.bussId,
+            bussValue: t
+          })
+          const data = rr && rr.data != null ? rr.data : rr
+          this.fileUploadTableData = this.fileUploadTableData.concat(
+            (data || []).map(item => ({
+              id: item.beid,
+              beid: item.beid,
+              type: item.attno,
+              name: item.recordname,
+              time: item.updatetime,
+              user: item.creator,
+              url: item.filepath
+            }))
+          )
+        })
+        return
+      }
+      getUploadedFile({
+        bussValue: this.uploadParam.bussValue,
+        bussId: this.uploadParam.bussId
+      }).then(res => {
+        const list = res && res.data != null ? res.data : res
+        this.fileUploadTableData =
+          (list || []).map(item => {
+            item.type = item.attno
+            item.name = item.memo || item.recordname
+            item.time = item.uploadtime
+            item.user = item.creator
+            item.url = `/api/neams/eamsbaserecord/download/${item.beid}`
+            item._name = item.memo
+            return item
+          }) || []
+      })
+    },
+    onSuccess(file, row) {
+      const _fileData = file.response
+      this.$set(row, 'id', _fileData.data)
+      this.$set(row, 'bussValue', this.mapdata[row.type])
+      let userName = ''
+      try {
+        const raw = sessionStorage.getItem('User_Info') || sessionStorage.getItem('userInfo')
+        if (raw) userName = JSON.parse(raw).userName || ''
+      } catch (e) {
+        userName = ''
+      }
+      this.$set(row, 'user', userName)
+      this.$set(row, 'archiveId', _fileData.data)
+      this.$set(row, 'beid', _fileData.data)
+    },
+    onRemove(file) {
+      if (file.status === 'success') {
+        const { beid } = file.response
+        const i = this.fileUploadTableData.findIndex(d => d.id === beid)
+        if (i !== -1) this.fileUploadTableData.splice(i, 1)
+      }
+    }
+  },
+  watch: {
+    uploadParam: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (!this.needFile) return
+        if (!this.uploadParam) return
+        if (this.uploadParam.bussValue) {
+          this.getByBussValueFn()
+        }
+        if (this.uploadParam.bussId) {
+          this.getUploadedFiles()
+        }
+      }
+    }
+  }
+}

package/packages/dynamic-form/src/main.vue

@@ -95,6 +95,7 @@ const context = require.context('./components/', true, /\.vue$/)
 const demoComponents = {}
 context.keys().forEach(key => {
   const component = context(key).default
+  if (!component || !component.name) return
   demoComponents[component.name] = component
 })
 

package/packages/dynamic-form-detail/index.js

@@ -0,0 +1,7 @@
+import DynamicFormDetail from './src/main.vue'
+
+DynamicFormDetail.install = function (Vue) {
+  Vue.component(DynamicFormDetail.name, DynamicFormDetail)
+}
+
+export default DynamicFormDetail

package/packages/dynamic-form-detail/src/main.vue

@@ -0,0 +1,358 @@
+<template>
+  <N20-page class="dynamic-form-detail">
+    <!--
+      使用规范（与 DynamicForm 同一套 dynamicData）：
+      1. value 与 DynamicForm 提交的 formData 结构一致：{ [groupProp]: { [fieldProp]: 值 } }。
+      2. 下拉、弹窗等需要展示中文时：须在提交数据中同时写入模板里的 nameProp 对应字段；展示页优先显示 nameProp。
+      3. 未配置 nameProp 且无法从 options 反查时，直接展示存证值（代码/ id）。
+      4. SLOT_ELEMENT 由具名插槽 item.prop 自行渲染。
+      5. 附件：needFile / uploadParam 等与 DynamicForm 一致；详情默认 uploadReadOnly=true。
+      6. 子表、审批流等业务区由外层页面编排，或用 append 插槽扩展。
+    -->
+    <T20-page-header
+      v-if="showPageHeader"
+      slot="header"
+      @back="onBack"
+      :content="title"
+    >
+      <template slot="headerButtons">
+        <slot name="headerButtons" />
+      </template>
+    </T20-page-header>
+    <N20-expandable-pane
+      v-for="group in formGroups"
+      :key="group.prop"
+      :title="group.unitName"
+      v-show="group.isShow !== 0"
+    >
+      <template v-if="group.unitType === 'FORM' || group.unitType === 'UNIT_FORM'">
+        <N20-descriptions>
+          <el-descriptions-item
+            v-for="item in group.elements"
+            :key="`${group.prop}.${item.prop}.${item.elementType}`"
+            :label="item.label"
+            v-show="item.isShow !== 0"
+          >
+            <template v-if="item.elementType === 'SLOT_ELEMENT'">
+              <slot
+                :name="item.prop"
+                :form-data="formData"
+                :group-prop="group.prop"
+                :prop="item.prop"
+                :element-item="item"
+                :value="rowValue(group.prop, item.prop)"
+              />
+            </template>
+            <span v-else class="dynamic-form-detail__text">{{ displayText(group.prop, item) }}</span>
+          </el-descriptions-item>
+        </N20-descriptions>
+      </template>
+    </N20-expandable-pane>
+    <N20-expandable-pane
+      v-if="needFile"
+      key="fileuploadtable"
+      :title="$lc('附件信息')"
+    >
+      <N20-file-upload-table
+        v-if="!needFileDIY"
+        :action="fileAction"
+        :table-data="fileUploadTableData"
+        :see-types="seeTypes"
+        :show-batch-upload="false"
+        :data-porp="dataPorp"
+        :upload-http-request="uploadRequest"
+        :readonly="uploadReadOnly"
+        @on-success="onSuccess"
+        @on-remove="onRemove"
+        @add-row="addRow"
+        @down-rows="downRows"
+        @delete-rows="deleteRows"
+      />
+      <slot v-else name="fileUploadTable"></slot>
+    </N20-expandable-pane>
+    <N20-expandable-pane v-if="showApprovalProgress" :title="$l('审批进度')">
+      <el-button slot="tips" size="mini" plain @click="imgV = true">{{ $l('流程图查看') }}</el-button>
+      <N20-approve-card :procInstId="processInstanceId" />
+      <el-dialog
+        v-drag
+        :title="$l('查看流程')"
+        :visible.sync="imgV"
+        width="65%"
+        class="p-a-0"
+        append-to-body
+        top="10vh"
+      >
+        <N20-approval-img class="text-c p-a" style="height: 70vh; overflow: auto" />
+      </el-dialog>
+    </N20-expandable-pane>
+    <N20-approval-buttons v-if="showApprovalFooter" slot="footer" />
+    <slot name="append" />
+  </N20-page>
+</template>
+
+<script>
+/**
+ * 只读展示：与 DynamicForm 共用 dynamicData / fieldControlList 合并规则。
+ */
+import { fileUploadTableMixin } from '../../dynamic-form/mixins/fileUpload'
+
+export default {
+  name: 'DynamicFormDetail',
+  mixins: [fileUploadTableMixin],
+  props: {
+    dynamicData: {
+      type: Object,
+      default: () => ({ units: [] })
+    },
+    fieldControlList: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 顶栏标题 */
+    title: {
+      type: String,
+      default: ''
+    },
+    /** 是否显示页面头 */
+    showPageHeader: {
+      type: Boolean,
+      default: true
+    },
+    /** 返回事件：默认调用 $goBackCommon；传 false 则仅抛出 back 事件 */
+    autoBack: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否展示附件区（与 DynamicForm 一致） */
+    needFile: {
+      type: Boolean,
+      default: false
+    },
+    /** true 时使用 fileUploadTable 插槽自定义附件区 */
+    needFileDIY: {
+      type: Boolean,
+      default: false
+    },
+    /** 电子档案 / 上传参数，与 DynamicForm uploadParam 一致 */
+    uploadParam: {
+      type: Object,
+      default: () => ({
+        syscode: '060000000',
+        appno: '060500000',
+        bussValue: 'invest_041001001',
+        attno: 'invest_002',
+        bussId: null
+      })
+    },
+    /** 详情页默认只读；需可上传时再置为 false */
+    uploadReadOnly: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否展示审批进度 */
+    showApprovalProgress: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否展示审批按钮（同时需 orderId + taskId） */
+    showApprovalFooter: {
+      type: Boolean,
+      default: false
+    },
+    processInstanceId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      mergedTemplateBase: null,
+      runtimeTemplate: { units: [] },
+      imgV: false
+    }
+  },
+  computed: {
+    formData() {
+      return this.value && typeof this.value === 'object' && !Array.isArray(this.value) ? this.value : {}
+    },
+    formGroups() {
+      return this.runtimeTemplate?.units || []
+    }
+  },
+  watch: {
+    dynamicData: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.buildRuntimeTemplate()
+      }
+    },
+    fieldControlList: {
+      deep: true,
+      handler() {
+        this.buildRuntimeTemplate()
+      }
+    }
+  },
+  methods: {
+    onBack() {
+      this.$emit('back')
+      if (this.autoBack !== false && typeof this.$goBackCommon === 'function') {
+        this.$goBackCommon()
+      }
+    },
+    rowValue(groupProp, fieldProp) {
+      const g = this.formData[groupProp]
+      if (!g || typeof g !== 'object') return undefined
+      return g[fieldProp]
+    },
+    templateShowOrEditable(v) {
+      return v === 0 ? 0 : 1
+    },
+    templateRequired(v) {
+      return v === 1 ? 1 : 0
+    },
+    mergeFieldControlIntoTemplate(templateClone) {
+      const list = this.fieldControlList
+      if (!templateClone?.units || !Array.isArray(list) || list.length === 0) return templateClone
+      const byFieldNo = Object.create(null)
+      list.forEach(row => {
+        if (row && row.fieldNo != null && row.fieldNo !== '') byFieldNo[row.fieldNo] = row
+      })
+      ;(templateClone.units || []).forEach(group => {
+        ;(group.elements || []).forEach(item => {
+          if (!item.prop) return
+          const cfg = byFieldNo[item.prop]
+          if (!cfg) return
+          if (cfg.isShow !== undefined && cfg.isShow !== null) {
+            item.isShow = this.templateShowOrEditable(cfg.isShow)
+          }
+          if (cfg.showName != null && String(cfg.showName).trim() !== '') {
+            item.label = cfg.showName
+          }
+          if (cfg.isRequired !== undefined && cfg.isRequired !== null) {
+            item.isRequired = this.templateRequired(cfg.isRequired)
+          }
+        })
+      })
+      return templateClone
+    },
+    buildRuntimeTemplate() {
+      const raw = JSON.parse(JSON.stringify(this.dynamicData || { units: [] }))
+      this.mergedTemplateBase = this.mergeFieldControlIntoTemplate(raw)
+      const next = JSON.parse(JSON.stringify(this.mergedTemplateBase))
+      ;(next.units || []).forEach(group => {
+        group.isShow = this.templateShowOrEditable(group.isShow)
+        ;(group.elements || []).forEach(item => {
+          item.isShow = this.templateShowOrEditable(item.isShow)
+          item.isRequired = this.templateRequired(item.isRequired)
+          item.isEditable = this.templateShowOrEditable(item.isEditable)
+        })
+      })
+      this.runtimeTemplate = next
+    },
+    emptyMark() {
+      return '--'
+    },
+    formatMoney(val) {
+      const n = Number(val)
+      if (Number.isNaN(n)) return val
+      return n.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    },
+    formatRate(val) {
+      const n = Number(val)
+      if (Number.isNaN(n)) return val
+      return String(n)
+    },
+    labelFromOptions(options, raw, multiple) {
+      const opts = options || []
+      if (multiple && Array.isArray(raw)) {
+        const parts = raw.map(v => {
+          const o = opts.find(x => x.value === v || x.value == v)
+          return o ? o.label : v
+        })
+        return parts.filter(Boolean).join(', ')
+      }
+      const o = opts.find(x => x.value === raw || x.value == raw)
+      return o ? o.label : ''
+    },
+    labelsFromCheckbox(options, raw) {
+      const opts = options || []
+      const arr = Array.isArray(raw) ? raw : raw === '' || raw == null ? [] : [raw]
+      return arr
+        .map(v => {
+          const o = opts.find(x => x.value === v || x.value == v)
+          return o ? o.label : v
+        })
+        .filter(x => x !== '' && x != null)
+        .join(', ')
+    },
+    displayText(groupProp, item) {
+      const row = this.formData[groupProp]
+      if (!row || typeof row !== 'object') return this.emptyMark()
+
+      if (item.nameProp) {
+        const np = row[item.nameProp]
+        if (np !== undefined && np !== null && String(np).trim() !== '') {
+          return np
+        }
+      }
+
+      const raw = row[item.prop]
+      if (raw === null || raw === undefined || raw === '') return this.emptyMark()
+
+      const et = item.elementType
+      const opts = item.options || []
+
+      switch (et) {
+        case 'SELECT':
+        case 'SELECT_LAZY':
+        case 'SELECT_SCROLL_LOAD':
+          return this.labelFromOptions(opts, raw, item.multiple) || raw
+        case 'RADIO':
+          return this.labelFromOptions(opts, raw, false) || raw
+        case 'CHECKBOX':
+          return this.labelsFromCheckbox(opts, raw) || raw
+        case 'AMOUNT':
+          return this.formatMoney(raw)
+        case 'RATE':
+          return this.formatRate(raw)
+        case 'DATE_RANGE': {
+          const s = String(raw)
+          const parts = s.split(',')
+          if (parts.length >= 2) return `${parts[0]} ~ ${parts[1]}`
+          return raw
+        }
+        case 'AMOUNT_RANGE':
+        case 'RATE_RANGE': {
+          const parts = String(raw).split(',')
+          if (parts.length < 2) return raw
+          const isRate = et === 'RATE_RANGE'
+          const a = isRate ? this.formatRate(parts[0]) : this.formatMoney(parts[0])
+          const b = isRate ? this.formatRate(parts[1]) : this.formatMoney(parts[1])
+          return `${a} ~ ${b}`
+        }
+        case 'INPUT':
+        case 'TEXTAREA':
+        case 'DATE':
+        case 'DMY':
+        case 'DIALOG':
+        case 'UNIT_TREE_SELECT':
+        case 'SELECT_TREE':
+        default:
+          return raw
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dynamic-form-detail__text {
+  word-break: break-word;
+}
+</style>

package/src/index.js

@@ -22,6 +22,7 @@ import SelectTreeUnitForm from '../packages/select-tree-unit-form/index.js'
 import ScrollLoadSelect from '../packages/scroll-load-select/index.js'
 import FileImport from '../packages/file-import/index.js'
 import DynamicForm from '../packages/dynamic-form/index.js'
+import DynamicFormDetail from '../packages/dynamic-form-detail/index.js'
 
 // 存储组件列表
 const components = [
@@ -42,7 +43,8 @@ const components = [
   SelectTreeUnit,
   SelectTreeUnitForm,
   FileImport,
-  DynamicForm
+  DynamicForm,
+  DynamicFormDetail
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -89,6 +91,7 @@ export {
   SelectTreeUnitForm,
   FileImport,
   DynamicForm,
+  DynamicFormDetail,
   // 工具方法
   repairEl,
   getColumnWidth,