457 lines
13 KiB
Vue
457 lines
13 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
:title="formData.id ? '编辑' : '新增'"
|
|
width="60%"
|
|
:before-close="closeDialog"
|
|
>
|
|
<el-form
|
|
size="large"
|
|
:model="formData"
|
|
label-width="150px"
|
|
:rules="rules"
|
|
ref="ruleFormRef"
|
|
label-position="top"
|
|
>
|
|
<el-form-item label="透传名称:" prop="name">
|
|
<el-input
|
|
v-model="formData.name"
|
|
placeholder="请输入透传名称"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="透传类型:" prop="type">
|
|
<el-select v-model="formData.type" placeholder="请选择驱动">
|
|
<el-option
|
|
v-for="(item, index) of typeOptions"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="本地串口:">
|
|
<div class="inline-div">
|
|
<el-form-item label="名称:" prop="name" label-width="60px">
|
|
<el-select v-model="formData.serial.name" placeholder="请选择名称" @change="changeName">
|
|
<el-option
|
|
v-for="(item, index) of portOptions"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="item.name"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="波频率:" prop="baudrate" label-width="60px">
|
|
<el-select
|
|
v-model="formData.serial.baudrate"
|
|
placeholder="请选择波频率"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) of waveOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="数据位:" prop="databits" label-width="60px">
|
|
<el-select v-model="formData.serial.databits" placeholder="请选择波频率">
|
|
<el-option
|
|
v-for="(item, index) of bitsOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="停止位:" prop="stopbits" label-width="60px">
|
|
<el-select v-model="formData.serial.stopbits" placeholder="请选择波频率">
|
|
<el-option
|
|
v-for="(item, index) of stopOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="校验位:" prop="parity" label-width="60px">
|
|
<el-select v-model="formData.serial.parity" placeholder="请选择波频率">
|
|
<el-option
|
|
v-for="(item, index) of validOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="读取超时:" prop="time" label-width="80px">
|
|
<el-input
|
|
v-model="formData.time"
|
|
placeholder="请输入透传名称"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="透传接口:" class="trans-div">
|
|
<el-button
|
|
type="primary"
|
|
icon="Plus"
|
|
class="add-btn"
|
|
v-if="formData.type == 'modbus分身'"
|
|
@click="addTransData"
|
|
>
|
|
添加网口
|
|
</el-button>
|
|
<el-button
|
|
type="danger"
|
|
icon="SemiSelect"
|
|
class="del-btn"
|
|
v-if="formData.type == 'modbus分身'"
|
|
@click="delTransData"
|
|
>
|
|
删除网口
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
icon="Plus"
|
|
class="add-btn1"
|
|
v-if="formData.type == 'modbus分身'"
|
|
@click="addTransData1"
|
|
>
|
|
添加串口
|
|
</el-button>
|
|
<el-button
|
|
type="danger"
|
|
icon="SemiSelect"
|
|
class="del-btn1"
|
|
v-if="formData.type == 'modbus分身'"
|
|
@click="delTransData1"
|
|
>
|
|
删除串口
|
|
</el-button>
|
|
<div
|
|
class="inline-div"
|
|
v-for="(item, index) of formData.tcp"
|
|
:key="index"
|
|
>
|
|
<el-form-item
|
|
label="名称:"
|
|
:prop="'tcp[' + index + '].name'"
|
|
label-width="60px"
|
|
>
|
|
<el-select
|
|
v-model="formData.tcp[index].name"
|
|
placeholder="请选择名称"
|
|
@change="changeTransName(index)"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) of transOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="主机地址:"
|
|
:prop="'tcp[' + index + '].host'"
|
|
label-width="80px"
|
|
>
|
|
<el-input
|
|
v-model="formData.tcp[index].host"
|
|
placeholder="请输入透传名称"
|
|
clearable
|
|
:disabled="formData.tcp[index].disabled"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="端口号:"
|
|
:prop="'tcp[' + index + '].port'"
|
|
label-width="80px"
|
|
>
|
|
<el-input
|
|
v-model="formData.tcp[index].port"
|
|
placeholder="请输入端口号"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div
|
|
v-if="formData.type == 'modbus分身'"
|
|
class="inline-div transData1"
|
|
v-for="(item, index) of formData.transData1"
|
|
:key="index"
|
|
>
|
|
<el-form-item
|
|
label="名称:"
|
|
:prop="'transData1[' + index + '].localPort'"
|
|
label-width="60px"
|
|
>
|
|
<el-select
|
|
v-model="formData.transData1[index].localPort"
|
|
placeholder="请选择名称"
|
|
@change="changeTransName(index)"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) of portOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="波特率:"
|
|
:prop="'transData1[' + index + '].waveFrequency'"
|
|
label-width="80px"
|
|
>
|
|
<el-select
|
|
v-model="formData.transData1[index].waveFrequency"
|
|
placeholder="请选择波频率"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) of waveOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="数据位:"
|
|
:prop="'transData1[' + index + '].dataBits'"
|
|
label-width="80px"
|
|
>
|
|
<el-select
|
|
v-model="formData.transData1[index].dataBits"
|
|
placeholder="请选择波频率"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) of bitsOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="停止位:"
|
|
:prop="'transData1[' + index + '].stopBits'"
|
|
label-width="60px"
|
|
>
|
|
<el-select
|
|
v-model="formData.transData1[index].stopBits"
|
|
placeholder="请选择波频率"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) of stopOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="校验位:"
|
|
:prop="'transData1[' + index + '].validBits'"
|
|
label-width="60px"
|
|
>
|
|
<el-select
|
|
v-model="formData.transData1[index].validBits"
|
|
placeholder="请选择波频率"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) of validOptions"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="读取超时:"
|
|
:prop="'transData1[' + index + '].time'"
|
|
label-width="80px"
|
|
>
|
|
<el-input
|
|
v-model="formData.transData1[index].time"
|
|
placeholder="请输入透传名称"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="closeDialog">取消</el-button>
|
|
<el-button type="primary" @click="saveData"> 保存 </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { onMounted, reactive, ref, toRefs, computed } from "vue";
|
|
import infoApi from "@/api/infoApi.js";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
export default {
|
|
props: ["formData", "dialogVisible"],
|
|
emits: ["dialogClose", "dialogSuccess"],
|
|
setup(props, ctx) {
|
|
const ruleFormRef = ref(null);
|
|
const state = reactive({
|
|
rules: {
|
|
name: [{ required: true, message: "请输入通讯名称", trigger: "blur" }],
|
|
},
|
|
typeOptions: [],
|
|
portOptions: [],
|
|
waveOptions: ["2400", "9600", "19200", "38400", "115200", "自定义"],
|
|
bitsOptions: ["5", "6", "7", "8"],
|
|
stopOptions: ["1", "2", "1.5"],
|
|
validOptions: ["无", "奇校验", "偶校验", "Mark", "Space"],
|
|
transOptions: ["TCP服务器", "TCP客户端"],
|
|
});
|
|
const visible = computed(() => {
|
|
return props.dialogVisible;
|
|
});
|
|
onMounted(() => {
|
|
getSupport();
|
|
getFree();
|
|
});
|
|
|
|
const getSupport = async () => {
|
|
const res = await infoApi.getSupport();
|
|
state.typeOptions = res.data;
|
|
}
|
|
|
|
const getFree = async () => {
|
|
const res = await infoApi.getFree();
|
|
state.portOptions = res.data;
|
|
}
|
|
|
|
const changeName = () => {
|
|
let item = state.portOptions.find(ele => {
|
|
return ele.name === props.formData.serial.name;
|
|
})
|
|
props.formData.serial.baudrate = item.baudrate;
|
|
props.formData.serial.databits = item.databits;
|
|
props.formData.serial.stopbits = item.stopbits;
|
|
props.formData.serial.parity = item.parity;
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
ruleFormRef.value.resetFields();
|
|
ctx.emit("dialogClose");
|
|
};
|
|
|
|
const changeTransName = (index) => {
|
|
props.formData.tcp[index].disabled =
|
|
props.formData.tcp[index].name == "TCP服务器";
|
|
};
|
|
|
|
const addTransData = () => {
|
|
let item = {
|
|
transName: "TCP服务端",
|
|
transAdress: "localhost",
|
|
transPort: "",
|
|
disabled: true,
|
|
};
|
|
props.formData.tcp.push(item);
|
|
};
|
|
|
|
const delTransData = () => {
|
|
if (props.formData.tcp.length == 1) {
|
|
ElMessage.warning("至少为一个");
|
|
return;
|
|
}
|
|
props.formData.tcp.pop();
|
|
};
|
|
|
|
const addTransData1 = () => {
|
|
let item = {
|
|
localPort: "COM1",
|
|
waveFrequency: "9600",
|
|
dataBits: "8",
|
|
stopBits: "1",
|
|
validBits: "无",
|
|
time: "",
|
|
};
|
|
props.formData.transData1.push(item);
|
|
};
|
|
|
|
const delTransData1 = () => {
|
|
if (props.formData.transData1.length == 1) {
|
|
ElMessage.warning("至少为一个");
|
|
return;
|
|
}
|
|
props.formData.transData1.pop();
|
|
};
|
|
const saveData = async () => {
|
|
await ruleFormRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
const res = await infoApi.saveTc(props.formData);
|
|
if(res.code == 0) {
|
|
ElMessage.success(res.data || res.message || '请求成功');
|
|
ctx.emit("dialogSuccess");
|
|
} else {
|
|
ElMessage.error(res.data || res.message || "请求失败");
|
|
}
|
|
} else {
|
|
}
|
|
});
|
|
};
|
|
return {
|
|
...toRefs(state),
|
|
ruleFormRef,
|
|
visible,
|
|
saveData,
|
|
closeDialog,
|
|
changeTransName,
|
|
addTransData,
|
|
delTransData,
|
|
addTransData1,
|
|
delTransData1,
|
|
changeName
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.inline-div {
|
|
display: flex;
|
|
width:100%;
|
|
.el-form-item {
|
|
margin-right: 10px;
|
|
width: 175px;
|
|
}
|
|
}
|
|
.trans-div {
|
|
position: relative;
|
|
}
|
|
.transData1 {
|
|
margin-top: 20px;
|
|
}
|
|
.add-btn {
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 70px;
|
|
}
|
|
.del-btn {
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 175px;
|
|
}
|
|
.add-btn1 {
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 295px;
|
|
}
|
|
.del-btn1 {
|
|
position: absolute;
|
|
top: -35px;
|
|
left: 415px;
|
|
}
|
|
</style>
|