入库导入

src/api/importData.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+// 导入相关API
+export function importAsnData(data) {
+  return request({
+    url: 'api/importData/importAsn',
+    method: 'post',
+    data
+  })
+}
+
+export default { importAsnData }

src/components/Crud/CRUD.operation.vue

@@ -180,35 +180,64 @@ export default {
 
   },
   methods: {
-
     initcolumn() {
       this.updateTableColumns()
-      const strHidden=sessionStorage.getItem(this.tableKey)
+      const strHidden = sessionStorage.getItem(this.tableKey)
-      this.hiddenColumns= JSON.parse(strHidden);
+
-      if(this.hiddenColumns.length>0){
+      // 检查 sessionStorage 值是否存在
-        console.log("------移除---------------")
+      if (!strHidden) {
+        this.hiddenColumns = []
+        return
+      }
+
+      // 安全解析 JSON 数据
+      try {
+        this.hiddenColumns = JSON.parse(strHidden) || []
+      } catch (error) {
+        this.hiddenColumns = []
+        return
+      }
+
+      if (this.hiddenColumns.length > 0) {
         const table = this.crud.props.table
-        this.table_configs_xs.forEach((column,index) => {
+
-          const vm = table.$children.find(e => e.label === column.label)
+        // 预先构建 label 到 column 的映射，提高查找效率
+        const labelToColumnMap = {}
+        if (table && table.$children) {
+          table.$children.forEach(child => {
+            if (child.label) {
+              labelToColumnMap[child.label] = child
+            }
+          })
+        }
+
+        this.table_configs_xs.forEach((column, index) => {
+          const vm = labelToColumnMap[column.label]
+
+          // 检查元素是否存在
+          if (!vm) {
+            return
+          }
 
           const columnConfig = vm.columnConfig
 
+          // 检查 columnConfig 是否有效
+          if (!columnConfig) {
+            return
+          }
 
-          console.log(columnConfig)
+          if (vm.owner && vm.owner.store) {
-          vm.owner.store.commit('removeColumn', columnConfig, null)
+            vm.owner.store.commit('removeColumn', columnConfig, null)
-
+          }
         })
+
         this.ignoreNextTableColumnsChange = false
-        console.log("--------移除完成-------------")
+
         setTimeout(() => {
           // 方法区
-          this.showcolumn();
+          this.showcolumn()
         }, 200)
       }
-
-      //vm.owner.store.commit('insertColumn', columnConfig, newIndex+myindex + 1 , null)
-
-
     },
     showcolumn() {
       console.log("------显示列------")

src/layout/index.vue

@@ -69,26 +69,14 @@ export default {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     },
     getTableConfig() {
-      // eslint-disable-next-line no-unused-vars
-      // console.log("-----------------")
       crudTableConfig.gettables().then(res => {
-
+        this.table_configs = res.map(obj => obj);
-        this.table_configs = res.map(function (obj) {
+        console.log("-------------加载Table配置数量：" + this.table_configs.length + "---------");
-
-          return obj
-        })
-        console.log("-------------加载Table配置数量："+this.table_configs.length+"---------")
         this.table_configs.forEach(config => {
-          sessionStorage.removeItem(config.tableType)
+          sessionStorage.removeItem(config.tableType);
-          sessionStorage.setItem(config.tableType,config.value)
+          sessionStorage.setItem(config.tableType, config.value);
-        })
+        });
-
+      });
-        //sessionStorage.setItem(tableKey, res.value)
-
-        //var tableKey
-        // eslint-disable-next-line no-unused-vars
-        const hiddenColumns = JSON.parse(sessionStorage.getItem(tableKey))
-      })
     }
   }
 }

src/views/business-asn/asn/index.vue

@@ -4,11 +4,13 @@
     <!-- 搜索 -->
     <div v-if="crud.props.searchToggle">
       <!-- 搜索 -->
