营销策略：优惠券管理，新增优惠券需求处理

src/views/marketing/coupon/dialog/addAndEdit.vue

@@ -18,6 +18,16 @@
   >
     <div class="dialog">
       <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+        <el-form-item label="使用剧目" prop="usePerform" required>
+          <el-select v-model="form.usePerform" @change="performChange" placeholder="请选择使用剧目">
+                <el-option
+                  v-for="dict in performList"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+        </el-form-item>
         <el-form-item label="优惠劵名称" prop="couponName" required>
           <el-input
             v-model="form.couponName"
@@ -38,13 +48,41 @@
             </template>
           </el-input>
         </el-form-item>
+        <el-form-item label="使用门槛" prop="useThresholdType" required>
+          <el-radio v-model="form.useThresholdType" :label="1">无条件</el-radio>
+          <el-radio v-model="form.useThresholdType" :label="2">指定条件</el-radio>
+        </el-form-item>
         <el-form-item label="使用对象" prop="useUserType" required>
-          <el-radio v-model="form.useUserType" :label="1">所有用户</el-radio>
+          <el-radio-group v-model="form.useUserType" @input="handleChange">
+            <el-radio :label="1">所有用户</el-radio>
+            <el-radio :label="2">指定分销商</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="使用剧目" prop="usePerform" required>
-          <el-select v-model="form.usePerform" @change="performChange" placeholder="请选择使用剧目">
+        <el-form-item v-if="form.useUserType==2" label="选择分销商:" prop="useUserId" key="useUserId" required>
+          <el-select
+            v-model="form.useUserId"
+            filterable
+            multiple
+            remote
+            reserve-keyword
+            clearable
+            placeholder="请输入关键词进行查询"
+            :remote-method="getOptions"
+            :loading="isLoading"
+            style="width: 100%;"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发放渠道" prop="channelType" key="channelType" required>
+          <el-select v-model="form.channelType" :disabled ="isDisabled" placeholder="请选择发放渠道">
                 <el-option
-                  v-for="dict in performList"
+                  v-for="dict in channelTypeList"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
@@ -61,25 +99,11 @@
                 ></el-option>
               </el-select>
         </el-form-item>
-        <el-form-item label="使用门槛" prop="useThresholdType" required>
-          <el-radio v-model="form.useThresholdType" :label="1">无条件</el-radio>
-          <el-radio v-model="form.useThresholdType" :label="2">指定条件</el-radio>
-        </el-form-item>
         <el-form-item v-if="form.useThresholdType==2" label="累计消费满" prop="useThresholdAmount" required>
           <el-input placeholder="" v-model="form.useThresholdAmount">
             <template slot="append">元</template>
           </el-input>
         </el-form-item>
-        <el-form-item label="发放渠道" prop="channelType" required>
-          <el-select v-model="form.channelType" placeholder="请选择发放渠道">
-                <el-option
-                  v-for="dict in channelTypeList"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                ></el-option>
-              </el-select>
-        </el-form-item>
         <el-form-item label="发放数量" prop="issuseNum" required>
           <el-input placeholder="" v-model="form.issuseNum" @change="changeNumber('issuseNum')">
             <template slot="append">张</template>
@@ -90,8 +114,10 @@
           <el-radio v-model="form.isAdd" :label="2">是</el-radio>
         </el-form-item> -->
         <el-form-item label="领取限制" prop="receiveType" required>
-          <el-radio v-model="form.receiveType" :label="1">否</el-radio>
-          <el-radio v-model="form.receiveType" :label="2">是</el-radio>
+          <el-radio-group v-model="form.receiveType">
+            <el-radio :label="1">否</el-radio>
+            <el-radio :label="2">是</el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item v-if="form.receiveType==2" label="领取限制数量" prop="receiveNum" required>
           <el-input placeholder="" v-model="form.receiveNum" @change="changeNumber('issuseNum')">
@@ -99,8 +125,10 @@
           </el-input>
         </el-form-item>
         <el-form-item label="使用时间" prop="useType" required>
-          <el-radio v-model="form.useType" :label="1">指定时间</el-radio>
-          <el-radio v-model="form.useType" :label="2">有效天数</el-radio>
+          <el-radio-group v-model="form.useType" :disabled="isDisabled">
+            <el-radio v-model="form.useType" :label="1">指定时间</el-radio>
+            <el-radio v-model="form.useType" :label="2">领用后开始计算</el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item v-if="form.useType==1" label="指定时间" prop="useStartDate" required>
           <el-date-picker
@@ -113,9 +141,9 @@
             end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-if="form.useType==2" label="有效天数" prop="useDay" required>
-          <el-input placeholder="领取后优惠券有效使用天数" v-model="form.useDay">
-            <template slot="append">天</template>
+        <el-form-item v-if="form.useType==2" label="领用后开始计算" prop="useDay" required>
+          <el-input placeholder="领取后优惠券有效使用时间" :disabled="isDisabled" v-model="form.useDay">
+            <template slot="append">小时</template>
           </el-input>
         </el-form-item>
       </el-form>
