2021/12/22

babel.config.js

 module.exports = {
   presets: [
     // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
-    '@vue/cli-plugin-babel/preset'
+    // '@vue/cli-plugin-babel/preset',
+    // 之前一直报错说core.js 把上面这句话改为下面的就可以了
+    ['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]
   ],
   'env': {
     'development': {

package.json

     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "ali-oss": "^6.16.0",
     "axios": "^0.18.1",
     "axios-retry": "^3.2.4",
-    "core-js": "3.6.5",
+    "core-js": "^2.6.12",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
     "js-md5": "^0.7.3",

src/api/game.js

+import request from '@/utils/request'
+
+/**
+* 保存游戏
+* @param {*} data 
+* @returns 
+*/
+export const saveGame = (data) => request({
+  url: '/admin/game',
+  method: 'post',
+  data
+})
+
+/**
+ * 游戏列表
+ * @param {*} params 
+ * @returns 
+ */
+export const getGameList = (params) => request({
+  url: '/admin/game', params
+})
+
+/**
+ * 删除游戏
+ * @param {*} data 
+ * @returns 
+ */
+export const deleteGame = (id) => request({
+  url: `/admin/game/${id}`, method: 'delete'
+})
+/**
+ * 更新游戏
+ * @param {*} data 
+ * @returns 
+ */
+export const UpdateGame = (data, id) => request({
+  url: `/admin/game/${id}`, method: 'put', data
+})
+/**
+ * 查询游戏详情
+ * @param {*} params 
+ * @returns 
+ */
+export const getGameDetail = (id) => request({
+  url: `/admin/game/${id}`
+})

src/api/oss.js

+import OSS from 'ali-oss'
+import request from '@/utils/request'
+
+let client
+let stsInfo
+
+/**
+ * 获取 OSS-STS 临时凭证
+ * @returns
+ */
+export const getSTSToken = () => request({ url: '/admin/oss-sts' })
+
+/**
+ * 获取 OSS 客户端
+ * @returns
+ */
+export function getOSSClient() {
+  if (client) {
+    return Promise.resolve(client)
+  }
+
+  return getSTSToken().then((sts) => {
+    stsInfo = sts
+    client = new OSS({
+      accessKeyId: sts.data.accessKeyId,
+      accessKeySecret: sts.data.accessKeySecret,
+      stsToken: sts.data.stsToken,
+      bucket: sts.data.bucket,
+      endpoint: sts.data.endpoint,
+      refreshSTSTokenInterval: 25 * 60 * 1000, // 每25min刷新一次
+      refreshSTSToken: () => {
+        return getSTSToken().then((res) => {
+          return {
+            accessKeyId: res.accessKeyId,
+            accessKeySecret: res.accessKeySecret,
+            stsToken: res.stsToken
+          }
+        })
+      }
+    })
+
+    return client
+  })
+}
+
+/**
+ * 上传文件到 OSS
+ * @param {*} file
+ * @returns
+ */
+export function upload(file) {
+  return getOSSClient().then(() => {
+    const data = new FormData()
+    data.append('file', file)
+    const now = new Date()
+    const fileName = `${stsInfo.path}/${now.valueOf()}-${file.name}`
+
+    return client.put(fileName, file).then((res) => res.url)
+  })
+}

src/api/question.js

 import request from '@/utils/request'
-/**
- * 题库列表
- * @param {*} params 
- * @returns 
- */
-export const getQuestionList = (params) => request('/admin/question', { params })
 
 /**
-* 保存民宿
+* 保存应用
 * @param {*} data 
 * @returns 
 */
-export const saveQuestion = (data) =>request({
-  url: '/admin/question',
+export const saveApp = (data) => request({
+  url: '/admin/App',
   method: 'post',
   data
 })
- 
 
 /**
- * 删除民宿
+ * 应用列表
+ * @param {*} params 
+ * @returns 
+ */
+export const getAppList = (params) => request({
+  url: '/admin/App', params
+})
+
+/**
+ * 删除应用
  * @param {*} data 
  * @returns 
  */
-export const deleteQuestion = (id) => request(`/admin/question/${id}`, { method: 'delete' })
+export const deleteApp = (id) => request({
+  url: `/admin/App/${id}`, method: 'delete'
+})
 /**
- * 更新民宿
+ * 更新应用
  * @param {*} data 
  * @returns 
  */
-export const UpdateQuestion = (data, id) => request(`/admin/question/${id}`, { method: 'put', data })
+export const UpdateApp = (data, id) => request({
+  url: `/admin/App/${id}`, method: 'put', data
+})
 /**
- * 查询民宿详情
+ * 查询应用详情
  * @param {*} params 
  * @returns 
  */
-export const getQuestionDetail = (id) => request(`/admin/question/${id}`)
+export const getAppDetail = (id) => request({
+  url: `/admin/App/${id}`
+})

src/components/CharacterResult/edit.vue

 <template>
   <div style="padding: 20px">
-    实例详情
     <h2 style="text-align: center">
-      特征实例{{ this.resultId ? "编辑" : "添加" }}
+      特征实例{{ resultId ? "编辑" : "添加" }}
     </h2>
     <el-form ref="form" :model="form" label-width="150px" size="mini">
       <el-form-item label="实例名称：">
         <el-input
           v-model="form.name"
           placeholder="请输入实例名（必填）"
-        ></el-input>
+        />
       </el-form-item>
       <el-form-item label="特征库图标：">
-        <UploadImage />
+        <UploadImage :icon="form.thumb" @handleChange="handleChange" @handleDeleteIcon="handleDeleteIcon" />
       </el-form-item>
       <el-form-item label="实例描述：">
-        <el-input type="textarea" v-model="form.desc"></el-input>
+        <el-input v-model="form.desc" type="textarea" />
       </el-form-item>
 
       <el-form-item label="特征词：">
             :key="item.wordId"
             :label="item.word"
             :value="item.wordId"
-          >
-          </el-option>
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">确定</el-button>
+        <el-button @click="$router.go(-1)">返回</el-button>
       </el-form-item>
     </el-form>
   </div>
 import {
   saveCharacterResult,
   UpdateCharacterResult,
-  getCharacterResultDetail,
-} from "@/api/characterLib";
-import UploadImage from "@/components/UploadImage/index.vue";
+  getCharacterResultDetail
+} from '@/api/characterLib'
+import UploadImage from '@/components/UploadImage/index.vue'
 export default {
+  components: {
+    UploadImage
+  },
   props: {
     libId: String,
     resultId: String,
     wordList: {
       type: Array,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
     return {
         thumb: undefined,
         desc: undefined,
         libId: undefined,
-        wordList: [],
+        wordList: []
       },
-      nowList: [],
-    };
+      nowList: []
+    }
   },
   watch: {
-    resultId: function () {
+    resultId: function() {
       if (this.resultId) {
-        this.nowList = [];
+        this.nowList = []
         getCharacterResultDetail(this.resultId).then((res) => {
-          this.form = res.data;
-          let list = res.data.wordList;
+          this.form = res.data
+          const list = res.data.wordList
           list.map((item) => {
-            this.nowList.push(item.wordId);
-          });
-        });
+            this.nowList.push(item.wordId)
+          })
+        })
       } else {
         this.form = {
           name: undefined,
           thumb: undefined,
           desc: undefined,
           libId: undefined,
-          wordList: [],
-        };
-        this.nowList = [];
+          wordList: []
+        }
+        this.nowList = []
       }
-    },
+    }
   },
   methods: {
     onSubmit() {
       this.form.wordList = this.wordList.filter((item) =>
-        this.nowList.some((v) => v == item.wordId)
-      );
-      this.form.libId = this.libId;
+        this.nowList.some((v) => v === item.wordId)
+      )
+      this.form.libId = this.libId
       if (this.form.name) {
         if (this.resultId) {
+          if (!this.form.thumb) {
+            this.form.thumb = ''
+          }
           UpdateCharacterResult(this.form, this.resultId).then((res) => {
-            this.$message("修改实例成功");
-            //告诉父页面实例表需要刷新并且关闭当前组件
-            this.$emit("handleRefresh", true);
-          });
+            this.$message('修改实例成功')
+            // 告诉父页面实例表需要刷新并且关闭当前组件
+            this.$emit('handleRefresh', true)
+          })
         } else {
           saveCharacterResult(this.form).then((res) => {
-            this.$message("添加实例成功");
-            //告诉父页面实例表需要刷新并且关闭当前组件
-            this.$emit("handleRefresh", true);
-          });
+            this.$message('添加实例成功')
+            // 告诉父页面实例表需要刷新并且关闭当前组件
+            this.$emit('handleRefresh', true)
+          })
         }
       } else {
-        this.$message("请输入实例名");
+        this.$message('请输入实例名')
       }
     },
