manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/team/module/AddPersonnelModal.vue

<template>
    <el-dialog v-model="data.addPersonnelDialogVisible" :title="'添加人员'" width="500" :before-close="handleClose">
        <div>
            <el-form ref="personnelRuleFormRef" style="max-width: 500px" :model="personnelFrom" :rules="personnelRules"
                label-width="auto" size="large" status-icon>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="personnelFrom.name" placeholder="请输入姓名" clearable />
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="personnelFrom.phone" placeholder="请输入电话" clearable />
                </el-form-item>
                <el-form-item label="工号">
                    <el-input v-model="personnelFrom.jobNumber" placeholder="请输入工号" clearable />
                </el-form-item>
                <el-form-item label="部门">
                    <el-cascader v-model="personnelFrom.departmentId" :options="data.deptList" placeholder="请选择部门" :props="{ checkStrictly: true }" clearable style="width: 100%" />
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="personnelFrom.roleId" placeholder="请选择角色" size="large">
                        <el-option v-for="item in data.roleList" :key="item.id" :label="item.rolename" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入职时间">
                    <el-date-picker v-model="personnelFrom.inductionDate" type="date" placeholder="选择入职时间" value-format="YYYY-MM-DD" style="width: 100%" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="addPersonel(personnelRuleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { FormRules, FormInstance } from 'element-plus'
import { getFromValue, resetFromValue } from '@/utils/tools'

const emit = defineEmits(['closeModal', 'personnelModalConfirm']);
// 定义类型
interface Props {
    data: {
        addPersonnelDialogVisible: boolean,
        deptList: any,
        roleList: any,
        personnelFromData: any
    };
}

interface personnelFromType { // 类型定义
    id: string | number,
    name: string,
    phone: string | number,
    jobNumber: string,
    roleId: string | number,
    departmentId: string[] | number[],
    inductionDate: string,
}
const data = ref<Props['data']>({
    addPersonnelDialogVisible: false,
    deptList: [],
    roleList: [],
    personnelFromData: {}
})
const personnelRuleFormRef = ref<FormInstance>() // 表单实例
const personnelFrom = reactive<personnelFromType>({ // 填写的内容
    id: '',
    name: '',
    phone: '',
    jobNumber: '',
    roleId: '',
    departmentId: [],
    inductionDate: '',
});

// 接收参数
const props = defineProps<Props>();

// 定义校验规则
const personnelRules = reactive<FormRules<typeof personnelFrom>>({ // 部门表单校验规则
    name: [{ required: true, trigger: 'blur', message: '请输入姓名' }]
})

// 定义方法
function addPersonel(formEl: FormInstance | undefined) {
    if (!formEl) return
    let dataForm = getFromValue(personnelFrom)
    const { departmentId } = dataForm
    emit('personnelModalConfirm', { ...dataForm, departmentId: departmentId && departmentId[departmentId.length - 1]  }, 'addPersonnelDialogVisible')
}

// 监听 Props 的变化
watch(() => props.data, (newValue) => {
    data.value = newValue
    Object.assign(personnelFrom, newValue.personnelFromData)
});

const handleClose = () => {
    emit('closeModal', 'addPersonnelDialogVisible')
}

</script>
<style scoped lang="scss"></style>