-<!--      <label class="el-form-item-label">单号</label>-->
+      <!--      <label class="el-form-item-label">单号</label>-->
-      <el-input v-model="query.code" clearable placeholder="单号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+      <el-input v-model="query.code" clearable placeholder="单号" style="width: 185px;" class="filter-item"
-<!--      <label class="el-form-item-label">库区</label>-->
+                @keyup.enter.native="crud.toQuery"/>
-<!--      <el-input v-model="query.areaId" clearable placeholder="库区" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
+      <!--      <label class="el-form-item-label">库区</label>-->
-      <el-select v-model="query.areaCode" clearable placeholder="库区" value-key="id" class="filter-item" @keyup.enter.native="crud.toQuery" >
+      <!--      <el-input v-model="query.areaId" clearable placeholder="库区" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
+      <el-select v-model="query.areaCode" clearable placeholder="库区" value-key="id" class="filter-item"
+                 @keyup.enter.native="crud.toQuery">
         <el-option
           style="width: 180px"
           v-for="item in areaOptions"
@@ -19,9 +21,10 @@
         </el-option>
       </el-select>
 
-<!--      <el-input v-model="query.orderDate" clearable placeholder="订单日期" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
+      <!--      <el-input v-model="query.orderDate" clearable placeholder="订单日期" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
-<!--      <label class="el-form-item-label">状态</label>-->
+      <!--      <label class="el-form-item-label">状态</label>-->
-      <el-select v-model="query.status" clearable placeholder="状态" value-key="id" class="filter-item" @keyup.enter.native="crud.toQuery" >
+      <el-select v-model="query.status" clearable placeholder="状态" value-key="id" class="filter-item"
+                 @keyup.enter.native="crud.toQuery">
         <el-option
           style="width: 180px"
           v-for="item in this.dict.asn_status"
@@ -31,20 +34,20 @@
         >
         </el-option>
       </el-select>
-      <rrOperation :crud="crud" />
+      <rrOperation :crud="crud"/>
     </div>
     <div class="head-container">
       <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
-<!--      <el-button-->
+      <!--      <el-button-->
-<!--        slot="right"-->
+      <!--        slot="right"-->
-<!--        class="filter-item"-->
+      <!--        class="filter-item"-->
-<!--        type="primary"-->
+      <!--        type="primary"-->
-<!--        icon="el-icon-plus"-->
+      <!--        icon="el-icon-plus"-->
-<!--        size="mini"-->
+      <!--        size="mini"-->
-<!--        @click="inserAsnOnOffM()"-->
+      <!--        @click="inserAsnOnOffM()"-->
-<!--      >-->
+      <!--      >-->
-<!--        新增-->
+      <!--        新增-->
-<!--      </el-button>-->
+      <!--      </el-button>-->
       <crudOperation :permission="permission" :tableKey="this.$options.name">
         <el-button
           slot="left"
@@ -68,17 +71,28 @@
           整单入库
         </el-button>
 
-<!--        <el-button-->
+        <el-button
-<!--          slot="right"-->
+          slot="left"
-<!--          class="filter-item"-->
+          class="filter-item"
-<!--          type="primary"-->
+          type="success"
-<!--          icon="el-icon-plus"-->
+          icon="el-icon-upload2"
-<!--          size="mini"-->
+          size="mini"
-<!--          :disabled="crud.selections.length!=1"-->
+          v-permission="permission.import"
-<!--          @click="asnDetailRouter(crud.selections)"-->
+          @click="showImportDialog">
-<!--        >-->
+          导入
-<!--          明细-->
+        </el-button>
-<!--        </el-button>-->
+
+        <!--        <el-button-->
+        <!--          slot="right"-->
+        <!--          class="filter-item"-->
+        <!--          type="primary"-->
+        <!--          icon="el-icon-plus"-->
+        <!--          size="mini"-->
+        <!--          :disabled="crud.selections.length!=1"-->
+        <!--          @click="asnDetailRouter(crud.selections)"-->
+        <!--        >-->
+        <!--          明细-->
+        <!--        </el-button>-->
       </crudOperation>
       <!--自己定义新增表单组件-->
       <el-dialog :visible.sync="inserAsnOnOff" :title="(this.updateAsnOnOff ? '修改 ':'新增 ')+'收货管理'" width="900px"
