t20-common-lib 0.13.2 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",
@@ -24,8 +24,10 @@
   "dependencies": {
     "core-js": "^2.6.12",
     "dayjs": "^1.11.18",
+    "exceljs": "^4.4.0",
     "lodash-es": "^4.17.21",
-    "normalize.css": "^8.0.1"
+    "normalize.css": "^8.0.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/core": "^7.28.4",

package/packages/file-import/index.js

@@ -0,0 +1,8 @@
+import FileImport from './src/main'
+
+/* istanbul ignore next */
+FileImport.install = function(Vue) {
+  Vue.component(FileImport.name, FileImport)
+}
+
+export default FileImport

package/packages/file-import/src/Upload/uploadMsg.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog
+    v-drag
+    style="margin-bottom: 0; margin-top: 30px"
+    :width="width"
+    :visible.sync="progressV"
+    :title="title"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+  >
+    <div style="min-height: 28px">
+      <template v-if="!hidePercent">
+        <p v-if="!percentType">系统处理中，请稍等......</p>
+        <div v-else>
+          <div v-if="validateResult" class="m-b">
+            <span class="m-r-m">导入文件</span>
+            {{ validateResult.name }}
+          </div>
+          <div class="flex-box">
+            <div class="m-r-m">导入进度</div>
+            <div class="flex-item">
+              <el-progress
+                class="m-b"
+                :percentage="percent"
+                :status="percentType !== 'loading' ? percentType : undefined"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-if="validateResult">
+        <div class="m-b">
+          <span class="m-r">导入统计</span>
+          <span>共计导入{{ validateResult.totalNum }}条,</span>
+          <span class="m-r-s">
+            其中有效数据
+            <span class="color-success">{{ validateResult.successNum }}</span>
+            条,
+          </span>
+          <span>
+            无效数据
+            <span class="color-danger">{{ validateResult.errorList.length }}</span>
+            条。
+          </span>
+        </div>
+        <template v-if="validateResult.errorList.length">
+          <div class="bd-a">
+            <div class="flex-box flex-lr flex-v m-t m-b p-l p-r">
+              <span>无效数据详情</span>
+              <el-button v-if="showErrorExport" type="text" @click="importError">导出错误数据</el-button>
+            </div>
+            <N20-table-pro
+              ref="vTable"
+              :data="errorListC"
+              :columns="columnsList"
+              auto-resize
+              :height="'300px'"
+              :clearSelect="false"
+              :rowConfig="{ keyField: 'id' }"
+              :checkboxConfig="{ reserve: true }"
+              :resizable-config="{ isAllColumnDrag: true, minWidth: '0px' }"
+              headerAlign="center"
+            />
+            <div v-if="pagination" class="flex-box flex-r m-t-ss m-b-ss">
+              <Pagination
+                :page-obj="page"
+                :page-key="{ no: 'current', size: 'pageSize', total: 'total' }"
+                @change="getList"
+              />
+            </div>
+          </div>
+          <div class="color-warning m-t-s">上述数据输入有误，请修改导入文件中相关信息！</div>
+        </template>
+      </template>
+    </div>
+    <div slot="footer" style="height: 32px">
+      <template v-if="footerBtn">
+        <el-button
+          v-if="validateResult && validateResult.successNum > 0"
+          type="primary"
+          @click="
+            () => {
+              footerBtn.confirm.click()
+              progressV = false
+            }
+          "
+        >
+          {{ footerBtn.confirm.text | $lc }}
+        </el-button>
+        <el-button
+          plain
+          @click="
+            () => {
+              footerBtn.cancel.click()
+              progressV = false
+            }
+          "
+        >
+          {{ footerBtn.cancel.text | $lc }}
+        </el-button>
+      </template>
+      <el-button v-else-if="validateResult || percentType === 'success'" type="primary" @click="confirmFn">
+        确认
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import cloneDeep from 'lodash-es/cloneDeep'
+
+export default {
+  name: 'UploadMsg',
+  props: {
+    title: { type: String, default: '提示' },
+    footerBtn: { type: Object, default: () => ({}) },
+    visible: { type: Boolean, default: false },
+    width: { type: String, default: '60%' },
+    percentType: { type: String, default: undefined },
+    percentMsg: { type: String, default: undefined },
+    pagination: { type: Boolean, default: true },
+    percent: { type: Number, default: undefined },
+    validateResult: { type: Object, default: undefined },
+    validateConfirm: { type: Function, default: undefined },
+    hidePercent: { type: Boolean, default: false },
+    showErrorExport: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      tableData: [],
+      errorListC: [],
+      page: {
+        current: 1,
+        pageSize: 20,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    errorList: {
+      handler() {
+        this.errorListC = this.errorList
+        this.page.total = this.tableData.length
+      }
+    },
+    page: {
+      handler(v) {
+        this.pageSize = v
+      },
+      deep: true
+    }
+  },
+  computed: {
+    progressV: {
+      get() {
+        return this.visible
+      },
+      set(v) {
+        this.$emit('update:visible', v)
+        return v
+      }
+    },
+    columnsList() {
+      return (this.validateResult && this.validateResult.columnsList) || []
+    },
+    errorList: {
+      get() {
+        const errorList = this.validateResult && this.validateResult.errorList
+        if (errorList) {
+          this.tableData = cloneDeep(errorList)
+          const startIndex = (this.page.current - 1) * this.page.pageSize
+          const endIndex = startIndex + this.page.pageSize
+          return this.pagination ? this.tableData.slice(startIndex, endIndex) : this.tableData
+        }
+        return undefined
+      },
+      set(value) {
+        return value
+      }
+    }
+  },
+  methods: {
+    importError() {
+      this.$emit('importError')
+    },
+    confirmFn() {
+      if (this.validateConfirm) {
+        this.validateConfirm(() => {
+          this.progressV = false
+        })
+      } else {
+        this.progressV = false
+      }
+    },
+    handleClose() {
+      this.progressV = false
+    },
+    getList() {
+      const startIndex = (this.page.current - 1) * this.page.pageSize
+      const endIndex = startIndex + this.page.pageSize
+      this.errorListC = this.tableData.slice(startIndex, endIndex)
+      this.$nextTick(() => {
+        if (this.$refs.vTable && this.$refs.vTable.doLayout) {
+          this.$refs.vTable.doLayout()
+        }
+      })
+    }
+  }
+}
+</script>

package/packages/file-import/src/main.vue

@@ -0,0 +1,328 @@
+<template>
+  <el-dropdown class="file-import-dropdown" trigger="click" :placement="placement" @command="commandFn">
+    <slot name="import-btn">
+      <el-button size="mini" type="primary">{{ $t('gbebit_w_c_0103') }}</el-button>
+    </slot>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="import">模版导入</el-dropdown-item>
+      <el-dropdown-item command="down">模版下载</el-dropdown-item>
+    </el-dropdown-menu>
+    <div style="display: none">
+      <uploadMsg
+        :pagination="pagination"
+        :title="$t('导入文件')"
+        :visible.sync="errorV"
+        :width="width"
+        :show-error-export="showErrorExport"
+        :validate-result="validateResult"
+        :hide-percent="hidePercent"
+        :percentType="percentType"
+        :percent="percent"
+        :footer-btn="footer"
+        :validate-confirm="validateConfirm"
+        @importError="importError"
+      >
+        <template #error>
+          <slot name="error"></slot>
+        </template>
+      </uploadMsg>
+    </div>
+  </el-dropdown>
+</template>
+
+<script>
+import XLSX from 'xlsx'
+import uploadMsg from './Upload/uploadMsg.vue'
+import writeImportErrorExcel from '@/utils/writeImportErrorExcel'
+
+export default {
+  name: 'FileImport',
+  components: { uploadMsg },
+  props: {
+    templateUrl: { type: String, default: '' },
+    templateOpt: { type: [Object, Array], default: undefined },
+    width: { type: String, default: '60%' },
+    fileType: { type: String, default: '.xlsx,.xls,.csv' },
+    fileName: { type: String, default: '下载.xlsx' },
+    uploadHttpRequest: { type: Function, default: undefined, required: true },
+    customTemplateDownload: { type: Function, default: undefined },
+    validateResult: { type: Object, default: undefined },
+    pagination: { type: Boolean, default: false },
+    showErrorExport: { type: Boolean, default: false },
+    validateDialog: { type: Boolean, default: false },
+    validateConfirm: { type: Function, default: undefined },
+    footer: { type: Object, default: undefined },
+    uploadOn: { type: Object, default: undefined },
+    hidePercent: { type: Boolean, default: false },
+    placement: { type: String, default: 'bottom-start' },
+    percentType: { type: String, default: 'loading' },
+    percent: { type: Number, default: 0 },
+    errorExportMode: { type: String, default: 'frontend' },
+    errorExportOptions: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      currentFile: null
+    }
+  },
+  computed: {
+    errorV: {
+      get() {
+        return this.validateDialog
+      },
+      set(v) {
+        this.$emit('update:validateDialog', v)
+        return v
+      }
+    }
+  },
+  methods: {
+    getDefaultErrorExportFileName() {
+      const baseName = String(this.fileName || '导入文件')
+      const pureName = baseName.replace(/\.(xlsx|xls|csv)$/i, '')
+      return `${pureName}-错误数据.xlsx`
+    },
+    getErrorExportParams() {
+      return {
+        validateResult: this.validateResult,
+        file: this.currentFile,
+        startRow: 3,
+        errorValSuffix: '',
+        rowHeight: 15,
+        downloadFileName: this.getDefaultErrorExportFileName(),
+        noteTextFormatter: ({ label, prop, row }) => `${label}: ${row[prop]}`,
+        ...(this.errorExportOptions || {})
+      }
+    },
+    toInt(value, fallback) {
+      const num = Number(value)
+      return Number.isInteger(num) ? num : fallback
+    },
+    getTemplateSheetConfigs() {
+      const opt = this.templateOpt
+      if (!opt) return []
+      if (Array.isArray(opt)) {
+        return opt.filter(item => item && item.sheetName && item.columns)
+      }
+      if (opt.sheetName && opt.columns) {
+        return [opt]
+      }
+      if (opt.sheets && typeof opt.sheets === 'object') {
+        return Object.keys(opt.sheets)
+          .map(name => ({ sheetName: name, ...(opt.sheets[name] || {}) }))
+          .filter(item => item.columns)
+      }
+      return []
+    },
+    getSheetParseOption(sheetName) {
+      const option = this.templateOpt || {}
+      const configs = this.getTemplateSheetConfigs()
+      const fromConfig = configs.find(c => c.sheetName === sheetName) || {}
+      const sheetOption = {
+        ...fromConfig,
+        ...((option.sheets && option.sheets[sheetName]) || {}),
+        ...(option[sheetName] || {})
+      }
+      const headerRows = this.toInt(
+        sheetOption.headerRows ?? sheetOption.headerDepth ?? sheetOption.headerLevel ?? option.headerRows ?? option.headerDepth ?? option.headerLevel,
+        1
+      )
+      const headerRowIndex = this.toInt(sheetOption.headerRowIndex ?? option.headerRowIndex, headerRows - 1)
+      const dataStartRow = this.toInt(
+        sheetOption.dataStartRow ?? sheetOption.startDataRow ?? option.dataStartRow ?? option.startDataRow,
+        headerRowIndex + 1
+      )
+      return {
+        headerRowIndex: Math.max(headerRowIndex, 0),
+        dataStartRow: Math.max(dataStartRow, 0)
+      }
+    },
+    parseSheetToLeafHeaderData(worksheet, parseOption) {
+      const matrix = XLSX.utils.sheet_to_json(worksheet, {
+        header: 1,
+        raw: true,
+        defval: ''
+      })
+      if (!matrix.length) {
+        return { headers: [], rows: [] }
+      }
+      const { headerRowIndex, dataStartRow } = parseOption
+      const maxColLen = matrix.reduce((max, row) => Math.max(max, Array.isArray(row) ? row.length : 0), 0)
+      const headers = []
+
+      for (let colIndex = 0; colIndex < maxColLen; colIndex++) {
+        let leafHeader = ''
+        for (let rowIndex = Math.min(headerRowIndex, matrix.length - 1); rowIndex >= 0; rowIndex--) {
+          const cell = matrix[rowIndex] && matrix[rowIndex][colIndex]
+          const normalized = cell === undefined || cell === null ? '' : String(cell).trim()
+          if (normalized) {
+            leafHeader = normalized
+            break
+          }
+        }
+        headers.push(leafHeader)
+      }
+
+      const rows = matrix
+        .slice(Math.min(dataStartRow, matrix.length))
+        .map(row => headers.map((_, colIndex) => (Array.isArray(row) ? row[colIndex] : '')))
+        .filter(row => row.some(cell => cell !== '' && cell !== null && cell !== undefined))
+
+      return { headers, rows }
+    },
+    normalizeHeaderLabel(text) {
+      return String(text == null ? '' : text)
+        .replace(/\u00a0/g, ' ')
+        .trim()
+        .replace(/^\*\s*/, '')
+        .trim()
+    },
+    flattenLeafColumns(columns) {
+      if (!Array.isArray(columns) || !columns.length) {
+        return []
+      }
+      const out = []
+      columns.forEach(col => {
+        if (!col) return
+        if (col.children && col.children.length) {
+          out.push(...this.flattenLeafColumns(col.children))
+        } else if (col.prop) {
+          out.push(col)
+        }
+      })
+      return out
+    },
+    expectedHeaderForColumn(col) {
+      const label = String(col.label == null ? '' : col.label).trim()
+      const required = col.required === true
+      return required ? `* ${label}` : label
+    },
+    buildSheetPayload(headers, rows, columnTree) {
+      const leafCols = this.flattenLeafColumns(columnTree)
+      const indexByProp = {}
+      const templateKeyByProp = {}
+      leafCols.forEach(col => {
+        const target = this.normalizeHeaderLabel(this.expectedHeaderForColumn(col))
+        const idx = headers.findIndex(h => this.normalizeHeaderLabel(h) === target)
+        if (idx !== -1) {
+          indexByProp[col.prop] = idx
+          templateKeyByProp[col.prop] = headers[idx]
+        }
+      })
+      const templateData = []
+      const tableData = []
+      rows.forEach(row => {
+        const tRow = {}
+        const pRow = {}
+        leafCols.forEach(col => {
+          const idx = indexByProp[col.prop]
+          if (idx === undefined) return
+          const val = Array.isArray(row) ? row[idx] : ''
+          const tk = templateKeyByProp[col.prop]
+          if (tk !== undefined && tk !== '') {
+            tRow[tk] = val
+          }
+          pRow[col.prop] = val
+        })
+        templateData.push(tRow)
+        tableData.push(pRow)
+      })
+      return {
+        headers,
+        templateData,
+        tableData
+      }
+    },
+    importError() {
+      if (this.errorExportMode === 'backend') {
+        this.$emit('importError', {
+          validateResult: this.validateResult,
+          file: this.currentFile
+        })
+        return
+      }
+      writeImportErrorExcel(this.getErrorExportParams()).catch(error => {
+        console.error('writeImportErrorExcel failed:', error)
+        this.$message.error(this.$l('导入模板解析失败，请检查模板内容后重试'))
+      })
+    },
+    commandFn(val) {
+      if (val === 'import') this.importFn()
+      if (val === 'down') this.downFn()
+    },
+    importFn() {
+      this.$emit('update:validateResult', undefined)
+      let input = document.createElement('input')
+      input.type = 'file'
+      input.accept = this.fileType
+      input.addEventListener('change', event => {
+        this.generateData(event.target.files[0])
+      })
+
+      input.click()
+      this.$nextTick(() => {
+        input = undefined
+      })
+    },
+    generateData(rawFile) {
+      if (!rawFile) return
+      this.currentFile = rawFile
+      const uploadFileName = rawFile.name || ''
+      const reader = new FileReader()
+      reader.onload = async e => {
+        const data = e.target.result
+        const workbook = XLSX.read(data, {
+          type: 'array',
+          raw: true,
+          cellHTML: true,
+          cellText: true,
+          bookFiles: true,
+          cellFormula: true,
+          cellDates: true
+        })
+        const worksheets = workbook.Sheets
+        const sheetsMap = {}
+        Object.keys(worksheets).forEach(sheet => {
+          const parseOption = this.getSheetParseOption(sheet)
+          sheetsMap[sheet] = this.parseSheetToLeafHeaderData(worksheets[sheet], parseOption)
+        })
+        const configs = this.getTemplateSheetConfigs()
+        if (configs.length) {
+          const res = {}
+          configs.forEach(cfg => {
+            const parsed = sheetsMap[cfg.sheetName]
+            if (!parsed) {
+              res[cfg.sheetName] = { headers: [], templateData: [], tableData: [] }
+            } else {
+              res[cfg.sheetName] = this.buildSheetPayload(parsed.headers, parsed.rows, cfg.columns)
+            }
+          })
+          this.uploadHttpRequest({ ...res, fileName: uploadFileName, file: rawFile })
+        } else {
+          this.uploadHttpRequest({ ...sheetsMap, fileName: uploadFileName, file: rawFile })
+        }
+      }
+      reader.readAsArrayBuffer(rawFile)
+    },
+    downFn() {
+      if (this.customTemplateDownload) {
+        this.customTemplateDownload()
+      } else {
+        this.$axios
+          .get(this.templateUrl, null, {
+            responseType: 'blob'
+          })
+          .then(blob => {
+            this.$downloadBlob(blob, this.fileName)
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.file-import-dropdown ::v-deep .el-dropdown-menu__item {
+  padding: 0 10px;
+}
+</style>

package/src/index.js

@@ -20,6 +20,7 @@ import DynamicDescriptions from '../packages/dynamic-descriptions/index.js'
 import SelectTreeUnit from '../packages/select-tree-unit/index.js'
 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'
 
 // 存储组件列表
 const components = [
@@ -38,7 +39,8 @@ const components = [
   DatePickerPor,
   DynamicDescriptions,
   SelectTreeUnit,
-  SelectTreeUnitForm
+  SelectTreeUnitForm,
+  FileImport
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -83,6 +85,7 @@ export {
   DynamicDescriptions,
   SelectTreeUnit,
   SelectTreeUnitForm,
+  FileImport,
   // 工具方法
   repairEl,
   getColumnWidth,

package/src/utils/importGlobal.js

@@ -0,0 +1,16 @@
+window._g_import_g_ || (window._g_import_g_ = {})
+
+function importG(name, ipt) {
+  return new Promise((resolve) => {
+    if (window._g_import_g_[name]) {
+      resolve(window._g_import_g_[name])
+    } else {
+      ipt().then((_module) => {
+        window._g_import_g_[name] = _module
+        resolve(_module)
+      })
+    }
+  })
+}
+
+export default importG

package/src/utils/writeImportErrorExcel.js

@@ -0,0 +1,133 @@
+import importG from './importGlobal'
+
+function columnNumberToName(columnNumber) {
+  let num = columnNumber
+  let name = ''
+  while (num > 0) {
+    const rem = (num - 1) % 26
+    name = String.fromCharCode(65 + rem) + name
+    num = Math.floor((num - 1) / 26)
+  }
+  return name
+}
+
+function readAsUint8Array(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e) => resolve(new Uint8Array(e.target.result))
+    reader.onerror = () => reject(new Error('读取文件失败'))
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+function getLeafColumns(columns = []) {
+  const leafColumns = []
+  columns.forEach((col) => {
+    if (!col) return
+    if (Array.isArray(col.children) && col.children.length) {
+      leafColumns.push(...getLeafColumns(col.children))
+      return
+    }
+    if (col.prop) {
+      leafColumns.push(col)
+    }
+  })
+  return leafColumns
+}
+
+export default async function writeImportErrorExcel({
+  validateResult,
+  file,
+  startRow = 3,
+  errorValSuffix = '',
+  rowHeight = 15,
+  worksheetIndex = 0,
+  ignoreNodes = ['dataValidations', 'conditionalFormatting', 'extLst'],
+  downloadFileName = '导入错误数据.xlsx',
+  noteTextFormatter
+}) {
+  if (!validateResult || !file) {
+    throw new Error('参数缺失: validateResult 或 file')
+  }
+
+  const rows = JSON.parse(JSON.stringify(validateResult.errorList || []))
+  const columns = getLeafColumns(validateResult.columnsList || []).filter(
+    (col) => col.prop !== 'seq'
+  )
+  const getErrorValKey = (prop) => `${prop}${errorValSuffix || ''}`
+
+  rows.forEach((row, index) => {
+    row.position = []
+    const currentErrorProps = row.errorList || []
+    currentErrorProps.forEach((prop) => {
+      const colIndex = columns.findIndex((col) => col.prop === prop)
+      if (colIndex < 0) return
+      row.position.push([index + 1, colIndex])
+      row[getErrorValKey(prop)] = row[prop]
+    })
+  })
+
+  const data = await readAsUint8Array(file)
+  const { default: ExcelJS } = await importG('exceljs', () =>
+    import(/* webpackChunkName: "exceljs" */ 'exceljs')
+  )
+  const workbook = new ExcelJS.Workbook()
+  await workbook.xlsx.load(data, { ignoreNodes })
+
+  const worksheet = workbook.worksheets[worksheetIndex]
+  if (!worksheet) {
+    throw new Error('未找到工作表')
+  }
+
+  worksheet.properties.defaultRowHeight = rowHeight
+
+  for (let rowNumber = startRow; rowNumber <= worksheet.rowCount; rowNumber++) {
+    const row = worksheet.getRow(rowNumber)
+    row.hidden = false
+    row.height = rowHeight
+    row.eachCell((cell) => {
+      cell.value = ''
+    })
+  }
+
+  rows.forEach((row, index) => {
+    const targetRow = worksheet.getRow(startRow + index)
+    targetRow.hidden = false
+    targetRow.height = rowHeight
+    columns.forEach((col, colIndex) => {
+      const value = row[col.prop] !== undefined && row[col.prop] !== null ? row[col.prop] : ''
+      targetRow.getCell(colIndex + 1).value = value
+    })
+  })
+
+  rows.forEach((row) => {
+    (row.position || []).forEach((pos) => {
+      const rowIndex = pos[0] + startRow - 1
+      const colIndex = pos[1]
+      const x = `${columnNumberToName(colIndex + 1)}${rowIndex}`
+      const cell = worksheet.getCell(x)
+      const prop = columns[colIndex].prop
+      const label = columns[colIndex].label
+      const noteText = noteTextFormatter
+        ? noteTextFormatter({ label, prop, row, errorValSuffix, errorValKey: getErrorValKey(prop) })
+        : `${label}: ${row[prop] || ''}`
+      cell.note = {
+        texts: [{ text: noteText }]
+      }
+    })
+  })
+
+  const newFileBuffer = await workbook.xlsx.writeBuffer()
+  const blob = new Blob([newFileBuffer], { type: 'application/octet-stream' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download =
+    typeof downloadFileName === 'function'
+      ? downloadFileName()
+      : downloadFileName || '导入错误数据.xlsx'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}