入库导入

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)
-      this.hiddenColumns= JSON.parse(strHidden);
+
+      // 检查 sessionStorage 值是否存在
+      if (!strHidden) {
+        this.hiddenColumns = []
+        return
+      }
+
+      // 安全解析 JSON 数据
+      try {
+        this.hiddenColumns = JSON.parse(strHidden) || []
+      } catch (error) {
+        this.hiddenColumns = []
+        return
+      }
+
       if (this.hiddenColumns.length > 0) {
-        console.log("------移除---------------")
         const table = this.crud.props.table
+
+        // 预先构建 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 = table.$children.find(e => e.label === column.label)
+          const vm = labelToColumnMap[column.label]
+
+          // 检查元素是否存在
+          if (!vm) {
+            return
+          }
 
           const columnConfig = vm.columnConfig
 
-
+          // 检查 columnConfig 是否有效
-          console.log(columnConfig)
+          if (!columnConfig) {
-          vm.owner.store.commit('removeColumn', columnConfig, null)
+            return
-
-        })
-        this.ignoreNextTableColumnsChange = false
-        console.log("--------移除完成-------------")
-        setTimeout(() => {
-          // 方法区
-          this.showcolumn();
-        }, 200)
           }
 
-      //vm.owner.store.commit('insertColumn', columnConfig, newIndex+myindex + 1 , null)
+          if (vm.owner && vm.owner.store) {
+            vm.owner.store.commit('removeColumn', columnConfig, null)
+          }
+        })
 
+        this.ignoreNextTableColumnsChange = false
 
+        setTimeout(() => {
+          // 方法区
+          this.showcolumn()
+        }, 200)
+      }
     },
     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

@@ -5,10 +5,12 @@
     <div v-if="crud.props.searchToggle">
       <!-- 搜索 -->
       <!--      <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"
+                @keyup.enter.native="crud.toQuery"/>
       <!--      <label class="el-form-item-label">库区</label>-->
       <!--      <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-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"
@@ -21,7 +23,8 @@
 
       <!--      <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>-->
-      <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"
@@ -68,6 +71,17 @@
           整单入库
         </el-button>
 
+        <el-button
+          slot="left"
+          class="filter-item"
+          type="success"
+          icon="el-icon-upload2"
+          size="mini"
+          v-permission="permission.import"
+          @click="showImportDialog">
+          导入
+        </el-button>
+
         <!--        <el-button-->
         <!--          slot="right"-->
         <!--          class="filter-item"-->
@@ -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,9 +199,102 @@
           <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 prop="code" label="单号" width="120px" align="center"/>
@@ -223,7 +331,8 @@
             {{ 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"
@@ -253,6 +362,7 @@
 <script>
 import DateRangePicker from "@/components/DateRangePicker/index.vue";
 import crudAsn, {getCodeNo, queryAsnAll, save} from '@/api/asn'
+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'
@@ -264,6 +374,7 @@ import { add, invVerify, queryAsnDetailAll } from '@/api/asnDetail'
 import {queryPointList} from '@/api/point'
 import {queryItemAll} from '@/api/item'
 import {formatDate} from '@/utils/commonUtils'
+import UploadExcelComponent from '@/components/UploadExcel/index.vue'
 
 const defaultForm = {
   id: null,
@@ -295,7 +406,7 @@ 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() {
@@ -319,6 +430,7 @@ export default {
         del: ['admin', 'asn:del'],
         invVerify: ['admin', 'asn:invVerify'],
         inserAsn: ['admin', 'asn:inserAsn'],
+        import: ['admin', 'asn:import'],
       },
       rules: {
         code: [
@@ -405,7 +517,14 @@ export default {
       itemListData: [],
       pointList: [],
       asnOptions: [],
-      invVerifySTF:true
+      invVerifySTF: true,
+      // 导入相关数据
+      importDialogVisible: false,
+      activeImportTab: 'template1',
+      importLoading: false,
+      fileList1: [],  // 用于存储当前文件
+      fileList2: [],
+      fileList3: []
     }
   },
   mounted() {
@@ -557,29 +676,188 @@ export default {
           this.invVerifySTF = true;
         }
       }
+    },
+    // 导入相关方法
+    showImportDialog() {
+      this.importDialogVisible = true
+    },
+
+    downloadTemplate(templateType) {
+      const templateConfig = {
+        template1: {
+          filename: '标准导入模板.xlsx',
+          headers: ['INVOICE NO.', 'BOI', 'PO&LN NO.', 'PART NO.', 'DESCRIPTION', 'Q\'TY ', 'C/NO.'],
+          sampleData: [
+            ['KCWT04108SM', 'EXP -', '7291-5366', 'RD829-6640-7', 'ASSY BRACKET,SWING', '3', '7074786'],
+            ['KCWT04108SM', 'EXP -', '7291-5366', 'RD829-6640-7', 'ASSY BRACKET,SWING', '3', '7074785']
+          ]
         }
-    /**
+      }
-     * 根据条件禁用行复选框
+      const config = templateConfig[templateType]
-     * 函数返回值为false则禁用选择(反之亦然)
+      if (!config) {
-     * @param {Object} row - 行数据
+        this.$message.error('模板类型不存在')
-     * @param {String} index - 索引值
+        return
-     * @return Boolean
+      }
-     */
+
-    // selectable: function(row, index) {
+      // 创建Excel文件并下载
-    //   // 地址不是 "秦皇岛市海港区居民" 才能被选中
+      this.createAndDownloadExcel(config)
-    //   // if(row.receivedDate != null){
+    },
-    //   //   return false;
+
-    //   // }
+    createAndDownloadExcel(config) {
-    // return !(row.status != null);
+      // 这里需要引入XLSX库来创建Excel文件
-    //   // 函数必须有返回值且是布尔值
+      // 由于项目可能没有XLSX，我们使用简单的CSV格式
-    //   // 页面刷新后该函数会执行 N 次进行判断(N 为表格行数)
+      let csvContent = '\uFEFF' // BOM for UTF-8
-    //   // 如果没有返回值则默认返回false(全部无法选中)
+      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>