From 07589fbf7e3fb9b998996664f4a3236b4c8d9acd Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期六, 11 四月 2026 15:08:11 +0800
Subject: [PATCH] 优化通用表格设置单元格宽度问题
---
src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue | 126 +++++++++++++++++++++--------------------
1 files changed, 65 insertions(+), 61 deletions(-)
diff --git a/src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue b/src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue
index 6cd38e2..be33436 100644
--- a/src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue
+++ b/src/views/personnelManagement/employeeRecord/components/JobInfoSection.vue
@@ -7,51 +7,51 @@
</span>
</template>
+ <!-- 绗竴琛岋細鍚堝悓寮�濮� / 鍚堝悓缁撴潫 / 璇曠敤鏈� / 杞 -->
<el-row :gutter="24">
- <el-col :span="5">
- <el-form-item label="宸ュ彿" prop="jobNo">
- <el-input
- v-model="form.jobNo"
- placeholder="璇疯緭鍏�"
- clearable
- maxlength="20"
- show-word-limit
- />
- </el-form-item>
- </el-col>
- <el-col :span="5">
- <el-form-item label="鍛樺伐绫诲瀷" prop="staffType">
- <el-select
- v-model="form.staffType"
- placeholder="璇烽�夋嫨"
- clearable
- style="width: 100%"
- >
- <el-option label="姝ｅ紡鍛樺伐" value="official" />
- <el-option label="璇曠敤鍛樺伐" value="probation" />
- <el-option label="瀹炰範鐢�" value="intern" />
- <el-option label="鍏艰亴" value="part_time" />
- <el-option label="鍔冲姟/澶栧寘" value="outsourcing" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="5">
- <el-form-item label="鍏ヨ亴鏃ユ湡" prop="entryDate">
+ <el-col :span="6">
+ <el-form-item label="鍏ヨ亴鏃ユ湡" prop="contractStartTime">
<el-date-picker
- v-model="form.entryDate"
+ v-model="form.contractStartTime"
type="date"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
placeholder="璇烽�夋嫨"
style="width: 100%"
clearable
+ @change="calculateContractTerm"
/>
</el-form-item>
</el-col>
- <el-col :span="5">
+ <el-col :span="6">
+ <el-form-item
+ label="鍚堝悓缁撴潫鏃ユ湡"
+ prop="contractEndTime"
+ required
+ :rules="[
+ {
+ required: true,
+ message: '璇烽�夋嫨鍚堝悓缁撴潫鏃ユ湡',
+ trigger: 'change',
+ },
+ ]"
+ >
+ <el-date-picker
+ v-model="form.contractEndTime"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ clearable
+ @change="calculateContractTerm"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="6">
<el-form-item label="璇曠敤鏈燂紙鏈堬級" prop="probationPeriod">
<el-input-number
- v-model="form.probationPeriod"
+ v-model="form.proTerm"
:min="0"
:max="24"
:precision="0"
@@ -60,10 +60,10 @@
/>
</el-form-item>
</el-col>
- <el-col :span="4">
- <el-form-item label="杞鏃ユ湡" prop="regularDate">
+ <el-col :span="6">
+ <el-form-item label="杞鏃ユ湡" prop="positiveDate">
<el-date-picker
- v-model="form.regularDate"
+ v-model="form.positiveDate"
type="date"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
@@ -75,6 +75,7 @@
</el-col>
</el-row>
+ <!-- 绗簩琛岋細閮ㄩ棬 / 宀椾綅 / 鍩烘湰宸ヨ祫 -->
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="閮ㄩ棬" prop="sysDeptId">
@@ -85,17 +86,6 @@
:render-after-expand="false"
placeholder="璇烽�夋嫨"
style="width: 100%"
- />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鐩存帴涓婄骇" prop="directLeader">
- <el-input
- v-model="form.directLeader"
- placeholder="璇疯緭鍏�"
- clearable
- maxlength="50"
- show-word-limit
/>
</el-form-item>
</el-col>
@@ -117,21 +107,7 @@
</el-select>
</el-form-item>
</el-col>
- </el-row>
-
- <el-row :gutter="24">
- <el-col :span="5">
- <el-form-item label="鑱岀骇" prop="jobLevel">
- <el-input
- v-model="form.jobLevel"
- placeholder="璇疯緭鍏�"
- clearable
- maxlength="10"
- show-word-limit
- />
- </el-form-item>
- </el-col>
- <el-col :span="4">
+ <el-col :span="8">
<el-form-item label="鍩烘湰宸ヨ祫" prop="basicSalary">
<el-input-number
v-model="form.basicSalary"
@@ -157,6 +133,34 @@
});
const { form, postOptions, deptOptions } = toRefs(props);
+
+// 璁＄畻鍚堝悓骞撮檺
+const calculateContractTerm = () => {
+ if (form.value.contractStartTime && form.value.contractEndTime) {
+ const startDate = new Date(form.value.contractStartTime);
+ const endDate = new Date(form.value.contractEndTime);
+
+ if (endDate > startDate) {
+ // 璁＄畻骞翠唤宸�
+ const yearDiff = endDate.getFullYear() - startDate.getFullYear();
+ const monthDiff = endDate.getMonth() - startDate.getMonth();
+ const dayDiff = endDate.getDate() - startDate.getDate();
+
+ let years = yearDiff;
+
+ // 濡傛灉缁撴潫鏃ユ湡鐨勬湀鏃ュ皬浜庡紑濮嬫棩鏈熺殑鏈堟棩锛屽垯鍑忓幓1骞�
+ if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+ years = yearDiff - 1;
+ }
+
+ form.value.contractTerm = Math.max(0, years);
+ } else {
+ form.value.contractTerm = 0;
+ }
+ } else {
+ form.value.contractTerm = 0;
+ }
+};
</script>
<style scoped>
--
Gitblit v1.9.3