设置模块调试接口

src/api/settings.js

@@ -36,12 +36,48 @@ export function updateRole(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 })
+  return httpRequest.get('/api/cms/admin/v1/users', { params })
+}
+/**
+ * 创建员工
+ */
+export function createStaff(data) {
+  return httpRequest.post('/api/cms/admin/v1/user/create', data)
+}
+/**
+ * 更新角色
+ */
+export function updateStaff(data) {
+  return httpRequest.put(`/api/cms/admin/v1/user/${data.type_id}/update`, data)
+}
+
+/* ------------------------------------项目管理------------------------------------ */
+/**
+ * 获取项目列表
+ * @param {string} name 项目名称
+ * @param {string} type_id 项目id
+ * @param {number} status 创建的时候是否展示：0不展示，1展示
+ */
+export function getProjectList(params) {
+  return httpRequest.get('/api/cms/admin/v1/projects', { params })
+}
+/**
+ * 创建项目
+ */
+export function createProject(data) {
+  return httpRequest.post('/api/cms/admin/v1/project/create', data)
+}
+/**
+ * 更新项目
+ */
+export function updateProject(data) {
+  return httpRequest.put(`/api/cms/admin/v1/project/${data.type_id}/update`, data)
 }
 /* ------------------------------------类型管理------------------------------------ */
 /**
@@ -58,18 +94,8 @@ 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)
 }
-
-/**
- * 获取项目列表
- * @param {string} name 项目名称
- * @param {string} type_id 项目id
- * @param {number} status 创建的时候是否展示：0不展示，1展示
- */
-export function getProjectList(params) {
-  return httpRequest.get('/api/cms/admin/v1/projects', { params })
-}

src/components/TableList.vue

@@ -35,8 +35,8 @@
       <div class="table-list-hd-aside"><slot name="header-aside" /></div>
     </div>
     <slot></slot>
-    <div class="table-list-bd">
-      <el-table :data="dataList" size="mini" v-loading="loading" v-bind="$attrs" v-on="$listeners">
+    <div class="table-list-bd" :style="{height: bodyHeight}">
+      <el-table :data="dataList" size="mini" v-loading="loading" v-bind="$attrs" v-on="$listeners" height="calc(100% - 40px)">
         <template v-for="item in columns">
           <el-table-column v-bind="item" :key="item.prop">
             <template v-slot:default="scope" v-if="item.slots">
@@ -51,7 +51,7 @@
         :page-sizes="[10, 20, 30, 50, 100]"
         :page-size="page.size"
         :total="page.total"
-        :hide-on-single-page="true"
+        :hide-on-single-page="false"
         @size-change="pageSizeChange"
         @current-change="fetchList"
         v-if="hasPagination"
