2021/12/21

src/api/appApi.js

+import request from '@/utils/request'
+
+/**
+* 保存应用
+* @param {*} data 
+* @returns 
+*/
+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 deleteApp = (id) => request({
+  url: `/admin/App/${id}`, method: 'delete'
+})
+/**
+ * 更新应用
+ * @param {*} data 
+ * @returns 
+ */
+export const UpdateApp = (data, id) => request({
+  url: `/admin/App/${id}`, method: 'put', data
+})
+/**
+ * 查询应用详情
+ * @param {*} params 
+ * @returns 
+ */
+export const getAppDetail = (id) => request({
+  url: `/admin/App/${id}`
+})

src/components/CharacterResult/index.vue

           />
         </template>
       </el-table-column>
+      <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>

src/main.js

 // }
 
 // set ElementUI lang to EN
-Vue.use(ElementUI, { locale })
+// Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
-// Vue.use(ElementUI)
+Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 

src/router/index.js

       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'dashboard' }
+      meta: { title: '首页', icon: 'dashboard' }
     }]
   },
 
     ]
   },
 
+  {
+    path: '/gameManage',
+    component: Layout,
+    name: '游戏管理',
+    meta: { title: '游戏管理', icon: 'form' },
+    children: [
+      {
+        path: 'gameManage',
+        name: '游戏列表',
+        component: () => import('@/views/gameManage/index'),
+        meta: { title: '游戏列表', icon: 'form' }
+      },
+      
+    ]
+  },
+  {
+    path: '/appManage',
+    component: Layout,
+    name: '应用管理',
+    meta: { title: '应用管理', icon: 'form' },
+    children: [
+      {
+        path: 'appManage',
+        name: '应用列表',
+        component: () => import('@/views/appManage/index'),
+        meta: { title: '应用列表', icon: 'form' }
+      },
+      {
+        path: 'appManage/add',
+        name: '新增应用',
+        component: () => import('@/views/appManage/add'),
+        // meta: { title: '新增应用', icon: 'form' }
+      },
+      {
+        path: 'appManage/edit',
+        name: '编辑应用',
+        component: () => import('@/views/appManage/edit'),
+        // meta: { title: '编辑应用', icon: 'form' }
+      }
+    ]
+  },
+
   {
     path: '/login',
     component: () => import('@/views/login/index'),

src/views/appManage/add.vue

+<template>
+  <div class="body_edit">
+    <h2 style="text-align: center">应用新增</h2>
+        <el-form
+          ref="form"
+          :model="appForm"
+          label-width="150px"
+          size="mini"
+        >
+          <el-form-item label="应用名称：">
+            <el-input v-model="appForm.appName"></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>
+  </div>
+</template>
+<script>
+import { saveApp } from "@/api/appApi";
+export default {
+  data() {
+    return {
+      appForm: {
+        appName: undefined,
+      },
+    };
+  },
+
+  methods: {
+    onCancel() {
+      this.$router.go(-1);
+    },
+    onSubmit() {
+      saveApp(this.appForm).then((res) => {
+        this.$message("保存成功");
+        this.onCancel();
+      });
+    },
+  },
+};
+</script>
+<style>
+</style>

src/views/appManage/edit.vue

+<template>
+  <div style="padding: 20px">
+    <el-form ref="form" :model="appForm" label-width="150px" size="mini">
+      <el-form-item label="特征库名称：">
+        <el-input v-model="appForm.appName"></el-input>
+      </el-form-item>
+      <el-form-item class="editBottomItem">
+        <el-button type="primary" @click="onEdit">修改</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { UpdateApp, getAppDetail } from "@/api/appApi";
+
+export default {
+  data() {
+    return {
+      appForm: {
+        appId: undefined,
+        appName: undefined,
+      },
+    };
+  },
+
+  methods: {
+    //上方实例库的方法
+    onCancel() {
+      this.$router.go(-1);
+    },
+    onEdit() {
+      UpdateApp(this.appForm, this.appForm.appId).then((res) => {
+        this.$message("修改成功");
+      });
+    },
+  },
+  //进入页面执行的方法
+  mounted: function () {
+    if (this.$route?.query.id) {
+      getAppDetail(this.$route.query.id).then((res) => {
+        this.appForm = res.data;
+      });
+    }
+  },
+};
+</script>
+<style>
+.editBottomItem > div {
+  margin: 0 !important;
+  text-align: center;
+}
+</style>

src/views/appManage/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-date-picker
+        v-model="daterange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        @change="dateChange"
+        style="margin-right: 20px"
+      >
+      </el-date-picker>
+
+      <el-button type="primary" @click="onSearch">查询</el-button>
+      <el-button @click="onReset">重置</el-button>
+      <el-button type="primary" @click="handleAdd">添加应用</el-button>
+    </el-card>
+    <el-table stripe :data="tableData" border style="width: 100%">
+      <el-table-column prop="appName" 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 type="text" slot="reference">删除</el-button>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import { getAppList, deleteApp } from "@/api/appApi";
+
+export default {
+  data() {
+    return {
+      appName: undefined,
+      daterange: "",
+      tableData: [],
+      endDate: undefined,
+      startDate: undefined,
+    };
+  },
+  methods: {
+    handleAdd() {
+      this.$router.push({ path: "appManage/add" });
+    },
+    handleEdit(row) {
+      this.$router.push({
+        path: "appManage/edit",
+        query: { id: row.appId },
+      });
+    },
+    handleDelete(row) {
+      deleteApp(row.appId).then(() => {
+        this.onSearch();
+      });
+    },
+    onSearch() {
+      getAppList({
+        appName: this.appName,
+        startDate: this.startDate,
+        endDate: this.endDate,
+      }).then((res) => {
+        this.tableData = res.data.records;
+      });
+    },
+    onReset() {
+      this.appName = "";
+      this.daterange = "";
+      this.startDate = "";
+      this.endDate = "";
+      this.onSearch();
+    },
+    dateChange(val) {
+      this.startDate = this.daterange[0];
+      this.endDate = this.daterange[1];
+    },
+  },
+  mounted() {
+    this.onSearch();
+  },
+};
+</script>
+<style>
+</style>

src/views/characterLibManage/add.vue

             <el-input type="textarea" v-model="characterLib.remark"></el-input>
           </el-form-item>
 
-          <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"
 };
 </script>
 <style>
