platformFront/src/components/icss/PubTemplateGroup.vue

<template>
  <div class="PubTagGroupWrapper">
    <el-button class="copyTmpt" type="primary" @click="copyTmpt" v-if="editData.id && this.form.region3 != 0">复制该内容</el-button>
    <el-form
      class="groups"
      :rules="rules"
      ref="groups"
      :model="form"
      label-width="150px"
    >
      <el-form-item
        label="模板名称："
        prop="region2"
      >
        <el-input
          v-model="form.region2"
          maxLength="120"
          placeholder="请输入模板名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="模板类型："
        prop="region3"
      >
        <span class="changeTips">改变模板类型后，模板内容将会恢复到默认状态</span>
        <el-select
          :disabled="form.isCopy || !!editData.id"
          v-model="form.region3"
          placeholder="模板类型"
          @change="sendData"
        >
          <el-option
            v-for="item in AdscriptionsType"
            :label="item.name"
            :value="item.key+''"
            :key="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="form.region3 == 1?'属于科室：':'属于慢病：'"
        prop="region4"
        v-if="form.region3 != 0"
      >
        <span class="changeTips">改变属于类别后，模板内容将会恢复到默认状态</span>
        <el-select
          :disabled="!!editData.id"
          v-model="form.region4"
          :placeholder="form.region3 == 1?'属于科室':'属于慢病'"
          @change="sendData"
        >
          <el-option
            v-for="item in sonLis"
            :label="item.name"
            :value="item.id+''"
            :key="item.id"
            v-if="!!item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="模板归属："
        prop="region1"
      >
        <span class="changeTips">改变模板归属后，模板内容将会恢复到默认状态</span>
        <el-select
          :disabled="form.isCopy || !!editData.id || (form.region3 == '') || (form.region3 != '0' && form.region4 == '')"
          v-model="form.region1"
          placeholder="模板归属"
          @change="sendData"
        >
          <el-option
            v-for="item in Adscriptions"
            :label="item.name"
            :value="item.type+''"
            :key="item.type"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api from '@api/icss.js';
import utils from '@api/utils.js';

/**
 * 归属type
 * 1：主诉模板 2：现病史模板 3：现病史空模板 4 : 其他史模板 5：嵌套模板 6：慢病模板
 */


