scd_tools_ui/src/pages/components/drawModal/AddAbility.vue

<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="titles" width="30%" @close="handleClose" :close-on-click-modal="false">
            <el-form ref="ruleFormRef" :model="abilityFrom" :rules="rules" label-width="180px">
                <el-form-item label="设计功能名称" prop="setAbName">
                    <el-select :disabled="numState == 1" @change="abNameChange" style="width: 350px;"
                        v-model="abilityFrom.setAbName" filterable allow-create default-first-option
                        :reserve-keyword="false" placeholder="选择或输入">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" />
                    </el-select>
                    <p style="color: #2C5BE5;font-size: 16px;">新功能可直接输入但不能重复;已有功能可选择</p>
                </el-form-item>
                <el-form-item label="设计端子名称" prop="setSon">
                    <el-input style="width: 350px;" v-model="abilityFrom.setSon"></el-input>
                </el-form-item>
                <el-form-item label="端子描述关键词" prop="setMemo">
                    <el-input style="width: 350px;" v-model="abilityFrom.setMemo"></el-input>
                    <p style="color: #2C5BE5;font-size: 16px;">关键词之间“|”表示或者,“&”表示并且</p>
                </el-form-item>
                <el-form-item label="端子信号类型" prop="sg">
                    <el-select @change="sgChange" style="width: 350px;" v-model="abilityFrom.sg" allow-create
                        default-first-option :reserve-keyword="false" placeholder="请选择信号类型">
                        <el-option key="SV" label="SV" value="SV" />
                        <el-option key="GOOSE" label="GOOSE" value="GOOSE" />
                    </el-select>
                    <p style="color: #2C5BE5;font-size: 16px;">仅支持SV或GOOSE</p>
                </el-form-item>
                <el-form-item label="端子信号输入输出方向" prop="io">
                    <el-select @change="ioChange" style="width: 350px;" v-model="abilityFrom.io" allow-create
                        default-first-option :reserve-keyword="false" placeholder="请选择输入或输出">
                        <el-option key="接收" label="接收" value="接收" />
                        <el-option key="输出" label="输出" value="输出" />
                    </el-select>
                    <p style="color: #2C5BE5;font-size: 16px;">仅支持中文的'接收'或'输出'</p>
                </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, onMounted, watch, toRefs, reactive } from 'vue'
import flow from '@/api/flow/flow'
import { ElMessage } from 'element-plus'
export default {
    props: {
        addModal: {
            type: Boolean,
            required: true,
        },
        tableData: {
            type: Array,
            required: true
        },
        modelIds: {
            type: String,
            required: true
        },//模型id
        iedTypes: {
            type: String,
            required: true
        },//iedtype
        copyReload: {
            type: Function,
            required: true
        },//刷新父组件属性方法
        editOrAdd: {
            type: Number,
            required: true,
        },//编辑或新增
        editRow: {
            type: Object,
            required: true
        },//表格整行数据结构id就为fcda_id
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)//模态框开关
        let abilityFrom = ref({
            setAbName: "",//设计功能名称
            setSon: "",//设计端子名称
            setMemo: "",//端子描述关键词
            sg: "",//sv还是goose
            io: ""//输入还是输出
        })
        let options = ref([])//多选选项
        let fatherToSon = ref([])//AbilityModal.vue传过来的表格数据，制作为选项
        let needModel = ref('')//需要的模型id
        let needIedType = ref('')//需要的iedtype
        let ruleFormRef = ref(null)//表单的ref，用于触发验证
        const rules = reactive({
            setAbName: [
                { required: true, message: '请选择设计功能名称', trigger: 'change' },
            ],
            setSon: [
                { required: true, message: '请输入设计端子名称', trigger: 'blur' },
            ],
            setMemo: [
                { required: true, message: '请输入端子描述关键词', trigger: 'blur' },
            ],
            sg: [
                { required: true, message: '请选择端子信号类型', trigger: 'change' },
            ],
            io: [
                { required: true, message: '请选择端子输入输出方向', trigger: 'change' },
            ]
        })//表单验证
        let numState = ref(0)//0为新增，1为修改
        let needEditRow = ref({})//需要修改的整个对象属性
        let newAddId = ref("")//新增的id
        let titles = ref("新增装置功能")
        // 监听props.tabledata变化赋值
        watch(() => props.tableData, (newVal) => {
            fatherToSon.value = newVal
        })
        // 监听props.modelids变化并赋值
        watch(() => props.modelIds, (newVal) => {
            needModel.value = newVal
        }, { immediate: true })
        // 监听props.iedtypes变化并赋值
        watch(() => props.iedTypes, (newVal) => {
            needIedType.value = newVal
        })
        // 监听props.editrow变化并赋值
        watch(() => props.editRow, (newVal) => {
            needEditRow.value = newVal
        })
        watch(() => props.editOrAdd, (newVal) => {
            numState.value = newVal
        })
        // 初始化组件
        function reload() {
            dialogVisible.value = props.addModal//模态框状态
            fatherToSon.value = props.tableData//表格数据，制作为下拉菜单
            needModel.value = props.modelIds//模型id
            needIedType.value = props.iedTypes//iedtype
            numState.value = props.editOrAdd//判断修改还是新增，0新增，1修改
            needEditRow.value = props.editRow//赋值给本组件需要修改对象
            flow.getByModelAndIed({//给下拉菜单赋值
                model_id: needModel.value - 0,
                ied_type: needIedType.value
            }).then(res => {
                if (res.data !== null && res.data.length > 0) {
                    options.value = res.data.map((item, index) => {
                        return {
                            label: item.func_name,
                            id: item.id,
                            value: item.func_name
                        }
                    })
                } else {
                    options.value = []
                }
            })
            if (numState.value == 1) {
                titles.value = '编辑装置功能'
                abilityFrom.value.setAbName = needEditRow.value.func_name
                abilityFrom.value.setMemo = needEditRow.value.fcda_match_exp
                abilityFrom.value.setSon = needEditRow.value.fcda_name
                abilityFrom.value.sg = needEditRow.value.svorgoose
                abilityFrom.value.io = needEditRow.value.inorout
            }
        }
        // 关闭模态框
        function closeModal() {
            dialogVisible.value = false
            emit("addAback", dialogVisible.value)
        }
        // 确认关闭模态框
        function sureClose() {
            if (numState.value == 0) {
                flow.saveModelAndIed({
                    model_id: needModel.value - 0,//模型id
                    ied_type: needIedType.value,//装置类型
                    func_id: newAddId?.value,
                    func_name: abilityFrom.value?.setAbName,
                    fcda_name: abilityFrom.value.setSon,
                    fcda_match_exp: abilityFrom.value.setMemo,
                    sv_or_goose: abilityFrom.value.sg,//sv还是goose
                    in_or_out: abilityFrom.value.io//输入还是输出
                }).then(res => {
                    if (res.code == 0) {
                        dialogVisible.value = false
                        emit("addAback", dialogVisible.value)
                        ElMessage({
                            type: "success",
                            message: "添加成功",
                            duration: 2000
                        })
                        props.copyReload()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            } else {
                flow.saveModelAndIed({
                    model_id: needModel.value - 0,
                    ied_type: needIedType.value,
                    func_name: abilityFrom.value.setAbName,
                    fcda_name: abilityFrom.value.setSon,
                    fcda_match_exp: abilityFrom.value.setMemo,
                    func_id: needEditRow.value.func_id - 0,
                    fcda_id: needEditRow.value.id - 0,
                    sv_or_goose: abilityFrom.value.sg,
                    in_or_out: abilityFrom.value.io
                }).then(res => {
                    if (res.code == 0) {
                        dialogVisible.value = false
                        emit("addAback", dialogVisible.value)
                        ElMessage({
                            type: "success",
                            message: "修改成功",
                            duration: 2000
                        })
                        props.copyReload()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
        // 设计功能名称change事件
        function abNameChange(e) {
            if (e.label) {
                abilityFrom.value.setAbName = e.label
                newAddId.value = e.id
            } else {
                abilityFrom.value.setAbName = e
                console.log(e, 'id');
            }

        }
        //选择sv还是goose的change事件
        function sgChange(e) {
            // 将选择的数据赋值给表单内sg
            abilityFrom.value.sg = e
        }
        //选择输入还是输出的change事件
        function ioChange(e) {
            // 将选择的数据赋值给表单内io
            abilityFrom.value.io = e
        }
        onMounted(() => {
            reload()
            // setTimeout(() => {
            //     reload()
            // }, 1500);
        })
        return {
            dialogVisible,//模态框开关
            reload,//初始化组件
            handleClose: closeModal,//关闭模态框
            cancels: closeModal,//关闭模态框
            sureClick: sureClose,// 确认关闭模态框
            abilityFrom,//表单项value
            options,//多选选项
            rules,//表单验证
            abNameChange,//设计功能名称change事件
            needModel,//需要的模型id
            needIedType,//需要的iedtype
            numState,//0为新增，1为修改
            needEditRow,//需要的整个对象属性
            newAddId,//新增的id
            titles,//模态框title
            sgChange,//选择sv还是goose的change事件
            ioChange,//选择输入还是输出的change事件,
            ruleFormRef,//表单的ref，用于触发验证
        }
    }
}
</script>

<style scoped>
p {
    margin: 0;
    padding: 0;
}
</style>