@@ -69,6 +69,8 @@ export default {
     remote: { type: Object, default: () => ({}) },
     // 筛选
     filters: { type: Array, default: () => [] },
+    // 列表是否有多选
+    tableSelection: { type: Boolean, default: false },
     // 列表项
     columns: { type: Array, default: () => [] },
     // 列表数据
@@ -76,7 +78,8 @@ export default {
     // 是否含有翻页
     hasPagination: { type: Boolean, default: true },
     // 每页多少条数据
-    limit: { type: Number, default: 20 }
+    limit: { type: Number, default: 20 },
+    bodyHeight: { type: String, default: '100%' }
   },
   data() {
     return {
@@ -172,6 +175,7 @@ export default {
 <style lang="scss">
 .table-list {
   padding: 10px;
+  height:calc(100% - 20px)
 }
 .table-list-hd {
   display: flex;
@@ -179,8 +183,11 @@ export default {
 .table-list-filter {
   flex: 1;
 }
+// .table-list-bd {
+//   height:calc(100% - 50px)
+// }
 .table-list-pagination {
-  padding: 20px 0;
+  padding: 10px 0;
   text-align: right;
 }
 </style>

src/pages/settings/project/index.vue

 <template>
   <div class="project page_container">
-    <table-list v-bind="tableOptions" ref="tabList">
+    <table-list v-bind="tableOptions" ref="tabList" @selection-change="selectionChange">
       <template #header-aside>
         <el-button type="primary" size="mini" @click="handleCreate">新建项目</el-button>
       </template>
@@ -23,16 +23,16 @@
           <el-form-item label="项目名称" prop="name">
             <el-input v-model="form.name" size="small"></el-input>
           </el-form-item>
-          <el-form-item label="项目简称" prop="abbr">
-            <el-input v-model="form.abbr" size="small"></el-input>
+          <el-form-item label="项目简称" prop="short_name">
+            <el-input v-model="form.short_name" size="small"></el-input>
           </el-form-item>
-          <el-form-item label="项目类型" prop="type">
-            <el-select v-model="form.type" placeholder="请选择项目类型" size="small" style="width:100%;">
+          <el-form-item label="项目类型" prop="type_id">
+            <el-select v-model="form.type_id" placeholder="请选择项目类型" size="small" style="width:100%;">
               <el-option :label="item.label" :value="item.id" v-for="item in projectTypeList" :key="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label="项目网址" prop="website">
-            <el-input v-model="form.website" size="small"></el-input>
+          <el-form-item label="项目网址" prop="project_uri">
+            <el-input v-model="form.project_uri" size="small"></el-input>
           </el-form-item>
           <el-form-item label="广告类型" style="margin-bottom:0;">
             <el-checkbox :indeterminate="adType.isIndeterminate" v-model="adType.checkAll" @change="val => handleCheckAllChange(val, 'adType')">全选</el-checkbox>
@@ -45,14 +45,14 @@
             <el-checkbox :indeterminate="articleType.isIndeterminate" v-model="articleType.checkAll" @change="val => handleCheckAllChange(val, 'articleType')">全选</el-checkbox>
             <div style="margin: 2px 0;"></div>
             <el-checkbox-group v-model="form.articleType" @change="val => handleCheckedChange(val, 'articleType')">
-              <el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
+              <el-checkbox v-for="item in articleTypeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
             </el-checkbox-group>
           </el-form-item>
           <el-form-item label="图文类型" style="margin-bottom:0;">
             <el-checkbox :indeterminate="imageTextType.isIndeterminate" v-model="imageTextType.checkAll" @change="val => handleCheckAllChange(val, 'imageTextType')">全选</el-checkbox>
             <div style="margin: 2px 0;"></div>
             <el-checkbox-group v-model="form.imageTextType" @change="val => handleCheckedChange(val, 'imageTextType')">
-              <el-checkbox v-for="item in typeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
+              <el-checkbox v-for="item in imageTextTypeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
             </el-checkbox-group>
           </el-form-item>
         </el-form>
@@ -66,12 +66,12 @@
 </template>
 <script>
 import TableList from '@/components/TableList'
-import { getProjectList } from '@/api/settings'
+import { getProjectList, createProject } from '@/api/settings'
 const defaultForm = {
   name: '',
-  abbr: '',
-  type: '',
-  website: '',
+  short_name: '',
+  type_id: '',
+  project_uri: '',
   adType: [],
   articleType: [],
   imageTextType: []
@@ -98,14 +98,24 @@ export default {
       form: Object.assign({}, defaultForm),
       rules: {
         name: { required: true, message: '请输入项目名称', trigger: 'blur' },
-        abbr: { required: true, message: '请输入项目简称', trigger: 'blur' },
-        type: { required: true, message: '请输入项目类型', trigger: 'blur' },
-        website: { required: true, message: '请输入项目网址', trigger: 'blur' }
+        short_name: { required: true, message: '请输入项目简称', trigger: 'blur' },
+        type_id: { required: true, message: '请输入项目类型', trigger: 'blur' },
+        project_uri: { required: true, message: '请输入项目网址', trigger: 'blur' }
       },
-      typeList: [
-        { id: '111', name: 'banner广告' },
-        { id: '122', name: '正文区广告' },
-        { id: '1331', name: '侧边栏广告' }
+      adTypeList: [
+        { id: '111', name: 'banner广告A' },
+        { id: '122', name: '正文区广告A' },
+        { id: '1331', name: '侧边栏广告a' }
+      ],
+      articleTypeList: [
+        { id: '111', name: 'banner广告b' },
+        { id: '122', name: '正文区广告b' },
+        { id: '1331', name: '侧边栏广告b' }
+      ],
+      imageTextTypeList: [
+        { id: '111', name: 'banner广告c' },
+        { id: '122', name: '正文区广告c' },
+        { id: '1331', name: '侧边栏广告c' }
       ],
       adType: {
         isIndeterminate: false,
@@ -159,15 +169,17 @@ export default {
           }
         ],
         columns: [
-          { prop: 'id', label: '项目ID', slots: 'project_id' },
-          { prop: 'name', label: '项目名称' },
-          { prop: 'short_name', label: '项目简称' },
-          { prop: 'type_id', label: '项目类型' },
-          { prop: 'project_uri', label: '项目网址' },
-          { prop: 'sso_user.nickname', label: '创建人' },
-          { prop: 'created_at', label: '创建时间' },
-          { prop: 'status', label: '状态', slots: 'status' }
-        ]
+          { prop: 'selection', label: '', type: 'selection', minWidth: '50px', fixed: 'left' },
+          { prop: 'id', label: '项目ID', slots: 'project_id', minWidth: '160px', fixed: 'left' },
+          { prop: 'name', label: '项目名称', minWidth: '150px', fixed: 'left' },
+          { prop: 'short_name', label: '项目简称', minWidth: '150px' },
+          { prop: 'type.name', label: '项目类型', minWidth: '150px' },
+          { prop: 'project_uri', label: '项目网址', minWidth: '150px' },
+          { prop: 'sso_user.nickname', label: '创建人', minWidth: '150px' },
+          { prop: 'created_at', label: '创建时间', minWidth: '150px' },
+          { prop: 'status', label: '状态', slots: 'status', minWidth: '150px', fixed: 'right' }
+        ],
+        bodyHeight: 'calc(100% - 50px)'
       }
     }
   },
@@ -202,6 +214,22 @@ export default {
           return false
         }
       })
+    },
+    selectionChange(val) {
+      console.log(val)
+    },
+    fetchCreateProject() {
+      const data = {
+        name: this.form.role_name
+      }
+      createProject(data).then((res) => {
+        if (res.code === 0 && res.message === 'SUCCESS') {
+          this.fetchRoleList()
+          this.$message.success('创建角色成功')
+        } else {
+          this.$message.error('创建角色失败')
+        }
+      })
     }
   }
 }

