platformFront/src/components/icss/NoiseTemplate.vue

<template>
  <div class="NoiseTemplateWrapper TemplateWrapper">
    <div class="groupTitle"><i
        class="el-icon-back"
        @click="back"
      ></i> 标签组维护--添加标签组</div>
    <PubTagGroup
      @changeVal="changeVal"
      @changeSex="changeSex"
      @changeType="changeType"
      @validatePass="validatePass"
      ref="submitForm"
    ></PubTagGroup>
    <div class="main">
      <p class="title"> <i>*</i> 标签明细：</p>
      <PubTagPartDetail :pool="dataPub.tagPool" :type="dataPub.region1" :sign="dataPub.region2" v-show="dataPub.region2 == 2"></PubTagPartDetail>
      <SymptomTagGroup v-if="dataPub.region2 == 4" :dataPub ="this.dataPub"></SymptomTagGroup>
      <div class="btn">
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * dataPub.region2  判断底部显示哪些
 */
import PubTagGroup from './PubTagGroup';
import PubTagPartDetail from './PubTagPartDetail';
import SymptomTagGroup from './SymptomTagGroup';
export default {
  name: 'NoiseTemplateWrapper',
  data() {
    return {
      dataPub: {},      //公用组件传的值都在这
    }
  },
  
  methods: {
    back() { this.$router.go(-1) },
    changeVal(val) {    //子组件数据改变传递到父组件
      this.dataPub = val
      console.log('公用组件传的值都在这', val)
    },
    changeSex(sex) {       //性别改变，清空标签明细
      console.log(sex)
    },
    changeType(type){        //填写单类型改变，标签明细左侧更新，右侧清空
      console.log(type)
    },
    submitForm() {       // 调用子组件的方法验证公用部分
      this.$refs.submitForm.submitForm('groups');
    },
    validatePass() {      //验证成功回调，调取接口
      //仍需验证标签明细是否选择
      
    },
  },
  components: {
    PubTagGroup,
    PubTagPartDetail,
    SymptomTagGroup,
  }
}
</script>
<style lang="less">
@import "../../less/common.less";
.NoiseTemplateWrapper {
  .groupTitle {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
  }
  .main {
    background-color: #fff;
    margin: 0 20px 20px;
    padding: 20px;
    border-top: 1px solid @icssBorder;
    box-sizing: border-box;
    font-size: 14px;
    color: #606266;
    .title {
      margin-bottom: 20px;
      i {
        color: #f56c6c;
      }
    }
  }
  .btn {
    text-align: right;
  }
}
</style>