From 2a2677227db64b620e8e5a79c21fccaec9f1d813 Mon Sep 17 00:00:00 2001
From: yulixing <yulixing@kingsome.cn>
Date: Thu, 21 Nov 2019 16:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E6=88=90=E5=99=A8=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/maker.js                        |  33 +++
 src/router/modules/games.js             |  13 +-
 src/views/games/details/maker/edit.vue  | 352 ++++++++++++++++++++++++
 src/views/games/details/maker/index.vue | 190 +++++++++++++
 4 files changed, 587 insertions(+), 1 deletion(-)
 create mode 100644 src/api/maker.js
 create mode 100644 src/views/games/details/maker/edit.vue
 create mode 100644 src/views/games/details/maker/index.vue

diff --git a/src/api/maker.js b/src/api/maker.js
new file mode 100644
index 0000000..c799c47
--- /dev/null
+++ b/src/api/maker.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function getMaker(params) {
+  return request({
+    url: '/mps/maker',
+    method: 'get',
+    params
+  })
+}
+
+export function saveMaker(data) {
+  return request({
+    url: '/mps/maker',
+    method: 'post',
+    data
+  })
+}
+
+export function updateMaker(data) {
+  return request({
+    url: '/mps/maker',
+    method: 'put',
+    data
+  })
+}
+
+export function delMaker(data) {
+  return request({
+    url: '/mps/maker',
+    method: 'delete',
+    data
+  })
+}
diff --git a/src/router/modules/games.js b/src/router/modules/games.js
index 5c4f622..0d94c2f 100644
--- a/src/router/modules/games.js
+++ b/src/router/modules/games.js
@@ -75,7 +75,6 @@ const gamesRouter = {
           name: 'GameDetailsSettings',
           meta: { title: '配置' }
         },
-
         {
           path: 'settings/achievement',
           component: () => import('@/views/games/details/settings/achievement'),
@@ -196,6 +195,18 @@ const gamesRouter = {
           component: () => import('@/views/games/details/others/mpTest'),
           name: 'GameDetailsMpTest',
           meta: { title: '心理测试' }
+        },
+        {
+          path: 'maker',
+          component: () => import('@/views/games/details/maker/index'),
+          name: 'GameDetailsMakerEdit',
+          meta: { title: '生成器列表' }
+        },
+        {
+          path: 'maker/edit',
+          component: () => import('@/views/games/details/maker/edit'),
+          name: 'GameDetailsMakerEdit',
+          meta: { title: '生成器编辑' }
         }
       ]
     }
