增加店铺挑战的管理

.env

@@ -1 +1 @@
-VUE_APP_BASE_API = 'http://192.168.100.24:2900'
+VUE_APP_BASE_API = 'http://127.0.0.1:2900'

src/api/exam.ts

@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+import { IRewardData } from '@/api/activity'
+
+export interface IExamData {
+  _id?: string
+  shop: string
+  name: string
+  desc?: string
+  qtypes: string[]
+  qcount: number
+  timeone: number
+  beginTime: number
+  endTime: number
+  active: number
+  rewardInfo: IRewardData[]
+}
+
+export const defaultExamData: IExamData = {
+  active: 0,
+  beginTime: 0,
+  endTime: 1924963201000,
+  timeone: 5,
+  name: '',
+  qcount: 0,
+  qtypes: [],
+  shop: '',
+  rewardInfo: []
+
+}
+
+export const getExams = (params: any) =>
+  request({
+    url: '/exams',
+    method: 'post',
+    params
+  })
+
+export const getExam = (id: string, params: any) =>
+  request({
+    url: `/exam/${id}`,
+    method: 'get',
+    params
+  })
+
+export const saveExam = (data: any) =>
+  request({
+    url: '/exam/save',
+    method: 'post',
+    data
+  })
+
+export const deleteExam = (id: string) =>
+  request({
+    url: `/exam/${id}/delete`,
+    method: 'post'
+  })

src/lang/en.ts

@@ -88,6 +88,9 @@ export default {
     activity_list: 'Activity List',
     create_activity: 'New Activity',
     edit_activity: 'Edit Activity',
+    exam_list: 'Exam List',
+    create_exam: 'New Exam',
+    edit_exam: 'Edit Exam',
     password: 'Password'
   },
   navbar: {

src/lang/zh.ts

@@ -88,6 +88,9 @@ export default {
     activity_list: '活动列表',
     create_activity: '新建活动',
     edit_activity: '编辑活动',
+    exam_list: '挑战列表',
+    create_exam: '新建挑战',
+    edit_exam: '编辑挑战',
     password: '修改密码'
   },
   navbar: {

src/router/modules/shop.ts

@@ -62,6 +62,38 @@ const shopRoutes: RouteConfig = {
         elicon: 'el-icon-arrow-right',
         hidden: true
       }
+    },
+    {
+      path: 'exam_list',
+      component: () => import('@/views/exam/list.vue'),
+      name: 'ExamList',
+      meta: {
+        title: 'exam_list',
+        permissions: ['shopexam:read'],
+        icon: 'list'
+      }
+    },
+    {
+      path: 'exam_new',
+      component: () => import('@/views/exam/edit.vue'),
+      name: 'CreateExam',
+      meta: {
+        title: 'create_exam',
+        icon: 'edit',
+        permissions: ['shopexam:edit'],
+        hidden: true
+      }
+    },
+    {
+      path: 'exam_edit/:id',
+      component: () => import('@/views/exam/edit.vue'),
+      name: 'ExamEditor',
+      meta: {
+        title: 'edit_exam',
+        permissions: ['shopexam:read'],
+        elicon: 'el-icon-arrow-right',
+        hidden: true
+      }
     }
   ]
 }

src/views/exam/edit.vue

