t20-common-lib 0.15.39 → 0.15.40

package/package.json

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

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

@@ -46,33 +46,65 @@
             {{ $lc('条。') }}
           </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>{{ $lc('无效数据详情') }}</span>
-              <el-button v-if="showErrorExport" type="text" @click="importError">{{ $lc('导出错误数据') }}</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"
+
+        <!-- 未传 tabList：保持原有错误数据展示 -->
+        <template v-if="!useTabMode">
+          <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>{{ $lc('无效数据详情') }}</span>
+                <el-button v-if="showErrorExport" type="text" @click="importError">{{ $lc('导出错误数据') }}</el-button>
+              </div>
+              <component
+                :is="tableProTag"
+                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">{{ '上述数据输入有误，请修改导入文件中相关信息！' | $lc }}</div>
+          </template>
+        </template>
+
+        <!-- 传入 tabList：分页签展示 -->
+        <template v-else>
+          <TabPane :data="tabList" :init.sync="activeTabName" @click="handleTabClick" />
+          <!-- 页签内容：错误页签仍走 errorListC / columnsList，其他页签 table 参数由 tabList 传入 -->
+          <template v-if="activeTab">
+            <div class="bd-a">
+              <div class="flex-box flex-lr flex-v m-t m-b p-l p-r">
+                <span>{{ tabPanelTitle }}</span>
+                <el-button v-if="showErrorExport && showErrorPanel" type="text" @click="importError">
+                  {{ $lc('导出错误数据') }}
+                </el-button>
+              </div>
+              <component :is="tableProTag" ref="vTable" v-bind="tabModeTableBind" />
+              <div v-if="tabModePagination" 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>
+          </template>
+          <div v-if="showImportTip" class="color-warning m-t-s">
+            {{ importTipText | $lc }}
           </div>
-          <div class="color-warning m-t-s">{{ '上述数据输入有误，请修改导入文件中相关信息！' | $lc }}</div>
         </template>
       </template>
     </div>
@@ -109,9 +141,24 @@
 
 <script>
 import cloneDeep from 'lodash-es/cloneDeep'
