三方商场新增导入导出模板

src/api/basicdata/ThreePartyMallManagement.js

@@ -7,3 +7,13 @@ export const $_pageList = params => {
     params,
   });
 };
+
+// 导出模板
+export const $_exportTripartiteMallTemplate = data => {
+  return request({
+    url: '/api/logpm-basicdata/basicdataTripartiteMall/exportTripartiteMallTemplate',
+    method: 'post',
+    data,
+    responseType: 'blob',
+  });
+};

src/views/basicdata/brand/ThreePartyMallManagement.vue

@@ -18,7 +18,9 @@
       <el-row>
         <div class="avue-crud__header">
           <!-- 头部左侧按钮模块 -->
-          <div class="avue-crud__left"></div>
+          <div class="avue-crud__left">
+            <el-button type="primary" icon="Upload" @click="importExcel">导 入</el-button>
+          </div>
           <!-- 头部右侧按钮模块 -->
           <div class="avue-crud__right">
             <el-button icon="Download" @click="handleExportData" circle></el-button>
@@ -32,16 +34,8 @@
       <!-- 首页表格 -->
       <el-row>
         <!-- 列表模块 -->
-        <tablecmt
-          class="tableNode"
-          :columnList="details.columnList"
-          :tableData="data"
-          :loading="loadingObj.list"
-          @inputTxt="inputsc"
-          @timeCheck="timesc"
-          @selectCheck="selectsc"
-          @selection="selectionChange"
-        >
+        <tablecmt class="tableNode" :columnList="details.columnList" :tableData="data" :loading="loadingObj.list"
+          @inputTxt="inputsc" @timeCheck="timesc" @selectCheck="selectsc" @selection="selectionChange">
           <template #default="slotProps">
             <template v-if="slotProps.scope.column.label === '操作'">
               <div class="ElBtnClass">
@@ -57,17 +51,9 @@
       <el-row class="el-fy">
         <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
           <div></div>
-          <el-pagination
-            align="right"
-            background
-            @size-change="sizeChange"
-            @current-change="currentChange"
-            :current-page="page.currentPage"
-            :page-sizes="[30, 50, 80, 120]"
-            :page-size="page.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="page.total"
-          >
+          <el-pagination align="right" background @size-change="sizeChange" @current-change="currentChange"
+            :current-page="page.currentPage" :page-sizes="[30, 50, 80, 120]" :page-size="page.pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="page.total">
           </el-pagination>
         </div>
       </el-row>
@@ -81,52 +67,55 @@
           <el-input v-model.trim="form.tripartiteCoding" placeholder="请输入三方编码" />
         </el-form-item>
         <el-form-item label="品牌">
-          <el-select
-            v-model="form.brandId"
-            filterable
-            remote
-            :remote-method="remoteMethod"
-            class="m-2"
-            placeholder="请选择品牌"
-            clearable
-          >
-            <el-option
-              v-for="item in brandList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+          <el-select v-model="form.brandId" filterable remote :remote-method="remoteMethod" class="m-2"
+            placeholder="请选择品牌" clearable>
+            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
       </el-form>
       <!-- 表单按钮 -->
       <template #footer>
         <span v-if="!view" class="dialog-footer">
-          <el-button
-            type="primary"
-            icon="el-icon-circle-check"
-            :disabled="loadingObj.list"
-            @click="handleSubmit"
-            >提 交</el-button
-          >
+          <el-button type="primary" icon="el-icon-circle-check" :disabled="loadingObj.list" @click="handleSubmit">提
+            交</el-button>
         </span>
       </template>
     </el-dialog>
+
+    <el-dialog :modal-append-to-body="false" :append-to-body="false" title="三方商场" append-to-body v-model="excelBox"
+      width="555px">
+      <div>
+        <el-divider content-position="left">三方商场</el-divider>
+      </div>
+      <div class="flex-c-sb">
+        <P>请确认传入的文件为Excel文件格式</P>
+        <el-button type="primary" icon="Download" @click="download"> 点击下载 </el-button>
+      </div>
+
+      <div v-loading="loadingObj.UploadLoadong">
+        <el-upload class="upload-demo" drag :headers="headers"
+          action="/api/logpm-basicdata/basicdataTripartiteMall/importTripartiteMall" :before-upload="handleBeforeUpload"
+          :on-success="handleSuccess" :on-error="handleClose" multiple>
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+          <div class="el-upload__text">拖拽文件或 <em>点击上传</em></div>
+        </el-upload>
+      </div>
+
+    </el-dialog>
+
+
+
   </basic-container>
   <!-- 列表配置显示 -->
