应用配置

src/api/AppControllerApi.js

+
+
+
+import request from '@/utils/request'
+
+/**
+* 应用管理列表
+* @param {*} data
+* @returns
+*/
+export const getAppControllerList = (params) => request({
+  url: '/admin/app', params
+
+})
+
+
+/**
+* 保存应用管理
+* @param {*} data
+* @returns
+*/
+export const saveAppController = (data) => request({
+  url: '/admin/app',
+  method: 'post',
+  data
+})
+
+/**
+* 应用管理详情
+* @param {*} 
+* @returns
+*/
+export const detailsAppController = (id) => request({
+  url: `admin/app/${id}`,
+
+  method: 'get',
+})
+
+/**
+* 修改应用管理
+* @param {*} 
+* @returns
+*/
+export const ChangeAppController = (data, id) => request({
+  url: `admin/app/${id}`,
+
+  method: 'put',
+  data
+})
+
+/**
+* 删除应用管理
+* @param {*} 
+* @returns
+*/
+export const DeleteAppController = (id) => request({
+  url: `admin/app/${id}`,
+  method: 'delete',
+})
+
+

src/api/WeChatApi.js

 * @param {*} data
 * @returns
 */
-export const getConfigList = (data) => request({
-  url: '/admin/wx/config',
-  method: 'get',
-  data
+export const getConfigList = (params) => request({
+  url: '/admin/wx/config', params
+
 })
 
+
+
 /**
 * 保存配置
 * @param {*} data

src/icons/svg/appconfig.svg

+<svg t="1640835131030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9379" width="128" height="128"><path d="M1023.401462 126.021423v227.811239a125.680133 125.680133 0 0 1-125.59481 125.59481h-227.811239a125.680133 125.680133 0 0 1-125.59481-125.637471V126.021423A125.680133 125.680133 0 0 1 669.995413 0.426613h227.811239a125.680133 125.680133 0 0 1 125.59481 125.59481z m-543.931328 539.665201v227.811239a125.680133 125.680133 0 0 1-125.594811 125.552149h-227.811239a125.680133 125.680133 0 0 1-125.552149-125.594811v-227.811239a125.680133 125.680133 0 0 1 125.594811-125.552149h227.768577a125.680133 125.680133 0 0 1 125.594811 125.594811z m0-539.665201v227.811239a125.680133 125.680133 0 0 1-125.594811 125.59481h-227.811239A125.680133 125.680133 0 0 1 0.554597 353.790001V126.021423A126.021423 126.021423 0 0 1 126.106746 0.426613h227.768577a125.680133 125.680133 0 0 1 125.594811 125.59481z m225.336884 822.210863a29.222977 29.222977 0 0 0-34.171686 5.204676l-22.439833 23.122414c0 0.68258-1.066532 0.68258-1.706452 0.682581-1.066532 0-1.407822-0.34129-1.749112-0.682581l-42.490636-42.447974c-0.68258 0-0.68258-1.066532-0.68258-1.749113 0-1.023871 0.34129-1.365161 0.68258-1.706451l22.781124-22.823785a31.057412 31.057412 0 0 0 5.204676-34.171686l-2.772983-5.887257a189.842699 189.842699 0 0 1-8.276288-20.00814l-2.090403-6.228547a29.436284 29.436284 0 0 0-27.9858-20.050802h-2.389032a31.825315 31.825315 0 0 1-32.123944-32.081283c0-17.917738 14.163545-32.123944 32.123944-32.123945h2.389032a29.862896 29.862896 0 0 0 27.9858-20.050802l2.090403-6.185885c3.071612-6.911127 5.545966-14.163545 8.276288-20.050802l2.772983-5.844596a29.222977 29.222977 0 0 0-5.204676-34.171685l-22.781124-22.781124c-0.68258 0-0.68258-1.066532-0.68258-1.706452 0-1.066532 0.34129-1.407822 0.68258-1.749112l41.808055-42.490636c0-0.68258 1.023871-0.68258 1.706452-0.68258 1.023871 0 1.365161 0.34129 1.706451 0.68258l22.823785 22.781124c8.958869 7.934998 22.781124 10.366691 34.129025 5.204676l5.887256-2.772983a189.842699 189.842699 0 0 1 20.050802-8.276288l6.228547-2.090403a29.436284 29.436284 0 0 0 20.050802-27.9858v-2.389032c0-17.960399 14.120884-32.123944 32.081283-32.123944 17.917738 0 32.123944 14.163545 32.123945 32.123944v2.047742a29.862896 29.862896 0 0 0 20.34943 27.9858l6.228547 2.090403c6.911127 3.071612 13.822255 5.503305 20.050802 8.276288l5.844596 2.772983c11.390562 6.185886 25.554107 3.412902 34.171686-5.204676l22.781124-22.781124c0-0.68258 1.066532-0.68258 1.706451-0.68258 1.066532 0 1.407822 0.34129 1.749112 0.68258l42.490636 42.447974c0.68258 0 0.68258 1.066532 0.68258 1.749113 0 1.023871-0.34129 1.365161-0.68258 1.706451l-22.781124 22.823785a32.379912 32.379912 0 0 0-5.204676 34.171686l2.772983 5.887257c3.114273 6.527176 6.228547 13.779594 8.276288 20.00814l2.090403 6.228547a29.436284 29.436284 0 0 0 27.9858 20.050802h2.389032c17.960399 0 32.123944 14.120884 32.123944 32.081283 0 17.917738-14.163545 32.123944-32.123944 32.123945h-2.389032a29.862896 29.862896 0 0 0-27.9858 20.050802l-2.090403 6.185885c-3.071612 6.911127-5.545966 13.822255-8.276288 20.050802l-2.772983 5.844596a29.222977 29.222977 0 0 0 5.204676 34.171686l22.781124 22.781124c0.68258 0 0.68258 0.725242 0.68258 1.706451 0 1.066532-0.34129 1.407822-0.68258 1.749112l-42.490636 42.490636c0 0.34129-1.023871 0.68258-1.706451 0.68258-1.023871 0-1.365161-0.34129-1.706451-0.68258l-22.823785-22.781124a32.379912 32.379912 0 0 0-34.171686-5.204676l-5.887257 2.772983a189.842699 189.842699 0 0 1-20.050802 8.276288l-6.185886 2.090403a29.436284 29.436284 0 0 0-20.050801 27.9858v2.389032c0 17.960399-14.120884 32.123944-32.081284 32.123944a31.825315 31.825315 0 0 1-32.123944-32.123944v-2.389032a29.862896 29.862896 0 0 0-20.050802-27.9858l-6.185886-2.090403c-6.911127-3.071612-13.822255-5.545966-20.050801-8.276288l-5.844596-2.772983zM789.233693 718.415967c-34.768944 0-63.991921 28.839026-63.991921 63.991921s28.839026 63.991921 63.991921 63.991921 63.991921-28.839026 63.991921-63.991921c-0.810564-35.152895-28.455074-63.991921-63.991921-63.991921z" p-id="9380"></path></svg>

src/icons/svg/wx.svg

+<svg t="1640834968791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5597" width="64" height="64"><path d="M693.12 347.264c11.776 0 23.36 0.896 35.008 2.176-31.36-146.048-187.456-254.528-365.696-254.528C163.2 94.912 0 230.656 0 403.136c0 99.52 54.272 181.248 145.024 244.736L108.8 756.864l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.392 0 22.656-0.512 33.792-1.344-7.04-24.256-11.2-49.6-11.2-76.032C385.088 475.776 521.024 347.264 693.12 347.264zM498.304 249.024c27.392 0 45.376 17.984 45.376 45.248 0 27.136-17.984 45.312-45.376 45.312-27.072 0-54.336-18.176-54.336-45.312C443.968 266.944 471.168 249.024 498.304 249.024zM244.672 339.584c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248S289.92 266.944 289.92 294.272C289.92 321.408 271.872 339.584 244.672 339.584zM1024 629.76c0-144.896-145.024-262.976-307.904-262.976-172.48 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.976 308.224 262.976 36.096 0 72.512-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.728 783.872 1024 711.488 1024 629.76zM616.128 584.384c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.24-36.224 36.224-36.224 27.52 0 45.376 18.176 45.376 36.224C661.504 566.464 643.648 584.384 616.128 584.384zM815.488 584.384c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.224 36.032-36.224 27.264 0 45.376 18.176 45.376 36.224C860.864 566.464 842.752 584.384 815.488 584.384z" p-id="5598"></path></svg>

src/router/index.js

         path: 'WeChatConfig',
         name: 'WeChatConfig',
         component: () => import('@/views/WeChatConfig/index'),
-        meta: { title: '微信配置', icon: 'app' }
+        meta: { title: '微信配置', icon: 'wx' }
       },
       {
         hidden: true,
     ]
   },
 
+  // 应用管理
+
+  {
+    path: '/AppController',
+    component: Layout,
+    meta: { title: '应用管理', icon: 'form' },
+    children: [
+      {
+        path: 'AppController',
+        name: '',
+        component: () => import('@/views/AppController/index'),
+        meta: { title: '应用管理', icon: 'appconfig' }
+      }
+    ]
+  },
+
   {
     path: '/login',
     component: () => import('@/views/login/index'),
 const router = createRouter()
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter() {
+export function resetRouter () {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }

src/store/modules/settings.js

 }
 
 const actions = {
-  changeSetting({ commit }, data) {
+  changeSetting ({ commit }, data) {
     commit('CHANGE_SETTING', data)
   }
 }

src/store/modules/user.js

 // this.$store.dispatch('user/login', this.loginForm)调用api里面的方法
 const actions = {
   // user login
-  login({ commit }, userInfo) {
+  login ({ commit }, userInfo) {
     const { userName, password } = userInfo
     return new Promise((resolve, reject) => {
       login({ userName: userName.trim(), password: password }).then(response => {
   },
 
   // user logout
-  logout({ commit, state }) {
+  logout ({ commit, state }) {
     return new Promise((resolve, reject) => {
       removeToken() // must remove  token  first
       resetRouter()
   },
 
   // remove token
-  resetToken({ commit }) {
+  resetToken ({ commit }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
       commit('RESET_STATE')

src/views/AppController/index.vue

+<template>
+  <div class="body">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button type="primary" style="float: right" @click="dialogFormVisible = true">新建应用</el-button>
+      </div>
+      <div class="text item">
+        <el-table stripe :data="tableData" border style="width: 100%">
+          <el-table-column prop="appName" label="应用名称" min-width="100" />
+
+          <el-table-column align="center" label="操作" min-width="100" width="500">
+            <template slot-scope="scope">
+              <el-button
+                style="margin-right:5em"
+                type="primary"
+                @click="handeldialog(scope.row.appId)"
+              >编辑</el-button>
+              <el-popconfirm
+                icon="el-icon-info"
+                icon-color="red"
+                title="确定要删除该配置吗？"
+                @onConfirm="handleDelete(scope.row.appId)"
+              >
+                <el-button slot="reference" type="danger">删除</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          v-show="WxTotal!==0"
+          style="float:right; margin:20px 0"
+          :total="WxTotal"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :page-sizes="[pageSize, 20, 35,40,50,80,100]"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+    <el-dialog
+      :title="!APP_ID?'新建应用':'修改应用'"
+      :visible.sync="dialogFormVisible"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="10vw"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="应用名称" prop="appName" style="width:30vw">
+          <el-input v-model="ruleForm.appName" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm('ruleForm')">{{ !APP_ID?'新建应用':'修改应用' }}</el-button>
+
+        <el-button @click="closeDialog('ruleForm')">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getAppControllerList,
+  DeleteAppController,
+  saveAppController,
+  detailsAppController,
+  ChangeAppController
+} from '@/api/AppControllerApi'
+
+export default {
+  data() {
+    return {
+      APP_ID: '',
+      ruleForm: {
+        appName: '',
+        secret: ''
+      },
+      rules: {
+        appName: [
+          { required: true, message: '请输入应用名称', trigger: 'blur' }
+        ]
+      },
+      appName: undefined,
+      dialogFormVisible: false,
+      tableData: [],
+      //
+      pageSize: 10,
+      currentPage: 1,
+      WxTotal: 0 // 条目总数
+    }
+  },
+  // -----------模态框事件------------
+  watch: {
+    APP_ID: function (newAppID, oldVal) {
+      detailsAppController(newAppID).then((res) => {
+        this.ruleForm = res.data
+      })
+    }
+  },
+  mounted() {
+    this.onSearch()
+    if (this.APP_ID) {
+      detailsAppController(this.APP_ID).then((res) => {
+        this.ruleForm = res.data
+      })
+    }
+  },
+  methods: {
+    // 取消
+    closeDialog(formName) {
+      this.APP_ID = ''
+      this.$refs[formName].resetFields()
+
+      this.dialogFormVisible = false
+    },
+    // 确定
+    handeldialog(e) {
+      this.APP_ID = e
+      this.dialogFormVisible = true
+    },
+
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.APP_ID == '') {
+            saveAppController(this.ruleForm)
+              .then((e) => {
+                this.$message.success('配置保存成功')
+                this.dialogFormVisible = false
+                this.$refs[formName].resetFields()
+                this.onSearch()
+
+                console.log('保存字段', e)
+              })
+              .catch((e) => {
+                this.$message.error('保存失败', e)
+              })
+          } else {
+            ChangeAppController(this.ruleForm, this.APP_ID).then((res) => {
+              this.$message.success('配置修改成功')
+              this.dialogFormVisible = false
+              this.onSearch()
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+
+    // -----------模态框事件结束------------
+
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.changePagination()
+    },
+    // 改变页码
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changePagination()
+    },
+    // 改变分页组件重新查询数据
+    changePagination() {
+      getAppControllerList({
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+      })
+    },
+
+    handleAdd() {
+      // this.$router.push({ path: 'AppController/Edit' });
+      this.dialogFormVisible = true
+    },
+
+    handleDelete(APP_DELETE) {
+      DeleteAppController(APP_DELETE).then(() => {
+        this.onSearch()
+      })
+    },
+    onSearch() {
+      getAppControllerList({
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        console.log('🚀 ~ file: index.vue ~ line 118 ~ onSearch ~ res', res)
+        this.tableData = res.data.records
+        this.WxTotal = res.data.total
+      })
+    },
+    onReset() {
+      this.appName = ''
+
+      this.onSearch()
+    }
+  }
+}
+</script>
+<style>
+</style>

src/views/WeChatConfig/Edit.vue

           </el-form-item>
           <el-form-item label="发布状态" prop="status">
             <el-select v-model="ruleForm.status" placeholder="请选择状态">
-              <el-option label="发布" value="1" />
-              <el-option label="未发布" value="0" />
+              <el-option label="发布" :value="1" />
+              <el-option label="未发布" :value="0" />
             </el-select>
           </el-form-item>
 
 </template>
 
 <script>
-import { saveConfig, detailsConfig, ChangeConfig } from '@/api/WeChatApi';
+import { saveConfig, detailsConfig, ChangeConfig } from '@/api/WeChatApi'
 
 export default {
   data() {
 
         status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
       }
-    };
+    }
   },
   watch: {
-    '$route.query.id'(val) {
-      this.configId = val;
-      detailsConfig(val)
-        .then((res) => {
-          this.ruleForm = res.data;
-        })
-        .catch((e) => {
-          this.$message.error('ID有误。');
-          this.$router.go(-1);
-        });
+    '$route.query.configId': {
+      handleChange(val) {
+        if (val) {
+          this.configId = val
+          detailsConfig(val)
+            .then((res) => {
+              this.ruleForm = res.data
+            })
+            .catch((e) => {
+              this.$message.error('ID有误。')
+              this.$router.go(-1)
+            })
+        }
+      },
+      immediate: true
     }
   },
   mounted() {
-    if (this.$route?.query.id) {
-      this.configId = this.$route.query.id;
-      detailsConfig(this.$route.query.id)
+    if (this.$route?.query.configId) {
+      this.configId = this.$route.query.configId
+      detailsConfig(this.configId)
         .then((res) => {
-          this.ruleForm = res.data;
+          this.ruleForm = res.data
         })
         .catch((e) => {
-          this.$message.error('ID有误。');
-          this.$router.go(-1);
-        });
+          this.$message.error('ID有误。')
+          this.$router.go(-1)
+        })
     }
   },
   methods: {
           if (this.configId == '') {
             saveConfig(this.ruleForm)
               .then((e) => {
-                this.$message.success('配置保存成功');
-                this.$router.go(-1);
-                console.log('保存字段', e);
+                this.$message.success('配置保存成功')
+                this.$router.go(-1)
+                console.log('保存字段', e)
               })
               .catch((e) => {
-                this.$message.error('保存失败', e);
-              });
+                this.$message.error('保存失败', e)
+              })
           } else {
             ChangeConfig(this.ruleForm, this.configId).then((res) => {
-              this.$message.success('配置修改成功');
-              this.$router.go(-1);
-            });
+              this.$message.success('配置修改成功')
+              this.$router.go(-1)
+            })
           }
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     resetForm(formName) {
-      this.$refs[formName].resetFields();
+      this.$refs[formName].resetFields()
     }
   }
-};
+}
 </script>
 
 <style scoped >

src/views/WeChatConfig/index.vue

 <template>
   <div class="body">
-    <el-card class="box-card">
-      配置名称：
-      <el-input v-model="appName" size="medium" style="width: 200px; margin-right: 20px" />
-
-      <el-button type="primary" @click="onSearch">查询</el-button>
-      <el-button @click="onReset">重置</el-button>
-    </el-card>
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <el-button type="primary" style="float: right" @click="handleAdd">新建配置</el-button>
 
           <el-table-column prop="picture" label="二维码" align="center">
             <template slot-scope="scope">
-              <img :src="scope.row.qrCode" min-width="70" height="70" />
+              <!-- :src="scope.row.qrCode" -->
+
+              <img
+                src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
+                min-width="70"
+                height="100"
+              />
             </template>
           </el-table-column>
 
-          <el-table-column prop="createDate" label="状态">
+          <el-table-column prop="createDate" label="状态" align="center" width="200">
             <template slot-scope="scope">
-              {{
-              scope.row.status==1?'发布':'未发布'
-              }}
+              <el-tag
+                :type="scope.row.status==1?'success':'danger'"
+                size="small "
+                effect="dark"
+              >{{ scope.row.status==1?'发布':'未发布' }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column fixed="right" label="操作">
+          <el-table-column align="center" label="操作" min-width="100" width="280">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button style="margin-right:1em" type="primary">
+                <router-link
+                  :to="{path:'WeChatConfig/Edit',query: { configId: scope.row.configId }}"
+                >编辑</router-link>
+              </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-button slot="reference" type="danger">删除</el-button>
               </el-popconfirm>
             </template>
           </el-table-column>
         </el-table>
+        <el-pagination
+          v-show="WxTotal!==0"
+          style="float:right; margin:20px 0"
+          :total="WxTotal"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :page-sizes="[pageSize, 20, 35,40,50,80,100]"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
       </div>
     </el-card>
   </div>
 </template>
 <script>
-import { getConfigList, DeleteConfig } from '@/api/WeChatApi';
+import { getConfigList, DeleteConfig } from '@/api/WeChatApi'
 
 export default {
   data() {
       daterange: '',
       tableData: [],
       endDate: undefined,
-      startDate: undefined
-    };
+      startDate: undefined,
+      //
+      pageSize: 10,
+      currentPage: 1,
+      WxTotal: 0 // 条目总数
+    }
   },
   mounted() {
-    this.onSearch();
+    this.onSearch()
   },
   methods: {
-    handleAdd() {
-      this.$router.push({ path: 'WeChatConfig/Edit' });
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.changePagination()
     },
-    handleEdit(row) {
-      this.$router.push({
-        path: 'WeChatConfig/Edit',
-        query: { id: row.configId }
-      });
+    // 改变页码
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.changePagination()
     },
+    // 改变分页组件重新查询数据
+    changePagination() {
+      getConfigList({
+        // title: this.title,
+        // startDate: this.startDate,
+        // endDate: this.endDate,
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+      })
+    },
+
+    handleAdd() {
+      this.$router.push({ path: 'WeChatConfig/Edit' })
+    },
+
     handleDelete(row) {
       DeleteConfig(row.configId).then(() => {
-        this.onSearch();
-      });
+        this.onSearch()
+      })
     },
     onSearch() {
-      getConfigList({ appName: this.appName }).then((res) => {
-        console.log('🚀 ~ file: index.vue ~ line 98 ~ onSearch ~ res', res);
-        this.tableData = res.data.records;
-      });
+      getConfigList({
+        pageNum: this.currentPage,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.records
+        this.WxTotal = res.data.total
+      })
     },
     onReset() {
-      this.appName = '';
+      this.appName = ''
 
-      this.onSearch();
-    },
-    dateChange(val) {
-      this.startDate = this.daterange[0];
-      this.endDate = this.daterange[1];
+      this.onSearch()
     }
   }
-};
+}
 </script>
 <style>
 </style>

src/views/gameManage/index.vue

 <template>
   <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-input v-model="title" size="mini" style="width: 200px; margin-right: 20px" />创建时间：
       <el-date-picker
         v-model="daterange"
         size="mini"
         </template>
       </el-table-column>
       <el-table-column prop="createDate" label="创建时间">
-        <template slot-scope="scope">{{
+        <template slot-scope="scope">
+          {{
           scope.row.createDate.substr(0, 10)
-        }}</template>
+          }}
+        </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作">
         <template slot-scope="scope">
   </div>
 </template>
 <script>
-import { getGameList, deleteGame } from '@/api/game'
+import { getGameList, deleteGame } from '@/api/game';
 
 export default {
   data() {
       //
       pageSize: 10,
       currentPage: 1,
-      gameTotal: 0// 条目总数
-    }
+      gameTotal: 0 // 条目总数
+    };
   },
   mounted() {
-    this.onSearch()
+    this.onSearch();
   },
   methods: {
     // 改变每页显示条数
     handleSizeChange(val) {
-      this.pageSize = val
-      this.changePagination()
+      this.pageSize = val;
+      this.changePagination();
     },
     // 改变页码
     handleCurrentChange(val) {
-      this.currentPage = val
-      this.changePagination()
+      this.currentPage = val;
+      this.changePagination();
     },
     // 改变分页组件重新查询数据
     changePagination() {
         pageNum: this.currentPage,
         pageSize: this.pageSize
       }).then((res) => {
-        this.tableData = res.data.records
-      })
+        this.tableData = res.data.records;
+      });
     },
     handleAdd() {
-      this.$router.push({ name: 'gameEdit' })
+      this.$router.push({ name: 'gameEdit' });
     },
     handleEdit(row) {
       this.$router.push({
         name: 'gameEdit',
         query: { id: row.gameId }
-      })
+      });
     },
     handleDelete(row) {
       deleteGame(row.gameId).then(() => {
-        this.onSearch()
-      })
+        this.onSearch();
+      });
     },
     onSearch() {
       getGameList({
         endDate: this.endDate,
         pageSize: this.pageSize
       }).then((res) => {
-        this.tableData = res.data.records
-        this.gameTotal = res.data.total
-        this.pageSize = res.data.size
-      })
+        this.tableData = res.data.records;
+        this.gameTotal = res.data.total;
+        this.pageSize = res.data.size;
+      });
     },
     onReset() {
-      this.title = undefined
-      this.daterange = undefined
-      this.startDate = undefined
-      this.endDate = undefined
-      this.currentPage = 1
-      this.pageSize = 10
-      this.onSearch()
+      this.title = undefined;
+      this.daterange = undefined;
+      this.startDate = undefined;
+      this.endDate = undefined;
+      this.currentPage = 1;
+      this.pageSize = 10;
+      this.onSearch();
     },
     dateChange(val) {
-      this.startDate = this.daterange[0]
-      this.endDate = this.daterange[1]
+      this.startDate = this.daterange[0];
+      this.endDate = this.daterange[1];
     }
   }
-}
+};
 </script>
 <style>
 </style>