工作经验扩展

src/views/menduner/system/person/details/components/expExtend.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="exp" v-if="list?.length">
-    <div class="ml">工作经验</div>
+    <div class="ml">工作经验 <span v-if="total > queryParams.pageSize">{{ '最多展示' + queryParams.pageSize + '条数据' }}</span></div>
     <el-timeline>
       <template v-for="(val, index) in list" :key="index">
-        <template v-if="retract || index < 2">
+        <template v-if="retract || index < displayIndex">
           <el-timeline-item center placement="top" color="#0bbd87">
             <div class="timeline-item">
               <div style="width: 20%;">
@@ -17,8 +17,8 @@
           </el-timeline-item>
         </template>
       </template>
-      允许折叠情况下数据大于
-      <div v-if="list.length > 2 && !displayAll" class="showBtn color-primary" @click.stop="retract = Boolean(!retract)">
+      <!-- 允许折叠情况下数据大于displayIndex 展示折叠按钮 -->
+      <div v-if="list.length > displayIndex && !displayAll" class="showBtn color-primary" @click.stop="retract = Boolean(!retract)">
         <span>{{ retract ? '折叠' : '展开全部' }}</span>
         <!-- <div class="icons">
           <i :class="retract ? 'up' : 'down'"></i>
@@ -39,28 +39,26 @@ import { formatName } from '@/utils'
 
 const props = defineProps({
   userId: [String, Number],
+  data: Array,
   displayAll: Boolean
 })
 
-const retract = ref(!props.displayAll) // 是否默认折叠
-const display = ref(!props.displayAll) // 是否默认折叠
-const loading = ref(false)
-const list = ref([])
-const total = ref(0)
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 100,
   userId: props.userId
 })
+const retract = ref(!props.displayAll) // 是否默认折叠
+const displayIndex = ref(2) // 默认展示个数-1
 
+const list = ref(props.data || [])
+const total = ref(props.data?.length || 0)
+const loading = ref(false)
 const getList = async () => {
   if (!queryParams.userId) return
   loading.value = true
   try {
     const data = await PersonInfoApi.getPersonExpPage(queryParams)
-    // list.value = data.list ? data.list.map(e => {
-    //   return { ...e, enterpriseName: formatName(e.enterpriseName), positionName: formatName(e.positionName), content: formatName(e.content) }
-    // }) : []
     list.value = data.list ? data.list.map(exp => {
       exp.startTimeStr = exp.startTime ? timesTampChange(exp.startTime, 'Y-M') : '未填写工作时间'
       exp.endTimeStr = exp.startTime ? exp.endTime ? timesTampChange(exp.endTime, 'Y-M') : '至今' : ''