scd_tools_ui/src/pages/system/modalComp/AddNode.vue

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="添加模型定义" width="30%" @close="closes">
            <!--  -->
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="模型名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="电压等级" prop="flashName">
                    <el-select @change="flashCase" v-model="ruleForm.flashName" placeholder="请选择电压等级">
                        <template v-for="(item, index) in flashLel">
                            <el-option :label="item.name" :value="item.id" />
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="接线方式" prop="linkStyle">
                    <el-select @change="moduleChange" v-model="ruleForm.linkStyle" placeholder="请选择接线方式">
                        <template v-for="(item, index) in moduleList">
                            <el-option v-if="ruleForm.flashName == '' || ruleForm.flashName == item.vol_level_id"
                                :label="item.name" :value="item.id" />
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="间隔类型" prop="moduleId">
                    <el-select @change="flashChange" v-model="ruleForm.moduleId" placeholder="请选择间隔类型">
                        <template v-for="(item, index) in selectList">
                            <el-option :label="item.name" :value="item.id" />
                        </template>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancels">取消</el-button>
                    <el-button type="primary" @click="sureClick">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, unref, onMounted, toRefs, reactive, watch } from 'vue';
import systemRow from '@/api/systemRow';
import litLine from '@/api/litLine';
import cid from '@/api/cid/cid';
import { ElMessage } from 'element-plus';
export default {
    props: {
        nodeMos: {
            type: Boolean,
            required: true,
        },
        goMap: {
            type: Function,
            required: true
        },
        needRow: {
            type: Object,
            require: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)//模态框显示
        let result = props.nodeMos
        let ruleForm = ref({
            id: 0,
            name: "",//模型名称
            linkStyle: "",//接线方式
            moduleId: '',//模型类型
            flashName: ''//电压等级
        })
        let selectList = ref([])
        let moduleList = ref([])
        let flashLel = ref([])
        let coolRow = ref({})
        let rules = reactive({
            name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ],
            flashName: [
                {
                    required: true, message: '请选择电压等级', trigger: 'blur'
                }
            ],
            linkStyle: [
                {
                    required: true, message: '请选择接线方式', trigger: 'blur'
                }
            ],
            moduleId: [
                {
                    required: true, message: '请选择间隔类型', trigger: 'blur'
                }
            ]
        })
        let ruleFormRef = ref(null)
        watch(() => props.needRow, (newVal) => {
            coolRow.value = newVal
            ruleForm.value.name = coolRow.value.model_name || ''
            ruleForm.value.linkStyle = coolRow.value.line_link_style || ''
            ruleForm.value.flashName = coolRow.value.vol_id || ''
            ruleForm.value.moduleId = coolRow.value.area_type || ''
            ruleForm.value.id = coolRow.value.id || 0
            dialogVisible.value = true
        })
        function lineList() {
            dialogVisible.value = result
        }
        function searchFlashLel() {
            ruleForm.value.id = props.needRow.id || 0
            ruleForm.value.name = props.needRow.model_name || ''
            systemRow.getChildren({ code: "area_type" }).then(res => {
                selectList.value = res.data
                ruleForm.value.moduleId = props.needRow.area_type
            })
            systemRow.getChildren({ code: "voltage_level" }).then(res => {
                flashLel.value = res.data
                ruleForm.value.flashName = props.needRow.vol_id
            })
            litLine.getAllLine({ pageno: 1, pagesize: 100 }).then(res => {
                console.log(res, '接线方式');
                moduleList.value = res.data
                ruleForm.value.linkStyle = props.needRow.line_link_style
            })
        }
        function flashChange(e) {
            ruleForm.value.moduleId = e
        }
        function moduleChange(e) {
            ruleForm.value.linkStyle = e
        }
        function flashCase(e) {
            ruleForm.value.flashName = e
        }
        function getBack() {
            dialogVisible.value = false
            emit("addBack", false)
        }
        function getSure() {
            if (ruleForm.value.name == '' || ruleForm.value.flashName == '' || ruleForm.value.linkStyle == '' || ruleForm.value.moduleId == '') {
                ruleFormRef.value.validate((valid) => {
                    if (valid) {
                        // 验证通过，执行相应操作
                        console.log('验证通过');
                    } else {
                        // 验证不通过，执行相应操作
                        console.log('验证不通过');
                    }
                });
            } else {
                cid.saveMap({
                    id: ruleForm.value.id,
                    model_name: ruleForm.value.name,
                    vol_id: ruleForm.value.flashName - 0,
                    line_link_style: ruleForm.value.linkStyle - 0,
                    area_type: ruleForm.value.moduleId - 0,
                }).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: "success",
                            message: "添加成功",
                            duration: 2000
                        })
                        dialogVisible.value = false
                        emit("addBack", true)
                    } else {
                        ElMessage({
                            type: "error",
                            message: res.msg,
                            duration: 2000
                        })
                    }
                })
            }
        }
        onMounted(() => {
            lineList()
            searchFlashLel()
        })
        return {
            dialogVisible,
            searchFlashLel,
            ruleForm,
            rules,
            selectList,
            lineList,
            flashChange,
            cancels: getBack,
            closes: getBack,
            sureClick: getSure,
            moduleChange,
            moduleList,
            flashLel,
            flashCase,
            coolRow,
            ruleFormRef,//表单ref
        }
    }
}
</script>

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