fix:阿里药品关系维护

src/views/basic/product/drug/drugMaintain.vue

@@ -79,14 +79,31 @@
         </el-row>
         <el-divider/>
       </el-form>
-      <div class="top-right-btn">
+      <div class="top-right-btn" style="display: flex; align-items: center;">
         <el-button-group>
           <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
           <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
           <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
           <!--<el-button type="primary" icon="el-icon-plus" @click="chooseDrug">选入药品信息</el-button>-->
           <el-button type="primary" icon="el-icon-plus" @click="chooseHouseDrug">添加院内药品</el-button>
-          <!--          <el-button type="primary" icon="el-icon-plus" @click="addDrug">新增药品信息</el-button>-->
+          <el-upload
+            :action="action"
+            :headers ="headers"
+            accept=".txt"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :before-remove="beforeRemove"
+            :on-success="handleSuccess"
+            :on-progress="handleProgress"
+            :on-error="handleError"
+            :before-upload="beforeUpload"
+            :limit="1"
+            :on-exceed="handleExceed"
+            :file-list="fileList"
+            :show-file-list="false"
+            :data="extraData">
+            <el-button  icon="el-icon-upload" type="primary" style="margin: 0;">药品标识上传</el-button>
+          </el-upload>
         </el-button-group>
       </div>
 
@@ -216,6 +233,7 @@ import {
 import drugAdd from '@/views/basic/product/drug/drugAdd'
 import chooseDrug from '@/views/basic/product/drug/chooseDrug'
 import chooseHouseDrug from '@/views/basic/product/drug/chooseHouseDrug'
+import {getAdminId, getToken} from '@/utils/auth';
 
 export default {
   components: {drugAdd, chooseDrug,chooseHouseDrug},
@@ -271,8 +289,15 @@ export default {
         allowNoSerial: null,
         pId: null,
       },
-      total: 0
+      total: 0,
-
+      headers:{
+        ADMINID: getAdminId(),
+        ADMINTOKEN: getToken()
+      },
+      extraData:{"uuid": "upload-txt"},
+      uploadLoading: false,
+      action: process.env.VUE_APP_BASE_API + "/udiwms/aliDrug/txtUpload",
+      fileList: []
     }
   },
   methods: {
@@ -313,6 +338,51 @@ export default {
       this.thisData = val;
       this.chooseHouseDrugVisible = true
     },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    handleSuccess(res, file, fileList) {
+      fileList = fileList.filter(item => item.response.code === 20000);
+      this.fileList = fileList;
+      if (res.code === 20000) {
+        this.$message.success(res.message);
+      } else {
+        this.$message.error(res.message);
+      }
+      this.uploadLoading.close();
+    },
+    beforeUpload(file) {
+      const isXML = file.name.endsWith('.txt');
+      const isLt5M = file.size / 1024 / 1024 < 10;
+      if (!isXML) {
+        this.$message.error('上传文件只能是 TXT 格式!');
+      }
+      if (!isLt5M) {
+        this.$message.error('上传文件大小不能超过 10MB!');
+      }
+      return isXML && isLt5M;
+    },
+    handleProgress() {
+      this.uploadLoading = this.$loading({
+        lock: true,
+        text: '文件上传中…',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.5)'
+      });
+    },
+    handleError() {
+      this.uploadLoading.close();
+      this.$message.error('文件上传失败，请检查文件大小或文件格式');
+    },
     getList() {
       getUdiInfos(this.filterQuery)
         .then((response) => {
@@ -395,5 +465,17 @@ export default {
 </script>
 
 <style scoped>
+.top-right-btn {
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中 */
+  flex-wrap: nowrap; /* 防止换行 */
+}
+
+.el-button-group {
+  display: flex; /* 确保按钮组内的元素也使用Flexbox布局 */
+}
 
+.el-upload {
+  display: inline-flex; /* 确保上传组件与其他按钮在同一行 */
+}
 </style>