diff --git a/src/views/games/details/maker/edit.vue b/src/views/games/details/maker/edit.vue
new file mode 100644
index 0000000..1242254
--- /dev/null
+++ b/src/views/games/details/maker/edit.vue
@@ -0,0 +1,352 @@
+<template>
+  <div>
+    <div class="main-content">
+      <el-form :model="makerForm" :rules="makerFormRules" label-width="170px" ref="makerForm">
+        <el-form-item label="测验题目" prop="title">
+          <el-input style="width: 70%" v-model="makerForm.title" />
+        </el-form-item>
+        <el-form-item label="测验描述" prop="desc">
+          <el-input style="width: 70%" v-model="makerForm.desc" />
+        </el-form-item>
+        <el-form-item label="文本模板" prop="template">
+          <el-input rows="10" style="width: 70%" type="textarea" v-model="makerForm.template" />
+          <span class="ipt-tip">模板说明：</span>
+          <span class="ipt-tip">[n0]~[n9]表示用户填写内容</span>
+          <span class="ipt-tip">[i0]~[i9]表示清单中随机一项</span>
+          <span class="ipt-tip">[%]表示百分比，所有[%]合计起来是100</span>
+          <span class="ipt-tip">[0]~[00000000]表示随机数字，每个零表示一位数</span>
+          <span class="ipt-tip">例：[n0]的猫咪吃了[0]个[i0]。</span>
+        </el-form-item>
+        <el-form-item
+          :key="key"
+          :label="`清单(i${key})`"
+          prop="list"
+          v-for="(val, key) in makerForm.list"
+        >
+          <el-input rows="5" style="width: 70%" type="textarea" v-model="val.text" />
+          <span class="ipt-tip">多项使用','分隔。</span>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="save" type="primary">保存</el-button>
+          <el-button @click="preview" type="warning">预览</el-button>
+          <el-button @click="reset('makerForm')" type="success">重置</el-button>
+          <el-button @click="del" type="danger" v-if="makerForm._id">删除</el-button>
+          <el-button @click="goBack">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- Modal -->
+    <el-dialog :before-close="closeModal" :visible.sync="modalVisible" title="预览" width="30%">
+      <p>{{previewText}}</p>
+      <span class="dialog-footer" slot="footer">
+        <el-button @click="modalVisible = false" type="primary">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+
+<script>
+import { getMaker, saveMaker, updateMaker, delMaker } from '@/api/maker'
+const regList = /\[i(\d+)\]/g
+
+export default {
+  name: 'GameDetailsMakerEdit',
+  data() {
+    return {
+      makerId: '',
+      makerForm: {
+        title: '',
+        desc: '',
+        template: '',
+        list: {}
+      },
+      makerFormRules: {
+        title: [{ required: true, message: '请填写测试标题', trigger: 'blur' }],
+        desc: [{ required: true, message: '请填写测试描述', trigger: 'blur' }],
+        template: [
+          { required: true, message: '请填写内容模板文字', trigger: 'blur' }
+        ]
+      },
+      modalVisible: false,
+      previewText: ''
+    }
+  },
+  mounted() {
+    if (this.$route.query.id) {
+      this.makerId = this.$route.query.id
+      this.getData()
+    }
+  },
+  watch: {
+    // makerForm() {
+    //   this.getBreadcrumb()
+    // }
+    'makerForm.template': {
+      handler: function(val) {
+        let key = 0
+        let res = regList.exec(val)
+        let list = JSON.parse(JSON.stringify(this.makerForm.list))
+        let newList = {}
+        while (res) {
+          key = res[1]
+          if (!list[key]) {
+            newList[key] = { text: '' }
+          } else {
+            newList[key] = list[key]
+          }
+          res = regList.exec(val)
+        }
+        this.makerForm.list = JSON.parse(JSON.stringify(newList))
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // api
+    getMaker(params) {
+      return new Promise((resolve, reject) => {
+        getMaker(params)
+          .then(res => {
+            const data = res.data
+            if (data.errcode === 0) resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    saveMaker(data) {
+      return new Promise((resolve, reject) => {
+        saveMaker(data)
+          .then(res => {
+            const data = res.data
+            if (data.errcode === 0) resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    updateMaker(data) {
+      return new Promise((resolve, reject) => {
+        updateMaker(data)
+          .then(res => {
+            const data = res.data
+            if (data.errcode === 0) resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    delMaker(data) {
+      return new Promise((resolve, reject) => {
+        delMaker(data)
+          .then(res => {
+            const data = res.data
+            if (data.errcode === 0) resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    // methods
+    async getData() {
+      try {
+        const data = await this.getMaker({ _id: this.makerId })
+        this.makerForm = data.result
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    async save() {
+      try {
+        const isValid = await this.validate('makerForm')
+        if (!isValid) {
+          this.$message.error('请按要求填写表单!')
+          return
+        }
+        if (this.makerForm._id) {
+          // 更新
+          const data = await this.updateMaker({
+            _id: this.makerForm._id,
+            title: this.makerForm.title,
+            desc: this.makerForm.desc,
+            template: this.makerForm.template,
+            list: this.makerForm.list
+          })
+          this.$message.success('数据更新成功！')
+        } else {
+          // 保存
+          const data = await this.saveMaker({
+            title: this.makerForm.title,
+            desc: this.makerForm.desc,
+            template: this.makerForm.template,
+            list: this.makerForm.list
+          })
+          console.log('成功保存')
+          this.makerId = data.result._id
+          this.$message.success('数据保存成功！')
+        }
+        this.clearValidate('makerForm')
+        this.getData()
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    async del() {
+      try {
+        this.$confirm('是否确认删除该测试?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(async () => {
+            const data = await this.delMaker({
+              _id: this.makerId
+            })
+            this.$message.success('数据已删除！')
+            this.goBack()
+          })
+          .catch(() => {
+            this.$message.info('已取消删除！')
+          })
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    reset(formName) {
+      this.$confirm('是否确认清空表单?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$refs[formName].resetFields()
+        })
+        .catch(() => {
+          this.$message.info('已取消重置！')
+        })
+    },
+    validate(formName) {
+      return new Promise((resolve, reject) => {
+        this.$refs[formName].validate(valid => {
+          resolve(valid)
+        })
+      })
+    },
+    clearValidate(formName) {
+      this.$refs[formName].clearValidate()
+    },
+    templateChange() {
+      let key = 0
+      let res = regList.exec(this.makerForm.template)
+      let list = JSON.parse(JSON.stringify(this.makerForm.list))
+      let newList = {}
+      while (res) {
+        key = res[1]
+        if (!list[key]) {
+          newList[key] = { text: '' }
+        } else {
+          newList[key] = list[key]
+        }
+        res = regList.exec(this.makerForm.template)
+      }
+      this.makerForm.list = JSON.parse(JSON.stringify(newList))
+    },
+    preview() {
+      this.makeText()
+      this.openModal()
+    },
+    makeText() {
+      let text = this.makerForm.template
+      // 模拟用户输入
+      const users = [
+        '妲己',
+        '蔡文姬',
+        '小乔',
+        '孙尚香',
+        '鲁班七号',
+        '李白',
+        '兰陵王',
+        '嫦娥',
+        '武则天',
+        '王昭君'
+      ]
+      const regUser = /\[n(\d+)\]/g
+      const regList = /\[i(\d+)\]/g
+      const regPer1 = /\[%\]/g
+      const regPer2 = /\[∞\]/g
+      const regNum = /\[(0+)\]/g
+
+      // 替换用户输入
+      while (regUser.test(text)) {
+        text = text.replace(regUser, (match, p1) => {
+          return users[p1] || '天外来客'
+        })
+      }
+
+      // 替换清单
+      while (regList.test(text)) {
+        text = text.replace(regList, (match, p1) => {
+          const list = this.makerForm.list[p1].text.split(',')
+          const idx = Math.floor(Math.random() * list.length)
+          return list[idx] || '天外来客'
+        })
+      }
+
+      //替换百分比
+      let countP = 0
+      while (regPer1.test(text)) {
+        text = text.replace(regPer1, (match, p1) => {
+          countP++
+          return '[∞]'
+        })
+      }
+      const nums = this.randomNum(countP, 100)
+      let idx = 0
+      while (regPer2.test(text)) {
+        text = text.replace(regPer2, (match, p1) => {
+          return nums[idx++] + '%'
+        })
+      }
+
+      // 替换随机数字
+      while (regNum.test(text)) {
+        text = text.replace(regNum, (match, p1) => {
+          return Math.floor(Math.random() * Math.pow(10, p1.length))
+        })
+      }
+      this.previewText = text
+    },
+    // 生成随机数
+    randomNum(n, v) {
+      var i,
+        s = 0,
+        r = [],
+        x = v
+      for (i = 1; i < n; i++) {
+        x = Math.random() * x
+        r.push(x.toFixed(0))
+        s += x
+        x = v - s
+      }
+      r.push(x.toFixed(0))
+      console.log('4', s, x, r)
+      return r
+    },
+    openModal() {
+      this.modalVisible = true
+    },
+    closeModal() {
+      this.modalVisible = false
+    },
+    goBack() {
+      this.$router.push('/games/details/maker')
+    }
+  }
+}
+</script>
diff --git a/src/views/games/details/maker/index.vue b/src/views/games/details/maker/index.vue
new file mode 100644
index 0000000..dc77999
--- /dev/null
+++ b/src/views/games/details/maker/index.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="app-container">
+    <!-- filter -->
+    <!-- <el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
+      <el-form-item label="姓名" prop="fullname">
+        <el-input v-model="filterForm.fullname" placeholder="请输入姓名"/>
+      </el-form-item>
+      <el-form-item label="操作类型" prop="type">
+        <el-select v-model="filterForm.type" placeholder="请选择操作类型">
+          <el-option v-for="(item,index) in types" :key="index" :label="item" :value="item"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="search">查询</el-button>
+        <el-button @click="reset('filterForm')">重置</el-button>
+      </el-form-item>
+    </el-form>-->
+    <!-- toolbar -->
+    <div class="toolbar clearfix">
+      <div class="l fl">
+        <el-button @click="create" type="primary">新增</el-button>
+      </div>
+
+      <div class="r fr">
+        <el-button @click="refresh" type="primary">刷新</el-button>
+      </div>
+    </div>
+    <!-- table -->
+    <el-table
+      :data="tableData"
+      @row-click="rowClick"
+      class="table mgt-20 mgb-20"
+      style="width: 100%"
+      v-loading="isLoaded"
+    >
+      <el-table-column label="测试名称" prop="title" show-overflow-tooltip />
+      <el-table-column label="测试描述" prop="desc" show-overflow-tooltip />
+      <el-table-column fixed="right" label="操作" prop="name" width="120">
+        <template slot-scope="scope">
+          <el-button @click.stop="view(scope.row)" size="small" type="text">查看</el-button>
+          <el-button @click.stop="del(scope.row)" size="small" type="text">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- pagination -->
+    <el-pagination
+      :current-page="currentPage"
+      :hide-on-single-page="true"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 50, 100]"
+      :total="total"
+      @current-change="pageChange"
+      @size-change="sizeChange"
+      class="al-r"
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+  </div>
+</template>
+
+<script>
+import { getMaker, saveMaker, updateMaker, delMaker } from '@/api/maker'
+
+export default {
+  name: 'GameDetailsMakerList',
+
+  data() {
+    return {
+      // filter
+      //   filterForm: {
+      //     fullname: '',
+      //     type: ''
+      //   },
+      //  toolbar
+      //   batch: {
+      //     show: false,
+      //     txt: '批量操作'
+      //   },
+      //   table
+      isLoaded: false,
+      tableData: [],
+      // pagination
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    // filter
+    // search() {
+    //   this.getData()
+    // },
+    // reset(formName) {
+    //   this.$refs[formName].resetFields()
+    // },
+    // toolbar
+    getMaker(params) {
+      return new Promise((resolve, reject) => {
+        getMaker(params)
+          .then(res => {
+            const data = res.data
+            console.log('ddddddddd', data)
+            if (data.errcode === 0) resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    delMaker(data) {
+      return new Promise((resolve, reject) => {
+        delMaker(data)
+          .then(res => {
+            const data = res.data
+            if (data.errcode === 0) resolve(data)
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    // toolbar
+    create() {
+      this.$router.push('/games/details/maker/edit')
+    },
+    refresh() {
+      this.getData()
+    },
+    // table
+    rowClick(row, column, event) {
+      this.view(row)
+    },
+    // table
+    async getData() {
+      try {
+        this.isLoaded = true
+        const data = await this.getMaker({
+          pageSize: this.pageSize,
+          currentPage: this.currentPage
+        })
+        console.log('da ta', data)
+        this.tableData = data.result
+        console.log(this.tableData)
+        this.total = data.total
+        this.isLoaded = false
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    view(row) {
+      this.$router.push(`/games/details/maker/edit?id=${row._id}`)
+    },
+    async del(row) {
+      try {
+        this.$confirm('是否确认删除该测试?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(async () => {
+            const data = await this.delMaker({
+              _id: row._id
+            })
+            this.$message.success('数据已删除！')
+            this.getData()
+          })
+          .catch(() => {
+            this.$message.info('已取消删除！')
+          })
+      } catch (err) {
+        console.log(err)
+      }
+    },
+    rowClick(row) {
+      this.view(row)
+    },
+    // pagination
+    sizeChange(val) {
+      this.pageSize = val
+      this.getData()
+    },
+    pageChange(val) {
+      this.currentPage = val
+      this.getData()
+    }
+  }
+}
+</script>