有时百感交集，却又百口莫辩，那些很远的事仿佛就在昨天 <!--编辑公共组件代码-->
Do you remember
公共组件中的公共模块
<template> <!-- 新建优惠券页面 element--> <div class="newRoleManagement"> <!-- 操作记录 --> <el-row style="margin-bottom:0;margin-top:24px"> <el-col :span="24"> <div class="grid-content bg-purple-dark"> <div class="roleManagement_top"> {{ newRoleManagementVal.action }} </div> <div class="roleManagement_top" style="border-bottom:none"> <span class="spanSize"> <i class="el-icon-tickets" style="font-size:20px;color:#688EF7;margin-right:6px" ></i> <i>空</i> </span> <span class="rightSpanSize"> <i>空</i> </span> </div> <!-- 两个按钮 --> <div class="btnDiv"> <el-button type="primary" class="btnReturn btnA" @click="handleClickBtnReturn()" >{{ newRoleManagementVal.returnBtn }}</el-button > <el-button type="primary" :plain="true" class="btnSubmit btnA" @click="submitForm()" >{{ newRoleManagementVal.submitBtn }}</el-button > </div> </div> </el-col> </el-row> </div> </template> <script> import "element-ui/lib/theme-chalk/index.css"; import "iview/dist/styles/iview.css"; export default { components: {}, props: {}, data() { return { // 绑定的标头 newRoleManagementVal: { sizeCon: "为必填项", returnBtn: "返回", submitBtn: "提交", action: "操作记录" } }; }, watch: {}, computed: {}, methods: { // 提交事件 submitForm() { this.$emit("abcSubmit"); }, handleClickBtnReturn() { this.$emit("abcReturn"); } }, created() {}, mounted() {} }; </script> <style lang="scss" type="text/css" scoped> @import "../../../style/syllabusLeagueClass_css/action_css/actionModule.scss"; </style>
公共组件
<template> <div class="bigDiv"> <!-- 训练营课时的新建与编辑 --> <el-row> <el-col :span="24"> <div class="grid-content bg-purple-dark"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-row v-for="(item, index) in ruleForm.formInlineList" :key="index" > <el-col :span="24"> <div class="top">{{ item.titleTitle }}</div> <div style="padding-left:35px"> <el-form-item :label="item.labelVal" :prop="'formInlineList.' + index + '.coachSrearchShopValue'" :rules="item.rules.coachSrearchShopValue" > <el-input v-model="item.coachSrearchShopValue" style="width:524px;" :placeholder="item.placerHolder" suffix-icon="el-icon-search" @input="dimSearch()" > </el-input> </el-form-item> <!-- 所属門店對應的三個P標籤 --> <div class="corresponding"> <p style="margin-bottom:16px"> {{ item.pCodeName }}<i>{{ item.pCode }}</i> </p> <p style="margin-bottom:16px"> {{ item.pNameName }}<i>{{ item.pName }}</i> </p> <p> {{ item.pAaddressName }}<i>{{ item.pAaddress }}</i> </p> </div> </div> <div style="width:100%;height:24px;background:#e9eef3"></div> </el-col> </el-row> <!-- 循环结束 --> <el-row> <el-col :span="24"> <div class="top">{{ ruleForm.titleTitle }}</div> <div style="padding-left:35px"> <el-form-item :label="ruleForm.labelVal" prop="value1"> <div class="block"> <el-date-picker v-model="ruleForm.value1" type="date" placeholder="选择开课日期" format="yyyy - MM - dd " value-format="yyyy-MM-dd" style="width:524px;" > </el-date-picker> </div> </el-form-item> <el-form-item> <span slot="label"> <b style="color:#fff">*</b> {{ ruleForm.labelValTwo }} </span> <el-input v-model="ruleForm.value2" style="width:524px;" :placeholder="ruleForm.placerHolder" > </el-input> </el-form-item> </div> </el-col> </el-row> </el-form> </div> </el-col> </el-row> <!-- 底部操作记录 --> <footerDiv @abcReturn="say()" @abcSubmit="abcSubmit('ruleForm')" ></footerDiv> </div> </template> <script> import "element-ui/lib/theme-chalk/index.css"; import "iview/dist/styles/iview.css"; import footerDiv from "./action_syllabus_training/index.vue"; import { trainingcamplessonscheduleList } from "../../api/syllabusTrainingCamp/index.js"; export default { components: { footerDiv }, watch: {}, props: {}, data() { // 正则判断用于校验输入框的值是否与数据库匹配 var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error("请输入训练营名称")); } setTimeout(() => { // 判断输入框与返回数据是否一致，不一致清空对应显示 if (value != this.dimValue_value) { callback(new Error("训练营名称不存在")); this.emptyVal(); } else { callback(); } }, 300); }; return { ruleForm: { titleTitle: "课程相关", value1: "", value2: "", labelVal: "开课日期：", labelValTwo: "课时安排：", placerHolder: "请输入课时安排，如“每周一、三、五 19:00-20:00”", formInlineList: [ { index: 1, coachSrearchShopValue: "", pCode: "", pName: "", pAaddress: "", rules: { coachSrearchShopValue: [ { required: true, validator: checkAge, trigger: "blur" } ] }, placerHolder: "搜索选择训练营", pCodeName: "场馆编号：", pNameName: "场馆名称：", pAaddressName: "场馆地址：", titleTitle: "训练营课程", labelVal: "训练营名称：" } ] }, rules: { value1: [{ required: true, message: "请选择开课日期", trigger: "blur" }] }, dimSearchVal: [], //获取所有数据 dimValue_value: "" //获取训练营名称用于判断 }; }, computed: {}, methods: { say() { this.$emit("abcReturn"); }, // 提交事件 abcSubmit(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$emit("abcSubmit", this.ruleForm); this.$messageOK("success", "提交成功"); } else { this.$messageOK("error", "提交失败，请输入完整"); } }); }, // 模糊搜索 coachSrearchShopValue 如果有就显示如果没有就清空 dimSearch() { this.dim(); }, dim() { let val = this.ruleForm.formInlineList[0].coachSrearchShopValue; let _val = this.ruleForm.formInlineList[0]; let req = { trainingCampLessonName: val }; trainingcamplessonscheduleList(req).then(res => { this.dimSearchVal = res.data.data.rows; if (res.data.code == "200") { this.dimSearchVal.map(item => { this.dimValue_value = item.trainingCampLesson.name; //获取训练营名称 用户判断 let _item = item.trainingCampLesson.gymnasium; // 判断输入框是否与返回一致 一致就对应显示不一致就清空 if (val == item.trainingCampLesson.name) { _val.pCode = _item.code; _val.pName = _item.name; _val.pAaddress = _item.address; } else { val = ""; this.emptyVal(); } }); } else { return false; } }); }, // 用于搜索不成功后清空的函数 emptyVal() { let empty_val = this.ruleForm.formInlineList[0]; // 底部对应的三个P标签 empty_val.pCode = ""; empty_val.pName = ""; empty_val.pAaddress = ""; } }, created() {}, mounted() {} }; </script> <style lang="scss" type="text/css" scoped> @import "../../style/syllabusTrainingCamp_css/syllabusTrainingCamp.scss"; </style>
父组件( 使用公共组件的组件 )
<template> <div class="wrapper"> <editSyllabusTrainingCamp @abcReturn="say()" @abcSubmit="abcSubmit" ></editSyllabusTrainingCamp> </div> </template> <script> import editSyllabusTrainingCamp from "../syllabusTrainingCamp_CommonAddEdit/index.vue"; import { trainingcamplessonscheduleEdit } from "../../api/syllabusTrainingCamp/index.js"; export default { components: { editSyllabusTrainingCamp }, props: {}, data() { return {}; }, watch: {}, computed: {}, methods: { // 自定义事件返回上一级 say() { this.$alertMsgBox( "是否确认退出新建", "系统提示", "此项为返回上一级", "el-icon-warning", "red" ) .then(() => { this.$router.go(-1); this.$messageOK("success", "已退出"); }) .catch(() => { this.$messageOK("info", "已取消"); }); }, // 编辑接口 abcSubmit(newVval) { const req = { id: this.$route.query.id, openLessonDate: newVval.value1 }; trainingcamplessonscheduleEdit(req).then(res => { if (res.data.code == "200") { this.$router.go(-1); } else { return false; } }); } }, created() {}, mounted() {} }; </script> <style lang="scss" type="text/css" scoped></style>
