1

src/pages/activity/ActivityPlan.vue

@@ -1,107 +1,105 @@
 <template>
   <div>
-    <Spin v-if="saving" fix>加载中...</Spin>
-    <Form ref="formValidate" :model="formValidate" :label-width="80">
+    <Spin v-if="saving"
+          fix>加载中...</Spin>
+    <Form ref="formValidate"
+          :model="formValidate"
+          :label-width="80">
       <Row :gutter="10">
         <i-col span="4">
-          <FormItem label="开始日期" prop>
-            <Date-picker
-              v-model="formValidate.startDate"
-              :options='startDateOptions'
-              type="date"
-              placement="bottom-end"
-              placeholder="选择日期区间"
-              format="yyyy-MM-dd"
-              @on-change="startDateChange"
-            ></Date-picker>
+          <FormItem label="开始日期"
+                    prop>
+            <Date-picker v-model="formValidate.startDate"
+                         :options='startDateOptions'
+                         type="date"
+                         placement="bottom-end"
+                         placeholder="选择日期区间"
+                         format="yyyy-MM-dd"
+                         @on-change="startDateChange"></Date-picker>
           </FormItem>
         </i-col>
 
         <i-col span="4">
-          <FormItem label="结束日期" prop>
-            <Date-picker
-              v-model="formValidate.endDate"
-              :options='endDateOptions'
-              type="date"
-              placement="bottom-end"
-              placeholder="选择结束日期"
-              format="yyyy-MM-dd"
-              @on-change="endDateChange"
-            ></Date-picker>
+          <FormItem label="结束日期"
+                    prop>
+            <Date-picker v-model="formValidate.endDate"
+                         :options='endDateOptions'
+                         type="date"
+                         placement="bottom-end"
+                         placeholder="选择结束日期"
+                         format="yyyy-MM-dd"
+                         @on-change="endDateChange"></Date-picker>
           </FormItem>
         </i-col>
         <i-col span="4">
-          <FormItem label="零售公司" prop>
-            <Select
-              v-model="formValidate.organizationId"
-              filterable
-              @on-change="selectCompany"
-              placeholder="全部"
-              clearable
-            >
-              <Option
-                v-for="(item, index) in companyList"
-                :key="index"
-                :value="item.value"
-              >{{ item.label }}</Option>
+          <FormItem label="零售公司"
+                    prop>
+            <Select v-model="formValidate.organizationId"
+                    filterable
+                    @on-change="selectCompany"
+                    placeholder="全部"
+                    clearable>
+              <Option v-for="(item, index) in companyList"
+                      :key="index"
+                      :value="item.value">{{ item.label }}</Option>
             </Select>
           </FormItem>
         </i-col>
         <i-col span="6">
-          <FormItem label="店铺" prop>
-            <Select v-model="formValidate.storeId" filterable placeholder="全部" clearable>
-              <Option
-                v-for="(item, index) in shopList"
-                :key="index"
-                :value="item.value"
-              >{{ item.label }}</Option>
+          <FormItem label="店铺"
+                    prop>
+            <Select v-model="formValidate.storeId"
+                    filterable
+                    placeholder="全部"
+                    clearable>
+              <Option v-for="(item, index) in shopList"
+                      :key="index"
+                      :value="item.value">{{ item.label }}</Option>
             </Select>
           </FormItem>
         </i-col>
         <i-col span="3">
-          <FormItem label="活动状态" prop>
+          <FormItem label="活动状态"
+                    prop>
             <Select v-model="formValidate.status">
-              <Option
-                v-for="(item, index) in activityStatusList"
-                :key="index"
-                :value="item.value"
-              >{{ item.label }}</Option>
+              <Option v-for="(item, index) in activityStatusList"
+                      :key="index"
+                      :value="item.value">{{ item.label }}</Option>
             </Select>
           </FormItem>
         </i-col>
         <i-col span="3">
-          <Button type="primary" @click="() => {pageNum = 1;searchTable()}">查询</Button>
+          <Button type="primary"
+                  @click="() => {pageNum = 1;searchTable()}">查询</Button>
         </i-col>
       </Row>
       <Row style="margin-top:50px">
