日期时间区间组件优化

src/components/element/BaseForm.vue

@@ -96,7 +96,7 @@ import {
   ElCollapseTransition,
 } from 'element-plus'
 // import { RangePicker } from 'ant-design-vue'
-import RangePicker from '@/components/element/BaseTimeRangePicker.vue'
+import RangePicker from '@/components/element/BaseTimeRangePickerSplit.vue'
 import CustomBlock from '@/components/common/CustomBlock.vue'
 import BaseSelect from '@/components/element/BaseSelect.vue'
 import BaseCheckBox from '@/components/element/BaseCheckBox.vue'

src/components/element/BaseTimeRangePickerSplit.vue

@@ -0,0 +1,92 @@
+<template>
+  <!-- <range-picker
+    v-bind="attrs"
+    v-model="time"
+    :open="timePickerShow"
+    :show-time="showTime"
+    value-format="YYYYMMDDHHmmss"
+    :placeholder="['开始时间', '结束时间']"
+    :locale="locale"
+    :size="props.size || 'large'"
+    :allow-empty="[true, true]"
+    @ok="handleOkChange"
+    @open-change="handleOpenChange"
+    @calendar-change="handleCalendarChange"
+  ></range-picker> -->
+  <div class="flex items-center">
+    <date-picker
+      v-model:value="startTime"
+      placeholder="开始时间"
+      :show-time="showTimeStart"
+      value-format="YYYYMMDDHHmmss"
+      :size="props.size || 'large'"
+      :locale="locale"
+      :disabled-date="disabledDateStart"
+      :show-now="false"
+    ></date-picker>
+    <span class="split-txt">至</span>
+    <date-picker
+      v-model:value="endTime"
+      placeholder="结束时间"
+      :show-time="showTimeEnd"
+      value-format="YYYYMMDDHHmmss"
+      :size="props.size || 'large'"
+      :locale="locale"
+      :disabled-date="disabledDateEnd"
+      :show-now="false"
+    ></date-picker>
+  </div>
+</template>
+<script lang="ts" name="BaseTimeRangePickerSplit" setup>
+import { DatePicker } from 'ant-design-vue'
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
+import dayjs from 'dayjs'
+import { ref, watch } from 'vue'
+import useVModel from '@/hooks/useVModel'
+const props = defineProps<{ modelValue: any; size: string }>()
+const time = useVModel(props)
+const transValue = (str: string) => {
+  if (typeof str !== 'string') {
+    console.warn('transValue方法参数错误：' + str)
+    return 0
+  }
+  return new Date(
+    `${str.slice(0, 4)}-${str.slice(4, 6)}-${str.slice(6, 8)} ${str.slice(8, 10)}:${str.slice(10, 12)}:${str.slice(12)}`
+  )
+}
+
+const startTime = ref()
+const endTime = ref()
+const showTimeStart = { defaultValue: dayjs('00:00:00', 'HH:mm:ss') }
+const showTimeEnd = { defaultValue: dayjs('23:59:59', 'HH:mm:ss') }
+
+watch([startTime, endTime], (arr) => {
+  time.value = arr
+})
+const disabledDateStart = (current: any) => {
+  if (!time.value[0] && !time.value[1]) {
+    return false
+  } else {
+    if (time.value[1]) {
+      return current > transValue(time.value[1])
+    }
+  }
+}
+const disabledDateEnd = (current: any) => {
+  if (!time.value[0] && !time.value[1]) {
+    return false
+  } else {
+    if (time.value[0]) {
+      return current < transValue(time.value[0])
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.split-txt {
+  margin-left: 11px;
+  margin-right: 11px;
+  font-size: var(--el-form-label-font-size);
+  color: var(--el-text-color-regular);
+}
+</style>

src/modules/marking/inquiry/index.vue

@@ -232,13 +232,13 @@ const fastParamChange = async (index: number) => {
     }
   }
 }
-
+const span20 = defineColumn(_, _, { span: 20 })
 const Span7 = defineColumn(_, _, { span: 7 })
 const Span6 = defineColumn(_, _, { span: 6 })
 const Span8 = defineColumn(_, _, { span: 8 })
 const OneRow = Span7(_, 'row-1')
 const TwoRow = Span7(_, 'row-2')
-const ThreeRow = Span7(_, 'row-3')
+const ThreeRow = span20(_, 'row-3')
 const FourRow = Span7(_, 'row-4')
 const FiveRow = Span7(_, 'row-5')
 const SixRow = Span7(_, 'row-6')
@@ -330,19 +330,19 @@ const items = computed<EpFormItem[]>(() => [
     label: '时间',
     slotType: 'dateTime',
     prop: 'time',
-    slot: {
-      // showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
-      // valueFormat: 'YYYYMMDDHHmmss',
-      // placeholder: ['开始时间', '结束时间'],
-      // locale: locale,
-      // size: 'large',
-      // allowEmpty: [true, true],
-      // open: timePickerShow.value,
-      // onOk: handleOkChange,
-      // onOpenChange: handleOpenChange,
-      // onCalendarChange: handleCalendarChange,
-      // disabledDate: disabledDate,
-    },
+    // slot: {
+    // showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
+    // valueFormat: 'YYYYMMDDHHmmss',
+    // placeholder: ['开始时间', '结束时间'],
+    // locale: locale,
+    // size: 'large',
+    // allowEmpty: [true, true],
+    // open: timePickerShow.value,
+    // onOk: handleOkChange,
+    // onOpenChange: handleOpenChange,
+    // onCalendarChange: handleCalendarChange,
+    // disabledDate: disabledDate,
+    // },
   }),
   FourRow({
     label: '客主比',

src/modules/marking/statistics/index.vue

@@ -25,8 +25,6 @@ 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'
 
@@ -51,10 +49,6 @@ const items: EpFormItem[] = [
       // valueFormat: 'YYYYMMDDHHmmss',
       // startPlaceholder: '开始时间',
       // endPlaceholder: '结束时间',
-      showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
-      valueFormat: 'YYYYMMDDHHmmss',
-      placeholder: ['开始时间', '结束时间'],
-      locale: locale,
     },
   }),
   OneRowSpan7({

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

@@ -1,7 +1,7 @@
 <template>
   <div class="full">
     <div class="p-l-base p-t-medium-base fill-blank">
-      <base-form size="small" :label-width="'66px'" :model="model" :items="items">
+      <base-form size="small" :label-width="'10px'" :model="model" :items="items">
         <template #form-item-search>
           <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
         </template>
@@ -93,7 +93,7 @@ watch(dataModel, () => {
 const { defineColumn, _ } = useForm()
 
 const OneRowSpan4 = defineColumn(_, 'row-1', { span: 4 })
-const OneRowSpan6 = defineColumn(_, 'row-1', { span: 6 })
+const OneRowSpan6 = defineColumn(_, 'row-1', { span: 8 })
 
 const customGroupChange = (v: any) => {
   if (groupListWithAll.value.find((item: any) => item.value == undefined)) {
@@ -126,13 +126,14 @@ const items = computed<EpFormItem[]>(() => {
       label: '科目',
       slotType: 'select',
       prop: 'subjectCode',
-      labelWidth: '52px',
+      labelWidth: '44px',
       slot: { options: subjectList.value, onChange: changeModelValue('subject'), disabled: !isExpert.value },
     }),
     OneRowSpan4({
       label: '大题',
       slotType: 'select',
       prop: 'questionMainNumber',
+      labelWidth: '44px',
       slot: {
         options: mainQuestionList.value,
         onChange: changeModelValue('question'),
@@ -143,6 +144,7 @@ const items = computed<EpFormItem[]>(() => {
       label: '小组',
       slotType: 'select',
       prop: 'markingGroupNumbers',
+      labelWidth: '44px',
       slot: {
         options: transGroupOptions.value,
         onChange: changeModelValue('group'),
@@ -154,10 +156,12 @@ const items = computed<EpFormItem[]>(() => {
     OneRowSpan6({
       label: '时间',
       slotType: 'dateTime',
+      labelWidth: '44px',
       prop: 'time',
       slot: {
         // type: 'datetimerange',
         // valueFormat: 'YYYYMMDDHHmmss',
+        size: 'normal',
       },
     }),
     OneRowSpan4({ slotName: 'search' }),