需求：点击一个按钮，弹出一个模态框，这个模态框有两个tab，tab中是各种报警条件，这些报警条件是从数据库中动态取出的，数据库中数据变更后，这个界面也要变更，我们可以查看和编辑这些报警条件。底部“确定”按钮点击的时候，会同时将这两个tab中的内容都报错到数据库中去，数据录入要验证输入的格式。
对于熟练的人来说，实现其实很简单，但是对于没有经验的人来说，如果按照官网给的那些简单实例来做，你会发现，出现一些奇怪的问题，诸如，文本框不能编辑内容，表单验证无效等。
界面效果如下图所示：
分析：用到的组件：el-dialog、el-tabs
AlarmSet.vue代码：
<template> <div> <div v-loading="winLoading"> <el-tabs v-model="activeName" type="border-card" v-if="alarmTmplData.length>0"> <el-tab-pane label="制冷站"> <ColdSet ref="coldSet" :alarmTmplData="alarmTmplData" @onSubmit="coldSetSummit" :showAlarmSetWin.sync="showAlarmSetWin" ></ColdSet> </el-tab-pane> <el-tab-pane label="末端"> <EndSet ref="endSet" :alarmTmplData="alarmTmplData" @onSubmit="endSetSummit" :showAlarmSetWin.sync="showAlarmSetWin" ></EndSet> </el-tab-pane> </el-tabs> </div> <div slot="footer"> <div> <el-button type="primary" @click="onSubmit" :loading="btnLoading">确 定</el-button> <el-button @click="isHide">取 消</el-button> </div> </div> </div> </template> <script> import ColdSet from "./ColdSet"; import EndSet from "./EndSet"; import mixinsOption from "@/mixins/mixin-options"; import { alarmService } from "@/services/cold-station-service"; // import { alarmConditionData } from "@/mock/json.js"; export default { mixins: [mixinsOption], props: { showAlarmSetWin: { type: Boolean, default: false }, alarmTmpl: { type: Object, default: {} } }, components: { ColdSet, EndSet }, data() { return { alarmConditionData: [], //报警条件数据 activeName: "coldSet", alarmTmplData: [], coldConditionData: [], //冷站报警条件数据 endConditionData: [], //末端报警条件数据 isColdValid: false, isEndValid: false, btnLoading: false }; }, watch: { showAlarmSetWin: { handler(val) { console.log("showAlarmSetWin", val); if (val) { this.initData(); } }, immediate: true } }, methods: { //初始化数据 initData() { this.$store.commit("base/setWinLoading", true); console.log("initData"); alarmService .getConditionList({ groupNumber: this.groupNumber, projectNumber: this.projectNumber }) .then(res => { if (res.code === 200) { this.alarmConditionData = res.data; this.createAlarmTmplData(res.data); } this.$store.commit("base/setWinLoading", false); }); }, //构造报警模板数据 createAlarmTmplData(conditionData) { let res = []; this.alarmTmplData = this.alarmTmpl.data; if (this.alarmTmpl) { this.alarmTmplData.forEach(n => { // debugger; n.descr = eval(n.descr); let item = conditionData.find(m => m.tempId == n.id); if (item) { n["alarmLevel"] = item.alarmLevel; n["suggestion"] = item.suggestion; n["firstVal"] = item.firstVal; n["secondVal"] = item.secondVal; n["fourthVal"] = item.fourthVal; n["thirdVal"] = item.thirdVal; n["status"] = item.status; } }); } // console.log("this.alarmTmplData :>> ", this.alarmTmplData); }, //确定操作 onSubmit() { this.$refs["coldSet"].onSubmit(); this.$refs["endSet"].onSubmit(); if (this.isColdValid && this.isEndValid) { this.btnLoading = true; let list = this.coldConditionData .concat(this.endConditionData) .map(m => { return { tempId: m.id, alarmLevel: m.alarmLevel, firstVal: m.firstVal, secondVal: m.secondVal, thirdVal: m.thirdVal, fourthVal: m.fourthVal, status: m.status, suggestion: m.suggestion }; }); alarmService .batchEdit({ projectNumber: this.projectNumber, groupNumber: this.groupNumber, list: list }) .then(res => { if (res.code === 200) { this.$message({ message: "操作成功！", type: "success", duration: this.$baseConfig.messageDuration }); } this.btnLoading = false; }) .catch(() => { this.btnLoading = false; }); } }, coldSetSummit(val, isValid) { if (isValid) { this.isColdValid = isValid; this.coldConditionData = val; } }, endSetSummit(val, isValid) { if (isValid) { this.isEndValid = isValid; this.endConditionData = val; } }, //取消 isHide() { this.$emit("update:showAlarmSetWin", false); } } }; </script> <style lang="scss" scoped> .alarm-set { height: 600px; /deep/ .el-tabs--border-card { height: 100%; } /deep/ .el-tabs__content { height: calc(100% - 60px); } } </style>