Merge pull request #13274 from dataease/pr@dev-v2_dzz

Pr@dev v2 dzz
2025-02-25 03:52:59 +08:00 · 2024-11-13 14:42:04 +08:00 · 2024-11-13 14:42:04 +08:00 · 268669a8a8
commit 268669a8a8
parent 0cf3647561 0d068b1b79
11 changed files with 165 additions and 49 deletions
--- a/core/core-frontend/src/custom-component/v-query/NumberInput.vue
+++ b/core/core-frontend/src/custom-component/v-query/NumberInput.vue
@ -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) {
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@ -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()
@ -640,6 +652,9 @@ defineExpose({
 <style lang="less">
 .filter-select-popper_class {
  --ed-fill-color-light: #f5f7fa47;
+  .ed-vl__window.ed-select-dropdown__list {
+    min-width: 200px;
+  }
  .ed-select-dropdown__option-item {
    .ed-checkbox__label:hover {
      color: #1f2329;
--- a/core/core-frontend/src/custom-component/v-query/TextSearch.vue
+++ b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
@ -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 => {
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@ -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'
      }
 })

--- a/core/core-frontend/src/custom-component/v-query/Tree.vue
+++ b/core/core-frontend/src/custom-component/v-query/Tree.vue
@ -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>

--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@ -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: '字段名称'
--- a/core/core-frontend/src/utils/treeDraggble.ts
+++ b/core/core-frontend/src/utils/treeDraggble.ts
@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash-es'

-const treeDraggble = (state, key, req, type) => {
+const treeDraggble = (state, key, req, type, originResourceTree) => {
  let dragNodeParentId = ''
  let dragNodeId = ''
  let dragNodeIndex = 0
@ -106,14 +106,18 @@ const treeDraggble = (state, key, req, type) => {
      dfsTreeNodeBack(state[key], '0', params)
    }

-    req(params).catch(() => {
-      if (dragNodeParentId === '0') {
-        state[key].splice(dragNodeIndex, 0, draggingNode.data)
-        return
-      }
+    req(params)
+      .then(() => {
+        originResourceTree.value = cloneDeep(state[key])
+      })
+      .catch(() => {
+        if (dragNodeParentId === '0') {
+          state[key].splice(dragNodeIndex, 0, draggingNode.data)
+          return
+        }

-      dfsTreeNodeReset(state[key], draggingNode.data)
-    })
+        dfsTreeNodeReset(state[key], draggingNode.data)
+      })
  }

  return {
--- a/core/core-frontend/src/utils/treeDraggbleChart.ts
+++ b/core/core-frontend/src/utils/treeDraggbleChart.ts
@ -114,14 +114,18 @@ const treeDraggbleChart = (state, key, type) => {
      dfsTreeNodeBack(state[key], '0', params)
    }

-    moveResource(params).catch(() => {
-      if (dragNodeParentId === '0') {
-        state[key].splice(dragNodeIndex, 0, draggingNode.data)
-        return
-      }
+    moveResource(params)
+      .then(() => {
+        state.originResourceTree = cloneDeep(state[key])
+      })
+      .catch(() => {
+        if (dragNodeParentId === '0') {
+          state[key].splice(dragNodeIndex, 0, draggingNode.data)
+          return
+        }

-      dfsTreeNodeReset(state[key], draggingNode.data)
-    })
+        dfsTreeNodeReset(state[key], draggingNode.data)
+      })
  }

  return {
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@ -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')
 }
@ -301,6 +306,44 @@ initParams()
                自定义组件背景
              </el-checkbox>
            </el-form-item>
+            <el-row style="padding-left: 20px" :gutter="8">
+              <el-col :span="12">
+                <el-form-item
+                  :label="t('visualization.inner_padding')"
+                  class="form-item w100"
+                  :class="'form-item-' + themes"
+                >
+                  <el-input-number
+                    style="width: 100%"
+                    :effect="themes"
+                    controls-position="right"
+                    size="middle"
+                    :min="0"
+                    :max="100"
+                    v-model="commonBackgroundPop.innerPadding"
+                    @change="onBackgroundChange"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  :label="t('visualization.board_radio')"
+                  class="form-item w100"
+                  :class="'form-item-' + themes"
+                >
+                  <el-input-number
+                    style="width: 100%"
+                    :effect="themes"
+                    controls-position="right"
+                    size="middle"
+                    :min="0"
+                    :max="100"
+                    v-model="commonBackgroundPop.borderRadius"
+                    @change="onBackgroundChange"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
            <el-form-item
              style="padding-left: 20px"
              class="form-item margin-bottom-8"
@ -425,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
@ -483,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"
@ -506,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"
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@ -152,10 +152,10 @@ const resourceOptFinish = param => {
  }
 }

-let originResourceTree = []
+const originResourceTree = shallowRef([])

 const sortTypeChange = sortType => {
-  state.datasetTree = treeSort(originResourceTree, sortType)
+  state.datasetTree = treeSort(originResourceTree.value, sortType)
  state.curSortType = sortType
  wsCache.set('TreeSort-dataset', state.curSortType)
 }
@ -253,7 +253,8 @@ const { handleDrop, allowDrop, handleDragStart } = treeDraggble(
  state,
  'datasetTree',
  moveDatasetTree,
-  'dataset'
+  'dataset',
+  originResourceTree
 )

 const generateColumns = (arr: Field[]) =>
@ -293,12 +294,12 @@ const getData = () => {
      if (nodeData.length && nodeData[0]['id'] === '0' && nodeData[0]['name'] === 'root') {
        rootManage.value = nodeData[0]['weight'] >= 7
        state.datasetTree = nodeData[0]['children'] || []
-        originResourceTree = cloneDeep(unref(state.datasetTree))
+        originResourceTree.value = cloneDeep(unref(state.datasetTree))
        sortTypeChange(curSortType)
        return
      }
      state.datasetTree = nodeData
-      originResourceTree = cloneDeep(unref(state.datasetTree))
+      originResourceTree.value = cloneDeep(unref(state.datasetTree))
      sortTypeChange(curSortType)
    })
    .finally(() => {
@ -1039,7 +1040,7 @@ const getMenuList = (val: boolean) => {
                    v-for="(column, index) in columns"
                    :prop="column.dataKey"
                    :label="column.title"
-                    :width="columns.length - 1 === index ? 150 : 'auto'"
+                    :min-width="150"
                    :fixed="columns.length - 1 === index ? 'right' : false"
                  >
                    <template #header>
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@ -210,10 +210,10 @@ const selectDataset = row => {
    })
 }

-let originResourceTree = []
+const originResourceTree = shallowRef([])

 const sortTypeChange = sortType => {
-  state.datasourceTree = treeSort(originResourceTree, sortType)
+  state.datasourceTree = treeSort(originResourceTree.value, sortType)
  state.curSortType = sortType
  wsCache.set('TreeSort-datasource', state.curSortType)
 }
@ -481,11 +481,11 @@ const listDs = () => {
      if (nodeData.length && nodeData[0]['id'] === '0' && nodeData[0]['name'] === 'root') {
        rootManage.value = nodeData[0]['weight'] >= 7
        state.datasourceTree = nodeData[0]['children'] || []
-        originResourceTree = cloneDeep(unref(state.datasourceTree))
+        originResourceTree.value = cloneDeep(unref(state.datasourceTree))
        sortTypeChange(curSortType)
        return
      }
-      originResourceTree = cloneDeep(unref(state.datasourceTree))
+      originResourceTree.value = cloneDeep(unref(state.datasourceTree))
      state.datasourceTree = nodeData
      sortTypeChange(curSortType)
    })
@ -754,7 +754,8 @@ const { handleDrop, allowDrop, handleDragStart } = treeDraggble(
  state,
  'datasourceTree',
  move,
-  'datasource'
+  'datasource',
+  originResourceTree
 )

 const handleCopy = async data => {