CN-926 列表页样式改版

src/assets/css/common/table-common.scss

@@ -14,7 +14,7 @@
     z-index: 0;
   }
   .main-container {
-    padding: 10px;
+    padding: 0px;
     height: 100%;
     background-color: #f6f6f6;
     &>div {
@@ -36,7 +36,7 @@
     align-items : center;
     position: relative;
     justify-content: space-between;
-    padding: 14px 20px;
+    padding: 12px 20px;
 
     &.top-tools--sub {
       align-items: center;
@@ -50,6 +50,12 @@
      .top-tool-btn {
        border-left: none;
      }
+     .top-tool-btn--search:hover {
+       border-left: none !important;
+     }
+     .top-tool-btn--search:focus {
+       border-left: none !important;
+     }
     }
 
     .top-tool-right {
@@ -74,17 +80,28 @@
     }
     .top-tool-btn {
       cursor: pointer;
-      height: 33px;
+      height: 28px;
-      width: 36px;
+      width: 72px;
       border: 1px solid $--border-color-primary;
       outline: none;
       border-radius: $--button-border-radius;
       background-color: $--button-gray-background-color;
       transition: background-color linear .1s;
-
+      font-size:12px;
+      font-weight: 500;
+      font-family: NotoSansHans-Medium !important;
       i {
         font-size: 14px;
-        color: $--button-gray-color;
+        color: #575757;
+        margin-right:4px;
+      }
+    }
+
+    .top-tool-btn:disabled {
+      cursor: not-allowed;
+      opacity: 0.66;
+      i {
+
       }
     }
 
@@ -94,13 +111,14 @@
       color: #666;
     }
     .top-tool-btn:hover:not(.cn-btn-disabled) {
+      border: 1px solid $--border-color-primary;
       background-color: $--button-gray-hover-background-color;
     }
     .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
-      background-color: $--button-gray-hover-background-color;
+      background-color: $--button-gray-active-background-color;
-      border: 1px solid $--color-primary !important;
+      border: 1px solid $--border-color-primary;
       i {
-        color: $--button-gray-active-color;
+        color: #575757;
       }
     }
     .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
@@ -111,6 +129,56 @@
         color: #F0745A;
       }
     }