+import TabPane from '../../../tab-pane/src/main.vue'
+import { resolveTableProComponent } from '../../../../src/utils/resolvePrefixedComponent'
+
+/** 内置错误数据页签标识 */
+const ERROR_TAB_TYPE = 'error'
+
+const DEFAULT_TABLE_BIND = {
+  autoResize: true,
+  clearSelect: false,
+  rowConfig: { keyField: 'id' },
+  checkboxConfig: { reserve: true },
+  resizableConfig: { isAllColumnDrag: true, minWidth: '0px' },
+  headerAlign: 'center'
+}
 
 export default {
   name: 'UploadMsg',
+  components: { TabPane },
   props: {
     title: { type: String, default: '提示' },
     footerBtn: { type: Object, default: () => ({}) },
@@ -124,10 +171,17 @@ export default {
     validateResult: { type: Object, default: undefined },
     validateConfirm: { type: Function, default: undefined },
     hidePercent: { type: Boolean, default: false },
-    showErrorExport: { type: Boolean, default: false }
+    showErrorExport: { type: Boolean, default: false },
+    /**
+     * 校验弹窗页签配置。未传或空数组时保持仅展示错误数据（原逻辑）。
+     * 项示例：{ name: '无效数据', type: 'error' } | { name: '校验信息', key: 'info', data, columns, tableProps }
+     * 非 error 页签：data/columns（或 tableData/columnsList）及 tableProps 等同 N20-table-pro 配置
+     */
+    tabList: { type: Array, default: undefined }
   },
   data() {
     return {
+      activeTabName: '',
       tableData: [],
       errorListC: [],
       page: {
@@ -138,6 +192,12 @@ export default {
     }
   },
   watch: {
+    tabList: {
+      handler() {
+        this.initActiveTab()
+      },
+      immediate: true
+    },
     errorList: {
       handler() {
         this.errorListC = this.errorList
@@ -149,9 +209,23 @@ export default {
         this.pageSize = v
       },
       deep: true
+    },
+    activeTabName() {
+      this.$nextTick(() => {
+        if (this.$refs.vTable && this.$refs.vTable.doLayout) {
+          this.$refs.vTable.doLayout()
+        }
+      })
     }
   },
   computed: {
+    useTabMode() {
+      return Array.isArray(this.tabList) && this.tabList.length > 0
+    },
+    tableProTag() {
+      const Vue = this.$root.$options._base
+      return resolveTableProComponent(Vue)
+    },
     dialogTitle() {
       return this.title || this.$lc('提示')
     },
@@ -181,9 +255,74 @@ export default {
       set(value) {
         return value
       }
+    },
+    activeTab() {
+      if (!this.useTabMode) return null
+      return this.tabList.find(item => item.name === this.activeTabName) || this.tabList[0]
+    },
+    showErrorPanel() {
+      return this.useTabMode && this.activeTab && this.isErrorTab(this.activeTab)
+    },
+    tabPanelTitle() {
+      if (!this.activeTab) return ''
+      if (this.showErrorPanel) {
+        return this.activeTab.panelTitle || this.activeTab.name || this.$lc('无效数据详情')
+      }
+      return this.activeTab.panelTitle || this.activeTab.name || ''
+    },
+    tabModePagination() {
+      if (this.showErrorPanel) return this.pagination
+      return !!(this.activeTab && this.activeTab.pagination)
+    },
+    tabModeTableBind() {
+      if (this.showErrorPanel) {
+        const height =
+          (this.activeTab && (this.activeTab.tableHeight || this.activeTab.height)) || '300px'
+        return {
+          ...DEFAULT_TABLE_BIND,
+          data: this.errorListC,
+          columns: this.columnsList,
+          height
+        }
+      }
+      const tab = this.activeTab || {}
+      const tableProps = tab.tableProps || tab.tableOpt || {}
+      return {
+        ...DEFAULT_TABLE_BIND,
+        height: tab.height || tab.tableHeight || '300px',
+        data: tab.data || tab.tableData || [],
+        columns: tab.columns || tab.columnsList || [],
+        ...tableProps
+      }
+    },
+    showImportTip() {
+      if (!this.useTabMode || !this.validateResult) return false
+      if (this.validateResult.importTip === false) return false
+      return !!(this.validateResult.errorList && this.validateResult.errorList.length)
+    },
+    importTipText() {
+      return this.validateResult?.importTip || '上述数据输入有误，请修改导入文件中相关信息！'
     }
   },
   methods: {
+    isErrorTab(tab) {
+      return tab && (tab.type === ERROR_TAB_TYPE || tab.key === ERROR_TAB_TYPE)
+    },
+    initActiveTab() {
+      if (!this.useTabMode) {
+        this.activeTabName = ''
+        return
+      }
+      const exists = this.tabList.some(item => item.name === this.activeTabName)
+      if (!exists) {
+        const defaultTab = this.tabList.find(item => item.default) || this.tabList[0]
+        this.activeTabName = defaultTab.name
+      }
+    },
+    handleTabClick(item) {
+      this.activeTabName = item.name
+      this.$emit('tab-click', item)
+    },
     importError() {
       this.$emit('importError')
     },

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

@@ -15,12 +15,14 @@
         :width="width"
         :show-error-export="showErrorExport"
         :validate-result="validateResult"
+        :tab-list="tabList"
         :hide-percent="hidePercent"
         :percentType="percentType"
         :percent="percent"
         :footer-btn="footer"
         :validate-confirm="validateConfirm"
         @importError="importError"
+        @tab-click="$emit('tab-click', $event)"
       >
         <template #top>
           <slot name="top"></slot>
@@ -61,7 +63,9 @@ export default {
     percentType: { type: String, default: 'loading' },
     percent: { type: Number, default: 0 },
     errorExportMode: { type: String, default: 'frontend' },
-    errorExportOptions: { type: Object, default: () => ({}) }
+    errorExportOptions: { type: Object, default: () => ({}) },
+    /** 校验弹窗页签，见 UploadMsg.tabList */
+    tabList: { type: Array, default: undefined }
   },
   data() {
     return {

package/src/utils/resolvePrefixedComponent.js

@@ -0,0 +1,31 @@
+/**
+ * 解析 n20-common-lib 全局注册的前缀组件名。
+ * install 时 prefix 可能是 N20 / Cl / cl 等，需按实际注册名回退。
+ * @param {typeof import('vue').default} Vue
+ * @param {string[]} candidates 候选名（kebab / Pascal 均可）
+ * @param {string} [fallback]
+ */
+export function resolvePrefixedComponent(Vue, candidates, fallback) {
+  if (!Vue || !candidates?.length) {
+    return fallback || candidates?.[0]
+  }
+  for (const name of candidates) {
+    if (Vue.component(name)) {
+      return name
+    }
+  }
+  return fallback || candidates[0]
+}
+
+const TABLE_PRO_CANDIDATES = [
+  'N20-table-pro',
+  'N20TablePro',
+  'Cl-table-pro',
+  'ClTablePro',
+  'cl-table-pro',
+  'clTablePro'
+]
+
+export function resolveTableProComponent(Vue) {
+  return resolvePrefixedComponent(Vue, TABLE_PRO_CANDIDATES, 'N20-table-pro')
+}