日期时间区间空间修改成想要的样子和交互效果

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.0.10",
     "@vueuse/core": "9.3.0",
+    "ant-design-vue": "^4.1.2",
     "axios": "0.27.2",
     "big.js": "6.2.1",
     "copy-to-clipboard": "3.3.2",

src/components/element/BaseForm.vue

@@ -32,6 +32,7 @@
                             v-if="col.slotType"
                             v-bind="Object.assign({}, FormItemComponentDefault[col.slotType], col.slot)"
                             v-model="getFieldValue(props.model, col.prop).value"
+                            v-model:value="getFieldValue(props.model, col.prop).value"
                           >
                             <template
                               v-for="[usedSlotName, slotName] in getSlotKeys(
@@ -94,6 +95,7 @@ import {
   ElCol,
   ElCollapseTransition,
 } from 'element-plus'
+import { RangePicker } from 'ant-design-vue'
 import CustomBlock from '@/components/common/CustomBlock.vue'
 import BaseSelect from '@/components/element/BaseSelect.vue'
 import BaseCheckBox from '@/components/element/BaseCheckBox.vue'
@@ -138,7 +140,8 @@ const FormItemComponentMap = markRaw<FormSupportComponentMap>({
   radio: BaseRadio,
   select: BaseSelect,
   date: ElDatePicker,
-  dateTime: ElDatePicker,
+  // dateTime: ElDatePicker,
+  dateTime: RangePicker,
   switch: ElSwitch,
 })
 

src/main.ts

@@ -7,14 +7,15 @@ import bootstrap from '@/bootstrap'
 import { setupDirectives } from '@/directives'
 import 'virtual:svg-icons-register'
 import { ElLoading, ElTooltip } from 'element-plus'
+import { DatePicker, RangePicker } from 'ant-design-vue'
+import 'dayjs/locale/zh-cn'
 import 'element-plus/theme-chalk/el-loading.css'
 import '@style/app.scss'
-
 import 'element-plus/theme-chalk/src/message.scss'
 import 'splitpanes/dist/splitpanes.css'
 const app = createApp(App)
 setupDirectives(app)
-app.use(createPinia()).use(router).use(ElLoading).use(ElTooltip)
+app.use(createPinia()).use(router).use(ElLoading).use(ElTooltip).use(DatePicker).use(RangePicker)
 useECharts()
 
 app.mount('#app')

src/modules/marking/inquiry/index.vue

@@ -78,14 +78,14 @@ import useForm from '@/hooks/useForm'
 import useFetch from '@/hooks/useFetch'
 import useOptions from '@/hooks/useOptions'
 import useVW from '@/hooks/useVW'
-
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
+import dayjs from 'dayjs'
 import type { EpFormItem, EpFormRules } from 'global-type'
 import type { ExtractApiParams } from '@/api/api'
 const refresh: any = inject('reload')
 const { push } = useRouter()
 const resetMarkerId = ref<any>(void 0)
 const shortQueryConfigIndex = ref<number>()
-
 const {
   subjectList,
   mainQuestionList,
@@ -333,11 +333,16 @@ const items = computed<EpFormItem[]>(() => [
     slotType: 'dateTime',
     prop: 'time',
     slot: {
-      startPlaceholder: '开始时间',
-      endPlaceholder: '结束时间',
-      clearable: true,
-      type: 'datetimerange',
+      // startPlaceholder: '开始时间',
+      // endPlaceholder: '结束时间',
+      // clearable: true,
+      // type: 'datetimerange',
+      // valueFormat: 'YYYYMMDDHHmmss',
+      showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
       valueFormat: 'YYYYMMDDHHmmss',
+      placeholder: ['开始时间', '结束时间'],
+      locale: locale,
+      size: 'large',
     },
   }),
   FourRow({
@@ -417,10 +422,6 @@ const items = computed<EpFormItem[]>(() => [
       slotType: 'select',
       prop: 'markerId',
       slot: {
-        // options: markerList?.value?.map((marker) => ({
-        //   value: marker.id,
-        //   label: marker.loginName ? `${marker.loginName}-${marker.name}` : marker.name,
-        // })),
         options: [
           ...(markerList?.value || []).map((marker) => ({
             value: marker.id,
@@ -490,6 +491,7 @@ const onSearch = async () => {
           ...omit(model, 'time'),
           timeStart: model.time?.[0],
           timeEnd: model.time?.[1],
+          markingGroupNumbers: model.markingGroupNumbers.includes(undefined) ? '' : model.markingGroupNumbers,
         }),
       })
   } catch (error) {

src/modules/marking/statistics/index.vue

@@ -25,7 +25,8 @@ import useVW from '@/hooks/useVW'
 import useForm from '@/hooks/useForm'
 import useFetch from '@/hooks/useFetch'
 import useMainStore from '@/store/main'
-
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
+import dayjs from 'dayjs'
 import type { EpFormItem, EpTableColumn } from 'global-type'
 import type { ExtractApiResponse } from '@/api/api'
 
@@ -45,11 +46,15 @@ const items: EpFormItem[] = [
     prop: 'time',
     slotType: 'dateTime',
     slot: {
-      clearable: true,
-      type: 'datetimerange',
+      // clearable: true,
+      // type: 'datetimerange',
+      // valueFormat: 'YYYYMMDDHHmmss',
+      // startPlaceholder: '开始时间',
+      // endPlaceholder: '结束时间',
+      showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
       valueFormat: 'YYYYMMDDHHmmss',
-      startPlaceholder: '开始时间',
-      endPlaceholder: '结束时间',
+      placeholder: ['开始时间', '结束时间'],
+      locale: locale,
     },
   }),
   OneRowSpan7({

src/modules/quality/self-check/index.vue

@@ -58,7 +58,8 @@ import useForm from '@/hooks/useForm'
 import useVW from '@/hooks/useVW'
 import useOptions from '@/hooks/useOptions'
 import useTableCheck from '@/hooks/useTableCheck'
-
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
+import dayjs from 'dayjs'
 import type { ExtractApiParams, ExtractApiResponse } from '@/api/api'
 import type { EpFormItem, EpTableColumn } from 'global-type'
 
@@ -150,8 +151,12 @@ const items = computed<EpFormItem[]>(() => {
       slotType: 'dateTime',
       prop: 'time',
       slot: {
-        type: 'datetimerange',
+        // type: 'datetimerange',
+        // valueFormat: 'YYYYMMDDHHmmss',
+        showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
         valueFormat: 'YYYYMMDDHHmmss',
+        placeholder: ['开始时间', '结束时间'],
+        locale: locale,
       },
     }),
     OneRowSpan4({ slotName: 'search' }),

types/components.d.ts

@@ -222,7 +222,7 @@ declare module 'global-type' {
     | FormItemDatePicker
     | FormItemDateTimePicker
 
-  export type EpFormItem =
+  export type EpFormItem = (
     | PolymerizationFormItem<FormItemInput>
     | PolymerizationFormItem<FormItemInputNumber>
     | PolymerizationFormItem<FormItemAutocomplete>
@@ -232,6 +232,7 @@ declare module 'global-type' {
     | PolymerizationFormItem<FormItemSelect>
     | PolymerizationFormItem<FormItemDatePicker>
     | PolymerizationFormItem<FormItemDateTimePicker>
+  ) & { slot?: any }
 
   export type EpFormRows = Record<
     string | number,