137 lines
4.1 KiB
Vue
137 lines
4.1 KiB
Vue
<template>
|
||
<el-dialog v-model="visible" title="设备管理" width="40%" :before-close="closeDialog">
|
||
<el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef" size="large" label-position="top">
|
||
<el-form-item label="设备名称:" prop="device_name">
|
||
<el-input v-model="addForm.device_name" placeholder="请输入设备名称(不超过20个字符)" maxlength="10" clearable
|
||
:disabled="type !== 'I'" />
|
||
</el-form-item>
|
||
<el-form-item label="设备id:" prop="slave_id">
|
||
<el-input v-model="addForm.slave_id" placeholder="请输入设备id:1-255" clearable type="number" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="设备描述:" prop="device_description">
|
||
<el-input v-model="addForm.device_description" placeholder="请输入点位描述（不超过50）" maxlength="50" clearable />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button size="large" @click="closeDialog">取消</el-button>
|
||
<el-button size="large" type="primary" @click="saveSet"> 保存 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
|
||
import infoApi from "@/api/infoApi.js";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
export default {
|
||
props: ["formData", "dialogVisible", "setData", "type"],
|
||
emits: ["dialogClose", "dialogSuccess"],
|
||
setup(props, ctx) {
|
||
const checkSetId = (rule, value, callback) => {
|
||
let num = Number(value);
|
||
if (value && (num >= 1 && num <= 255)) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("设备ID：1-255"));
|
||
}
|
||
};
|
||
const validName = (rule, value, callback) => {
|
||
var name = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
|
||
if (name.test(value) || !value) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("名称只能以字母开头,仅支持字母,数字和下划线,最短3个字符起,且长度不能超过20个字符"));
|
||
}
|
||
};
|
||
const ruleFormRef = ref(null);
|
||
const state = reactive({
|
||
addForm: {
|
||
},
|
||
modelArr: [],
|
||
rules: {
|
||
device_name: [{ required: true, message: "请输入设备名称", trigger: "blur" },
|
||
{ min: 3, max: 20, message: "长度在3到20个字符", trigger: "blur" },
|
||
{ required: true, validator: validName, trigger: "blur" },],
|
||
device_description: [
|
||
{ required: false, message: "请输入设备描述", trigger: "blur" }
|
||
],
|
||
slave_id: [
|
||
{ required: true, message: "请输入设备ID", trigger: "blur" },
|
||
{ required: true, validator: checkSetId, trigger: "blur" }
|
||
],
|
||
},
|
||
});
|
||
const visible = computed(() => {
|
||
return props.dialogVisible;
|
||
});
|
||
|
||
onMounted(() => {
|
||
state.addForm = props.setData;
|
||
});
|
||
const closeDialog = () => {
|
||
ctx.emit("dialogClose");
|
||
};
|
||
|
||
const scanData = () => { };
|
||
|
||
const saveSet = async () => {
|
||
await ruleFormRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
const param = {
|
||
driver_name: props.formData.driver_name,
|
||
...state.addForm,
|
||
slave_id: Number(state.addForm.slave_id)
|
||
}
|
||
const res = props.type === 'I' ? await infoApi.addSet(param) : await infoApi.editSet(param);
|
||
if (res.code == 0) {
|
||
ElMessage.success(res.message || "请求成功");
|
||
ctx.emit("dialogSuccess");
|
||
} else {
|
||
ElMessage.error(res.data || res.message);
|
||
}
|
||
} else {
|
||
}
|
||
});
|
||
|
||
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
visible,
|
||
closeDialog,
|
||
saveSet,
|
||
ruleFormRef
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.top-title {
|
||
width: 100%;
|
||
|
||
::v-deep .el-card__body {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 800;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
padding: 15px 0;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flex-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10px 0;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|