admin-govern/src/views/govern/device/planData/components/popup.vue

<template>
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        draggable
        :style="{ width: popupType == 0 || popupType == 1 ? '500px' : '1100px' }"
    >
        <!-- 新增方案数据 -->
        <el-form
            :model="form"
            scroll-to-error
            label-width="140px"
            :rules="rules1"
            ref="ruleFormRef1"
            v-if="popupType == 0 || popupType == 1"
        >
            <el-form-item label="方案名称：" prop="itemName">
                <el-input v-model="form.itemName" placeholder="请输入方案名称" />
            </el-form-item>
            <el-form-item label="方案描述：" prop="describe">
                <el-input type="textarea" v-model="form.describe" placeholder="请输入方案描述" />
            </el-form-item>
        </el-form>
        <!-- 测试项信息&数据绑定页面 -->
        <el-tabs type="border-card" v-model="activeName" v-if="popupType != 0 && popupType != 1">
            <el-tab-pane label="测试项信息" :name="0">
                <el-form
                    :model="form1"
                    ref="ruleFormRef2"
                    scroll-to-error
                    class="form-two"
                    label-width="140px"
                    :rules="rules2"
                >
                    <el-form-item label="测试项名称：" prop="itemName">
                        <el-input v-model="form1.itemName" placeholder="请输入测试项名称" />
                    </el-form-item>
                    <el-form-item label="测量间隔：" prop="statisticalInterval">
                        <el-select
                            v-model="form1.statisticalInterval"
                            placeholder="请选择测量间隔"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="(item, index) in statisticalIntervalList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电压等级：" prop="voltageLevel">
                        <el-select
                            v-model="form1.voltageLevel"
                            placeholder="请选择电压等级"
                            clearable
                            style="width: 100%"
                            @change="changeVoltageLevel"
                        >
                            <el-option
                                v-for="(item, index) in voltageLevelList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="接线方式：" prop="volConType">
                        <el-select
                            v-model="form1.volConType"
                            placeholder="请选择接线方式"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="(item, index) in volConTypeList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最小短路容量：" prop="capacitySscmin">
                        <el-input
                            v-model="form1.capacitySscmin"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            autocomplete="off"
                            placeholder="请选择最小短路容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="用户协议容量：" prop="capacitySi">
                        <el-input
                            v-model="form1.capacitySi"
                            autocomplete="off"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            placeholder="请输入用户协议容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="基准短路容量：" prop="capacitySscb">
                        <el-input
                            v-model="form1.capacitySscb"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            placeholder="请输入基准短路容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="供电设备容量：" prop="capacitySt">
                        <el-input
                            v-model="form1.capacitySt"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            placeholder="请输入供电设备容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="PT变比：" prop="pt">
                        <el-input
                            style="width: 48%"
                            v-model="form1.pt"
                            autocomplete="off"
                            placeholder="请输入PT变比"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        />
                        <el-input
                            style="width: 48%"
                            v-model="form1.pt1"
                            autocomplete="off"
                            placeholder="请输入PT变比"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        />
                    </el-form-item>
                    <el-form-item label="CT变比：" prop="ct">
                        <el-input
                            v-model="form1.ct"
                            style="width: 48%"
                            autocomplete="off"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            placeholder="请输入CT变比"
                        />
                        <el-input
                            v-model="form1.ct1"
                            style="width: 48%"
                            autocomplete="off"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            placeholder="请输入CT变比"
                        />
                    </el-form-item>
                    <el-form-item label="监测位置：" prop="location" style="width: 100%">
                        <el-input type="textarea" v-model="form1.location" placeholder="请输入监测位置" />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="数据绑定" :name="2">
                <TreeTransfers :fromData="unBindList" :toData="bindList" @getData="getData" />
            </el-tab-pane>
        </el-tabs>
        <template #footer="">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, defineEmits, provide, nextTick, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Minus, Message, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { addPlan, addRecord, updateRecord, getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
