286 lines
7.1 KiB
Vue
286 lines
7.1 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
:title="title"
|
|
width="900px"
|
|
draggable
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
append-to-body
|
|
destroy-on-close
|
|
@close="handleClose"
|
|
>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
:rules="rules"
|
|
label-width="120px"
|
|
size="default"
|
|
v-loading="loading"
|
|
>
|
|
<!-- 基本信息 -->
|
|
<div class="form-section">
|
|
<div class="section-title">基本信息</div>
|
|
<el-row :gutter="25">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
<el-form-item label="设备编号" prop="deviceNo">
|
|
<el-input v-model="formData.deviceNo" clearable placeholder="请输入设备编号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
<el-form-item label="资产编号" prop="assetNo">
|
|
<el-input v-model="formData.assetNo" clearable placeholder="请输入资产编号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 网络配置 -->
|
|
<div class="form-section">
|
|
<div class="section-title">网络配置</div>
|
|
<el-row :gutter="25">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
<el-form-item label="IP地址" prop="ip">
|
|
<el-input v-model="formData.ip" clearable placeholder="请输入IP地址" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
<el-form-item label="端口号" prop="port">
|
|
<el-input v-model="formData.port" clearable placeholder="请输入端口号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
<el-form-item label="服务名称" prop="serviceName">
|
|
<el-input v-model="formData.serviceName" clearable placeholder="请输入服务名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 设备配置 -->
|
|
<div class="form-section">
|
|
<div class="section-title">设备配置</div>
|
|
<el-row :gutter="25">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
<el-form-item label="状态" prop="enabled">
|
|
<el-switch
|
|
v-model="formData.enabled"
|
|
active-text="启用"
|
|
inactive-text="禁用"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="dialogVisible = false" size="default">取 消</el-button>
|
|
<el-button type="primary" @click="handleSubmit" size="default" :loading="loading">确 定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, watch } from 'vue'
|
|
import type { FormInstance } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
import { UspRelayApi } from '/@/api/admin/UspRelayApi'
|
|
import type { RelayGetOutput, RelayAddInput, RelayUpdateInput } from '/@/api/admin/data-contracts'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
title: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void
|
|
(e: 'refresh'): void
|
|
}>()
|
|
|
|
// 表单引用
|
|
const formRef = ref<FormInstance>()
|
|
|
|
// 表单数据
|
|
const formData = reactive<RelayGetOutput>({
|
|
deviceNo: '',
|
|
assetNo: '',
|
|
ip: '',
|
|
port: '',
|
|
serviceName: '',
|
|
enabled: true
|
|
})
|
|
|
|
// 表单校验规则
|
|
const rules = {
|
|
deviceNo: [
|
|
{ required: true, message: '请输入设备编号', trigger: ['blur', 'change'] },
|
|
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
|
|
],
|
|
assetNo: [
|
|
{ required: true, message: '请输入资产编号', trigger: ['blur', 'change'] },
|
|
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
|
|
],
|
|
ip: [
|
|
{ required: true, message: '请输入IP地址', trigger: ['blur', 'change'] },
|
|
{ pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: 'IP地址格式不正确', trigger: ['blur', 'change'] }
|
|
],
|
|
port: [
|
|
{ required: true, message: '请输入端口号', trigger: ['blur', 'change'] },
|
|
{ pattern: /^\d+$/, message: '端口号必须为数字', trigger: ['blur', 'change'] }
|
|
],
|
|
serviceName: [
|
|
{ required: true, message: '请输入服务名称', trigger: ['blur', 'change'] },
|
|
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: ['blur', 'change'] }
|
|
]
|
|
}
|
|
|
|
// 加载状态
|
|
const loading = ref(false)
|
|
|
|
// 对话框可见性
|
|
const dialogVisible = ref(false)
|
|
|
|
// 监听 modelValue 变化
|
|
watch(
|
|
() => props.modelValue,
|
|
(val) => {
|
|
dialogVisible.value = val
|
|
}
|
|
)
|
|
|
|
// 监听对话框可见性变化
|
|
watch(
|
|
() => dialogVisible.value,
|
|
(val) => {
|
|
emit('update:modelValue', val)
|
|
if (!val) {
|
|
resetForm()
|
|
}
|
|
}
|
|
)
|
|
|
|
// 重置表单
|
|
const resetForm = () => {
|
|
formRef.value?.resetFields()
|
|
Object.assign(formData, {
|
|
deviceNo: '',
|
|
assetNo: '',
|
|
ip: '',
|
|
port: '',
|
|
serviceName: '',
|
|
enabled: true
|
|
})
|
|
}
|
|
|
|
// 设置表单数据
|
|
const setFormData = (data: RelayGetOutput) => {
|
|
Object.assign(formData, data)
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return
|
|
await formRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
loading.value = true
|
|
try {
|
|
const api = new UspRelayApi()
|
|
let res
|
|
if (formData.id) {
|
|
// 更新
|
|
const updateData: RelayUpdateInput = {
|
|
id: formData.id,
|
|
...formData
|
|
}
|
|
res = await api.update(updateData)
|
|
} else {
|
|
// 新增
|
|
const addData: RelayAddInput = {
|
|
...formData
|
|
}
|
|
res = await api.add(addData)
|
|
}
|
|
if (res.success) {
|
|
ElMessage.success(formData.id ? '更新成功' : '新增成功')
|
|
dialogVisible.value = false
|
|
emit('refresh')
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 关闭对话框
|
|
const handleClose = () => {
|
|
resetForm()
|
|
}
|
|
|
|
// 打开对话框
|
|
const open = async (row: any = {}) => {
|
|
if (row.id > 0) {
|
|
const res = await new UspRelayApi().get({ id: row.id })
|
|
if (res?.success) {
|
|
Object.assign(formData, res.data)
|
|
}
|
|
} else {
|
|
resetForm()
|
|
}
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
// 暴露方法
|
|
defineExpose({
|
|
open,
|
|
setFormData
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.form-section {
|
|
margin-bottom: 24px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid #f0f0f0;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -2px;
|
|
width: 40px;
|
|
height: 2px;
|
|
background: #409eff;
|
|
}
|
|
}
|
|
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 18px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
:deep(.el-switch__label) {
|
|
font-size: 13px;
|
|
}
|
|
</style>
|