From acf1e77b9280fbceb1fb38426c6c3d6acd648f22 Mon Sep 17 00:00:00 2001
From: zhenghuang <236220500@qq.com>
Date: Tue, 30 Jun 2020 11:12:23 +0800
Subject: [PATCH] 1

---
 src/pages/activity/ActivityCode.vue | 138 +++++++++++++++-----
 src/pages/activity/GuideCode.vue    | 189 +++++++++++++++++++++++++++-
 2 files changed, 292 insertions(+), 35 deletions(-)

diff --git a/src/pages/activity/ActivityCode.vue b/src/pages/activity/ActivityCode.vue
index 1a3b760..62b8c2c 100644
--- a/src/pages/activity/ActivityCode.vue
+++ b/src/pages/activity/ActivityCode.vue
@@ -1,14 +1,43 @@
 <template>
   <div class="activity_code">
-    <Row class="search-row">
+    <Row class="search-row"
+         :gutter="10">
       <i-col span="24"
              class="search-col">
-        <Button type="primary"
-                @click="downloadCode(2)"
-                style="margin-left: 20px;">批量下载门店码</Button>
-        <Button type="primary"
-                @click="downloadCode(1)"
-                style="margin-left: 20px;">批量下载导购码</Button>
+        <Form ref="formValidate"
+              :model="formValidate"
+              :label-width="80">
+          <Row class="row-style">
+            <i-col span="16"
+                   class="search-col">
+              <i-input placeholder="请输入店铺名称或编码"
+                       style="width: 200px !important"
+                       class="search-select"
+                       v-model="formValidate.store" />
+              <span class="search-span">零售公司</span>
+              <Select v-model="formValidate.orgId"
+                      filterable
+                      class="search-select"
+                      placeholder="全部"
+                      clearable>
+                <Option v-for="(item, index) in companyList"
+                        :key="index"
+                        :value="item.value">{{ item.label }}</Option>
+              </Select>
+              <Button type="primary"
+                      @click="search"
+                      class="search-btn">查询</Button></i-col>
+            <i-col span="8"
+                   class="search-col">
+              <Button type="primary"
+                      @click="downloadCode(2)"
+                      style="margin-left: 20px;">批量下载门店码</Button>
+              <Button type="primary"
+                      @click="downloadCode(1)"
+                      style="margin-left: 20px;">批量下载导购码</Button>
+            </i-col>
+          </Row>
+        </Form>
       </i-col>
     </Row>
     <Table :loading="loading"
@@ -17,14 +46,31 @@
            :data="data">
       <template slot-scope="{row}"
                 slot="qrCodeAction">
-        <img :src="require('../../../static/img/qrCode-init.png')"
-             @click="showQrcode(row)"
-             class="table-img-qr-code" />
+        <div class="qrCodeBox"
+             @mouseover="showQrcode(row)"
+             @mouseout="hideQrcode(row)">
+          <img :src="require('../../../static/img/qrCode-init.png')"
+               class="table-img-qr-code" />
+          <div class="toggleQrCode"
+               v-show="rowData.id == row.id">
+            <div slot="header">
+              <p></p>
+            </div>
+            <p>{{showStoreName}}</p>
+            <img :src="qrCodeImage"
+                 style="width:200px;height:200px;" />
+            <div style="text-align: center;">
+              <Button ghost
+                      type="primary"
+                      @click="download(rowData)">下载</Button>
+            </div>
+          </div>
+        </div>
       </template>
       <router-link slot-scope="{row}"
                    slot="action"
-                   :to="{path:'/shop/increase/manager/staff',query:{storeId:row.store.id}}">
-        <Button class="router-btn"> 门店导购管理</Button>
+                   :to="{path:'/activity/plan/GuideCode',query:{instanceId:row.instanceId, storeId: row.store.id}}">
+        <Button class="router-btn"> 查看导购码</Button>
       </router-link>
     </Table>
     <Page :total="totalSize"
@@ -35,31 +81,11 @@
           placement="top"
           @on-change="handlePage"
           class-name="ks-page"></Page>
