Merge pull request #12558 from dataease/pr@dev-v2_st

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

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

@@ -65,7 +65,6 @@ const canEdit = ref(false)
 const queryConfig = ref()
 const defaultStyle = {
   border: '',
-  placeholder: '请选择',
   placeholderSize: 14,
   placeholderShow: true,
   background: '',
@@ -168,7 +167,6 @@ const setCustomStyle = val => {
     queryConditionSpacing,
     labelColorBtn,
     btnColor,
-    placeholder,
     placeholderSize,
     placeholderShow,
     labelShow
@@ -185,7 +183,6 @@ const setCustomStyle = val => {
       `${customStyle.placeholderSize + 18}px`
     )
   })
-  customStyle.placeholder = placeholder ?? '请选择'
   customStyle.titleShow = titleShow
   customStyle.titleColor = titleColor
   customStyle.labelColor = labelShow ? labelColor || '' : ''
@@ -310,7 +307,6 @@ const getCascadeList = () => {
 
 const getPlaceholder = computed(() => {
   return {
-    placeholder: customStyle.placeholder,
     placeholderShow: customStyle.placeholderShow
   }
 })

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

@@ -25,6 +25,7 @@ interface SelectConfig {
   displayType: string
   showEmpty: boolean
   id: string
+  placeholder: string
   resultMode: number
   displayId: string
   sort: string
@@ -83,7 +84,7 @@ const setCascadeDefault = inject('set-cascade-default', Function, true)
 
 const placeholderText = computed(() => {
   if (placeholder.value.placeholderShow) {
-    return placeholder.value.placeholder
+    return props.config.placeholder
   }
   return ' '
 })

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

@@ -25,6 +25,7 @@ interface SelectConfig {
   timeGranularity: DatePickType
   timeGranularityMultiple: DatePickType
   timeRange: TimeRange
+  placeholder: string
   setTimeRange: boolean
 }
 
@@ -65,7 +66,7 @@ const props = defineProps({
 const placeholder: Ref = inject('placeholder')
 const placeholderText = computed(() => {
   if (placeholder.value.placeholderShow) {
-    return placeholder.value.placeholder
+    return props.config.placeholder
   }
   return ' '
 })

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

@@ -21,6 +21,7 @@ interface SelectConfig {
   checkedFieldsMap: object
   displayType: string
   id: string
+  placeholder: string
   checkedFields: string[]
   treeFieldList: Array<any>
   dataset: {
@@ -58,7 +59,7 @@ const props = defineProps({
 const placeholder: Ref = inject('placeholder')
 const placeholderText = computed(() => {
   if (placeholder.value.placeholderShow) {
-    return placeholder.value.placeholder
+    return props.config.placeholder
   }
   return ' '
 })

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

@@ -482,7 +482,6 @@ export const dvMainStore = defineStore('dataVisualization', {
               fontStyleBtn: '',
               queryConditionWidth: 227,
               nameboxSpacing: 8,
-              placeholder: '请选择',
               placeholderShow: true,
               placeholderSize: 14,
               queryConditionSpacing: 16,

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

@@ -61,6 +61,23 @@ watch(
   }
 )
 
+const currentPlaceholder = ref()
+const currentSearch = ref({
+  placeholder: ''
+})
+
+const handleCurrentPlaceholder = val => {
+  const obj = props.element.propValue.find(ele => {
+    return ele.id === val
+  }) || {
+    placeholder: ''
+  }
+  if (obj.placeholder === undefined) {
+    obj.placeholder = ''
+  }
+  currentSearch.value = obj
+}
+
 const init = () => {
   state.commonBackground = cloneDeep(props.commonBackgroundPop)
   if (state.commonBackground['outerImage']) {
@@ -142,10 +159,13 @@ if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
   chart.value.customStyle.component = {
     ...chart.value.customStyle.component,
     placeholderShow: true,
-    placeholder: '请选择',
     placeholderSize: 14
   }
 }
+
+if (props.element.propValue.length) {
+  handleCurrentPlaceholder(props.element.propValue[0].id)
+}
 </script>
 
 <template>
@@ -337,18 +357,6 @@ if (!chart.value.customStyle.component.hasOwnProperty('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"
@@ -374,6 +382,32 @@ if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
                   controls-position="right"
                 />
               </div>
+              <div style="display: flex; align-items: center; width: 100%; margin-top: 8px">
+                <el-select
+                  v-model="currentPlaceholder"
+                  @change="handleCurrentPlaceholder"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="item in element.propValue.filter(ele => ele.displayType !== '8')"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </div>
+            </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 || !currentPlaceholder"
+                v-model.lazy="currentSearch.placeholder"
+              />
             </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox