<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="5">
|
<el-form-item label="员工编号" prop="staffNo">
|
<el-input
|
v-model="form.staffNo"
|
placeholder="请输入"
|
clearable
|
maxlength="20"
|
show-word-limit
|
:disabled="operationType !== 'add'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="姓名" prop="staffName">
|
<el-input
|
v-model="form.staffName"
|
placeholder="请输入"
|
clearable
|
maxlength="50"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="别名" prop="aliasName">
|
<el-input
|
v-model="form.aliasName"
|
placeholder="请输入"
|
clearable
|
maxlength="50"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="手机" prop="phone">
|
<el-input
|
v-model="form.phone"
|
placeholder="请输入"
|
clearable
|
maxlength="11"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="性别" prop="sex">
|
<el-select
|
v-model="form.sex"
|
placeholder="请选择"
|
clearable
|
style="width: 100%"
|
>
|
<el-option label="男" value="男" />
|
<el-option label="女" value="女" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="24">
|
<el-col :span="5">
|
<el-form-item label="出生日期" prop="birthDate">
|
<el-date-picker
|
v-model="form.birthDate"
|
type="date"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
placeholder="请选择"
|
style="width: 100%"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="年龄" prop="age">
|
<el-input-number
|
v-model="form.age"
|
:min="0"
|
:max="150"
|
:precision="0"
|
:step="1"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="籍贯" prop="nativePlace">
|
<el-input
|
v-model="form.nativePlace"
|
placeholder="请输入"
|
clearable
|
maxlength="50"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5">
|
<el-form-item label="民族" prop="nation">
|
<el-input
|
v-model="form.nation"
|
placeholder="请输入"
|
clearable
|
maxlength="20"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="婚姻状况" prop="maritalStatus">
|
<el-select
|
v-model="form.maritalStatus"
|
placeholder="请选择"
|
clearable
|
style="width: 100%"
|
>
|
<el-option label="未婚" value="single" />
|
<el-option label="已婚" value="married" />
|
<el-option label="离异" value="divorced" />
|
<el-option label="丧偶" value="widowed" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="24">
|
<el-col :span="10">
|
<el-form-item label="角色" prop="roleIds">
|
<el-select
|
v-model="form.roleIds"
|
multiple
|
placeholder="请选择"
|
clearable
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in roleOptions"
|
:key="item.roleId"
|
:label="item.roleName"
|
:value="item.roleId"
|
:disabled="item.status == 1"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-card>
|
</template>
|
|
<script setup>
|
import { toRefs } from "vue";
|
|
const props = defineProps({
|
form: { type: Object, required: true },
|
operationType: { type: String, default: "add" },
|
roleOptions: { type: Array, default: () => [] },
|
});
|
|
const { form, operationType, roleOptions } = toRefs(props);
|
</script>
|
|
<style scoped>
|
.form-card {
|
margin-bottom: 16px;
|
}
|
|
.card-title-line {
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
</style>
|
