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

feat(查询组件): 查询条件的宽度可单独调整

Browse Source
This commit is contained in:
dataeaseShu 2024-11-13 11:05:28 +08:00
parent 02605e56d3
commit cca8db734d
7 changed files with 88 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/core-frontend/src/custom-component/v-query/NumberInput.vue
View File

@ -5,6 +5,7 @@ interface SelectConfig {
defaultValueCheck: boolean
defaultNumValueEnd: number
numValueEnd: number
queryConditionWidth: number
numValueStart: number
defaultNumValueStart: number
placeholder: string
@ -24,6 +25,7 @@ const props = defineProps({
default: () => {
return {
id: '',
queryConditionWidth: 0,
defaultNumValueEnd: '',
defaultNumValueStart: '',
numValueEnd: '',
@ -55,8 +57,18 @@ onBeforeMount(() => {
const queryConditionWidth = inject('com-width', Function, true)
const customStyle = inject<{ background: string }>('$custom-style-filter')
const isConfirmSearch = inject('is-confirm-search', Function, true)
const getCustomWidth = () => {
if (placeholder?.value?.placeholderShow) {
if (props.config.queryConditionWidth === undefined) {
return queryConditionWidth()
}
return props.config.queryConditionWidth
}
return 227
}
const selectStyle = computed(() => {
return { width: queryConditionWidth() + 'px' }
return { width: getCustomWidth() + 'px' }
})
const handleValueChange = () => {
if (!props.isConfig) {

14
core/core-frontend/src/custom-component/v-query/Select.vue
View File

@ -26,6 +26,7 @@ interface SelectConfig {
displayType: string
showEmpty: boolean
id: string
queryConditionWidth: number
placeholder: string
resultMode: number
displayId: string
@ -55,6 +56,7 @@ const props = defineProps({
default: () => {
return {
selectValue: '',
queryConditionWidth: 0,
resultMode: 0,
defaultValue: '',
displayType: '',
@ -561,8 +563,18 @@ const init = () => {
debounceOptions(optionValueSource)
}
const getCustomWidth = () => {
if (placeholder?.value?.placeholderShow) {
if (props.config.queryConditionWidth === undefined) {
return queryConditionWidth()
}
return props.config.queryConditionWidth
}
return 227
}
const selectStyle = computed(() => {
return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
return props.isConfig ? {} : { width: getCustomWidth() + 'px' }
})
const mult = ref()

16
core/core-frontend/src/custom-component/v-query/TextSearch.vue
View File

@ -7,6 +7,7 @@ interface SelectConfig {
id: string
conditionValueOperatorF: string
conditionValueF: string
queryConditionWidth: string
hideConditionSwitching: boolean
conditionValueOperatorS: string
conditionValueS: string
@ -46,6 +47,7 @@ const props = defineProps({
return {
id: '',
conditionType: 0,
queryConditionWidth: 0,
conditionValueOperatorF: 'eq',
conditionValueF: '',
conditionValueOperatorS: 'like',
@ -82,8 +84,18 @@ onBeforeMount(() => {
const queryConditionWidth = inject('com-width', Function, true)
const customStyle = inject<{ background: string }>('$custom-style-filter')
const isConfirmSearch = inject('is-confirm-search', Function, true)
const getCustomWidth = () => {
if (placeholder?.value?.placeholderShow) {
if (props.config.queryConditionWidth === undefined) {
return queryConditionWidth()
}
return props.config.queryConditionWidth
}
return 227
}
const selectStyle = computed(() => {
return { width: queryConditionWidth() + 'px' }
return { width: getCustomWidth() + 'px' }
})
const handleValueChange = () => {
if (!props.isConfig) {
@ -94,7 +106,7 @@ const handleValueChange = () => {
}
}
const lineWidth = computed(() => {
return { width: queryConditionWidth() - 15 + 'px' }
return { width: getCustomWidth() - 15 + 'px' }
})
const handleInnerMouseDown = e => {

14
core/core-frontend/src/custom-component/v-query/Time.vue
View File

@ -22,6 +22,7 @@ interface SelectConfig {
defaultValue: any
defaultValueCheck: boolean
id: string
queryConditionWidth: number
displayType: string
timeGranularity: DatePickType
timeGranularityMultiple: DatePickType
@ -38,6 +39,7 @@ const props = defineProps({
return {
selectValue: '',
defaultValue: '',
queryConditionWidth: 0,
defaultValueCheck: false,
displayType: '1',
timeGranularity: 'date',
@ -167,13 +169,21 @@ const init = () => {
}
const queryConditionWidth = inject('com-width', Function, true)
const getCustomWidth = () => {
if (placeholder?.value?.placeholderShow) {
if (props.config.queryConditionWidth === undefined) {
return queryConditionWidth()
}
return props.config.queryConditionWidth
}
return 227
}
const isConfirmSearch = inject('is-confirm-search', Function, true)
const selectStyle = computed(() => {
return props.isConfig
? {}
: {
width:
(multiple.value ? queryConditionWidth() * 2 : queryConditionWidth()) + 'px !important'
width: (multiple.value ? getCustomWidth() * 2 : getCustomWidth()) + 'px !important'
}
})

13
core/core-frontend/src/custom-component/v-query/Tree.vue
View File

@ -17,6 +17,7 @@ interface SelectConfig {
selectValue: any
defaultMapValue: any
defaultValue: any
queryConditionWidth: number
resultMode: number
checkedFieldsMap: object
displayType: string
@ -41,6 +42,7 @@ const props = defineProps({
return {
selectValue: '',
defaultValue: '',
queryConditionWidth: 0,
displayType: '',
resultMode: 0,
defaultValueCheck: false,
@ -227,8 +229,17 @@ watch(
)
const fakeValue = ''
const treeValue = ref()
const getCustomWidth = () => {
if (placeholder?.value?.placeholderShow) {
if (props.config.queryConditionWidth === undefined) {
return queryConditionWidth()
}
return props.config.queryConditionWidth
}
return 227
}
const selectStyle = computed(() => {
return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
return props.isConfig ? {} : { width: getCustomWidth() + 'px' }
})
</script>

4
core/core-frontend/src/locales/zh-CN.ts
View File

@ -2643,7 +2643,9 @@ export default {
time_selection: '时间选择',
select_a_field: '层级字段不能为空,请选择字段!',
add_level: '添加层级',
tree_query_field: '下拉树查询字段'
tree_query_field: '下拉树查询字段',
query_condition_width: '查询条件宽度',
custom_condition_style: '自定义条件样式'
},
panel: {
column_name: '字段名称'

36
core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
View File

@ -113,7 +113,8 @@ watch(
const currentPlaceholder = ref()
const currentSearch = ref({
placeholder: ''
placeholder: '',
queryConditionWidth: 227
})
const handleCurrentPlaceholder = val => {
@ -125,6 +126,10 @@ const handleCurrentPlaceholder = val => {
if (obj.placeholder === undefined) {
obj.placeholder = ''
}
if (obj.queryConditionWidth === undefined) {
obj.queryConditionWidth = 227
}
currentSearch.value = obj
snapshotStore.recordSnapshotCacheToMobile('propValue')
}
@ -463,7 +468,7 @@ initParams()
@change="handleCurrentPlaceholderCustomChange"
v-model="chart.customStyle.component.placeholderShow"
>
提示词
{{ t('v_query.custom_condition_style') }}
</el-checkbox>
</el-form-item>
<el-form-item
@ -521,6 +526,20 @@ initParams()
v-model.lazy="currentSearch.placeholder"
/>
</el-form-item>
<el-form-item
:label="t('v_query.query_condition_width')"
class="form-item"
style="padding-left: 20px"
:class="'form-item-' + themes"
>
<el-input-number
:effect="themes"
controls-position="right"
@change="handleCurrentPlaceholderChange"
:disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
v-model.lazy="currentSearch.queryConditionWidth"
/>
</el-form-item>
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
<el-checkbox
:effect="themes"
@ -544,19 +563,6 @@ initParams()
:predefine="predefineColors"
/>
</el-form-item>
<el-form-item
:effect="themes"
class="form-item"
label="查询条件宽度"
:class="'form-item-' + themes"
>
<el-input-number
v-model="chart.customStyle.component.queryConditionWidth"
:min="0"
:effect="themes"
controls-position="right"
/>
</el-form-item>
<el-form-item
:effect="themes"
class="form-item"