-        <Table
-          :loading="loading"
-          border
-          @on-row-dblclick="showDetail"
-          :columns="columns1"
-          :data="data"
-        ></Table>
-        <Page
-          :total="totalSize"
-          :current="pageNum"
-          :page-size="pageSize"
-          show-elevator
-          show-total
-          placement="top"
-          @on-change="handlePage"
-          class-name="ks-page"
-        ></Page>
+        <Table :loading="loading"
+               border
+               @on-row-dblclick="showDetail"
+               :columns="columns1"
+               :data="data"></Table>
+        <Page :total="totalSize"
+              :current="pageNum"
+              :page-size="pageSize"
+              show-elevator
+              show-total
+              placement="top"
+              @on-change="handlePage"
+              class-name="ks-page"></Page>
       </Row>
     </Form>
-    <useTable
-      ref="useTable"
-      @doShow="doShow"
-      :show="showUse"
-      :isModify="true"
-      :schedule="activityInstance.scheduleVO"
-    ></useTable>
-    <Modal v-model="isShowDetail" title="活动计划详情" width="70%" :footer-hide="true">
-      <planDetail v-if="isShowDetail" :detail="detail"></planDetail>
+    <useTable ref="useTable"
+              @doShow="doShow"
+              :show="showUse"
+              :isModify="true"
+              :schedule="activityInstance.scheduleVO"></useTable>
+    <Modal v-model="isShowDetail"
+           title="活动计划详情"
+           width="70%"
+           :footer-hide="true">
+      <planDetail v-if="isShowDetail"
+                  :detail="detail"></planDetail>
     </Modal>
   </div>
 </template>
@@ -120,7 +118,7 @@ export default {
     useTable,
     planDetail
   },
