实现热点文化作品的后台管理页面

vueproject/package-lock.json

@@ -13,6 +13,7 @@
         "file-saver": "^2.0.5",
         "http-proxy-middleware": "^0.18.0",
         "js-md5": "^0.7.3",
+        "screenfull": "5.0.2",
         "vue": "^2.5.2",
         "vue-cropper": "0.5.5",
         "vue-router": "^3.0.1",
@@ -11530,6 +11531,14 @@
         "node": ">= 4.3 < 5.0.0 || >= 5.10"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.0.2.tgz",
+      "integrity": "sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -24447,6 +24456,11 @@
         "ajv": "^5.0.0"
       }
     },
+    "screenfull": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.0.2.tgz",
+      "integrity": "sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",

vueproject/package.json

@@ -18,7 +18,8 @@
     "vue": "^2.5.2",
     "vue-cropper": "0.5.5",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "screenfull": "5.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

vueproject/src/api/hotworkAPI.js

@@ -0,0 +1,34 @@
+import {req} from '../utils/request'
+
+// 热点文化作品相关的接口
+
+// 获取所有的热点文化作品
+export const getAllHotWorks = ()=>{
+  return req("get", "/hot-work/all", null, null);
+}
+
+// 根据id获取指定的热点文化作品
+export const getHotWorkById = (params)=>{
+  return req("get", "/hot-work/id/" + params, null, null);
+}
+
+// 分页 模糊查询热点文化作品
+export const getHotWorkByPage = (params)=>{
+  return req("get", "/hot-work/byPage", params, null);
+}
+
+// 根据id删除指定热点作品
+export const deleteHotWorkById = (params)=>{
+  return req("delete", "/hot-work/delete/" + params, null, null);
+}
+
+// 新增热点文化作品
+export const addHotWork = (params)=>{
+  return req("post", "/hot-work/add", null, params);
+}
+
+// 修改热点文化作品信息
+export const updateHotWork = (params)=>{
+  return req("put", "/hot-work/update", null, params);
+}
+