src/pages/settings/role/index.vue

@@ -365,4 +365,16 @@ export default {
 .sub-title{
   font-size:16px;
 }
+.el-tabs{
+  height:100%;
+}
+.el-tabs ::v-deep.el-tabs__content{
+  height:calc(100% - 56px);
+}
+.el-tab-pane{
+  height:100%;
+}
+.table-list .table-list-bd{
+  height:100%;
+}
 </style>

src/pages/settings/staff/index.vue

@@ -209,7 +209,8 @@ export default {
           { prop: 'status', label: '状态', slots: 'status' },
           { prop: 'x', label: '操作', slots: 'tools' }
         ],
-        data: [{ name: 'a', role: '超级管理员', phone: '123812312321', email: 'dsfdsxxx' }]
+        data: [{ name: 'a', role: '超级管理员', phone: '123812312321', email: 'dsfdsxxx' }],
+        bodyHeight: 'calc(100% - 50px)'
       }
     }
   },

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" @tab-click="handleTabClick">
+    <el-tabs v-model="activeName" type="card">
       <el-tab-pane label="项目类型" name="0" lazy>
-        <table-list v-bind="projectTableOptions" ref="tabList">
+        <table-list v-bind="projectTableOptions" ref="tableList">
           <!-- 项目Id -->
           <template v-slot:table-id="{ row }"><p class="details-handle" @click="handleDetails(row)">{{row.id}}</p></template>
           <!-- 创建人 -->
@@ -15,7 +15,7 @@
         </table-list>
       </el-tab-pane>
       <el-tab-pane label="内容类型" name="1" lazy>
-        <table-list v-bind="contentTableOptions" ref="tabList">
+        <table-list v-bind="contentTableOptions" ref="tableList">
           <!-- 项目Id -->
           <template v-slot:table-id="{ row }"><p class="details-handle" @click="handleDetails(row)">{{row.id}}</p></template>
           <!-- 创建人 -->
