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="orgId">
            <el-tree-select
                clearable
                check-strictly
                value-key="id"
                :data="enabledDeptOptions"
                v-model="formData.orgId"
                placeholder="请选择归属部门"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                @change="handleDeptChange"
            />
        </el-form-item>

        <el-form-item label="姓名" prop="workerName">
            <el-input
                clearable
                maxlength="20"
                show-word-limit
                placeholder="请输入姓名"
                v-model.trim="formData.workerName"
            />
        </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-item label="生日" prop="birthday">
            <el-date-picker
                type="date"
                clearable
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择生日"
                v-model="formData.birthday"
            />
        </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: () => ({}),
    },
})

const deptOptions = ref(undefined)
const enabledDeptOptions = ref(undefined)
const formRef = ref(null)

const rules = {
    orgId: [{ required: true, message: '请选择人员所属部门', trigger: 'change' }],
    workerName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    phone: [
        { required: true, message: '请输入电话', trigger: 'blur' },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
        },
    ],

    birthday: [{ 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
    })
}

/** 部门选择变化时，更新部门名称 */
const handleDeptChange = (value) => {
    if (!value) {
        props.formData.orgName = ''
        return
    }
    // 查找选中的部门名称
    const findDeptName = (list, id) => {
        for (const item of list) {
            if (item.id === id) {
                return item.label
            }
            if (item.children && item.children.length) {
                const found = findDeptName(item.children, id)
                if (found) return found
            }
        }
        return ''
    }
    props.formData.orgName = findDeptName(enabledDeptOptions.value, value)
}

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>