@@ -131,7 +145,7 @@
           </el-form-item>
 
           <el-form-item label="备注" style="float: left">
-            <el-input  type="textarea" :rows="2" v-model="asnFrom.description" style="width: 400px;"/>
+            <el-input type="textarea" :rows="2" v-model="asnFrom.description" style="width: 400px;"/>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -146,7 +160,7 @@
       >
         <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
           <el-form-item label="单号" prop="code">
-            <el-input :disabled="true"  v-model="form.code" style="width: 200px;"/>
+            <el-input :disabled="true" v-model="form.code" style="width: 200px;"/>
           </el-form-item>
           <el-form-item label="库区" prop="area">
             <!--            <el-input v-model="form.area" style="width: 370px;"/>-->
@@ -165,7 +179,8 @@
           </el-form-item>
           <el-form-item label="单据类型">
             <!--            <el-input v-model="form.billType" style="width: 370px;"/>-->
-            <el-select v-model="form.billType" clearable placeholder="请选择单据类型" value-key="id" style="width: 200px">
+            <el-select v-model="form.billType" clearable placeholder="请选择单据类型" value-key="id"
+                       style="width: 200px">
               <el-option
                 v-for="item in billTypeOptions"
                 :key="item.code"
@@ -184,11 +199,104 @@
           <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
         </div>
       </el-dialog>
+
+      <!-- 导入对话框 -->
+      <el-dialog :visible.sync="importDialogVisible" title="导入" width="800px">
+        <el-tabs v-model="activeImportTab" type="card">
+          <el-tab-pane label="模板一：标准导入" name="template1">
+            <div class="import-content">
+              <div class="template-info">
+                <h4>模板说明：</h4>
+                <p>适用于<span style="color: red">标准</span>导入，包含INVOICE NO.、BOI、PO&LN NO.、PART
+                  NO.、DESCRIPTION、Q'TY 、C/NO.</p>
+                <el-button type="primary" size="small" @click="downloadTemplate('template1')">下载模板</el-button>
+              </div>
+              <el-upload
+                class="upload-demo"
+                drag
+                accept=".xlsx,.xls,.csv"
+                action="#"
+                :auto-upload="false"
+                :file-list="fileList1"
+                :before-upload="beforeExcelUpload"
+                :on-change="handleExcelChange"
+                :on-remove="handleExcelRemove"
+              >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div class="el-upload__tip" slot="tip" style="color: red">注意：更新文件后请重新上传(支持.xlsx, .xls,
+                  .csv 格式文件)
+                </div>
+              </el-upload>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="模板二：大物导入" name="template2">
+            <div class="import-content">
+              <div class="template-info">
+                <h4>模板说明：</h4>
+                <p>适用于<span style="color: red">大物</span>导入，包含INVOICE NO.、BOI、PO&LN NO.、PART
+                  NO.、DESCRIPTION、Q'TY 、C/NO.</p>
+              </div>
+              <el-upload
+                class="upload-demo"
+                drag
+                accept=".xlsx,.xls,.csv"
+                action="#"
+                :auto-upload="false"
+                :file-list="fileList2"
+                :before-upload="beforeExcelUpload"
+                :on-change="handleExcelChange"
+                :on-remove="handleExcelRemove"
+              >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div class="el-upload__tip" slot="tip" style="color: red">注意：更新文件后请重新上传(支持.xlsx, .xls,
+                  .csv 格式文件)
+                </div>
+              </el-upload>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="模板三：空运发票箱单导入" name="template3">
+            <div class="import-content">
+              <div class="template-info">
+                <h4>模板说明：</h4>
+                <p>适用于<span style="color: red">空运发票箱单</span>导入，包含INVOICE NO.、BOI、PO&LN NO.、PART
+                  NO.、DESCRIPTION、Q'TY 、C/NO.</p>
+              </div>
+              <el-upload
+                class="upload-demo"
+                drag
+                accept=".xlsx,.xls,.csv"
+                action="#"
+                :auto-upload="false"
+                :file-list="fileList3"
+                :before-upload="beforeExcelUpload"
+                :on-change="handleExcelChange"
+                :on-remove="handleExcelRemove"
+              >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div class="el-upload__tip" slot="tip" style="color: red">注意：更新文件后请重新上传(支持.xlsx, .xls,
+                  .csv 格式文件)
+                </div>
+              </el-upload>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="cancelImport">取消</el-button>
+          <el-button type="primary" @click="confirmImport" :loading="importLoading">确认导入</el-button>
+        </div>
+      </el-dialog>
       <!--表格渲染-->
       <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
