From 88faf302e8b134abe90c59f86843eb6fbeffe615 Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Thu, 6 May 2021 17:30:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E7=BC=96=E8=BE=91=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=A2=98=E7=9B=AE=E5=88=86=E7=B1=BB=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/activity/edit.vue | 510 +++++++++++++++++++++---------------
 1 file changed, 302 insertions(+), 208 deletions(-)

diff --git a/src/views/activity/edit.vue b/src/views/activity/edit.vue
index b10353b..5b6c585 100644
--- a/src/views/activity/edit.vue
+++ b/src/views/activity/edit.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="app-container">
+
+
     <el-form
         ref="postForm"
         :model="postForm"
@@ -7,190 +9,224 @@
         label-width="121px"
         class="form-container"
     >
-      <el-form-item label="店铺" prop="key">
-        <el-select
-            v-model="postForm.shop"
-            placeholder="选择店铺"
-            name="shop"
-            required
-            class="w100"
-        >
-          <el-option
-              v-for="item in allDepts"
-              :key="item._id"
-              :label="item.name"
-              :value="item._id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-          style="margin-bottom: 40px;"
-          label="活动名称:"
-          prop="name"
-      >
-        <el-input
-            v-model="postForm.name"
-            placeholder="输入活动名称"
-            name="name"
-            required
-        />
-      </el-form-item>
-      <el-form-item
-          label="激活:"
-          prop="active"
-      >
-        <el-switch
-            v-model="postForm.active"
-            name="active"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            required
-        />
-      </el-form-item>
-      <el-form-item
-          prop="desc"
-          label="活动简介:"
-          style="margin-bottom: 30px;"
-      >
-        <tinymce
-            ref="editor"
-            v-model="postForm.desc"
-            :height="600"
-        />
-      </el-form-item>
-      <el-form-item label="重复类型" prop="repeatType">
-        <el-select
-            v-model="postForm.repeatType"
-            placeholder="选择"
-            name="repeatType"
-            required
-            class="w100"
-        >
-          <el-option
-              v-for="item in repeatTypes"
-              :key="item.id"
-              :label="item.label"
-              :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-          label="活动时间"
-          v-if="postForm.repeatType !== 9"
-          prop="beginTime">
-        <el-select
-            v-model="selectTime"
-            placeholder="选择或输入时间, 格式 09:15"
-            name="beginTime"
-            required
-            multiple
-            clearable
-            filterable
-            allow-create
-            style="width: 60%"
-            default-first-option
-            @change="timeChange"
-        >
-          <el-option
-              v-for="item in times"
-              :key="item"
-              :label="item"
-              :value="item"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-          label="周几"
-          v-if="postForm.repeatType === 2"
-          prop="weekDays">
-        <el-select
-            v-model="postForm.weekDays"
-            placeholder="选择周几"
-            name="weekDays"
-            required
-            multiple
-            clearable
-            style="width: 60%"
-            default-first-option
-        >
-          <el-option
-              v-for="item in weekDays"
-              :key="item.id"
-              :label="item.label"
-              :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="基本信息" name="first">
+          <el-form-item label="店铺" prop="key">
+            <el-select
+                v-model="postForm.shop"
+                placeholder="选择店铺"
+                name="shop"
+                required
+                class="w100"
+            >
+              <el-option
+                  v-for="item in allDepts"
+                  :key="item._id"
+                  :label="item.name"
+                  :value="item._id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+              style="margin-bottom: 40px;"
+              label="活动名称:"
+              prop="name"
+          >
+            <el-input
+                v-model="postForm.name"
+                placeholder="输入活动名称"
+                name="name"
+                required
+            />
+          </el-form-item>
+          <el-form-item
+              label="激活:"
+              prop="active"
+          >
+            <el-switch
+                v-model="postForm.active"
+                name="active"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                required
+            />
+          </el-form-item>
+          <el-form-item
+              prop="desc"
+              label="活动简介:"
+              style="margin-bottom: 30px;"
+          >
+            <tinymce
+                ref="editor"
+                v-model="postForm.desc"
+                :height="600"
+            />
+          </el-form-item>
+          <el-form-item label="重复类型" prop="repeatType">
+            <el-select
+                v-model="postForm.repeatType"
+                placeholder="选择"
+                name="repeatType"
+                required
+                class="w100"
+            >
+              <el-option
+                  v-for="item in repeatTypes"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+              label="活动时间"
+              v-if="postForm.repeatType !== 9"
+              prop="beginTime">
+            <el-select
+                v-model="selectTime"
+                placeholder="选择或输入时间, 格式 09:15"
+                name="beginTime"
+                required
+                multiple
+                clearable
+                filterable
+                allow-create
+                style="width: 60%"
+                default-first-option
+                @change="timeChange"
+            >
+              <el-option
+                  v-for="item in times"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+              label="周几"
+              v-if="postForm.repeatType === 2"
+              prop="weekDays">
+            <el-select
+                v-model="postForm.weekDays"
+                placeholder="选择周几"
+                name="weekDays"
+                required
+                multiple
+                clearable
+                style="width: 60%"
+                default-first-option
+            >
+              <el-option
+                  v-for="item in weekDays"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
 
