dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 下拉过滤器设置为必填选项

Browse Source
This commit is contained in:
fit2cloud-chenyw 2023-11-09 15:38:24 +08:00
parent f27ce1d60a
commit d94189d153
10 changed files with 134 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
core/frontend/src/components/canvas/components/editor/DeEditor.vue
View File

@ -1258,7 +1258,10 @@ export default {
}
param = wrapperChild.getCondition && wrapperChild.getCondition()
const condition = formatCondition(param)
const vValid = valueValid(condition)
let vValid = valueValid(condition)
const required = element.options.attrs.required
condition.requiredInvalid = required && !vValid
vValid = vValid || required
const filterComponentId = condition.componentId
const conditionCanvasId = wrapperChild.getCanvasId && wrapperChild.getCanvasId()
Object.keys(result).forEach(viewId => {

5
core/frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -593,7 +593,10 @@ export default {
}
param = wrapperChild.getCondition && wrapperChild.getCondition()
const condition = formatCondition(param)
const vValid = valueValid(condition)
let vValid = valueValid(condition)
const required = element.options.attrs.required
condition.requiredInvalid = required && !vValid
vValid = vValid || required
const filterComponentId = condition.componentId
const conditionCanvasId = wrapperChild.getCanvasId && wrapperChild.getCanvasId()
Object.keys(result).forEach(viewId => {

60
core/frontend/src/components/canvas/customComponent/UserView.vue
View File

@ -28,8 +28,15 @@
{{ $t('chart.chart_error_tips') }}
</div>
</div>
<div v-if="view.unReadyMsg" class="chart-error-class">
<div class="chart-error-message-class">
{{ view.unReadyMsg }},{{ $t('chart.chart_show_error') }}
<br>
{{ $t('chart.chart_error_tips') }}
</div>
</div>
<plugin-com
v-if="chart.isPlugin"
v-else-if="chart.isPlugin"
:ref="element.propValue.id"
:component-name="chart.type + '-view'"
:obj="{active, chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
@ -601,16 +608,9 @@ export default {
created() {
this.refId = uuid.v1
if (this.element && this.element.propValue && this.element.propValue.viewId) {
// 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化
const unReadyList = []
const readyList = []
this.filters.forEach(f => {
if (f instanceof Promise) {
unReadyList.push(f)
} else {
readyList.push(f)
}
})
const group = this.groupFilter(this.filters)
const unReadyList = group.unReady
const readyList = group.ready
if (unReadyList.length) {
Promise.all(this.filters.filter(f => f instanceof Promise)).then(fList => {
this.filter.filter = readyList.concat(fList)
@ -622,6 +622,34 @@ export default {
}
},
methods: {
groupFilter(filters) {
const result = {
ready: [],
unReady: []
}
filters.forEach(f => {
if (f instanceof Promise) {
result.unReady.push(f)
} else {
result.ready.push(f)
}
})
return result
},
groupRequiredInvalid(filters) {
const result = {
ready: [],
unReady: []
}
filters.forEach(f => {
if (f.requiredInvalid) {
result.unReady.push(f)
} else {
result.ready.push(f)
}
})
return result
},
equalsAny,
tabSwitch(tabCanvasId) {
if (this.charViewS2ShowFlag && tabCanvasId === this.canvasId && this.$refs[this.element.propValue.id]) {
@ -791,6 +819,15 @@ export default {
},
getData(id, cache = true, dataBroadcast = false) {
if (id) {
const filters = this.filter.filter
const group = this.groupRequiredInvalid(filters)
if (group.unReady?.length) {
this.view.unReadyMsg = '请先完成必填项过滤器！'
this.getDataLoading = false
return
} else {
this.view.unReadyMsg = ''
}
if (this.getDataLoading || Vue.prototype.$currentHttpRequestList.get(`/chart/view/getData/${id}/${this.panelInfo.id}`)) {
const url = `/chart/view/getData/${id}/${this.panelInfo.id}`
Vue.prototype.$cancelRequest(url)
@ -812,6 +849,7 @@ export default {
if (!token && linkToken) {
method = viewInfo
}
const requestInfo = {
...this.filter,
cache: cache,

23
core/frontend/src/components/dataease/DeOutWidget.vue
View File

@ -26,9 +26,12 @@
<div
ref="deContentContainer"
class="condition-content"
:class="(element.options.attrs.showTitle && element.options.attrs.title) ? '' : 'condition-content-default'"
:class="{'condition-content-default' : !(element.options.attrs.showTitle && element.options.attrs.title)}"
>
<div class="condition-content-container">
<div
class="condition-content-container"
:class="{'widget-required' : element.options.attrs.required}"
>
<div class="first-element">
<div
:class="element.component === 'de-select-grid' ? 'first-element-grid-container': ''"
@ -55,6 +58,12 @@
</div>
</div>
<div
v-if="element.options.attrs.required"
class="widget-required-symbol"
>
<span>*</span>
</div>
</div>
</div>
</div>
@ -270,6 +279,16 @@ export default {
overflow: auto hidden;
letter-spacing: 0px !important;
width: 100%;
.widget-required {
width: calc(100% - 10px) !important;
float: left !important;
}
.widget-required-symbol {
color: #f54a45;
height: 40px;
line-height: 40px;
float: right;
}
}
.condition-content-container {

1
core/frontend/src/components/widget/bean/Condition.js
View File

@ -13,5 +13,6 @@ export class Condition {
this.viewIds = viewIds
this.parameters = parameters
this.isTree = isTree || false
this.requiredInvalid = false
}
}

13
core/frontend/src/components/widget/deWidget/DeSelect.vue
View File

@ -143,6 +143,11 @@ export default {
},
watch: {
'value': function(val, old) {
if (!this.inDraw) {
this.$emit('widget-value-changed', val)
}
},
'viewIds': function(value, old) {
if (typeof value === 'undefined' || value === old) return
this.fillFirstValue()
@ -214,6 +219,9 @@ export default {
if (!token && linkToken) {
method = linkMultFieldValues
}
if (!this.element.options.attrs.fieldId) {
return
}
const param = { fieldIds: this.element.options.attrs.fieldId.split(this.separator), sort: this.element.options.attrs.sort }
if (this.panelInfo.proxy) {
param.userId = this.panelInfo.proxy
@ -474,14 +482,9 @@ export default {
}
</style>
<style lang="scss">
.coustom-de-select {
background-color: var(--BgSelectColor, #FFFFFF) !important;
border-color: var(--BrSelectColor, #E4E7ED) !important;
// .popper__arrow::after{
// border-bottom-color: var(--BgSelectColor, #FFFFFF) !important;
// }
.popper__arrow,
.popper__arrow::after {

5
core/frontend/src/store/index.js
View File

@ -307,8 +307,11 @@ const data = {
},
addViewFilter(state, data) {
const required = data.component.options.attrs.required
const condition = formatCondition(data)
const vValid = valueValid(condition)
let vValid = valueValid(condition)
condition.requiredInvalid = required && !vValid
vValid = vValid || required
// 1.根据componentId过滤
const filterComponentId = condition.componentId
const canvasId = data.canvasId

26
core/frontend/src/views/panel/filter/FilterDialog.vue
View File

@ -267,6 +267,7 @@
<filter-head
:element="currentElement"
@dataset-name="dataSetName"
@required-change="requiredChange"
/>
<filter-control
@ -281,6 +282,7 @@
<filter-foot
:element="currentElement"
:control-attrs="myAttrs"
@widget-value-changed="widgetValChange"
/>
</div>
@ -391,13 +393,18 @@ export default {
datasetParams: [],
currentElement: null,
tempTreeData: null,
showTips: false
showTips: false,
widgetValue: null,
required: false
}
},
computed: {
isTree() {
return this.widget && this.widget.isTree
},
requiredMatch() {
return !this.required || !!this.widgetValue?.length
},
...mapState([
'componentData'
])
@ -408,7 +415,6 @@ export default {
if (values && values.length > 0) {
const fieldIds = values.map(val => val.id)
this.myAttrs.fieldId = fieldIds.join()
// this.myAttrs.dragItems = values
this.myAttrs.activeName = this.activeName
this.myAttrs.fieldsParent = this.fieldsParent
} else if (this.myAttrs && this.myAttrs.fieldId) {
@ -417,7 +423,9 @@ export default {
}
this.enableSureButton()
},
requiredMatch(val) {
this.enableSureButton()
},
keyWord(val) {
this.expandedArray = []
if (this.showDomType === 'field') {
@ -449,6 +457,7 @@ export default {
created() {
this.widget = this.widgetInfo
this.currentElement = JSON.parse(JSON.stringify(this.element))
this.required = !!this.currentElement.options.attrs.required
this.myAttrs = this.currentElement.options.attrs
this.treeNode(this.groupForm)
this.loadViews()
@ -467,6 +476,12 @@ export default {
bus.$off('valid-values-change', this.validateFilterValue)
},
methods: {
widgetValChange(val) {
this.widgetValue = val
},
requiredChange(val) {
this.required = val
},
dataSetName(tableId, callback) {
let result = null
if (tableId) {
@ -914,14 +929,13 @@ export default {
enableSureButton() {
let valid = true
const enable =
this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems
.length > 0
if (this.widget.validDynamicValue) {
valid = this.widget.validDynamicValue(this.currentElement)
}
this.$emit('sure-button-status', enable && valid)
this.$emit('sure-button-status', enable && valid && this.requiredMatch)
},
getElementInfo() {
@ -934,7 +948,7 @@ export default {
validateFilterValue(valid) {
const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems
.length > 0
this.$emit('sure-button-status', enable && valid)
this.$emit('sure-button-status', enable && valid && this.requiredMatch)
}
}

6
core/frontend/src/views/panel/filter/filterMain/FilterFoot.vue
View File

@ -27,6 +27,7 @@
is-config
:element="element"
:in-draw="false"
@widget-value-changed="widgetValChange"
/>
</div>
@ -39,6 +40,7 @@
<de-date-default
v-if="element.component === 'de-date' && element.serviceName !== 'timeDateRangeWidget'"
:element="element"
@widget-value-changed="widgetValChange"
/>
</el-card>
@ -49,6 +51,7 @@
<de-date-range-default
v-if="element.component === 'de-date' && element.serviceName === 'timeDateRangeWidget'"
:element="element"
@widget-value-changed="widgetValChange"
/>
</el-card>
@ -83,6 +86,9 @@ export default {
},
methods: {
selectFirstChange(val) {
},
widgetValChange(val) {
this.$emit('widget-value-changed', val)
}
}
}

18
core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
View File

@ -1,6 +1,6 @@
<template>
<el-row>
<el-col :span="24">
<el-col :span="20">
<div class="filter-field">
<div class="field-content">
@ -38,6 +38,14 @@
</div>
</div>
</el-col>
<el-col :span="4">
<div class="de-filter-required">
<el-checkbox
v-model="element.options.attrs.required"
@change="requiredChange"
>{{ $t('commons.required') }}</el-checkbox>
</div>
</el-col>
</el-row>
</template>
@ -71,6 +79,9 @@ export default {
},
methods: {
requiredChange(val) {
this.$emit('required-change', val)
},
getTableName(tableId) {
let tableName = null
this.$emit('dataset-name', tableId, t => { tableName = t })
@ -94,6 +105,11 @@ export default {
</script>
<style lang="scss" scoped>
.de-filter-required {
height: 40px;
line-height: 40px;
float: right;
}
.filter-field {
border-radius: 4px;
height: 40px;