CN-1016 知识库支持卡片和table切换

src/components/table/setting/KnowledgeBaseTableForRow.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-table
+      id="knowledgeBaseTable"
+      ref="dataTable"
+      :data="tableData"
+      :height="height"
+      border
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
+  >
+    <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+    </el-table-column>
+    <el-table-column
+        v-for="(item, index) in customTableTitles"
+        :key="`col-${index}`"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sort-orders="['ascending', 'descending']"
+        :sortable="item.sortable"
+        :width="`${item.width}`"
+        class="data-column"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template  #default="scope" :column="item">
+        <template v-if="item.prop === 'name'">
+          <template v-if="scope.row.i18n">
+            <span>{{$t(scope.row.i18n)}}</span>
+          </template>
+          <template v-else-if="scope.row.name">
+            <span>{{scope.row.name}}</span>
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'tagType'">
+          <span class="type-tag">{{tagTypeText(scope.row[item.prop])}}</span>
+        </template>
+        <template v-else-if="item.prop === 'utime' || item.prop === 'ctime'">
+          <template v-if="scope.row[item.prop]">
+            {{dateFormatByAppearance(scope.row[item.prop])}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
+          <template v-if="scope.row[item.prop]">
+            {{scope.row[item.prop].username || '-'}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'remark'">
+          <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        </template>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { knowledgeBaseType } from '@/utils/constants'
+export default {
+  name: 'KnowledgeBaseTableForRow',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 100,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.roles.name'),
+          prop: 'tagName',
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'tagType',
+          minWidth: 80,
+          show: true
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        },
+        {
+          label: this.$t('overall.createdBy'),
+          prop: 'cuser',
+          show: true
+        },
+        {
+          label: this.$t('config.user.createTime'),
+          prop: 'ctime',
+          show: false,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.updatedBy'),
+          prop: 'uuser',
+          show: false
+        },
+        {
+          label: this.$t('overall.updateTime'),
+          prop: 'utime',
+          show: false,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  computed: {
+    tagTypeText () {
+      return function (type) {
+        const t = knowledgeBaseType.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+  }
+}
+</script>

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -35,7 +35,7 @@
 import table from '@/mixins/table'
 import { knowledgeBaseType } from '@/utils/constants'
 export default {
-  name: 'knowledgeBaseTable',
+  name: 'knowledgeBaseTableForCard',
   mixins: [table],
   props: {
     isSelectedStatus: {

src/mixins/data-list.js

@@ -20,7 +20,7 @@ export default {
       pageObj: { // 分页对象
         pageNo: 1,
         pageSize: defaultPageSize,
-        total: null//total为0时，elment分页组件pagination,修改当前页无效。修改为null即可解决此问题
+        total: null// total为0时，elment分页组件pagination,修改当前页无效。修改为null即可解决此问题
       },
       /* 工具参数 */
       tools: {

src/views/setting/KnowledgeBase.vue

@@ -3,52 +3,84 @@
     <div class="top-title">
       {{$t('overall.knowledgeBase')}}
     </div>
-    <div class="knowledge-base__content" style="">
+    <div class="knowledge-base__content" >
       <div class="left-filter" style="">
           <knowledge-filter ref="knowledgeFilter"
                   @reload="reload"
                   @clearList="clearList"></knowledge-filter>
       </div>
-      <div class="right-list-card" style="">
+      <div class="right-list-card" >
-        <div class="top-tools" style="">
+        <div class="top-tools" >
-          <button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10 top-tool-btn--create"
+          <div class="top-tools__left">
-                  style="width:72px;"
+            <button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10 top-tool-btn--create"
-                  @click="jumpToCreatePage">
+                    style="width:72px;"
-            <i class="cn-icon-xinjian cn-icon"></i>
+                    @click="jumpToCreatePage">
-            <span>{{$t('overall.create')}}</span>
+              <i class="cn-icon-xinjian cn-icon"></i>
-          </button>
+              <span>{{$t('overall.create')}}</span>
-          <button id="knowledge-base-edit" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
-                  style="width:72px;"
-                  @click="toSelect">
-            <i class="cn-icon-select cn-icon" ></i>
-            <span>{{$t('overall.select')}}</span>
-          </button>
-          <button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
-                  style="width:72px;" :disabled="disableDelete"
-                  @click="toDelete">
-            <i class="cn-icon-delete cn-icon"></i>
-            <span>{{$t('overall.delete')}}</span>
-          </button>
-          <div class="top-tool-search margin-l-10" style="">
-            <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
-            <button class="top-tool-btn  top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
-              <i class="el-icon-search"></i>
             </button>
+            <button v-if="listMode === 'block'" id="knowledge-base-edit" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
+                    style="width:72px;"
+                    @click="toSelect">
+              <i class="cn-icon-select cn-icon" ></i>
+              <span>{{$t('overall.select')}}</span>
+            </button>
+            <button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
+                    style="width:72px;" :disabled="disableDelete"
+                    @click="toDelete">
+              <i class="cn-icon-delete cn-icon"></i>
+              <span>{{$t('overall.delete')}}</span>
+            </button>
+            <div class="top-tool-search margin-l-10" style="">
+              <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
+              <button class="top-tool-btn  top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
+                <i class="el-icon-search"></i>
+              </button>
+            </div>
+          </div>
+          <div class="top-tools__right" >
+            <el-button-group size="mini">
+              <el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
+              <el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
+            </el-button-group>
           </div>
         </div>
-        <div class="cards" style="" >
+        <!-- 列表式 -->
-          <knowledge-base-table
+        <template v-if="listMode === 'list'">
-                  ref="dataTable"
+          <div class="list-mode__row" >
-                  v-loading="tools.loading"
+            <knowledge-base-table-for-row
-                  :api="url"
+                    ref="dataTable"
-                  :custom-table-title="tools.customTableTitle"
+                    v-loading="tools.loading"
-                  :table-data="tableData"
+                    height="100%"
-                  :is-selected-status="isSelectedStatus"
+                    :api="url"
-                  :all-count="18"
+                    :custom-table-title="tools.customTableTitle"
-                  @delete="toDelete"
+                    :table-data="tableData"
-                  @checkboxStatusChange="checkboxStatusChange"
+                    :is-selected-status="isSelectedStatus"
-          ></knowledge-base-table>
+                    :all-count="18"
-        </div>
+                    @delete="toDelete"
+                    @selectionChange="selectionChange"
+                    @edit="edit"
+                    @orderBy="tableDataSort"
+                    @reload="getTableData"
+            ></knowledge-base-table-for-row>
+          </div>
+        </template>
+        <!-- 卡片式 -->
+        <template v-else-if="listMode === 'block'">
+          <div class="list-mode__card" >
+            <knowledge-base-table-for-card
+                    ref="dataTable"
+                    v-loading="tools.loading"
+                    :api="url"
+                    :custom-table-title="tools.customTableTitle"
+                    :table-data="tableData"
+                    :is-selected-status="isSelectedStatus"
+                    :all-count="18"
+                    @delete="toDelete"
+                    @checkboxStatusChange="checkboxStatusChange"
+            ></knowledge-base-table-for-card>
+          </div>
+        </template>
+
         <div class="knowledge-pagination" style="">
           <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
         </div>
@@ -93,7 +125,8 @@
 <script>
 import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/data-list'
-import KnowledgeBaseTable from '@/components/table/setting/KnowledgeBaseTable'
+import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
+import KnowledgeBaseTableForRow from '@/components/table/setting/KnowledgeBaseTableForRow'
 import { api } from '@/utils/api'
 import axios from 'axios'
 import KnowledgeFilter from '@/views/setting/KnowledgeFilter'
@@ -102,7 +135,8 @@ export default {
   name: 'knowledgeBase',
   components: {
     cnDataList,
-    KnowledgeBaseTable,
+    KnowledgeBaseTableForCard,
+    KnowledgeBaseTableForRow,
     KnowledgeFilter
   },
   mixins: [dataListMixin],
@@ -114,7 +148,8 @@ export default {
       keyWord: '',
       showConfirmDialog: false,
       delItemList: [],
-      secondBatchDeleteObjs: []
+      secondBatchDeleteObjs: [],
+      listMode: 'list' // 列表的模式，list|block
     }
   },
   watch: {