admin-govern/src/views/govern/mxgraph/graphList/components/popup.vue

<template>
    <el-dialog
        draggable
        :title="title"
        v-model.trim="dialogVisible"
        width="500px"
        :before-close="handleClose"
        :close-on-click-modal="false"
    >
        <el-form ref="formRef" :rules="rules" :model="form" label-width="90px" class="form">
            <el-form-item label="项目名称:" prop="name">
                <el-input
                    maxlength="32"
                    show-word-limit
                    v-model.trim="form.name"
                    placeholder="请输入项目名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="工程项目:" class="top" prop="projectIds">
                <el-tree-select
                    v-model.trim="form.projectIds"
                    default-expand-all
                    show-checkbox
                    node-key="id"
                    :props="defaultProps"
                    multiple
                    :data="Engineering"
                    collapse-tags
                    style="width: 100%"
                />
                <!-- <el-cascader v-model.trim="form.projectIds" :options="Engineering" :props="defaultProps"
                    :show-all-levels="false" collapse-tags collapse-tags-tooltip clearable  style="width: 100%;"/> -->
            </el-form-item>
            <el-form-item label="项目排序:" prop="orderBy">
                <el-input
                    maxlength="32"
                    show-word-limit-number
                    v-model.trim="form.orderBy"
                    :min="0"
                    :step="1"
                    step-strictly
                    style="width: 100%"
                />
            </el-form-item>

            <el-form-item label="备注:" class="top">
                <el-input
                    maxlength="300"
                    show-word-limit
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model.trim="form.remark"
                ></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFn">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { deviceTree, add, audit, getztProjectTree } from '@/api/cs-harmonic-boot/mxgraph'
import { ElMessage, ElMessageBox } from 'element-plus'
const title = ref('')
const formRef = ref()
const Engineering = ref([])
const dialogVisible = ref(false)
const emit = defineEmits(['submit'])
const defaultProps = {
    children: 'children',
    value: 'id',
    label: 'name',
    multiple: true,
    expandTrigger: 'hover' as const
}
const form: any = reactive({
    name: '',
    projectIds: [],
    orderBy: '100',
    remark: ''
})
const rules = {
    name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    projectIds: [{ required: true, message: '请选择工程项目', trigger: 'change' }],
    orderBy: [{ required: true, message: '请输入排序', trigger: 'blur' }]
}
const addFn = () => {
    console.log('🚀 ~ add ~ form:', form)

    formRef.value.validate((valid: boolean) => {
        if (valid) {
            if (title.value == '新增项目') {
                add(form).then((res: any) => {
                    ElMessage.success('新增项目成功!')
                    dialogVisible.value = false
                    emit('submit')
                })
            } else {
                audit(form).then((res: any) => {
                    ElMessage.success('修改项目成功!')
                    dialogVisible.value = false
                    emit('submit')
                })
            }
        }
    })
}
const handleTree = (data: any) => {
    if (data && data.length != 0) {
        data.map((item: any) => {
            if (item.level != 2) {
                item.disabled = true
            } else {
                item.disabled = false
            }
        })
    }
}
const open = ref((row: any) => {
    formRef.value?.resetFields()
    // deviceTree({}).then((res: any) => {
    //     res.data.forEach((item: any) => {
    //         item.children.forEach((child: any) => {
    //             child.children = []
    //         })
    //     })
    //     Engineering.value = res.data
    // })
    getztProjectTree().then((res: any) => {
        res.data.forEach((item: any, index: any) => {
            if (!item.children || item.children.length == 0) {
                res.data.splice(index, 1)
                return
            }
            item.newList = []
            item.children.forEach((vv: any, vvs: any) => {
                vv.children.forEach((ss: any, ssIndex: any) => {
                    if (ss.level == 1) {
                        item.newList.push(ss)
                    }
                })
            })
            item.disabled = true
            if (item.children && item.children.length != 0) {
                item.children.forEach((vv: any, vvs: any) => {
                    vv.disabled = true
                    if (item.name.includes('治理')) {
                        if (vv.level === 0) {
                            vv.disabled = true
                        } else {
                            vv.disabled = false
                        }
                        // item.children = item.newList
                    }
                    if (item.name.includes('便携式')) {
                        if (vv.level === 1) {
                            vv.disabled = false
                        } else {
                            vv.disabled = true
                        }
                    }
                    if (vv.children && vv.children.length != 0) {
                        vv.children.forEach((kk: any, kks: any) => {
                            if (item.name.includes('便携式') && kk.level === 2) {
                                kk.disabled = true
                                vv.children.splice(kks, 1)
                            }
                            // else {
                            //     kk.disabled = true
                            // }
                        })
                    }
                })
            }
        })
        Engineering.value = removeData(res.data)
    })
    title.value = row.title
    dialogVisible.value = true
    if (row.title == '新增项目') {
        form.name = ''
        form.projectIds = []
        form.orderBy = '100'
        form.remark = ''
    } else {
        for (let key in form) {
            form[key] = row.row[key] || ''
        }
        form.id = row.row.id
    }
})
const removeData = arr => {
    return arr
        .map(item => {
            if (item.children) {
                item.children = removeData(item.children)
            }
            return item.level <= 1 ? item : {}
        })
        .filter(item => Object.keys(item).length > 0)
}

const handleClose = () => {
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>