-  },
-  components: {
-    UploadImage,
-  },
-};
+    handleChange(val) {
+      this.form.thumb = val
+    },
+    handleDeleteIcon() {
+      this.form.thumb = ''
+    }
+  }
+}
 </script>
 <style>
-</style>
+</style>

src/components/CharacterResult/index.vue

           style="width: 150px; margin-right: 20px"
         />
         创建时间：
-      <el-date-picker
-        v-model="daterange"
-        size="mini"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        value-format="yyyy-MM-dd"
-        @change="dateChange"
-        style="width:220px; margin-right: 20px"
-      >
-      </el-date-picker>
+        <el-date-picker
+          v-model="daterange"
+          size="mini"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width:220px; margin-right: 20px"
+          @change="dateChange"
+        />
 
         <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
         <el-button size="mini" @click="onReset">重置</el-button>
             title="这个实例确定删除吗？"
             @onConfirm="handleDelete(scope.row)"
           >
-            <el-button type="text" slot="reference">删除</el-button>
+            <el-button slot="reference" type="text">删除</el-button>
           </el-popconfirm>
         </template>
       </el-table-column>
 <script>
 import {
   getCharacterResultList,
-  deleteCharacterResult,
-} from "@/api/characterLib";
+  deleteCharacterResult
+} from '@/api/characterLib'
 
 export default {
   props: {
-    libId: String,
+    libId: String
   },
   data() {
     return {
-      name: undefined,      
-      daterange:'',
+      name: undefined,
+      daterange: undefined,
       tableData: [],
-      endDate:undefined,
-      startDate:undefined
-    };
+      endDate: undefined,
+      startDate: undefined
+    }
   },
   watch: {
-    libId: function () {
-      this.onSearch();
-    },
+    libId: function() {
+      this.onSearch()
+    }
   },
   methods: {
-    //添加实例
+    // 添加实例
     handleAddRusult() {
-      this.$emit("handleAddRusult", true);
+      this.$emit('handleAddRusult', true)
     },
     handleEdit(row) {
       // 向外传送数据row.resultId
-      this.$emit("handleEdit", row.resultId);
+      this.$emit('handleEdit', row.resultId)
     },
     handleDelete(row) {
       deleteCharacterResult(row.resultId).then(() => {
-        this.$message("删除实例成功");
-        this.onSearch();
-        //关闭编辑实例页面防止编辑页面还没关闭就删除当前实例了
-        this.$emit("handleClose", true);
-      });
+        this.$message('删除实例成功')
+        this.onSearch()
+        // 关闭编辑实例页面防止编辑页面还没关闭就删除当前实例了
+        this.$emit('handleClose', true)
+      })
     },
     onSearch() {
-      getCharacterResultList({ libId: this.libId, name: this.name ,startDate:this.startDate,endDate:this.endDate}).then(
+      getCharacterResultList({ libId: this.libId, name: this.name, startDate: this.startDate, endDate: this.endDate }).then(
         (res) => {
-          this.tableData = res.data.records;
+          this.tableData = res.data.records
         }
-      );
+      )
     },
     onReset() {
-      this.name = "";      
-      this.daterange = "";
-      this.startDate = "";
-      this.endDate = "";
-      this.onSearch();
+      this.name = ''
+      this.daterange = ''
+      this.startDate = ''
+      this.endDate = ''
+      this.onSearch()
     },
