日期组件封装：加上至今选项

src/components/FormUI/datePicker/index.vue

@@ -1,64 +1,80 @@
 <template>
   <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
-    <VueDatePicker
-      v-model="value"
-      ref="datepicker"
-      :options="item.options || {}"
-      locale="zh-CN"
-      :disabled="item.disabled || false"
-      :range="item.range || false"
-      :model-type="timestamp"
-      :month-picker="month"
-      :time-picker="time"
-      :year-picker="year"
-      auto-apply
-      text-input
-      :show-now-button="item.showToday"
-      now-button-label="今天"
-      :enable-time-picker="item.enableTimePicker ?? false"
-      :clearable="item.clearable ?? true"
-      :day-names="['一', '二', '三', '四', '五', '六', '七']"
-      v-bind="$attrs"
-      :class="{'detailMargin': detailMargin}"
-      @open="handleOpen"
-      @closed="handleClosed"
-      @update:modelValue="modelValueUpDate"
-    >
-      <template #trigger>
-        <v-text-field
-          v-model="formatText"
-          variant="outlined"
-          :density="item.dense || 'compact'"
-          type="text"
-          :rules="rules"
+    <div class="d-flex">
+      <VueDatePicker
+        v-model="value"
+        ref="datepicker"
+        :options="item.options || {}"
+        locale="zh-CN"
+        :disabled="item.disabled || false"
+        :range="item.range || false"
+        :model-type="timestamp"
+        :month-picker="month"
+        :time-picker="time"
+        :year-picker="year"
+        auto-apply
+        text-input
+        :show-now-button="item.showToday"
+        now-button-label="今天"
+        :enable-time-picker="item.enableTimePicker ?? false"
+        :clearable="item.clearable ?? true"
+        :day-names="['一', '二', '三', '四', '五', '六', '七']"
+        v-bind="$attrs"
+        :class="{'detailMargin': detailMargin}"
+        style="flex: 1"
+        @open="handleOpen"
+        @closed="handleClosed"
+        @update:modelValue="modelValueUpDate"
+      >
+        <template #trigger>
+          <v-text-field
+            v-model="formatText"
+            variant="outlined"
+            :density="item.dense || 'compact'"
+            type="text"
+            :rules="soFar ? [] : rules"
+            :disabled="soFar || item.disabled"
+            :style="{width: item.width}"
+            :color="item.color || 'primary'"
+            :label="item.label"
+            :placeholder="item.placeholder || item.label"
+            :autofocus="item.autofocus"
+            :required="item.required"
+            :suffix="item.suffix"
+            :append-icon="item.appendIcon"
+            :append-inner-icon="item.appendInnerIcon"
+            :clearable="item.clearable"
+            :readonly="true"
+            :counter="item.counter"
+            :prepend-inner-icon="item.prependInnerIcon"
+            hide-spin-buttons
+            :class="item.class"
+            :hide-details="hideDetails || false"
+            @click:clear="handleClear"
+            @click="inputClick"
+            @blur="inputBlur"
+          ></v-text-field>
+        </template>
+      </VueDatePicker>
+      <div>
+        <v-checkbox-btn
+          v-if="item.showSoFar"
+          v-model="soFar"
+          color="primary"
+          :label="$t('sys.soFar')"
+          class="ml-2"
           :disabled="item.disabled"
-          :style="{width: item.width}"
-          :color="item.color || 'primary'"
-          :label="item.label"
-          :placeholder="item.placeholder || item.label"
-          :autofocus="item.autofocus"
-          :required="item.required"
-          :suffix="item.suffix"
-          :append-icon="item.appendIcon"
-          :append-inner-icon="item.appendInnerIcon"
-          :clearable="item.clearable"
-          :readonly="item.readonly"
-          :counter="item.counter"
-          :prepend-inner-icon="item.prependInnerIcon"
-          hide-spin-buttons
-          :class="item.class"
-          :hide-details="hideDetails || false"
-          @click:clear="handleClear"
-          @click="inputClick"
-          @blur="inputBlur"
-        ></v-text-field>
-      </template>
-    </VueDatePicker>
+          :style="`line-height: ${item.dense === 'default' ? 56 : item.dense === 'comfortable' ? 48 : 40 }px;`"
+          hide-details
+          @update:modelValue="handleCheckboxChange"
+        ></v-checkbox-btn>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
 import { timesTampChange } from '@/utils/date'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 defineOptions({ name:'FormUI-v-text-field'})
 
 const props = defineProps({item: Object})
@@ -66,14 +82,9 @@ const emit = defineEmits(['update:modelValue', 'change'])
 const item = props.item
 
 const value = ref(props.modelValue)
-
-watch(() => item.value, (newVal) => {
-  value.value = newVal - 0
-  if (value.value) getFormatText()
-})
+const soFar = ref(item.value - 0 === -28800000 ? true : false)
 
 const timestamp = 'timestamp' // 固定不能变
-// const datepicker = ref()
 const formatText = ref('')
 
 const modelValueUpDate = (val) => {
@@ -108,11 +119,6 @@ const inputClick = () => {
   hideDetails.value = true
   detailMargin.value = true
 }
-// const inputFocus = () => {
-//   if (item.hideDetails) return
-//   hideDetails.value = true
-//   detailMargin.value = true
-// }
 const inputBlur = () => {
   if (item.hideDetails) return
   hideDetails.value = item.hideDetails || false
@@ -132,6 +138,19 @@ const time = computed(() => {
 
 if (!item.format) item.format = year.value ? 'Y' : month.value ? 'Y-M' : time.value ? 'Y-M-D h:m:s' : 'Y-M-D'
 if (item.value) value.value = item.value - 0; getFormatText()
+
+
+// 《至今》复选框事件
+const handleCheckboxChange = (val) => {
+  rules.value = val ? [] : item.rules
+  if (val) {
+    modelValueUpDate(-28800000)
+  } else {
+    modelValueUpDate(null)
+  }
+}
+if (soFar.value) handleCheckboxChange(soFar.value)
+
 </script>
 <style lang="scss" scoped>
 // .removeDetailHeight {}

src/locales/en.js

@@ -82,7 +82,8 @@ export default {
     signIn: 'Sign in',
     lookingJob: 'Looking For Job',
     recruit: 'Recruit',
-    switchCities: 'Switch Cities'
+    switchCities: 'Switch Cities',
+    soFar: 'so far',
   },
   login: {
     username: 'Username',

src/locales/zh-CN.js

@@ -82,7 +82,8 @@ export default {
     signIn: '签到',
     lookingJob: '我要找工作',
     recruit: '我要招聘',
-    switchCities: '切换城市'
+    switchCities: '切换城市',
+    soFar: '至今',
   },
   login: {
     username: '用户名',

src/utils/date.js

@@ -1,5 +1,6 @@
 // 时间戳转换为年月日时分秒
 export const timesTampChange = (timestamp, format = 'Y-M-D h:m:s') => {
+  if (timestamp === -28800000) return '至今'
   if (!timestamp) return ''
   const date = new Date(timestamp)
   const Y = date.getFullYear().toString()

src/views/recruit/personal/remuse/components/workExperience.vue

@@ -139,6 +139,7 @@ const formItems = ref({
       value: null,
       label: '结束时间 *',
       col: 6,
+      showSoFar: true,
       outlined: true,
       clearable: true,
       rules: [v => !!v || '请选择结束时间']