feat(查询组件): 查询组件 placeholder 内容支持设置 #11881

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -63,6 +63,8 @@ const canEdit = ref(false)
 const queryConfig = ref()
 const defaultStyle = {
   border: '',
+  placeholder: '请选择',
+  placeholderShow: true,
   background: '',
   text: '',
   layout: 'horizontal',
@@ -151,7 +153,6 @@ const setCustomStyle = val => {
     layout,
     titleShow,
     titleColor,
-    textColorShow,
     title,
     fontSize,
     fontWeight,
@@ -164,12 +165,16 @@ const setCustomStyle = val => {
     queryConditionSpacing,
     labelColorBtn,
     btnColor,
+    placeholder,
+    placeholderShow,
     labelShow
   } = val
   customStyle.background = bgColorShow ? bgColor || '' : ''
   customStyle.border = borderShow ? borderColor || '' : ''
   customStyle.btnList = [...btnList]
   customStyle.layout = layout
+  customStyle.placeholderShow = placeholderShow ?? true
+  customStyle.placeholder = placeholder ?? '请选择'
   customStyle.titleShow = titleShow
   customStyle.titleColor = titleColor
   customStyle.labelColor = labelShow ? labelColor || '' : ''
@@ -177,7 +182,7 @@ const setCustomStyle = val => {
   customStyle.fontWeight = labelShow ? fontWeight || '' : ''
   customStyle.fontStyle = labelShow ? fontStyle || '' : ''
   customStyle.title = title
-  customStyle.text = textColorShow ? text || '' : ''
+  customStyle.text = customStyle.placeholderShow ? text || '' : ''
   customStyle.titleLayout = titleLayout
   customStyle.fontSizeBtn = fontSizeBtn || '14'
   customStyle.fontWeightBtn = fontWeightBtn
@@ -292,6 +297,13 @@ const getCascadeList = () => {
   return props.element.cascade
 }
 
+const getPlaceholder = computed(() => {
+  return {
+    placeholder: customStyle.placeholder,
+    placeholderShow: customStyle.placeholderShow
+  }
+})
+
 const isConfirmSearch = id => {
   if (componentWithSure.value) return
   queryDataForId(id)
@@ -303,6 +315,7 @@ provide('release-unmount-select', releaseSelect)
 provide('query-data-for-id', queryDataForId)
 provide('com-width', getQueryConditionWidth)
 provide('cascade-list', getCascadeList)
+provide('placeholder', getPlaceholder)
 
 onBeforeUnmount(() => {
   emitter.off(`addQueryCriteria${element.value.id}`)

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

@@ -73,6 +73,7 @@ const loading = ref(false)
 const multiple = ref(false)
 const options = shallowRef([])
 const unMountSelect: Ref = inject('unmount-select')
+const placeholder: Ref = inject('placeholder')
 const releaseSelect = inject('release-unmount-select', Function, true)
 const queryDataForId = inject('query-data-for-id', Function, true)
 const isConfirmSearch = inject('is-confirm-search', Function, true)
@@ -80,6 +81,12 @@ const queryConditionWidth = inject('com-width', Function, true)
 const cascadeList = inject('cascade-list', Function, true)
 const setCascadeDefault = inject('set-cascade-default', Function, true)
 
+const placeholderText = computed(() => {
+  if (placeholder.value.placeholderShow) {
+    return placeholder.value.placeholder
+  }
+  return ' '
+})
 const cascade = computed(() => {
   return cascadeList() || []
 })
@@ -583,6 +590,7 @@ defineExpose({
     key="multiple"
     ref="mult"
     v-model="selectValue"
+    :placeholder="placeholderText"
     v-loading="loading"
     filterable
     @change="handleValueChange"
@@ -604,6 +612,7 @@ defineExpose({
     v-else
     v-model="selectValue"
     key="single"
+    :placeholder="placeholderText"
     v-loading="loading"
     @change="handleValueChange"
     clearable

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, onBeforeMount, type PropType, inject, computed, nextTick } from 'vue'
+import { toRefs, onBeforeMount, Ref, type PropType, inject, computed, nextTick } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 interface SelectConfig {
@@ -51,6 +51,14 @@ const props = defineProps({
     default: false
   }
 })
+
+const placeholder: Ref = inject('placeholder')
+const placeholderText = computed(() => {
+  if (placeholder.value.placeholderShow) {
+    return placeholder.value.placeholder
+  }
+  return ' '
+})
 const { config } = toRefs(props)
 const setParams = () => {
   const {
@@ -103,6 +111,7 @@ const lineWidth = computed(() => {
       <el-input
         :style="selectStyle"
         @blur="handleValueChange"
+        :placeholder="placeholderText"
         class="condition-value-input"
         v-model="config.conditionValueF"
       />
@@ -124,6 +133,7 @@ const lineWidth = computed(() => {
       <el-input
         :style="selectStyle"
         @blur="handleValueChange"
+        :placeholder="placeholderText"
         class="condition-value-input"
         v-model="config.conditionValueS"
       />

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed, inject } from 'vue'
+import { toRefs, PropType, ref, Ref, onBeforeMount, watch, nextTick, computed, inject } from 'vue'
 import { type DatePickType } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import type { ManipulateType } from 'dayjs'
@@ -62,6 +62,13 @@ const props = defineProps({
     default: false
   }
 })
+const placeholder: Ref = inject('placeholder')
+const placeholderText = computed(() => {
+  if (placeholder.value.placeholderShow) {
+    return placeholder.value.placeholder
+  }
+  return ' '
+})
 const selectValue = ref()
 const multiple = ref(false)
 const dvMainStore = dvMainStoreWithOut()
@@ -413,8 +420,8 @@ const formatDate = computed(() => {
     "
     @change="handleValueChange"
     :range-separator="$t('cron.to')"
-    :start-placeholder="$t('datasource.start_time')"
-    :end-placeholder="$t('datasource.end_time')"
+    :start-placeholder="placeholderText"
+    :end-placeholder="placeholderText"
   />
   <el-date-picker
     v-else
@@ -422,7 +429,7 @@ const formatDate = computed(() => {
     :type="config.timeGranularity"
     @change="handleValueChange"
     :style="selectStyle"
-    :placeholder="$t('commons.date.select_date_time')"
+    :placeholder="placeholderText"
   />
   <div
     v-if="dvMainStore.mobileInPc"

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

@@ -8,6 +8,7 @@ import {
   onMounted,
   computed,
   inject,
+  Ref,
   shallowRef
 } from 'vue'
 import { cloneDeep, debounce } from 'lodash-es'
@@ -53,6 +54,14 @@ const props = defineProps({
     default: false
   }
 })
+
+const placeholder: Ref = inject('placeholder')
+const placeholderText = computed(() => {
+  if (placeholder.value.placeholderShow) {
+    return placeholder.value.placeholder
+  }
+  return ' '
+})
 const { config } = toRefs(props)
 
 const multiple = ref(false)
@@ -231,6 +240,7 @@ const selectStyle = computed(() => {
     :render-after-expand="false"
     show-checkbox
     showBtn
+    :placeholder="placeholderText"
     collapse-tags
     :showWholePath="showWholePath"
     collapse-tags-tooltip
@@ -245,6 +255,7 @@ const selectStyle = computed(() => {
     :data="treeOptionList"
     check-strictly
     clearable
+    :placeholder="placeholderText"
     :render-after-expand="false"
     v-else-if="!multiple && !loading"
     key="singleTree"
@@ -256,6 +267,7 @@ const selectStyle = computed(() => {
     v-model="fakeValue"
     v-loading="loading"
     :data="[]"
+    :placeholder="placeholderText"
     :render-after-expand="false"
     v-else
     key="fakeTree"

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -482,6 +482,8 @@ export const dvMainStore = defineStore('dataVisualization', {
               fontStyleBtn: '',
               queryConditionWidth: 227,
               nameboxSpacing: 8,
+              placeholder: '请选择',
+              placeholderShow: true,
               queryConditionSpacing: 16,
               labelColorBtn: '#ffffff',
               btnColor: '#3370ff'

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

@@ -69,6 +69,14 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
     btnColor: '#3370ff'
   }
 }
+
+if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
+  chart.value.customStyle.component = {
+    ...chart.value.customStyle.component,
+    placeholderShow: true,
+    placeholder: '请选择'
+  }
+}
 </script>
 
 <template>
@@ -166,12 +174,25 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
               <el-checkbox
                 :effect="themes"
                 size="small"
-                v-model="chart.customStyle.component.textColorShow"
+                v-model="chart.customStyle.component.placeholderShow"
               >
-                提示文字颜色
+                提示词
               </el-checkbox>
             </el-form-item>
             <el-form-item
+              label="提示词"
+              class="form-item"
+              style="padding-left: 20px"
+              :class="'form-item-' + themes"
+            >
+              <el-input
+                :effect="themes"
+                :disabled="!chart.customStyle.component.placeholderShow"
+                v-model.lazy="chart.customStyle.component.placeholder"
+              />
+            </el-form-item>
+            <el-form-item
+              label="提示词颜色"
               class="form-item"
               style="padding-left: 20px"
               :class="'form-item-' + themes"
@@ -181,7 +202,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
                 :trigger-width="108"
                 is-custom
                 v-model="chart.customStyle.component.text"
-                :disabled="!chart.customStyle.component.textColorShow"
+                :disabled="!chart.customStyle.component.placeholderShow"
                 :predefine="predefineColors"
               />
             </el-form-item>