t20-common-lib 0.15.22 → 0.15.23

package/package.json

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

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,