vueproject/src/components/ScreenFull/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <i :class="isFullscreen?'el-icon-switch-button':'el-icon-full-screen'" style="color: white" @click="click"></i>
+<!--    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />-->
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull' // 全屏
+
+export default {
+  name: 'Screenfull',
+  data() {
+    return {
+      isFullscreen: false
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    this.destroy()
+  },
+  methods: {
+    click() {
+      if (!screenfull.isEnabled) {
+        this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
+        return false
+      }
+      screenfull.toggle()
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.isEnabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.isEnabled) {
+        screenfull.off('change', this.change)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.screenfull-svg {
+  display: inline-block;
+  cursor: pointer;
+  fill: #5a5e66;;
+  width: 20px;
+  height: 20px;
+  vertical-align: 10px;
+}
+</style>

vueproject/src/components/leftnav.vue

@@ -9,6 +9,10 @@
       <img class="logoimg" src="../assets/img/logo.jpg" alt="">
       <div style="color: white;vertical-align: top; height: 40px;font-size: 18px;display: inline-block;">后台管理系统</div>
     </div>
+    <el-menu-item index="/admin/home" key="0">
+      <i class="el-icon-s-home"></i>
+      <span>首页</span>
+    </el-menu-item>
     <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
       <template slot="title">
         <i :class="menu.icon"></i>
@@ -42,7 +46,7 @@ export default {
         {
           menuid: 1,
           icon: 'el-icon-s-marketing',
-          menuname: '基础管理',
+          menuname: '系统管理',
           hasThird: null,
           url: null,
           menus: [
@@ -62,6 +66,14 @@ export default {
               url: 'admin/admins',
               menus: null
             },
+            {
+              menuid: 4,
+              icon: 'el-icon-collection',
+              menuname: '热点文化作品管理',
+              hasThird: 'N',
+              url: 'admin/hotwork',
+              menus: null
+            },
           ]
         },
         {

vueproject/src/components/navcon.vue

@@ -6,8 +6,10 @@
     <el-button class="buttonimg">
       <img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
     </el-button>
+    <screen-full id="screenfull" class="right-menu-item hover-effect" />
     <div class="avatar-wrapper">
-      <img :src="this.$store.state.admin.avatar" class="user-avatar">
+      <el-avatar size="medium" :src="avatar" class="user-avatar"></el-avatar>
+<!--      <img :src="avatar" class="user-avatar">-->
     </div>
     <el-submenu index="2" class="submenu">
       <!-- <template slot="title">{{user.userRealName}}</template> -->
@@ -22,14 +24,18 @@
 </template>
 <script>
 import { loginout } from '../api/userMG'
+import ScreenFull from './ScreenFull'
 export default {
   name: 'navcon',
+  components: { // 声明组件
+    ScreenFull
+  },
   data() {
     return {
       collapsed: true,
       imgshow: require('../assets/img/show.png'),
       imgsq: require('../assets/img/sq.png'),
-      avatar: require('../assets/img/avatar.jpeg'),
+      avatar: this.$store.state.admin.avatar,
       user: {}
     }
   },
@@ -95,7 +101,7 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   border: none;
 }
@@ -124,11 +130,34 @@ export default {
   position: absolute;
   top: 10px;
   right: 140px;
-  border-radius: 10px;
+  /*border-radius: 10px;*/
 }
 
 .avatar-wrapper {
   display: inline;
 }
 
+.right-menu-item {
+  display: inline-block;
+  padding: 0 8px;
+  height: 100%;
+  font-size: 18px;
+  color: #5a5e66;
+  vertical-align: center;
+  position: absolute;
+  right: 190px;
+  top: 20px;
+
+  &.hover-effect {
+    cursor: pointer;
+    transition: background .3s;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+}
+
+
+
 </style>

vueproject/src/router/index.js

@@ -56,152 +56,172 @@ import userAdmin from "../views/admin/userAdmin";
 // 管理员个人中心
 import AdminProfile from '../views/admin/profile/index'
 import adminInfo from "../views/admin/adminInfo";
+import AdminHome from "../views/admin/AdminHome";
+import HotWorkAdmin from "../views/admin/HotWorkAdmin";
 
 // 启用路由
 Vue.use(Router);
 
 // 导出路由
 export default new Router({
-    routes: [{
-        path: '/',
+  routes: [{
+    path: '/',
+    name: '首页',
+    component: login,
+    hidden: true,
+    meta: {
+      requireAuth: false
+    }
+  }, {
+    path: '/admin/login',
+    name: '登录',
+    component: Login2,
+    hidden: true,
+    meta: {
+      requireAuth: false
+    }
+  }, {
+    path: '/index',
+    name: '首页',
+    component: index,
+    iconCls: 'el-icon-tickets',
+    children: [
+      {
+        path: '/admin/home',
         name: '首页',
-        component: login,
-        hidden: true,
+        component: AdminHome,
         meta: {
-            requireAuth: false
+          requireAuth: true
         }
-    }, {
-        path: '/admin/login',
-        name: '登录',
-        component: Login2,
-        hidden: true,
+      },
+      {
+        path: '/goods/Goods',
+        name: '商品管理',
+        component: Goods,
         meta: {
-            requireAuth: false
+          requireAuth: true
         }
-    }, {
-        path: '/index',
-        name: '首页',
-        component: index,
-        iconCls: 'el-icon-tickets',
-        children: [{
-            path: '/goods/Goods',
-            name: '商品管理',
-            component: Goods,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-          path: '/admin/profile',
-          name: '管理员个人信息',
-          component: AdminProfile,
-          meta: {
-            requireAuth: true
-          }
-        }, {
-          path: '/admin/users',
-          name: '用户管理',
-          component: userAdmin,
-          meta: {
-            requireAuth: true
-          }
-        }, {
-          path: '/admin/admins',
-          name: '管理员信息',
-          component: adminInfo,
-          meta: {
-            requireAuth: true
-          }
-        }, {
-            path: '/machine/Machine',
-            name: '机器信息管理',
-            component: Machine,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/machine/MachineAisle',
-            name: '货道信息管理',
-            component: MachineAisle,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/pay/Order',
-            name: '交易订单',
-            component: Order,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/system/user',
-            name: '用户管理',
-            component: user,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/system/Module',
-            name: '菜单管理',
-            component: Module,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/system/Role',
-            name: '角色管理',
-            component: Role,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/system/Dept',
-            name: '公司管理',
-            component: Dept,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/system/Variable',
-            name: '系统环境变量',
-            component: Variable,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/system/Permission',
-            name: '权限管理',
-            component: Permission,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/machine/MachineConfig',
-            name: '支付配置信息',
-            component: MachineConfig,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/pay/Config',
-            name: '支付配置',
-            component: Config,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/druid/login',
-            name: '监控查询',
-            component: druidLogin,
-            meta: {
-                requireAuth: true
-            }
-        }, {
-            path: '/charts/statistics',
-            name: '数据可视化',
-            component: statistics,
-            meta: {
-                requireAuth: true
-            }
-        }]
-    }]
+      }, {
+        path: '/admin/profile',
+        name: '管理员个人信息',
+        component: AdminProfile,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/admin/users',
+        name: '用户管理',
+        component: userAdmin,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/admin/admins',
+        name: '管理员信息',
+        component: adminInfo,
+        meta: {
+          requireAuth: true
+        }
+      },
+      {
+        path: '/admin/hotwork',
+        name: '热点文化作品管理',
+        component: HotWorkAdmin,
+        meta: {
+          requireAuth: true
+        }
+      },
+      {
+        path: '/machine/Machine',
+        name: '机器信息管理',
+        component: Machine,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/machine/MachineAisle',
+        name: '货道信息管理',
+        component: MachineAisle,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/pay/Order',
+        name: '交易订单',
+        component: Order,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/system/user',
+        name: '用户管理',
+        component: user,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/system/Module',
+        name: '菜单管理',
+        component: Module,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/system/Role',
+        name: '角色管理',
+        component: Role,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/system/Dept',
+        name: '公司管理',
+        component: Dept,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/system/Variable',
+        name: '系统环境变量',
+        component: Variable,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/system/Permission',
+        name: '权限管理',
+        component: Permission,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/machine/MachineConfig',
+        name: '支付配置信息',
+        component: MachineConfig,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/pay/Config',
+        name: '支付配置',
+        component: Config,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/druid/login',
+        name: '监控查询',
+        component: druidLogin,
+        meta: {
+          requireAuth: true
+        }
+      }, {
+        path: '/charts/statistics',
+        name: '数据可视化',
+        component: statistics,
+        meta: {
+          requireAuth: true
+        }
+      }]
+  }]
 })

vueproject/src/views/admin/AdminHome.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
+        <el-card :body-style="{ padding: '0px' }" shadow="hover">
+          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+          <div style="padding: 14px;">
+            <span>好吃的汉堡</span>
+            <div class="bottom clearfix">
+              <time class="time">{{ currentDate }}</time>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AdminHome",
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+</script>
+
+<style scoped>
+.time {
+  font-size: 13px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.button {
+  padding: 0;
+  float: right;
+}
+
+.image {
+  width: 100%;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both
+}
+</style>

vueproject/src/views/admin/HotWorkAdmin.vue

@@ -0,0 +1,450 @@
+<template>
+  <div>
+    <!-- 面包屑导航 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>热点文化作品管理</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- 搜索筛选 -->
+    <el-form :inline="true" :model="search_data" class="user-search">
+      <el-form-item label="搜索：">
+        <el-input size="small" v-model="search_data.searchName" placeholder="输入文化作品名"></el-input>
+      </el-form-item>
+      <el-form-item label="">
+        <el-input size="small" v-model="search_data.searchCategory" placeholder="输入文化作品类别"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="small" type="primary" round icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button size="small" type="primary" round icon="el-icon-plus" @click="handleEdit()">添加</el-button>
+        <el-button size="small" type="danger" :disabled="multiple" round icon="el-icon-delete" @click="deleteRow">删除</el-button>
+        <el-button size="small" icon="el-icon-upload" round type="success" @click="handleImport">导入数据</el-button>
+        <el-button size="small" icon="el-icon-download" round type="warning" @click="handleExport">导出数据</el-button>
+      </el-form-item>
+    </el-form>
+    <!--列表-->
+    <el-table size="small" :data="list_data" highlight-current-row v-loading="loading"
+              border element-loading-text="拼命加载中" @selection-change="handleSelectionChange" style="width: 100%;">
+      <el-table-column align="center" type="selection" width="60">
+      </el-table-column>
+      <el-table-column sortable prop="id" label="热点文化作品ID" width="100">
+      </el-table-column>
+      <el-table-column sortable prop="name" label="热点文化作品名" width="120">
+      </el-table-column>
+      <el-table-column sortable prop="category" label="作品类型" width="200">
+      </el-table-column>
+      <el-table-column sortable prop="title" label="作品介绍标题" width="120">
+      </el-table-column>
+      <el-table-column prop="content" label="作品介绍内容" width="150">
+      </el-table-column>
+      <el-table-column align="center" sortable prop="postTime" label="作品介绍时间" min-width="120">
+        <template slot-scope="scope">
+          <div>{{scope.row.postTime|timestampToTime}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="imgUrl" label="作品介绍图片url" width="150">
+      </el-table-column>
+      <el-table-column align="center" label="操作" min-width="150">
+        <template slot-scope="scope">
+          <el-button size="small" round type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
+          <el-button size="small" round icon="el-icon-delete" type="danger" @click="deleteRow(scope.row)"></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
+    <!-- 编辑界面 -->
+    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
+      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
+        <el-form-item label="作品名" prop="name">
+          <el-input size="small" v-model="editForm.name" auto-complete="off"
+                    placeholder="请输入热点文化作品名"></el-input>
+        </el-form-item>
+        <el-form-item label="作品类型" prop="category">
+          <el-input size="small" v-model="editForm.category" auto-complete="off"
+                    placeholder="请输入热点文化作品类型"></el-input>
+        </el-form-item>
+        <el-form-item label="作品介绍标题" prop="title">
+          <el-input size="small" v-model="editForm.title" auto-complete="off"
+                    placeholder="请输入热点文化作品介绍标题"></el-input>
+        </el-form-item>
+        <el-form-item label="作品介绍内容" prop="content">
+          <el-input size="small" v-model="editForm.content" auto-complete="off"
+                    placeholder="请输入热点文化作品介绍内容"></el-input>
+        </el-form-item>
+        <el-form-item label="作品介绍网址" prop="citeUrl">
+          <el-input size="small" v-model="editForm.citeUrl" auto-complete="off"
+                    placeholder="请输入作品介绍网址"></el-input>
+        </el-form-item>
+        <el-form-item label="作品介绍图片网址" prop="imgUrl">
+          <el-input size="small" v-model="editForm.imgUrl" auto-complete="off"
+                    placeholder="请输入作品介绍图片网址"></el-input>
+        </el-form-item>
+        <el-form-item label="作品介绍时间" prop="imgUrl">
+          <el-date-picker
+            v-model="editForm.postTime"
+            align="right"
+            type="date"
+            placeholder="选择日期"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="closeDialog">取消</el-button>
+        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
+      </div>
+    </el-dialog>
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+          </div>
+          <span>仅允许导入xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="handleExportTemplate">下载模板</el-link>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {deleteUser, getUserInfoByPage, resetUserPwd, updateUserInfo, userRegister} from "../../api/userAPI";
+import Pagination from "../../components/Pagination";
+import {addHotWork, deleteHotWorkById, getHotWorkByPage, updateHotWork} from "../../api/hotworkAPI";
+
+export default {
+  name: "HotWorkAdmin",
+  // 注册组件
+  components: {
+    Pagination
+  },
+  data() {
+    return {
+      nshow: true, //switch开启
+      fshow: false, //switch关闭
+      loading: false, //是显示加载
+      editFormVisible: false, //控制编辑页面显示与隐藏
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      title: '添加',
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 上传的地址
+        url: "http://localhost:9090" + "/api/hot-work/import"
+      },
+      editForm: {
+        id: 0,
+        name: '',
+        category: '',
+        title: '',
+        content: '',
+        citeUrl: '',
+        imgUrl: '',
+        postTime: ''
+      },
+      pickerOptions: { // 带快捷项的日期选择器的处理方法
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            picker.$emit('pick', new Date());
+          }
+        }, {
+          text: '昨天',
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', date);
+          }
+        }, {
+          text: '一周前',
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', date);
+          }
+        }]
+      },
+      search_data: {
+        searchName: "",
+        searchCategory: "",
+        pageNum: 1,
+        pageSize: 10  // 默认分页
+      },
+      list_data: [
+        {
+          id: 0,
+          name: '',
+          category: '',
+          title: '',
+          content: '',
+          citeUrl: '',
+          imgUrl: '',
+          postTime: ''
+        }
+      ],
+      // rules表单验证
+      rules: {
+        name: [ // 作品名校验
+          { required: true, message: '请输入热点文化作品名', trigger: 'blur' }
+        ],
+        category: [ // 作品类别校验
+          { required: true, message: '请输入邮箱', trigger: 'blur' },
+        ],
+        title: [ // 标题校验
+          { required: true, message: '请输入作品介绍标题', trigger: 'blur' },
+        ],
+        content: [ // 内容校验
+          { required: true, message: '请输入作品介绍内容', trigger: 'blur' },
+        ],
+        citeUrl: [ // 网址校验
+          { required: true, message: '请输入作品介绍网址', trigger: 'blur' },
+          {
+            pattern: /^https?\/\/(.*?)$/,
+            required: true,
+            message: '请输入正确的网址',
+            trigger: 'blur'
+          }
+        ],
+      },
+      // 要删除的数据
+      delete_data: {
+        ids: '',
+      },
+      // 分页参数
+      pageparm: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 10
+      }
+    }
+  },
+  methods: {
+    get_data(param) {
+      this.loading = true
+      getHotWorkByPage(param).then(res=>{
+        this.loading = false
+        this.list_data = res.data.records
+        this.pageparm.currentPage = res.data.current
+        this.pageparm.pageSize = res.data.size
+        this.pageparm.total = res.data.total
+      }).catch(err => {
+        console.log(err)
+        this.loading = false
+        this.$message.error('数据加载失败，请稍后再试！')
+      })
+    },
+    // 关闭编辑、增加弹出框
+    closeDialog() {
+      this.editFormVisible = false
+    },
+    // 编辑、增加页面保存方法
+    submitForm(editData) {
+      this.$refs[editData].validate(valid => {
+        if (valid) {
+          if (this.title === '添加') {
+            addHotWork(this.editForm)
+              .then(res => {
+                this.editFormVisible = false
+                this.loading = false
+                if (res.code === "0") {
+                  this.get_data(this.search_data)
+                  this.$message({
+                    type: 'success',
+                    message: '添加热点作品成功！'
+                  })
+                } else {
+                  this.$message({
+                    type: 'info',
+                    message: res.msg
+                  })
+                }
+              })
+              .catch(err => {
+                this.editFormVisible = false
+                this.loading = false
+                this.$message.error('添加热点作品失败，请稍后再试！')
+              })
+          } else {
+            console.log(this.editForm)
+            updateHotWork(this.editForm)
+              .then(res => {
+                this.editFormVisible = false
+                this.loading = false
+                if (res.code === "0") {
+                  this.get_data(this.search_data)
+                  this.$message({
+                    type: 'success',
+                    message: '修改热点作品信息成功！'
+                  })
+                } else {
+                  this.$message({
+                    type: 'info',
+                    message: res.msg
+                  })
+                }
+              })
+              .catch(err => {
+                this.editFormVisible = false
+                this.loading = false
+                this.$message.error('修改热点作品信息失败，请稍后再试！')
+              })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    deleteRow(row) {
+      const userIds = row.id || this.ids;
+      this.$confirm('是否确认删除编号为"' + userIds + '"的数据项？', '信息', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          deleteHotWorkById(userIds)
+            .then(res => {
+              if (res.code === '0') {
+                this.$message({
+                  type: 'success',
+                  message: '删除热点作品成功！'
+                })
+                this.get_data(this.search_data)
+              } else {
+                this.$message({
+                  type: 'info',
+                  message: res.msg
+                })
+              }
+            })
+            .catch(err => {
+              this.loading = false
+              this.$message.error('热点作品删除失败，请稍后再试！')
+            })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    // 处理选中事件
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id); // 将被选中的行对应的记录的id加入ids数组中
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+      this.get_data(this.search_data);
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+    //显示编辑界面
+    handleEdit: function(index, row) {
+      this.editFormVisible = true
+      if (row != undefined && row != 'undefined') {
+        this.title = '编辑'
+        this.editForm.id = row.id
+        this.editForm.name = row.name
+        this.editForm.category = row.category
+        this.editForm.title = row.title
+        this.editForm.content = row.content
+        this.editForm.citeUrl = row.citeUrl
+        this.editForm.imgUrl = row.imgUrl
+        this.editForm.postTime = row.postTime
+      } else {
+        this.title = '添加'
+        this.editForm.id = null
+        this.editForm.name = null
+        this.editForm.category = null
+        this.editForm.title = null
+        this.editForm.content = null
+        this.editForm.citeUrl = null
+        this.editForm.imgUrl = null
+        this.editForm.postTime = null
+      }
+    },
+    handleUploadSuccess(res) { // 处理文件上传
+      if (res.code === "0") {
+        this.$message.success("导入数据成功")
+        this.get_data(this.search_data) // 刷新数据显示
+      } else {
+        this.$message.error("导入数据失败，请稍后重试！")
+      }
+    },
+    handleImport() {
+      this.upload.title = "用户导入";
+      this.upload.open = true;
+    },
+    handleExport() { // 处理数据导出
+      this.download('/hot-work/export', {}, `热点文化作品信息表${new Date().getTime()}.xlsx`)
+    },
+    handleExportTemplate() { // 处理导出模板
+      // location.href = "http://" + "localhost" + ":9090/api/user/importTemplate";
+      this.download('/hot-work/importTemplate', {}, `热点文化作品信息导入模板${new Date().getTime()}.xlsx`)
+    },
+    // 分页插件事件
+    callFather(parm) {
+      this.search_data.pageNum = parm.currentPage
+      this.search_data.pageSize = parm.pageSize
+      this.get_data(this.search_data)
+    },
+    // 搜索事件
+    search() {
+      this.get_data(this.search_data)
+    },
+  },
+  created() {
+    this.get_data(this.search_data)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vueproject/src/views/admin/adminInfo.vue

@@ -32,14 +32,14 @@
       </el-table-column>
       <el-table-column sortable prop="name" label="管理员昵称" width="200">
       </el-table-column>
-      <el-table-column sortable prop="level" label="管理员级别" width="120">
+      <el-table-column prop="level" label="管理员级别" width="120">
         <template slot-scope="scope">
           <span>{{ scope.row.level === 1 ? '超级管理员' : '普通管理员'}}</span>
         </template>
       </el-table-column>
-      <el-table-column sortable prop="email" label="邮箱" width="150">
+      <el-table-column prop="email" label="邮箱" width="150">
       </el-table-column>
-      <el-table-column sortable prop="phone" label="电话号码" width="150">
+      <el-table-column prop="phone" label="电话号码" width="150">
       </el-table-column>
       <el-table-column align="center" label="操作" min-width="150">
         <template slot-scope="scope">
@@ -124,7 +124,6 @@
 </template>
 
 <script>
-import {deleteUser, getUserInfoByPage, resetUserPwd, updateUserInfo, userRegister} from "../../api/userAPI";
 import Pagination from "../../components/Pagination";
 import {adminGetByPage, adminRegister, adminUpdate, deleteAdmin, resetAdminPwd} from "../../api/adminAPI";
 

vueproject/src/views/admin/userAdmin.vue

@@ -34,9 +34,9 @@
       </el-table-column>
       <el-table-column sortable prop="workUnit" label="工作单位" width="120">
       </el-table-column>
-      <el-table-column sortable prop="email" label="邮箱" width="150">
+      <el-table-column prop="email" label="邮箱" width="150">
       </el-table-column>
-      <el-table-column sortable prop="phone" label="电话号码" width="150">
+      <el-table-column prop="phone" label="电话号码" width="150">
       </el-table-column>
       <el-table-column align="center" label="操作" min-width="150">
         <template slot-scope="scope">
@@ -111,7 +111,6 @@
 
 <script>
 import {deleteUser, getUserInfoByPage, resetUserPwd, updateUserInfo, userRegister} from "../../api/userAPI";
-import {deptDelete, deptSave} from "../../api/userMG";
 import Pagination from "../../components/Pagination";
 
 export default {