pyxis-page/src/views/question/setting.vue

<template>
  <div class="app-container">
    <el-row style="margin-bottom: 24px">
      <el-select
          v-model="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-row>
    <el-row style="margin-bottom: 24px;">
      <el-col :span="12" :offset="2">
        <el-button
            type="primary"
            v-loading="loading"
            @click="saveVal"
        >
          保存
        </el-button>
        <el-button @click="onCancel">
          取消
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="2">
      <el-tree
          :data="typeOptions"
          show-checkbox
          accordion
          node-key="id"
          ref="tree"
          highlight-current
          :default-checked-keys="typeSelected"
          :props="defaultProps">
      </el-tree>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { getGames, IGameData } from '@/api/game'
import Sticky from '@/components/Sticky/index.vue'
import { getShopGameInfo, getShops, updateShopQtypes } from '@/api/shop'
import { getAllCategory } from '@/api/question'
import { ElTree } from 'element-ui/types/tree'
import { IShopData } from '@/api/types'

@Component({
  name: 'QuestionSetting',
  components: {
    Sticky
  },
  filters: {
    parseGameType: (type: number) => {
      return type === 0 ? '微信小游戏' : '网页版'
    }
  }
})
export default class extends Vue {
  private total = 0
  private list: IGameData[] = []
  private loading = true
  private shop = ''
  private allDepts: IShopData[] = []
  private gameid = ''
  private versionid = ''
  private listQuery = {
    page: 1,
    limit: 20,
    key: '',
    hasVersion: 1
  }

  private typeSelected: string[] = []
  private typeOptions: {id: string, label: string, children?: any[]}[] = []
  private defaultProps = {
    children: 'children',
    label: 'label'
  }

  $refs!: {
    tree: ElTree<any, any>
  }

  async created() {
    await this.getList()
    await this.getRemoteDeptList('')
    await this.getRemoteCategory()
  }

  @Watch('shop')
  private onShopChange() {
    if (this.shop) {
      let currentShop
      for (const p of this.allDepts) {
        if (p._id === this.shop) {
          currentShop = p
          break
        }
      }
      if (currentShop) {
        this.typeSelected = currentShop.qtypes
      } else {
        this.typeSelected = []
      }
      this.$refs.tree.setCheckedKeys(this.typeSelected)
    }
  }

  private async getList() {
    this.loading = true
    const { data } = await getGames(this.listQuery)
    this.loading = false
    this.list = data.records
    this.total = data.total
  }

  private async getShopGameSetting(shopid: string) {
    const { data } = await getShopGameInfo({ shopid })
    console.log(data)
    this.gameid = data.gameid
    this.versionid = data.versionid
    this.updateGameSelected()
  }

  private updateGameSelected() {
    if (this.list.length === 0) {
      return
    }
    if (!this.gameid) {
      this.gameid = this.list[0]._id!
    }
    for (const game of this.list) {
      if (game._id === this.gameid) {
        if (!game.versions.find(o => o._id === this.versionid)) {
          this.versionid = game.versions[0]._id!
        }
        break
      }
    }
    for (let i = 0; i < this.list.length; i++) {
      const game = this.list[i]
      game.selected = game._id === this.gameid
      for (const v of game.versions) {
        v.selected = v._id === this.versionid
      }
      Vue.set(this.list, i, game)
    }
  }

  private async getRemoteDeptList(name: string) {
    const { data } = await getShops({ key: name })
    if (!data.records) return
    this.allDepts = data.records
  }

  private gameSelectedChange(gameid: string) {
    console.log(gameid)
    this.gameid = gameid
    this.updateGameSelected()
  }

  private versionSelectedChange(gameid: string, versionid: string) {
    console.log(gameid, versionid)
    this.gameid = gameid
    this.versionid = versionid
    this.updateGameSelected()
  }

  private async onCancel() {
    try {
      await this.$confirm('确认不保存当前信息?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      this.$store.dispatch('delView', this.$route)
      this.$router.go(-1)
    } catch (err) {

    }
  }

  private async saveVal() {
    if (!this.shop) {
      this.$message({
        message: '选择需要保存的店铺信息',
        type: 'warning'
      })
      return
    }
    try {
      const types = this.$refs.tree.getCheckedKeys()
      const data = {
        shopid: this.shop,
        qtypes: types
      }
      await updateShopQtypes(data)

      this.$notify({
        title: 'Success',
        message: '更新店铺题库配置成功',
        type: 'success',
        duration: 2000
      })
    } catch (err) {
      console.log('save shop gamesetting error', err)
    }
  }

  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>

<style lang="scss" scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom span{
  font-size: 13px;
  color: #999;
}

.button {
  padding: 0;
  min-height: auto;
  float: right;
}

.image {
  width: 100%;
  display: block;
}
.one-block{
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: .2s;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

</style>