批量调整积分详情

src/components/wechatmembers/bulkIntegral.vue

@@ -58,7 +58,7 @@
             fixed="right"
             label="操作">
             <template slot-scope="scope">
-              <el-button @click="logDetails(scope.row)" type="text">日志详情</el-button>
+              <el-button @click="logDetails(scope.row.id, scope.row.type)" type="text">日志详情</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -143,6 +143,29 @@
         <el-button type="primary" @click="importTable" :disable="load">确 定</el-button>
       </span>
     </el-dialog>
+
+    <el-dialog
+      title=""
+      :visible.sync="dialogSuccess"
+      width="420px"
+      class="dialogSuccess"
+      @closed="onDialogSuccessClosed">
+      <div class="success_icon"><i class="el-icon-success"></i></div>
+      <p class="successHeader">新建导入任务成功！</p>
+      <p class="successCon">
+        请前往会员列表点击 
+        <el-button
+          type="primary"
+          class="member-wechat-timer"
+          icon="el-icon-time"
+        ></el-button> 
+        查看进度，
+      </p>
+      <p class="successCon">导入完成后可点击批量导入记录查看结果</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="importTable" :disable="load">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -155,7 +178,7 @@ export default {
   data() {
     return {
       navpath: [{ name: "首页", path: "" }, { name: "微信会员", path: "" }, { name: "批量导入", path: "" }],
-      tableData: [],
+      tableData: [{ name: 123, id: 123 }],
       // 搜索选项值
       importType: '',
       // 新建dialog
@@ -173,6 +196,15 @@ export default {
       rows: 0, // excel数据数量
       // 上传验证加载
       load: false,
+      // 成功上传后的dialog
+      dialogSuccess: false,
+
+      // 换页
+      page: {
+        currentPage: 1,
+        pageSize: 20,
+        totalCount: 0
+      }
     }
   },
   methods: {
@@ -180,7 +212,9 @@ export default {
     },
     handleCurrentChange(val) {},
     // 跳转详情
-    logDetails() {},
+    logDetails(id, type) {
+      this.$router.push({ path: '/bulkLogsDetail', query: { id: id, type: 666 } });
+    },
     // 打开dialog
     openDialogImport() {
       this.formByImport.importValue = '';
@@ -202,8 +236,9 @@ export default {
     // 确认导入
     importTable() {
       this.$refs.formByImport.validateField('importValue' , err => {
-        if(!err) {
+        if(!err && this.formByImport.fileList.length > 0) {
           this.dialogImport = false
+          this.dialogSuccess = true;
         }
       })
     },
@@ -282,6 +317,9 @@ export default {
     },
     handleError() {
       this.load = false;
+    },
+    onDialogSuccessClosed() {
+      // 更新表单
     }
   },
   created() {
@@ -303,7 +341,7 @@ export default {
       .flex {
         padding-bottom: 22px;
       }
-      /deep/ .el-table th>.cell {
+      >>> .el-table th>.cell {
         font-weight: 700;
         color: #303133;
       }
@@ -331,6 +369,37 @@ export default {
       font-size: 12px;
     }
   }
+  .success_icon {
+    text-align: center;
+    color: #52C41A;
+    font-size: 47px;
+  }
+  .successHeader {
+    text-align center;
+    color: #303133;
+    font-size: 16px;
+    line-height: 39px;
+  }
+  .successCon {
+    text-align center;
+    color: #606266;
+    font-size: 12px;
+  }
+  .member-wechat-timer {
+    width 20px;
+    height 20px;
+    font-size: 10px;
+    line-height: 20px;
+    padding: 0;
+  }
+  .dialogSuccess >>>.el-dialog__footer {
+    text-align center;
+    padding-bottom: 22px;
+  }
+  >>>.el-pagination {
+    text-align right;
+    margin: 20px 0 40px;
+  }
 }
 .flex {
   display: flex;

src/components/wechatmembers/bulkLogsDetail.vue

+<template>
+  <div id="bulkLogsDetail">
+    <nav-path :navpath="navpath"></nav-path>
+    <div class="content">
+      <div class="contentInfo">
+        <div class="flex">
+          <span class="headerTips">总条数：1000条，成功导入995条，<span class="headerTipsError">错误5条</span></span>
+          <el-button type="primary" @click="exportExcel"><i class="iconfont icon-icon_yunxiazai"></i> 导出</el-button>
+        </div>
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="序号">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="错误提示">
+          </el-table-column>
+          <el-table-column
+            prop="province"
+            label="会员卡号">
+          </el-table-column>
+          <el-table-column
+            prop="city"
+            label="变更额度">
+          </el-table-column>
+          <el-table-column
+            v-if="integralType == '积分增加'"
+            prop="address"
+            label="成本主体">
+          </el-table-column>
+          <el-table-column
+            prop="zip"
+            label="原因备注">
+          </el-table-column>
+        </el-table>
+        
+        <!-- 分页 -->
+        <el-pagination
+          v-if="tableData.length > 0"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="page.currentPage"
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="page.pageSize"
+          layout="total, sizes, prev, pager, next"
+          :total="page.totalCount">
+        </el-pagination>
+      </div>
+      <vue-gic-footer></vue-gic-footer>
+    </div>
+  </div>
+</template>
+<script>
+import { doFetch, doFetchqs } from "../../components/axios/api";
+import NavPath from "@/common/navbar/navbar.vue";
+import url from "../../components/axios/url";
+
+export default {
+  data() {
+    return {
+      navpath: [{ name: "首页", path: "" }, { name: "微信会员", path: "" }, { name: "批量导入", path: "" }, { name: "日志详情", path: "" }],
+      tableData: [{ name: 123, id: 123 }],
+      // 换页
+      page: {
+        currentPage: 1,
+        pageSize: 20,
+        totalCount: 0
+      },
+      // 判断积分类型
+      integralType: '积分扣除',
+    }
+  },
+  methods: {
+    // 导出
+    exportExcel() {},
+    // 获取数据
+    getLogsDetail() {},
+  },
+  created() {
+    console.log(this.$route.query.id)
+    console.log(this.$route.query.type)
+  },
+  components: {
+    NavPath
+  }
+}
+</script>
+<style lang="scss" scoped>
+#bulkLogsDetail {
+  .content {
+    padding: 22px 24px;
+    .contentInfo {
+      padding: 30px 24px;
+      background-color: #fff;
+      .headerTips {
+        color: #303133;
+        font-size: 14px;
+      }
+      .headerTipsError {
+        color: #F5222D;
+      }
+      .flex {
+        padding-bottom: 22px;
+      }
+      /deep/ .el-table th>.cell {
+        font-weight: 700;
+        color: #303133;
+      }
+      /deep/ .el-pagination {
+        text-align: right;
+        margin: 20px 0 40px;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/router/index.js

@@ -228,6 +228,14 @@ export const constantRouterMap = [
         meta: {
           title: "批量导入"
         }
+      },
+      {
+        path: "/bulkLogsDetail",
+        name: "/bulkLogsDetail",
+        component: _import("wechatmembers", "bulkLogsDetail"),
+        meta: {
+          title: "日志详情"
+        }
       }
     ]
   }