-      <el-form-item
-          label="选择天"
-          v-if="postForm.repeatType === 3"
-          prop="monthDays">
-        <el-select
-            v-model="postForm.monthDays"
-            placeholder="选择每月中需要运行的日子"
-            name="monthDays"
-            required
-            multiple
-            clearable
-            style="width: 60%"
-            @change="monthDaysChange"
-            default-first-option
-        >
-          <el-option
-              v-for="item in monthDays"
-              :key="item.id"
-              :label="item.label"
-              :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
+          <el-form-item
+              label="选择天"
+              v-if="postForm.repeatType === 3"
+              prop="monthDays">
+            <el-select
+                v-model="postForm.monthDays"
+                placeholder="选择每月中需要运行的日子"
+                name="monthDays"
+                required
+                multiple
+                clearable
+                style="width: 60%"
+                @change="monthDaysChange"
+                default-first-option
+            >
+              <el-option
+                  v-for="item in monthDays"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
 
-      <el-form-item
-          label="指定日期"
-          prop="selectDate"
-          v-if="postForm.repeatType === 0"
-      >
-        <el-date-picker
-            v-model="selectDate"
-            type="dates"
-            align="right"
-            @change="dataChange"
-            style="width: 60%"
-            placeholder="选择一个或多个日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item
-          label="开始/结束日期"
-          prop="dataRange"
-          v-if="postForm.repeatType !== 0 && postForm.repeatType !== 9"
-      >
-        <el-date-picker
-            v-model="dataRange"
-            type="daterange"
-            align="right"
-            style="width: 40%"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item
-          label="准备时间(分):"
-          prop="prepareTime"
-          v-if="postForm.repeatType !== 9"
-      >
-        <el-input
-            v-model="postForm.prepareTime"
-            placeholder="提前多少时间可进游戏房间(分钟)"
-            name="prepareTime"
-            required
-        />
-      </el-form-item>
+          <el-form-item
+              label="指定日期"
+              prop="selectDate"
+              v-if="postForm.repeatType === 0"
+          >
+            <el-date-picker
+                v-model="selectDate"
+                type="dates"
+                align="right"
+                @change="dataChange"
+                style="width: 60%"
+                placeholder="选择一个或多个日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item
+              label="开始/结束日期"
+              prop="dataRange"
+              v-if="postForm.repeatType !== 0 && postForm.repeatType !== 9"
+          >
+            <el-date-picker
+                v-model="dataRange"
+                type="daterange"
+                align="right"
+                style="width: 40%"
+                unlink-panels
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item
+              label="准备时间(分):"
+              prop="prepareTime"
+              v-if="postForm.repeatType !== 9"
+          >
+            <el-input
+                v-model="postForm.prepareTime"
+                placeholder="提前多少时间可进游戏房间(分钟)"
+                name="prepareTime"
+                required
+            />
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane label="题库设置" name="second">
+          <el-form-item
+              label="题目数量:"
+              prop="qcount"
+          >
+            <el-input
+                v-model="postForm.qcount"
+                placeholder="本次活动题目数量"
+                name="qcount"
+                type="number"
+                required
+            />
+          </el-form-item>
+          <el-form-item
+              label="题库分类"
+          >
+            <el-tree
+                :data="typeOptions"
+                show-checkbox
+                accordion
+                node-key="id"
+                ref="tree"
+                highlight-current
+                :default-checked-keys="typeSelected"
+                :props="defaultProps">
+            </el-tree>
 
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane label="奖励设置" name="third">
+        </el-tab-pane>
+      </el-tabs>
       <el-form-item>
         <el-button
             type="primary"
