基础信息

components.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SimilarPositions: typeof import('./src/components/Position/similarPositions.vue')['default']
+    Textarea: typeof import('./src/components/FormUI/textarea/index.vue')['default']
     TextArea: typeof import('./src/components/FormUI/textArea/index.vue')['default']
     TextInput: typeof import('./src/components/FormUI/TextInput/index.vue')['default']
     VerificationCode: typeof import('./src/components/VerificationCode/index.vue')['default']

src/views/resume/components/basicInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="resume-box">
+    <div class="resume-title">{{ $t('resume.basicInfo') }}</div>
     <div class="d-flex align-center">
-      <!-- <div class="resume-title">{{ $t('resume.basicInfo') }}</div> -->
       <!-- 头像 -->
       <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
         <v-img class="img" cover src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
@@ -9,21 +9,54 @@
       </div>
       <!-- 基础信息 -->
       <div style="flex: 1;" class="mr-8 mt-5">
-        <CtForm :items="items" style="width: 100%;">
-          <template v-slot:phoneNum>
-            <v-btn variant="text" class="ml-2" color="primary">更改</v-btn>
-          </template>
-        </CtForm>
-        <div class="d-flex justify-space-between">
-          <div v-for="(val, index) in items" :key="index" style="width: calc(50% - 12px);">
+        <!-- 编辑 -->
+        <div v-if="isEdit">
+          <CtForm :items="formList" style="width: 100%;">
+            <template v-slot:phoneNum>
+              <v-btn variant="text" class="ml-2" color="primary">更改</v-btn>
+            </template>
+          </CtForm>
+        </div>
+        <!-- 展示 -->
+        <div v-else>
+          <span style="font-size: 20px; font-weight: 500;">{{ info.name }}</span>
+          <span style="font-size: 22px;" class="ml-1">
+            <span v-if="info.sex" class="mdi mdi-gender-male" style="color: blue"></span>
+            <span v-else class="mdi mdi-gender-female" style="color: red"></span>
+          </span>
+          <div class="listBox">
+            <div>
+              <span class="mdi mdi-account-outline"></span>
+              <span>{{ info.name }}</span>
+            </div>
+            <div>
+              <span class="mdi mdi-map-marker-outline"></span>
+              <span>{{ info.city }}</span>
+            </div>
+            <div>
+              <span class="mdi mdi-phone-outline"></span>
+              <span>{{ info.phoneNum }}</span>
+            </div>
+            <div>
+              <span class="mdi mdi-email-outline"></span>
+              <span>{{ info.email }}</span>
+            </div>
+            <div>
+              <span class="mdi mdi-calendar-blank-outline"></span>
+              <span>{{ info.workExperience }}</span>
+            </div>
+            <div>
+              <span class="mdi mdi-school-outline"></span>
+              <span>{{ info.edu }}</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="d-flex justify-center">
+    <!-- <div class="d-flex justify-center">
       <v-btn variant="text" color="primary" v-if="isExpand" @click="expand">收起</v-btn>
       <v-btn variant="text" color="primary" v-else @click="expand">展开</v-btn>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -37,12 +70,25 @@ const showIcon = ref(false)
 const isExpand = ref(false)
 // const defaultYearMonthValue = ref(getYearMonth20YearsAgo())
 // const yearMonth = ref(generateYearMonthDataArray())
-const items = ref({
+const info = {
+  name: '陈芊芊',
+  sex: false,
+  birth: '2021年05月03日',
+  phoneNum: '18466958635',
+  cityCode: '01111',
+  city: '广州',
+  email: '69852936@qq.com',
+  workExperienceCode: '3',
+  workExperience: '1年以内',
+  eduCode: '5',
+  edu: '硕士',
+}
+const formList = ref({
   options: [
     {
       type: 'text',
       key: 'name',
-      value: '陈芊芊',
+      value: null,
       default: null,
       label: '姓名 *',
       col: 6,
@@ -61,7 +107,7 @@ const items = ref({
     },
     {
       type: 'text',
-      key: 'name',
+      key: 'birth',
       value: '2021年05月03日',
       default: null,
       label: '出生日期',
@@ -69,24 +115,10 @@ const items = ref({
       outlined: true,
       disabled: true,
     },
-    // {
-    //   type: 'autocomplete',
-    //   key: 'birth',
-    //   value: defaultYearMonthValue,
-    //   default: null,
-    //   label: '请选择出生年月 *',
-    //   col: 6,
-    //   outlined: true,
-    //   // dense: true,
-    //   itemText: 'label',
-    //   itemValue: 'value',
-    //   rules: [v => !!v || '请选择出生年月'],
-    //   items: yearMonth
-    // },
     {
       type: 'text',
       key: 'phoneNum',
-      value: '18466958635',
+      value: null,
       default: null,
       label: '电话号码',
       col: 6,
@@ -97,8 +129,8 @@ const items = ref({
     },
     {
       type: 'autocomplete',
-      key: 'birth',
-      value: '01111',
+      key: 'cityCode',
+      value: null,
       default: null,
       label: '所在城市 *',
       col: 6,
@@ -111,7 +143,7 @@ const items = ref({
     {
       type: 'text',
       key: 'email',
-      value: '69852936@qq.com',
+      value: null,
       default: null,
       label: '常用邮箱 *',
       col: 6,
@@ -121,7 +153,7 @@ const items = ref({
     {
       type: 'autocomplete',
       key: 'workExperience',
-      value: '4',
+      value: null,
       default: null,
       label: '工作经验 *',
       col: 6,
@@ -228,13 +260,13 @@ const items = ref({
     },
   ]
 })
-items.value.options.forEach((_e, index) => {
+formList.value.options.forEach((_e, index) => {
   if ((index + 2) % 2 === 0) _e.flexStyle = 'mr-3'
 })
 
 const expand = () => {
   if (isExpand.value) {
-    items.value.options.splice(8, items.value.options.length)
+    formList.value.options.splice(8, formList.value.options.length)
   } else {
     const expandArr = [
       {
@@ -341,9 +373,9 @@ const expand = () => {
         outlined: true
       }
     ]
-    items.value.options = [...items.value.options, ...expandArr]
+    formList.value.options = [...formList.value.options, ...expandArr]
   }
-  items.value.options.forEach((_e, index) => {
+  formList.value.options.forEach((_e, index) => {
     if ((index + 2) % 2 === 0) _e.flexStyle = 'mr-3'
   })
   isExpand.value = !isExpand.value
@@ -375,4 +407,32 @@ const expand = () => {
     border-radius: 50%;
   }
 }
+
+.listBox {
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  width: 100%; /* 设置容器宽度 */
+  height: 64px;
+  overflow: hidden;
+  div {
+    margin-right: 50px;
+    span {
+      height: 32px;
+      line-height: 32px;
+    }
+    .mdi {
+      font-size: 22px;
+      margin-right: 8px;
+      // margin-top: 2px;
+    }
+  }
+  // border: 1px solid red; /* 可视化边界 */
+  // .jobItems {
+  //   font-size: 14px;
+  //   margin-left: 12px;
+  //   cursor: pointer;
+  //   color: #666666;
+  //   font-family: 微软雅黑; 
+  // }
+}
 </style>

src/views/resume/components/educationExp.vue

@@ -210,7 +210,7 @@ formItems.value.options.forEach((_e, index) => {
 //   console.log(list, 'industry')
 // }
 // 新增 或 编辑
-const isEdit = ref(0)
+const isEdit = ref(false)
 const titleStatus = ref(0)
 const handle = (item) => {
   titleStatus.value = item ? 1 : 0