@@ -0,0 +1,594 @@
+<template>
+  <div class="app-container">
+
+    <el-form
+        ref="postForm"
+        :model="postForm"
+        :rules="rules"
+        label-width="121px"
+        class="form-container"
+    >
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="基本信息" name="first">
+          <el-form-item label="店铺" prop="key" v-if="userLevel === 1">
+            <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="dataRange"
+          >
+            <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-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="每题答题时间:"
+              prop="timeone"
+          >
+            <el-input
+                v-model="postForm.timeone"
+                placeholder="每一题的答题时间(单位: 秒)"
+                name="timeone"
+                type="number"
+                required
+            />
+          </el-form-item>
+          <el-form-item
+              label="题库分类"
+          >
+            <el-tree
+                :data="typeOptions"
+                show-checkbox
+                accordion
+                node-key="id"
+                ref="typeTree"
+                highlight-current
+                :default-checked-keys="typeSelected"
+                :props="defaultProps">
+            </el-tree>
+
+          </el-form-item>
+        </el-tab-pane>
+        <el-tab-pane label="奖励设置" name="third">
+          <el-button
+              type="primary"
+              icon="el-icon-edit"
+              @click="handleCreateReward"
+          >
+            添加
+          </el-button>
+          <el-table
+              :data="postForm.rewardInfo"
+              border
+              fit
+              highlight-current-row
+          >
+            <el-table-column
+                label="排名"
+                prop="rank"
+                :formatter="formatRank"
+            >
+            </el-table-column>
+            <el-table-column
+                label="奖励"
+                prop="coupon"
+                :formatter = "formatCoupon"
+            >
+            </el-table-column>
+            <el-table-column
+                align="center"
+                width="180"
+                label="操作"
+                fixed="right"
+            >
+              <template slot-scope="scope">
+                  <el-button
+                      type="primary"
+                      size="small"
+                      icon="el-icon-edit"
+                      @click="handleEdit(scope)"
+                  >
+                    编辑
+                  </el-button>
+                <el-button
+                    type="danger"
+                    size="small"
+                    style="margin-left: 10px"
+                    @click="deleteRank(scope)"
+                >
+                  {{ $t('permission.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <el-form-item>
+        <el-button
+            type="primary"
+            @click="submitForm"
+        >
+          保存
+        </el-button>
+        <el-button @click="onCancel">
+          取消
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-dialog
+        :visible.sync="dialogVisible"
+        title="编辑奖励"
+    >
+      <el-form
+          :model="record"
+          ref="modalForm"
+          :rules="modalRules"
+          label-width="80px"
+          label-position="left"
+      >
+        <el-form-item label="排名" prop="rank">
+          第
+          <el-input
+              v-model="record.rank"
+              placeholder="排名"
+              type="number"
+              style="width: 30%"
+          />
+          名至
+          <el-input
+              v-model="record.rankEnd"
+              placeholder="可不填"
+              type="number"
+              style="width: 30%"
+          />
+          名
+        </el-form-item>
+
+        <el-form-item label="奖励" prop="coupon">
+          <el-select
+              v-model="record.coupon"
+              placeholder="选择奖励"
+              name="coupon"
+              required
+              class="w100"
+          >
+            <el-option
+                v-for="item in coupons"
+                :key="item._id"
+                :label="item.name"
+                :value="item._id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数量" prop="count">
+          <el-input
+              v-model="record.count"
+              placeholder="数量"
+              type="number"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+              type="primary"
+              @click="saveReward"
+              v-permission="['shopexam:edit']"
+          >
+            保存
+          </el-button>
+          <el-button @click="closeModal">
+            取消
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+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'
+import Sticky from '@/components/Sticky/index.vue'
+import UploadImage from '@/components/UploadImage/index.vue'
+import RegionPicker from '@/components/RegionPicker/index.vue'
+import Tinymce from '@/components/Tinymce/index.vue'
+import { getMyShop, getShops } from '@/api/shop'
+import {
+  defaultExamData,
+  getExam,
+  saveExam
+} from '@/api/exam'
+import { getAllCategory } from '@/api/question'
+import { cloneDeep } from 'lodash'
+import { getCoupons, ICouponData } from '@/api/coupon'
+import { IShopData } from '@/api/types'
+import { ElTree } from 'element-ui/types/tree'
+import { UserModule } from '@/store/modules/user'
+import { defaultRewardData, IRewardData } from '@/api/activity'
+
+@Component({
+  name: 'ExamEditor',
+  components: {
+    MaterialInput,
+    Sticky,
+    UploadImage,
+    RegionPicker,
+    Tinymce
+  }
+})
+export default class extends Vue {
+  private validateRequire = (rule: any, value: string, callback: Function) => {
+    if (value === '') {
+      if (rule.field === 'imageURL') {
+        this.$message({
+          message: 'Upload cover image is required',
+          type: 'error'
+        })
+      } else {
+        this.$message({
+          message: rule.field + ' 是必填的',
+          type: 'error'
+        })
+      }
+      callback(new Error(rule.field + ' 是必填的'))
+    } else {
+      callback()
+    }
+  }
+
+  private activeName = 'first'
+
+  private dataRange: Date[] = []
+
+  private postForm = Object.assign({}, defaultExamData)
+  private loading = false
+  private allDepts: IShopData[] = []
+  private typeOptions: {id: string, label: string, children?: any[]}[] = []
+  private typeSelected: string[] = []
+  private defaultProps = {
+    children: 'children',
+    label: 'label'
+  }
+
+  private rules = {
+    name: [{ validator: this.validateRequire }]
+  }
+
+  private tempTagView?: ITagView
+
+  private dialogType = 'new'
+  private record: IRewardData = {}
+  private dialogVisible = false
+  private modalRules = {
+    rank: [{ required: true, message: '请输入排名', trigger: 'blur' }
+    ]
+  }
+
+  private coupons: ICouponData[] = []
+
+  $refs!: {
+    modalForm: HTMLFormElement
+    postForm: HTMLFormElement
+    typeTree: ElTree<any, any>
+  }
+
+  get userLevel() {
+    return UserModule.level
+  }
+
+  get lang() {
+    return AppModule.language
+  }
+
+  async created() {
+    const id = this.$route.params?.id
+    await this.getRemoteCategory()
+    if (id) {
+      await this.fetchData(id)
+    }
+    if (UserModule.level === 1) {
+      await this.getRemoteDeptList()
+    } else {
+      this.postForm.shop = UserModule.department
+      await this.fetchMyShop()
+    }
+
+    this.tempTagView = Object.assign({}, this.$route)
+  }
+
+  private async fetchData(id: string) {
+    try {
+      const { data } = await getExam(id, { /* Your params here */ })
+      console.log(data)
+      this.postForm = data
+      if (data.beginTime !== undefined && data.endTime !== undefined) {
+        this.dataRange.push(new Date(data.beginTime))
+        this.dataRange.push(new Date(data.endTime))
+      }
+
+      // Just for test
+      const title = this.lang === 'zh' ? '编辑挑战' : 'Edit Exam'
+      // Set tagsview title
+      this.setTagsViewTitle(title)
+      // Set page title
+      this.setPageTitle(title)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  private setTagsViewTitle(title: string) {
+    const tagView = this.tempTagView
+    if (tagView) {
+      tagView.title = `${title}-${this.postForm._id}`
+      TagsViewModule.updateVisitedView(tagView)
+    }
+  }
+
+  private setPageTitle(title: string) {
+    document.title = `${title} - ${this.postForm._id}`
+  }
+
+  private async submitForm() {
+    try {
+      await this.$refs.postForm.validate()
+      if (this.dataRange.length > 1) {
+        this.postForm.beginTime = this.dataRange[0].getTime()
+        this.postForm.endTime = this.dataRange[1].getTime()
+      }
+      this.postForm.qtypes = this.$refs.typeTree.getCheckedKeys()
+      this.loading = true
+      const { data } = await saveExam(this.postForm)
+      this.postForm = data
+      this.loading = false
+      this.$notify({
+        title: 'Success',
+        message: 'The post save successfully',
+        type: 'success',
+        duration: 2000
+      })
+    } catch (err) {
+      console.error('Submit Error!')
+      return false
+    }
+  }
+
+  private async onCancel() {
+    try {
+      await this.$confirm('确认不保存当前活动信息?', 'Warning', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      this.$store.dispatch('delView', this.$route)
+      this.$router.go(-1)
+    } catch (e) {
+
+    }
+  }
+
+  private async getRemoteDeptList() {
+    const { data } = await getShops({})
+    if (!data.records) return
+    this.allDepts = data.records
+  }
+
+  private async fetchMyShop() {
+    const { data } = await getMyShop()
+    this.typeSelected = data.qtypes
+    console.log(this.typeSelected)
+    this.$refs.typeTree.setCheckedKeys(this.typeSelected)
+  }
+
+  @Watch('postForm.shop')
+  private onShopChange() {
+    if (this.postForm.shop) {
+      this.getCouponList(this.postForm.shop)
+    }
+
+    if (this.postForm.qtypes?.length > 0) {
+      this.typeSelected = this.postForm.qtypes
+    } else if (this.postForm.shop) {
+      let currentShop
+      for (const p of this.allDepts) {
+        if (p._id === this.postForm.shop) {
+          currentShop = p
+          break
+        }
+      }
+      if (currentShop) {
+        this.typeSelected = currentShop.qtypes
+      } else {
+        this.typeSelected = []
+      }
+    }
+    this.$refs.typeTree.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
+      })
+    }
+  }
+
+  // begin of award list
+  private async getCouponList(shop: string) {
+    const { data } = await getCoupons({ shop })
+    this.coupons = data.records
+  }
+
+  private formatCoupon(row: number, column: number, cellValue: string, index: number) {
+    let result = `未知(${cellValue})`
+    const data = this.postForm.rewardInfo[index]
+    for (const dep of this.coupons) {
+      if (dep._id === cellValue) {
+        result = dep.name
+        break
+      }
+    }
+    return `${result} x ${data.count}`
+  }
+
+  private formatRank(row: number, column: number, cellValue: string, index: number) {
+    const data = this.postForm.rewardInfo[index]
+    let result = `第 ${data.rank} 名`
+    if (data.rankEnd) {
+      result = `第 ${data.rank} 至 ${data.rankEnd} 名`
+    }
+    return result
+  }
+
+  private async deleteRank(scope: any) {
+    const { $index } = scope
+    try {
+      await this.$confirm('Confirm to remove the record?', 'Warning', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      })
+      this.postForm.rewardInfo.splice($index, 1)
+      this.$message({
+        type: 'success',
+        message: '删除成功, 请点击保存'
+      })
+    } catch (err) {
+
+    }
+  }
+
+  private handleCreateReward() {
+    this.record = Object.assign({}, defaultRewardData)
+    this.record.id = this.postForm.rewardInfo.length
+    this.dialogType = 'new'
+    this.dialogVisible = true
+  }
+
+  private handleEdit(scope: any) {
+    this.dialogType = 'edit'
+    this.dialogVisible = true
+    this.record = cloneDeep(scope.row)
+  }
+
+  private closeModal() {
+    this.dialogVisible = false
+    this.$refs.modalForm.clearValidate()
+  }
+
+  private saveReward() {
+    const isEdit = this.dialogType === 'edit';
+    (this.$refs.modalForm as HTMLFormElement).validate(async(valid: boolean) => {
+      if (!valid) {
+        this.$message.error('请按要求填写表单')
+        return false
+      }
+      if (isEdit) {
+        for (let index = 0; index < this.postForm.rewardInfo.length; index++) {
+          if (this.postForm.rewardInfo[index].id === this.record.id) {
+            this.postForm.rewardInfo.splice(index, 1, Object.assign({}, this.record))
+            break
+          }
+        }
+      } else {
+        this.postForm.rewardInfo.push(this.record)
+      }
+      this.dialogVisible = false
+      this.$notify({
+        title: 'Success',
+        dangerouslyUseHTMLString: true,
+        message: `
+          奖励成功保存, 请点击保存
+        `,
+        type: 'success'
+      })
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/exam/list.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="app-container">
+    <!-- filter -->
+    <el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
+      <el-form-item label="关键字" prop="key">
+        <el-input v-model="filterForm.key" placeholder="关键字"/>
+      </el-form-item>
+      <el-form-item label="店铺" prop="key" v-if="userLevel === 1">
+        <el-select
+            v-model="filterForm.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>
+        <el-button type="primary" @click="search">查询</el-button>
+        <el-button @click="resetFilterForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <router-link to="/shop/exam_new">
+      <el-button
+          type="primary"
+          icon="el-icon-edit"
+          v-permission="['shopexam:edit']"
+      >
+        添加
+      </el-button>
+    </router-link>
+    <el-table
+        v-loading="listLoading"
+        :data="list"
+        border
+        fit
+        stripe
+        highlight-current-row
+        style="width: 100%;margin-top:30px;"
+    >
+      <el-table-column
+          width="180px"
+          align="center"
+          label="添加时间"
+      >
+        <template slot-scope="{row}">
+          <span>{{ row.createdAt | parseTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="店铺"
+          prop="shop"
+          v-if="userLevel === 1"
+          :formatter = "formatDept"
+      >
+      </el-table-column>
+      <el-table-column
+          min-width="200px"
+          label="名称"
+      >
+        <template slot-scope="{row}">
+          <router-link
+              :to="'/shop/exam_edit/'+row._id"
+              class="link-type"
+          >
+            <span>{{ row.name }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+          label="是否启用"
+          prop="active"
+          :formatter="formatBool"
+      >
+      </el-table-column>
+
+      <el-table-column
+          align="center"
+          width="180"
+          label="操作"
+          fixed="right"
+      >
+        <template slot-scope="scope">
+          <router-link :to="'/shop/exam_edit/'+scope.row._id">
+            <el-button
+                type="primary"
+                size="small"
+                icon="el-icon-edit"
+                v-permission="['shopexam:edit']"
+            >
+              编辑
+            </el-button>
+          </router-link>
+          <el-button
+              type="danger"
+              size="small"
+              style="margin-left: 10px"
+              v-permission="['shopexam:delete']"
+              @click="handleDelete(scope)"
+          >
+            {{ $t('permission.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.limit"
+        @pagination="getList"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { IShopData } from '@/api/types'
+import Pagination from '@/components/Pagination/index.vue'
+import { getShops } from '@/api/shop'
+import { parseTime } from '@/utils'
+import { getAllCategory, getAllTags, IQuestionData } from '@/api/question'
+import { deleteExam, getExams } from '@/api/exam'
+import { UserModule } from '@/store/modules/user'
+
+@Component({
+  name: 'ExamList',
+  components: {
+    Pagination
+  },
+  filters: {
+    parseTime: (timestamp: string) => {
+      return parseTime(timestamp)
+    },
+    parseDate: (timestamp: string) => {
+      if (!timestamp) {
+        return '-'
+      }
+      return parseTime(timestamp, '{y}-{m}-{d}')
+    },
+    formatCount: (count: string) => {
+      if (!count) {
+        return 0
+      }
+      return count
+    }
+  }
+})
+export default class extends Vue {
+  private total = 0
+  private list: IQuestionData[] = []
+  private listLoading = true
+  private allDepts: IShopData[] = []
+  private listQuery = {
+    page: 1,
+    limit: 20,
+    key: '',
+    shop: ''
+  }
+
+  private typeOptions: any[] = []
+  private tagSet: Set<string> = new Set()
+  private tagOptions: string[] = []
+  private filterForm = {
+    key: '',
+    shop: ''
+  }
+
+  $refs!: {
+    filterForm: HTMLFormElement
+  }
+
+  get userLevel() {
+    return UserModule.level
+  }
+
+  async created() {
+    if (UserModule.level === 1) {
+      await this.getRemoteDeptList()
+    } else {
+      this.filterForm.shop = UserModule.department
+      this.listQuery.shop = UserModule.department
+    }
+    await this.getRemoteCategory()
+    await this.getList()
+  }
+
+  private async getList() {
+    this.listLoading = true
+    const { data } = await getExams(this.listQuery)
+    this.listLoading = false
+    this.list = data.records
+    this.total = data.total
+  }
+
+  private async handleDelete(scope: any) {
+    const { $index, row } = scope
+    await this.$confirm('确认删除该记录?', 'Warning', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    await deleteExam(row._id)
+    this.list.splice($index, 1)
+    this.$message({
+      type: 'success',
+      message: '删除成功!'
+    })
+  }
+
+  private search() {
+    this.filterData()
+  }
+
+  private filterData() {
+    this.listQuery.key = this.filterForm.key
+    this.listQuery.shop = this.filterForm.shop
+    this.listQuery.page = 1
+    this.getList()
+  }
+
+  private resetFilterForm() {
+    this.$refs.filterForm.resetFields()
+  }
+
+  private async getRemoteDeptList() {
+    const { data } = await getShops({ })
+    if (!data.records) return
+    this.allDepts = data.records
+  }
+
+  private async getRemoteTags() {
+    const { data } = await getAllTags()
+    console.log(data)
+    this.tagSet = new Set(data)
+    this.tagOptions = data
+  }
+
+  private async getRemoteCategory() {
+    const { data } = await getAllCategory()
+    for (const cat of data) {
+      const subArr = []
+      for (const s of cat.children) {
+        subArr.push({
+          value: s._id,
+          label: s.name
+        })
+      }
+      this.typeOptions.push({
+        value: cat._id,
+        label: cat.name,
+        children: subArr
+      })
+    }
+  }
+
+  private formatDept(row: number, column: number, cellValue: string) {
+    let result = '未指定'
+    for (const dep of this.allDepts) {
+      if (dep._id === cellValue) {
+        result = dep.name
+        break
+      }
+    }
+    return result
+  }
+
+  private formatBool(row: number, column: number, cellValue: boolean) {
+    return cellValue ? '是' : '否'
+  }
+}
+</script>

src/views/shop/list.vue

@@ -7,9 +7,9 @@
       </el-form-item>
       <el-form-item label="审核状态">
         <el-select
-            v-model="filterForm.publish"
+          v-model="filterForm.publish"
-            placeholder="所有"
+          placeholder="所有"
-            class="w100"
+          class="w100"
         >
           <el-option value="all">所有</el-option>
           <el-option value="true">已审核</el-option>
@@ -216,9 +216,9 @@ export default class extends Vue {
         cancelButtonText: '取消',
         type: 'warning'
       })
-      await updateShopPublish({id: row._id, publish: !row.publish})
+      await updateShopPublish({ id: row._id, publish: !row.publish })
       row.publish = !row.publish
-    } catch(err) {
+    } catch (err) {
       console.log(err)
     }
   }