fix: 修改日期选择控件逻辑

src/views/personnel-entry/mobile/components/two-step.vue

@@ -5,8 +5,11 @@
                 <div class="line"></div>
                 <div class="title-info">项目信息</div>
             </div>
-            <van-field v-model="formDataTwoStep.personalExpertise" type="textarea" :autosize="{maxHeight: 200, minHeight: 30}" label="个人专长" name="personalExpertise"
-                placeholder="请围绕管理或技术维度填写，字数不少于120字" :rules="[{ required: true, message: '请输入个人专长' },{ validator: (val) => val.length >= 120,message: '内容长度不能少于120个字符' }]" required />
+            <van-field v-model="formDataTwoStep.personalExpertise" type="textarea"
+                :autosize="{ maxHeight: 200, minHeight: 30 }" label="个人专长" name="personalExpertise"
+                placeholder="请围绕管理或技术维度填写，字数不少于120字"
+                :rules="[{ required: true, message: '请输入个人专长' }, { validator: (val) => val.length >= 120, message: '内容长度不能少于120个字符' }]"
+                required />
             <van-field label="负责项目情况" class="addBox" name="chargeProjectDTOList" label-width="7em" required>
                 <template #input>
                     <van-button type="primary" size="small" @click="add">新增</van-button>
@@ -18,10 +21,17 @@
                 <van-field v-model="formDataTwoStep.chargeProjectDTOList[index].projectName" label="项目名称"
                     name="projectName" placeholder="请输入项目名称" :rules="[{ required: true, message: '请输入项目名称' }]" />
                 <van-field v-model="formDataTwoStep.chargeProjectDTOList[index].projectTime" name="projectTime"
-                    label="项目周期" placeholder="请选择项目开始和结束时间"
-                    :rules="[{ required: true, message: '请选择项目开始和结束时间' }]"
-                    @click="showCalendar = true" />
-                <van-calendar v-model:show="showCalendar" type="range" @confirm="(value) => onConfirm(index, value)" />
+                    label="项目周期" placeholder="请选择项目开始和结束时间" is-link readonly
+                    :rules="[{ required: true, message: '请选择项目开始和结束时间' }]" @click="showCalendar = true" />
+                <van-popup v-model:show="showCalendar" position="bottom">
+                    <van-picker-group title="项目周期" :tabs="['开始日期', '结束日期']" next-step-text="下一步"
+                        @confirm="(date) => onConfirm(date, index)" @cancel="showCalendar =false">
+                        <van-date-picker :min-date="new Date(1994, 0, 1)" :max-date="new Date()" />
+                        <van-date-picker
+                            :min-date="new Date(1994, 0, 1)"
+                            :max-date="new Date()" />
+                    </van-picker-group>
+                </van-popup>
                 <van-field v-model="formDataTwoStep.chargeProjectDTOList[index].projectAppointment" label="项目任职"
                     type="textarea" name="projectAppointment" placeholder="请输入任职描述"
                     :rules="[{ required: true, message: '请输入任职描述' }]" label-align="top" />
@@ -31,6 +41,7 @@
 </template>
 <script setup>
 import dayjs from "dayjs"
+import { showFailToast } from "vant"
 import { ref, reactive } from "vue"
 const twoStepFormRef = ref(null)
 const formDataTwoStep = defineModel('formDataTwoStep')
@@ -52,18 +63,18 @@ function remove(index) {
     formDataTwoStep.value.chargeProjectDTOList.splice(index, 1)
 }
 
-function onConfirm(index, date) {
-    const startDate = dayjs(date[0]).format('YYYY-MM-DD')
-    const endDate = dayjs(date[1]).format('YYYY-MM-DD')
+function onConfirm(date, index) {
+    const startDate = `${date[0].selectedValues[0]}-${date[0].selectedValues[1]}-${date[0].selectedValues[2]}`
+    const endDate = `${date[1].selectedValues[0]}-${date[1].selectedValues[1]}-${date[1].selectedValues[2]}`
     /* 开始时间大于结束时间 */
-    if (date[0] > date[1]) {
+    if (new Date(startDate) > new Date(endDate)) {
         showFailToast('结束时间必须大于开始时间')
         return
     }
     formDataTwoStep.value.chargeProjectDTOList[index].projectTime = `${startDate} —— ${endDate}`
     formDataTwoStep.value.chargeProjectDTOList[index].projectStartTime = startDate
     formDataTwoStep.value.chargeProjectDTOList[index].projectEndTime = endDate
-    showCalendar.value =false
+    showCalendar.value = false
     // console.log(startDate, endDate);
     // console.log(index, date);
 }