platformFront/src/components/icss/AddIndeptLabel.vue

<template>
    <div class="NoiseTemplateWrapper TemplateWrapper">
        <div class="groupTitle"><i
                class="el-icon-back"
                @click="back"
        ></i> {{txt}}</div>
        <PubIndeptTag
                @changeVal="changeVal"
                @changeSex="changeSex"
                @changeType="changeType"
                @validatePass="validatePass"
                :editData="editData"
                ref="submitForm"
        ></PubIndeptTag>
        <div class="main">
            <p class="title" v-if="dataPub.region2==1||dataPub.region2==2||dataPub.region2==99"> <i>*</i> 标签明细：</p>
            <SingleSelect v-if="dataPub.region2==1 || dataPub.region2==2" :ascription="dataPub.region1" :sexType="dataPub.region7" :type="dataPub.region2" @pushValues="pushValues" :options="editData.questionDetailList"></SingleSelect>
            <div class="btn">
                <el-button
                        type="primary"
                        @click="submitForm"
                >确 定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
  /**
   * dataPub.region2  判断底部显示哪些
   */
  import PubIndeptTag from './PubIndeptTag';
  import SingleSelect from './SingleSelect';
  import api from '@api/icss.js';
  import utils from '@api/utils.js';

  export default {
    name: 'NoiseTemplateWrapper',
    data() {
      return {
        txt:'独立标签维护--添加独立标签',
        dataPub: {},      //公用组件传的值都在这
        itemsTypes:[1,2],            //有明细的类型
        editData:{},                    //编辑数据
        form: {
          currentOrder: '0',     //标签成文顺序
        },
        rules: {
          currentOrder: [
            { required: true, message: '选择标签成文顺序', trigger: 'change' }
          ]
        },
        options: [],           //标签明细右侧操作数据
      }
    },
    beforeMount:function(){
      const {isEdit,data} = this.$route.params;
      if(isEdit){
        this.txt = '独立标签维护--修改独立标签'
        this.editData = data;
      }
    },
    computed: {
      newSign() {
        return this.dataPub.region2;
      },
    },
    watch: {
      newSign(nextVal, prevVal) {
        if (nextVal != prevVal) {
          this.form.currentOrder = '0'
        }
      },
    },
    methods: {
      back() { this.$router.go(-1) },
      changeVal(val) {    //子组件数据改变传递到父组件
        this.dataPub = val
        console.log('公用组件传的值都在这', val)
      },
      changeSex(sex) {       //性别改变，清空标签明细
        //console.log(sex)
      },
      changeType(type) {        //填写单类型改变，标签明细左侧更新，右侧清空
        //console.log(type)
      },
      pushValues(its){
        this.options = its;
      },
      submitForm() {      // 调用子组件的方法验证公用部分
        this.$refs.submitForm.submitForm('groups');
      },
      validatePass() {      //验证成功回调，调取接口
        //仍需验证标签明细是否选择
        if (this.itemsTypes.includes(+this.dataPub.region2)&&this.options.length==0) {
          this.$message({
            message: '至少填一个选项',
            type: '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": 1,             //标签类型
            "tagName": this.dataPub.region3,             //系统名称
            "name": this.dataPub.region4,                //界面名称
            "joint": this.dataPub.region5,               //标签间的连接符
            "subType": this.dataPub.region6,   	         //0:可以，1：不可以(当项目检索)
            "sexType": this.dataPub.region7,             //1:男，2：女，3：通用
            "ageBegin": this.dataPub.region8,       		 //最小年龄
            "ageEnd": this.dataPub.region9,              //最大年龄
            "textGenerate": this.form.currentOrder,      //成文顺序 默认0
            "copyType": this.dataPub.region2 == 6 ? this.dataPub.region10 : (this.dataPub.region2 == 3 ? this.dataPub.region11 : ''),                               //是否复制
            "showAdd": 0,                                //是否显示加号血压
            "showInfo": 0,
            "labelPrefix":this.dataPub.prefix,                                 //前缀
            "labelSuffix":this.dataPub.suffix,                                 //后缀
            "minValue": this.dataPub.minNormalVal,        //化验最小正常值
            "maxValue": this.dataPub.maxNormalVal,         //化验最大正常值
            "questionDetails": this.options,
            "questionMappings": []       //映射关系,
          }
        };
        this.showSaveDialog(param);
      },
      showSaveDialog(param) {
        this.showConfirmDialog('是否保存该标签？', () => {
          api.saveOrUpdate(param).then((res) => {
            if (res.data.code === '0') {
              this.warning(res.data.msg || '保存成功', 'success');
              this.$router.push("/admin/LT-YXSJWH-DLLXBQWH");
            } 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: {
      PubIndeptTag,
      SingleSelect
    }
  }
</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;
    }
    }
    }
</style>