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

<template>


    <el-dialog draggable :title="title" v-model="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 v-model.trim="form.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="工程项目:" class="top" prop="projectIds">

                <el-tree-select v-model="form.projectIds" default-expand-all show-checkbox node-key="id"
                    :props="defaultProps" multiple :data="Engineering" collapse-tags style="width: 100%" />
                <!-- <el-cascader v-model="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-number v-model="form.orderBy" :min="0" :step="1" step-strictly style="width: 100%" />
            </el-form-item>


            <el-form-item label="备注:" class="top">
                <el-input 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 } 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 = () => {
    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 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
    })
    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 handleClose = () => {
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>