-    dateChange(val){
-      this.startDate=this.daterange[0]
-      this.endDate=this.daterange[1]
+    dateChange(val) {
+      this.startDate = this.daterange[0]
+      this.endDate = this.daterange[1]
     }
-  },
-};
+  }
+}
 </script>
 <style>
 .noshadowCard > .box-card {
   box-shadow: none;
 }
-</style>
+</style>

src/components/Question/index.vue

+<template>
+  <div class="body">
+    <div class="noshadowCard">
+      <el-card class="box-card">
+        问题名称：<el-input
+          v-model="title"
+          size="mini"
+          style="width: 150px; margin-right: 20px"
+        />
+        创建时间：
+        <el-date-picker
+          v-model="daterange"
+          size="mini"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width:220px; margin-right: 20px"
+          @change="dateChange"
+        />
+
+        <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
+        <el-button size="mini" @click="onReset">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleAddRusult">添加问题</el-button>
+      </el-card>
+    </div>
+    <el-table stripe :data="tableData" border style="width: 100%">
+      <el-table-column prop="name" label="问题名称" />
+      <el-table-column prop="createDate" label="创建时间">
+        <template slot-scope="scope">{{
+          scope.row.createDate.substr(0, 10)
+        }}</template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-popconfirm
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定删除这个问题吗？"
+            @onConfirm="handleDelete(scope.row)"
+          >
+            <el-button slot="reference" type="text">删除</el-button>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import {
+  getCharacterResultList,
+  deleteCharacterResult
+} from '@/api/characterLib'
+
+export default {
+  props: {
+    gameId: String,
+    libId: String
+  },
+  data() {
+    return {
+      // 问题名称
+      title: undefined,
+      daterange: '',
+      tableData: [],
+      endDate: undefined,
+      startDate: undefined
+    }
+  },
+  watch: {
+    gameId: function() {
+      this.onSearch()
+    }
+  },
+  methods: {
+    // 添加实例
+    handleAddRusult() {
+      this.$emit('handleAddRusult', true)
+    },
+    handleEdit(row) {
+      // 向外传送数据row.resultId
+      this.$emit('handleEdit', row.resultId)
+    },
+    handleDelete(row) {
+      deleteCharacterResult(row.resultId).then(() => {
+        this.$message('删除实例成功')
+        this.onSearch()
+        // 关闭编辑实例页面防止编辑页面还没关闭就删除当前实例了
+        this.$emit('handleClose', true)
+      })
+    },
+    onSearch() {
+      getCharacterResultList({ libId: this.libId, name: this.name, startDate: this.startDate, endDate: this.endDate }).then(
+        (res) => {
+          this.tableData = res.data.records
+        }
+      )
+    },
+    onReset() {
+      this.name = ''
+      this.daterange = ''
+      this.startDate = ''
+      this.endDate = ''
+      this.onSearch()
+    },
+    dateChange(val) {
+      this.startDate = this.daterange[0]
+      this.endDate = this.daterange[1]
+    }
+  }
+}
+</script>
+<style>
+.noshadowCard > .box-card {
+  box-shadow: none;
+}
+</style>

src/components/UploadImage/index.vue

     <el-upload
       action="#"
       list-type="picture-card"
+      :file-list="fileList"
       :limit="1"
       :on-remove="handleRemove"
       :on-change="handleChange"
       :auto-upload="false"
+      @http-request="customUploadFile"
     >
-      <i class="el-icon-plus"></i>
+      <i class="el-icon-plus" />
     </el-upload>
   </div>
 </template>
 <script>
+import { uploadFile } from '@/utils/upload'
 export default {
+  props: {
+    icon: String
+  },
   data() {
     return {
-      dialogImageUrl: "",
+      dialogImageUrl: undefined,
       dialogVisible: false,
-    };
+      fileList: []
+    }
+  },
+  watch: {
+    icon() {
+      if (this.icon) {
+        this.fileList = [{ name: 'image', url: this.icon }]
+      } else {
+        this.fileList = []
+      }
+    }
   },
   methods: {
+    customUploadFile(val) {
+      uploadFile({ file: val, onSuccess: this.onSuccess, onError: this.onError })
+    },
+    onSuccess(url) {
+      this.$emit('handleChange', url)
+    },
+    onError(e) {
+    },
     handleRemove(file, fileList) {
-      console.log(file, fileList);
+      this.fileList = []
+      this.$emit('handleDeleteIcon', true)
     },
     handleChange(file, fileList) {
-      console.log(fileList[0].raw);
-    },
-  },
-};
+      this.customUploadFile(file.raw)
+    }
+  }
+}
 </script>
 <style>
 .uploadClass .el-upload--picture-card {
   width: 100px;
   height: 100px;
 }
-</style> 
+</style>

