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

2023-05-29 13:00:28 +08:00
parent 8ea82d0e34
commit b2c76aa2c7
12 changed files with 779 additions and 291 deletions
--- a/src/components/table/setting/KnowledgeBaseTableForRow.vue
+++ b/src/components/table/setting/KnowledgeBaseTableForRow.vue
@@ -33,21 +33,24 @@
        <div class="col-resize-area"></div>
      </template>
      <template  #default="scope" :column="item">
-        <template v-if="item.prop === 'name'">
+        <template v-if="item.prop === 'name'" >
          <template v-if="scope.row.i18n">
-            <span>{{$t(scope.row.i18n)}}</span>
+            <span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
          </template>
          <template v-else-if="scope.row.name">
-            <span>{{scope.row.name}}</span>
+            <span :title="scope.row[item.prop]">{{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 v-else-if="item.prop === 'category'">
+          <span >{{tagCategoryText(scope.row[item.prop])}}</span>
        </template>
-        <template v-else-if="item.prop === 'utime' || item.prop === 'ctime'">
+        <template v-else-if="item.prop === 'source'">
+          <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
+        </template>
+        <template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
          <template v-if="scope.row[item.prop]">
            {{dateFormatByAppearance(scope.row[item.prop])}}
          </template>
@@ -63,9 +66,18 @@
            <span>-</span>
          </template>
        </template>
-        <template v-else-if="item.prop === 'remark'">
+        <template v-else-if="item.prop === 'description'">
          <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
        </template>
+        <template v-else-if="item.prop === 'status'">
+          <el-switch class="card-enable"
+                     v-model="scope.row['status']"
+                     active-color="#38ACD2"
+                     inactive-color="#C0CEDB"
+                     @change="changeStatus($event,scope.row.knowledgeId)"
+          >
+          </el-switch>
+        </template>
        <span v-else>{{scope.row[item.prop] || '-'}}</span>
      </template>
    </el-table-column>
@@ -74,7 +86,7 @@

 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseType } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
 export default {
  name: 'KnowledgeBaseTableForRow',
  mixins: [table],
@@ -83,29 +95,36 @@ export default {
      tableTitle: [ // 原table列
        {
          label: 'ID',
-          prop: 'id',
+          prop: 'knowledgeId',
          show: true,
-          width: 100,
+          width: 60,
          sortable: 'custom'
        }, {
          label: this.$t('config.roles.name'),
-          prop: 'tagName',
+          prop: 'name',
+          minWidth: 100,
          show: true,
          sortable: 'custom'
        }, {
-          label: this.$t('overall.type'),
-          prop: 'tagType',
-          minWidth: 80,
+          label: this.$t('overall.category'),
+          prop: 'category',
+          width: 100,
+          show: true
+        }, {
+          label: this.$t('overall.source'),
+          prop: 'source',
+          width: 130,
          show: true
        }, {
          label: this.$t('overall.remark'),
-          prop: 'remark',
+          prop: 'description',
+          minWidth: 150,
          show: true
        },
        {
          label: this.$t('overall.createdBy'),
-          prop: 'cuser',
-          show: true
+          prop: 'opUser',
+          show: false
        },
        {
          label: this.$t('config.user.createTime'),
@@ -120,17 +139,29 @@ export default {
        },
        {
          label: this.$t('overall.updateTime'),
-          prop: 'utime',
-          show: false,
+          prop: 'opTime',
+          show: true,
          sortable: 'custom'
+        },
+        {
+          label: this.$t('knowledge.status'),
+          prop: 'status',
+          show: true,
+          minWidth: 40
        }
      ]
    }
  },
  computed: {
-    tagTypeText () {
+    tagCategoryText () {
      return function (type) {
-        const t = knowledgeBaseType.find(t => t.value === type)
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
        return t ? t.name : ''
      }
    }
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -1,29 +1,32 @@
 <template>
  <el-checkbox-group v-model="checkList">
-    <div @click="isSelectedStatus && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.id" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+    <div @click="isSelectedStatus && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
      <div class="card-content">
        <div class="card-title">
-          <div class="card-title-name" :title="data.tagName">{{data.tagName}}</div>
+          <div class="card-title-name" :title="data.name">{{data.name}}</div>
          <div class="card-title-more">
            <span v-show="!isSelectedStatus && data.showMore"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(data)" test-id="mouseenter-dark"></i></span>
            <div class="card-operate" v-show="!isSelectedStatus && data.moreOptions" @mouseleave="mouseleaveMore(data)">
-              <div class="card-title-more-edit" @click="edit(data.id)" >{{$t('overall.edit')}}</div>
+              <div class="card-title-more-edit" @click="edit(data.knowledgeId)" >{{$t('overall.edit')}}</div>
              <div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
            </div>
-            <el-checkbox @click.stop="" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.id" :label="data"><br></el-checkbox>
+            <el-checkbox @click.stop="" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.knowledgeId" :label="data"><br></el-checkbox>

          </div>
        </div>
-        <div class="card-id">ID:{{data.id}}</div>
-        <div class="card-desc" :title="data.remark">{{data.remark?data.remark:'—'}}</div>
+        <div class="card-id">ID:{{data.knowledgeId}}</div>
+        <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
      </div>
      <div class="card-operate__footer">
-        <div class="card-type">{{data.tagType}}</div>
+        <div class="card-type">
+          <div class="card-category">{{tagCategoryText(data.category)}}</div>
+          <div class="card-source">{{tagSourceText(data.source)}}</div>
+        </div>
        <el-switch class="card-enable"
-                   disabled
                   v-model="data.status"
                   active-color="#38ACD2"
                   inactive-color="#C0CEDB"
+                   @change="changeStatus($event,data.knowledgeId)"
        >
        </el-switch>
      </div>
@@ -33,7 +36,7 @@

 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseType } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
 export default {
  name: 'knowledgeBaseTableForCard',
  mixins: [table],
@@ -53,7 +56,7 @@ export default {
      handler (n) {
        if (this.tableData && this.tableData.length > 0) {
          this.tableData.forEach(item => {
-            item.status = true
+            // item.status = true
          })
        }
      }
@@ -98,28 +101,28 @@ export default {
    },
    mouseenterMore (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.moreOptions = true
        }
      })
    },
    mouseleaveMore (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.moreOptions = false
        }
      })
    },
    mouseenter (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.showMore = true
        }
      })
    },
    mouseleave (card) {
      this.tableData.forEach(t => {
-        if (t.id === card.id) {
+        if (t.knowledgeId === card.knowledgeId) {
          t.showMore = false
          t.moreOptions = false
        }
@@ -130,12 +133,14 @@ export default {
    },
    edit (id) {
      const pageNo = this.$router.currentRoute.value.query.pageNo
+      const listMode = this.$router.currentRoute.value.query.listMode
      this.$router.push({
        path: '/knowledgeBase/edit',
        query: {
          t: +new Date(),
          pageNoForTable: pageNo || 1,
-          id: id
+          id: id,
+          listMode: listMode
        }
      })
    }
@@ -144,9 +149,23 @@ export default {
    this.tableData.forEach(item => {
      item.showMore = false
      item.moreOptions = false
-      item.status = true
+      // item.status = true
    })
  },
-  computed: {}
+  computed: {
+    tagCategoryText () {
+      return function (type) {
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+
+  }
 }
 </script>