@@ -139,8 +167,9 @@
 
 <script>
 // import { updateNoticeMgr } from "@/api/system/noticeMgr";
-import { saveAndEdit } from "@/api/coupon/coupon";
+import { saveAndEdit, pageTableList } from "@/api/coupon/coupon";
 import { goodsPageList } from "@/api/programmeMr/programmeMr";
+import { tr } from "voca";
 // import { getToken } from "@/utils/auth";
 // import { log } from 'mathjs';
 export default {
@@ -172,6 +201,7 @@ export default {
         usePerform: [
           { required: true, message: "请选择使用剧目", trigger: ["change","blur"] },
         ],
+        useUserId:[{ required: true, message: "请选择分销商", trigger: ["change","blur"] }],
         useGood	: [{ required: true, message: "请选择使用票务", trigger: ["change","blur"] }],
         useThresholdType: [{ required: true, message: "请选择使用门槛", trigger: ["change","blur"] }],
         useThresholdAmount: [{ required: true, message: "请输入累计消费满", trigger: ["change","blur"] }],
@@ -185,10 +215,16 @@ export default {
         useDay	: [{ required: true, message: "请输入有效天数", trigger: ["change","blur"] }],
       },
       channelTypeList:[
-        {label:'小程序',value:1},
+        { label: '小程序', value: 1 },
+        { label: '分销', value: 2 },
       ],
       performList:[],
       goodsList:[],
+      options: [],
+      timer: null,
+      isLoading: null,
+      rowId: [],
+      isDisabled: false,
     };
   },
   created() {
@@ -204,9 +240,24 @@ export default {
     openDialog(title, obj) {
       this.open = true;
       this.reset();
+      this.getOptions();
       if (obj){
         this.title = "编辑优惠券";
         this.$nextTick(() => {
+          // console.log(obj,'4444');
+          // if(obj.useUserId) {
+          //   this.rowId = obj.useUserId.split(",");
+          // } else {
+          //   this.rowId = []
+          // }
+          // this.$set(this.form, 'useUserId', this.rowId);
+          this.$set(this.form, 'useUserId', obj.useUserId);
+          if(obj.useUserId) {
+            this.form.useUserId = this.getGoodsIds(this.form.useUserId);
+          } else {
+            this.form.useUserId = []
+          }
+          obj.useUserType == 2 ? this.isDisabled = true: this.isDisabled = false;
           this.$set(this.form, 'id', obj.id);
           this.$set(this.form, 'couponName', obj.couponName);
           this.$set(this.form, 'type', obj.type);
@@ -237,6 +288,61 @@ export default {
         this.$refs["form"].clearValidate();
       });
     },
+    /** 查询团队列表 */
+    getOptions(value) {
+      // if(!value) {
+      //   this.options = []
+      //   return
+      // }
+      if(this.timer) {
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(()=>{
+        this.isLoading = true;
+        this.options = []
+        pageTableList({
+          pageNum: 1,
+          pageSize: 999,
+          name: value,
+          status: 1
+        })
+        .then(response => {
+            // let teamArr = response.data.rows || []
+            // if(teamArr.length != 0) {
+            //   this.options = teamArr.filter(ele => ele.id != this.rowId)
+            // } else {
+            //   this.options = []
+            // }
+            this.options = response.data.rows || []
+            this.isLoading = false;
+          }
+        ).catch(()=>{
+          this.options = []
+          this.isLoading = false;
+        })
+      },1000)
+    },
+    // 使用对象切换
+    handleChange(val) {
+      if(val == 2) {
+        this.$set(this.form, 'channelType', 2);
+        this.$set(this.form, 'useType', 2);
+        this.$set(this.form, 'useDay', '24');
+        // this.form.channelType = 2;
+        // this.form.useType = 2
+        // this.form.useDay = 24
+        this.isDisabled = true
+      } else {
+        // this.form.channelType = 1;
+        // this.form.useType = 1
+        this.$set(this.form, 'useUserId', []);
+        this.$set(this.form, 'channelType', 1);
+        this.$set(this.form, 'useType', 1);
+        this.$set(this.form, 'useDay', '');
+        this.isDisabled = false
+      }
+
+    },
     getGoodsIds(data, type) {
         if (type == "array") {
             let array = data.join(",")
@@ -266,7 +372,10 @@ export default {
           try {
             this.loading = true;
             let params = JSON.parse(JSON.stringify(this.form))
+            params.useUserId  = this.form.useUserId.join(",");
             params.useGood = this.getGoodsIds(params.useGood, "array")
+            console.log(this.form,'this.form');
+            console.log(params,'params');
             const { code } = await saveAndEdit({ ...params });
             if (code === 200) {
               this.$message.success("操作成功!");