src/router/index.js

       {
         path: 'questionList/edit',
         name: '编辑题目',
-        component: () => import('@/views/questionList/edit'),
+        component: () => import('@/views/questionList/edit')
         // meta: { title: '编辑题目', icon: 'form' }
       }]
   },
     children: [
       {
         path: 'characterLibManage',
-        name: '特征库列表',
+        name: 'characterLibList',
         component: () => import('@/views/characterLibManage/index'),
         meta: { title: '特征库列表', icon: 'form' }
       },
       {
-        path: 'characterLibManage/add',
-        name: '新增特征库',
-        component: () => import('@/views/characterLibManage/add'),
-        // meta: { title: '新增特征库', icon: 'form' }
-      },
-      {
+        hidden: true,
         path: 'characterLibManage/edit',
-        name: '编辑特征库',
+        name: 'characterLibEdit',
         component: () => import('@/views/characterLibManage/edit'),
-        // meta: { title: '编辑特征库', icon: 'form' }
+        meta: { title: '编辑特征库', icon: 'form' }
       }
     ]
   },
         component: () => import('@/views/gameManage/index'),
         meta: { title: '游戏列表', icon: 'form' }
       },
-      
+      {
+        hidden: true,
+        path: 'gameManage/edit',
+        name: 'gameEdit',
+        component: () => import('@/views/gameManage/edit'),
+        meta: { title: '编辑游戏', icon: 'form' }
+      }
     ]
   },
   {
         meta: { title: '应用列表', icon: 'form' }
       },
       {
+        hidden: true,
         path: 'appManage/add',
         name: '新增应用',
         component: () => import('@/views/appManage/add'),
-        // meta: { title: '新增应用', icon: 'form' }
+        meta: { title: '新增应用', icon: 'form' }
       },
       {
+        hidden: true,
         path: 'appManage/edit',
         name: '编辑应用',
         component: () => import('@/views/appManage/edit'),
-        // meta: { title: '编辑应用', icon: 'form' }
+        meta: { title: '编辑应用', icon: 'form' }
       }
     ]
   },
     hidden: true
   },
 
