面试时间

components.d.ts

@@ -28,11 +28,13 @@ declare module 'vue' {
     CtTable: typeof import('./src/components/CtTable/index.vue')['default']
     CtTextField: typeof import('./src/components/CtVuetify/CtTextField/index.vue')['default']
     DatePicker: typeof import('./src/components/DatePicker/index.vue')['default']
+    DateTimePicker: typeof import('./src/components/FormUI/dateTimePicker/index.vue')['default']
     Details: typeof import('./src/components/Enterprise/details.vue')['default']
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     File: typeof import('./src/components/Upload/file.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']

src/components/CtDialog/index.vue

@@ -116,7 +116,7 @@ watch(() => props.visible, (newVal) => {
 })
 
 const dialogWidth = computed(() => {
-  const arr = ['900px', '1200px', '400px', '600px']
+  const arr = ['900px', '1200px', '400px', '600px', '500px']
   return arr[+props.widthType]
 })
 const handleClose = () => {

src/components/FormUI/datePicker/index copy.vue

@@ -1,12 +1,12 @@
 <template>
   <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
-    <div class="d-flex">
-      <VueDatePicker
+    <div class="d-flex align-center">
+      <!-- <VueDatePicker
         v-model="value"
         ref="datepicker"
         :options="item.options || {}"
         locale="zh-CN"
-        :disabled="soFar || item.disabled || false"
+        :disabled="item.disabled || false"
         :range="item.range || false"
         :model-type="timestamp"
         :month-picker="month"
@@ -14,15 +14,16 @@
         :year-picker="year"
         auto-apply
         text-input
+        :time-picker-inline="true"
         :show-now-button="item.showToday"
         now-button-label="今天"
+        :disabled-dates="item.disabledDates ? disabledDates : []"
         :enable-time-picker="item.enableTimePicker ?? false"
         :clearable="item.clearable ?? true"
         :day-names="['一', '二', '三', '四', '五', '六', '七']"
-        v-bind="$attrs"
-        :time-picker-inline="true"
         select-text="确认"
         cancel-text="取消"
+        v-bind="$attrs"
         :class="{'detailMargin': detailMargin}"
         style="flex: 1"
         @open="handleOpen"
@@ -35,8 +36,8 @@
             variant="outlined"
             :density="item.dense || 'compact'"
             type="text"
-            :rules="soFar ? [] : rules"
-            :disabled="soFar || item.disabled"
+            :rules="rules"
+            :disabled="item.disabled"
             :style="{width: item.width}"
             :color="item.color || 'primary'"
             :label="item.label"
@@ -58,48 +59,65 @@
             @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"
+      </VueDatePicker> -->
+      
+      <div class="form-label" :style="{'width': item.labelWidth + 'px'}">{{ item.label }}</div>
+      <el-config-provider :locale="zhCn">
+        <el-date-picker
+          style="flex: 1;"
+          v-model="value"
+          size="large"
+          :type="item.mode || 'date'"
+          :placeholder="item.placeholder || '请选择'"
+          :start-placeholder="item.startPlaceholder || '开始日期'"
+          :end-placeholder="item.endPlaceholder || '结束日期'"
+          :format="item.format"
+          :value-format="item.valueFormat || 'x'"
           :disabled="item.disabled"
-          :style="`line-height: ${item.dense === 'default' ? 56 : item.dense === 'comfortable' ? 48 : 40 }px;`"
-          hide-details
-          @update:modelValue="handleCheckboxChange"
-        ></v-checkbox-btn>
-      </div>
+          :disabled-date="disabledDates"
+          :date-format="item.dateFormat"
+          :time-format="item.timeFormat"
+          :default-value="item.defaultValue"
+          @change="modelValueUpDate"
+          @clear="handleClear"
+          @blur="handleOpen"
+        >
+        </el-date-picker>
+      </el-config-provider>
     </div>
   </div>
 </template>
+
 <script setup>
-import { timesTampChange } from '@/utils/date'
-import { computed, ref } from 'vue'
 defineOptions({ name:'FormUI-v-text-field'})
+import { timesTampChange } from '@/utils/date'
+import { computed, ref, watch } from 'vue'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+// import { ElDatePicker } from 'element-plus'
 
-const props = defineProps({item: Object, modelValue: [String, Number, Boolean], changeFn: Function})
+const props = defineProps({item: Object, modelValue: [String, Number, Boolean, Array], changeFn: Function})
 const emit = defineEmits(['update:modelValue', 'change'])
 const item = props.item
 
-const value = ref(props.modelValue === true ? null : props.modelValue)
-const soFar = ref(false)
-
-// watch(
-//   () => props.modelValue, 
-//   (newVal) => {
-//     if (newVal === true) {
-//       value.value = ''
-//       soFar.value = !newVal
-//     }
-//   },
-//   { immediate: true },
-//   { deep: true }
-// )
-
-const timestamp = 'timestamp' // 固定不能变
+const value = ref(props.modelValue)
+
+watch(() => props.modelValue, 
+  (newVal) => {
+    modelValueUpDate(newVal)
+  },
+  // { immediate: true },
+  // { deep: true }
+)
+
+// 过去的日期不可选
+const disabledDates = (date) => {
+  const currentDate = new Date()
+  if (!props.item.disabledDate) return false
+  currentDate.setDate(currentDate.getDate() - 1)
+  return date.getTime() < currentDate.getTime()
+}
+
+// const timestamp = 'timestamp' // 固定不能变
 const formatText = ref('')
 
 const modelValueUpDate = (val) => {
@@ -119,26 +137,34 @@ const handleClear = () => {
   emit('change', value.value)
 }
 
+
 const rules = ref(item.rules)
+watch(() => item.rules, 
+  (newVal) => {
+    rules.value = newVal
+  },
+  { immediate: true },
+  { deep: true }
+)
 const handleOpen = () => {
   rules.value = []
 }
-const handleClosed = () => {
-  rules.value = item.rules
-}
+// const handleClosed = () => {
+//   rules.value = item.rules
+// }
 
-const hideDetails = ref(item.hideDetails || false)
-const detailMargin = ref(false)
-const inputClick = () => {
-  if (item.hideDetails) return
-  hideDetails.value = true
-  detailMargin.value = true
-}
-const inputBlur = () => {
-  if (item.hideDetails) return
-  hideDetails.value = item.hideDetails || false
-  detailMargin.value = false
-}
+// const hideDetails = ref(item.hideDetails || false)
+// const detailMargin = ref(false)
+// const inputClick = () => {
+//   if (item.hideDetails) return
+//   hideDetails.value = true
+//   detailMargin.value = true
+// }
+// const inputBlur = () => {
+//   if (item.hideDetails) return
+//   hideDetails.value = item.hideDetails || false
+//   detailMargin.value = false
+// }
 
 // dateType: 默认 date, 即年月日
 const year = computed(() => {
@@ -154,19 +180,8 @@ 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; getFormatText()
 
-
-// 《至今》复选框事件
-const handleCheckboxChange = (val) => {
-  rules.value = val ? [] : item.rules
-  if (val) {
-    modelValueUpDate(null)
-  } else {
-    modelValueUpDate(null)
-  }
-}
-// if (soFar.value) handleCheckboxChange(soFar.value)
-
 </script>
+
 <style lang="scss" scoped>
 // .removeDetailHeight {}
 :deep(.dp--menu-wrapper) {

src/components/FormUI/datePicker/index.vue

@@ -1,66 +1,6 @@
 <template>
   <div :style="{ width: item.width ? item.width + 'px' : '100%' }">
     <div class="d-flex align-center">
-      <!-- <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
-        :time-picker-inline="true"
-        :show-now-button="item.showToday"
-        now-button-label="今天"
-        :disabled-dates="item.disabledDates ? disabledDates : []"
-        :enable-time-picker="item.enableTimePicker ?? false"
-        :clearable="item.clearable ?? true"
-        :day-names="['一', '二', '三', '四', '五', '六', '七']"
-        select-text="确认"
-        cancel-text="取消"
-        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="rules"
-            :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="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 class="form-label" :style="{'width': item.labelWidth + 'px'}">{{ item.label }}</div>
       <el-config-provider :locale="zhCn">
         <el-date-picker
@@ -78,6 +18,7 @@
           :date-format="item.dateFormat"
           :time-format="item.timeFormat"
           :default-value="item.defaultValue"
+          :teleported="false"
           @change="modelValueUpDate"
           @clear="handleClear"
           @blur="handleOpen"
@@ -90,10 +31,9 @@
 
 <script setup>
 defineOptions({ name:'FormUI-v-text-field'})
-import { timesTampChange } from '@/utils/date'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
-// import { ElDatePicker } from 'element-plus'
+import { ElDatePicker } from 'element-plus'
 
 const props = defineProps({item: Object, modelValue: [String, Number, Boolean, Array], changeFn: Function})
 const emit = defineEmits(['update:modelValue', 'change'])
@@ -103,10 +43,10 @@ const value = ref(props.modelValue)
 
 watch(() => props.modelValue, 
   (newVal) => {
-    modelValueUpDate(newVal)
+    value.value = newVal
   },
-  // { immediate: true },
-  // { deep: true }
+  { immediate: true },
+  { deep: true }
 )
 
 // 过去的日期不可选
@@ -117,20 +57,12 @@ const disabledDates = (date) => {
   return date.getTime() < currentDate.getTime()
 }
 
-// const timestamp = 'timestamp' // 固定不能变
-const formatText = ref('')
-
 const modelValueUpDate = (val) => {
   value.value = val
-  getFormatText()
   emit('update:modelValue', value.value)
   emit('change', value.value)
 }
 
-const getFormatText = () => {
-  const format = item.format || 'Y-M-D'
-  formatText.value = timesTampChange(value.value, format)
-}
 
 const handleClear = () => {
   value.value = null
@@ -138,47 +70,8 @@ const handleClear = () => {
 }
 
 
-const rules = ref(item.rules)
-watch(() => item.rules, 
-  (newVal) => {
-    rules.value = newVal
-  },
-  { immediate: true },
-  { deep: true }
-)
 const handleOpen = () => {
-  rules.value = []
 }
-// const handleClosed = () => {
-//   rules.value = item.rules
-// }
-
-// const hideDetails = ref(item.hideDetails || false)
-// const detailMargin = ref(false)
-// const inputClick = () => {
-//   if (item.hideDetails) return
-//   hideDetails.value = true
-//   detailMargin.value = true
-// }
-// const inputBlur = () => {
-//   if (item.hideDetails) return
-//   hideDetails.value = item.hideDetails || false
-//   detailMargin.value = false
-// }
-
-// dateType: 默认 date, 即年月日
-const year = computed(() => {
-  return item.dateType === 'year'
-})
-const month = computed(() => {
-  return item.dateType === 'month'
-})
-const time = computed(() => {
-  return item.dateType === 'time'
-})
-
-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; getFormatText()
 
 </script>
 

src/views/recruit/enterprise/interviewManagement/components/invite.vue

@@ -1,19 +1,5 @@
 <template>
   <CtForm ref="CtFormRef" :items="formItems" style="height: 520px;">
-    <template #time="{ item }">
-      <VueDatePicker 
-        v-model="item.value"
-        placeholder="面试时间 *"
-        class="mb-4"
-        model-type="timestamp"
-        :disabled-dates="disabledDates"
-        :day-names="['一', '二', '三', '四', '五', '六', '七']"
-        select-text="确认"
-        cancel-text="取消"
-        :time-picker-inline="true"
-        locale="zh-CN"
-        :text-input="{ format: 'MM.dd.yyyy HH:mm' }" />
-    </template>
   </CtForm>
 </template>
 
@@ -32,13 +18,6 @@ const props = defineProps({
   }
 })
 
-// 过去的日期不可选
-const disabledDates = (date) => {
-  const currentDate = new Date()
-  currentDate.setDate(currentDate.getDate() - 1)
-  return date.getTime() < currentDate.getTime()
-}
-
 const handleChangeJob = (e) => {
   const obj = props.position.find(item => item.value === e)
   if (!obj && !obj?.data) return
@@ -49,10 +28,15 @@ const CtFormRef = ref()
 const formItems = ref({
   options: [
     {
-      slotName: 'time',
+      type: 'datePicker',
+      mode: 'datetime',
+      labelWidth: 78,
       key: 'time',
-      value: ref(),
-      rules: [v => !!v || '请选择面试时间'],
+      label: '面试时间 *',
+      format: "YYYY/MM/DD HH:mm",
+      flexStyle: 'mb-7',
+      disabledDate: true,
+      rules: [v => !!v || '请选择面试时间']
     },
     {
       type: 'autocomplete',

src/views/recruit/enterprise/interviewManagement/components/item.vue

@@ -64,7 +64,7 @@
   </div>
 
   <!-- 修改面试、重新邀约 -->
-  <CtDialog :visible="showInvite" :widthType="2" titleClass="text-h6" title="面试信息" @close="handleEditClose" @submit="handleEditSubmit">
+  <CtDialog :visible="showInvite" :widthType="4" titleClass="text-h6" title="面试信息" @close="handleEditClose" @submit="handleEditSubmit">
     <InvitePage v-if="showInvite" ref="inviteRef" :itemData="itemData" :position="positionItems"></InvitePage>
   </CtDialog>