-
-    <!-- 预览二维码 -->
-    <Modal v-model="isShow"
-           :title="showStoreName"
-           :footer-hide="true"
-           width="230"
-           class-name="vertical-center-modal"
-           @on-ok="ok">
-      <div slot="header">
-        <p></p>
-      </div>
-      <p>{{this.showStoreName}}</p>
-      <img :src="qrCodeImage"
-           style="width:200px;height:200px;" />
-      <div style="text-align: center;">
-        <Button ghost
-                type="primary"
-                @click="download(rowData)">下载</Button>
-      </div>
-    </Modal>
   </div>
 </template>
 
 <script>
-import { activityCodeList } from "../../services/ActivityManager/ActivityManager";
+import { activityCodeList, getCompany } from "../../services/ActivityManager/ActivityManager";
 import http from '../../services/store/IncreaseStoreManager';
 import doHttp from '../../services/CommonHttp'
 export default {
@@ -76,7 +102,12 @@ export default {
       isShow: false,
       showStoreName: "",
       qrCodeImage: "",
+      companyList: [],
       rowData: {},
+      formValidate: {
+        orgId: null,
+        store: null,
+      },
       columns: [
         {
           width: 80,
@@ -179,11 +210,31 @@ export default {
   created () {
     this.instanceId = this.$route.query.instanceId;
     this.load();
+    this.getCompanyInfo();
   },
   methods: {
+    search () {
+      console.log(this.formValidate)
+      this.load()
+    },
     ok: function () {
       this.isShow = false;
     },
+    getCompanyInfo () {
+      let that = this;
+      let data = {
+        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
+      };
+      getCompany(data, function (data) {
+        that.companyList = [];
+        data.data.results.forEach(element => {
+          that.companyList.push({
+            label: element.name,
+            value: element.id
+          });
+        });
+      });
+    },
     cancel: function () {
       this.isShow = false;
     },
@@ -198,6 +249,11 @@ export default {
       this.qrCodeImage = row.qrCode;
       this.rowData = row;
     },
+    hideQrcode (row) {
+      this.showStoreName = "";
+      this.qrCodeImage = "";
+      this.rowData = {};
+    },
     download: function (row) {
       let fileName = row.store.name + "-活动码";
       http.downloadImg({
@@ -212,6 +268,7 @@ export default {
       params.pageSize = this.pageSize;
       params.pageNum = this.pageNum;
       params.instanceId = this.instanceId;
+      params = { ...params, ...this.formValidate }
       activityCodeList(params, (res) => {
         _this.data = res.data.results.this.records;
         _this.totalSize = res.data.results.this.total;
@@ -232,6 +289,9 @@ export default {
 </script>
 
 <style>
+.search-btn {
+  margin-left: 40px;
+}
 .table-width-80 {
   width: 80px !important;
 }
@@ -241,4 +301,16 @@ export default {
   width: 30px;
   height: 30px;
 }
+.qrCodeBox {
+}
+.toggleQrCode {
+  position: absolute;
+  background: #fff;
+  z-index: 9999;
+  padding: 10px;
+  border: 1px solid #dfdfdf;
+}
+.ivu-table-wrapper {
+  overflow: inherit !important;
+}
 </style>
diff --git a/src/pages/activity/GuideCode.vue b/src/pages/activity/GuideCode.vue
index e03a4b0..73c4ad5 100644
--- a/src/pages/activity/GuideCode.vue
+++ b/src/pages/activity/GuideCode.vue
@@ -1,9 +1,194 @@
-<template> </template>
+<template>
+  <div class="activity_code">
+    <Table :loading="loading"
+           border
+           :columns="columns"
+           :data="data">
+      <template slot-scope="{row}"
+                slot="qrCodeAction">
+        <div class="qrCodeBox"
+             @mouseover="showQrcode(row)"
+             @mouseout="hideQrcode(row)">
+          <img :src="require('../../../static/img/qrCode-init.png')"
+               class="table-img-qr-code" />
+          <div class="toggleQrCode"
+               v-show="rowData.id == row.id">
+            <div slot="header">
+              <p></p>
+            </div>
+            <p>{{showStoreName}}</p>
+            <img :src="qrCodeImage"
+                 style="width:200px;height:200px;" />
+            <div style="text-align: center;">
+              <Button ghost
+                      type="primary"
+                      @click="download(rowData)">下载</Button>
+            </div>
+          </div>
+        </div>
+      </template>
+      <router-link slot-scope="{row}"
+                   slot="action"
+                   :to="{path:'/activity/plan/GuideCode',query:{instanceId:row.instanceId}}">
+        <Button class="router-btn"> 查看导购码</Button>
+      </router-link>
+    </Table>
+  </div>
+</template>
 
 <script>
+import ActivityManager from "../../services/ActivityManager/ActivityManager";
+import http from '../../services/store/IncreaseStoreManager';
+import doHttp from '../../services/CommonHttp'
 export default {
   name: "GuideCode",
+  data () {
+    let _this = this;
+    return {
+      loading: false,
+      totalSize: 0,
+      pageNum: 1,
+      pageSize: 10,
+      data: [],
+      instanceId: 0,
+      isShow: false,
+      showStoreName: "",
+      qrCodeImage: "",
+      companyList: [],
+      rowData: {},
+      storeId: null,
+      formValidate: {
+        orgId: null,
+        store: null,
+      },
+      columns: [
+        {
+          width: 80,
+          align: "center",
+          title: "序号",
+          render (h, params) {
+            let num = parseInt(params.index) + 1;
+            if (_this.pageSize > 1) {
+              num += (_this.pageNum - 1) * _this.pageSize;
+            }
+            return h("span", num);
+          }
+        },
+        {
+          title: "姓名",
+          key: "organizational.name",
+          render (h, params) {
+            return h("span", params.row["staffer"]["name"]);
+          },
+        },
+        {
+          title: "工号",
+          key: "organizational.name",
+          render (h, params) {
+            return h("span", params.row["staffer"]["stafferNo"]);
+          },
+        },
+        {
+          title: "手机号",
+          key: "organizational.code",
+          render (h, params) {
+            return h("span", params.row["staffer"]["mobile"]);
+          },
+        },
+        {
+          title: "店铺",
+          key: "store.name",
+          render (h, params) {
+            return h("span", params.row["store"]["name"]);
+          },
+        },
+        {
+          title: "角色",
+          key: "store.code",
+          render (h, params) {
+            return h("span", params.row["staffer"]["roleName"]);
+          },
+        },
+        {
+          title: "活动码",
+          slot: 'qrCodeAction',
+          className: 'table-width-80',
+        },
+      ],
+    };
+  },
+  created () {
+    this.instanceId = this.$route.query.instanceId;
+    this.storeId = this.$route.query.storeId;
+    this.load();
+  },
+  methods: {
+    showQrcode (row) {
+      console.log(row);
+      this.isShow = true;
+      this.showStoreName = row.store.name;
+      this.qrCodeImage = row.qrCode;
+      this.rowData = row;
+    },
+    hideQrcode (row) {
+      this.showStoreName = "";
+      this.qrCodeImage = "";
+      this.rowData = {};
+    },
+    download: function (row) {
+      let fileName = row.store.name + "-活动码";
+      http.downloadImg({
+        url: row.qrCode
+      }, fileName, function (/*data*/) {
+
+      })
+    },
+    load (params = {}) {
+      let _this = this;
+      this.loading = true;
+      params.storeId = this.storeId;
+      params.instanceId = this.instanceId;
+      ActivityManager.guideCodeList(params, (res) => {
+        _this.data = res.data.results || [];
+        _this.loading = false;
+      });
+    },
+    downloadCode (type) {
+      this.loading = true;
+      let that = this;
+      doHttp
+        .downloadZip("/activity/instance/download?type=" + type + "&instanceId=" + this.instanceId, type == 2 ? '门店码' : "门店导购码", { type: type, instanceId: this.instanceId })
+        .then(res => {
+          that.loading = false;
+        })
+    }
+  },
 };
 </script>
 
-<style></style>
+<style>
+.search-btn {
+  margin-left: 40px;
+}
+.table-width-80 {
+  width: 80px !important;
+}
+.table-img-qr-code {
+  margin-left: 5px;
+  margin-top: 5px;
+  width: 30px;
+  height: 30px;
+}
+.qrCodeBox {
+}
+.toggleQrCode {
+  position: absolute;
+  background: #fff;
+  z-index: 9999;
+  padding: 10px;
+  border: 1px solid #dfdfdf;
+}
+.ivu-table-wrapper {
+  overflow: inherit !important;
+}
+</style>