diff --git a/frontend/src/components/ElTreeSelect/index.vue b/frontend/src/components/ElTreeSelect/index.vue index af475cab2a..cbb1b28644 100644 --- a/frontend/src/components/ElTreeSelect/index.vue +++ b/frontend/src/components/ElTreeSelect/index.vue @@ -33,6 +33,7 @@ +

{{ $t('dataset.check_all') }}

{} } }, 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; diff --git a/frontend/src/components/ElVisualSelect/index.vue b/frontend/src/components/ElVisualSelect/index.vue index 96596484aa..eeda732b70 100644 --- a/frontend/src/components/ElVisualSelect/index.vue +++ b/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" > - +

{{ $t('dataset.check_all') }}

+ @@ -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; + } diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue index 969c2b556e..ce3aac9589 100644 --- a/frontend/src/components/widget/DeWidget/DeSelect.vue +++ b/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" > { 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() }) }, diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue index 3df7e2a9ad..8773586e06 100644 --- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue +++ b/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 } } }, diff --git a/frontend/src/directive/index.js b/frontend/src/directive/index.js index edb3f4f522..e44e82bfae 100644 --- a/frontend/src/directive/index.js +++ b/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) } } diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index fd02cbac02..41c7a12949 100644 --- a/frontend/src/lang/en.js +++ b/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', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 8bc3716a97..ff160c5712 100644 --- a/frontend/src/lang/tw.js +++ b/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地址', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index cb557a7e8e..451cde01a4 100644 --- a/frontend/src/lang/zh.js +++ b/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地址', diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 81324cd956..8dc0a4483b 100644 --- a/frontend/src/styles/index.scss +++ b/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; + } +} \ No newline at end of file diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue index 12908135da..acb4bc7d4e 100644 --- a/frontend/src/views/system/datasource/DsConfiguration.vue +++ b/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 } diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue index 58b78d054e..16a89a77d6 100644 --- a/frontend/src/views/system/user/filterUser.vue +++ b/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, diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue index 852426a6d7..1f2d6df965 100644 --- a/frontend/src/views/system/user/index.vue +++ b/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" - >筛选