update

src/api/settings.js

@@ -46,6 +46,7 @@ export function getStaffList(params) {
 /* ------------------------------------类型管理------------------------------------ */
 /**
  * 获取类型列表
+ * @param {number} type 0项目类型 1内容类型
  */
 export function getTypeList(params) {
   return httpRequest.get('/api/cms/admin/v1/types', { params })
@@ -61,4 +62,14 @@ export function createType(data) {
  */
 export function updateType(data) {
   return httpRequest.put(`/api/cms/admin/v1/type/${data.type_id}/update`, data)
-}
+}
\ No newline at end of file
+
+/**
+ * 获取项目列表
+ * @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

@@ -9,7 +9,13 @@
               <!-- input -->
               <el-input v-model="params[item.prop]" v-bind="item" clearable v-if="item.type === 'input'" />
               <!-- select -->
-              <el-select v-model="params[item.prop]" clearable v-bind="item" v-if="item.type === 'select'">
+              <el-select
+                v-model="params[item.prop]"
+                clearable
+                v-bind="item"
+                v-if="item.type === 'select'"
+                @change="search"
+              >
                 <template v-for="option in item.options">
                   <el-option
                     :label="option[item.labelKey] || option.label"
@@ -21,7 +27,7 @@
             </el-form-item>
           </template>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" @click="fetchList">搜索</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
             <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
           </el-form-item>
         </el-form>
@@ -30,7 +36,7 @@
     </div>
     <slot></slot>
     <div class="table-list-bd">
-      <el-table :data="dataList" size="mini">
+      <el-table :data="dataList" size="mini" v-loading="loading" v-bind="$attrs" v-on="$listeners">
         <template v-for="item in columns">
           <el-table-column v-bind="item" :key="item.prop">
             <template v-slot:default="scope" v-if="item.slots">
@@ -40,11 +46,15 @@
         </template>
       </el-table>
       <el-pagination
-        :page-sizes="[100, 200, 300, 400]"
-        :page-size="100"
-        layout="total, prev, pager, next, sizes, jumper"
-        :total="400"
         class="table-list-pagination"
+        layout="total, prev, pager, next, sizes, jumper"
+        :page-sizes="[10, 20, 30, 50, 100]"
+        :page-size="page.size"
+        :total="page.total"
+        :hide-on-single-page="true"
+        @size-change="pageSizeChange"
+        @current-change="fetchList"
+        v-if="hasPagination"
       >
       </el-pagination>
     </div>
@@ -62,19 +72,25 @@ export default {
     // 列表项
     columns: { type: Array, default: () => [] },
     // 列表数据
-    data: { type: Array, default: () => [] }
+    data: { type: Array, default: () => [] },
+    // 是否含有翻页
+    hasPagination: { type: Boolean, default: true },
+    // 每页多少条数据
+    limit: { type: Number, default: 20 }
   },
   data() {
     return {
+      loading: false,
       params: this.remote.params || {},
-      dataList: this.data
+      dataList: this.data,
+      page: { total: 0, size: this.limit, currentPage: 1 }
     }
   },
   watch: {
     'remote.params': {
       immediate: true,
       handler(data) {
-        this.params = data
+        this.params = data || {}
       }
     },
     data: {
@@ -95,26 +111,60 @@ export default {
       if (!httpRequest) {
         return
       }
+      // 参数设置
+      let params = this.params
+      // 翻页参数设置
+      if (this.hasPagination) {
+        params.page = this.page.currentPage
+        params.limit = this.page.size
+      }
       // 接口请求之前
       if (beforeRequest) {
-        this.params = beforeRequest(this.params)
+        params = beforeRequest(params)
       }
-      httpRequest(this.params).then(res => {
-        this.dataList = callback ? callback(res) : res
-      })
+      for (const key in params) {
+        if (params[key] === '' || params[key] === undefined || params[key] === undefined) {
+          delete params[key]
+        }
+      }
+      this.loading = true
+      httpRequest(params)
+        .then(res => {
+          const { data, total } = res.data
+          this.page.total = total
+          this.dataList = callback ? callback(data) : data
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 搜索
+    search() {
+      this.page.currentPage = 1
+      this.fetchList()
     },
     // 重置
     reset() {
       // 清空筛选条件
       this.$refs.filterForm.resetFields()
       // 初始化页码
+      this.page.currentPage = 1
       // 刷新列表
       this.fetchList()
     },
     // 刷新
-    refresh(isForce) {
+    refetch(isForce) {
       isForce ? this.reset() : this.fetchList()
+    },
+    // 页数改变
+    pageSizeChange(value) {
+      this.page.currentPage = 1
+      this.page.size = value
+      this.fetchList()
     }
+  },
+  beforeMount() {
+    this.fetchList()
   }
 }
 </script>

src/pages/content-manage/ads/index.vue

@@ -181,7 +181,7 @@ export default {
     },
     handleTabClick() {
       // true 强制刷新
-      this.$refs.tableList.refresh(true)
+      this.$refs.tableList.refetch(true)
     }
   }
 }

src/pages/content-manage/article/index.vue

@@ -175,10 +175,10 @@ export default {
     },
     handleTabClick() {
       // true 强制刷新
-      this.$refs.tableList.refresh(true)
+      this.$refs.tableList.refetch(true)
     }
   }
 }
 </script>
 <style scoped>
-</style>
+</style>
\ No newline at end of file

src/pages/content-manage/image-text/index.vue

@@ -176,10 +176,10 @@ export default {
     },
     handleTabClick() {
       // true 强制刷新
-      this.$refs.tableList.refresh(true)
+      this.$refs.tableList.refetch(true)
     }
   }
 }
 </script>
 <style scoped>
-</style>
+</style>
\ No newline at end of file

src/pages/settings/project/index.vue

@@ -66,6 +66,7 @@
 </template>
 <script>
 import TableList from '@/components/TableList'
+import { getProjectList } from '@/api/settings'
 const defaultForm = {
   name: '',
   abbr: '',
@@ -85,8 +86,8 @@ export default {
         { project_id: '222', project_name: 'kellet' }
       ],
       statusList: [
-        { id: '111', name: '启用' },
-        { id: '222', name: '停用' }
+        { id: '1', name: '启用' },
+        { id: '0', name: '停用' }
       ],
       projectTypeList: [
         { id: '111', label: '学位教育' }
@@ -135,22 +136,23 @@ export default {
     tableOptions() {
       return {
         remote: {
-          params: {}
+          httpRequest: getProjectList,
+          params: { name: '', type_id: '', status: null }
         },
         filters: [
           {
             type: 'select',
             placeholder: '项目',
-            prop: 'project',
+            prop: 'type_id',
             options: this.projectList,
             labelKey: 'project_name',
             valueKey: 'project_id'
           },
-          { type: 'input', placeholder: '项目ID/项目名称', prop: 'id' },
+          { type: 'input', placeholder: '项目ID/项目名称', prop: 'name' },
           {
             type: 'select',
             placeholder: '状态',
-            prop: 'type',
+            prop: 'status',
             options: this.statusList,
             labelKey: 'name',
             valueKey: 'id'
@@ -158,16 +160,13 @@ export default {
         ],
         columns: [
           { prop: 'id', label: '项目ID', slots: 'project_id' },
-          { prop: 'title', label: '项目名称' },
-          { prop: 'abbr_title', label: '项目简称' },
-          { prop: 'type', label: '项目类型' },
-          { prop: 'url', label: '项目网址' },
-          { prop: 'author', label: '创建人' },
-          { prop: 'create_time', label: '创建时间' },
+          { 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' }
-        ],
-        data: [
-          { id: '122', title: '索菲亚', abbr_title: 'sofia', type: '学前教育', url: 'www.baidu.com', author: '张三', create_time: '2021-04-23 09:00:31', status: 1 }
         ]
       }
     }

src/pages/settings/role/index.vue

@@ -85,16 +85,12 @@ export default {
       // 项目类型
       tableOptions: {
         remote: {
-          params: {}
+          httpRequest: getRoleList
         },
         columns: [
           { prop: 'name', label: '角色名称', slots: 'table-role-name' },
           { prop: 'role_owner', label: '角色拥有人' },
           { prop: 'operate', label: '操作', slots: 'table-operate' }
-        ],
-        data: [
-          { id: '123', role_name: '超级管理员', role_owner: '张三', permission: ['setting-function-type-delete', 'setting-menu-type-manage'] },
-          { id: '133', role_name: '普通管理员', role_owner: '李四', permission: ['content-function-acticle-audit'] }
         ]
       },
       dialogVisible: false,
@@ -160,7 +156,6 @@ export default {
   },
   created() {
     this.fetchPermissionList()
-    this.fetchRoleList()
   },
   methods: {
     assignForm() {
@@ -379,4 +374,4 @@ export default {
 .sub-title{
   font-size:16px;
 }
-</style>
+</style>
\ No newline at end of file

src/pages/settings/type/index.vue

@@ -76,7 +76,8 @@ export default {
       // 项目类型
       projectTableOptions: {
         remote: {
-          params: {}
+          httpRequest: getTypeList,
+          params: { type: 0 }
         },
         columns: [
           { prop: 'id', label: '项目类型ID', slots: 'table-id' },
@@ -91,7 +92,8 @@ export default {
       // 内容类型
       contentTableOptions: {
         remote: {
-          params: {}
+          httpRequest: getTypeList,
+          params: { type: 1 }
         },
         columns: [
           { prop: 'id', label: '内容ID', slots: 'table-id' },