-    
-
   {
     path: 'external-link',
     component: Layout,

src/store/index.js

 import settings from './modules/settings'
 import user from './modules/user'
 
-
 Vue.use(Vuex)
 
 const store = new Vuex.Store({

src/store/modules/user.js

-import { login} from '@/api/user'
-import { getToken, setToken, removeToken,setUserId } from '@/utils/auth'
+import { login } from '@/api/user'
+import { getToken, setToken, removeToken, setUserId } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
 const getDefaultState = () => {
   return {
-    token: getToken(),
+    token: getToken()
   }
 }
 
 const state = getDefaultState()
 
-//定义Mutations
+// 定义Mutations
 const mutations = {
   RESET_STATE: (state) => {
     Object.assign(state, getDefaultState())
   },
   SET_TOKEN: (state, token) => {
     state.token = token
-  },
+  }
 }
-//在actions里面增加一个才可以在页面加 
-//this.$store.dispatch('user/login', this.loginForm)调用api里面的方法
+// 在actions里面增加一个才可以在页面加
+// this.$store.dispatch('user/login', this.loginForm)调用api里面的方法
 const actions = {
   // user login
   login({ commit }, userInfo) {
     })
   },
 
-
   // user logout
   logout({ commit, state }) {
     return new Promise((resolve, reject) => {
-        removeToken() // must remove  token  first
-        resetRouter()
-        commit('RESET_STATE')
-        resolve()
+      removeToken() // must remove  token  first
+      resetRouter()
+      commit('RESET_STATE')
+      resolve()
     })
   },
 

src/utils/request.js

 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+import { Message } from 'element-ui'
 import store from '@/store'
-import { getToken,getUserId } from '@/utils/auth'
- 
+import { getToken, getUserId } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
       // please modify it according to the actual situation
       config.headers['X-Authorization-JWT'] = getToken()
       config.headers['x-userid'] = getUserId()
-
     }
     return config
   },
    * You can also judge the status by HTTP Status Code
    */
   response => {
-
     const res = response.data
     // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 1000) {
         message: res.message || 'Error',
         type: 'error',
         duration: 5 * 1000
-      })      
+      })
       return Promise.reject(new Error(res.message || 'Error'))
     } else {
       return res

src/utils/upload.js

+import { upload } from '@/api/oss'
+
+/**
+ * 获取 OSS 客户端
+ * @returns
+ */
+export function uploadFile({ file, onSuccess, onError }) {
+  upload(file).then((url) => {
+    onSuccess(url, file)
+  }).catch((e) => {
+    onError(e)
+  })
+
+  return {
+    abort: () => {}
+  }
+}

src/views/characterLibManage/add.vue

-<template>
-  <div class="body_edit">
-    <h2 style="text-align: center">特征库新增</h2>
-    <el-row :gutter="20">
-      <el-col :span="15">
-        <el-form
-          ref="form"
-          :model="characterLib"
-          label-width="150px"
-          size="mini"
-        >
-          <el-form-item label="特征库名称：">
-            <el-input v-model="characterLib.name"></el-input>
-          </el-form-item>
-          <el-form-item label="特征库图标：">
-            <UploadImage />
-          </el-form-item>
-          <el-form-item label="特征库描述：">
-            <el-input type="textarea" v-model="characterLib.remark"></el-input>
-          </el-form-item>
-
-          <el-form-item class="editBottomItem">
-            <el-button type="primary" @click="onSubmit">添加</el-button>
-            <el-button @click="onCancel">取消</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col :span="5">
-        特征词列表
-        <TagComponents
-          :value="characterLib.wordList"
-          @handleDelete="handleDelete"
-          @handleAdd="handleAdd"
-        />
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script>
-import { saveCharacterLib } from "@/api/characterLib";
-import UploadImage from "@/components/UploadImage/index.vue";
-import TagComponents from "@/components/TagComponents/index.vue";
-export default {
-  data() {
-    return {
-      characterLib: {
-        name: undefined,
-        icon: undefined,
-        remark: undefined,
-        wordList: [],
-      },
-    };
-  },
-
-  methods: {
-    onCancel() {
-      this.$router.go(-1);
-    },
-    onSubmit() {
-      saveCharacterLib(this.characterLib).then((res) => {
-        this.$message("保存成功");
-        this.$router.go(-1);
-      });
-    },
-    handleDelete(val) {
-      this.characterLib.wordList.map((item) => {
-        if (item.word === val) {
-          this.characterLib.wordList.splice(
-            this.characterLib.wordList.indexOf(item),
-            1
-          );
-        }
-      });
-    },
-    handleAdd(val) {
-      this.characterLib.wordList.push({
-        libId: undefined,
-        word: val,
-        wordId: undefined,
-      });
-    },
-  },
-  components: {
-    UploadImage,
-    TagComponents,
-  },
-};
-</script>
-<style>
-.editBottomItem > div {
-  margin: 0 !important;
-  text-align: center;
-}
-</style>

src/views/characterLibManage/edit.vue

 <template>
-  <div style="padding: 20px">
+  <div style="padding: 20px; font-size: 14px">
     <el-tabs v-model="activeName">
       <el-tab-pane label="特征库" name="characterLib">
         <el-row :gutter="20">
-          <el-col :span="12">
+          <el-col :span="13">
             <el-form
               ref="form"
               :model="characterLib"
               size="mini"
             >
               <el-form-item label="特征库名称：">
-                <el-input v-model="characterLib.name"></el-input>
+                <el-input v-model="characterLib.name" />
               </el-form-item>
               <el-form-item label="特征库图标：">
-                <UploadImage />
+                <UploadImage :icon="characterLib.icon" @handleChange="handleChange" @handleDeleteIcon="handleDeleteIcon" />
               </el-form-item>
               <el-form-item label="特征库描述：">
-                <el-input
-                  type="textarea"
-                  v-model="characterLib.remark"
-                ></el-input>
+                <el-input v-model="characterLib.remark" type="textarea" />
               </el-form-item>
-              <el-form-item class="editBottomItem" >
+              <el-form-item class="editBottomItem">
                 <el-button type="primary" @click="onEdit">修改</el-button>
                 <el-button @click="onCancel">取消</el-button>
               </el-form-item>
             </el-form>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="11">
             特征词列表
             <TagComponents
               :value="characterLib.wordList"
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane label="特征实例" name="characterResult">
+      <el-tab-pane label="特征实例" name="characterResult" :disabled="libId ? false : true">
         <el-row :gutter="20" style="padding-top: 20px">
-          <el-col :span="12">
+          <el-col :span="13">
             <CharacterResult
-              :libId="characterLib.libId"
               ref="CharacterResult"
+              :lib-id="characterLib.libId"
               @handleEdit="handleEdit"
               @handleClose="handleClose"
               @handleAddRusult="resultId = undefined"
             />
           </el-col>
-          <el-col :span="12">
+          <el-col :span="11">
             <CharacterResultEdit
-              :resultId="resultId"
-              :libId="characterLib.libId"
-              :wordList="this.characterLib.wordList"
+              :result-id="resultId"
+              :lib-id="characterLib.libId"
+              :word-list="characterLib.wordList"
               @handleRefresh="handleRefresh"
             />
           </el-col>
   </div>
 </template>
 <script>
-import { UpdateCharacterLib, getCharacterLibDetail } from "@/api/characterLib";
-import { deleteCharacterWord, saveCharacterWord } from "@/api/characterWord";
-import UploadImage from "@/components/UploadImage/index.vue";
-import CharacterResult from "@/components/CharacterResult/index.vue";
-import CharacterResultEdit from "@/components/CharacterResult/edit.vue";
-import TagComponents from "@/components/TagComponents/index.vue";
+import { UpdateCharacterLib, getCharacterLibDetail, saveCharacterLib } from '@/api/characterLib'
+import { deleteCharacterWord, saveCharacterWord } from '@/api/characterWord'
+import UploadImage from '@/components/UploadImage/index.vue'
+import CharacterResult from '@/components/CharacterResult/index.vue'
+import CharacterResultEdit from '@/components/CharacterResult/edit.vue'
+import TagComponents from '@/components/TagComponents/index.vue'
 
 export default {
+  components: {
+    UploadImage,
+    CharacterResult,
+    CharacterResultEdit,
+    TagComponents
+  },
   data() {
     return {
       characterLib: {
         name: undefined,
         icon: undefined,
         remark: undefined,
-        wordList: [],
+        wordList: []
       },
       resultId: undefined,
-      activeName: "characterLib",
-    };
+      libId: undefined,
+      activeName: 'characterLib'
+    }
+  },
+  watch: {
+    '$route.query.id'() {
+      if (this.$route?.query.id) {
+        this.libId = this.$route.query.id
+        getCharacterLibDetail(this.$route.query.id).then((res) => {
+          this.characterLib = res.data
+        })
+      }
+    }
+  },
+  // 进入页面执行的方法
+  mounted: function() {
+    if (this.$route?.query.id) {
+      this.libId = this.$route.query.id
+      getCharacterLibDetail(this.$route.query.id).then((res) => {
+        this.characterLib = res.data
+      })
+    }
   },
 
   methods: {
-    //上方实例库的方法
+    // 上方实例库的方法
     onCancel() {
-      this.$router.go(-1);
+      this.$router.go(-1)
     },
     onEdit() {
-      UpdateCharacterLib(this.characterLib, this.characterLib.libId).then(
-        (res) => {
-          this.$message("修改成功");
-        }
-      );
+      if (this.libId) {
+        UpdateCharacterLib(this.characterLib, this.characterLib.libId).then(
+          (res) => {
+            this.$message('修改成功')
+          }
+        )
+      } else {
+        saveCharacterLib(this.characterLib, this.characterLib.libId).then(
+          (res) => {
+            this.$message('添加成功')
+            this.$router.replace({
+              name: 'characterLibEdit',
+              query: { id: res.data.libId }
+            })
+          }
+        )
+      }
     },
-
-    //特征词列表的方法
+    // 添加图片
+    handleChange(val) {
+      this.characterLib.icon = val
+    },
+    // 删除图片
+    handleDeleteIcon() {
+      this.characterLib.icon = ''
+    },
+    // 特征词列表的方法
     handleDelete(val) {
       if (this.characterLib.libId) {
-        let nowWordId = undefined;
+        let nowWordId
         this.characterLib.wordList.map((item) => {
           if (item.word === val) {
-            nowWordId = item.wordId;
+            nowWordId = item.wordId
           }
-        });
+        })
         // 调用删除接口
         deleteCharacterWord(nowWordId).then(() => {
           this.characterLib.wordList.map((item) => {
               this.characterLib.wordList.splice(
                 this.characterLib.wordList.indexOf(item),
                 1
-              );
+              )
             }
-          });
-        });
+          })
+        })
       } else {
         // 直接删除当前项
         this.characterLib.wordList.map((item) => {
             this.characterLib.wordList.splice(
               this.characterLib.wordList.indexOf(item),
               1
-            );
+            )
           }
-        });
+        })
       }
     },
     handleAdd(val) {
         saveCharacterWord({
           libId: this.characterLib.libId,
           word: val,
-          wordId: undefined,
+          wordId: undefined
         }).then((res) => {
-          this.characterLib.wordList.push(res.data);
-        });
+          this.characterLib.wordList.push(res.data)
+        })
       } else {
         this.characterLib.wordList.push({
           libId: this.characterLib.libId,
           word: val,
-          wordId: undefined,
-        });
+          wordId: undefined
+        })
       }
     },
 