import TreeTransfers from './treeTransfers.vue'
const dictData = useDictData()
const dialogVisible = ref(false)
const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
const volConTypeList = dictData.getBasicData('Dev_Connect')
const emit = defineEmits(['onSubmit'])
//表单数据
const form = ref({})
//测试项数据
const form1: any = ref({})
//折叠面板初始值
const activeTab = ref(0)
//tab初始值
const activeName = ref(0)
//测量间隔数据
const statisticalIntervalList = [
    {
        id: 1,
        name: '1分钟'
    },
    {
        id: 3,
        name: '3分钟'
    },
    {
        id: 5,
        name: '5分钟'
    },
    {
        id: 10,
        name: '10分钟'
    }
]
//初始化form
const initForm = () => {
    //方案数据
    form.value = {
        itemName: '', //方案名称
        describe: '' //方案描述
    }
    //测试项数据
    form1.value = {
        itemName: '', //测试项名称
        statisticalInterval: statisticalIntervalList[1].id, //测量间隔
        voltageLevel: voltageLevelList[0].id, //电压等级
        volConType: volConTypeList[0].id, //接线方式
        capacitySscmin: 10, //最小短路容量
        capacitySi: 10, //用户协议容量
        capacitySscb: 10, //基准短路容量
        capacitySt: 10, //供电设备容量
        pt: 1, //pt变比1
        pt1: 1, //pt变比2
        ct: 300, //ct变比1
        ct1: 5, //ct变比2
        location: '' //监测位置
    }
    changeVoltageLevel()
}
const codeValue = (val: any) => {
    return (
        voltageLevelList.find((item: any) => {
            return item.code == val
        })?.value * 1
    )
}
//改变电压等级计算基准短路容量
const changeVoltageLevel = async () => {
    let value: any =
        voltageLevelList.find((item: any) => {
            return item.id == form1.value.voltageLevel
        })?.value * 1
    if (value < codeValue('6kV')) {
        form1.value.capacitySscb = 10
    } else if (value < codeValue('20kV')) {
        form1.value.capacitySscb = 100
    } else if (value < codeValue('35kV')) {
        form1.value.capacitySscb = 200
    } else if (value < codeValue('66kV')) {
        form1.value.capacitySscb = 250
    } else if (value < codeValue('110kV')) {
        form1.value.capacitySscb = 500
    } else if (value < codeValue('220kV')) {
        form1.value.capacitySscb = 750
    } else if (value < codeValue('330kV')) {
        form1.value.capacitySscb = 2000
    } else if (value < codeValue('500kV')) {
        form1.value.capacitySscb = 3000
    } else if (value < codeValue('750kV')) {
        form1.value.capacitySscb = 4500
    } else if (value < codeValue('1000kV')) {
        form1.value.capacitySscb = 7000
    } else {
        form1.value.capacitySscb = 9000
    }
}

initForm()
//方案校验规则
const rules1 = ref({
    //方案名称
    itemName: [
        {
            required: true,
            message: '请输入方案名称',
            trigger: 'blur'
        }
    ],
    //方案名称
    describe: [
        {
            required: true,
            message: '请输入方案描述',
            trigger: 'blur'
        }
    ]
})
//测试项校验规则
const rules2 = ref({
    //测试项名称
    itemName: [
        {
            required: true,
            message: '请输入测试项名称',
            trigger: 'blur'
        }
    ],
    describe: [
        {
            required: true,
            message: '请选择测量间隔',
            trigger: 'change'
        }
    ],
    voltageLevel: [
        {
            required: true,
            message: '请选择电压等级',
            trigger: 'change'
        }
    ],
    volConType: [
        {
            required: true,
            message: '请选择接线方式',
            trigger: 'change'
        }
    ],
    capacitySscmin: [
        {
            required: true,
            message: '请输入最小短路容量',
            trigger: 'blur'
        }
    ],
    capacitySi: [
        {
            required: true,
            message: '请输入用户协议容量',
            trigger: 'blur'
        }
    ],
    capacitySscb: [
        {
            required: true,
            message: '请输入基准短路容量',
            trigger: 'blur'
        }
    ],
    capacitySt: [
        {
            required: true,
            message: '请输入供电设备容量',
            trigger: 'blur'
        }
    ],
    pt: [
        {
            required: true,
            message: '请输入PT变比',
            trigger: 'blur'
        }
    ],
    ct: [
        {
            required: true,
            message: '请输入CT变比',
            trigger: 'blur'
        }
    ],
    location: [
        {
            required: true,
            message: '请输入监测位置',
            trigger: 'blur'
        }
    ]
})
//弹框标题
const title: any = ref('')
//判断页面显示条件
const popupType: any = ref(null)
//方案/测试项id
const planId: any = ref('')
//回显方案、测试项操作
const details = (val: any) => {
    console.log(val, '回显方案测试项操作66666')
    if (val.records && val.records.length != 0) {
        form.value = {
            describe: val.describe,
            itemName: val.itemName
        }
    } else {
        form1.value = val
    }

    return
    //修改方案回显
    if (popupType.value == 1) {
        form.value = JSON.parse(JSON.stringify(val))
    }
    //修改测试项回显
    if (popupType.value == 3) {
        if (val.records[0] && val.records.length != 0) {
            form1.value = JSON.parse(JSON.stringify(val.records[0]))
        } else {
            initForm()
        }
    }
    if (popupType.value != 1 && popupType.value != 3) {
        initForm()
    }
}
//未绑定数据tree
const unBindList = ref([])
//已绑定数据tree
const bindList = ref([])
//0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 设备信息
const open = async (val: any, id: any) => {
    popupType.value = val
    title.value = val == 0 ? '新增方案' : val == 1 ? '修改方案' : val == 2 ? '新增测试项' : '修改测试项'
    dialogVisible.value = true
    planId.value = id
    console.log(11111, val, '==============>>>>>>>>')
    //新增方案或者测试项数据
    if (val == 0 || val == 2) {
        initForm()
    }
    if (val != 0 && val != 1) {
        //1 列表  0树
        // getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {})
        dialogVisible.value = true
        selectId.value = id
        //0未绑定数据 1 已绑定数据
        //获取未绑定树形数据
        getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
            unBindList.value = res.data
        })
        //获取已绑定树形数据
        getDeviceList({ id: id, isTrueFlag: 1 }).then(res => {
            bindList.value = res.data
        })
        activeName.value = 0
    }
}
//获取选择的绑定的数据
const checkedIdList: any = ref([])
const getData = (rightData: any) => {
    checkedIdList.value = []
    if (rightData && rightData.length != 0) {
        rightData.map((item: any) => {
            item.children.map((vv: any) => {
                vv.children.map((kk: any) => {
                    checkedIdList.value.push(kk.id)
                })
            })
        })
    }
    checkedIdList.value = [...new Set(checkedIdList.value)]
}

