forked from github/dataease
fix(过滤组件): 下拉树组件搜索选项时调整为与其他组件逻辑一致性
This commit is contained in:
dataeaseShu
parent
8a9dee72fb
commit
341849641f
@ -41,11 +41,6 @@
|
||||
size="mini"
|
||||
class="input-with-select mb10"
|
||||
>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
@click="_searchFun"
|
||||
/>
|
||||
</el-input>
|
||||
<p
|
||||
v-if="selectParams.multiple"
|
||||
@ -90,6 +85,7 @@
|
||||
<script>
|
||||
import { on, off } from './dom'
|
||||
import { each, guid } from './utils'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
name: 'ElTreeSelect',
|
||||
components: {},
|
||||
@ -217,6 +213,9 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keywords() {
|
||||
this.searchWithKey()
|
||||
},
|
||||
ids: function(val) {
|
||||
if (val !== undefined) {
|
||||
this.$nextTick(() => {
|
||||
@ -312,6 +311,9 @@ export default {
|
||||
}
|
||||
this.$set(this.selectParams, 'multiple', multiple)
|
||||
},
|
||||
searchWithKey: _.debounce(function() {
|
||||
this._searchFun()
|
||||
}, 300),
|
||||
_searchFun() {
|
||||
this.$emit('searchFun', this.keywords)
|
||||
},
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
<template>
|
||||
<el-radio-group
|
||||
style="height: 40px; line-height: 40px"
|
||||
@change="visualChange"
|
||||
v-model="selectValue"
|
||||
style="height: 40px; align-items: center; display: flex"
|
||||
@change="visualChange"
|
||||
>
|
||||
<template v-for="item in options">
|
||||
<el-radio
|
||||
v-if="radioStyle.showStyle === 'single'"
|
||||
:key="item.id + 'radio'"
|
||||
:label="item.id"
|
||||
class="is-custom-select"
|
||||
v-if="radioStyle.showStyle === 'single'"
|
||||
:disabled="itemDisabled"
|
||||
>{{ item.text }}</el-radio
|
||||
>
|
||||
{{ item.text }}
|
||||
</el-radio>
|
||||
<el-radio-button
|
||||
v-else
|
||||
:disabled="itemDisabled"
|
||||
:key="item.id + 'tab'"
|
||||
:disabled="itemDisabled"
|
||||
class="is-custom-select"
|
||||
:label="item.id"
|
||||
>{{ item.text }}</el-radio-button
|
||||
>
|
||||
>{{ item.text }}
|
||||
</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
|
||||
@ -269,7 +269,6 @@
|
||||
<filter-head
|
||||
:element="currentElement"
|
||||
@dataset-name="dataSetName"
|
||||
@required-change="requiredChange"
|
||||
/>
|
||||
|
||||
<filter-control
|
||||
@ -279,6 +278,7 @@
|
||||
:child-views="childViews"
|
||||
:dataset-params="datasetParams"
|
||||
:active-name="activeName"
|
||||
@required-change="requiredChange"
|
||||
/>
|
||||
|
||||
<filter-foot
|
||||
|
||||
@ -1,34 +1,53 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-col :span="11">
|
||||
<div class="filter-options-left">
|
||||
<el-switch
|
||||
<el-checkbox
|
||||
v-model="element.options.attrs.required"
|
||||
@change="requiredChange"
|
||||
>{{ $t('commons.required') }}</el-checkbox>
|
||||
<el-checkbox
|
||||
v-if="widget.showSwitch"
|
||||
v-model="attrs.multiple"
|
||||
:active-text="$t('panel.multiple_choice')"
|
||||
@change="multipleChange"
|
||||
/>
|
||||
>{{ $t('panel.multiple_choice') }}</el-checkbox>
|
||||
<span
|
||||
v-if="widget.isSortWidget && widget.isSortWidget()"
|
||||
style="padding-left: 10px;"
|
||||
>
|
||||
|
||||
<filter-sort
|
||||
:widget="widget"
|
||||
:element="element"
|
||||
@sort-change="sortChange"
|
||||
/>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="16">
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
append-to-body
|
||||
:show-close="false"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="sureRequired"
|
||||
>
|
||||
{{ $t('time.dropdown_display_must') }}
|
||||
<div style="text-align: end;margin-top: 16px;">
|
||||
<span slot="footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="dialogVisible = false"
|
||||
>{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="sureRequired"
|
||||
>{{ $t('commons.confirm') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-col :span="13">
|
||||
<div class="filter-options-right">
|
||||
<span style="padding-right: 10px;">
|
||||
|
||||
|
||||
<el-checkbox
|
||||
v-model="attrs.showTitle"
|
||||
@change="showTitleChange"
|
||||
@ -335,6 +354,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'start',
|
||||
dialogVisible: false,
|
||||
tabsOption: [
|
||||
{ label: this.$t('dataset.start_time'), name: 'start' },
|
||||
{ label: this.$t('dataset.end_time'), name: 'end' }
|
||||
@ -408,11 +428,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'activeName': {
|
||||
handler(newName, oldName) {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -443,6 +458,21 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sureRequired() {
|
||||
this.element.options.attrs.required = false
|
||||
this.dialogVisible = false
|
||||
this.$emit('required-change', false)
|
||||
},
|
||||
requiredChange(val) {
|
||||
if (val === false && (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple)) {
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.element.options.attrs.required = true
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$emit('required-change', val)
|
||||
},
|
||||
handlerVisibleEnableParameters() {
|
||||
if (this.attrs.showEmpty) {
|
||||
this.visibleEnableParameters = !this.visibleEnableParameters
|
||||
@ -532,6 +562,10 @@ export default {
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
height: 50px;
|
||||
|
||||
.el-checkbox {
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-options-right {
|
||||
@ -541,7 +575,6 @@ export default {
|
||||
justify-content: flex-end;
|
||||
flex-wrap: nowrap;
|
||||
height: 50px;
|
||||
|
||||
|
||||
.more-select-btn {
|
||||
display: inline-flex;
|
||||
|
||||
@ -45,39 +45,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col
|
||||
class="filter-required-container"
|
||||
>
|
||||
<div class="de-filter-required">
|
||||
<el-checkbox
|
||||
v-model="element.options.attrs.required"
|
||||
@change="requiredChange"
|
||||
>{{ $t('commons.required') }}</el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
append-to-body
|
||||
:show-close="false"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="sureRequired"
|
||||
>
|
||||
{{ $t('time.dropdown_display_must') }}
|
||||
<div style="text-align: end;margin-top: 16px;">
|
||||
<span slot="footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="dialogVisible = false"
|
||||
>{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="sureRequired"
|
||||
>{{ $t('commons.confirm') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
@ -98,26 +65,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sureRequired() {
|
||||
this.element.options.attrs.required = false
|
||||
this.dialogVisible = false
|
||||
},
|
||||
requiredChange(val) {
|
||||
if (val === false && (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple)) {
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.element.options.attrs.required = true
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$emit('required-change', val)
|
||||
},
|
||||
getTableName(tableId) {
|
||||
let tableName = null
|
||||
this.$emit('dataset-name', tableId, t => { tableName = t })
|
||||
@ -145,7 +93,6 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.filter-field-container {
|
||||
width: calc(100% - 70px);
|
||||
float: left;
|
||||
}
|
||||
.filter-required-container {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<span class="filter-line"></span>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="mini"
|
||||
@ -7,8 +8,8 @@
|
||||
>
|
||||
|
||||
<span class="el-dropdown-link filter-sort-span">
|
||||
{{ $t('chart.sort') }}
|
||||
<i class="el-icon-sort i-filter i-filter-active" />
|
||||
{{ $t('chart.sort') }}
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
@ -434,13 +435,50 @@ export default {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.filter-line {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: #BBBFC4;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.filter-sort-span {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: #1F2329;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 56px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 4px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background: #1F23291A;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
color: #3370FF;
|
||||
&::after {
|
||||
background: #3370FF1A;
|
||||
}
|
||||
}
|
||||
i {
|
||||
margin-left: 1px;
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__title {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user