-                @selection-change="crud.selectionChangeHandler" :height="crud.tableHeight" @select="invVerifySTFM" @select-all="invVerifySTFAll" border
+                @selection-change="crud.selectionChangeHandler" :height="crud.tableHeight" @select="invVerifySTFM"
+                @select-all="invVerifySTFAll" border
       >
-        <el-table-column type="selection" width="55" />
+        <el-table-column type="selection" width="55"/>
         <el-table-column prop="code" label="单号" width="120px" align="center"/>
         <el-table-column prop="area" label="库区" width="140px" align="center">
           <template slot-scope="scope">
@@ -197,7 +305,7 @@
         </el-table-column>
         <el-table-column prop="billType" label="单据类型">
           <template slot-scope="scope">
-            {{scope.row.billType.name}}
+            {{ scope.row.billType.name }}
           </template>
         </el-table-column>
         <el-table-column prop="status" label="状态" align="center">
@@ -207,12 +315,12 @@
         </el-table-column>
         <el-table-column prop="orderDate" label="订单日期" width="140px" align="center">
           <template slot-scope="scope">
-            {{formatDate1(scope.row.orderDate)}}
+            {{ formatDate1(scope.row.orderDate) }}
           </template>
         </el-table-column>
         <el-table-column prop="receivedDate" label="收货日期" width="140px" align="center">
           <template slot-scope="scope">
-            {{ formatDate1(scope.row.receivedDate)}}
+            {{ formatDate1(scope.row.receivedDate) }}
           </template>
         </el-table-column>
         <el-table-column prop="orderQuantity" label="订单数量" align="center"/>
@@ -220,10 +328,11 @@
         <el-table-column prop="createBy" label="创建人" align="center"/>
         <el-table-column prop="createTime" label="创建时间" width="140px" align="center">
           <template slot-scope="scope">
-            {{ formatDate1(scope.row.createTime)}}
+            {{ formatDate1(scope.row.createTime) }}
           </template>
         </el-table-column>
-        <el-table-column v-if="checkPer(['admin','asn:edit','asn:del'])" label="操作" width="175px" align="center" fixed="right">
+        <el-table-column v-if="checkPer(['admin','asn:edit','asn:del'])" label="操作" width="175px" align="center"
+                         fixed="right">
           <template slot-scope="scope">
             <el-button
               class="filter-item"
@@ -252,18 +361,20 @@
 
 <script>
 import DateRangePicker from "@/components/DateRangePicker/index.vue";
-import crudAsn, { getCodeNo, queryAsnAll, save } from '@/api/asn'
+import crudAsn, {getCodeNo, queryAsnAll, save} from '@/api/asn'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import importData from '@/api/importData'
+import CRUD, {presenter, header, form, crud} from '@crud/crud'
 import rrOperation from '@crud/RR.operation.vue'
 import crudOperation from '@crud/CRUD.operation.vue'
 import udOperation from '@crud/UD.operation.vue'
 import pagination from '@crud/Pagination.vue'
