页面修改

src/components/tradePavilion/brandManagement.vue

@@ -2,19 +2,9 @@
   <div class="brandManagement">
     <div class="el-card__header">
       <span>品牌列表</span>
-      <div
-        style="display: flex; flex-direction: row; align-items: center"
-        v-if="!readonly"
-      >
-        <el-button type="primary" class="el-button--small" @click="addTopic"
-          >新增</el-button
-        >
-        <el-button
-          class="el-button--small"
-          @click="dialogVisible = true"
-          style="float: right"
-          type="primary"
-          >批量导出
+      <div style="display: flex; flex-direction: row; align-items: center" v-if="!readonly">
+        <el-button type="primary" class="el-button--small" @click="addTopic">新增</el-button>
+        <el-button class="el-button--small" @click="dialogVisible = true" style="float: right" type="primary">批量导出
         </el-button>
       </div>
     </div>
@@ -22,89 +12,42 @@
       <div style="display: flex; flex-direction: row; align-items: center">
         <div class="block">
           <span style="margin-left: 10px">品牌名</span>
-          <el-input
-            @keyup.enter.native="(msg.pageIndex = 1), getList()"
-            @clear="(msg.pageIndex = 1), getList()"
-            style="display: inline-block; width: 225px; height: 30px"
-            placeholder="请输入品牌名"
-            v-model="msg.BrandName"
-            size="small"
-            clearable
-          >
+          <el-input @keyup.enter.native="(msg.pageIndex = 1), getList()" @clear="(msg.pageIndex = 1), getList()"
+            style="display: inline-block; width: 225px; height: 30px" placeholder="请输入品牌名" v-model="msg.BrandName"
+            size="small" clearable>
           </el-input>
           <span style="margin-left: 10px">商铺性质</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 10px"
-            v-model="msg.ProjectType"
-            size="small"
-            placeholder="请选择商铺性质"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 10px"
+            v-model="msg.ProjectType" size="small" placeholder="请选择商铺性质">
             <el-option label="不限" :value="0"></el-option>
-            <el-option
-              :label="x.Name"
-              :value="x.Id"
-              v-for="(x, y) in ProjectTypeList"
-              :key="y"
-            ></el-option>
+            <el-option :label="x.Name" :value="x.Id" v-for="(x, y) in ProjectTypeList" :key="y"></el-option>
           </el-select>
           <span style="margin-left: 10px">品牌分类</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 10px"
-            v-model="msg.BrandClassId"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 10px"
+            v-model="msg.BrandClassId" size="small" placeholder="请选择">
             <el-option label="不限" :value="0"></el-option>
-            <el-option
-              :label="x.ClassName"
-              :value="x.ID"
-              v-for="(x, y) in BrandClassList"
-              :key="y"
-            ></el-option>
+            <el-option :label="x.ClassName" :value="x.ID" v-for="(x, y) in BrandClassList" :key="y"></el-option>
           </el-select>
           <span style="margin-left: 10px">认证用户</span>
 
-          <el-select
-            size="small"
-            v-model="msg.UserId"
-            :filter-method="ChangeListName"
-            filterable
-            @change="(msg.pageIndex = 1), getList()"
-            placeholder="请选择"
-          >
+          <el-select size="small" v-model="msg.UserId" :filter-method="ChangeListName" filterable
+            @change="(msg.pageIndex = 1), getList()" placeholder="请选择">
             <el-option label="不限" :value="0"></el-option>
-            <el-option
-              v-for="item in userList"
-              :key="item.Id"
-              :label="item.Name"
-              :value="item.Id"
-            >
+            <el-option v-for="item in userList" :key="item.Id" :label="item.Name" :value="item.Id">
             </el-option>
           </el-select>
         </div>
       </div>
-      <div
-        style="
+      <div style="
           display: flex;
           flex-direction: row;
           align-items: center;
           flex-wrap: wrap;
-        "
-      >
+        ">
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>上下水</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.Plumbing"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px"
+            v-model="msg.Plumbing" size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <el-option label="否" :value="0"></el-option>
@@ -112,14 +55,8 @@
         </div>
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>管径</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.Caliber"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px"
+            v-model="msg.Caliber" size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <el-option label="否" :value="0"></el-option>
@@ -127,14 +64,8 @@
         </div>
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>排污</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.Sewage"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px" v-model="msg.Sewage"
+            size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <el-option label="否" :value="0"></el-option>
@@ -142,14 +73,8 @@
         </div>
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>燃气</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.RanQi"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px" v-model="msg.RanQi"
+            size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <el-option label="否" :value="0"></el-option>
@@ -157,14 +82,8 @@
         </div>
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>排烟量</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.PaiYan"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px" v-model="msg.PaiYan"
+            size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <el-option label="否" :value="0"></el-option>
@@ -172,14 +91,8 @@
         </div>
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>空调</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.KongTiao"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px"
+            v-model="msg.KongTiao" size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <el-option label="否" :value="0"></el-option>
@@ -187,14 +100,8 @@
         </div>
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>新风</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.XinFeng"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px"
+            v-model="msg.XinFeng" size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <el-option label="否" :value="0"></el-option>
@@ -202,14 +109,8 @@
         </div>
         <div class="block" style="margin-top: 15px; margin-left: 10px">
           <span>成都落地</span>
