admin-sjzx/src/views/system/auth/department/popupForm.vue

<template>
    <el-dialog draggable width="700px" v-model="dialogVisible" :title="title">
        <el-scrollbar>
            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
                <el-form-item label="部门编号:">
                    <el-input v-model="form.code" placeholder="请输入部门编号" clearable maxlength="32" show-word-limit></el-input>
                </el-form-item>
                <el-form-item class="top" label="部门名称:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入部门名称" maxlength="32" show-word-limit clearable @input="handleInput"/>
                </el-form-item>
                <el-form-item class="top" label="部门类型:" prop="type">
                    <el-select v-model="form.type" placeholder="选择部门类型" style="width: 100%">
                        <el-option
                            v-for="item in customDeptOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="top" label="子类型:" >
                    <el-select v-model="form.specialType" placeholder="选择子类型" style="width: 100%">
                        <el-option
                            v-for="item in ziDeptOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="top" label="部门区域:" prop="area">
                    <el-select v-model="form.area" placeholder="选择部门区域" style="width: 100%">
                        <el-option
                            v-for="item in areaOption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="top" label="部门排序:" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入部门排序"></el-input>
                </el-form-item>
                <el-form-item class="top" label="部门描述:">
                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入部门描述"></el-input>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getAreaTree, getPidAreaByAreaId, addDept, updateDept } from '@/api/user-boot/dept'

const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
    area: '',
    name: '',
    pid: -1,
    remark: '',
    sort: 100,
    type: 0,
    code: '',
    specialType: 0,
    id: ''
})
const originForm = { ...form }
const rules = {
    parentName: [{ required: true, message: '请选择父节点', trigger: 'blur' }],
    code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
    name: [{ required: true, message: '请输选择部门名称', trigger: 'blur' }],
    type: [{ required: true, message: '请输选择部门类型', trigger: 'blur' }],
    specialType: [{ required: true, message: '请输选择部门子类型', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
    area: [{ required: true, message: '请选择部门区域', trigger: 'blur' }]
}
const customDeptOption = [
    { value: 0, label: '非自定义' },
    { value: 1, label: 'web自定义' },
    { value: 2, label: 'App自定义' },
    { value: 3, label: 'web测试' }
]
const ziDeptOption = [
    { label: '非本部', value: 0 },
    { label: '本部', value: 1 }
]
const areaOption = ref<any>([])
const open = (text: string, data: anyObj) => {

    title.value = text
    dialogVisible.value = true
    if (data.id) {
        // 表单赋值
        for (let key in form) {
            form[key] = data[key]
        }
        getPidAreaByAreaId({
            id: data.area,
            type: 0
        }).then((res: any) => {
            areaOption.value = res.data
        })
    } else {
        // 在此处恢复默认表单
        for (let key in form) {
            form[key] = originForm[key]
            if (data[key]) {
                form[key] = data[key]
            }
        }
        getAreaTree({
            id: data.pArea,
            type: 0
        }).then((res: any) => {
            areaOption.value = res.data
        })
    }
}
const submit = () => {
    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            if (form.id) {
                await updateDept(form)
            } else {
                await addDept(form)
            }
            ElMessage.success('保存成功')
            tableStore.index()
            dialogVisible.value = false
        }
    })
}


const handleInput = ( value: string) => {
    // 过滤空格
    const filteredValue = value.replace(/\s/g, '')
    if (filteredValue !== value) {
       form.name = filteredValue
    }
}

defineExpose({ open })
</script>