| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <el-card class="form-card" shadow="never"> |
| | | <template #header> |
| | | <span class="card-title"> |
| | | <span class="card-title-line">|</span> |
| | | å¨èä¿¡æ¯ |
| | | </span> |
| | | </template> |
| | | |
| | | <!-- 第ä¸è¡ï¼ååå¼å§ / ååç»æ / è¯ç¨æ / è½¬æ£ --> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="6"> |
| | | <el-form-item label="å
¥èæ¥æ" prop="contractStartTime"> |
| | | <el-date-picker |
| | | v-model="form.contractStartTime" |
| | | type="date" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | placeholder="è¯·éæ©" |
| | | style="width: 100%" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <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 |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="è¯ç¨æï¼æï¼" prop="probationPeriod"> |
| | | <el-input-number |
| | | v-model="form.proTerm" |
| | | :min="0" |
| | | :max="24" |
| | | :precision="0" |
| | | :step="1" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="è½¬æ£æ¥æ" prop="positiveDate"> |
| | | <el-date-picker |
| | | v-model="form.positiveDate" |
| | | type="date" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | placeholder="è¯·éæ©" |
| | | style="width: 100%" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- 第äºè¡ï¼é¨é¨ / å²ä½ / åºæ¬å·¥èµ --> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="é¨é¨" prop="sysDeptId"> |
| | | <el-tree-select |
| | | v-model="form.sysDeptId" |
| | | :data="deptOptions" |
| | | check-strictly |
| | | :render-after-expand="false" |
| | | placeholder="è¯·éæ©" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="å²ä½" prop="sysPostId"> |
| | | <el-select |
| | | v-model="form.sysPostId" |
| | | placeholder="è¯·éæ©" |
| | | clearable |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="item in postOptions" |
| | | :key="item.postId" |
| | | :label="item.postName" |
| | | :value="item.postId" |
| | | :disabled="item.status === '1'" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="åºæ¬å·¥èµ" prop="basicSalary"> |
| | | <el-input-number |
| | | v-model="form.basicSalary" |
| | | :min="0" |
| | | :max="999999" |
| | | :precision="2" |
| | | :step="100" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-card> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { toRefs } from "vue"; |
| | | |
| | | const props = defineProps({ |
| | | form: { type: Object, required: true }, |
| | | postOptions: { type: Array, default: () => [] }, |
| | | deptOptions: { type: Array, default: () => [] }, |
| | | }); |
| | | |
| | | const { form, postOptions, deptOptions } = toRefs(props); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .form-card { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .card-title-line { |
| | | color: #f56c6c; |
| | | margin-right: 4px; |
| | | } |
| | | </style> |
| | | |