有时百感交集，却又百口莫辩，那些很远的事仿佛就在昨天 <!--编辑公共组件代码-->

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="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="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="524px;"
                      >
                      </el-date-picker>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <span slot="label">
                      <b style="color:#fff">*</b>&nbsp;{{
                        ruleForm.labelValTwo
                      }}
                    </span>
                    <el-input
                      v-model="ruleForm.value2"
                      style="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>