-  <edittablehead
-    @setcolum="setnewcolum"
-    @closce="showdrawer"
-    :drawerShow="drawerShow"
-    :columnList="details.columnList"
-    v-model="details.columnList"
-  ></edittablehead>
+  <edittablehead @setcolum="setnewcolum" @closce="showdrawer" :drawerShow="drawerShow" :columnList="details.columnList"
+    v-model="details.columnList"></edittablehead>
 </template>
 
 <script setup>
 import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
 import { columnList } from '@/option/basicdata/ThreePartyMallManagement.js';
-import { $_pageList } from '@/api/basicdata/ThreePartyMallManagement';
+import { getToken } from '@/utils/auth';
+import { $_pageList, $_exportTripartiteMallTemplate } from '@/api/basicdata/ThreePartyMallManagement';
 import { getDetail, update, remove } from '@/api/basicdata/basicdataTripartiteMall';
 import { getList as getBrandList } from '@/api/basicdata/basicBrand';
 import { processRowPropertyName, setNodeHeight } from '@/utils/util';
@@ -138,6 +127,7 @@ import dayjs from 'dayjs';
 import { exportExcel } from '@/utils/exportData';
 const $router = useRouter(); //跳转
 const $useStore = useStore(); //权限
+const excelBox = ref(false)
 const $route = useRoute(); //获取地址栏参数
 const DeliveryType = ref([]); //配送类型
 const brandList = ref([]); //品牌
@@ -188,6 +178,7 @@ const details = reactive({
   data: [],
   /** 页面loading */
   loadingObj: {
+    UploadLoadong: false,
     /** 列表加载loading */
     list: false,
     packageListLoading: false,
@@ -262,6 +253,9 @@ const timesc = (index, row) => {
   onLoad();
 };
 
+const headers = computed(() => {
+  return { 'Blade-Auth': 'Bearer ' + getToken() };
+})
 /** 表格表头下拉框选择 */
 const selectsc = (index, row) => {
   processRowPropertyName(index, row, details.query);
@@ -423,13 +417,46 @@ const ViewDelete = row => {
         onLoad();
       }
     })
-    .catch(() => {});
+    .catch(() => { });
 };
 
 /** 导出表格 */
 const handleExportData = () => {
   exportExcel(details.columnList, details.data, '三方商场 - ' + new Date().getTime());
 };
+const handleSuccess = (res) => {
+  console.log(res, '上传成功');
+  if(res.code ==200){
+    ElMessage.success('上传成功');
+    onLoad();
+  }
+
+};
+const download = async () => {
+  try {
+    details.loadingObj.packageListLoading = true
+    const res = await $_exportTripartiteMallTemplate();
+    if (res.status !== 200) {
+      return
+    };
+    ElMessage.success('模板下载成功');
+    downloadXls(res.data, '三方商场管理导入模板.xlsx');
+  } catch (error) {
+    console.log('error :>> ', error);
+  } finally {
+    details.loadingObj.packageListLoading = false
+  }
+
+}
+// 导入
+const importExcel=()=>{
+  excelBox.value=true;
+}
+const handleClose = (res) => {
+  let msgData = JSON.parse(res['message']);
+  console.log(msgData, 'msgData');
+  ElMessage.warning(msgData.msg || '上传失败');
+};
 </script>
 
 <style scoped lang="scss">
@@ -438,19 +465,23 @@ const handleExportData = () => {
   padding: 0;
   background-color: transparent;
 }
+
 :deep(.el-card) {
   height: 100%;
 }
+
 :deep(.el-card__body) {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
+
 .el-fy {
   flex: 1;
   display: flex;
   align-items: flex-end;
 }
+
 .avue-crud {
   height: 100%;
   display: flex;