提交

src/api/index.js

@@ -445,10 +445,16 @@ export function getAllEpg(channelId) {
   });
 }
 
-export function getKeywords({channelId, page, pageSize}) {
+export function getKeywords({ channelId, page, pageSize }) {
   return ajax({
     noLoad: true,
-    api: '/keywords/list?channelId=' + channelId + '&page=' + page + '&pagesize=' + pageSize,
+    api:
+      '/keywords/list?channelId=' +
+      channelId +
+      '&page=' +
+      page +
+      '&pagesize=' +
+      pageSize,
     method: 'GET',
     base: 'epg',
     errorToast: '当前访问人数过多，请重试。',
@@ -487,3 +493,147 @@ export function disableKeywords(data) {
     errorToast: '当前访问人数过多，请重试。',
   });
 }
+
+/**
+ * 修改密码
+ * @param {object} data
+ * @returns
+ */
+export function changePwdApi(data) {
+  return ajax({
+    api: '/user/pwd/reset',
+    data,
+    method: 'POST',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 获取用户列表
+ * @param {object} data
+ * @returns
+ */
+export function getUserListApi(data) {
+  return ajax({
+    api: '/user/list',
+    data,
+    method: 'POST',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 获取角色列表
+ * @param {object} data
+ * @returns
+ */
+export function getRoleListApi(data) {
+  return ajax({
+    api: '/user/role/list',
+    data,
+    method: 'GET',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 管理员修改用户信息
+ * @param {object} data
+ * @returns
+ */
+export function managerChangeUserApi(data) {
+  return ajax({
+    api: '/user/update',
+    data,
+    method: 'POST',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 管理员新增用户
+ * @param {object} data
+ * @returns
+ */
+export function managerAddUserApi(data) {
+  return ajax({
+    api: '/user/store',
+    data,
+    method: 'POST',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 删除角色
+ * @param {object} data
+ * @returns
+ */
+export function deleteUserApi(data) {
+  return ajax({
+    api: '/user/role/delete',
+    data,
+    method: 'GET',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 获取菜单
+ * @param {object} data
+ * @returns
+ */
+export function getMenuApi(data) {
+  return ajax({
+    api: '/menus/list',
+    data,
+    method: 'GET',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 新增角色
+ * @param {object} data
+ * @returns
+ */
+export function addRoleApi(data) {
+  return ajax({
+    api: '/user/role/store',
+    data,
+    method: 'POST',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}
+
+/**
+ * 修改角色
+ * @param {object} data
+ * @returns
+ */
+export function chagneRoleApi(data) {
+  return ajax({
+    api: '/user/role/update',
+    data,
+    method: 'POST',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}

src/assets/iconFont/menu_iconfont.css

@@ -1,45 +1,56 @@
 @font-face {
-  font-family: "menu-iconfont"; /* Project id  */
+  font-family: 'menu-iconfont'; /* Project id  */
   src: url('menu_iconfont.ttf?t=1683335470719') format('truetype');
 }
 
 .menu_iconfont {
-  font-family: "menu-iconfont" !important;
+  font-family: 'menu-iconfont' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-quanxian:before {
+  content: '\e60d';
+}
+
+.icon-yonghu:before {
+  content: '\e624';
+}
+
+.icon-jiaoseguanli:before {
+  content: '\e618';
+}
+
 .icon-baoliao:before {
-  content: "\e67d";
+  content: '\e67d';
 }
 
 .icon-RectangleCopy:before {
-  content: "\e6a7";
+  content: '\e6a7';
 }
 
 .icon-RectangleCopy1:before {
-  content: "\e6ab";
+  content: '\e6ab';
 }
 
 .icon-RectangleCopy2:before {
-  content: "\e6de";
+  content: '\e6de';
 }
 
 .icon-RectangleCopy3:before {
-  content: "\e6e0";
+  content: '\e6e0';
 }
 
 .icon-address:before {
-  content: "\e6a8";
+  content: '\e6a8';
 }
 
 .icon-ai-chat:before {
-  content: "\e62a";
+  content: '\e62a';
 }
 
 .icon-aihuihua:before {
-  content: "\e68a";
+  content: '\e68a';
 }
-

src/router/allMedia.js

@@ -39,6 +39,11 @@ export default [
     component: () =>
       import(/* webpackChunkName: "AIeditor" */ '../view/allMedia/AIeditor/index.vue'),
   },
+  {
+    path: '/personalCenter',
+    component: () =>
+      import(/* webpackChunkName: "personalCenter" */ '../view/allMedia/personalCenter.vue'),
+  },
   // 主页
   {
     path: '/main_home',
@@ -103,6 +108,16 @@ export default [
         component: () =>
           import(/* webpackChunkName: "ortherPage" */ '../view/ortherPage/index.vue'),
       },
+      {
+        path: 'UserManage',
+        component: () =>
+          import(/* webpackChunkName: "UserManage" */ '../view/allMedia/UserManage.vue'),
+      },
+      {
+        path: 'RoleManage',
+        component: () =>
+          import(/* webpackChunkName: "RoleManage" */ '../view/allMedia/RoleManage.vue'),
+      },
     ],
   },
 ];

src/view/allMedia/RoleManage.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="RoleManage">
+    <header_local />
+    <div style="padding: 0.5em">
+      <br />
+      <el-form :inline="true" :model="dataCol" class="demo-form-inline">
+        <el-form-item label="用户名">
+          <el-input
+            v-model="dataCol.keyword"
+            placeholder="请输入用户名"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getRoleList">查询</el-button>
+          <el-button type="primary" @click="showRoleD">新增角色</el-button>
+        </el-form-item>
+      </el-form>
+      <br />
+      <el-table
+        :data="dataCol.roleList"
+        style="width: 100%"
+        :header-cell-style="{
+          backgroundColor: '#f4f5f7',
+          color: '#606266',
+        }"
+        ref="table1"
+        align="center"
+        empty-text="暂无数据"
+      >
+        <el-table-column prop="name" label="角色" />
+        <el-table-column fixed="right" label="权限">
+          <template #default="scoped">
+            {{ scoped.row.menus.map(v => v.title).join(',') }}
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作">
+          <template #default="scoped">
+            <el-popconfirm
+              @confirm="() => deleteRole(scoped)"
+              title="确定删除角色?"
+            >
+              <template #reference>
+                <el-button type="primary" link>删除</el-button>
+              </template>
+            </el-popconfirm>
+            <el-button
+              link
+              type="primary"
+              @click.prevent="() => showRoleD(scoped)"
+            >
+              修改
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="e => changePageDisseminate(e)"
+      background
+      layout="prev, pager, next"
+      :page-count="Math.ceil(dataCol.total / dataCol.size) || 1"
+    />
+    <!-- 新增/修改角色 -->
+    <el-dialog v-model="showRole" title="角色">
+      <el-form :model="dataCol" label-width="120px" status-icon>
+        <el-form-item label="角色名">
+          <el-input v-model="dataCol.roleName" />
+        </el-form-item>
+        <el-form-item label="菜单" prop="menu">
+          <el-select
+            multiple
+            collapse-tags
+            v-model="dataCol.menu"
+            class="m-2"
+            placeholder="选择菜单"
+          >
+            <el-option
+              :label="item.title"
+              :value="item.id"
+              v-for="item in dataCol.menuList"
+              :key="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="saveRole"> 确定 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import header_local from './components/header.vue';
+import { ElMessage } from 'element-plus';
+import {
+  getRoleListApi,
+  deleteUserApi,
+  getMenuApi,
+  addRoleApi,
+  chagneRoleApi,
+} from '@/api/index';
+
+const showRole = ref(false);
+const dataCol = reactive({
+  keyword: '',
+  roleName: '',
+  roleList: [],
+  page: 1,
+  size: 15,
+  total: 0,
+  menu: [],
+  menuList: [],
+});
+
+getMenuApi().then(r => {
+  dataCol.menuList = r || [];
+});
+
+const getRoleList = () => {
+  getRoleListApi({
+    keyword: dataCol.keyword,
+    page: dataCol.page,
+    pageSize: dataCol.size,
+  }).then(r => {
+    dataCol.roleList = r && r.records ? r.records : [];
+    dataCol.total = r && r.total ? r.total : 0;
+  });
+};
+
+const changePageDisseminate = page => {
+  dataCol.page = page;
+  getRoleList();
+};
+
+const showRoleD = data => {
+  showRole.value = true;
+  dataCol.id = !data ? '' : data.row.roleId;
+  dataCol.menu = !data ? [] : data.row.menus.map(v => v.id);
+  dataCol.roleName = !data ? '' : data.row.name;
+};
+
+const deleteRole = scoped => {
+  deleteUserApi({
+    id: scoped.row.roleId,
+  }).then(() => {
+    getRoleList();
+  });
+};
+
+const saveRole = () => {
+  if (!dataCol.roleName || !dataCol.menu.length)
+    return ElMessage.error('请输入角色名或选择对应权限');
+  if (!dataCol.id)
+    addRoleApi({
+      name: dataCol.roleName,
+      menuId: dataCol.menu,
+    }).then(() => {
+      showRole.value = false;
+      dataCol.menu = [];
+      dataCol.roleName = '';
+      getRoleList();
+    });
+  else
+    chagneRoleApi({
+      id: dataCol.id,
+      name: dataCol.roleName,
+      menuId: dataCol.menu,
+    }).then(() => {
+      showRole.value = false;
+      dataCol.menu = [];
+      dataCol.roleName = '';
+      getRoleList();
+    });
+};
+
+getRoleList();
+
+document.title = '角色管理';
+</script>
+
+<style scoped></style>

src/view/allMedia/UserManage.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="UserManage">
+    <header_local />
+    <div style="padding: 0.5em">
+      <br />
+      <el-form :inline="true" :model="disseminateData" class="demo-form-inline">
+        <el-form-item label="用户名">
+          <el-input
+            v-model="disseminateData.name"
+            placeholder="请输入用户名"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="角色">
+          <el-select
+            clearable
+            v-model="disseminateData.roleId"
+            placeholder="请选择角色"
+          >
+            <el-option
+              :label="item.name"
+              :value="item.roleId"
+              v-for="item in disseminateData.roleList"
+              :key="item.roleId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getUserList">查询</el-button>
+          <el-button type="primary" @click="addUser">新增用户</el-button>
+        </el-form-item>
+      </el-form>
+      <br />
+      <el-table
+        :data="disseminateData.list"
+        style="width: 100%"
+        :header-cell-style="{
+          backgroundColor: '#f4f5f7',
+          color: '#606266',
+        }"
+        ref="table1"
+        align="center"
+        empty-text="暂无数据"
+      >
+        <el-table-column prop="loginName" label="用户名" />
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column prop="createTime" label="角色">
+          <template #default="scope">
+            {{ scope.row.userRole.name }}
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作">
+          <template #default="scope">
+            <el-button link type="primary" @click.prevent="resetPwa(scope)">
+              设置密码
+            </el-button>
+            <el-button
+              v-if="scope.row.roleId !== 1"
+              link
+              type="primary"
+              @click.prevent="resetRole(scope)"
+            >
+              配置角色
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="e => changePageDisseminate(e)"
+      background
+      layout="prev, pager, next"
+      :page-count="Math.ceil(disseminateData.total / disseminateData.size) || 1"
+    />
+    <!-- 修改密码 -->
+    <el-dialog v-model="showPwd" title="修改密码">
+      <el-form :model="userData" label-width="120px" status-icon>
+        <el-form-item label="新密码" prop="name">
+          <el-input type="password" v-model="userData.newPwd" />
+        </el-form-item>
+        <el-form-item label="充输新密码" prop="name">
+          <el-input type="password" v-model="userData.isNewPwd" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="chagnePwa"> 修改 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <!-- 修改角色 -->
+    <el-dialog v-model="showRole" title="修改角色">
+      <el-form :model="userData" label-width="120px" status-icon>
+        <el-form-item label="角色" prop="roleId">
+          <el-select
+            v-model="userData.roleId"
+            class="m-2"
+            placeholder="选择角色"
+          >
+            <el-option
+              :label="item.name"
+              :value="item.roleId"
+              v-for="item in disseminateData.roleList"
+              :key="item.roleId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="chagneRole"> 修改 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <!-- 新增用户 -->
+    <el-dialog v-model="showUser" title="新增用户">
+      <el-form :model="userData" label-width="120px" status-icon>
+        <el-form-item label="用户名" prop="user">
+          <el-input v-model="userData.user" />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPwd">
+          <el-input type="password" v-model="userData.newPwd" />
+        </el-form-item>
+        <el-form-item label="充输新密码" prop="isNewPwd">
+          <el-input type="password" v-model="userData.isNewPwd" />
+        </el-form-item>
+        <el-form-item label="角色" prop="roleId">
+          <el-select
+            v-model="userData.roleId"
+            class="m-2"
+            placeholder="选择角色"
+          >
+            <el-option
+              :label="item.name"
+              :value="item.roleId"
+              v-for="item in disseminateData.roleList"
+              :key="item.roleId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="user"> 修改 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import header_local from './components/header.vue';
+import { ElMessage } from 'element-plus';
+import {
+  getUserListApi,
+  getRoleListApi,
+  managerChangeUserApi,
+  managerAddUserApi,
+} from '@/api/index';
+
+const showPwd = ref(false);
+const showRole = ref(false);
+const showUser = ref(false);
+const userData = ref({});
+const disseminateData = reactive({
+  total: 0,
+  page: 1,
+  size: 15,
+  name: '',
+  roleId: '',
+  roleList: [],
+  list: [],
+});
+
+getRoleListApi({
+  page: 1,
+  pageSize: 1500,
+}).then(r => (disseminateData.roleList = r && r.records ? r.records : []));
+
+const changePageDisseminate = page => {
+  disseminateData.page = page;
+  getUserList();
+};
+
+const getUserList = () => {
+  getUserListApi({
+    roleId: disseminateData.roleId,
+    name: disseminateData.name,
+    page: disseminateData.page,
+    pageSize: disseminateData.size,
+  }).then(r => {
+    const item = r || {};
+    disseminateData.list = item.records || [];
+    disseminateData.total = item.total || 0;
+  });
+};
+
+const resetPwa = scope => {
+  userData.value = scope;
+  showPwd.value = true;
+};
+const resetRole = scope => {
+  scope.roleId = scope.row.roleId;
+  userData.value = scope;
+  showRole.value = true;
+};
+
+const chagnePwa = () => {
+  if (!userData.value.isNewPwd || !userData.value.newPwd)
+    return ElMessage.error('请输入新密码');
+  if (userData.value.isNewPwd !== userData.value.newPwd)
+    return ElMessage.error('两次新密码不一致');
+  managerChangeUserApi({
+    id: userData.value.row.id,
+    loginPassword: userData.value.isNewPwd,
+  }).then(r => {
+    userData.value = {};
+    showPwd.value = false;
+  });
+};
+
+const chagneRole = () => {
+  if (isNaN(userData.value.roleId)) return ElMessage.error('请输入新密码');
+  managerChangeUserApi({
+    id: userData.value.row.id,
+    roleId: userData.value.roleId,
+  }).then(r => {
+    userData.value = {};
+    showRole.value = false;
+  });
+};
+
+const user = () => {
+  if (
+    !userData.value.isNewPwd ||
+    !userData.value.newPwd ||
+    !userData.value.user
+  )
+    return ElMessage.error('请输入用户名或密码');
+  if (userData.value.isNewPwd !== userData.value.newPwd)
+    return ElMessage.error('两次密码不一致');
+  if (!userData.value.roleId) return ElMessage.error('请选择角色');
+  managerAddUserApi({
+    loginName: userData.value.user,
+    loginPassword: userData.value.isNewPwd,
+    roleId: userData.value.roleId,
+  }).then(r => {
+    console.log(r);
+    showUser.value = false;
+    userData.value = {};
+  });
+};
+
+const addUser = () => {
+  showUser.value = true;
+  userData.value = {};
+};
+
+getUserList();
+
+document.title = '用户管理';
+</script>
+
+<style scoped></style>

src/view/allMedia/components/header.vue

@@ -1,5 +1,6 @@
 <template>
   <header class="header">
+    <el-button type="primary" link @click.stop="toPwd">修改密码</el-button>
     <el-popconfirm @confirm="confirm" title="确定退出登录?">
       <template #reference>
         <el-button type="primary" link>退出登录</el-button>
@@ -22,13 +23,20 @@ const confirm = () => {
     });
   });
 };
+
+const toPwd = () => {
+  router.push({
+    path: '/personalCenter',
+    query: {},
+  });
+};
 </script>
 
 <style>
 .header {
   text-align: right;
-  height: 2em;
-  line-height: 2em;
+  height: 3em;
+  line-height: 3em;
   padding-right: 1em;
   background-color: #393b48;
 }

src/view/allMedia/login.vue

@@ -55,10 +55,10 @@ const form = reactive({
   name: '',
   pwd: '',
 });
-const rules = reactive({
+const rules = {
   name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
   pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-});
+};
 
 document.title = '陕西广电融媒体集团';
 

src/view/allMedia/main.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import header_local from './components/header.vue';
+// import header_local from './components/header.vue';
 import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 

src/view/allMedia/personalCenter.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="personalCenter">
+    <el-card style="height: 100%">
+      <h3>修改密码</h3>
+      <div style="width: 50%; padding-top: 2em">
+        <el-form :model="form" label-width="120px">
+          <el-form-item label="旧密码">
+            <el-input type="password" v-model="form.oldPwd" />
+          </el-form-item>
+          <el-form-item label="新密码">
+            <el-input type="password" v-model="form.newPwd" />
+          </el-form-item>
+          <el-form-item label="确认新密码">
+            <el-input type="password" v-model="form.isNewPwd" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">确定修改</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import { changePwdApi } from '@/api/index';
+import sha256 from 'sha256';
+import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+document.title = '修改密码';
+const form = reactive({
+  oldPwd: '',
+  newPwd: '',
+  isNewPwd: '',
+});
+
+const onSubmit = () => {
+  if (!form.oldPwd) return ElMessage.error('请输入旧密码');
+  if (!form.isNewPwd || !form.newPwd) return ElMessage.error('请输入新密码');
+  if (form.isNewPwd !== form.newPwd) return ElMessage.error('两次新密码不一致');
+  changePwdApi({
+    oldPwd: sha256(form.oldPwd),
+    pwd: sha256(form.newPwd),
+  }).then(() => {
+    form.oldPwd = '';
+    form.newPwd = '';
+    form.isNewPwd = '';
+    ElMessage({
+      message: '修改成功',
+      type: 'success',
+      onClose(){
+        router.go(-1);
+      }
+    });
+  });
+};
+</script>
+
+<style scoped>
+.personalCenter {
+  padding: 1em;
+  height: 100%;
+}
+</style>