//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
const addFlag = ref(false)
const selectId: any = ref('')
//判断是否选择了设备数据
const checkedList: any = ref([])
//关闭
const ruleFormRef1 = ref()
const ruleFormRef2 = ref()
const close = () => {
    dialogVisible.value = false
    //折叠面板
    activeTab.value = 0
    if (addFlag.value) {
        addFlag.value = false
        checkedList.value = []
    } else {
        dialogVisible.value = false
    }

    //取消表单校验状态
    if (popupType.value == 0 || popupType.value == 1) {
        ruleFormRef1.value && ruleFormRef1.value.resetFields()
    } else {
        ruleFormRef2.value && ruleFormRef2.value?.resetFields()
    }
    //tabs
    activeName.value = 0
    unBindList.value = []
    bindList.value = []
    initForm()
}
//提交
const submit = () => {
    //新增方案
    if (popupType.value == 0) {
        ruleFormRef1.value.validate((valid: any) => {
            if (valid) {
                const subForm = {
                    itemName: form.value.itemName,
                    describe: form.value.describe
                }
                addPlan(subForm).then((res: any) => {
                    if (res.code == 'A0000') {
                        ElMessage.success('新增方案成功')
                        initForm()
                        emit('onSubmit')
                        close()
                    }
                })
            } else {
                console.log('表单验证失败')
                return false
            }
        })
    }
    //修改方案
    if (popupType.value == 1) {
        ruleFormRef1.value.validate((valid: boolean) => {
            if (valid) {
                const subForm = {
                    id: planId.value,
                    itemName: form.value.itemName,
                    describe: form.value.describe
                }
                addPlan(subForm).then(res => {
                    ElMessage.success('修改方案成功')
                    emit('onSubmit')
                    close()
                })
            }
        })
    }
    //新增测试项
    if (popupType.value == 2) {
        ruleFormRef2.value.validate((valid: boolean) => {
            if (valid) {
                let subForm = {
                    id: planId.value,
                    records: [form1.value]
                }
                // subForm.list = tableData.value.map(item => {
                //     return item.id
                // })
                subForm.records[0].list = checkedIdList.value
                addRecord(subForm).then(res => {
                    ElMessage.success('新增测试项成功')
                    initForm()
                    emit('onSubmit')
                    close()
                })
            }
        })
    }
    //修改测试项
    if (popupType.value == 3) {
        ruleFormRef2.value.validate((valid: any) => {
            if (valid) {
                let subForm = JSON.parse(JSON.stringify(form1.value))
                subForm.list = checkedIdList.value
                updateRecord(subForm).then((res: any) => {
                    if (res.code == 'A0000') {
                        ElMessage.success('修改测试项成功')
                        initForm()
                        emit('onSubmit')
                        close()
                    }
                })
            } else {
                console.log('校验不通过')
            }
        })
    }
}
defineExpose({ open, details })
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
    display: flex !important;
    justify-content: space-between !important;
}
::v-deep .form-two {
    .el-select {
        width: 100% !important;
    }
}
.button_info {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
}

.device_info {
    width: 100%;
    display: flex;
    // justify-content: space-between;

    .left_device,
    .right_device {
        width: 410px;
        border: 1px solid #eee;
        padding-right: 10px;
        p {
            margin: 10px 10px 0 10px;
            font-weight: 800;
            font-size: 14px;
        }
    }

    .center_bind {
        flex: 1;
        display: flex;
        padding: 0 30px;
        align-items: center;
        justify-content: center;
    }
}
</style>