-          <el-select
-            class="w100"
-            @change="(msg.pageIndex = 1), getList()"
-            style="margin-left: 5px"
-            v-model="msg.IsInChengdu"
-            size="small"
-            placeholder="请选择"
-          >
+          <el-select class="w100" @change="(msg.pageIndex = 1), getList()" style="margin-left: 5px"
+            v-model="msg.IsInChengdu" size="small" placeholder="请选择">
             <el-option label="不限" :value="-1"></el-option>
             <el-option label="是" :value="1"></el-option>
             <!-- <el-option label="否" :value="0"></el-option> -->
@@ -219,12 +120,7 @@
       </div>
     </div>
     <div style="padding: 20px; background: #fff">
-      <el-table
-        :data="dataList"
-        header-cell-class-name="headClass"
-        style="width: 100%"
-        border
-      >
+      <el-table :data="dataList" header-cell-class-name="headClass" style="width: 100%" border>
         <el-table-column prop="Id" label="ID" width="100">
           <template slot-scope="scope">
             <span @click="goRecruit(scope.row.ID)">{{ scope.row.ID }}</span>
@@ -235,12 +131,8 @@
         <el-table-column prop="BrandName" label="品牌"> </el-table-column>
         <el-table-column prop="Logo" label="Logo" width="100">
           <template slot-scope="scope">
-            <el-image
-              v-if="scope.row.Logo"
-              :src="scope.row.Logo"
-              style="width: 50px"
-              :preview-src-list="scope.row.LogoList"
-            >
+            <el-image v-if="scope.row.Logo" :src="scope.row.Logo" style="width: 50px"
+              :preview-src-list="scope.row.LogoList">
             </el-image>
           </template>
         </el-table-column>
@@ -248,10 +140,8 @@
         </el-table-column>
         <el-table-column prop="BuiltUpArea" label="建筑面积" width="200">
           <template slot-scope="scope">
-            <span
-              >{{ scope.row.BuiltUpArea }} 至
-              {{ scope.row.EndBuiltUpArea }} 平</span
-            >
+            <span>{{ scope.row.BuiltUpArea }} 至
+              {{ scope.row.EndBuiltUpArea }} 平</span>
           </template>
         </el-table-column>
         <el-table-column prop="ProjectName" label="商铺性质" width="150">
@@ -260,104 +150,61 @@
         </el-table-column>
         <el-table-column prop="CustomerType" label="客群定位" width="160">
         </el-table-column>
-        <el-table-column
-          prop="UserName"
-          width="100"
-          label="认证用户"
-        ></el-table-column>
+        <el-table-column prop="UserName" width="100" label="认证用户"></el-table-column>
         <el-table-column fixed="right" label="操作" width="120">
           <template slot-scope="scope" v-if="!readonly">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="编辑"
-              placement="top"
-            >
-              <img
-                src="../../assets/img/setup/edit.png"
-                alt=""
-                class="imgstyle"
-                @click="Edit(scope.row)"
-              />
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)" />
             </el-tooltip>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="删除"
-              placement="top"
-            >
-              <img
-                src="../../assets/img/setup/del.png"
-                alt=""
-                class="imgstyle"
-                @click="delete_b(scope.row)"
-              />
+            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)" />
             </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-        style="text-align: right"
-        background
-        @current-change="handleCurrentChange"
-        :page-size="msg.pageSize"
-        layout="total, prev, pager, next"
-        :current-page.sync="msg.pageIndex"
-        :total="pageCount"
-      >
+      <el-pagination style="text-align: right" background @current-change="handleCurrentChange"
+        :page-size="msg.pageSize" layout="total, prev, pager, next" :current-page.sync="msg.pageIndex"
+        :total="pageCount">
       </el-pagination>
     </div>
 
     <!-- 选择导出信息 -->
     <el-dialog title="选择导出信息" :visible.sync="dialogVisible" width="960px">
