admin-sjzx/src/views/LN/newEnergy/newEnergyLedger/components/addForm.vue

<template>
    <!-- 新增 -->
    <el-dialog draggable :title="title" v-model="userAdd" width="500px" :before-close="cancel">
        <el-form :inline="true" ref="formRef" :model="addData" label-width="auto" class="form-one" :rules="rules">
            <el-form-item label="新能源场站名称:" prop="name">
                <el-input v-model="addData.name" clearable placeholder="请输入新能源场站名称"></el-input>
            </el-form-item>

            <el-form-item label="干扰源类型:" prop="stationType">
                <el-select v-model="addData.stationType" clearable collapse-tags placeholder="请选择干扰源类型" filterable>
                    <el-option v-for="item in newEnergy" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="电压等级:" prop="scale">
                <el-select v-model="addData.scale" clearable collapse-tags placeholder="请选择电压等级" filterable>
                    <el-option v-for="item in scaleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="额定有功功率(kW):" prop="ratedPower">
                <el-input-number v-model="addData.ratedPower" :min="0" style="width: 100%" />
            </el-form-item>
            <el-form-item label="经度：" prop="longitude">
                <el-input v-model="addData.longitude" type="text" placeholder="请输入经度" />
            </el-form-item>
            <el-form-item label="纬度：" prop="latitude">
                <el-input v-model="addData.latitude" type="text" placeholder="请输入纬度" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="config">确定</el-button>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { editNewStation } from '@/api/device-boot/newEnergy'
const dictData = useDictData()
const userAdd = ref(false)
const title = ref('')
const newEnergy = dictData.getBasicData('new_station_type')
const scaleList = dictData.getBasicData('Dev_Voltage_Stand')
const emit = defineEmits(['onSubmit'])
const rules = reactive({
    stationType: [{ required: true, message: '请选择干扰源类型', trigger: 'change' }],
    scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
    name: [{ required: true, message: '请输入干扰源用户名称', trigger: 'blur' }],
    ratedPower: [{ required: true, message: '请输入额定功率', trigger: 'blur' }],
    longitude: [
        {
            required: true,
            message: '请输入经度',
            trigger: 'blur'
        },
        {
            validator: (rule, value, callback) => {
                if (!longitudeReg.test(value)) {
                    callback(new Error('请输入有效的经度'))
                } else {
                    callback()
                }
            },
            trigger: 'change'
        }
    ],
    latitude: [
        {
            required: true,
            message: '请输入纬度',
            trigger: 'blur'
        },
        {
            validator: (rule, value, callback) => {
                if (!latitudeReg.test(value)) {
                    callback(new Error('请输入有效的纬度'))
                } else {
                    callback()
                }
            },
            trigger: 'change'
        }
    ]
})
// 经度正则表达式
const longitudeReg = /^[-+]?((180(\.0{1,10})?)|(1[0-7][0-9](\.\d{1,10})?)|([1-9]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/
// 纬度正则表达式
const latitudeReg = /^[-+]?((90(\.0{1,10})?)|([1-8]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/

const addData = ref({
    scale: '',
    stationType: '',
    name: '',
    ratedPower: 0,
    longitude: '',
    latitude: ''
})
const formRef = ref()
// 新增
const config = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            editNewStation(addData.value).then((res: any) => {
                ElMessage.success(title.value + '成功!')
                emit('onSubmit')
                cancel()
            })
        }
    })
}
// 重置
const cancel = () => {
    // formRef.value.resetFields()
    userAdd.value = false
}
const open = (row: any) => {
    addData.value = {
        scale: '',
        stationType: '',
        name: '',
        ratedPower: 0,
        longitude: '',
        latitude: ''
    }
    title.value = row.title
    if (row.title === '修改') {
        addData.value = {
            id: row.row.id,
            scale: row.row.scale,
            stationType: row.row.stationType,
            name: row.row.name,
            ratedPower: row.row.ratedPower - 0,
            longitude: row.row.longitude,
            latitude: row.row.latitude
        }
    }
    userAdd.value = true
    setTimeout(() => {
        formRef.value.clearValidate()
    }, 20)
}

defineExpose({ open })
</script>
<style lang="scss" scoped></style>