@@ -203,11 +239,13 @@
         </el-button>
       </el-form-item>
     </el-form>
+
+
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 import { ITagView, TagsViewModule } from '@/store/modules/tags-view'
 import MaterialInput from '@/components/MaterialInput/index.vue'
@@ -219,6 +257,7 @@ import Tinymce from '@/components/Tinymce/index.vue'
 import { getShops } from '@/api/shop'
 import { defaultActivityData, getActivity, saveActivity } from '@/api/activity'
 import { sec2TimeStr, timeStr2Sec } from '@/utils'
+import { getAllCategory } from '@/api/question'
 
 @Component({
   name: 'ActivityEditor',
@@ -250,22 +289,23 @@ export default class extends Vue {
       callback()
     }
   }
+  private activeName = 'first'
   private monthDays = []
   private repeatTypes = [
-    {id: 0, label: '指定日期'},
-    {id: 1, label: '每日'},
-    {id: 2, label: '每周'},
-    {id: 3, label: '每月'},
-    {id: 9, label: '随时(一般测试用)'},
+    { id: 0, label: '指定日期' },
+    { id: 1, label: '每日' },
+    { id: 2, label: '每周' },
+    { id: 3, label: '每月' },
+    { id: 9, label: '随时(一般测试用)' }
   ]
   private weekDays = [
-    {id: 0, label: '周日'},
-    {id: 1, label: '周一'},
-    {id: 2, label: '周二'},
-    {id: 3, label: '周三'},
-    {id: 4, label: '周四'},
-    {id: 5, label: '周五'},
-    {id: 6, label: '周六'},
+    { id: 0, label: '周日' },
+    { id: 1, label: '周一' },
+    { id: 2, label: '周二' },
+    { id: 3, label: '周三' },
+    { id: 4, label: '周四' },
+    { id: 5, label: '周五' },
+    { id: 6, label: '周六' }
   ]
   private dataRange: Date[] = []
   private selectDate: Date[] = []
@@ -274,12 +314,16 @@ export default class extends Vue {
 
   private postForm = Object.assign({}, defaultActivityData)
   private loading = false
-  private querying = false
   private allDepts = []
-
+  private typeOptions: {id: string, label: string, children?: any[]}[] = []
+  private typeSelected = []
+  private defaultProps = {
+    children: 'children',
+    label: 'label'
+  }
 
   private rules = {
-    name: [{ validator: this.validateRequire }],
+    name: [{ validator: this.validateRequire }]
   }
 
   private tempTagView?: ITagView
@@ -290,14 +334,15 @@ export default class extends Vue {
   }
 
 
-  created() {
+  async created() {
     this.initTimes()
     const id = this.$route.params?.id
+    await this.getRemoteCategory()
+    await this.getRemoteDeptList()
     if (id) {
-      this.fetchData(id)
+      await this.fetchData(id)
     }
     this.tempTagView = Object.assign({}, this.$route)
-    this.getRemoteDeptList()
   }
 
   deactivated() {
@@ -327,6 +372,7 @@ export default class extends Vue {
         this.dataRange.push(new Date(data.beginDay))
         this.dataRange.push(new Date(data.endDay))
       }
+
       // Just for test
       const title = this.lang === 'zh' ? '编辑活动' : 'Edit Activity'
       // Set tagsview title
@@ -341,13 +387,13 @@ export default class extends Vue {
   private setTagsViewTitle(title: string) {
     const tagView = this.tempTagView
     if (tagView) {
-      tagView.title = `${title}-${this.postForm._id}`
+      tagView.title = `${ title }-${ this.postForm._id }`
       TagsViewModule.updateVisitedView(tagView)
     }
   }
 
   private setPageTitle(title: string) {
-    document.title = `${title} - ${this.postForm._id}`
+    document.title = `${ title } - ${ this.postForm._id }`
   }
 
   private async submitForm() {
@@ -367,6 +413,7 @@ export default class extends Vue {
         this.postForm.beginDay = this.dataRange[0].getTime()
         this.postForm.endDay = this.dataRange[1].getTime()
       }
+      this.postForm.qtypes = this.$refs.tree.getCheckedKeys()
       this.loading = true
       const { data } = await saveActivity(this.postForm)
       this.postForm = data
@@ -382,6 +429,7 @@ export default class extends Vue {
       return false
     }
   }
+
   private async onCancel() {
     try {
       await this.$confirm('确认不保存当前活动信息?', 'Warning', {
@@ -389,35 +437,38 @@ export default class extends Vue {
         cancelButtonText: '取消',
         type: 'warning'
       })
-      this.$store.dispatch("delView", this.$route)
+      this.$store.dispatch('delView', this.$route)
       this.$router.go(-1)
     } catch (e) {
 
     }
 
   }
+
   private async getRemoteDeptList() {
-    const { data } = await getShops({ })
+    const { data } = await getShops({})
     if (!data.records) return
     this.allDepts = data.records
   }
+
   private dataChange(val: any) {
     console.log(this.selectDate)
   }
 
   private initTimes() {
     for (let i = 0; i < 24; i++) {
-      for (let j = 0; j < 4; j ++) {
+      for (let j = 0; j < 4; j++) {
         let secs = i * 3600 + j * 15 * 60
         let label = sec2TimeStr(secs, false)
         this.times.push(label)
       }
     }
-    this.monthDays.push({id: 0, label: '全选'})
+    this.monthDays.push({ id: 0, label: '全选' })
     for (let i = 1; i < 32; i++) {
-      this.monthDays.push({id: i, label: i})
+      this.monthDays.push({ id: i, label: i })
     }
   }
+
   private timeChange(vals: string[]) {
     if (vals.length > 0) {
       let lastVal = this.selectTime[this.selectTime.length - 1]
@@ -425,11 +476,12 @@ export default class extends Vue {
         this.selectTime.pop()
       }
       lastVal = sec2TimeStr(timeStr2Sec(lastVal), false)
-      this.selectTime.splice(this.selectTime.length - 1,1, lastVal)
+      this.selectTime.splice(this.selectTime.length - 1, 1, lastVal)
       console.log(this.selectTime)
     }
 
   }
+
   private monthDaysChange(days: number[]) {
     if (days.indexOf(0) >= 0) {
       this.postForm.monthDays.length = 0
@@ -439,6 +491,48 @@ export default class extends Vue {
     }
   }
 
+  @Watch('postForm.shop')
+  private onShopChange() {
+    if (this.postForm.qtypes?.length > 0) {
+      this.typeSelected = this.postForm.qtypes
+      return
+    }
+    if (this.postForm.shop) {
+      let currentShop
+      for (let p of this.allDepts) {
+        if (p._id == this.postForm.shop) {
+          currentShop = p
+          break
+        }
+      }
+      if (currentShop) {
+        this.typeSelected = currentShop.qtypes
+      } else {
+        this.typeSelected = []
+      }
+      this.$refs.tree.setCheckedKeys(this.typeSelected)
+    }
+  }
+
+  // begin of set puzzle types
+  private async getRemoteCategory() {
+    const { data } = await getAllCategory()
+    for (const cat of data) {
+      const subArr = []
+      for (const s of cat.children) {
+        subArr.push({
+          id: s._id,
+          label: s.name
+        })
+      }
+      this.typeOptions.push({
+        id: cat._id,
+        label: cat.name,
+        children: subArr
+      })
+    }
+  }
+
 }
 </script>