展示优化

src/utils/date.js

@@ -112,4 +112,60 @@ export const getInterviewInviteDefaultTime = () => {
     time,
     timeStamp: time.getTime()
   }
-}
+}
+
+// 返回时间差，最小计量单位为一个月。示例用法：
+// const startTime = 1633072800000; // 2021-10-01 00:00:00 UTC（秒级时间戳）
+// const endTime = 1667244000000;  // 2022-11-01 00:00:00 UTC（秒级时间戳）
+export const getTimeDifferenceInChinese = (startTime, endTime) => {
+  // 将时间戳转换为 Date 对象（假设时间戳单位为毫秒）
+  const startDate = startTime ? new Date(startTime) : new Date();
+  const endDate = endTime ? new Date(endTime) : new Date();
+
+  // 计算年份差
+  let yearsDiff = endDate.getFullYear() - startDate.getFullYear();
+  // 计算月份差（考虑年份差后调整）
+  let monthsDiff = endDate.getMonth() - startDate.getMonth();
+  // 如果月份差为负，则从上一年借月
+  if (monthsDiff < 0) {
+    yearsDiff--;
+    monthsDiff += 12;
+  }
+  // 计算日期差（考虑月份差后调整，如果日期差为负，则从上一月借天）
+  let daysDiff = endDate.getDate() - startDate.getDate();
+  if (daysDiff < 0) {
+    monthsDiff--;
+    // 获取 startDate 所在月的最后一天
+    const lastDayOfMonth = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0).getDate();
+    daysDiff += lastDayOfMonth; // 加上最后一天以补全月份差
+  }
+
+  // 构建结果字符串
+  let result = "";
+  if (yearsDiff > 0) {
+    result += `${yearsDiff}年`;
+  }
+  if (monthsDiff > 0) {
+    if (result) {
+      // 如果已经有年份差异，则直接添加月份数（不带单位），后面正则替换会处理
+      result += monthsDiff;
+    } else {
+      // 如果没有年份差异，则正常添加月份和单位
+      result += `${monthsDiff}个月`;
+      // 特别处理只有1个月的情况
+      if (monthsDiff === 1) {
+        result = "不到1个月"; // 直接替换为“不到1个月”，避免后续复杂的正则替换
+      }
+    }
+  } else if (!result && daysDiff >= 0) {
+    // 如果没有年份和月份差异，但天数差异存在（这里其实没处理天数，只是为完整性添加）
+    // 理论上应该处理天数，但题目要求只到月份，所以这里直接返回“不到1个月”
+    result = "不到1个月";
+  }
+ 
+  // 如果之前添加了月份数但没有年份（且不是直接处理的1个月情况），则需要去除末尾多余的数字并添加“个月”
+  if (result && !/\d年$/.test(result) && /\d$/.test(result)) {
+    result += "个月";
+  }
+  return result
+}

src/views/recruit/enterprise/search/retrieval/index.vue

@@ -64,11 +64,41 @@
           <div class="d-flex">
             <div class="mr-10">{{ item.subTitle }}</div>
             <div class="mr-10">首次工作时间： {{ timesTampChange(item.firstWorkTime, 'Y-M-D') }}</div>
-            <div>所在城市： {{ item.areaName }}</div>
+            <!-- <div class="mr-10">所在城市： {{ item.areaName }}</div> -->
+            <div v-if="item.interestedList?.length" class="mr-10 d-flex flex-wrap">
+              <div>求职意向：</div>
+              <div
+                v-for="(interested, index) in item.interestedList"
+                :key="interested.id"
+              >
+                <span :class="{'mx-3': index}">{{ (index ? '|' : '') }}</span>
+                <span>{{ positionData.find(e => e.id === interested.positionId)?.nameCn ?? '暂无' }}</span>
+              </div>
+            </div>
           </div>
         </template>
         
