CN-1096 知识库UI开发

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -1,47 +1,183 @@
 <template>
-  <el-checkbox-group v-model="checkList" v-if="!isNoData">
-    <div @click="isSelectedStatus && data.isBuiltIn !== 1 && 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.name">{{data.name}}</div>
-          <div class="card-title-more">
-            <span v-show="!isSelectedStatus && data.showMore && data.isBuiltIn !== 1"><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.knowledgeId)" >{{$t('overall.edit')}}</div>
-              <div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
-            </div>
-            <el-checkbox @click.stop="" :disabled="data.isBuiltIn === 1" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.knowledgeId" :label="data"><br></el-checkbox>
-
+  <template v-if="!isNoData">
+    <div class="card-type-title" v-if="aiTaggingList.length > 0">{{$t('knowledgeBase.intelligenceLearning')}}</div>
+    <el-checkbox-group v-model="checkList" >
+      <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in aiTaggingList" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+        <div class="card-content">
+          <div class="card-operate">
+            <el-switch v-model="data.status"
+                       class="card-enable"
+                       active-color="#38ACD2"
+                       inactive-color="#C0CEDB"
+                       :active-value="1"
+                       :inactive-value="0"
+                       @change="changeStatus($event,data.knowledgeId)"
+            >
+            </el-switch>
           </div>
+          <div class="card-icon">
+            <i class="cn-icon-add-knowledge-base cn-icon" ></i>
+          </div>
+          <div class="card-title">
+            <div class="card-title-name" :title="data.name">{{data.name}}</div>
+          </div>
+          <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
         </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">
-          <div class="card-category">{{tagCategoryText(data.category)}}</div>
-          <div class="card-source">{{tagSourceText(data.source)}}</div>
+        <div class="card-operate__footer">
+          <button v-if="data.showUpdate"
+                  :title="$t('overall.update')" class="top-tool-btn--update"
+                  @click="jumpToUpdatePage(data,true)">
+            <i class="cn-icon-update-knowledge-base cn-icon"></i>
+            <span>{{$t('overall.update')}}</span>
+          </button>
         </div>
-        <el-switch class="card-enable"
-                   v-model="data.status"
-                   active-color="#38ACD2"
-                   inactive-color="#C0CEDB"
-                   :active-value="1"
-                   :inactive-value="0"
-                   @change="changeStatus($event,data.knowledgeId)"
-        >
-        </el-switch>
       </div>
-    </div>
-  </el-checkbox-group>
+    </el-checkbox-group>
+    <div class="card-type-title" style="margin-top:4px;"  v-if="websketchList.length > 0">{{$t('knowledgeBase.websketchIntegration')}}</div>
+    <el-checkbox-group v-model="checkList" >
+      <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in websketchList" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+        <div class="card-content">
+          <div class="card-icon">
+            <i class="cn-icon-add-knowledge-base cn-icon" ></i>
+          </div>
+          <div class="card-title">
+            <div class="card-title-name" :title="data.name">{{data.name}}</div>
+          </div>
+          <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
+        </div>
+        <div class="card-operate__footer">
+          <button v-if="data.showUpdate" :title="$t('overall.update')" class="top-tool-btn--update"
+                  @click="jumpToUpdatePage(data,false)">
+            <i class="cn-icon-update-knowledge-base cn-icon"></i>
+            <span>{{$t('overall.update')}}</span>
+          </button>
+        </div>
+      </div>
+    </el-checkbox-group>
+  </template>
+
   <div class="table-no-data" v-else="isNoData">
     <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
   </div>