+.editBottomItem > div {
+  margin: 0 !important;
+  text-align: center;
+}
 </style>

src/views/characterLibManage/edit.vue

                   v-model="characterLib.remark"
                 ></el-input>
               </el-form-item>
-              <el-form-item>
+              <el-form-item class="editBottomItem" >
                 <el-button type="primary" @click="onEdit">修改</el-button>
                 <el-button @click="onCancel">取消</el-button>
               </el-form-item>
 };
 </script>
 <style>
+.editBottomItem>div{
+  margin: 0 !important;
+  text-align: center;
+}
 </style>

src/views/characterLibManage/index.vue

     <el-card class="box-card">
       特征库名称：<el-input
         v-model="name"
-        size='medium'
+        size="medium"
         style="width: 200px; margin-right: 20px"
       />
       创建时间：
         end-placeholder="结束日期"
         value-format="yyyy-MM-dd"
         @change="dateChange"
+        style="margin-right: 20px"
       >
       </el-date-picker>
 
           <el-image :src="scope.row.icon" style="width: 100px; height: 100px" />
         </template>
       </el-table-column>
+      <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>
   data() {
     return {
       name: undefined,
-      daterange:'',
+      daterange: "",
       tableData: [],
-      endDate:undefined,
-      startDate:undefined
+      endDate: undefined,
+      startDate: undefined,
     };
   },
   methods: {
       });
     },
     onSearch() {
-      getCharacterLibList({ name: this.name,startDate:this.startDate,endDate:this.endDate }).then((res) => {
+      getCharacterLibList({
+        name: this.name,
+        startDate: this.startDate,
+        endDate: this.endDate,
+      }).then((res) => {
         this.tableData = res.data.records;
       });
     },
       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];
+    },
   },
   mounted() {
     this.onSearch();

src/views/gameManage/index.vue

+<template>
+<div>游戏列表</div>
+</template>
+<script>
+</script>
+<style>
+</style>