【新增】封装组件：导出按钮

src/components/Common/export-button.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" :icon="isIcon ? 'el-icon-download':''" @click="handleExport">{{exText}}</el-button>
+  </div>
+</template>
+
+<script>
+import { downloadFiles } from '@/utils/util'
+
+export default {
+  name: 'ExportButton',
+  props: {
+    exText: {
+      type: String,
+      default: '导出数据'
+    },
+    isIcon: {
+      type: Boolean,
+      default: true
+    },
+    exUrl: {
+      type: String,
+      default: '',
+    },
+    exParams: {
+      type: Object,
+      default: null
+    }
+  },
+  methods: {
+    handleExport() {
+      downloadFiles(this.exUrl, this.exParams);
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -20,11 +20,16 @@ import '@/permission' // permission control
 
 import * as filters from './filters' // global filters
 
+// 成功/错误提示
 import {successMsg, errorMsg, warningNotify} from '@/utils/common.js'
 Vue.prototype.$successMsg = successMsg;
 Vue.prototype.$errorMsg = errorMsg;
 Vue.prototype.$warningNotify = warningNotify;
 
+// 自定义组件
+import ExportButton from '@/components/Common/export-button.vue'
+Vue.component('ExportButton', ExportButton);
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/styles/index.scss

@@ -328,4 +328,33 @@ div:focus {
       border-top: none;
     }
   }
+}
+
+.diy-form-1 {
+  .item {
+    display: flex;
+    height: 40px;
+    .label {
+      width: 100px;
+      display: flex;
+      align-items: center;
+      padding-right: 10px;
+      box-sizing: border-box;
+      font-size: 14px;
+      color: #606266;
+      font-weight: 700;
+    }
+    .value {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      font-size: 14px;
+      color: #333333;
+      input {
+        border: none;
+        padding: 0;
+      }
+    }
+  }
 }

src/utils/util.js

@@ -10,7 +10,7 @@ import { getToken } from '@/utils/auth'
 export function deleteEmptyObj(obj) {
   let newObj = obj;
   for(var key in newObj) {
-    if(newObj[key] === '' || newObj[key] === null) {
+    if(newObj[key] === '' || newObj[key] === null || newObj[key] === undefined) {
       delete newObj[key]
     }
   }

src/views/merchant/merchant_list.vue

@@ -2,9 +2,6 @@
   <div class="app-container">
     <!-- 筛选条件 -->
     <div class="screen-container">
-      <div class="top clearfix">
-        <div class="title fl">条件筛选</div>
-      </div>
       <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
         <el-row :gutter="20">
           <el-col :xs="24" :sm="12" :lg="6">
@@ -52,7 +49,7 @@
           <el-button size="small" type="primary" @click="toCreate()">开通账号</el-button>
         </div>
         <div class="fr">
-          <el-button size="small" type="primary" icon="el-icon-download" @click="handleExport">导出数据</el-button>
+          <ExportButton :exUrl="'admin/user/mch/export'" :exParams="exParams" />
         </div>
       </div>
       <div class="table">
@@ -284,6 +281,15 @@ export default {
         openSidebar: this.sidebar.opened
       }
     },
+    exParams() {
+      return {
+        userName: this.screenForm.account,
+        nickName: this.screenForm.nickName,
+        linkPhone: this.screenForm.phone,
+        email: this.screenForm.email,
+        status: this.screenForm.status,
+      }
+    }
   },
   methods: {
    goBack() {