<template>
|
<el-dialog v-model="visible" :title="title" width="520px" @close="closeDia">
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="电表名称" prop="meterName">
|
<el-input v-model="form.meterName" placeholder="请输入电表名称" />
|
</el-form-item>
|
<el-form-item label="表地址" prop="address">
|
<el-input v-model="form.address" placeholder="请输入表地址" />
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="form.description" type="textarea" :rows="2" placeholder="备注" />
|
</el-form-item>
|
<el-form-item label="继电器状态" prop="relayState">
|
<el-select v-model="form.relayState" style="width: 100%">
|
<el-option label="合闸" value="1" />
|
<el-option label="拉闸" value="0" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="showRate" label="倍率">
|
<el-input-number v-model="form.rate" :min="1" style="width: 100%" />
|
</el-form-item>
|
<el-form-item v-if="operationType === 'edit' && form.source === 'sync'" label="档案ID">
|
<el-input :model-value="form.meterId" disabled />
|
</el-form-item>
|
<el-form-item v-if="operationType === 'edit' && form.source === 'sync'">
|
<el-text type="info" size="small">同步电表仅可修改名称、表地址、备注、继电器状态（不同步到能源平台）</el-text>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" :loading="submitting" @click="submit">确定</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, reactive, ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import { meterAdd, meterUpdate } from "@/api/energyManagement/tqdianbiao.js";
|
|
const emit = defineEmits(["close"]);
|
const visible = ref(false);
|
const submitting = ref(false);
|
const operationType = ref("add");
|
const title = ref("");
|
const formRef = ref(null);
|
|
const defaultForm = () => ({
|
id: null,
|
meterId: null,
|
meterName: "",
|
address: "",
|
description: "",
|
relayState: "1",
|
rate: 1,
|
source: "manual",
|
});
|
|
const form = reactive(defaultForm());
|
|
const showRate = computed(() => operationType.value === "edit" && form.source === "manual");
|
|
const rules = {
|
address: [{ required: true, message: "请输入表地址", trigger: "blur" }],
|
relayState: [{ required: true, message: "请选择继电器状态", trigger: "change" }],
|
};
|
|
function open(type, row) {
|
operationType.value = type;
|
title.value = type === "add" ? "新增电表" : "编辑电表";
|
Object.assign(form, defaultForm());
|
if (type === "edit" && row) {
|
Object.assign(form, {
|
id: row.id,
|
meterId: row.meterId,
|
meterName: row.meterName || row.address || "",
|
address: row.address || "",
|
description: row.description || "",
|
relayState: row.relayState || "1",
|
rate: row.rate || 1,
|
source: row.source || "sync",
|
});
|
}
|
visible.value = true;
|
}
|
|
function closeDia() {
|
emit("close");
|
}
|
|
async function submit() {
|
await formRef.value.validate();
|
submitting.value = true;
|
try {
|
const payload = { ...form };
|
if (!payload.meterName) {
|
payload.meterName = payload.address;
|
}
|
if (operationType.value === "add") {
|
await meterAdd(payload);
|
ElMessage.success("新增成功");
|
} else {
|
await meterUpdate(payload);
|
ElMessage.success("修改成功");
|
}
|
visible.value = false;
|
emit("close");
|
} finally {
|
submitting.value = false;
|
}
|
}
|
|
defineExpose({ open });
|
</script>
|
