haiwei-ui 1.0.7 → 1.0.8

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "haiwei-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "HaiWei前端组件库",
   "author": "Eric",
   "license": "ISC",
   "main": "packages/index.js",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service lint && vue-cli-service serve",
+    "build": "vue-cli-service lint && vue-cli-service build",
     "lint": "vue-cli-service lint",
     "cm": "rimraf node_modules && rimraf dist",
     "cc": "rimraf node_modules/.cache",

package/packages/components/list/components/import/index.vue

@@ -0,0 +1,477 @@
+<template>
+  <component v-bind:is="`nm-${options.showMode || 'drawer'}`" header footer draggable :padding="10" :title="title" :icon="icon" :width="width" :height="height" :visible.sync="visible_">
+    <el-form ref="form" :model="model" :rules="rules" :size="fontSize" label-width="120px">
+      <!-- 文件上传 -->
+      <el-form-item label="选择文件：" prop="file">
+        <el-upload
+          ref="upload"
+          class="nm-upload"
+          drag
+          :action="uploadUrl"
+          :headers="headers"
+          :data="uploadData"
+          :before-upload="beforeUpload"
+          :on-success="onUploadSuccess"
+          :on-error="onUploadError"
+          :on-remove="onFileRemove"
+          :file-list="fileList"
+          :limit="1"
+          accept=".xlsx,.xls"
+        >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip" slot="tip">只能上传Excel文件，且不超过100MB</div>
+        </el-upload>
+      </el-form-item>
+
+      <!-- 解析选项 -->
+      <el-form-item v-if="fileInfo" label="解析选项：">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-checkbox v-model="model.hasHeader" :disabled="parsing">包含表头</el-checkbox>
+          </el-col>
+          <el-col :span="12">
+            <el-checkbox v-model="model.skipEmptyRows" :disabled="parsing">跳过空行</el-checkbox>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="nm-m-t-10">
+          <el-col :span="12">
+            <el-input-number v-model="model.maxPreviewRows" :min="1" :max="1000" :disabled="parsing" controls-position="right" style="width: 100%">
+              <template slot="prepend">最大预览行数</template>
+            </el-input-number>
+          </el-col>
+        </el-row>
+      </el-form-item>
+
+      <!-- 文件信息 -->
+      <el-form-item v-if="fileInfo" label="文件信息：">
+        <el-descriptions :column="2" border size="small">
+          <el-descriptions-item label="文件名">{{ fileInfo.fileName }}</el-descriptions-item>
+          <el-descriptions-item label="文件大小">{{ formatFileSize(fileInfo.fileSize) }}</el-descriptions-item>
+          <el-descriptions-item label="工作表">{{ fileInfo.sheetCount }}个</el-descriptions-item>
+          <el-descriptions-item label="总行数">{{ fileInfo.totalRows }}行</el-descriptions-item>
+        </el-descriptions>
+      </el-form-item>
+
+      <!-- 工作表选择 -->
+      <el-form-item v-if="fileInfo && fileInfo.sheets && fileInfo.sheets.length > 1" label="选择工作表：" prop="selectedSheet">
+        <el-select v-model="model.selectedSheet" placeholder="请选择工作表" :disabled="parsing" style="width: 100%">
+          <el-option v-for="sheet in fileInfo.sheets" :key="sheet.index" :label="sheet.name" :value="sheet.index">
+            <span style="float: left">{{ sheet.name }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{ sheet.rowCount }}行 × {{ sheet.columnCount }}列</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- 数据预览 -->
+      <el-form-item v-if="parseResult" label="数据预览：">
+        <el-alert v-if="parseResult.basicInfo" :title="`已解析 ${parseResult.basicInfo.rowCount} 行数据，${parseResult.basicInfo.columnCount} 列`" type="info" show-icon :closable="false" class="nm-m-b-10" />
+        
+        <el-table :data="parseResult.previewData" border stripe size="mini" max-height="400" v-loading="parsing">
+          <el-table-column v-for="(col, index) in parseResult.columns" :key="index" :prop="col.name" :label="col.label" :width="col.width">
+            <template v-slot:header>
+              <div class="nm-text-center">
+                <div>{{ col.label }}</div>
+                <div class="nm-text-xs nm-text-muted">({{ col.name }})</div>
+              </div>
+            </template>
+            <template v-slot="{ row }">
+              <span :title="row[col.name]">{{ row[col.name] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <div v-if="parseResult.basicInfo && parseResult.basicInfo.totalRows > parseResult.basicInfo.rowCount" class="nm-text-center nm-m-t-10 nm-text-muted">
+          仅显示前{{ parseResult.basicInfo.rowCount }}行，共{{ parseResult.basicInfo.totalRows }}行数据
+        </div>
+      </el-form-item>
+
+      <!-- 列映射配置 -->
+      <el-form-item v-if="parseResult && parseResult.columns && parseResult.columns.length > 0" label="列映射配置：">
+        <el-table :data="columnMapping" border stripe size="mini" max-height="300">
+          <el-table-column prop="excelColumn" label="Excel列" width="150">
+            <template v-slot="{ row }">
+              <span>{{ row.excelColumn.label }} <span class="nm-text-muted">({{ row.excelColumn.name }})</span></span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="targetColumn" label="目标字段" width="200">
+            <template v-slot="{ row }">
+              <el-select v-model="row.targetColumn" placeholder="请选择目标字段" style="width: 100%">
+                <el-option label="不导入此列" :value="null"></el-option>
+                <el-option v-for="col in targetColumns" :key="col.name" :label="col.label" :value="col.name">
+                  <span style="float: left">{{ col.label }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ col.name }}</span>
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="required" label="必填" width="80" align="center">
+            <template v-slot="{ row }">
+              <el-checkbox v-model="row.required" :disabled="!row.targetColumn"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column prop="defaultValue" label="默认值">
+            <template v-slot="{ row }">
+              <el-input v-model="row.defaultValue" :disabled="!row.targetColumn" placeholder="当Excel为空时使用此默认值"></el-input>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+
+      <!-- 导入模式 -->
+      <el-form-item v-if="parseResult" label="导入模式：" prop="importMode">
+        <el-radio-group v-model="model.importMode">
+          <el-radio :label="0">新增数据</el-radio>
+          <el-radio :label="1">更新数据</el-radio>
+          <el-radio :label="2">新增或更新</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <!-- 错误处理 -->
+      <el-form-item v-if="parseResult" label="错误处理：" prop="errorHandling">
+        <el-radio-group v-model="model.errorHandling">
+          <el-radio :label="0">遇到错误停止导入</el-radio>
+          <el-radio :label="1">跳过错误继续导入</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+
+    <!--底部-->
+    <template v-slot:footer>
+      <el-button-group>
+        <nm-button v-if="fileInfo && !parseResult" type="primary" :loading="parsing" text="解析文件" @click="onParse" />
+        <nm-button v-if="parseResult" type="success" :loading="importing" text="开始导入" @click="onImport" />
+        <nm-button type="info" text="取消" @click="hide" />
+      </el-button-group>
+    </template>
+  </component>
+</template>
+<script>
+  import dialog from '../../../../mixins/components/dialog'
+  import { mapState } from 'vuex'
+  export default {
+    mixins: [dialog],
+    data() {
+      return {
+        title: '导入数据',
+        icon: 'import',
+        width: '900px',
+        height: '700px',
+        model: {
+          file: null,
+          hasHeader: true,
+          skipEmptyRows: false,
+          maxPreviewRows: 100,
+          selectedSheet: 0,
+          importMode: 0,
+          errorHandling: 0
+        },
+        rules: {
+          file: [{ required: true, message: '请选择要导入的文件', trigger: 'change' }],
+          selectedSheet: [{ required: true, message: '请选择工作表', trigger: 'change' }]
+        },
+        fileList: [],
+        fileInfo: null,
+        parseResult: null,
+        parsing: false,
+        importing: false,
+        columnMapping: [],
+        targetColumns: []
+      }
+    },
+    props: {
+      /** 目标列配置 */
+      cols: Array,
+      /** 导入配置 */
+      options: Object,
+      /** 导入方法 */
+      action: Function
+    },
+    computed: {
+      ...mapState('app/user', { token: 'token' }),
+      uploadUrl() {
+        return `${this.$api.baseURL}/api/admin/excel/parseexcel`
+      },
+      headers() {
+        return {
+          'Authorization': `Bearer ${this.token}`
+        }
+      },
+      uploadData() {
+        return {
+          hasHeader: this.model.hasHeader,
+          maxPreviewRows: this.model.maxPreviewRows,
+          skipEmptyRows: this.model.skipEmptyRows
+        }
+      }
+    },
+    methods: {
+      /**初始化 */
+      init() {
+        // 重置状态
+        this.fileList = []
+        this.fileInfo = null
+        this.parseResult = null
+        this.parsing = false
+        this.importing = false
+        this.columnMapping = []
+        
+        // 初始化目标列
+        this.initTargetColumns()
+        
+        // 应用选项配置
+        const { hasHeader = true, maxPreviewRows = 100, skipEmptyRows = false } = this.options
+        this.model.hasHeader = hasHeader
+        this.model.maxPreviewRows = maxPreviewRows
+        this.model.skipEmptyRows = skipEmptyRows
+      },
+      
+      /**初始化目标列 */
+      initTargetColumns() {
+        if (this.cols && this.cols.length > 0) {
+          this.targetColumns = this.cols
+            .filter(col => col.show && col.name)
+            .map(col => ({
+              name: col.name,
+              label: col.label || col.name,
+              type: col.type || 'string'
+            }))
+        } else {
+          this.targetColumns = []
+        }
+      },
+      
+      /**上传前验证 */
+      beforeUpload(file) {
+        const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
+                       file.type === 'application/vnd.ms-excel'
+        const isLt100M = file.size / 1024 / 1024 < 100
+        
+        if (!isExcel) {
+          this._error('只能上传Excel文件!')
+          return false
+        }
+        if (!isLt100M) {
+          this._error('文件大小不能超过100MB!')
+          return false
+        }
+        
+        this.model.file = file
+        return true
+      },
+      
+      /**上传成功 */
+      onUploadSuccess(response, file, fileList) {
+        if (response.successful) {
+          this.fileInfo = response.data.basicInfo
+          this.parseResult = response.data
+          this.initColumnMapping()
+          this._success('文件上传成功')
+        } else {
+          this._error(response.msg || '文件上传失败')
+          this.$refs.upload.clearFiles()
+        }
+      },
+      
+      /**上传失败 */
+      onUploadError(err, file, fileList) {
+        this._error('文件上传失败')
+        this.$refs.upload.clearFiles()
+      },
+      
+      /**文件移除 */
+      onFileRemove(file, fileList) {
+        this.model.file = null
+        this.fileInfo = null
+        this.parseResult = null
+        this.columnMapping = []
+      },
+      
+      /**初始化列映射 */
+      initColumnMapping() {
+        if (!this.parseResult || !this.parseResult.columns) return
+        
+        this.columnMapping = this.parseResult.columns.map(col => ({
+          excelColumn: col,
+          targetColumn: this.findBestMatch(col),
+          required: false,
+          defaultValue: ''
+        }))
+      },
+      
+      /**查找最佳匹配的目标列 */
+      findBestMatch(excelColumn) {
+        if (!this.targetColumns || this.targetColumns.length === 0) return null
+        
+        const excelLabel = excelColumn.label.toLowerCase()
+        const excelName = excelColumn.name.toLowerCase()
+        
+        // 1. 尝试完全匹配标签
+        let match = this.targetColumns.find(col => col.label.toLowerCase() === excelLabel)
+        if (match) return match.name
+        
+        // 2. 尝试完全匹配名称
+        match = this.targetColumns.find(col => col.name.toLowerCase() === excelName)
+        if (match) return match.name
+        
+        // 3. 尝试包含匹配
+        match = this.targetColumns.find(col => 
+          excelLabel.includes(col.label.toLowerCase()) || 
+          col.label.toLowerCase().includes(excelLabel)
+        )
+        if (match) return match.name
+        
+        return null
+      },
+      
+      /**解析文件 */
+      onParse() {
+        if (!this.model.file) {
+          this._error('请先选择文件')
+          return
+        }
+        
+        this.parsing = true
+        const formData = new FormData()
+        formData.append('file', this.model.file)
+        formData.append('hasHeader', this.model.hasHeader)
+        formData.append('maxPreviewRows', this.model.maxPreviewRows)
+        formData.append('skipEmptyRows', this.model.skipEmptyRows)
+        
+        this.$api.post('/api/admin/excel/parseexcel', formData, {
+          headers: { 'Content-Type': 'multipart/form-data' }
+        })
+        .then(response => {
+          if (response.successful) {
+            this.fileInfo = response.data.basicInfo
+            this.parseResult = response.data
+            this.initColumnMapping()
+            this._success('文件解析成功')
+          } else {
+            this._error(response.msg || '文件解析失败')
+          }
+        })
+        .catch(error => {
+          this._error('文件解析失败：' + (error.message || '未知错误'))
+        })
+        .finally(() => {
+          this.parsing = false
+        })
+      },
+      
+      /**开始导入 */
+      onImport() {
+        if (!this.parseResult) {
+          this._error('请先解析文件')
+          return
+        }
+        
+        // 验证必填字段
+        const missingRequired = this.columnMapping
+          .filter(mapping => mapping.required && !mapping.targetColumn)
+          .map(mapping => mapping.excelColumn.label)
+        
+        if (missingRequired.length > 0) {
+          this._error(`以下必填字段未配置映射：${missingRequired.join('、')}`)
+          return
+        }
+        
+        this.importing = true
+        
+        try {
+          // 根据列映射配置生成AddModel列表
+          const addModels = this.generateAddModels()
+          
+          if (addModels.length === 0) {
+            this._error('没有可导入的数据')
+            this.importing = false
+            return
+          }
+          
+          // 调用导入方法，传递AddModel列表
+          if (this.action && typeof this.action === 'function') {
+            this.action(addModels)
+              .then(() => {
+                this._success(`成功导入${addModels.length}条数据`)
+                this.hide()
+                this.$emit('import-success')
+              })
+              .catch(error => {
+                this._error('数据导入失败：' + (error.message || '未知错误'))
+              })
+              .finally(() => {
+                this.importing = false
+              })
+          } else {
+            this._error('未配置导入方法')
+            this.importing = false
+          }
+        } catch (error) {
+          this._error('数据转换失败：' + error.message)
+          this.importing = false
+        }
+      },
+      
+      /**根据列映射配置生成AddModel列表 */
+      generateAddModels() {
+        if (!this.parseResult || !this.parseResult.previewData) {
+          return []
+        }
+        
+        // 获取有效的列映射（有目标字段的映射）
+        const validMappings = this.columnMapping.filter(mapping => mapping.targetColumn)
+        
+        // 转换每一行数据为AddModel
+        return this.parseResult.previewData.map((row, rowIndex) => {
+          const addModel = {}
+          
+          // 根据列映射配置设置字段值
+          validMappings.forEach(mapping => {
+            const excelColumnName = mapping.excelColumn.name
+            const targetColumn = mapping.targetColumn
+            let value = row[excelColumnName]
+            
+            // 如果值为空且设置了默认值，使用默认值
+            if ((value === null || value === undefined || value === '') && mapping.defaultValue) {
+              value = mapping.defaultValue
+            }
+            
+            // 设置到AddModel中
+            addModel[targetColumn] = value
+          })
+          
+          return addModel
+        })
+      },
+      
+      /**格式化文件大小 */
+      formatFileSize(bytes) {
+        if (bytes === 0) return '0 B'
+        const k = 1024
+        const sizes = ['B', 'KB', 'MB', 'GB']
+        const i = Math.floor(Math.log(bytes) / Math.log(k))
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+      }
+    },
+    created() {
+      this.init()
+    }
+  }
+</script>
+
+<style lang="scss">
+.nm-upload {
+  .el-upload {
+    width: 100%;
+    
+    .el-upload-dragger {
+      width: 100%;
+      height: 180px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>

package/packages/components/list/default.js

@@ -57,7 +57,34 @@ const exportOptions = {
   showExportPeople: false
 }
 
+//默认导入配置
+const importOptions = {
+  /**启用导入功能 */
+  enabled: false,
+  /**导入数据的方法 */
+  action: null,
+  /**开启高级选项 */
+  advanced: false,
+  /**高级选项显示模式，drawer/dialog */
+  showMode: 'drawer',
+  /**按钮位置，tool：右上角工具栏 querybar：查询栏里面 */
+  btnLocation: 'tool',
+  /**按钮编码，用于控制按钮权限 */
+  btnCode: '',
+  /**默认是否包含表头 */
+  hasHeader: true,
+  /**默认最大预览行数 */
+  maxPreviewRows: 100,
+  /**默认是否跳过空行 */
+  skipEmptyRows: false,
+  /**默认导入模式：0-新增，1-更新，2-新增或更新 */
+  importMode: 0,
+  /**默认错误处理：0-遇到错误停止，1-跳过错误继续 */
+  errorHandling: 0
+}
+
 export default {
   columnInfo,
-  exportOptions
+  exportOptions,
+  importOptions
 }

package/packages/components/list/index.vue

@@ -76,20 +76,24 @@
 
     <!--导出-->
     <query-export v-if="exportAdvancedEnabled" :options="exportOptions_" :list-title="title" :cols="columns" :visible.sync="showExport" />
+    
+    <!--导入-->
+    <query-import v-if="importAdvancedEnabled" :options="importOptions_" :cols="columns" :action="importOptions_.action" :visible.sync="showImport" />
   </section>
 </template>
 <script>
   import { mapState } from 'vuex'
   import def from './default.js'
-  import QueryHeader from './components/header'
-  import Querybar from './components/querybar'
-  import QueryTable from './components/table'
-  import QueryFooter from './components/footer'
-  import QueryExport from './components/export'
+import QueryHeader from './components/header'
+import Querybar from './components/querybar'
+import QueryTable from './components/table'
+import QueryFooter from './components/footer'
+import QueryExport from './components/export'
+import QueryImport from './components/import'
 
   export default {
     name: 'List',
-    components: { QueryHeader, Querybar, QueryTable, QueryFooter, QueryExport },
+    components: { QueryHeader, Querybar, QueryTable, QueryFooter, QueryExport, QueryImport },
     data() {
       return {
         loading_: false,
@@ -108,6 +112,7 @@
         total: 0,
         selection: [],
         showExport: false,
+        showImport: false,
         columns: []
       }
     },
@@ -180,6 +185,8 @@
       },
       /**导出配置 */
       exportOptions: Object,
+      /**导入配置 */
+      importOptions: Object,
       /** 页数选择项 */
       pageSizes: {
         type: Array,
@@ -222,6 +229,12 @@
       },
       exportAdvancedEnabled() {
         return this.exportOptions_.enabled && this.exportOptions_.advanced
+      },
+      importOptions_() {
+        return this.$_.assignIn({ title: this.title }, def.importOptions, this.importOptions)
+      },
+      importAdvancedEnabled() {
+        return this.importOptions_.enabled && this.importOptions_.advanced
       }
     },
     methods: {
@@ -360,6 +373,27 @@
         this.showExport = false
         this.$emit('export-change', this.showExport)
       },
+      /** 切换导入对话框显示状态 */
+      triggerImport() {
+        let imp = this.importOptions_
+        //未启用高级，直接执行导入操作
+        if (!imp.advanced) {
+          // 简单导入模式：直接打开文件选择
+          this._info('请使用高级导入功能进行文件选择和配置')
+          return
+        }
+
+        this.showImport ? this.closeImport() : this.openImport()
+      },
+      /** 打开导入对话框 */
+      openImport() {
+        this.showImport = true
+        this.$emit('import-change', this.showImport)
+      },
+      closeImport() {
+        this.showImport = false
+        this.$emit('import-change', this.showImport)
+      },
       /** 列表的列转导出的列 */
       listCol2ExportCol(m) {
         let col = {