首先在ant-design的官网文档没有看到失去焦点事件
image.png
经过查阅有一个onBlur事件
1
2
源码:
<template>
<BasicModal
v-bind="$attrs"
title="添加信息"
:helpMessage="['提示1', '提示2']"
width="800px"
okText="保存更改"
@ok="addCtrl"
>
<div class="addModalWrap">
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="right">
<a-form-item label="控制器名称" name="ctrlName" v-bind="validateInfos.ctrlName">
<a-input v-model:value="modelRef.ctrlName" class="addInputName" />
</a-form-item>
<a-form-item label="控制器分组" name="ctrlGroup" v-bind="validateInfos.ctrlGroup">
<a-select v-model:value="modelRef.ctrlGroup" :options="groupOptions" class="addInput" />
</a-form-item>
<a-form-item label="控制器编号" name="ctrlNum" v-bind="validateInfos.ctrlNum">
<a-input v-model:value="modelRef.ctrlNum" class="addInput" />
</a-form-item>
<a-form-item label="控制器铭牌" name="ctrlBrand" v-bind="validateInfos.ctrlBrand">
<a-input v-model:value="modelRef.ctrlBrand" class="addInput" />
</a-form-item>
<a-form-item label="安装时间">
<a-date-picker
v-model:value="modelRef.installTime"
show-time
:format="dateFormat"
type="date"
placeholder="选择时间"
style="width: 100%"
/>
</a-form-item>
<a-form-item label="回路总数" name="loopNum" v-bind="validateInfos.loopNum">
<a-input v-model:value="modelRef.loopNum" class="addInput"
/></a-form-item>
<a-form-item label="所属网关" name="gatherId" v-bind="validateInfos.gatherId">
<a-select v-model:value="modelRef.gatherId" :options="gatewayOptions" class="addInput"
/></a-form-item>
<a-form-item label="控制器型号" v-bind="validateInfos.ctrlType"
><a-select v-model:value="modelRef.ctrlType" :options="ctrlTypeOptions" class="addInput"
/></a-form-item>
<a-form-item label="通讯地址" name="address" v-bind="validateInfos.address">
<a-input v-model:value="modelRef.address" class="addInput" @blur="checkAddress($event)"
/></a-form-item>
<a-form-item label="设备密码" name="secret" v-bind="validateInfos.secret"
><a-input v-model:value="modelRef.secret" class="addInput"
/></a-form-item>
</a-form>
</div>
</BasicModal>
</template>
<script lang="ts">
import {
defineComponent,
ref,
getCurrentInstance,
nextTick,
onMounted,
unref,
inject,
UnwrapRef,
reactive,
toRaw,
} from 'vue';
import { CircuitController } from '/@/api/sys/model/openClosePlan';
import { BasicModal } from '/@/components/Modal';
import {
getGatherList,
getMeteStyleList,
addController,
updateController,
getLoopGroupList,
} from '/@/api/sys/user';
import { Form, message } from 'ant-design-vue';
import moment, { Moment } from 'moment';
import { SelectTypes } from 'ant-design-vue/lib/select';
const useForm = Form.useForm;
export default defineComponent({
components: {
BasicModal,
},
props: {
moldType: {
type: String,
default: '添加控制器信息',
},
groupList: {
type: Array,
},
},
emits: ['indexEvent'],
setup(props, { emit }) {
const dateFormat = 'YYYY-MM-DD';
const groupOptions = ref<SelectTypes['options']>([]); // 分组信息参数
const gatewayOptions = ref<SelectTypes['options']>([]); //网关选项参数
const ctrlTypeOptions = ref<SelectTypes['options']>([]); //控制器选项参数
let ctrlId = inject('ctrlId', 1); //控制器id
const modelRef = reactive({
ctrlName: '',
ctrlGroup: '',
ctrlNum: '',
installTime: moment(),
loopNum: 1,
gatherId: '',
ctrlType: '',
address: '',
secret: '',
ctrlBrand: '',
});
const { resetFields, validate, validateInfos } = useForm(
modelRef,
reactive({
ctrlName: [
{
required: true,
message: '控制器名称不能为空',
},
],
ctrlGroup: [
{
required: true,
message: '控制器分组不能为空',
},
],
ctrlNum: [
{
required: true,
message: '控制器编号不能为空',
},
],
loopNum: [
{
required: true,
message: '回路数目不能为空',
},
],
gatherId: [
{
required: true,
message: '网关id不能为空',
},
],
ctrlType: [
{
required: true,
message: '控制类型不能为空',
},
],
address: [
{
required: true,
message: '回路地址不能为空',
},
],
secret: [
{
required: true,
message: '密码不能为空',
},
],
ctrlBrand: [
{
required: true,
message: '品牌编号不能为空',
},
],
}),
);
//获取网关的选择项的列表
const getGateWayInfo = () => {
let gatewayList = [];
getGatherList().then((res) => {
let resData = res.data;
resData.forEach((x) => {
let tempObj = {
value: x.gather_ID,
label: x.gather_Name,
};
gatewayList.push(tempObj);
});
gatewayOptions.value = gatewayList;
modelRef.gatherId = gatewayList[0].value;
});
};
//获取控制器类型下拉列表(也就是说表计类型数据)
const getMeteStyleInfo = () => {
getMeteStyleList().then((res) => {
let resData = res.data;
let ctrlTypeList = [];
resData.forEach((x) => {
let tempObj = {
value: x.meteStyle_ID,
label: x.meteStyle_Name,
};
ctrlTypeList.push(tempObj);
});
ctrlTypeOptions.value = ctrlTypeList;
modelRef.ctrlType = ctrlTypeList[0].value;
});
};
//获取所有的回路分组的列表(回路分组就是控制器分组)
getLoopGroupList().then((res) => {
let code = res.code; //请求状态码
if (code == 200) {
let resData = res.data;
resData.forEach((val) => {
let tempObj = {
value: val.id,
label: val.groupName,
};
groupOptions.value.push(tempObj);
});
}
});
onMounted(() => {
getGateWayInfo();
getMeteStyleInfo();
});
const checkAddress = (e) => {
console.log(modelRef.address);
console.log(e.target.value);
};
const addCtrl = () => {
validate()
.then(() => {
let params: CircuitController = {};
params.id = unref(ctrlId);
params.controllerName = modelRef.ctrlName;
params.controllerGroupId = Number(modelRef.ctrlGroup);
params.controllerNumber = modelRef.ctrlNum;
params.gatewayId = Number(modelRef.gatherId);
params.gatewayName = modelRef.gatherName;
// params.controllerType = modelRef.ctrlType;
// params.gatherAddress = modelRef.address;
params.controllerSecret = modelRef.secret;
params.loopNumber = modelRef.loopNum;
params.controllerAddress = modelRef.address;
params.meteStyleId = modelRef.ctrlType;
params.installTime = modelRef.installTime;
params.controllerBrand = modelRef.ctrlBrand;
addController(params).then((res) => {
if (res.code == 200) {
emitParent();
message.info('保存信息成功');
} else {
message.warn(res.message);
}
});
})
.catch((err) => {});
};
//回调父组件获取列表数据接口方法
const emitParent = () => {
emit('indexEvent', '1', '10');
};
return {
// formState,
validate,
checkAddress,
dateFormat,
groupOptions,
getGateWayInfo,
gatewayOptions,
ctrlTypeOptions,
getMeteStyleInfo,
addCtrl,
emitParent,
modelRef,
validateInfos,
labelCol: { span: 4, offset: 2 },
wrapperCol: { span: 14, offset: 1 },
};
},
});
</script>
<style lang="less">
.addModalWrap {
width: 100%;
height: 100%;
.ant-descriptions-item-container {
align-items: center;
}
.addInputName {
width: 95%;
}
.addInput {
width: 90%;
}
}
</style>
网友评论