-  data() {
+  data () {
     const _this = this;
     return {
       loading: false,
@@ -141,11 +139,11 @@ export default {
         organizationId: null,
         storeId: null,
         status: 2,
-        startDate:null,
-        endDate:null,
+        startDate: null,
+        endDate: null,
       },
-      startDateOptions:{},
-      endDateOptions:{},
+      startDateOptions: {},
+      endDateOptions: {},
       activityData: [
         {
           activityStatus: "进行中"
@@ -177,7 +175,7 @@ export default {
           width: 60,
           align: "center",
           title: "序号",
-          render(h, params) {
+          render (h, params) {
             let num = parseInt(params.index) + 1;
             console.log(_this.pageSize);
             if (_this.pageSize > 1) {
@@ -193,7 +191,7 @@ export default {
         {
           title: "活动类型",
           key: "scheduleVO.name",
-          render(h, params) {
+          render (h, params) {
             return h("span", params.row["params"][0]["name"]);
           }
         },
@@ -201,54 +199,54 @@ export default {
           title: "活动时间",
           key: "beginTime",
           width: 230,
-          render(h, params) {
+          render (h, params) {
             return h("span", params.row.beginTime + " - " + params.row.endTime);
           }
         },
         {
           title: "零售公司",
           key: "shop",
-          render(h, params) {
+          render (h, params) {
             return h(
               "span",
               params.row.companyName +
-                "等" +
-                (params.row.companyCount || 0) +
-                "家公司"
+              "等" +
+              (params.row.companyCount || 0) +
+              "家公司"
             );
           }
         },
         {
           title: "店铺",
           key: "shop",
-          render(h, params) {
+          render (h, params) {
             return h(
               "span",
               params.row.storeName +
-                "等" +
-                (params.row.storeCount || 0) +
-                "家店铺"
+              "等" +
+              (params.row.storeCount || 0) +
+              "家店铺"
             );
           }
         },
         {
           title: "添加好友数",
           key: "addFriendNum",
-          render(h, params) {
+          render (h, params) {
             return h("span", (params.row.friends || 0) + "人");
           }
         },
         {
           title: "参与活动客户数",
           key: "joinActivityClientNum",
-          render(h, params) {
+          render (h, params) {
             return h("span", (params.row.friends || 0) + "人");
           }
         },
         {
           title: "活动码",
           key: "activityCode",
-          render(h, p) {
+          render (h, p) {
             return h(
               "Button",
               {
@@ -262,7 +260,7 @@ export default {
         {
           title: "活动状态",
           key: "status",
-          render(h, p) {
+          render (h, p) {
             const status = p.row.status;
             if (status === 1) return h("span", "未开始");
             if (status === 2) return h("span", "进行中");
@@ -274,7 +272,7 @@ export default {
           title: "操作",
           key: "action",
           width: 200,
-          render(h, p) {
+          render (h, p) {
             let r = [
               h(
                 "Button",
@@ -305,30 +303,30 @@ export default {
       ]
     };
   },
-  mounted() {
+  mounted () {
     this.setMenuName("活动管理", "活动计划");
     this.getCompanyInfo();
     this.getShopInfo();
     this.searchTable();
   },
   methods: {
-    doShow(show) {
+    doShow (show) {
       this.showUse = show;
       this.searchTable();
     },
-    showDetail(detail) {
+    showDetail (detail) {
       let _this = this;
       this.getDetail(detail.id).then(res => {
         _this.detail = res;
         _this.isShowDetail = true;
       });
     },
-    getCompanyInfo() {
+    getCompanyInfo () {
       let that = this;
       let data = {
         userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
       };
-      ActivityManager.getCompany(data, function(data) {
+      ActivityManager.getCompany(data, function (data) {
         that.companyList = [];
         data.data.results.forEach(element => {
           that.companyList.push({
@@ -338,18 +336,18 @@ export default {
         });
       });
     },
-    selectCompany(value) {
+    selectCompany (value) {
       this.customerId = value;
       this.getShopInfo();
     },
-    getShopInfo() {
+    getShopInfo () {
       let that = this;
       let data = {
         userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
         customerIds: this.customerId,
         scheduleId: null
       };
-      ActivityManager.getShop(data, function(data) {
+      ActivityManager.getShop(data, function (data) {
         that.shopList = [];
         data.data.results.forEach(element => {
           that.shopList.push({
@@ -359,11 +357,11 @@ export default {
         });
       });
     },
-    handlePage: function(value) {
+    handlePage: function (value) {
       this.pageNum = value;
       this.searchTable();
     },
-    stop(instance) {
+    stop (instance) {
       let _this = this;
       this.$Modal.confirm({
         title: "您确认要终止?",
@@ -382,10 +380,10 @@ export default {
             }
           );
         },
-        onCancel: () => {}
+        onCancel: () => { }
       });
     },
-    getDetail(instanceId) {
+    getDetail (instanceId) {
       return new Promise((resolve, reject) => {
         ActivityManager.instanceDetail(
           {
@@ -397,7 +395,7 @@ export default {
         );
       });
     },
-    modify(instance) {
+    modify (instance) {
       let _this = this;
       this.getDetail(instance.id).then(res => {
         store.commit("SET_useData", res);
@@ -405,20 +403,20 @@ export default {
         _this.showUse = true;
       });
     },
-    navigateCode(instance) {
+    navigateCode (instance) {
       this.$router.push({
         path: "/activity/plan/code",
         query: { instanceId: instance.id }
       });
     },
-    searchTable(params = {}) {
+    searchTable (params = {}) {
       this.loading = true;
-      if (this.formValidate.startDate !== "") {
+      if (this.formValidate.startDate) {
         this.formValidate.startDate = formatDate(this.formValidate.startDate);
       } else {
         this.formValidate.startDate = undefined;
       }
-      if (!!this.formValidate.endDate) {
+      if (this.formValidate.endDate) {
         this.formValidate.endDate = formatDate(this.formValidate.endDate);
       } else {
         this.formValidate.endDate = undefined;
@@ -438,24 +436,24 @@ export default {
         this.loading = false;
       });
     },
-    startDateChange:function(e){
-          //设置开始时间
-          this.endDateOptions = {
-              disabledDate:date =>{
-                  let startTime = this.formValidate.startDate ? new Date(this.formValidate.startDate).valueOf()  : '';
-                  return date && (date.valueOf() < startTime)
-              }
-          }
-      },
-      endDateChange:function(e){
-          //设置结束时间
-          let endTime = this.formValidate.endDate  ? new Date( this.formValidate.endDate ).valueOf()-1*24*60*60*1000 :'';
-          this.startDateOptions = {
-              disabledDate:date =>{
-                  return date && (date.valueOf() >endTime);
-              }
-          }
+    startDateChange: function (e) {
+      //设置开始时间
+      this.endDateOptions = {
+        disabledDate: date => {
+          let startTime = this.formValidate.startDate ? new Date(this.formValidate.startDate).valueOf() : '';
+          return date && (date.valueOf() < startTime)
+        }
+      }
+    },
+    endDateChange: function (e) {
+      //设置结束时间
+      let endTime = this.formValidate.endDate ? new Date(this.formValidate.endDate).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
+      this.startDateOptions = {
+        disabledDate: date => {
+          return date && (date.valueOf() > endTime);
+        }
       }
+    }
   }
 };
 </script>

src/pages/activity/addActivity.vue

@@ -1,10 +1,8 @@
 <template>
   <Modal v-model="dispalyModal"
          width="1000"
-         :loading="loading"
-         :mask-closable="false"
-         @on-cancel="cancel"
-         @on-ok="save">
+         :loading="true"
+         :mask-closable="false">
     <p slot="header"
        style="color:#f60;text-align:left">
       <span>配置活动</span>
@@ -97,6 +95,16 @@
     <Button style="margin-top: 10px"
             type="primary"
             @click="addActivityInput">+添加活动类型</Button>
+    <div slot="footer">
+      <Button type="primary"
+              shape="circle"
+              :loading="modal_loading"
+              @click="cancel">取消</Button>
+      <Button type="primary"
+              shape="circle"
+              :loading="modal_loading"
+              @click="save">确定</Button>
+    </div>
   </Modal>
 </template>
 <script>
@@ -133,7 +141,6 @@ export default {
   },
   watch: {
     addActivityModal (val) {
-      console.log(111, val);
       this.dispalyModal = val;
       if (val === true && this.id) {
         this.getActivityData();
@@ -159,6 +166,7 @@ export default {
           },
         ];
       }
+      this.$forceUpdate();
     },
   },
   mounted () { },
@@ -224,20 +232,20 @@ export default {
     },
     save () {
       let that = this;
+      that.modal_loading = true;
       let i = 0;
-      this.loading = true;
       if (
         typeof that.formValidate.logo == "undefined" ||
         that.formValidate.logo == "" ||
         that.formValidate.logo.length <= 0
       ) {
         that.$Message.error("请上传活动封面!");
-        that.loading = false;
+        that.modal_loading = false;
         return false;
       }
       if (that.formValidate.params.length <= 0) {
         that.$Message.error("至少需要填写一个活动类型!");
-        that.loading = false;
+        that.modal_loading = false;
         return false;
       }
       for (const key in that.formValidate.params) {
@@ -250,12 +258,11 @@ export default {
           }
           if (element.defaultVal.length <= 0) {
             that.$Message.error(`请输入类型${i}的参数!`);
-            that.loading = false;
+            that.modal_loading = false;
             return false;
           }
         }
       }
-      this.loading = true;
       this.$refs["formValidate"].validate((valid) => {
         if (valid) {
           // param = JSON.stringify(param)
@@ -263,12 +270,13 @@ export default {
           ActivityManager.addOreditActivity(data, function (data) {
             that.addActivityModal = false;
             that.formValidate = {};
+            that.modal_loading = false;
             that.$emit("dispalyAddActivityModal", false, true);
           });
         } else {
+          that.modal_loading = false;
           that.$Message.error("表单验证失败!");
         }
-        that.loading = false;
       });
     },
   },

vue.config.js

@@ -31,7 +31,7 @@ module.exports = {
     // proxy: 'http://192.168.1.123:8312/'
     // proxy: 'http://192.168.31.177:8312/'
     // proxy: 'http://localhost:8312/'
-    proxy: "http://111.231.218.44:8080/",
+    proxy: 'http://localhost:8080/',
     // proxy: 'http://localhost:8080/',
     // proxy: 'http://jdxdev.vipgz4.idcfengye.com/'
   },