-    //实例列表的方法
-    //添加实例
+    // 实例列表的方法
+    // 添加实例
     handleAddRusult() {
-      this.resultId = undefined;
+      this.resultId = undefined
     },
     handleEdit(val) {
-      this.resultId = val;
+      this.resultId = val
     },
 
-    //实例编辑页面调用实例列表的刷新方法 兄弟组件调用方法
+    // 实例编辑页面调用实例列表的刷新方法 兄弟组件调用方法
     handleRefresh() {
-      this.$refs.CharacterResult.onSearch();
+      this.$refs.CharacterResult.onSearch()
     },
     handleClose() {
-      this.resultId = undefined;
-    },
-  },
-  //进入页面执行的方法
-  mounted: function () {
-    if (this.$route?.query.id) {
-      getCharacterLibDetail(this.$route.query.id).then((res) => {
-        this.characterLib = res.data;
-      });
+      this.resultId = undefined
     }
-  },
-  components: {
-    UploadImage,
-    CharacterResult,
-    CharacterResultEdit,
-    TagComponents,
-  },
-};
+  }
+}
 </script>
 <style>
-.editBottomItem>div{
+.editBottomItem > div {
   margin: 0 !important;
   text-align: center;
 }
-</style>
+</style>

src/views/characterLibManage/index.vue

 <template>
-  <div class="body">
+  <div class="body" style="font-size:14px">
     <el-card class="box-card">
       特征库名称：<el-input
         v-model="name"
-        size="medium"
+        size="mini"
         style="width: 200px; margin-right: 20px"
       />
       创建时间：
       <el-date-picker
         v-model="daterange"
+        size="mini"
         type="daterange"
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         value-format="yyyy-MM-dd"
-        @change="dateChange"
         style="margin-right: 20px"
-      >
-      </el-date-picker>
+        @change="dateChange"
+      />
 
-      <el-button type="primary" @click="onSearch">查询</el-button>
-      <el-button @click="onReset">重置</el-button>
-      <el-button type="primary" @click="handleAdd">添加特征库</el-button>
+      <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
+      <el-button size="mini" @click="onReset">重置</el-button>
+      <el-button type="primary" size="mini" @click="handleAdd">添加特征库</el-button>
     </el-card>
     <el-table stripe :data="tableData" border style="width: 100%">
       <el-table-column prop="name" label="特征库名称" />
             title="这个特征库确定删除吗？"
             @onConfirm="handleDelete(scope.row)"
           >
-            <el-button type="text" slot="reference">删除</el-button>
+            <el-button slot="reference" type="text">删除</el-button>
           </el-popconfirm>
         </template>
       </el-table-column>
   </div>
 </template>
 <script>
-import { getCharacterLibList, deleteCharacterLib } from "@/api/characterLib";
+import { getCharacterLibList, deleteCharacterLib } from '@/api/characterLib'
 
 export default {
   data() {
     return {
       name: undefined,
-      daterange: "",
+      daterange: '',
       tableData: [],
       endDate: undefined,
-      startDate: undefined,
-    };
+      startDate: undefined
+    }
+  },
+  mounted() {
+    this.onSearch()
   },
   methods: {
     handleAdd() {
-      this.$router.push({ path: "characterLibManage/add" });
+      this.$router.push({ name: 'characterLibEdit' })
     },
     handleEdit(row) {
       this.$router.push({
-        path: "characterLibManage/edit",
-        query: { id: row.libId },
-      });
+        name: 'characterLibEdit',
+        query: { id: row.libId }
+      })
     },
     handleDelete(row) {
       deleteCharacterLib(row.libId).then(() => {
-        this.onSearch();
-      });
+        this.onSearch()
+      })
     },
     onSearch() {
       getCharacterLibList({
         name: this.name,
         startDate: this.startDate,
-        endDate: this.endDate,
+        endDate: this.endDate
       }).then((res) => {
-        this.tableData = res.data.records;
-      });
+        this.tableData = res.data.records
+      })
     },
     onReset() {
-      this.name = "";
-      this.daterange = "";
-      this.startDate = "";
-      this.endDate = "";
-      this.onSearch();
+      this.name = ''
+      this.daterange = ''
+      this.startDate = ''
+      this.endDate = ''
+      this.onSearch()
     },
     dateChange(val) {
-      this.startDate = this.daterange[0];
-      this.endDate = this.daterange[1];
-    },
-  },
-  mounted() {
-    this.onSearch();
-  },
-};
+      this.startDate = this.daterange[0]
+      this.endDate = this.daterange[1]
+    }
+  }
+}
 </script>
 <style>
