feat(数据集): 筛选时间时，支持选择时间粒度，然后通过控件的形式选择日期

core/core-frontend/src/components/time-set-dialog/index.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import dayjs from 'dayjs'
+
+const { t } = useI18n()
+const dialogFormVisible = ref(false)
+const form = reactive({
+  type: '',
+  value: ''
+})
+const init = (type, value) => {
+  dialogFormVisible.value = true
+  form.type = type || 'year'
+  form.value = type ? value : ''
+}
+
+const timeList = [
+  {
+    label: t('dynamic_time.year'),
+    value: 'year'
+  },
+  {
+    label: t('chart.y_M'),
+    value: 'month'
+  },
+  {
+    label: t('chart.y_M_d'),
+    value: 'date'
+  },
+  {
+    label: t('chart.y_M_d_H_m_s'),
+    value: 'datetime'
+  }
+]
+
+const formatMap = {
+  datetime: 'YYYY/MM/DD HH:mm:ss',
+  date: 'YYYY/MM/DD',
+  month: 'YYYY/MM',
+  year: 'YYYY'
+}
+
+const beforeClose = () => {
+  form.type = ''
+  form.value = ''
+  dialogFormVisible.value = false
+}
+const emits = defineEmits(['saveTime'])
+const formatValue = (val: any) => {
+  if (!val) return ''
+  return dayjs(val).format(formatMap[form.type])
+}
+const confirm = () => {
+  const value = form.value
+  if (value) emits('saveTime', form.type, formatValue(form.value))
+  beforeClose()
+}
+
+defineExpose({
+  init
+})
+</script>
+
+<template>
+  <el-dialog
+    :before-close="beforeClose"
+    v-model="dialogFormVisible"
+    :title="$t('data_set.time')"
+    width="600"
+    append-to-body
+  >
+    <el-form label-position="top">
+      <el-form-item :label="$t('v_query.time_granularity')">
+        <el-select
+          :placeholder="$t('v_query.the_time_granularity')"
+          v-model="form.type"
+          style="width: 58%"
+        >
+          <el-option
+            v-for="ele in timeList"
+            :key="ele.value"
+            :label="ele.label"
+            :value="ele.value"
+          />
+        </el-select>
+        <el-date-picker style="margin-left: auto" v-model="form.value" :type="form.type" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="beforeClose">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="confirm">
+          {{ t('dataset.confirm') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped></style>

core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue

@@ -23,6 +23,7 @@ export interface Item {
   name: string
   value: number
   timeValue: string
+  timeType?: string
 }
 
 type Props = {
@@ -312,7 +313,15 @@ const addFields = () => {
   }
   showTextArea.value = false
 }
-
+const timeDialog = ref()
+const showTimeDialog = (obj: any) => {
+  if (obj.deType !== 1) return
+  timeDialog.value.init(obj.timeType, obj.timeValue)
+}
+const saveTime = (type, value) => {
+  item.value.timeType = type
+  item.value.timeValue = value
+}
 const emits = defineEmits(['update:item', 'del'])
 </script>
 
@@ -436,7 +445,12 @@ const emits = defineEmits(['update:item', 'del'])
               effect="light"
               :content="item.timeValue"
               placement="top"
-              ><el-input class="w70 mar5" size="small" v-model="item.timeValue"
+              ><el-input
+                readonly
+                @click="showTimeDialog(item)"
+                class="w70 mar5"
+                size="small"
+                v-model="item.timeValue"
             /></el-tooltip>
             <el-input v-else class="w70 mar5" size="small" v-model="item.value" />
             <div class="bottom-line"></div>
@@ -540,6 +554,7 @@ const emits = defineEmits(['update:item', 'del'])
       </el-icon>
     </div>
   </div>
+  <TimeSetDialog @saveTime="saveTime" ref="timeDialog"></TimeSetDialog>
 </template>
 
 <style lang="less" scoped>

core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue

@@ -13,6 +13,7 @@ import {
   sysParamsIlns,
   fieldEnums
 } from '../options.js'
+import TimeSetDialog from '@/components/time-set-dialog/index.vue'
 import { iconFieldMap } from '@/components/icon-group/field-list.js'
 export interface Item {
   term: string
@@ -22,6 +23,7 @@ export interface Item {
   enumValue: string
   name: string
   value: number
+  timeType?: string
 }
 
 type Props = {
@@ -316,6 +318,15 @@ const addFields = () => {
   }
   showTextArea.value = false
 }
+const timeDialog = ref()
+const showTimeDialog = (obj: any) => {
+  if (obj.deType !== 1) return
+  timeDialog.value.init(obj.timeType, obj.value)
+}
+const saveTime = (type, value) => {
+  item.value.timeType = type
+  item.value.value = value
+}
 
 const emits = defineEmits(['update:item', 'del'])
 </script>
@@ -439,7 +450,13 @@ const emits = defineEmits(['update:item', 'del'])
             <div class="bottom-line"></div>
           </template>
           <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
-            <el-input class="w70 mar5" size="small" v-model="item.value" />
+            <el-input
+              class="w70 mar5"
+              size="small"
+              :readonly="item.deType === 1"
+              v-model="item.value"
+              @click="showTimeDialog(item)"
+            />
             <div class="bottom-line"></div>
           </template>
         </template>
@@ -541,6 +558,7 @@ const emits = defineEmits(['update:item', 'del'])
       </el-icon>
     </div>
   </div>
+  <TimeSetDialog @saveTime="saveTime" ref="timeDialog"></TimeSetDialog>
 </template>
 
 <style lang="less" scoped>