@@ -80,12 +80,13 @@ export default {
           params: { type: 0 }
         },
         columns: [
-          { prop: 'id', label: '项目类型ID', slots: 'table-id' },
-          { prop: 'name', label: '项目类型' },
-          { prop: 'sso_user', label: '创建人', slots: 'table-creater' },
-          { prop: 'created_at', label: '创建时间' },
-          { prop: 'tag', label: '参数ID' },
-          { prop: 'status', label: '状态', slots: 'table-status' }
+          { prop: 'selection', label: '', type: 'selection', minWidth: '50px' },
+          { prop: 'id', label: '项目类型ID', slots: 'table-id', minWidth: '150px' },
+          { prop: 'name', label: '项目类型', minWidth: '150px' },
+          { prop: 'sso_user', label: '创建人', slots: 'table-creater', minWidth: '100px' },
+          { prop: 'created_at', label: '创建时间', minWidth: '150px' },
+          { prop: 'tag', label: '参数ID', minWidth: '80px' },
+          { prop: 'status', label: '状态', slots: 'table-status', minWidth: '150px' }
         ],
         data: []
       },
@@ -96,15 +97,15 @@ export default {
           params: { type: 1 }
         },
         columns: [
-          { prop: 'id', label: '内容ID', slots: 'table-id' },
-          { prop: 'name', label: '类型名称' },
-          { prop: 'category', label: '内容类型', slots: 'table-category' },
+          { prop: 'selection', label: '', type: 'selection', minWidth: '50px' },
+          { prop: 'id', label: '内容ID', slots: 'table-id', minWidth: '150px' },
+          { prop: 'name', label: '类型名称', minWidth: '150px' },
+          { prop: 'category', label: '内容类型', slots: 'table-category', minWidth: '80px' },
           { prop: 'sso_user', label: '创建人', slots: 'table-creater' },
-          { prop: 'created_at', label: '创建时间' },
-          { prop: 'tag', label: '参数ID' },
-          { prop: 'status', label: '状态', slots: 'table-status' }
-        ],
-        data: []
+          { prop: 'created_at', label: '创建时间', minWidth: '150px' },
+          { prop: 'tag', label: '参数ID', minWidth: '100px' },
+          { prop: 'status', label: '状态', slots: 'table-status', minWidth: '150px' }
+        ]
       },
       contentTypeList: [
         { id: 1, name: '文章' },
@@ -139,12 +140,12 @@ export default {
     }
   },
   created() {
-    this.fetchTypeList()
+    // this.fetchTypeList()
   },
   methods: {
-    handleTabClick() {
-      this.fetchTypeList()
-    },
+    // handleTabClick() {
+    //   this.fetchTypeList()
+    // },
     handleCreate() {
       this.dialogType = 'create'
       this.dialogVisible = true
@@ -192,10 +193,10 @@ export default {
       params.type = this.activeName === '0' ? 0 : 1
       createType(params).then((res) => {
         if (res.code === 0 && res.data && res.data.id) {
-          this.fetchTypeList()
+          this.$refs.tableList.refetch()
           this.$message.success('新建类型成功')
         } else {
-          this.$message.error('新建类型失败')
+          this.$message.error(res.message || '新建类型失败')
         }
       }).catch(() => {
         this.$message.error('新建类型失败')
@@ -205,28 +206,14 @@ export default {
       const msg = type === 'status' ? '更改状态' : '更改类型名称'
       updateType(data).then((res) => {
         if (res.code === 0 && res.data && res.data.status) {
-          this.fetchTypeList()
           this.$message.success(msg + '成功')
+          this.$refs.tableList.refetch()
         } else {
-          this.$message.error(msg + '失败')
+          this.$message.error(res.message || 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
-        }
-      })
     }
   }
 }
@@ -243,4 +230,16 @@ export default {
   top:16px;
   z-index:1;
 }
+.el-tabs{
+  height:100%;
+}
+.el-tabs ::v-deep.el-tabs__content{
+  height:calc(100% - 56px);
+}
+.el-tab-pane{
+  height:100%;
+}
+.table-list .table-list-bd{
+  height:100%;
+}
 </style>