1

src/pages/activity/selectStoreStep.vue

@@ -1,41 +1,40 @@
 <template>
   <div class="use_box">
-    <Modal
+    <Modal :scrollable="false"
-      :scrollable="false"
+           v-model="showUse"
-      v-model="showUse"
+           title="使用活动"
-      title="使用活动"
+           @on-cancel="cancel"
-      @on-cancel="cancel"
+           :loading="true"
-      :loading="true"
+           width="70%">
-      width="70%"
+      <Steps style="padding: 40px;"
-    >
+             :current="currentStep">
-      <Steps style="padding: 40px;" :current="currentStep">
+        <Step :title="isModify ? '修改零售公司' : '选择零售公司'"
-        <Step :title="isModify ? '修改零售公司' : '选择零售公司'" content></Step>
+              content></Step>
-        <Step :title="isModify ? '修改店铺' : '选择店铺'" content></Step>
+        <Step :title="isModify ? '修改店铺' : '选择店铺'"
+              content></Step>
       </Steps>
-      <useActivityStepTwo :schedule="schedule" :isModify="isModify" v-if="currentStep == 0"></useActivityStepTwo>
+      <useActivityStepTwo :schedule="schedule"
-      <useActivityStepThree :schedule="schedule" :isModify="isModify" v-if="currentStep == 1"></useActivityStepThree>
+                          :isModify="isModify"
+                          v-if="currentStep == 0"></useActivityStepTwo>
+      <useActivityStepThree :schedule="schedule"
+                            :isModify="isModify"
+                            v-if="currentStep == 1"></useActivityStepThree>
       <div slot="footer">
-        <Button
+        <Button v-if="currentStep !== 0"
-          v-if="currentStep !== 0"
+                type="primary"
-          type="primary"
+                shape="circle"
-          shape="circle"
+                :loading="modal_loading"
-          :loading="modal_loading"
+                @click="back">上一步</Button>
-          @click="back"
+        <Button v-if="currentStep !== 1"
-        >上一步</Button>
+                type="primary"
-        <Button
+                shape="circle"
-          v-if="currentStep !== 1"
+                :loading="modal_loading"
-          type="primary"
+                @click="next">下一步</Button>
-          shape="circle"
+        <Button v-if="currentStep == 1"
-          :loading="modal_loading"
+                type="primary"
-          @click="next"
+                shape="circle"
-        >下一步</Button>
+                :loading="modal_loading"
-        <Button
+                @click="finish">完成</Button>
-          v-if="currentStep == 1"
-          type="primary"
-          shape="circle"
-          :loading="modal_loading"
-          @click="finish"
-        >完成</Button>
       </div>
     </Modal>
   </div>
@@ -56,7 +55,7 @@ export default {
     useActivityStepThree,
     useActivityStepFoure
   },