+    .top-tool-btn--create {
+      background-color: #38ACD2 !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF;
+      i {
+        color: #FFFFFF;
+      }
+    }
+    .top-tool-btn--create:hover {
+      background-color: #57B8D9 !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF;
+      i {
+        color: #FFFFFF;
+      }
+    }
+    .top-tool-btn--create:focus {
+      background-color: #31A5CD !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF !important;
+      i {
+        color: #FFFFFF !important;
+      }
+    }
+    .top-tool-btn--create:disabled {
+      opacity: 0.66;
+      background-color: #38ACD2 !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF;
+      i {
+        color: #FFFFFF;
+      }
+    }
+
+    .btn-customize {
+      color:$blue;
+      font-size: 12px;
+      .icon-gear{
+        color:#2C72C6;
+        width:12px;
+        height:12px;
+        margin-right:2px;
+        font-size:12px;
+      }
+    }
+
+    .btn-customize:hover {
+      cursor:pointer;
+    }
+
     .top-tool-btn--dropdown {
       position: relative;
       width: auto;
@@ -130,6 +198,7 @@
       width: calc(100% - 40px);
       border: 1px solid $--right-box-border-color;
       border-bottom: none;
+      border-radius:4px;
 
       .caret-wrapper {
         height: 23px;
@@ -152,7 +221,8 @@
       th {
         border-color: $--right-box-border-color;
         padding: 8px 0;
-        background: #F9F9F9;
+        background: #FFF;
+        border-right:0px;
       }
       .el-table__header th:first-of-type {
         border-left: none;

src/assets/css/components/components/table/common.scss

@@ -78,12 +78,28 @@
   border-radius: 2px;
   background-color: #F9F9F9;
   transition: background-color linear .1s;
+  padding-left:10px;
+}
+
+
+.list-page .top-tools .top-tool-btn--search{
+  width:28px !important;
+  height:28px !important;
+  padding:unset !important;
+  i {
+    font-size: 14px;
+    color: #575757;
+    margin-right:unset !important;
+  }
 }
 
 .list-page {
+  .el-input--small{
+    width: 214px !important;
+    line-height: 27px;
+  }
   .el-input--small .el-input__inner {
-    height: 33px;
+    height: 28px;
-    line-height: 32px;
+    border-radius: 2px 0px 0px 2px;
-    border-radius: 0px;
   }
 }

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -7,6 +7,19 @@
     box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
     border-radius: 12px;
   }
+
+  .top-title {
+    font-family: NotoSansHans-Black;
+    font-size: 24px;
+    color: #353636;
+    font-weight: 900;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    padding-bottom: 8px;
+    padding-top: 20px;
+    margin-left:20px;
+  }
 }
 .edit-knowledge-base {
   height: 100%;

src/assets/css/themes/theme-dark.scss

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
 $--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
 
-$--button-gray-color: #666; // 灰色按钮字色
+$--button-gray-color: #353636; // 灰色按钮字色
 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
 $--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
-$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
+$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
-$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
 $--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

src/assets/css/themes/theme-light.scss

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
 $--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
 
-$--button-gray-color: #666; // 灰色按钮字色
+$--button-gray-color: #353636; // 灰色按钮字色
 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
 $--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
-$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
+$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
-$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
 $--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

src/components/table/CnDataList.vue

@@ -7,23 +7,24 @@
         <div class="top-tools">
           <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
-          </div>
-          <div class="top-tool-right">
-<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
-            <el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
             <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
               <div style="display: flex">
                 <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
-<!--                <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
+                <!--                <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
-                <button class="top-tool-btn" style="border-radius: 0" @click="onSearch">
+                <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>
+          <div class="top-tool-right">
+<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
+            <el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
+
             <slot name="top-tool-right"></slot>
-            <button v-if="showLayout.indexOf('elementSet') > -1" class="top-tool-btn" @click="tools.showCustomTableTitle = true">
+            <div  v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize"  @click="tools.showCustomTableTitle = true">
-              <i class="cn-icon-gear cn-icon"></i>
+              <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
-            </button>
+            </div>
           </div>
         </div>
         <div class="cn-table">

src/components/table/administration/RoleTable.vue

@@ -47,29 +47,6 @@
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
-    <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
   </el-table>
 </template>
 

src/components/table/administration/UserTable.vue

@@ -62,29 +62,6 @@
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :resizable="false"
-      :width="operationWidth"
-      fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
   </el-table>
 </template>
 

src/components/table/report/ReportTable.vue

@@ -188,22 +188,6 @@
           <span v-else>{{ scope.row[item.prop] || '-' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-          :resizable="false"
-          :width="operationWidth"
-          fixed="right">
-        <template #header>
-          <div class="table-operation-title">{{ $t('overall.option') }}</div>
-        </template>
-        <template #default="scope">
-          <div class="table-operation-items">
-            <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i
-                class="cn-icon cn-icon-bianji"></i></button>
-            <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i
-                class="cn-icon cn-icon-shanchu"></i></button>
-          </div>
-        </template>
-      </el-table-column>
     </el-table>
     <div class="table-operation-all">
       <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
@@ -308,6 +292,7 @@ export default {
       loadingTableId: '',
       loadingPreviewId: '',
       downDataList: [],
+      disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
       // pageObj: {
       //   pageNo: 1,
       //   pageSize: 20,
@@ -556,6 +541,12 @@ export default {
         })
         // this.selectIds = selectIds
       }
+      this.batchDeleteObjs = objs
+      if(objs.length > 1) {
+        this.disableEdit = true
+      }else {
+        this.disableEdit = false
+      }
     },
     /**
      * 全选按钮
@@ -574,6 +565,13 @@ export default {
         this.$refs.dataTable.clearSelection()
       }
 
+      this.batchDeleteObjs = objs
+      if(objs.length > 1) {
+        this.disableEdit = true
+      }else {
+        this.disableEdit = false
+      }
+
       // this.selectIds = selectIds
     },
     /**

src/components/table/setting/KnowledgeBaseTable.vue

@@ -66,29 +66,6 @@
         <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
     </el-table-column>
-    <el-table-column
-        :resizable="false"
-        :width="operationWidth"
-        fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-<!--          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>-->
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
   </el-table>
 </template>
 

src/mixins/data-list.js

@@ -37,6 +37,7 @@ export default {
       tableData: [],
       scrollbarWrap: null,
       delFlag: false,
+      disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
       operationWidth: '165' // 操作列宽
     }
   },
@@ -74,6 +75,11 @@ export default {
     },
     selectionChange (objs) {
       this.batchDeleteObjs = objs
+      if(this.batchDeleteObjs.length > 1) {
+        this.disableEdit = true
+      }else {
+        this.disableEdit = false
+      }
     },
     getTableData (params) {
       if (params) {
@@ -115,6 +121,39 @@ export default {
         })
       })
     },
+    delBatch () {
+      let ids = []
+      if(this.batchDeleteObjs && this.batchDeleteObjs.length > 0){
+        this.batchDeleteObjs.forEach(item =>{
+          ids.push(item.id)
+        })
+      }
+      if(ids.length === 0){
+        this.$alert(this.$t('tip.pleaseSelect'),{
+          confirmButtonText: this.$t('tip.yes'),
+          type:'warning'
+        })
+      }else {
+        this.$confirm(this.$t('tip.confirmDelete'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
+          type: 'warning'
+        }).then(() => {
+          this.tools.loading = true
+          axios.delete(this.url + '?ids=' + ids).then(response => {
+            if (response.data.code === 200) {
+              this.delFlag = true
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+              this.getTableData()
+            } else {
+              this.$message.error(response.data.message)
+            }
+          }).finally(() => {
+            this.tools.loading = false
+          })
+        })
+      }
+    },
     newObject () {
       return JSON.parse(JSON.stringify(this.blankObject))
     },
@@ -153,6 +192,21 @@ export default {
         }
       })
     },
+    editSelectRecord(){
+      if(this.batchDeleteObjs.length === 0){
+        this.$alert(this.$t('tip.pleaseSelectForEdit'),{
+          confirmButtonText: this.$t('tip.yes'),
+          type:'warning'
+        })
+      }else {
+        get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
+          if (response.code === 200) {
+            this.object = response.data
+            this.rightBox.show = true
+          }
+        })
+      }
+    },
     copy (u) {
       this.object = { ...u, name: 'Copy from ' + u.name, id: '' }
       this.rightBox.show = true

src/views/administration/Roles.vue

@@ -9,11 +9,23 @@
             :layout="['columnCustomize','elementSet','search']"
             @search="search"
     >
-      <template v-slot:top-tool-right>
+      <template v-slot:top-tool-left>
-        <button id="roles-add" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
+        <button id="roles-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
-                type="button" @click="add">
+                @click="add">
-          <i class="cn-icon-add cn-icon"></i>
+          <i class="cn-icon-xinjian cn-icon"></i>
+          <span>{{$t('overall.create')}}</span>
         </button>
+        <button id="roles-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
+                @click="edit">
+          <i class="cn-icon-edit cn-icon"></i>
+          <span>{{$t('overall.edit')}}</span>
+        </button>
+        <button id="roles-delete"  class="top-tool-btn margin-r-10"
+                @click="delBatch">
+          <i class="cn-icon-delete cn-icon"></i>
+          <span>{{$t('overall.delete')}}</span>
+        </button>
+
         <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default>
@@ -78,13 +90,20 @@ export default {
     }
   },
   methods: {
-    edit (u) {
+    edit () {
-      get(`${this.url}`, { ids: u.id }).then(response => {
+      if(this.batchDeleteObjs.length === 0){
-        if (response.code === 200) {
+        this.$alert(this.$t('tip.pleaseSelectForEdit'),{
-          this.object = response.data.list[0]
+          confirmButtonText: this.$t('tip.yes'),
-          this.rightBox.show = true
+          type:'warning'
-        }
+        })
-      })
+      }else {
+        get(`${this.url}`, { ids: this.batchDeleteObjs[0].id }).then(response => {
+          if (response.code === 200) {
+            this.object = response.data.list[0]
+            this.rightBox.show = true
+          }
+        })
+      }
     }
   }
 }

src/views/administration/User.vue

@@ -9,14 +9,21 @@
       :layout="['columnCustomize','elementSet','search']"
       @search="search"
     >
-      <template #top-tool-right>
+      <template #top-tool-left>
-        <button
+        <button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
-          id="account-add"
+                @click="add">
-          class="top-tool-btn margin-r-10"
+          <i class="cn-icon-xinjian cn-icon"></i>
-          type="button"
+          <span>{{$t('overall.create')}}</span>
-          @click="add"
+        </button>
-        >
+        <button id="account-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
-          <i class="cn-icon-add cn-icon"/>
+                @click="editSelectRecord">
+          <i class="cn-icon-edit cn-icon"></i>
+          <span>{{$t('overall.edit')}}</span>
+        </button>
+        <button id="account-delete"  class="top-tool-btn margin-r-10"
+                @click="delBatch">
+          <i class="cn-icon-delete cn-icon"></i>
+          <span>{{$t('overall.delete')}}</span>
         </button>
       </template>
       <template #default>

src/views/report/Report.vue

@@ -22,14 +22,21 @@
           :layout="['search']"
           @search="search"
       >
-        <template #top-tool-right>
+        <template #top-tool-left>
-          <button
+          <button id="account-add"  class="top-tool-btn margin-r-10 top-tool-btn--create"
-              id="account-add"
+                  @click="add">
-              class="top-tool-btn"
+            <i class="cn-icon-xinjian cn-icon"></i>
-              type="button"
+            <span>{{$t('overall.create')}}</span>
-              @click="add"
+          </button>
-          >
+          <button id="report-edit"  class="top-tool-btn margin-r-10" :disabled="disableEdit"
-            <i class="cn-icon-add cn-icon"/>
+                  @click="editReport">
+            <i class="cn-icon-edit cn-icon"></i>
+            <span>{{$t('overall.edit')}}</span>
+          </button>
+          <button id="report-delete"  class="top-tool-btn margin-r-10"
+                  @click="delBatch">
+            <i class="cn-icon-delete cn-icon"></i>
+            <span>{{$t('overall.delete')}}</span>
           </button>
         </template>
         <template #default>
@@ -287,6 +294,19 @@ export default {
       this.object = u
       this.rightBox.show = true
     },
+    editReport () {
+      if(this.batchDeleteObjs.length === 0){
+        this.$alert(this.$t('tip.pleaseSelectForEdit'),{
+          confirmButtonText: this.$t('tip.yes'),
+          type:'warning'
+        })
+      }else {
+        let curRecord = this.batchDeleteObjs[0]
+        this.initConfig(curRecord)
+        this.object = curRecord
+        this.rightBox.show = true
+      }
+    },
     initConfig (u) {
       if (!u.config) {
         u.config = {

src/views/setting/KnowledgeBase.vue

@@ -1,5 +1,8 @@
 <template>
-  <div style="height: 100%;">
+  <div style="height: 100%;" class="knowledge-base">
+    <div class="top-title">
+      {{$t('overall.knowledgeBase')}}
+    </div>
     <cn-data-list
         ref="dataList"
         :tableId="tableId"
@@ -9,10 +12,23 @@
         :layout="['columnCustomize','elementSet','search']"
         @search="search"
     >
-      <template v-slot:top-tool-right>
+      <template v-slot:top-tool-left>
-        <button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10"
+        <button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10 top-tool-btn--create"
                 @click="jumpToCreatePage">
-          <i class="cn-icon-add cn-icon"></i>
+          <i class="cn-icon-xinjian cn-icon"></i>
+          <span>{{$t('overall.create')}}</span>
+        </button>
+        <!--
+        <button id="knowledge-base-edit" :title="$t('knowledgeBase.editKnowledgeBase')" class="top-tool-btn margin-r-10"  :disabled="disableEdit"
+                @click="edit">
+          <i class="cn-icon-edit cn-icon" ></i>
+          <span>{{$t('overall.edit')}}</span>
+        </button>
+        -->
+        <button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
+                @click="delBatch">
+          <i class="cn-icon-delete cn-icon"></i>
+          <span>{{$t('overall.delete')}}</span>
         </button>
       </template>
       <template v-slot:default>