| | |
| | | <template> |
| | | <el-card class="form-card" shadow="never"> |
| | | <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 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 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="alias"> |
| | | <el-input |
| | | v-model="form.alias" |
| | | placeholder="请输入" |
| | | clearable |
| | | maxlength="50" |
| | | show-word-limit |
| | | /> |
| | | <el-form-item label="别名" |
| | | prop="alias"> |
| | | <el-input v-model="form.alias" |
| | | 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 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-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 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 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 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 label="民族" |
| | | prop="nation"> |
| | | <el-select v-model="form.nation" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%"> |
| | | <el-option v-for="dict in nation_type" |
| | | :key="dict.label" |
| | | :label="dict.label" |
| | | :value="dict.label" /> |
| | | </el-select> |
| | | </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="未婚" /> |
| | | <el-option label="已婚" value="已婚" /> |
| | | <el-option label="离异" value="离异" /> |
| | | <el-option label="丧偶" value="丧偶" /> |
| | | <el-form-item label="婚姻状况" |
| | | prop="maritalStatus"> |
| | | <el-select v-model="form.maritalStatus" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%"> |
| | | <el-option label="未婚" |
| | | value="未婚" /> |
| | | <el-option label="已婚" |
| | | value="已婚" /> |
| | | <el-option label="离异" |
| | | value="离异" /> |
| | | <el-option label="丧偶" |
| | | value="丧偶" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="24"> |
| | | <el-col :span="10"> |
| | | <el-form-item label="角色" prop="roleId"> |
| | | <el-select |
| | | v-model="form.roleId" |
| | | 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-form-item label="角色" |
| | | prop="roleId"> |
| | | <el-select v-model="form.roleId" |
| | | 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> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { toRefs } from "vue"; |
| | | import { toRefs, getCurrentInstance } from "vue"; |
| | | |
| | | const props = defineProps({ |
| | | form: { type: Object, required: true }, |
| | | operationType: { type: String, default: "add" }, |
| | | roleOptions: { type: Array, default: () => [] }, |
| | | }); |
| | | const props = defineProps({ |
| | | form: { type: Object, required: true }, |
| | | operationType: { type: String, default: "add" }, |
| | | roleOptions: { type: Array, default: () => [] }, |
| | | }); |
| | | |
| | | const { form, operationType, roleOptions } = toRefs(props); |
| | | const { proxy } = getCurrentInstance(); |
| | | const { nation_type } = proxy.useDict("nation_type"); |
| | | const { form, operationType, roleOptions } = toRefs(props); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .form-card { |
| | | margin-bottom: 16px; |
| | | } |
| | | .form-card { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .card-title-line { |
| | | color: #f56c6c; |
| | | margin-right: 4px; |
| | | } |
| | | .card-title-line { |
| | | color: #f56c6c; |
| | | margin-right: 4px; |
| | | } |
| | | </style> |
| | | |