知识分类解决

src/api/knowledge/classify.js

@@ -6,7 +6,16 @@ export const returnData = {};
 returnData.baseUrl= apiCommonUrl
 
 // 分类首页(带分页)
-returnData.findAllKnowledgeCategory = returnData.baseUrl + '/knowledgeCategory/findAllKnowledgeCategory'
+returnData.findAllKnowledge = returnData.baseUrl + '/knowledgeCategory/findAllKnowledgeCategory'
+
+// 分类新增/修改
+returnData.findAllKnowledgeCategory=function (parameter) {
+  var url= returnData.baseUrl + '/knowledgeCategory/findAllKnowledgeCategory'
+  return rxAjax.postJson(url,parameter).then (res => {
+    return res
+  })
+}
+
 
 // 分类新增/修改
 returnData.save=function (parameter) {

src/views/modules/knowledge/warehouse/knowledgeClassList.vue

@@ -12,7 +12,7 @@
                       class="form-item-style"
                       label="分类名称"
                       name="name">
-                      <a-input class="set-input" v-model="queryParam.name" placeholder="请输入"/>
+                      <a-input class="set-input" v-model="queryParam.params.name" placeholder="请输入"/>
                     </a-form-item>
                   <div style="display:flex;justify-content:flex-end;margin-top: 8px;">
                     <a-button @click="handleResetClick">重置</a-button>
@@ -24,33 +24,70 @@
             </div>
           </div>
         </div>
-        <rx-grid
-          ref="classifyRef"
-          class="table-style"
-          style="background: #fff"
-          :columns="columns"
-          :url="api.findAllKnowledgeCategory"
-          :queryParam="queryParam"
-          data-field="result.data"
-          :defaultPageSize="10"
-          :heightAuto="true"
-          :pageSizeOptions="['10','20','30','40']"
-          idField="pkId"
-        >
-          <template slot="name" slot-scope="{text}">
-              <div style="white-space: nowrap">{{ text }}</div>
-              <!-- <div style="white-space: nowrap;overflow-x: scroll;">{{ text }}</div> -->
-          </template>
-          <template slot="action" slot-scope="{text,record,index}">
-            <rx-button class="clearBtn" alias="classificationEdit" :butn-icon="'none'" v-if="record.isSys != 1" @click="handleUpdateClassifyClick(record)">编辑</rx-button>
-            <rx-button class="clearBtn" alias="classificationLook" :butn-icon="'none'" @click="handleJumpKnowledgeManage(record)">查看知识</rx-button>
-            <template v-if="isShowButton">
-              <rx-button v-if="index != (getDataLength(record) - 1)" class="clearBtn" alias="classificationRise" :butn-icon="'none'"  @click="handleActionClick(record,false)">下降</rx-button>
-              <rx-button v-if="index != 0" class="clearBtn" alias="classificationRise" :butn-icon="'none'" @click="handleActionClick(record,true)">上升</rx-button>
+        <div>
+          <div class="frontLoading" v-if="loading">
+            <span style="display: inline-block">
+              <a-spin />
+              <span style="color:rgba(0, 0, 0, 0.5);margin-left: 5px;font-size: 14px;">加载中...</span>
+            </span>
+          </div>
+          <rx-grid
+            ref="classifyRef"
+            class="table-style"
+            style="background: #fff"
+            :columns="columns"
+            :dataSource="dataSource"
+            :heightAuto="true"
+            :showPage="false"
+            idField="pkId"
+          >
+            <template slot="name" slot-scope="{text}">
+                <div style="white-space: nowrap">{{ text }}</div>
+            </template>
+            <template slot="action" slot-scope="{text,record,index}">
+              <rx-button class="clearBtn" alias="classificationEdit" :butn-icon="'none'" v-if="record.isSys != 1" @click="handleUpdateClassifyClick(record)">编辑</rx-button>
+              <rx-button class="clearBtn" alias="classificationLook" :butn-icon="'none'" @click="handleJumpKnowledgeManage(record)">查看知识</rx-button>
+              <template v-if="isShowButton">
+                <rx-button v-if="index != (getDataLength(record) - 1)" class="clearBtn" alias="classificationRise" :butn-icon="'none'"  @click="handleActionClick(record,false)">下降</rx-button>
+                <rx-button v-if="index != 0" class="clearBtn" alias="classificationRise" :butn-icon="'none'" @click="handleActionClick(record,true)">上升</rx-button>
+              </template>
+              <rx-button class="clearBtn" alias="classificationDel" :butn-icon="'none'" v-if="record.isSys != 1" @click="handleDeleteClick(record)">删除</rx-button>
             </template>
-            <rx-button class="clearBtn" alias="classificationDel" :butn-icon="'none'" v-if="record.isSys != 1" @click="handleDeleteClick(record)">删除</rx-button>
-          </template>
-        </rx-grid>
+          </rx-grid>
+        </div>
+        <div class="page-style">
+          <div style="display:flex;align-items: center;">
+            <a-pagination
+              v-model="queryParam.pageNo"
+              :total="dataTotal"
+              :page-size="queryParam.pageSize"
+              @change="onChange"
+              >
+            </a-pagination>
+            <div>
+              <a-select v-model="chooseStrip" style="width: 90px;margin: 0 8px;" @change="handleShowSizeChange">
+                <a-select-option v-for="(item,index) in pageStrip" :key="index" :value="item.value">
+                  {{item.label}}
+                </a-select-option>
+              </a-select>
+            </div>
+            <div @click="handleReloadClick">
+              <img style="width: 32px;height: 32px;cursor: pointer;" :src="reload" alt="">
+            </div>
+            <div style="margin-left: 8px;">
+              跳转到
+              <a-select v-model="chooseNumber" allowClear style="width: 70px;margin: 0 6px;" @change="onChange">
+                <a-select-option v-for="item in pageNumber" :key="item" :value="item">
+                  {{item}}
+                </a-select-option>
+              </a-select>
+              页
+            </div>
+          </div>
+          <div>
+            <span>每页{{ queryParam.pageSize }}条, 共{{ dataTotal }}条</span>
+          </div>
+        </div>
       </rx-fit>
       <a-modal v-model="knowledgeShow" 
                :title="title" 
@@ -86,8 +123,9 @@
 import breadcrumb from '../components/breadcrumb.vue'
 import api from '@/api/knowledge/classify'
 import { getCategoryId, getChildrenLength, hideChooseLevel } from '../aJs/getClassifyTree'
-import SessionCache from '../aJs/cache'
+import reload from '@/assets/img/reload.png'
 import mixin from "../aMixin/mixin"
+import { off } from 'process'
 const classifyMixin = new mixin('classify')
 export default {
   components: {
@@ -97,18 +135,37 @@ export default {
   data() {
     return {
       api,
+      reload,
+      loading: false,
       saveLoading: false,
       title: '',
       knowledgeShow: false,
-      queryParam: {
+      queryfRorParam: {
         name: ''
       },
+      queryParam: {
+        pageNo: 1,
+        pageSize: 10,
+        params: { name: '' },
+        sortField: '',
+        sortOrder: "asc"
+      },
+      dataTotal: 0,
+      dataSource: [],
+      chooseStrip: 10,
+      pageStrip: [
+        {value: 10, label: '10条/页'},
+        {value: 20, label: '20条/页'},
+        {value: 30, label: '30条/页'},
+        {value: 40, label: '40条/页'}
+      ],
+      chooseNumber: 1,
+      pageNumber: [],
       columns:[
         {
           title: 'ID',
           dataIndex: 'pkId',
           align: 'center',
-          width: 200,
         },
         {
           title: '分类名称',
@@ -120,13 +177,11 @@ export default {
           title: '操作人',
           dataIndex: 'operatorName',
           align: 'center',
-          width: 200,
         },
         {
           title: '操作时间',
           dataIndex: 'updateTime',
           align: 'center',
-          width: 200,
         },
         { 
           title: '操作',
@@ -191,11 +246,11 @@ export default {
     }
   },
   created() {
+    this.getClassifyData(false)
     this.init()
-    SessionCache.setCache('maxLevel', 0)
   },
   mounted() {
-    console.log(1111111111)
+    let that = this
     setInterval(() => {
       document.querySelectorAll('.ant-table-row-expand-icon').forEach(el => {
         el.onclick = function() {
@@ -203,10 +258,10 @@ export default {
           let className = el.previousElementSibling.getAttribute('class')
           let level = className.charAt(className.length - 1)
           
-          let maxLevel = SessionCache.getCache('maxLevel')
+          let maxLevel = that.maxLevel
           if(maxLevel > level) return    
           // that.maxLevel = level
-          SessionCache.setCache('maxLevel', parseInt(level))
+          that.maxLevel = level
           let computed = 20*level + 25 + 68 + 160
           document.querySelectorAll('.ant-table-row td:nth-child(2)').forEach(item => {
             item.style.width = computed + 'px'
@@ -220,11 +275,37 @@ export default {
     }, 1000)
   },
   methods: {
+    getClassifyData(flag) {
+      this.loading = true
+      api.findAllKnowledgeCategory(this.queryParam).then(res => {
+        if(res.code == 200) {
+          this.dataTotal = res.result.totalCount
+          this.dataSource = res.result.data
+          let stripNum = Math.ceil(res.result.totalCount / this.queryParam.pageSize)
+          let arr = Array.from({length: stripNum}).map((item, index) => {
+            return index+1
+          })
+          this.pageNumber = arr
+          if(flag) {
+            this.$nextTick(() => {
+              let maxLevel = this.maxLevel
+              if(maxLevel == 0) return
+              let computed = 20*maxLevel + 25 + 68 + 160
+              document.querySelectorAll('.ant-table-row td:nth-child(2)').forEach(item => {
+                item.style.width = computed + 'px'
+              })
+            })
+          }
+          this.loading = false
+        }
+      })
+    },
     async init() {
       let res = await api.getAllByCategoryId()
       this.classifyList = res.data.children
       this.classifyLevelList = JSON.parse(JSON.stringify(this.classifyList))
     },
+
     // 格式化数据 disabled 编辑三分类时,只有一级分类没有二级分类,则不可选一级分类
     // getData(data,level) {
     //   data.forEach((element) => {
@@ -241,7 +322,7 @@ export default {
     // },
     // 搜索
     handleSearchClick() {
-      this.isShowButton = this.queryParam.name ? false : true
+      this.isShowButton = this.queryParam.params.name ? false : true
       this.reloadTable()
     },
     handleAddClassClick() {
@@ -311,10 +392,29 @@ export default {
         path: '/knowledge/knowledgeManageList',
         query: {pkId: record.pkId}
       })
+    },
+    // 刷新
+    handleReloadClick() {
+      this.queryParam.pageNo = 1
+      this.queryParam.pageSize = 10;
+      this.chooseNumber = 1
+      this.getClassifyData(true)
+    },
+    // 每页条数
+    handleShowSizeChange(pageSize) {
+      this.queryParam.pageNo = 1
+      this.queryParam.pageSize = pageSize;
+      this.getClassifyData(true)
+    },
+    // 跳转
+    onChange(pageNumber) {
+      if(!pageNumber) return
+      this.queryParam.pageNo = pageNumber
+      this.getClassifyData(true)
     },
      // 重新加载表格
     reloadTable() {
-      this.$refs.classifyRef.loadData()
+      this.getClassifyData(true)
     }
   }
 }
@@ -350,7 +450,7 @@ export default {
     }
   }
   .table-style {
-    padding: 20px;
+    padding: 20px 20px 12px;
     min-height: 400px;
     .clearBtn {
       background: none;
@@ -363,6 +463,15 @@ export default {
   }
 
 }
+.page-style {
+  width: 100%;
+  border-bottom: 20px solid #fff;
+  padding: 0 20px;
+  background-color: #fff;
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+} 
 .show-other{
 	width: 100%;
 	animation:show-other-search 0.8s;
@@ -373,6 +482,20 @@ export default {
 .set-input {
   width:180px;
 }
+
+.frontLoading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(248,248,248,0.5);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  text-align: center;
+  font-size: 16px;
+  z-index: 10000;
+}
+
 @keyframes show-other-search{
 	0%{opacity:0;}
   50%{opacity:0.8;}
@@ -383,6 +506,7 @@ export default {
 <style scoped>
 /deep/   .divdefault {
   position: inherit!important;
+  overflow: inherit!important;
 }
 /deep/ .ant-table-row-expand-icon{
   position: relative;
@@ -411,4 +535,7 @@ export default {
   white-space: nowrap!important;
   overflow-x: scroll;
 } */
+/deep/ .ant-pagination-options {
+  margin-left: 8px;
+}
 </style>