platformFront/src/components/preTreat/AddCombinQuestion.vue

<template>
    <div class="NoiseTemplateWrapper TemplateWrapper">
        <crumbs
                :title="txt"
                class="topBack"
                :param="$route.params"
                linkTo="CombinQuestion"
        ></crumbs>
        <PubIndeptQa
                @changeVal="changeVal"
                @changeType="changeType"
                @validatePass="validatePass"
                qaType="2"
                :isCopy ='$route.params.isCopy'
                :isEdit="$route.params.isEdit"
                :editData="editData"
                ref="submitForm"
        ></PubIndeptQa>
        <div class="main">
            <p class="title" v-if="dataPub.region2">
                填写单明细：<span v-if="dataPub.region2!='4'">(互斥项与其他明细内容互斥，互斥项同时只可选择一个)</span>
            </p>
            <QuestionTagGroup v-if="dataPub.region2" qaType="2" :ascription="dataPub.region1" :sexType="dataPub.region7" :type="dataPub.region2" @changeActionData="pushValues" :options="editData.questionMapping"></QuestionTagGroup>
            <div class="btn">
                <el-button
                        type="primary"
                        @click="submitForm"
                >确 定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
  /**
   * dataPub.region2  判断底部显示哪些
   */
  import PubIndeptQa from './PubIndeptQa';
  import QuestionTagGroup from './QuestionTagGroup';
  import api from '@api/preTreat.js';
  import utils from '@api/utils.js';

  export default {
    name: 'addCombinQuestion',
    data() {
      return {
        txt:'组合填写单维护-添加组合填写单',
        imgList:[],
        dataPub: {},      //公用组件传的值都在这
        itemsTypes:[1,2],            //有明细的类型
        editData:{},                    //编辑数据
        options: [],           //标签明细右侧操作数据
      }
    },
    beforeMount:function(){
      const {isEdit,isCopy,data} = this.$route.params;
      if(isEdit||isCopy){
        this.txt = isCopy?'组合填写单维护-复制组合填写单':'组合填写单维护-修改组合填写单';
        this.editData = data;
      }
    },
    methods: {
      changeVal(val) {    //子组件数据改变传递到父组件
        this.dataPub = val;
        console.log('公用组件传的值都在这', val);
      },
      /*changeSex(sex) {       //性别改变，清空填写单明细
                             //console.log(sex)
      },*/
      changeType(type) {        //填写单类型改变，标签明细左侧更新，右侧清空
        // console.log('type',type)
        this.options = [];
      },
      pushValues(its){
        const arr = its.map((it,i)=>{
          return {
            sonQuestion:it.id,
            orderNo:+i+1,
            exclusionType:it.exclusionType
          }
        });
        this.options = arr;
      },
      submitForm() {      // 调用子组件的方法验证公用部分
        this.$refs.submitForm.submitForm('groups');
      },
      validatePass() {      //验证成功回调，调取接口
        //仍需验证填写单明细是否选择
        if(parseFloat(this.dataPub.region8) >= parseFloat(this.dataPub.region9)) {
          this.warning('最小年龄不能大于或等于最大年龄');
          return;
        }
        if(parseFloat(this.dataPub.minNormalVal) >= parseFloat(this.dataPub.maxNormalVal)) {
          this.warning('最小正常值不能大于或等于最大正常值');
          return;
        }
        const {isEdit,data} = this.$route.params;
        let param = {
          "questionWrapper": {
            //"controlType": this.dataPub.region2,                            //控件类型(0：默认值 1：下拉单选 2：下拉多选 6：文本框 7：数字键盘文本框 99：联合推送)
            "id": isEdit?data.id:'',                                    //新增id置空
            "type": this.dataPub.region1,                //填写单归属
            "tagType": this.dataPub.region2,             //组合填写单类型
            "tagName": this.dataPub.region3,             //系统名称
            "name": this.dataPub.region4,                //医生界面名称
            "description":this.dataPub.region5,
            "sexType": this.dataPub.region7,             //1:男，2：女，3：通用
            "ageBegin": this.dataPub.region8,       		 //最小年龄
            "ageEnd": this.dataPub.region9,              //最大年龄
            "itemType" :this.dataPub.region12,           //是否为主要内容
            "url":this.dataPub.region13,                  //上传图片
            'explains':this.dataPub.explains,           //症状解释
            "questionDetails": this.options,                //明细项
            "questionMappings": this.options,      //映射关系,
          }
        };
        this.showSaveDialog(param);
      },
      showSaveDialog(param) {
        this.showConfirmDialog('是否保存该填写单？', () => {
          api.questionAdd(param).then((res) => {
            if (res.data.code === '0') {
              this.warning(res.data.msg || '保存成功', 'success');
              //返回带搜索条件的首页
              this.$router.push({name:'CombinQuestion',params:Object.assign({},this.$route.params,{currentPage:1})});
            } else {
              this.warning(res.data.msg)
            }
          }).catch((err) => {
            this.warning(err);
          })
        });
      },
      showConfirmDialog(msg, resolve) {
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {});
      },
      warning(msg, type) {
        this.$message({
          showClose: true,
          message: msg,
          type: type || 'warning'
        })
      },
    },
    components: {
      PubIndeptQa,
      QuestionTagGroup
    }
  }
</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;
    }
    .order {
        margin-bottom: 20px;
    .el-input__inner {
        line-height: 30px;
        height: 30px;
    }
    }
    }
    .toast-cancel{
        color: #22ccc8 !important;
    // background: #22ccc8;
    }
</style>