fix:CN-971 1.卡片标题限定一行，超长做处理；描述内容长度限定到不遮住type和enabled按钮，留10px以上间隙；

2.取消select状态时，应清空已选数组； 3.设计图上，鼠标滑过卡片时，卡片边框应有阴影； 4.select状态下，整个卡片任意区域点击都可以选中，选中后边框色改变，且鼠标移开后边框阴影不消失； 5.All筛选框与下方的间隙太小，将间隙和其他统一； 6.只有2行时，卡片行距被拉开过大，应该不拉开； 7.删除弹框应竖向居中； 8.多选之后，点击搜索，卡片上的选择状态被取消，但点击删除按钮依旧在待删除列表里；
2023-04-28 14:49:50 +08:00
parent 879256725b
commit 66760a2a57
4 changed files with 65 additions and 29 deletions
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -171,7 +171,6 @@
        align-items : center;
        flex-direction:row;
        height:28px;
-        //border:solid 1px red;
        width:100%;
        .top-tool-btn {
          cursor: pointer;
@@ -281,6 +280,9 @@
        width:100%;
        height:calc(100% - 152px);
        overflow-y:auto;
+        .card-selected{
+          box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.1);
+        }
        .card-item {
          background: #FFFFFF;
          border: 1px solid rgba(226,229,236,1);
@@ -307,7 +309,11 @@
              flex-direction: row;
              justify-content: space-between;
              .card-title-name {
-
+                width:210px;
+                overflow: hidden; //超出的文本隐藏
+                text-overflow: ellipsis; //溢出用省略号显示
+                white-space:nowrap;
+                word-break: break-all;
              }
              .card-title-more {
                position: relative;
@@ -331,23 +337,6 @@
                  left: 5px;
                  top: 2px;
                  transform: rotate(45deg) scaleY(1);
-
-                  /*
-
-                  box-sizing: content-box;
-                  content: "";
-                  border: 10px solid red;
-                  border-left: 0;
-                  border-top: 0;
-                  height: 0.5rem;
-
-
-                  width: 0.21429rem;
-                  transform: rotate(
-                                  45deg
-                  ) scaleY(0);
-                  transition: transform .15s ease-in .05s;
-                  transform-origin: center;*/
                }
                .card-operate {
                  background: #FFFFFF;
@@ -409,7 +398,6 @@
                  }
                }
              }
-
            }
            .card-id {
              //font-family: NotoSansSChineseRegular;
@@ -424,7 +412,14 @@
              color: #717171;
              line-height: 18px;
              font-weight: 400;
-              margin-bottom:12px;
+              margin-bottom:0px;
+              max-height:88px;
+
+              overflow: hidden;
+              display: -webkit-box;
+              -webkit-line-clamp: 5;
+              line-clamp: 5;
+              -webkit-box-orient: vertical;
            }
          }
          .card-operate__footer {
@@ -455,6 +450,9 @@
            }
          }
        }
+        .card-item:hover{
+          box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.1);
+        }
        .card-item__enable {
          background: #FFFFFF;
          border: 1px solid rgba(226,229,236,1);
--- a/src/components/table/setting/KnowledgeBaseTable.vue
+++ b/src/components/table/setting/KnowledgeBaseTable.vue
@@ -1,23 +1,21 @@
 <template>
-  <el-checkbox-group v-model="checkList" @change="" style="display:flex;flex-flow:row wrap;">
-    <div @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.id" class="card-item" style="">
+  <el-checkbox-group v-model="checkList" @change="" style="display:flex;flex-flow:row wrap;align-content: flex-start;">
+    <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 class="card-content">
        <div class="card-title">
-          <div class="card-title-name">
-            {{data.tagName}}
-          </div>
+          <div class="card-title-name" :title="data.tagName">{{data.tagName}}</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-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
            </div>
-            <el-checkbox @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.id" :label="data"><br></el-checkbox>

          </div>
        </div>
        <div class="card-id">ID:{{data.id}}</div>
-        <div class="card-desc">{{data.remark?data.remark:'—'}}</div>
+        <div class="card-desc" :title="data.remark">{{data.remark?data.remark:'—'}}</div>
      </div>
      <div class="card-operate__footer">
        <div class="card-type">{{data.tagType}}</div>
@@ -62,7 +60,24 @@ export default {
    }
  },
  methods: {
+    clickCard (data, event) {
+      if (data.isSelected) { // 原来为选中，当前点击后未选中
+        const index = this.checkList.indexOf(data)
+        if (index > -1) {
+          this.checkList.splice(index, 1)
+        }
+      } else {
+        const index = this.checkList.indexOf(data)
+        if (index === -1) {
+          this.checkList.push(data)
+        }
+      }
+      const val = !data.isSelected
+      data.isSelected = val
+      this.$emit('checkboxStatusChange', val, data)
+    },
    checkboxStatusChange (val, data) {
+      data.isSelected = val
      this.$emit('checkboxStatusChange', val, data)
    },
    showSelect () {
@@ -71,6 +86,16 @@ export default {
    hideSelect () {
      // this.isSelectedStatus = false
    },
+    clearSelect () {
+      this.$nextTick(() => {
+        this.checkList = []
+        if (this.tableData && this.tableData.length > 0) {
+          this.tableData.forEach(data => {
+            data.isSelected = false
+          })
+        }
+      })
+    },
    mouseenterMore (card) {
      this.tableData.forEach(t => {
        if (t.id === card.id) {
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -124,6 +124,7 @@ export default {
      const params = {
        q: this.keyWord
      }
+      this.clearList()
      this.search(params)
    },
    handleClose () {
@@ -224,7 +225,11 @@ export default {
      this.pageObj.total = 0
    },
    toSelect () {
+      this.$refs.dataTable.clearSelect()
      this.isSelectedStatus = !this.isSelectedStatus
+      this.disableDelete = true
+      this.batchDeleteObjs = []
+      this.secondBatchDeleteObjs = []
    },
    editSelectRecord () {
      if (this.batchDeleteObjs.length === 0) {
@@ -378,4 +383,12 @@ export default {
      }
    }
  }
+  .el-dialog {
+    display: flex;
+    flex-direction: column; // 水平分布
+    margin: 0 !important;
+    position: absolute;
+    top: calc(50% - 150px);
+    left: calc(50% - 240px);
+  }
 </style>
--- a/src/views/setting/KnowledgeFilter.vue
+++ b/src/views/setting/KnowledgeFilter.vue
@@ -11,7 +11,7 @@
        </div>
        <el-collapse-transition>
          <div class="filter__body" v-show="!filter.collapse">
-            <el-checkbox label="all" v-if="index === 0" key="all" @change="handleCheckedAllChange" v-model="checkAll" :indeterminate="isIndeterminateModel">
+            <el-checkbox style="padding-bottom: 5px;" label="all" v-if="index === 0" key="all" @change="handleCheckedAllChange" v-model="checkAll" :indeterminate="isIndeterminateModel">
              <div class="filter__checkbox-label">
                <div class="filter-label" style="">
                  <span>All</span>