-  data() {
+  data () {
     return {
       currentStep: -1,
       modal_loading: false,
@@ -73,27 +72,28 @@ export default {
     }
   },
   watch: {
-    show() {
+    show () {
       this.showUse = this.show;
       this.currentStep = 0;
+      this.modal_loading = false;
     },
-    schedule() {
+    schedule () {
       store.getters.useData.scheduleId = this.schedule.id;
     }
   },
-  mounted() {},
+  mounted () { },
   methods: {
-    cancel() {
+    cancel () {
       this.currentStep = 0;
-      if (!this.isModify) {
+      // if (!this.isModify) {
-        store.commit("RSET_useData");
+      //   store.commit("RSET_useData");
-      }
+      // }
       this.$emit("doShow", false);
       this.modal_loading = false;
       this.showUse = false;
       this.currentStep = 0;
     },
-    next() {
+    next () {
       let data = store.getters.useData;
       console.log("data1", data);
       if (this.currentStep === 0) {
@@ -118,10 +118,10 @@ export default {
       store.commit("SET_useData", data);
       this.currentStep = this.currentStep + 1;
     },
-    back() {
+    back () {
       this.currentStep = this.currentStep - 1;
     },
-    finish() {
+    finish () {
       let that = this;
       this.modal_loading = true;
       that.$emit("doShow", false);

src/pages/shop/IncreaseWelcomeList.vue

@@ -1,61 +1,77 @@
 <template>
   <div>
     <Row class="search-row">
-      <i-col span="24" class="search-col">
+      <i-col span="24"
+             class="search-col">
         <Row class="row-style">
-          <Button @click="handleEdit" type="primary">配置欢迎语</Button>
+          <Button @click="handleEdit"
+                  type="primary">配置欢迎语</Button>
         </Row>
       </i-col>
     </Row>
-    <Table
+    <Table :columns="columns1"
-      :columns="columns1"
+           :data="data"
-      :data="data"
+           :loading="loading"
-      :loading="loading"
+           @on-cell-click="clickCell"
-      style="margin-top: 20px;"
+           style="margin-top: 20px;"
-      size="small"
+           size="small">
-    >
+      <template slot-scope="{ row, index }"
-      <template slot-scope="{ row, index }" slot="action">
+                slot="action">
-        <Button type="primary" size="small" @click="handleEdit(row, index)">修改</Button>
+        <Button type="primary"
-        <Button type="error" size="small" @click="handleDelete(row, index)">删除</Button>
+                size="small"
+                @click="handleEdit(row, index)">修改</Button>
+        <Button type="error"
+                size="small"
+                @click="handleDelete(row, index)">删除</Button>
       </template>
     </Table>
-    <Page
+    <Page :total="total"
-      :total="total"
+          :current="pageNum"
-      :current="pageNum"
+          :page-size="pageSize"
-      :page-size="pageSize"
+          show-elevator
-      show-elevator
+          show-total
-      show-total
+          placement="top"
-      placement="top"
+          @on-change="handlePage"
-      @on-change="handlePage"
+          class="ks-page"></Page>
-      class="ks-page"
+    <Modal v-model="showDetail"
-    ></Page>
+           title="配置范围"
+           width="70%"
+           :footer-hide="true">
+      <welcomeDetail v-if="showDetail"
+                     :detail="detail"></welcomeDetail>
+    </Modal>
   </div>
 </template>
 
 <script>
+import ActivityManager from "../../services/ActivityManager/ActivityManager";
 import data from "../../utils/PhoneRegionData";
 import http from "../../services/store/IncreaseStoreManager";
 
 import staff from "../../services/staff/staff";
+import welcomeDetail from "./WelcomeDetail";
 
 export default {
   name: "IncreaseWelcomeList",
   inject: ["setMenuName"],
-  data() {
+  components: { welcomeDetail },
+  data () {
     let _this = this;
     return {
       loading: false,
       // 分页
       total: 0,
       pageSize: 10,
+      showDetail: false,
       data: [],
       pageNum: 1,
+      detail: {},
       columns1: [
         {
           width: 60,
           align: "center",
           title: "序号",
-          render(h, params) {
+          render (h, params) {
             console.log(params);
             let num = parseInt(params.index) + 1;
             console.log(_this.pageSize);
@@ -68,20 +84,20 @@ export default {
         {
           title: "欢迎语",
           key: "scheduleVO.description",
-          render(h, params) {
+          render (h, params) {
             return h("span", params.row.content);
           }
         },
         {
           title: "配置范围",
           key: "shop",
-          render(h, params) {
+          render (h, params) {
             return h(
               "span",
               (params.row.companyCount || 0) +
-                "家零售公司, " +
+              "家零售公司, " +
-                (params.row.storeCount || 0) +
+              (params.row.storeCount || 0) +
-                "家店铺"
+              "家店铺"
             );
           }
         },
@@ -92,13 +108,34 @@ export default {
       formValidate: {}
     };
   },
-  mounted() {
+  mounted () {
     this.setMenuName("门店推广", "欢迎语");
     this.handlePaginate();
   },
   methods: {
+    clickCell (row, column, data, event) {
+      if (column.key === "shop") {
+        let _this = this;
+        this.getDetail(row.id).then(res => {
+          _this.detail = res;
+          _this.showDetail = true;
+        });
+      }
+    },
+    getDetail (instanceId) {
+      return new Promise((resolve, reject) => {
+        ActivityManager.instanceDetail(
+          {
+            instanceId
+          },
+          res => {
+            resolve(res.data.results);
+          }
+        );
+      });
+    },
     // 分页刷新
-    handlePaginate() {
+    handlePaginate () {
       this.loading = true;
       let params = {
         pageNum: this.pageNum,
@@ -114,27 +151,30 @@ export default {
       });
     },
     //切页处理
-    handlePage: function(value) {
+    handlePage: function (value) {
       this.pageNum = value;
       this.handlePaginate();
     },
     // 新增或修改
-    handleEdit(row) {
+    handleEdit (row) {
       this.$router.push({
         path: "/shop/increase/welcome/edit",
         query: { id: row.id }
       });
     },
     // 删除
-    handleDelete(row) {
+    handleDelete (row) {
       let _this = this;
       this.$Modal.confirm({
         title: "删除欢迎语",
         content: "您确定要删除该欢迎语?",
         onOk: () => {
-          http.deleteWelcome({ id: row.scheduleId }).then(_this.handlePaginate);
+          http.deleteWelcome({ id: row.scheduleId }).then(res => {
+            _this.pageNum = 1;
+            _this.handlePaginate()
+          });
         },
-        onCancel: () => {}
+        onCancel: () => { }
       });
     }
   }

src/pages/shop/WelcomeDetail.vue

@@ -0,0 +1,92 @@
+<template>
+  <div style="padding: 0 40px;">
+    <Form ref="formValidate"
+          :model="useData"
+          :label-width="80">
+      <Row>
+        <i-col span="22"
+               offset="2">
+          <FormItem label="配置范围"
+                    prop="activityRange">
+            <Collapse simple>
+              <Panel :key="index"
+                     v-for="(item, index) in groups">
+                {{
+                  item.name
+                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
+                  item.stores.length
+                }}家店铺
+                <div slot="content">
+                  <div class="activityShopClass">
+                    <div class="mr10"
+                         v-for="(item, index) in item.stores"
+                         :key="index">
+                      <Tag class="tagClass"
+                           color="blue">{{ item.name }}</Tag>
+                    </div>
+                  </div>
+                </div>
+              </Panel>
+            </Collapse>
+          </FormItem>
+        </i-col>
+      </Row>
+    </Form>
+  </div>
+</template>
+<script>
+import store from "../../store/index";
+export default {
+  name: "useActivityStepFoure",
+  data () {
+    return {
+      useData: store.getters.useData,
+      operate: "收起",
+      displayActivityShopFlag: false,
+      groups: [],
+    };
+  },
+  props: {
+    detail: Object
+  },
+  created () {
+    let _this = this;
+    this.$nextTick(() => {
+      console.log(123, this.detail)
+      _this.detail.organizations.forEach((item) => {
+        item.stores = _this._.filter(
+          _this.detail.stores,
+          (s) => s.companyId == item.id || s.parentId == item.id
+        );
+        console.log(item.stores)
+        _this.groups.push(item);
+      });
+    });
+  },
+  methods: {
+    isDisplay () {
+      if (this.operate === "展开") {
+        this.operate = "收起";
+        this.displayActivityShopFlag = false;
+      } else {
+        this.operate = "展开";
+        this.displayActivityShopFlag = true;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.activityShopClass {
+  display: flex;
+  justify-content: start;
+  flex-wrap: wrap;
+}
+.mr10 {
+  margin-right: 20px;
+}
+.tagClass {
+  text-align: center;
+}
+</style>