export default {
  props:['editData'],
  data() {
    var validatePass2 = (rule, value, callback) => {
        this.validateSystomName(value,callback)
    };
    return {
      numWord:0,
      Adscriptions:[],
      sonLis:[],
      form: {
        region1: '',    //归属
        region2: '',     //模板名称
        region3: '',     //类型
        region4: '',     //所属科室慢病
        isCopy:false
      },
      rules: {
        region1: [
          { required: true, message: '请选择模板归属', trigger: 'change' }
        ],
        region2: [
          { required: true, message: '请输入模板名称', trigger: 'change' },
          { validator: validatePass2, trigger: 'blur' },
        ],
        region3: [
          { required: true, message: '请选择模板类型', trigger: 'change' },
        ],
        region4: [
          { required: true, message: '请选择所属', trigger: 'change' },
        ],
      },
      AdscriptionsType:[],
      deptDis:{}
    }
  },
  beforeMount:function(){
    let templateType = localStorage.getItem('icssEnumsData') ? JSON.parse(localStorage.getItem('icssEnumsData')).moduleInfoTypeEnum : []
    let templateOwn = localStorage.getItem('typeLis') ? JSON.parse(localStorage.getItem('typeLis')) : []
    this.deptDis = localStorage.getItem('deptDis') ? JSON.parse(localStorage.getItem('deptDis')) : {}
    for(let i = 0;i < templateOwn.length;i++){
      templateOwn[i].type = templateOwn[i].val
    }
    this.Adscriptions = templateOwn
    this.AdscriptionsType = templateType
  },
  computed:{
    tmpType(){
      return this.form.region3
    },
    tmpOwnTo(){
      return this.form.region4
    }
  },
  watch: {
    tmpType(newVal, preVal){
      if(newVal != preVal){
        if(newVal == 1){
          let tmpDeptDTOS = this.deptDis.deptDTOS
          // let obj = {id:-1,name:'通用'}
          // if(tmpDeptDTOS[0].id != 0){
          //   tmpDeptDTOS.unshift(obj)
          // }
          this.sonLis = tmpDeptDTOS
          if(!this.form.id){
            this.form.region4 = ''
            this.form.region1 = ''
          }
        }else if(newVal == 2){
          let tmpDisDTOS = this.deptDis.disDTOS
          // let obj = {id:-1,name:'通用'}
          // if(tmpDisDTOS[0].id != 0){
          //   tmpDisDTOS.unshift(obj)
          // }
          this.sonLis = tmpDisDTOS
          if(!this.form.id){
            this.form.region4 = ''
            this.form.region1 = ''
          }
        }else{
          this.sonLis = []
          if(!this.form.id){
            this.getTypes()
            this.form.region4 = ''
            this.form.region1 = ''
          }
        }
      }
    },
    tmpOwnTo(newVal, preVal){
      if(newVal != preVal){
          if(!this.form.id){
            this.getTypes()
            this.form.region1 = ''
          }
          if(this.form.isCopy){
            this.getTypes('copy')
          }
      }
    }
  },
  mounted() {
    const editData = this.$props.editData;
    if(editData.id){      //修改
      this.form = Object.assign({},this.form,editData);
      this.form.region1 = editData.type
      this.form.region2 = editData.name
      this.form.region3 = editData.moduleType+''
      this.form.region4 = editData.relationId+''
    }
    this.$emit('changeVal', this.form, false)
  },
  methods:{
    copyTmpt(){
      this.editData.id = ''
      this.form.isCopy = true
      this.$emit('staticOwn', this.form.region4, false)
      this.$emit('changeVal', this.form, false)
    },
    getTypes(type){
      let param = {
          "moduleType": this.form.region3,
          "relationId": this.form.region4
      }
      api.getModuleType(param).then((res) => {
        if (res.data.code === '0') {//获取模板归属
          let result = res.data.data
          if(type){
            let num = 0;
            for(let i = 0;i < result.length;i++){
              if(result[i].type == this.form.region1){
                ++num
              }
            }
            if(num == 0){
              this.$message({
                message:'该归属下的模板已添加',
                type:'warning'
              })
              this.$emit('staticOwn', this.form.region4, false)
              return
            }
          }else{
            this.Adscriptions = result
          }
        }
      })
    },
    sendData(val){
      this.$emit('changeVal', this.form, false)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('validatePass', this.form, false)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    validateSystomName(name,callback,flg) {
        let tmpVal = this.form.region2
        if(tmpVal.trim() == ''){
          callback(new Error('模板名称不能为空'));
        }else{
          this.form.region2 = tmpVal.trim()
          callback();
        }
    },
  }
}
</script>
<style lang="less">
.PubTagGroupWrapper {
  position: relative;
  .copyTmpt {
    position: absolute;
    right: 40px;
    top: 20px;
  }
  .groups {
  background-color: #fff;
  padding: 20px;
  margin: 20px 20px -20px 20px;
  .el-form-item__content,
  .el-input__inner {
    height: 30px;
    line-height: 30px;
    width: 200px;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item__error {
    top: 28px;
  }
  .el-form-item__label {
    line-height: 30px;
    text-align: left;
  }
  .el-input__icon {
    line-height: 30px;
  }
  .verticalMiddle .el-form-item__content {
    position: relative;
    top: 16px;
  }
  .maxAges {
    margin-left: -125px;
  }
  .ages {
    display: inline-block;
    .el-form-item__content {
      width: auto;
    }
    .el-input {
      display: inline-block;
      width: auto;
      .el-input__inner {
        width: 60px;
        padding: 0 5px;
        margin-right: 25px;
        text-align: center;
      }

      .el-input__inner::-webkit-outer-spin-button,
      .el-input__inner::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }

      .el-input__inner[type="number"] {
        -moz-appearance: textfield;
      }
    }
  }
  .el-message-box__btns .el-button--default {
    color: #606266 !important;
  }
  .cancelColor {
    color: #22ccc8 !important;
  }
  .changeTips {
    position: absolute;
    left: 220px;
    min-width: 300px;
    color: #22ccc8;
    font-size: 12px;
  }
}
}
</style>