-      <el-form
-        style="border: 1px solid #f0f2f7"
-        :model="addMsg"
-        ref="addMsg"
-        label-width="100px"
-      >
-        <div
-          style="
+      <div v-loading="downLoadLoading" :element-loading-text="loadingText">
+        <el-form style="border: 1px solid #f0f2f7" :model="addMsg" ref="addMsg" label-width="100px">
+          <div style="
             box-sizing: border-box;
             background-color: #f3f5f6;
             width: 100%;
             padding-left: 20px;
             height: 50px;
             line-height: 50px;
-          "
-        >
-          <el-checkbox
-            :indeterminate="isIndeterminate"
-            v-model="checkAll"
-            @change="handleCheckAllChange"
-            >全选
+          ">
+            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
             </el-checkbox>
           </div>
           <div style="margin: 15px 0"></div>
           <div style="padding: 10px 25px 20px">
-          <el-checkbox-group
-            v-model="checkedCities"
-            @change="handleCheckedCitiesChange"
-          >
-            <el-checkbox
-              style="margin-bottom: 10px; width: 135px"
-              v-for="city in cities"
-              :label="city.Id"
-              :key="city.Name"
-            >
-              {{ city.Name }}</el-checkbox
-            >
+            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+              <el-checkbox style="margin-bottom: 10px; width: 135px" v-for="city in cities" :label="city.Id"
+                :key="city.Name">
+                {{ city.Name }}</el-checkbox>
             </el-checkbox-group>
           </div>
         </el-form>
         <div style="text-align: right; margin-top: 20px">
           <el-button size="small" type="primary" @click="Export">导出</el-button>
         </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 <script>
-export default {
+  import {
+    setInterval,
+    clearInterval
+  } from 'timers';
+  export default {
     name: "brandManagement",
     data() {
       return {
@@ -374,7 +221,7 @@ export default {
           PaiYan: -1, //排烟量（0-否1-有）
           KongTiao: -1, //空调（0-否1-有）
           XinFeng: -1, //新风（0-否1-有）
-        IsInChengdu:-1,//成都落地
+          IsInChengdu: -1, //成都落地
           BrandClassId: 0, //分类
           ExcelEnumIds: [],
           UserId: 0, //用户认证
@@ -403,6 +250,9 @@ export default {
         BrandClassList: [], //品牌分类列表
         ProjectTypeList: [], //商铺性质列表
         readonly: false,
+        downLoadLoading: false, //导出Loading
+        download_timer: null, //下载文件timer
+        loadingText: "", //下载文件提示名称
       };
     },
     created() {
@@ -447,19 +297,49 @@ export default {
           }
         );
       },
+      //批量导出
       Export() {
         this.msg.ExcelEnumIds = this.checkedCities;
         let msg = JSON.parse(JSON.stringify(this.msg));
         if (!msg.Id || msg.Id == "") {
           msg.Id = 0;
         }
-      this.GetLocalFile(
-        "/api/Trade/GetBrandListToExcel",
+        this.checkedCities = [];
+        this.downLoadLoading = true;
+        this.loadingText = "正在下载品牌文件,请勿关闭或刷新页面...";
+        var that = this;
+        this.download_timer = setInterval(function () {
+          that.checkFile(msg)
+        }, 2000);
+      },
+      checkFile(msg) {
+        var that = this;
+        this.apipost(
+          "/api/Trade/CheckBrandFile",
           msg,
-        "品牌信息.xls",
-        null,
+          (res) => {
+            if (res.data.resultCode == 1) {
+              clearInterval(this.download_timer);
+              this.loadingText =  "正在下载品牌文件,请勿关闭或刷新页面...";;
+              var filepath = res.data.data;
+              var key = res.data.message;
+              var params = {
+                fileUrl: filepath
+              }
+              var deleteparams = {
+                key: key
+              };
+              that.GetLocalFile(
+                "/api/Trade/GetFile", params, "品牌信息.xls", null,
                 () => {
-          this.checkedCities = [];
+                  that.downLoadLoading = false;
+                  that.loadingText = "";
+                  that.apipost("/api/Trade/DeleteKey", deleteparams, (res) => {
+
+                  })
+                }
+              );
+            }
           }
         );
       },
@@ -529,8 +409,7 @@ export default {
         let that = this;
         that.Confirm("是否删除?", function () {
           that.apipost(
-          "/api/Trade/RemoveBrand",
-          {
+            "/api/Trade/RemoveBrand", {
               Id: row.ID,
             },
             (res) => {
@@ -568,22 +447,24 @@ export default {
         });
       },
     },
-};
+  };
+
 </script>
 
 <style>
-.brandManagement .el-card__header {
+  .brandManagement .el-card__header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     background: #fff;
-}
+  }
 
-.brandManagement .content {
+  .brandManagement .content {
     background: #fff;
     margin-top: 10px;
     padding: 15px;
     box-sizing: border-box;
-}
+  }
+
 </style>