admin-sjzx/src/views/pqs/supervise/interfere/components/undocumented/add.vue

<template>
    <!-- 新增 -->
    <el-dialog draggable title="未建档干扰用户新增" v-model="userAdd" width="500px" :before-close="cancel">
        <el-divider content-position="left" style="font-weight: bolder; font-size: 18px">基本信息</el-divider>
        <el-form :inline="true" ref="formRef" :model="addData" label-width="auto" class="form-one" :rules="rules">
            <el-form-item label="区域:">
                <Area ref="areaRef" v-model="addData.orgNo" />
            </el-form-item>
            <el-form-item label="干扰源类型:" prop="loadType">
                <el-select v-model="addData.loadType" clearable collapse-tags placeholder="请选择">
                    <el-option
                        v-for="item in interferenceType"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="干扰源用户名称:" prop="userName">
                <el-input v-model="addData.userName" clearable placeholder="请输入关键字"></el-input>
            </el-form-item>

            <el-form-item label="建档时间:" prop="recordTime">
                <el-date-picker
                    value-format="YYYY-MM-DD hh:mm:ss"
                    v-model="addData.recordTime"
                    type="datetime"
                    placeholder="选择日期时间"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: center; margin-top: 30px">
            <el-button type="primary" class="ml20" @click="config">确定</el-button>
            <el-button type="primary" class="ml20" @click="cancel">取消</el-button>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import Area from '@/components/form/area/index.vue'
import { addLoadTypeUser } from '@/api/process-boot/interference'
const dictData = useDictData()
const userAdd = ref(false)
const interferenceType = dictData.getBasicData('Interference_Source')
const emit = defineEmits(['onSubmit'])
const rules = reactive({
    loadType: [{ required: true, message: '请选择干扰源类型', trigger: 'change' }],
    userName: [{ required: true, message: '请输入干扰源用户名称', trigger: 'blur' }],
    recordTime: [{ required: true, message: '请选择建档时间', trigger: 'change' }]
})
const addData = ref({
    orgNo: dictData.state.area[0].id,
    loadType: '',
    userName: '',
    recordTime: ''
})
const formRef = ref()
// 新增
const config = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            addLoadTypeUser(addData.value).then((res: any) => {
                ElMessage.success('新增成功!')
                emit('onSubmit')
                cancel()
            })
        }
    })
}
// 重置
const cancel = () => {
    formRef.value.resetFields()
    userAdd.value = false
}
const open = () => {
    userAdd.value = true
}

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