-</style>
+</style>

src/views/gameManage/edit.vue

+<template>
+  <div class="body_edit">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="游戏详情" name="game">
+        <h2 style="text-align: center">游戏{{ gameId ? "编辑" : "新增" }}</h2>
+        <el-form ref="form" :model="gameForm" label-width="150px" size="mini">
+          <el-form-item label="游戏名称：">
+            <el-input v-model="gameForm.title" />
+          </el-form-item>
+          <el-form-item label="游戏图标：">
+            <UploadImage :icon="gameForm.gameImage" @handleChange="handleChange" @handleDeleteIcon="handleDeleteIcon" />
+          </el-form-item>
+          <el-form-item label="特征库名称：">
+            <el-select
+              v-model="gameForm.libId"
+              filterable
+              default-first-option
+              placeholder="请选择"
+              style="width: 200px; margin-right: 20px"
+              :disabled="gameId ? true : false"
+            >
+              <el-option
+                v-for="item in libList"
+                :key="item.libId"
+                :label="item.name"
+                :value="item.libId"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item class="editBottomItem">
+            <el-button type="primary" @click="onSubmit">保存</el-button>
+            <el-button @click="onCancel">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane
+        label="游戏题库"
+        name="question"
+        :disabled="gameId ? false : true"
+      >
+        问题列表
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import { saveGame, UpdateGame, getGameDetail } from '@/api/game'
+import { getCharacterLibList } from '@/api/characterLib'
+import UploadImage from '@/components/UploadImage/index.vue'
+export default {
+  components: {
+    UploadImage
+  },
+  data() {
+    return {
+      gameForm: {
+        title: undefined,
+        gameImage: undefined,
+        libId: undefined
+      },
+      libList: [],
+      gameId: undefined,
+      activeName: 'game'
+    }
+  },
+  watch: {
+    '$route.query.id'(val) {
+      this.gameId = val
+      getGameDetail(val).then((res) => {
+        this.gameForm = res.data
+      })
+    }
+  },
+  mounted() {
+    if (this.$route?.query.id) {
+      this.gameId = this.$route.query.id
+      getGameDetail(this.$route.query.id).then((res) => {
+        this.gameForm = res.data
+      })
+    }
+    getCharacterLibList().then((res) => {
+      const list = res.data.records
+      list.map((item) => {
+        this.libList.push({ libId: item.libId, name: item.name })
+      })
+    })
+  },
+  methods: {
+    onCancel() {
+      this.$router.go(-1)
+    },
+    onSubmit() {
+      if (this.gameId) {
+        if (!this.gameForm.gameImage) {
+          this.gameForm.gameImage = ''
+        }
+        UpdateGame(this.gameForm, this.gameId).then((res) => {
+          this.$message('修改成功')
+          this.$router.go(-1)
+        })
+      } else {
+        saveGame(this.gameForm).then((res) => {
+          this.$message('保存成功')
+          this.$router.replace({
+            name: 'gameEdit',
+            query: { id: res.data.gameId }
+          })
+        })
+      }
+    },
+    handleChange(val) {
+      this.gameForm.gameImage = val
+    },
+    handleDeleteIcon() {
+      this.gameForm.gameImage = ''
+    }
+  }
+}
+</script>
+<style>
+.editBottomItem > div {
+  margin: 0 !important;
+  text-align: center;
+}
+</style>

src/views/gameManage/index.vue

 <template>