-        <div style="padding-left: 84px;" class="pb-5 d-flex align-center">
+        
+        <div class="px-5 pb-8">
+          <div class="experience" v-if="item.workList.length">
+            <div class="second-title">工作经验</div>
+            <v-timeline density="compact" align="start" side="end" truncate-line="both">
+              <v-timeline-item v-for="(j, i) in item.workList" :key="i" dot-color="primary" size="small">
+                <div v-if="j.show" class="timeline-item mt-1">
+                  <div>
+                    <span>{{ j.startTimeStr }}</span>
+                    <span v-if="j.endTimeStr"> - {{ j.endTimeStr }}</span>
+                    <span v-if="j.year"> ({{ j.year }})</span>
+                  </div>
+                  <div class="timeline-item-name ellipsis">{{ j.enterpriseName }}</div>
+                  <div class="timeline-item-name ellipsis">{{ j.positionName }}</div>
+                </div>
+              </v-timeline-item>
+            </v-timeline>
+          </div>
+        </div>
+
+        <!-- <div style="padding-left: 84px;" class="pb-5 d-flex align-center">
           <div class="d-flex align-center mr-10">
             <div class="mr-3">最新职位:</div>
             <div>
@@ -78,6 +108,7 @@
               >{{ item.workList[0]?.positionName ?? '暂无' }}</v-chip>
             </div>
           </div>
+          
           <div class="d-flex align-center">
             <div class="mr-3">求职意向:</div>
             <v-chip
@@ -87,7 +118,7 @@
               color="primary"
             >{{ positionData.find(e => e.id === interested.positionId)?.nameCn ?? '暂无' }}</v-chip>
           </div>
-        </div>
+        </div> -->
         <!-- <v-divider></v-divider> -->
         <!-- <v-card-text class="d-flex mb-10"> -->
           <!-- <div style="width: 50%;" class="d-flex align-center">
@@ -200,6 +231,7 @@ import { saveInterviewInvite } from '@/api/recruit/enterprise/interview'
 import { useRouter } from 'vue-router'; const router = useRouter()
 import InvitePage from '@/views/recruit/enterprise/interviewManagement/components/invite'
 import { getDict } from '@/hooks/web/useDictionaries'
+import { getTimeDifferenceInChinese } from '@/utils/date'
 
 const textItem = ref({
   type: 'text',
@@ -274,6 +306,15 @@ const getData = async () => {
       e.regName = e.reg?.str ?? ''
       e.areaName = e.area?.str ?? '暂无'
       e.subTitle = [e.jobStatusName, e.expName ? e.expName + '工作经验' : null, e.eduName, e.maritalStatusName].filter(k => k).join(' | ')
+      if (e.workList?.length) {
+        e.workList.forEach(exp => {
+          exp.startTimeStr = exp.startTime ? timesTampChange(exp.startTime, 'Y-M') : '未填写工作时间'
+          exp.endTimeStr = exp.startTime ? exp.endTime ? timesTampChange(exp.endTime, 'Y-M') : '至今' : ''
+          exp.year = exp.endTimeStr ? getTimeDifferenceInChinese(exp.startTime, exp.endTime) : ''
+          // 未填写工作经验内容，不展示
+          exp.show = Boolean(exp.year) || Boolean(exp.enterpriseName) || Boolean(exp.positionName)
+        })
+      }
       return e
     })
     console.log(items.value)
@@ -416,4 +457,41 @@ const badgeIcon = computed(() => (item) => {
 .clear:hover {
   color: var(--v-primary-base);
 }
+
+.experience {
+  width: 54%;
+  height: 100%;
+}
+
+.second-title {
+  color: var(--color-666);
+  font-size: 15px;
+}
+
+.timeline-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: var(--color-666);
+  font-size: 13px;
+  .timeline-item-name {
+    width: 26%;
+  }
+}
+:deep(.v-timeline-item__body) {
+  width: 100%;
+}
+:deep(.v-timeline--vertical.v-timeline) {
+  row-gap: 0;
+}
+:deep(.v-timeline-divider__dot--size-small) {
+  width: 10px !important;
+  height: 10px !important;
+  margin-top: 10px !important;
+}
+:deep(.v-timeline-divider__inner-dot) {
+  width: 10px !important;
+  height: 10px !important;
+}
 </style>