src/views/personnelManagement/employeeRecord/components/BasicInfoSection.vue
@@ -1,154 +1,149 @@
<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>
@@ -157,25 +152,27 @@
</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>