+
+  <div class="center-dialog">
+    <el-dialog v-model="showUpdateDialog"
+               custom-class="update-knowledge"
+               :before-close="handleClose">
+      <div class="knowledge-update__top" >
+        <div class="update-left__icon">
+          <i class="cn-icon-add-knowledge-base cn-icon" ></i>
+        </div>
+        <div class="update-right">
+          <div class="knowledge-enable">
+            <div class="update-title">
+              <div class="card-title-name" :title="updateKnowledge.name">{{updateKnowledge.name}}</div>
+            </div>
+            <el-switch v-model="updateKnowledge.status"
+                       v-if="showEnable"
+                       active-color="#38ACD2"
+                       inactive-color="#C0CEDB"
+                       :active-value="1"
+                       :inactive-value="0"
+                       @change="changeStatus($event,updateKnowledge.knowledgeId)"
+            >
+            </el-switch>
+          </div>
+          <div class="knowledge-desc" :title="updateKnowledge.description">{{updateKnowledge.description?updateKnowledge.description:'—'}}</div>
+        </div>
+      </div>
+      <template v-if="!showAddUpdateDialog">
+        <div class="knowledge-update" >
+          <div class="update-title">
+            <div class="card-title-name">update record</div>
+          </div>
+          <div class="update-operate">
+            <button :title="$t('overall.update')" class="top-tool-btn--update"
+                    @click="uploadRecord()">
+              <i class="cn-icon-update-knowledge-base cn-icon"></i>
+              <span>{{$t('overall.update')}}</span>
+            </button>
+          </div>
+        </div>
+        <el-table ref="updateDataTable"
+                  border
+                  :data="updateHistoryList"
+                  @selection-change="secondSelectionChange"
+                  max-height="653px"
+                  width="100%"
+                  class="update-dialog__table"
+                  cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;"
+                  header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;">
+          <el-table-column property="opTime" label="Update time" width="150" ></el-table-column>
+          <el-table-column property="opUser" label="Operating user" width="150" ></el-table-column>
+          <el-table-column property="version" label="Version information" width="150"  ></el-table-column>
+          <el-table-column property="description" label="Description"></el-table-column>
+        </el-table>
+      </template>
+      <template v-if="showAddUpdateDialog">
+        <div class="update-knowledge-form"  >
+          <el-form :model="updateObject" label-position="top" ref="form" :rules="rules">
+            <!--name-->
+            <el-form-item :label="$t('overall.name')" prop="name">
+              <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
+                        size="mini" type="text" v-model="updateObject.name" @blur="tagNameBlur"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('knowledge.upload')" prop="file">
+              <el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/items/batch`"
+                         :headers="uploadHeaders"
+                         :multiple="false"
+                         :file-list="fileList"
+                         :data="uploadParams"
+                         :on-change="fileChange"
+                         :on-success="uploadSuccess"
+                         :before-upload="beforeUpload"
+                         :on-progress="onUpload"
+                         :on-error="uploadError"
+                         :class="uploadErrorTip ? 'el-upload--error' : ''"
+                         :accept="fileTypeLimit"
+                         ref="knowledgeUpload"
+                         id="knowledgeUpload"
+              >
+                <el-button type="primary" class="uploadBtn"><i class="cn-icon cn-icon-a-1"></i></el-button>
+              </el-upload>
+            </el-form-item>
+
+            <el-form-item :label="$t('knowledge.version')" prop="version">
+              <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
+                        size="mini" type="text" v-model="updateObject.version" @blur="tagNameBlur"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('overall.remark')" prop="description" class="knowledge-remark">
+              <el-input  maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
+                         v-model="updateObject.description" id="role-box-input-remark"/>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="dialog-footer">
+          <el-button @click="showAddUpdateDialog = false">{{ $t('overall.cancel') }}</el-button>
+          <el-button type="primary" @click="submitConfirm">{{ $t('tip.confirm') }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="showConfirmDialog"
+               :title="$t('overall.tips')"
+               custom-class="update-knowledge-tip"
+               :before-close="handleConfirmClose">
+      <div class="dialog-message">{{$t('knowledge.updateTips')}}</div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showConfirmDialog = false">{{ $t('overall.cancel') }}</el-button>
+          <el-button type="primary" @click="submit">{{ $t('tip.confirm') }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+import { knowledgeCategoryValue, storageKey } from '@/utils/constants'
+import { ref } from 'vue'
+import { updateKnowledgeUrl } from '@/utils/api'
 export default {
   name: 'knowledgeBaseTableForCard',
   mixins: [table],
@@ -57,10 +193,78 @@ export default {
   data () {
     return {
       tableTitle: [],
-      checkList: []
+      checkList: [],
+      aiTaggingList: [],
+      websketchList: [],
+      showUpdateDialog: false,
+      showConfirmDialog: false,
+      showAddUpdateDialog: false,
+      updateKnowledge: {},
+      showEnable: false,
+      updateHistoryList: [],
+      updateObject: {},
+      updateKnowledgeUrl: updateKnowledgeUrl
+    }
+  },
+  setup () {
+    // 没上传过文件的提示
+    const uploadErrorTip = ref('')
+    return {
+      baseUrl: BASE_CONFIG.baseUrl,
+      apiVersion: BASE_CONFIG.apiVersion,
+      uploadHeaders: {
+        'Cn-Authorization': localStorage.getItem(storageKey.token)
+      },
+      uploadErrorTip,
+      fileTypeLimit: '.csv',
+      fileList: ref([])
     }
   },
   methods: {
+    fileChange (files, fileList) {
+      this.fileList = fileList.slice(-1)
+    },
+    uploadError () {
+      this.$message.error(this.$t('tip.uploadFailed', { msg: 'error' }))
+    },
+    uploadSuccess (response) {
+      const uploadFile = this.fileList ? this.fileList[0] : null
+      let fileName = uploadFile ? uploadFile.name : ''
+      fileName = fileName.substring(0, fileName.indexOf('.'))
+      this.updateObject.version = fileName.length >= 8 ? fileName.substring(fileName.length - 8) : fileName
+      this.uploaded = response.code === 200
+      if (response.code === 200) {
+
+      } else {
+        this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
+      }
+    },
+    beforeUpload (file) {
+
+    },
+    onUpload () {
+
+    },
+    updateKnowledgeBase () {
+      axios.post(this.updateKnowledgeUrl + '?knowledgeIds=' + ids).then(response => {
+        if (response.data.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
+          // 重新查询历史记录
+        } else {
+          this.$message.error(response.data.message)
+        }
+      }).finally(() => {
+
+      })
+    },
+    submitConfirm () {
+      this.showConfirmDialog = true
+    },
+    submit () {
+      // this.updateKnowledgeBase()//更新列表数据
+      this.showConfirmDialog = false
+      this.showAddUpdateDialog = false
+    },
     clickCard (data, event) {
       if (data.isSelected) { // 原来为选中，当前点击后未选中
         const index = this.checkList.indexOf(data)
@@ -81,11 +285,29 @@ export default {
       data.isSelected = val
       this.$emit('checkboxStatusChange', val, data)
     },
-    showSelect () {
-      // this.isSelectedStatus = true
+    handleClose () {
+      this.showUpdateDialog = false
+      this.showAddUpdateDialog = false
     },
-    hideSelect () {
-      // this.isSelectedStatus = false
+    handleConfirmClose () {
+      this.showConfirmDialog = false
+    },
+    handleUpdateClose () {
+      this.showAddUpdateDialog = false
+    },
+    showUpdate () {
+      this.showUpdateDialog = true
+      this.showAddUpdateDialog = false
+    },
+    jumpToUpdatePage (data, showEnable) {
+      this.updateKnowledge = data
+      this.showEnable = showEnable
+      this.showUpdate()
+    },
+    uploadRecord () {
+      this.showAddUpdateDialog = true
+      this.updateObject.name = this.updateKnowledge.name
+      this.updateObject.version = ''
     },
     clearSelect () {
       this.$nextTick(() => {
@@ -97,32 +319,17 @@ export default {
         }
       })
     },
-    mouseenterMore (card) {
-      this.tableData.forEach(t => {
-        if (t.knowledgeId === card.knowledgeId) {
-          t.moreOptions = true
-        }
-      })
-    },
-    mouseleaveMore (card) {
-      this.tableData.forEach(t => {
-        if (t.knowledgeId === card.knowledgeId) {
-          t.moreOptions = false
-        }
-      })
-    },
     mouseenter (card) {
       this.tableData.forEach(t => {
         if (t.knowledgeId === card.knowledgeId) {
-          t.showMore = true
+          t.showUpdate = true
         }
       })
     },
     mouseleave (card) {
       this.tableData.forEach(t => {
         if (t.knowledgeId === card.knowledgeId) {
-          t.showMore = false
-          t.moreOptions = false
+          t.showUpdate = false
         }
       })
     },
@@ -131,38 +338,74 @@ export default {
     },
     edit (id) {
       const pageNo = this.$router.currentRoute.value.query.pageNo
-      const listMode = this.$router.currentRoute.value.query.listMode
+      const dataType = this.$router.currentRoute.value.query.dataType
       this.$router.push({
         path: '/knowledgeBase/edit',
         query: {
           t: +new Date(),
           pageNoForTable: pageNo || 1,
           id: id,
-          listMode: listMode
+          dataType: dataType
         }
       })
     }
   },
-  mounted () {
-    this.tableData.forEach(item => {
-      item.showMore = false
-      item.moreOptions = false
-    })
-  },
-  computed: {
-    tagCategoryText () {
-      return function (type) {
-        const t = knowledgeBaseCategory.find(t => t.value === type)
-        return t ? t.name : ''
+  watch: {
+    tableData: {
+      handler (n) {
+        if (this.tableData && this.tableData.length > 0) {
+          this.aiTaggingList = []
+          this.websketchList = []
+          this.tableData.forEach(item => {
+            item.showUpdate = false
+            if (item.category === knowledgeCategoryValue.aiTagging) {
+              this.aiTaggingList.push(item)
+            } else if (item.category === knowledgeCategoryValue.webSketch) {
+              this.websketchList.push(item)
+            }
+          })
+        }
       }
     },
-    tagSourceText () {
-      return function (type) {
-        const t = knowledgeBaseSource.find(t => t.value === type)
-        return t ? t.name : ''
+    showAddUpdateDialog: {
+      handler (n) {
+        if (!n) {
+          this.fileList = []
+        }
       }
     }
+  },
+  mounted () {
+    this.aiTaggingList = []
+    this.websketchList = []
+    this.tableData.forEach(item => {
+      item.showUpdate = false
+      if (item.category === knowledgeCategoryValue.aiTagging) {
+        this.aiTaggingList.push(item)
+      } else if (item.category === knowledgeCategoryValue.webSketch) {
+        this.websketchList.push(item)
+      }
+    })
 
+    const update = {
+      opTime: '2023-07-26 16:27:55',
+      opUser: 'admin',
+      version: 'v2.8',
+      description: ' It can\'t be identified by the payload signature.'
+    }
+    this.updateHistoryList.push(update)
+    this.updateHistoryList.push(update)
+    this.updateHistoryList.push(update)
+    this.updateHistoryList.push(update)
+    this.updateHistoryList.push(update)
+  },
+  computed: {
+    uploadParams () {
+      return {
+        knowledgeId: this.updateKnowledge.knowledgeId,
+        action: 'update'
+      }
+    }
   }
 }
 </script>