人才采集表单调整

src/views/menduner/system/talentMap/components/FormPage.vue

@@ -76,12 +76,12 @@
         <div class="m-title">联系方式</div>
       </el-row>
       <el-row :gutter="10">
-        <el-col :span="24">
+        <el-col :span="12">
           <el-form-item label="固定电话" prop="phone">
             <el-input v-model="formQuery.phone" placeholder="请输入固定电话" />
           </el-form-item>
         </el-col>
-        <el-col :span="24">
+        <el-col :span="12">
           <el-form-item label="手机号码1" prop="mobile">
             <el-input v-model="formQuery.mobile[0]" placeholder="请输入手机号码" @change="val => mobileChange(val, 0)" />
           </el-form-item>
@@ -89,12 +89,12 @@
         
       </el-row>
       <el-row :gutter="10">
-        <el-col :span="24">
+        <el-col :span="12">
           <el-form-item label="手机号码2" prop="mobile">
             <el-input v-model="formQuery.mobile[1]" placeholder="请输入手机号码" @change="val => mobileChange(val, 1)" />
           </el-form-item>
         </el-col>
-        <el-col :span="24">
+        <el-col :span="12">
           <el-form-item label="手机号码3" prop="mobile">
             <el-input v-model="formQuery.mobile[2]" placeholder="请输入手机号码" @change="val => mobileChange(val, 2)" />
           </el-form-item>
@@ -103,63 +103,83 @@
       <el-row>
         <div class="m-title">酒店/公司信息</div>
       </el-row>
-      <el-form-item label="酒店/公司名称(中)" prop="hotel_zh">
-        <el-input v-model="formQuery.hotel_zh" placeholder="请输入中文酒店/公司名称" />
-      </el-form-item>
-      <el-form-item label="酒店/公司名称(英)" prop="hotel_en">
-        <el-input v-model="formQuery.hotel_en" placeholder="请输入英文酒店/公司名称" />
-      </el-form-item>
-      <el-form-item label="品牌名称（中）" prop="brand_zh">
-        <el-input v-model="formQuery.brand_zh" placeholder="请输入中文品牌名称" />
-      </el-form-item>
-      <el-form-item label="品牌名称（英）" prop="brand_en">
-        <el-input v-model="formQuery.brand_en" placeholder="请输入英文品牌名称" />
-      </el-form-item>
-      <el-form-item label="隶属关系(中)" prop="affiliation_zh">
-        <el-input v-model="formQuery.affiliation_zh" placeholder="请输入中文隶属关系" />
-      </el-form-item>
-      <el-form-item label="隶属关系(英)" prop="affiliation_en">
-        <el-input v-model="formQuery.affiliation_en" placeholder="请输入英文隶属关系" />
-      </el-form-item>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="酒店/公司名称(中)" prop="hotel_zh">
+            <el-input v-model="formQuery.hotel_zh" placeholder="请输入中文酒店/公司名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="酒店/公司名称(英)" prop="hotel_en">
+            <el-input v-model="formQuery.hotel_en" placeholder="请输入英文酒店/公司名称" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="品牌名称(中)" prop="brand_zh">
+            <el-input v-model="formQuery.brand_zh" placeholder="请输入中文品牌名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="品牌名称(英)" prop="brand_en">
+            <el-input v-model="formQuery.brand_en" placeholder="请输入英文品牌名称" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="隶属关系(中)" prop="affiliation_zh">
+            <el-input v-model="formQuery.affiliation_zh" placeholder="请输入中文隶属关系" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="隶属关系(英)" prop="affiliation_en">
+            <el-input v-model="formQuery.affiliation_en" placeholder="请输入英文隶属关系" />
+          </el-form-item>
+        </el-col>
+      </el-row>
       <el-form-item label="品牌组合" prop="brand_group">
         <el-input v-model="formQuery.brand_group" placeholder="请输入品牌组合" />
       </el-form-item>
       <el-row>
         <div class="m-title">职业轨迹</div>
       </el-row>
-      <el-row :gutter="10" class="trajectoryBox" v-for="(item, index) of careerTrajectory" :key="'trajectory' + index">
-        <el-col :span="20">
-          <el-form-item label="酒店名称" prop="hotel_zh" label-width="128px">
-            <el-input v-model="item.hotel_zh" placeholder="请输入酒店名称" />
-          </el-form-item>
-          <el-form-item label="职位名称" prop="title_zh" label-width="128px">
-            <el-input v-model="item.title_zh" placeholder="请输入职位名称" />
-          </el-form-item>
-          <el-form-item label="任职时间" prop="date">
+
+      <div class="text-right mb-5px">
+        <el-button @click="addCareer" plain type="primary" class="cursor-pointer">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </div>
+      <el-table :data="careerTrajectory" :stripe="true">
+        <el-table-column label="酒店名称" align="center" prop="hotel_zh">
+          <template #default="scope">
+            <el-input v-model="scope.row.hotel_zh" placeholder="请输入酒店名称" />
+          </template>
+        </el-table-column>
+        <el-table-column label="职位名称" align="center" prop="title_zh">
+          <template #default="scope">
+            <el-input v-model="scope.row.title_zh" placeholder="请输入职位名称" />
+          </template>
+        </el-table-column>
+        <el-table-column label="任职时间" align="center" prop="date">
+          <template #default="scope">
             <el-date-picker
-              v-model="item.date"
+              v-model="scope.row.date"
               value-format="YYYY-MM-DD"
               type="date"
               :disabledDate="disabledDates"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <div class="flex justify-center items-center !h-100%" style="flex-direction: column;">
-            <el-button @click="addCareer(index)" type="primary" class="cursor-pointer" :icon="Plus" circle />
-            <el-button
-              v-if="careerTrajectory.length > 1"
-              class="mt-15px !ml-0 cursor-pointer"
-              @click="removeCareer(index)"
-              type="danger"
-              :icon="Delete"
-              circle
+              placeholder="任职时间"
+              class="!w-100%"
             />
-          </div>
-        </el-col>
-      </el-row>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="80">
+          <template #default="scope">
+            <el-button link type="danger" :icon="Delete" @click="removeCareer(scope.$index)" />
+          </template>
+        </el-table-column>
+      </el-table>
       <el-row>
         <div class="m-title">地址信息</div>
       </el-row>
@@ -169,18 +189,9 @@
       <el-form-item label="英文地址" prop="address_en">
         <el-input v-model="formQuery.address_en" placeholder="请输入英文地址" />
       </el-form-item>
-      <el-row :gutter="10">
-        <el-col :span="12">
-          <el-form-item label="邮政编码（中）" prop="postal_code_zh">
-            <el-input v-model="formQuery.postal_code_zh" placeholder="请输入中文邮政编码" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="邮政编码（英）" prop="postal_code_en">
-            <el-input v-model="formQuery.postal_code_en" placeholder="请输入英文邮政编码" />
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <el-form-item label="邮政编码" prop="postal_code_zh">
+        <el-input v-model="formQuery.postal_code_zh" placeholder="请输入邮政编码" />
+      </el-form-item>
       <template v-if="formType === 'edit'">
         <el-row>
           <div class="m-title">系统信息</div>
@@ -367,4 +378,9 @@ defineExpose({
     background-color: #fff;
   }
 }
+:deep {
+  .el-form-item--default {
+    margin-bottom: 5px !important;
+  }
+}
 </style>