接入高级设置和类型管理接口

src/api/settings.js

 import httpRequest from '@/utils/axios'
+/* ------------------------------------高级设置------------------------------------ */
 /**
  * 获取角色列表
  */
 export function getRoleList(params) {
   return httpRequest.get('/api/cms/admin/v1/roles', { params })
+}
+/**
+ * 获取权限列表
+ */
+export function getPermissionList(params) {
+  return httpRequest.get('/api/cms/admin/v1/permissions', { params })
+}
+/**
+ * 创建角色
+ */
+export function createRole(data) {
+  return httpRequest.post('/api/cms/admin/v1/role/create', data)
+}
+/**
+ * 获取角色详情
+ */
+export function getRoleDetails(params) {
+  return httpRequest.get(`/api/cms/admin/v1/role/${params.role_id}/detail`, { params })
+}
+/**
+ * 更新角色
+ */
+export function updateRole(data) {
+  return httpRequest.put(`/api/cms/admin/v1/role/${data.role_id}/update`, data)
+}
+/**
+ * 删除角色
+ */
+export function deleteRole(data) {
+  return httpRequest.delete(`/api/cms/admin/v1/role/${data.role_id}/delete`, data)
+}
+/* ------------------------------------员工管理------------------------------------ */
+/**
+ * 获取员工列表
+ */
+export function getStaffList(params) {
+  return httpRequest.get('/api/cms/admin/v1/roles', { params })
+}
+/* ------------------------------------类型管理------------------------------------ */
+/**
+ * 获取类型列表
+ */
+export function getTypeList(params) {
+  return httpRequest.get('/api/cms/admin/v1/types', { params })
+}
+/**
+ * 创建类型
+ */
+export function createType(data) {
+  return httpRequest.post('/api/cms/admin/v1/type/create', data)
+}
+/**
+ * 更新角色
+ */
+export function updateType(data) {
+  return httpRequest.put(`/api/cms/admin/v1/type/${data.type_id}/update`, data)
 }
\ No newline at end of file

src/components/Layout/Sidebar/index.vue