-import { getAreas } from '@/api/area'
+import {getAreas} from '@/api/area'
-import { getBillType } from '@/api/billType'
+import {getBillType} from '@/api/billType'
-import { add, invVerify, queryAsnDetailAll } from '@/api/asnDetail'
+import {add, invVerify, queryAsnDetailAll} from '@/api/asnDetail'
-import { queryPointList } from '@/api/point'
+import {queryPointList} from '@/api/point'
-import { queryItemAll } from '@/api/item'
+import {queryItemAll} from '@/api/item'
-import { formatDate } from '@/utils/commonUtils'
+import {formatDate} from '@/utils/commonUtils'
+import UploadExcelComponent from '@/components/UploadExcel/index.vue'
 
 const defaultForm = {
   id: null,
@@ -295,12 +406,12 @@ const defaultForm = {
 }
 export default {
   name: 'Asn',
-  components: { pagination, crudOperation, rrOperation, udOperation,DateRangePicker },
+  components: {pagination, crudOperation, rrOperation, udOperation, DateRangePicker, UploadExcelComponent},
   mixins: [presenter(), header(), form(defaultForm), crud()],
   dicts: ['asn_status'],
   cruds() {
     return CRUD({
-      title: 'asn', url: 'api/asn', idField: 'id', sort: 'id,desc', crudMethod: { ...crudAsn }, optShow: {
+      title: 'asn', url: 'api/asn', idField: 'id', sort: 'id,desc', crudMethod: {...crudAsn}, optShow: {
         add: false,
         edit: false,
         del: true,
@@ -319,22 +430,23 @@ export default {
         del: ['admin', 'asn:del'],
         invVerify: ['admin', 'asn:invVerify'],
         inserAsn: ['admin', 'asn:inserAsn'],
+        import: ['admin', 'asn:import'],
       },
       rules: {
         code: [
-          { required: true, message: '单号不能为空', trigger: 'blur' }
+          {required: true, message: '单号不能为空', trigger: 'blur'}
         ],
         area: [
-          { required: true, message: '库区不能为空', trigger: 'blur' }
+          {required: true, message: '库区不能为空', trigger: 'blur'}
         ],
         orderDate: [
-          { required: true, message: '订单日期不能为空', trigger: 'blur' }
+          {required: true, message: '订单日期不能为空', trigger: 'blur'}
         ]
       },
       queryTypeOptions: [
-        { key: 'code', display_name: '单号' },
+        {key: 'code', display_name: '单号'},
-        { key: 'areaCode', display_name: '库区' },
+        {key: 'areaCode', display_name: '库区'},
-        { key: 'status', display_name: '状态查询' },
+        {key: 'status', display_name: '状态查询'},
       ],
       areaOptions: [],
       billTypeOptions: [],
@@ -405,7 +517,14 @@ export default {
       itemListData: [],
       pointList: [],
       asnOptions: [],
-      invVerifySTF:true
+      invVerifySTF: true,
+      // 导入相关数据
+      importDialogVisible: false,
+      activeImportTab: 'template1',
+      importLoading: false,
+      fileList1: [],  // 用于存储当前文件
+      fileList2: [],
+      fileList3: []
     }
   },
   mounted() {
@@ -422,7 +541,7 @@ export default {
     [CRUD.HOOK.beforeRefresh]() {
       return true
     },
-    formatDate1(value){
+    formatDate1(value) {
       return formatDate(value);
       // const date = new Date(value)
       // const year = date.getUTCFullYear()
@@ -448,7 +567,7 @@ export default {
     },
     //新增加的开关
     inserAsnOnOffM(data) {
-      this.$router.push({path:'/business-asn/viewAsnDetail'})
+      this.$router.push({path: '/business-asn/viewAsnDetail'})
       // this.inserAsnOnOff = true
       // let no = null
       // for (const billTypDateElement of this.billTypeOptions) {
@@ -479,7 +598,7 @@ export default {
       crudAsn.add(data).then(res => {
         this.$message.success('新增成功')
         this.inserAsnOnOff = false
-        this.asnFrom=defaultForm;
+        this.asnFrom = defaultForm;
         this.crud.toQuery()
       })
     },
@@ -509,77 +628,236 @@ export default {
         this.asnOptions = res
       })
     },
-    asnDetailRouter(datas){
+    asnDetailRouter(datas) {
-      this.$router.push({path:'/business-asn/viewAsnDetail',query: {ids:datas.id}})
+      this.$router.push({path: '/business-asn/viewAsnDetail', query: {ids: datas.id}})
     },
     //入库批量确认
-    invVerifyS(data){
+    invVerifyS(data) {
       console.log(data)
       let ids = [];
       for (const idsKey of data) {
         ids.push(idsKey.id);
       }
-      invVerify(ids).then(res=>{
+      invVerify(ids).then(res => {
         // if (res != null){
         //   this.$message.error(res)
         // }else {
-          this.$message.success(res)
+        this.$message.success(res)
-          this.crud.toQuery()
+        this.crud.toQuery()
         // }
-      }).catch(e=>{
+      }).catch(e => {
         this.$message.error(e)
       })
     },
-    invVerifySTFM(selection, row){
+    invVerifySTFM(selection, row) {
-      if (selection.length>0){
+      if (selection.length > 0) {
         this.invVerifySTF = false;
-      }else {
+      } else {
         return
       }
       //判断
       for (const selectionElement of selection) {
         //打开/收货中
-        if (!(selectionElement.status === 'OPEN' || selectionElement.status === 'RECEIVING')){
+        if (!(selectionElement.status === 'OPEN' || selectionElement.status === 'RECEIVING')) {
           this.invVerifySTF = true;
         }
       }
     },
-    invVerifySTFAll(selection){
+    invVerifySTFAll(selection) {
-      if (selection.length>0){
+      if (selection.length > 0) {
         this.invVerifySTF = false;
-      }else {
+      } else {
         return
       }
       //判断
       for (const selectionElement of selection) {
         //打开/收货中
-        if (!(selectionElement.status === 'OPEN' || selectionElement.status === 'RECEIVING')){
+        if (!(selectionElement.status === 'OPEN' || selectionElement.status === 'RECEIVING')) {
           this.invVerifySTF = true;
         }
       }
-    }
+    },
-    /**
+    // 导入相关方法
-     * 根据条件禁用行复选框
+    showImportDialog() {
-     * 函数返回值为false则禁用选择(反之亦然)
+      this.importDialogVisible = true
-     * @param {Object} row - 行数据
+    },
-     * @param {String} index - 索引值
+
-     * @return Boolean
+    downloadTemplate(templateType) {
-     */
+      const templateConfig = {
-    // selectable: function(row, index) {
+        template1: {
-    //   // 地址不是 "秦皇岛市海港区居民" 才能被选中
+          filename: '标准导入模板.xlsx',
-    //   // if(row.receivedDate != null){
+          headers: ['INVOICE NO.', 'BOI', 'PO&LN NO.', 'PART NO.', 'DESCRIPTION', 'Q\'TY ', 'C/NO.'],
-    //   //   return false;
+          sampleData: [
-    //   // }
+            ['KCWT04108SM', 'EXP -', '7291-5366', 'RD829-6640-7', 'ASSY BRACKET,SWING', '3', '7074786'],
-    // return !(row.status != null);
+            ['KCWT04108SM', 'EXP -', '7291-5366', 'RD829-6640-7', 'ASSY BRACKET,SWING', '3', '7074785']
-    //   // 函数必须有返回值且是布尔值
+          ]
-    //   // 页面刷新后该函数会执行 N 次进行判断(N 为表格行数)
+        }
-    //   // 如果没有返回值则默认返回false(全部无法选中)
+      }
-    // },
+      const config = templateConfig[templateType]
+      if (!config) {
+        this.$message.error('模板类型不存在')
+        return
+      }
+
+      // 创建Excel文件并下载
+      this.createAndDownloadExcel(config)
+    },
+
+    createAndDownloadExcel(config) {
+      // 这里需要引入XLSX库来创建Excel文件
+      // 由于项目可能没有XLSX，我们使用简单的CSV格式
+      let csvContent = '\uFEFF' // BOM for UTF-8
+      csvContent += config.headers.join(',') + '\n'
+
+      config.sampleData.forEach(row => {
+        csvContent += row.join(',') + '\n'
+      })
+
+      const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'})
+      const link = document.createElement('a')
+      const url = URL.createObjectURL(blob)
+      link.setAttribute('href', url)
+      link.setAttribute('download', config.filename.replace('.xlsx', '.csv'))
+      link.style.visibility = 'hidden'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    },
+
+    async confirmImport() {
+      // 校验当前tab是否有文件
+      let hasFile = false;
+      let fileName = '';
+      let currentFile = null; // 新增变量存储文件对象
+
+      if (this.activeImportTab === 'template1') {
+        hasFile = this.fileList1.length > 0;
+        if (hasFile) {
+          currentFile = this.fileList1[0]; // 获取文件对象
+          fileName = currentFile.name;
+        }
+      } else if (this.activeImportTab === 'template2') {
+        hasFile = this.fileList2.length > 0;
+        if (hasFile) {
+          currentFile = this.fileList2[0];
+          fileName = currentFile.name;
+        }
+      } else if (this.activeImportTab === 'template3') {
+        hasFile = this.fileList3.length > 0;
+        if (hasFile) {
+          currentFile = this.fileList3[0];
+          fileName = currentFile.name;
+        }
+      }
+
+      if (!hasFile || !currentFile) {
+        this.$message.warning('请先上传文件');
+        return;
+      }
+
+      this.importLoading = true;
+      console.log('开始导入...' + this.activeImportTab + '文件:' + fileName);
+
+      const formData = new FormData();
+      // 修复：使用 currentFile.raw 获取原始文件对象
+      formData.append('file', currentFile.raw);
+      formData.append('templateType', this.activeImportTab);
+
+      const response = await importData.importAsnData(formData);
+      if (response.status === 200) {
+        this.crud.notify(response.message, CRUD.NOTIFICATION_TYPE.SUCCESS)
+        this.importDialogVisible = false;
+        this.importLoading = false;
+        this.crud.toQuery(); // 刷新列表
+        // 清空所有fileList
+        this.fileList1 = [];
+        this.fileList2 = [];
+        this.fileList3 = [];
+      } else {
+        this.crud.notify(response.message, CRUD.NOTIFICATION_TYPE.ERROR)
+      }
+
+    },
+    cancelImport() {
+      this.fileList1 = [];
+      this.fileList2 = [];
+      this.fileList3 = [];
+      this.importDialogVisible = false
+    },
+    // el-upload专用：校验文件大小和类型
+    beforeExcelUpload(file) {
+      const isExcel = /\.(xlsx|xls|csv)$/.test(file.name)
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isExcel) {
+        this.$message.error('只支持.xlsx, .xls, .csv 格式文件')
+        return false
+      }
+      if (!isLt2M) {
+        this.$message.error('文件大小不能超过2MB')
+        return false
+      }
+      return false
+    },
+    // el-upload专用：文件列表改变时；显示最新的文件
+    handleExcelChange(file, fileList) {
+      // 只保留当前tab的文件，其它tab清空
+      if (this.activeImportTab === 'template1') {
+        this.fileList1 = [file];
+        this.fileList2 = [];
+        this.fileList3 = [];
+      } else if (this.activeImportTab === 'template2') {
+        this.fileList1 = [];
+        this.fileList2 = [file];
+        this.fileList3 = [];
+      } else if (this.activeImportTab === 'template3') {
+        this.fileList1 = [];
+        this.fileList2 = [];
+        this.fileList3 = [file];
+      }
+    },
+    // el-upload专用：文件移除
+    handleExcelRemove() {
+      if (this.activeImportTab === 'template1') {
+        this.fileList1 = [];
+      } else if (this.activeImportTab === 'template2') {
+        this.fileList2 = [];
+      } else if (this.activeImportTab === 'template3') {
+        this.fileList3 = [];
+      }
+    },
   }
 }
 </script>
 
 <style scoped>
+.import-content {
+  padding: 5px 0;
+}
 
+.template-info {
+  margin-bottom: 10px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  border-left: 4px solid #409eff;
+}
+
+.template-info h4 {
+  margin: 0 0 10px 0;
+  color: #303133;
+  font-size: 14px;
+}
+
+.template-info p {
+  margin: 0 0 10px 0;
+  color: #606266;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.dialog-footer {
+  text-align: right;
+  padding-top: 10px;
+}
 
 </style>