ys_sms_sending_web/src/views/basicManage/personManage/addAndEditForm.vue

<template>
    <el-form
        size="large"
        label-width="auto"
        :model="formData"
        ref="formRef"
        :rules="rules"
        class="add-and-edit-form"
    >
        <el-form-item label="人员所属部门" prop="inspectionStationId">
            <!-- <el-select
                filter
                clearable
                style="width: 100%"
                v-model="formData.inspectionStationId"
                placeholder="请选择人员所属部门"
            >
                <el-option
                    v-for="item in inspectionStationOptions"
                    :key="item.id"
                    :value="item.id"
                    :label="item.value"
                />
            </el-select> -->

            <el-tree-select
                clearable
                check-strictly
                value-key="id"
                :data="enabledDeptOptions"
                v-model="formData.inspectionStationId"
                placeholder="请选择归属部门"
                :props="{ value: 'id', label: 'label', children: 'children' }"
            />
        </el-form-item>

        <el-form-item label="姓名" prop="name">
            <el-input
                clearable
                maxlength="20"
                show-word-limit
                placeholder="请输入姓名"
                v-model.trim="formData.name"
            />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
                <el-radio-button :label="1">男性 ♂</el-radio-button>
                <el-radio-button :label="0">女性 ♀</el-radio-button>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
            <el-input
                clearable
                maxlength="11"
                show-word-limit
                placeholder="请输入电话"
                v-model.trim="formData.phone"
            />
        </el-form-item>
    </el-form>
</template>

<script setup name="AddAndEditForm">
import { ref, onMounted } from 'vue'
import { deptTreeSelect } from '@/api/system/user'
const props = defineProps({
    formData: {
        type: Object,
        default: () => ({}),
    },
    inspectionStationOptions: {
        type: Array,
        default: () => [],
    },
    positionOptions: {
        type: Array,
        default: () => [],
    },
    natureOptions: {
        type: Array,
        default: () => [],
    },
    categoryOptions: {
        type: Array,
        default: () => [],
    },
})
const deptOptions = ref(undefined)
const enabledDeptOptions = ref(undefined)
const formRef = ref(null)

const rules = {
    inspectionStationId: [{ required: true, message: '请选择人员所属', trigger: 'change' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    phone: [
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
        },
    ],
    positionId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
    personnelNatureId: [{ required: true, message: '请选择人员性质', trigger: 'change' }],
    personnelClassificationId: [{ required: true, message: '请选择人员分类', trigger: 'change' }],
}

/** 查询部门下拉树结构 */
const getDeptTree = () => {
    deptTreeSelect().then((response) => {
        deptOptions.value = response.data
        enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
    })
}

/** 过滤禁用的部门 */
const filterDisabledDept = (deptList) => {
    return deptList.filter((dept) => {
        if (dept.disabled) {
            return false
        }
        if (dept.children && dept.children.length) {
            dept.children = filterDisabledDept(dept.children)
        }
        return true
    })
}

onMounted(() => {
    getDeptTree()
})

// 暴露校验方法和重置方法给父组件
defineExpose({
    validate: () => formRef.value.validate(),
    resetFields: () => formRef.value.resetFields(),
    clearValidate: () => formRef.value.clearValidate(),
})
</script>

<style lang="scss" scoped>
.add-and-edit-form {
    padding: 10px 20px;
    :deep(.el-radio-button__inner) {
        border-radius: 20px;
        margin-right: 10px;
        border: 1px solid #dcdfe6 !important;
        box-shadow: none !important;
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner) {
        border-left: 1px solid #dcdfe6 !important;
    }
    :deep(.el-radio-button.is-active .el-radio-button__inner) {
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        border-color: var(--el-color-primary) !important;
    }
}
</style>