<script setup>
|
import { ref, reactive, computed, onMounted } from "vue";
|
import { addDev, updateDev, getUsrBaoji } from "./api.js";
|
import useElement from "@/hooks/useElement.js";
|
import ipInput from "@/components/ipInput.vue";
|
|
const { $loading, $message, $confirm } = useElement();
|
const props = defineProps({
|
info: {
|
type: Object,
|
},
|
});
|
const form1 = reactive({
|
devIdcode: "",
|
devModel: "",
|
devType: 1,
|
longitude: 0,
|
latitude: 0,
|
devIp: "",
|
baojiIdList: [],
|
});
|
|
const userBaoJiList = reactive([]);
|
|
const isEdit = computed(() => !!props.info);
|
const $emit = defineEmits(["cancel", "success"]);
|
const form = ref();
|
const rules = reactive({
|
devIdcode: [
|
{
|
required: true,
|
trigger: "blur",
|
message: "设备编号不能为空",
|
},
|
],
|
baojiIdList: [
|
{
|
required: true,
|
trigger: ["blur", "change"],
|
message: "请选择设备要加入的包机组",
|
},
|
],
|
devIp: [
|
{
|
required: true,
|
message: "ip不能为空",
|
trigger: "blur",
|
},
|
{
|
validator: (rule, value, callBack) => {
|
let val = value.split(".");
|
if (value == "...") {
|
callBack(new Error("ip不能为空"));
|
} else if (val.some((v) => v == "")) {
|
callBack(new Error("请输入完整的ip"));
|
} else {
|
callBack();
|
}
|
},
|
trigger: "blur",
|
},
|
],
|
});
|
|
function close() {
|
$emit("cancel");
|
}
|
function update() {
|
form.value.validate((valid) => {
|
if (valid) {
|
let loading = $loading();
|
let pre = 1 == form1.devType ? "F" : "L";
|
updateDev({ ...form1, devIdcode: pre + form1.devIdcode })
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
$emit("success");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
} else {
|
$message.error("存在未通过的验证");
|
return false;
|
}
|
});
|
}
|
function onSubmit() {
|
form.value.validate((valid) => {
|
if (valid) {
|
let loading = $loading();
|
let pre = 1 == form1.devType ? "F" : "L";
|
addDev({ ...form1, devIdcode: pre + form1.devIdcode })
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
$emit("success");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
} else {
|
$message.error("存在未通过的验证");
|
return false;
|
}
|
});
|
}
|
|
function change(value) {
|
// console.log(value, 'ip change', value.split('.'));
|
let segments = value.split(".");
|
if (!segments.some((v) => v == "")) {
|
console.log(value, "ip");
|
form.value.validateField("devIp");
|
}
|
}
|
function blur(value) {
|
console.log(value, "blur");
|
form.value
|
.validateField("devIp")
|
.then(() => {})
|
.catch((error) => {});
|
}
|
|
function getBaoJiList(params) {
|
getUsrBaoji()
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let _list = [];
|
if (code && data) {
|
_list = data2;
|
}
|
userBaoJiList.length = 0;
|
userBaoJiList.push(..._list);
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
onMounted(() => {
|
let info = props.info;
|
if (info) {
|
// devIdcode: "",
|
// devModel: "",
|
// devType: 1,
|
// devIp: "",
|
// baojiIdList: [],
|
form1.devId = info.devId;
|
form1.devType = info.devType;
|
form1.devModel = info.devModel;
|
form1.devIdcode = info.devIdcode.slice(1);
|
form1.devIp = info.devIp;
|
form1.baojiIdList = info.baojiIdList;
|
form1.longitude = info.longitude;
|
form1.latitude = info.latitude;
|
}
|
getBaoJiList();
|
console.log("info", props.info, "=============");
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="form" :model="form1" :rules="rules" label-width="8em">
|
<el-form-item label="设备类型" prop="devType">
|
<el-select
|
v-model="form1.devType"
|
:disabled="isEdit"
|
class=""
|
placeholder="Select"
|
>
|
<el-option label="充放电一体机" :value="1" />
|
<el-option label="锂电均衡仪" :value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="设备型号" prop="devModel">
|
<el-input :disabled="isEdit" v-model="form1.devModel"></el-input>
|
</el-form-item>
|
<el-form-item label="设备编号" prop="devIdcode">
|
<el-input v-model="form1.devIdcode">
|
<template #prepend>{{ 1 == form1.devType ? "F" : "L" }}</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="设备端IP地址" prop="devIp">
|
<ip-input
|
v-model="form1.devIp"
|
@change="change"
|
@blur="blur"
|
></ip-input>
|
<!-- :onChange="change"
|
:onBlur="blur" -->
|
<!-- <el-input :disabled="isEdit" v-model="form1.name"></el-input> -->
|
</el-form-item>
|
<!-- TODO -->
|
<el-form-item label="经度" prop="longitude">
|
<el-input v-model="form1.longitude">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="纬度" prop="latitude">
|
<el-input v-model="form1.latitude">
|
</el-input>
|
</el-form-item>
|
<el-form-item v-if="!isEdit" label="包机组" prop="baojiIdList">
|
<el-select
|
v-model="form1.baojiIdList"
|
class=""
|
multiple
|
clearable
|
filterable
|
placeholder="请选择要加入的包机组"
|
>
|
<el-option
|
v-for="item in userBaoJiList"
|
:key="item.baojiGroupId"
|
:label="item.baojiGroupName"
|
:value="item.baojiGroupId"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="isEdit" type="primary" @click="update">修改</el-button>
|
<el-button v-else type="primary" @click="onSubmit">新增</el-button>
|
<el-button @click="close">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped lang="less"></style>
|