@@ -93,7 +93,6 @@ export default {
   watch: {
     $route: {
       handler: function(nv) {
-        console.log(nv)
         if (nv && nv.path) this.defaultActive = nv.path
         else this.defaultActive = ''
       },

src/components/Layout/header.vue

@@ -52,7 +52,6 @@ export default {
     },
     async logout() {
       await this.$store.dispatch('logout')
-      // console.log(this.$route.fullPath)
       this.$router.push(this.$route.fullPath)
     }
   }

src/pages/settings/role/index.vue

@@ -4,7 +4,7 @@
     <el-tabs v-model="activeName" type="card">
       <el-tab-pane label="角色权限" name="0" lazy>
         <table-list v-bind="tableOptions" ref="tabList">
-          <template v-slot:table-role-name="{ row }"><span class="color-blue">{{row.role_name}}</span></template>
+          <template v-slot:table-role-name="{ row }"><span class="color-blue">{{row.name}}</span></template>
           <!-- 操作 -->
           <template v-slot:table-operate="{ row }">
             <el-button type="text" @click="handleEdit(row)" size="mini">编辑名称</el-button>
@@ -45,8 +45,7 @@
 </template>
 <script>
 import TableList from '@/components/TableList'
-import { permissionList } from './permission'
-import { getRoleList } from '@/api/settings.js'
+import { getRoleList, getPermissionList, createRole, deleteRole, updateRole } from '@/api/settings.js'
 function recursionData(arr) {
   const leafArr = []
   function recursion(target) {
@@ -57,6 +56,7 @@ function recursionData(arr) {
     } else if (Array.isArray(target.children)) {
       list = target.children
     }
+    list.reverse()
     list.filter(item => {
       if (Array.isArray(item.children) && item.children.length > 0) {
         const _prop = item.tag.replace(/-/g, '_')
@@ -88,7 +88,7 @@ export default {
           params: {}
         },
         columns: [
-          { prop: 'role_name', label: '角色名称', slots: 'table-role-name' },
+          { prop: 'name', label: '角色名称', slots: 'table-role-name' },
           { prop: 'role_owner', label: '角色拥有人' },
           { prop: 'operate', label: '操作', slots: 'table-operate' }
         ],
@@ -190,7 +190,7 @@ export default {
       this.selectedTableItem = val
       this.dialogVisible = true
       this.dialogType = 'permission'
-      this.reviewPermission(val.permission)
+      this.reviewPermission(val.permission_tags)
     },
     reviewPermission(permissions) {
       // const permissionData = []
@@ -200,6 +200,7 @@ export default {
           targetArr.push(item.tag)
         }
       })
+      this.checkAll = this.isCheckAll
     },
     handleCheckAllChange(val) {
       if (val) {
@@ -230,7 +231,21 @@ export default {
     handleDialogSubmit() {
       this.$refs.dialogForm.validate(valid => {
         if (valid) {
-          console.log('dialogForm')
+          switch (this.dialogType) {
+            case 'create':
+              this.fetchCreateRole()
+              break
+            case 'delete':
+              this.fetchDeleteRole()
+              break
+            case 'edit':
+              this.fetchUpdateRole()
+              break
+            case 'permission':
+              this.fetchUpdateRolePermissions()
+              break
+          }
+          this.dialogVisible = false
         } else {
           return false
         }
@@ -242,23 +257,99 @@ export default {
         limit: 20
       }
       getRoleList(params).then((res) => {
-        console.log(res)
+        if (res.code === 0 && res.data && Array.isArray(res.data.data)) {
+          // console.log(res.data.data)
+          this.tableOptions.data = res.data.data
+        }
+      })
+    },
+    fetchCreateRole() {
+      const data = {
+        name: this.form.role_name
+      }
+      createRole(data).then((res) => {
+        if (res.code === 0 && res.message === 'SUCCESS') {
+          this.fetchRoleList()
+          this.$message.success('创建角色成功')
+        } else {
+          this.$message.error('创建角色失败')
+        }
+      })
+    },
+    fetchUpdateRole() {
+      const data = {
+        role_id: this.selectedTableItem.id,
+        name: this.form.role_name
+      }
+      updateRole(data).then((res) => {
+        if (res.code === 0 && res.data && res.data.status) {
+          this.fetchRoleList()
+          this.$message.success('编辑角色名称成功')
+        } else {
+          this.$message.error('编辑角色名称失败')
+        }
+      })
+    },
+    fetchDeleteRole() {
+      const data = {
+        role_id: this.selectedTableItem.id
+      }
+      deleteRole(data).then((res) => {
+        if (res.code === 0 && res.data && res.data.status) {
+          this.fetchRoleList()
+          this.$message.success('删除角色成功')
+        } else {
+          this.$message.error('删除角色失败')
+        }
+      })
+    },
+    fetchUpdateRolePermissions() {
+      const permissionArr = []
+      Object.keys(this.form).forEach(key => {
+        const item = this.form[key]
+        if (Array.isArray(item)) {
+          item.forEach((it) => {
+            permissionArr.push(it)
+          })
+        }
+      })
+      const data = {
+        role_id: this.selectedTableItem.id,
+        permission_tags: permissionArr
+      }
+      updateRole(data).then((res) => {
+        if (res.code === 0 && res.data && res.data.status) {
+          this.fetchRoleList()
+          this.$message.success('权限配置成功')
+        } else {
+          this.$message.error('权限配置失败')
+        }
       })
     },
-    fetchPermissionList() {
-      const result = permissionList
-      const leafNodeList = recursionData(result)
-      this.permissionLeafCount = leafNodeList.length
-      this.permissionLeafList = leafNodeList
-      console.log(leafNodeList)
-      result.forEach(item => {
-        item.children.forEach(subItem => {
-          const key = subItem.v_model_key
-          permissionForm[key] = []
+    async fetchPermissionList() {
+      const result = await new Promise((resolve, reject) => {
+        getPermissionList().then((res) => {
+          if (res.code === 0 && Array.isArray(res.data)) {
+            resolve(res.data)
+          } else reject()
+        }).catch(() => {
+          reject()
         })
       })
-      this.permissionList = result
-      this.assignForm()
+      if (result) {
+        const leafNodeList = recursionData(result)
+        this.permissionLeafCount = leafNodeList.length
+        this.permissionLeafList = leafNodeList
+        // console.log(leafNodeList)
+        result.forEach(item => {
+          item.children.forEach(subItem => {
+            const key = subItem.v_model_key
+            permissionForm[key] = []
+          })
+        })
+        this.permissionList = result
+        this.assignForm()
+      }
     }
   }
 }

src/pages/settings/type/index.vue

 <template>
   <div class="type page_container">
     <el-button class="btn-create" type="primary" @click="handleCreate" size="small">新建类型</el-button>
-    <el-tabs v-model="activeName" type="card">
+    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
       <el-tab-pane label="项目类型" name="0" lazy>
         <table-list v-bind="projectTableOptions" ref="tabList">
           <!-- 项目Id -->
-          <template v-slot:table-id="{ row }"><span class="details-handle" @click="handleDetails(row)">{{row.id}}</span></template>
+          <template v-slot:table-id="{ row }"><p class="details-handle" @click="handleDetails(row)">{{row.id}}</p></template>
+          <!-- 创建人 -->
+          <template v-slot:table-creater="{ row }"><p>{{row.sso_user.realname || row.sso_user.nickname}}</p></template>
           <!-- 状态 -->
           <template v-slot:table-status="{ row }">
-            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
+            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用" @change="statusChange(row)"></el-switch>
           </template>
         </table-list>
       </el-tab-pane>
       <el-tab-pane label="内容类型" name="1" lazy>
         <table-list v-bind="contentTableOptions" ref="tabList">
           <!-- 项目Id -->
-          <template v-slot:table-id="{ row }"><span class="details-handle" @click="handleDetails(row)">{{row.id}}</span></template>
+          <template v-slot:table-id="{ row }"><p class="details-handle" @click="handleDetails(row)">{{row.id}}</p></template>
+          <!-- 创建人 -->
+          <template v-slot:table-creater="{ row }"><p>{{row.sso_user.realname || row.sso_user.nickname}}</p></template>
+          <!-- 创建人 -->
+          <template v-slot:table-category="{ row }"><p>{{row.category | categoryFilter}}</p></template>
           <!-- 状态 -->
           <template v-slot:table-status="{ row }">
-            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用"></el-switch>
+            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用" @change="statusChange(row)"></el-switch>
           </template>
         </table-list>
       </el-tab-pane>
@@ -26,21 +32,24 @@
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="440px" @close="handleDialogClose" :destroy-on-close="true">
       <el-form :model="form" label-width="110px" ref="dialogForm" class="dialog-form">
         <template v-if="activeName === '0'">
-          <el-form-item label="项目类型名称" prop="project_type_name" :rules="{ required: true, message: '请输入项目类型名称', trigger: 'blur' }">
-            <el-input v-model="form.project_type_name" size="small"></el-input>
+          <el-form-item label="项目类型名称" prop="name" :rules="{ required: true, message: '请输入项目类型名称', trigger: 'blur' }">
+            <el-input v-model="form.name" size="small"></el-input>
+          </el-form-item>
+          <el-form-item v-if="dialogType === 'create'" label="参数ID为：" prop="tag" :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }">
+            <el-input v-model="form.tag" size="small"></el-input>
           </el-form-item>
         </template>
         <template  v-else>
-          <el-form-item label="内容类型为：" prop="content_type" :rules="[{ required: true, message: '请选择手机号', trigger: 'change' }]">
-            <el-select v-model="form.content_type" placeholder="请选择角色" size="small" style="width:100%;">
+          <el-form-item label="内容类型为：" prop="category" :rules="[{ required: true, message: '请选择手机号', trigger: 'change' }]">
+            <el-select v-model="form.category" placeholder="请选择类型" size="small" style="width:100%;">
               <el-option :label="item.name" :value="item.id" v-for="item in contentTypeList" :key="item.id" ></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="参数ID为：" prop="query_id" :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }">
-            <el-input v-model="form.query_id" size="small"></el-input>
+          <el-form-item v-if="dialogType === 'create'" label="参数ID为：" prop="tag" :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }">
+            <el-input v-model="form.tag" size="small"></el-input>
           </el-form-item>
-          <el-form-item label="类型名称为：" prop="content_type_name" :rules="{ required: true, message: '请输入类型名称', trigger: 'blur' }">
-            <el-input v-model="form.content_type_name" size="small"></el-input>
+          <el-form-item label="类型名称为：" prop="name" :rules="{ required: true, message: '请输入类型名称', trigger: 'blur' }">
+            <el-input v-model="form.name" size="small"></el-input>
           </el-form-item>
         </template>
       </el-form>
@@ -53,11 +62,11 @@
 </template>
 <script>
 import TableList from '@/components/TableList'
+import { getTypeList, createType, updateType } from '@/api/settings.js'
 const defaultForm = {
-  project_type_name: '',
-  content_type: '',
-  query_id: '',
-  content_type_name: ''
+  name: '',
+  category: '',
+  tag: ''
 }
 export default {
   components: { TableList },
@@ -71,14 +80,13 @@ export default {
         },
         columns: [
           { prop: 'id', label: '项目类型ID', slots: 'table-id' },
-          { prop: 'type', label: '项目类型' },
-          { prop: 'author', label: '创建人' },
-          { prop: 'create_time', label: '创建时间' },
+          { prop: 'name', label: '项目类型' },
+          { prop: 'sso_user', label: '创建人', slots: 'table-creater' },
+          { prop: 'created_at', label: '创建时间' },
+          { prop: 'tag', label: '参数ID' },
           { prop: 'status', label: '状态', slots: 'table-status' }
         ],
-        data: [
-          { id: '123', type: '学位教育', author: '张三', create_time: '2021-04-23 09:00:31', status: 1 }
-        ]
+        data: []
       },
       // 内容类型
       contentTableOptions: {
@@ -87,25 +95,24 @@ export default {
         },
         columns: [
           { prop: 'id', label: '内容ID', slots: 'table-id' },
-          { prop: 'type_name', label: '类型名称' },
-          { prop: 'type', label: '内容类型' },
-          { prop: 'author', label: '创建人' },
-          { prop: 'create_time', label: '创建时间' },
-          { prop: 'query_id', label: '参数ID' },
+          { prop: 'name', label: '类型名称' },
+          { prop: 'category', label: '内容类型', slots: 'table-category' },
+          { prop: 'sso_user', label: '创建人', slots: 'table-creater' },
+          { prop: 'created_at', label: '创建时间' },
+          { prop: 'tag', label: '参数ID' },
           { prop: 'status', label: '状态', slots: 'table-status' }
         ],
-        data: [
-          { id: '123', type_name: '最新动态', type: '文章', author: '张三', create_time: '2021-04-23 09:00:31', query_id: '33', status: 1 }
-        ]
+        data: []
       },
       contentTypeList: [
-        { id: 0, name: '广告' },
         { id: 1, name: '文章' },
-        { id: 2, name: '图文' }
+        { id: 2, name: '广告' },
+        { id: 3, name: '图文' }
       ],
       dialogVisible: false,
       dialogType: '',
-      form: Object.assign({}, defaultForm)
+      form: Object.assign({}, defaultForm),
+      selectedId: ''
     }
   },
   computed: {
@@ -115,20 +122,38 @@ export default {
       return text + '类型'
     }
   },
+  filters: {
+    categoryFilter(val) {
+      let text = '广告'
+      switch (val) {
+        case 1:
+          text = '文章'
+          break
+        case 3:
+          text = '图文'
+          break
+      }
+      return text
+    }
+  },
+  created() {
+    this.fetchTypeList()
+  },
   methods: {
+    handleTabClick() {
+      this.fetchTypeList()
+    },
     handleCreate() {
       this.dialogType = 'create'
       this.dialogVisible = true
     },
     handleDetails(val) {
-      this.dialogType = 'details'
+      this.dialogType = 'edit'
       this.dialogVisible = true
-      const isProject = this.activeName === '0'
+      this.selectedId = val.id
       this.form = {
-        project_type_name: isProject ? val.type : '',
-        content_type: isProject ? '' : val.type,
-        query_id: isProject ? '' : val.query_id,
-        content_type_name: isProject ? '' : val.type_name
+        name: val.name,
+        category: val.category
       }
     },
     handleDialogClose() {
@@ -138,10 +163,67 @@ export default {
     handleDialogSubmit() {
       this.$refs.dialogForm.validate(valid => {
         if (valid) {
-          console.log('dialogForm')
+          if (this.dialogType === 'create') {
+            this.fetchCreateType()
+          } else {
+            const params = { ...this.form }
+            delete params.tag
+            params.type_id = this.selectedId
+            this.fetchUpdateType(params, 'name')
+          }
         } else {
           return false
         }
+        this.handleDialogClose()
+      })
+    },
+    statusChange(val) {
+      // console.log(val)
+      this.fetchUpdateType({
+        type_id: val.id,
+        status: val.status
+      }, 'status')
+    },
+    fetchCreateType() {
+      const params = { ...this.form }
+      !params.category && (params.category = 0)
+      params.type = this.activeName === '0' ? 0 : 1
+      createType(params).then((res) => {
+        if (res.code === 0 && res.data && res.data.id) {
+          this.fetchTypeList()
+          this.$message.success('新建类型成功')
+        } else {
+          this.$message.error('新建类型失败')
+        }
+      }).catch(() => {
+        this.$message.error('新建类型失败')
+      })
+    },
+    fetchUpdateType(data, type) {
+      const msg = type === 'status' ? '更改状态' : '更改类型名称'
+      updateType(data).then((res) => {
+        if (res.code === 0 && res.data && res.data.status) {
+          this.fetchTypeList()
+          this.$message.success(msg + '成功')
+        } else {
+          this.$message.error(msg + '失败')
+        }
+      }).catch(() => {
+        this.$message.error(msg + '失败')
+      })
+    },
+    fetchTypeList() {
+      const params = {
+        type: this.activeName === '0' ? 0 : 1,
+        page: 1,
+        limit: 10
+      }
+      getTypeList(params).then((res) => {
+        if (res.code === 0 && res.data && Array.isArray(res.data.data)) {
+          const data = res.data.data
+          if (this.activeName === '0') this.projectTableOptions.data = data
+          else this.contentTableOptions.data = data
+        }
       })
     }
   }