Merge pull request #2727 from dataease/pr@dev_filter_search

Pr@dev filter search

frontend/src/components/ElTreeSelect/index.vue

@@ -33,6 +33,7 @@
       <el-input v-if="treeParams.filterable" v-model="keywords" size="mini" class="input-with-select mb10">
         <el-button slot="append" icon="el-icon-search" @click="_searchFun" />
       </el-input>
+      <p v-if="selectParams.multiple" class="tree-select-all"><el-checkbox :indeterminate="isIndeterminate" v-customStyle="customStyle" @change="selectAllChane" v-model="selectAll">{{ $t('dataset.check_all') }}</el-checkbox></p>
       <el-scrollbar tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
         <!-- 树列表 -->
         <el-tree
@@ -203,10 +204,15 @@ export default {
           }
         }
       }
+    },
+    customStyle: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
     return {
+      selectAll: false,
       guid: guid(),
       propsValue: 'flowId',
       propsLabel: 'name',
@@ -229,6 +235,10 @@ export default {
     popperClass() {
       const _c = 'el-tree-select-popper ' + this.popoverClass
       return this.disabled ? _c + ' disabled ' : _c
+    },
+    isIndeterminate() {
+      if (!this.selectParams.multiple) return;
+      return this.ids.length > 0 && this.ids.length !== this._checkSum().length
     }
   },
   watch: {
@@ -283,6 +293,21 @@ export default {
     off(document, 'mouseup', this._popoverHideFun)
   },
   methods: {
+    selectAllChane(val) {
+      if (val) {
+        this.ids = this._checkSum();
+        this._emitFun();
+        return
+      } 
+      this._selectClearFun()
+    },
+    _checkSum() {
+        let arr = [];
+        (this.data || []).forEach(ele => {
+          arr = [...this.allKidIds(ele), ...arr]
+        })
+        return arr
+    },
     _treeCheckChange() {
       this.$emit("treeCheckChange")
     },
@@ -494,6 +519,7 @@ export default {
         `vm:` 当前组件的vm
         */
       node.checkedKeys = checkedNodes.map(node => node.id)
+      this.selectAll = this._checkSum().length === this.ids.length;
       this.$emit('check', data, node, vm)
       this._emitFun()
     },
@@ -549,6 +575,7 @@ export default {
       this.$emit('input', multiple ? [] : '')
       // 下拉框清空，对外抛出``this.$emit('select-clear');`
       this.$emit('select-clear')
+      this.selectAll = false;
       this._updatePopoverLocationFun()
     },
     // 判断类型，抛出当前选中id
@@ -625,7 +652,9 @@ export default {
 .el-tree-select .select-option {
     display: none !important;
 }
-
+.tree-select-all {
+    padding: 10px 20px 0 24px;
+  }
 [aria-disabled='true'] > .el-tree-node__content {
     color: inherit !important;
     background: transparent !important;

frontend/src/components/ElVisualSelect/index.vue

@@ -6,12 +6,14 @@
     :class="classId"
     popper-class="VisualSelects coustom-de-select"
     no-match-text=" "
+    clearable
     v-bind="$attrs"
     v-on="$listeners"
     @change="visualChange"
     @visible-change="popChange"
   >
-    <el-option v-for="item in options" :key="item.id" :label="item.text" :value="item.id" />
+    <p v-if="startIndex === 0 && $attrs.multiple" class="select-all"><el-checkbox :indeterminate="isIndeterminate" v-customStyle="customStyle" @change="selectAllChane" v-model="selectAll">{{ $t('dataset.check_all') }}</el-checkbox></p>
+    <el-option v-for="item in options" :key="item.id" :label="item.text" :value="item.id"  :class="setSelect(item.id)"/>
   </el-select>
 </template>
 
@@ -31,6 +33,10 @@ export default {
       require: true,
       default: uuid.v1()
     },
+    customStyle: {
+      type: Object,
+      default: () => {}
+    },
     list: {
       type: Array,
       default: () => {
@@ -60,7 +66,13 @@ export default {
       itemHeight: 34, // select组件选项高度
       maxHeightDom: null,
       defaultFirst: false,
-      show: true
+      show: true,
+      selectAll: false
+    }
+  },
+  computed: {
+    isIndeterminate() {
+      return Array.isArray(this.selectValue) && this.selectValue.length > 0 && this.selectValue.length !== this.list.length
     }
   },
   watch: {
@@ -102,6 +114,16 @@ export default {
     })
   },
   methods: {
+    setSelect(id) {
+      if (Array.isArray(this.selectValue)) {
+        return  this.selectValue.map( ele => ele.id ).includes(id) && 'selected'
+      }
+      return this.selectValue === id && 'selected';
+    },
+    selectAllChane(val) {
+      this.visualChange(val ? [...this.list.map( ele => ele.id )] : [])
+      this.$emit('handleShowNumber');
+    },
     addScrollDiv(selectDom) {
       this.maxHeightDom = document.createElement('div')
       this.maxHeightDom.className = 'el-select-height'
@@ -171,6 +193,9 @@ export default {
       this.reCacularHeight()
     },
     visualChange(val) {
+      if(this.$attrs.multiple) {
+        this.selectAll = val.length === this.list.length;
+      }
       this.$emit('visual-change', val)
     }
   }
@@ -206,4 +231,7 @@ export default {
     height: 0;
   }
 }
+.select-all {
+    padding: 10px 20px 0 20px;
+  }
 </style>

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -16,10 +16,12 @@
     :key-word="keyWord"
     popper-class="coustom-de-select"
     :list="datas"
+    :customStyle="customStyle"
     @change="changeValue"
     @focus="setOptionWidth"
     @blur="onBlur"
     @visual-change="visualChange"
+    @handleShowNumber="handleShowNumber"
   >
     <el-option
       v-for="item in templateDatas || datas"
@@ -104,6 +106,10 @@ export default {
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo
+    },
+    customStyle() {
+      const { brColor, wordColor, innerBgColor } = this.element.style;
+      return { brColor, wordColor, innerBgColor }
     }
   },
 
@@ -211,7 +217,7 @@ export default {
     },
     onScroll() {
       if (this.onFocus) {
-        this.$refs.deSelect.blur()
+        this.$refs.deSelect.$refs.visualSelect.blur()
       }
     },
     resetDefaultValue(id) {
@@ -251,7 +257,7 @@ export default {
       }
     },
     visualChange(value) {
-      this.value = value
+      this.value = value;
       this.$nextTick(() => {
         if (!this.element.options.attrs.multiple) {
           return
@@ -271,18 +277,22 @@ export default {
         this.element.options.manualModify = true
       }
       this.setCondition()
+      this.handleShowNumber()
+    },
+    handleShowNumber() {
       this.showNumber = false
+      const tags = this.$refs.deSelect.$refs.visualSelect.$refs.tags
 
       this.$nextTick(() => {
-        if (!this.element.options.attrs.multiple || !this.$refs.deSelect || !this.$refs.deSelect.$refs.tags) {
+        if (!this.element.options.attrs.multiple || !this.$refs.deSelect || !tags) {
           return
         }
-        const kids = this.$refs.deSelect.$refs.tags.children[0].children
+        const kids = tags.children[0].children
         let contentWidth = 0
         kids.forEach(kid => {
           contentWidth += kid.offsetWidth
         })
-        this.showNumber = contentWidth > ((this.$refs.deSelect.$refs.tags.clientWidth - 30) * 0.9)
+        this.showNumber = contentWidth > ((tags.clientWidth - 30) * 0.9)
         this.handleElTagStyle()
       })
     },

frontend/src/components/widget/DeWidget/DeSelectTree.vue

@@ -10,6 +10,7 @@
     :tree-params="treeParams"
     :filter-node-method="_filterFun"
     :tree-render-fun="_renderFun"
+    :customStyle="customStyle"
     @searchFun="_searchFun"
     @node-click="changeNode"
     @removeTag="changeNodeIds"
@@ -106,6 +107,10 @@ export default {
     },
     isSingle() {
       return this.element.options.attrs.multiple
+    },
+    customStyle() {
+      const { brColor, wordColor, innerBgColor } = this.element.style;
+      return { brColor, wordColor, innerBgColor }
     }
   },
 

frontend/src/directive/index.js

@@ -86,6 +86,19 @@ const btnPress =  {
   },
 }
 
+const customStyle = {
+  inserted: function (el, binding) {
+    const label = el.querySelector('.el-checkbox__label');
+    if (label) {
+      if (label.getAttribute("data-color") === binding.value.wordColor) {
+        return
+      };
+      label.style.setProperty('color', binding.value.wordColor, 'important');
+      label.setAttribute("data-color", binding.value.wordColor);
+    }
+  },
+}
+
 
 export default {
   install(Vue) {
@@ -96,6 +109,7 @@ export default {
     Vue.directive('bottom-to-top-drag', bottom2TopDrag)
     Vue.directive('closePress', closePress)
     Vue.directive('btnPress', btnPress)
+    Vue.directive('customStyle', customStyle)
   }
 }
 

frontend/src/lang/en.js

@@ -563,6 +563,10 @@ export default {
     clear_filter: 'Empty condition',
     recover_pwd: 'Restore to the original password?',
     filter_method: 'Filter criteria',
+    filter: 'screen',
+    list: 'List item',
+    list_info: 'Please select the information to be displayed in the list',
+    sure_delete: 'Are you sure to delete this user?',
   },
   ldap: {
     url: 'LDAP url',

frontend/src/lang/tw.js

@@ -564,6 +564,10 @@ export default {
     clear_filter: '清空條件',
     recover_pwd: '是否恢復為初始密碼?',
     filter_method: '篩選條件',
+    filter: '篩選',
+    list: '列表項',
+    list_info: '請選擇列表中要展示的信息',
+    sure_delete: '確定刪除該用戶嗎？',
   },
   ldap: {
     url: 'LDAP地址',

frontend/src/lang/zh.js

@@ -565,6 +565,10 @@ export default {
     clear_filter: '清空条件',
     recover_pwd: '是否恢复为初始密码?',
     filter_method: '筛选条件',
+    filter: '筛选',
+    list: '列表项',
+    list_info: '请选择列表中要展示的信息',
+    sure_delete: '确定删除该用户吗？',
   },
   ldap: {
     url: 'LDAP地址',

frontend/src/styles/index.scss

@@ -888,3 +888,91 @@ div:focus {
   }
 }
 
+.el-tabs {
+  .el-tabs__item.is-active {
+    box-shadow: none !important;
+  }
+}
+
+.de-message {
+  min-width: 20px !important;
+  padding: 16px 20px !important;
+  flex-direction: row;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  span {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+    color: #1f2329;
+  }
+
+  i {
+    height: 14.666666984558105px;
+    width: 14.666669845581055px;
+    margin-right: 8.67px;
+  }
+}
+.de-message-fail {
+  border: 1px solid #f54a45 !important;
+  background: #fef1f1 !important;
+  i {
+    color: #f54a45;
+  }
+}
+
+.de-message-success {
+  border: 1px solid #34c724 !important;
+  background: #f0fbef !important;
+  i {
+    color: #34c724;
+  }
+}
+
+.pagination-cont {
+  text-align: right;
+  margin-top: 10px;
+  ::v-deep .el-pager li {
+    background-color: #fff;
+    border: 1px solid #bbbfc4;
+    border-radius: 4px;
+    color: #1f2329;
+    box-sizing: border-box;
+    line-height: 26px;
+    font-family: SF Pro Text;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  ::v-deep .btn-prev,
+  ::v-deep .btn-next {
+    background: #fff;
+    background-color: #fff;
+    border: 1px solid #bbbfc4;
+    border-radius: 4px;
+    color: #bbbfc4;
+  }
+
+  ::v-deep .el-pagination__total {
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #1f2329;
+    line-height: 28px;
+  }
+
+  ::v-deep .number.active,
+  ::v-deep .el-input__inner:hover {
+    border-color: #3370ff;
+    color: #3370ff !important;
+    background-color: #fff !important;
+  }
+
+  ::v-deep .el-icon-more {
+    border: none !important;
+  }
+}

frontend/src/views/system/datasource/DsConfiguration.vue

@@ -1039,7 +1039,7 @@ export default {
 
           for (var j = 0; j < this.apiItem.fields.length; j++) {
             if(this.apiItem.fields[j].name === jsonFields[i].name){
-              this.$refs.apiItemTable.toggleRowSelection(jsonFields[i]);
+              jsonFields[i].checked = false;
               this.$message.error(jsonFields[i].name + ', ' + i18n.t('datasource.has_repeat_field_name'))
               return
             }

frontend/src/views/system/user/filterUser.vue

@@ -354,17 +354,19 @@ export default {
 
   .filter {
     display: flex;
-    align-items: center;
-    height: 46px;
+    min-height: 46px;
     > :nth-child(1) {
-      margin-right: 88px;
       color: #1f2329;
       font-family: "PingFang SC";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
+      line-height: 24px;
+      white-space: nowrap;
+      width: 116px;
     }
     .filter-item {
+      flex: 1;
       .item,
       .more {
         font-family: PingFang SC;
@@ -378,6 +380,8 @@ export default {
         background: #f5f6f7;
         border-radius: 2px;
         cursor: pointer;
+        display: inline-block;
+        margin-bottom: 12px;
       }
 
       .active,

frontend/src/views/system/user/index.vue

@@ -30,21 +30,21 @@
           :class="[filterTexts.length ? 'active-btn filter-not-null' : 'filter-zero']"
           icon="iconfont icon-icon-filter"
           @click="filterShow"
-          >筛选<template v-if="filterTexts.length">
+          >{{ $t('user.filter') }}<template v-if="filterTexts.length">
             ({{ filterTexts.length }})
           </template>
         </el-button>
         <el-dropdown trigger="click" :hide-on-click="false">
           <el-button v-btnPress class="normal btn filter-zero" icon="el-icon-setting"
-            >列表项</el-button
+            >{{ $t('user.list') }}</el-button
           >
           <el-dropdown-menu class="list-colums-slect" slot="dropdown">
-            <p class="title">请选择列表中要展示的信息</p>
+            <p class="title">{{ $t('user.list_info') }}</p>
             <el-checkbox
               :indeterminate="isIndeterminate"
               v-model="checkAll"
               @change="handleCheckAllChange"
-              >全选</el-checkbox
+              >{{ $t('dataset.check_all')}}</el-checkbox
             >
             <el-checkbox-group
               v-model="checkedColumnNames"
@@ -483,7 +483,7 @@ export default {
       this.initSearch();
     },
     onCopy(e) {
-      this.$success(this.$t("commons.copy_success"));
+      this.openMessageSuccess("commons.copy_success");
     },
     onError(e) {},
     handleSizeChange(pageSize) {
@@ -531,7 +531,7 @@ export default {
       this.$refs.userEditer.init(row);
     },
     del(row) {
-      this.$confirm(this.$t("确定删除该用户吗？"), "", {
+      this.$confirm(this.$t("user.sure_delete"), "", {
         confirmButtonText: this.$t("commons.delete"),
         cancelButtonText: this.$t("commons.cancel"),
         cancelButtonClass: "de-confirm-fail-btn de-confirm-fail-cancel",
@@ -541,7 +541,7 @@ export default {
       })
         .then(() => {
           delUser(encodeURIComponent(row.userId)).then((res) => {
-            this.openMessageSuccess();
+            this.openMessageSuccess("commons.delete_success");
             this.initSearch();
           });
         })
@@ -549,11 +549,11 @@ export default {
           this.$info(this.$t("commons.delete_cancel"));
         });
     },
-    openMessageSuccess() {
+    openMessageSuccess(text) {
       const h = this.$createElement;
       this.$message({
         message: h("p", null, [
-          h("span", null, this.$t("commons.delete_success")),
+          h("span", null, this.$t(text)),
         ]),
         iconClass: "el-icon-success",
         customClass: "de-message-success de-message",
@@ -852,44 +852,6 @@ export default {
 }
 </style>
 <style lang="scss">
-.de-message {
-  min-width: 20px !important;
-  padding: 16px 20px !important;
-  flex-direction: row;
-  box-shadow: 0px 4px 8px 0px #1f23291a;
-  span {
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-    text-align: left;
-    color: #1f2329;
-  }
-
-  i {
-    height: 14.666666984558105px;
-    width: 14.666669845581055px;
-    margin-right: 8.67px;
-  }
-}
-.de-message-fail {
-  border: 1px solid #f54a45 !important;
-  background: #fef1f1 !important;
-  i {
-    color: #f54a45;
-  }
-}
-
-.de-message-success {
-  border: 1px solid #34c724 !important;
-  background: #f0fbef !important;
-  i {
-    color: #34c724;
-  }
-}
-</style>
-<style lang="scss">
 .de-confirm {
   border: none;
   .el-message-box__header {