-<div>游戏列表</div>
+  <div class="body" style="font-size:14px">
+    <el-card class="box-card">
+      游戏名称：<el-input
+        v-model="title"
+        size="mini"
+        style="width: 200px; margin-right: 20px"
+      />
+      特征库名称：
+      <el-select
+        v-model="libId"
+        size="mini"
+        filterable
+        default-first-option
+        placeholder="请选择"
+        style="width: 200px; margin-right: 20px"
+      >
+        <el-option
+          v-for="item in libList"
+          :key="item.libId"
+          :label="item.name"
+          :value="item.libId"
+        />
+      </el-select>
+      创建时间：
+      <el-date-picker
+        v-model="daterange"
+        size="mini"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        style="margin-right: 20px"
+        @change="dateChange"
+      />
+      <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
+      <el-button size="mini" @click="onReset">重置</el-button>
+      <el-button type="primary" size="mini" @click="handleAdd">添加游戏</el-button>
+    </el-card>
+    <el-table stripe :data="tableData" border style="width: 100%">
+      <el-table-column prop="title" label="游戏名称" />
+      <el-table-column prop="gameImage" label="游戏图标">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.gameImage" style="width: 100px; height: 100px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="libName" label="特征库名称" />
+      <el-table-column prop="createDate" label="创建时间">
+        <template slot-scope="scope">{{
+          scope.row.createDate.substr(0, 10)
+        }}</template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-popconfirm
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定删除这个游戏吗？"
+            @onConfirm="handleDelete(scope.row)"
+          >
+            <el-button slot="reference" type="text">删除</el-button>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 <script>
+import { getCharacterLibList } from '@/api/characterLib'
+import { getGameList, deleteGame } from '@/api/game'
+
+export default {
+  data() {
+    return {
+      libId: undefined,
+      title: undefined,
+      daterange: undefined,
+      tableData: [],
+      endDate: undefined,
+      startDate: undefined,
+      libList: []
+    }
+  },
+  mounted() {
+    this.onSearch()
+    getCharacterLibList().then((res) => {
+      const list = res.data.records
+      list.map((item) => {
+        this.libList.push({ libId: item.libId, name: item.name })
+      })
+    })
+  },
+  methods: {
+    handleAdd() {
+      this.$router.push({ name: 'gameEdit' })
+    },
+    handleEdit(row) {
+      this.$router.push({
+        name: 'gameEdit',
+        query: { id: row.gameId }
+      })
+    },
+    handleDelete(row) {
+      deleteGame(row.gameId).then(() => {
+        this.onSearch()
+      })
+    },
+    onSearch() {
+      getGameList({
+        title: this.title,
+        libId: this.libId,
+        startDate: this.startDate,
+        endDate: this.endDate
+      }).then((res) => {
+        this.tableData = res.data.records
+      })
+    },
+    onReset() {
+      this.title = undefined
+      this.libId = undefined
+      this.daterange = undefined
+      this.startDate = undefined
+      this.endDate = undefined
+      this.onSearch()
+    },
+    dateChange(val) {
+      this.startDate = this.daterange[0]
+      this.endDate = this.daterange[1]
+    }
+  }
+}
 </script>
 <style>
-</style>
+</style>

src/views/questionList/edit.vue

     <h2 style="text-align: center">题目编辑</h2>
     <el-form ref="form" :model="form" label-width="150px" size="mini">
       <el-form-item label="题目：">
-        <el-input type="textarea" v-model="form.title"></el-input>
+        <el-input v-model="form.title" type="textarea" />
       </el-form-item>
       <el-form-item label="题目类型：">
         <el-select v-model="form.optType" placeholder="请选择">
-          <el-option label="单选题" value="1"></el-option>
-          <el-option label="多选题" value="2"></el-option>
-          <el-option label="判断题" value="3"></el-option>
+          <el-option label="单选题" value="1" />
+          <el-option label="多选题" value="2" />
+          <el-option label="判断题" value="3" />
         </el-select>
       </el-form-item>
       <el-form-item label="答案：">
             :key="item.option"
             :label="item.option"
             :value="item.option"
-          >
-          </el-option>
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
   </div>
 </template>
 <script>
-import AddAnswer from "@/components/AddAnswer/index.vue";
-import { saveQuestion } from "@/api/question";
+import AddAnswer from '@/components/AddAnswer/index.vue'
+import { saveQuestion } from '@/api/question'
 export default {
+  components: {
+    AddAnswer
+  },
   data() {
     return {
       form: {
-        title: "",
-        optType: "",
+        title: undefined,
+        optType: undefined,
         answerList: [],
-        option: "",
+        option: undefined
       },
-      rightList: undefined,
-    };
+      rightList: undefined
+    }
+  },
+  // 进入页面执行的方法
+  mounted: function() {
+    if (this.$route?.query.row) {
+      this.form.title = this.$route.query.row.title
+      this.form.optType = this.$route.query.row.optType
+    }
   },
 
   methods: {
-    //添加答案按钮事件
+    // 添加答案按钮事件
     onAddAnswer() {
       this.form.answerList.push({
-        answerId: "",
-        questionId: "",
-        contentType: "",
-        content: "",
-      });
+        answerId: undefined,
+        questionId: undefined,
+        contentType: undefined,
+        content: undefined
+      })
     },
     onCancel() {
-      this.$router.go(-1);
+      this.$router.go(-1)
     },
     onSubmit() {
-      this.form.option = this.rightList.toString();
+      this.form.option = this.rightList.toString()
       saveQuestion(this.form).then((res) => {
-        console.log(res);
-      });
+        console.log(res)
+      })
     },
     handleChange(answer) {
-      const index = this.form.answerList.indexOf(answer);
-      this.$set(this.form.answerList, index, answer);
+      const index = this.form.answerList.indexOf(answer)
+      this.$set(this.form.answerList, index, answer)
     },
     handleDelete(answer) {
-      this.form.answerList.splice(this.form.answerList.indexOf(answer), 1);
-    },
-  },
-  //进入页面执行的方法
-  mounted: function () {
-    if (this.$route?.query.row) {
-      this.form.title = this.$route.query.row.title;
-      this.form.optType = this.$route.query.row.optType;
+      this.form.answerList.splice(this.form.answerList.indexOf(answer), 1)
     }
-  },
-  components: {
-    AddAnswer,
-  },
-};
+  }
+}
 </script>
 <style>
 .body_edit {
   padding: 20px;
   width: 1000px;
 }
-</style>
+</style>