platformFront/src/components/knowledgeExtra/DiagBaseItem.vue

<template>
  <div class="groups-cont" v-if="groupData">
    <!--<el-form ref="groupData" label-width="150px" class="sub-condition-form" :model="groupData" :rules="rules">-->
    <div class="sub-condition-form">
      <span v-if="!hideDel" class="del-btn" @click="delRule">删除</span>
      <!--:class="isLast?'disable del-btn':'del-btn'"-->
      <el-form-item label="基础依据名称：" :key="0" :prop="ruleLine+ind+'.basDescription'">
        <el-input v-model.trim="groupData.basDescription" clearable></el-input>
      </el-form-item>
      <el-form-item label="基础依据类型：" :key="1" :prop="ruleLine+ind+'.basType'">
        <el-select
          v-model="groupData.basType"
          id="basTypeRef"
          placeholder="请选择"
          size="small"
          @change="basTypeChange"
        >
          <el-option v-for="item in baseTypes" :key="item.id" :label="item.name" :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="!showRegx" :key="2" label="基础依据术语类型：" :prop="ruleLine+ind+'.basLibType'">
        <el-select
          v-model="groupData.basLibType"
          placeholder="请选择"
          size="small"
          :disabled="showRegx"
          @change="basLibTypeChange"
        >
          <el-option
            v-for="item in baseTermTypeList"
            :key="item.id"
            :label="item.name"
            :value="Number(item.code)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="showRegx" :key="3" label="基础依据术语类型：" class="is-required">
        <el-input disabled v-model="basTypeName"></el-input>
      </el-form-item>
      <el-form-item
        v-if="!showRegx"
        :key="4"
        class="addDepartFormItem"
        label="医学标准术语："
        :prop="ruleLine+ind+'.basConceptId'"
      >
        <el-select
          clearable
          remote
          filterable
          :remote-method="searchConcept"
          v-model.trim="groupData.basConceptId"
          @change="conceptChange"
        >
          <el-option
            v-for="item in conceptList"
            :key="item.conceptId"
            :label="item.conceptName"
            :value="item.conceptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :key="5"
        v-if="groupData.basType===2&&!onlyNum&&!onlyTxt"
        label="选择类型："
        :prop="ruleLine+ind+'.dataType'"
      >
        <el-select
          v-model="groupData.dataType"
          placeholder="请选择"
          size="small"
          @change="dataTypeChange"
        >
          <el-option v-for="item in dataTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        class="min-margin"
        :key="6"
        v-if="(!showRegx&&groupData.dataType==='1')||onlyNum"
        label="最大值："
      >
        <div class="select-item clearfix">
          <el-col :span="3">
            <el-form-item :prop="ruleLine+ind+'.maxOperator'">
              <el-select v-model="groupData.maxOperator" placeholder="请选择" size="small" clearable>
                <el-option
                  v-for="item in operMaxList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :prop="ruleLine+ind+'.maxVal'">
              <el-input type="text" v-model="groupData.maxVal" placeholder="填写数值" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="maxUnit">
              <el-input type="text" v-model.trim="groupData.maxUnit" placeholder="填写单位" />
            </el-form-item>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item
        class="min-margin"
        v-if="(!showRegx&&groupData.dataType==='1')||onlyNum"
        label="最小值："
      >
        <div class="select-item clearfix">
          <el-col :span="3">
            <el-form-item :prop="ruleLine+ind+'.minOperator'">
              <el-select v-model="groupData.minOperator" placeholder="请选择" size="small" clearable>
                <el-option
                  v-for="item in operMinList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :prop="ruleLine+ind+'.minVal'">
              <el-input type="text" v-model="groupData.minVal" placeholder="填写数值" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="minUnit">
              <el-input type="text" v-model.trim="groupData.minUnit" placeholder="填写单位" />
            </el-form-item>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item
        v-if="showRegx"
        key="v11"
        label="正则表达式："
        :prop="ruleLine+ind+'.eqValue'"
        class="discDesc"
      >
        <el-input type="textarea" rows="3" placeholder="请输入正则表达式" v-model.trim="groupData.eqValue"></el-input>
      </el-form-item>
      <el-form-item
        key="v13"
        v-if="(!onlyNum&&!showRegx&&groupData.basType===2&&groupData.dataType==='2')||onlyTxt"
        label="医学内容："
        :prop="ruleLine+ind+'.eqValue'"
        class="discDesc"
      >
        <el-input placeholder="请输入医学内容" v-model.trim="groupData.eqValue"></el-input>
        <span class="tip-text">注：可输入升高、降低、阴性、阳性等~</span>
      </el-form-item>
    </div>
    <!--</el-form>-->
  </div>
</template>
<script>
import api from '@api/zskDiagBase.js';
export default {
  name: 'DiagBaseItem',
  props: ['groupData', 'ind', 'baseTypes', 'parInx', 'inx', 'hideDel'],
  data() {
    return {
      dicts: {},
      baseTermTypeList: [],
      typeList: [],
      numTypes: '', //只有数值类型的类型id
      //basTypeName:'',
      operMaxList: [
        { name: '<=', key: '<=' },
        { name: '<', key: '<' }
      ],
      operMinList: [
        { name: '>', key: '>' },
        { name: '>=', key: '>=' }
      ],
      dataTypes: [
        { id: '1', name: '数值类型' },
        { id: '2', name: '文本类型' }
      ],
      conceptList: []
    };
  },
  created() {
    this.dicts = JSON.parse(localStorage.getItem('zskDiagDicts') || '{}');
    if (this.groupData) {
      if (this.groupData.maxOperator || this.groupData.minOperator) {
        this.groupData.dataType = '1';
      } else if (this.groupData.eqValue) {
        this.groupData.dataType = '2';
      }
    }
    this.conceptList = [
      {
        conceptName: this.groupData.basLibName,
        conceptId: this.groupData.basConceptId
      }
    ];
    if (this.groupData.basType) {
      const obj = this.baseTypes.find(it => it.type === this.groupData.basType);
      this.baseTermTypeList = obj.subMenuList;
    }
  },
  computed: {
    basTypeName: function() {
      return (
        this.baseTypes.find(it => it.type === this.groupData.basType) || {}
      ).name;
    },
    onlyNum: function() {
      const onlyNum = this.dicts['onlyNum'] || '&';
      const codes = onlyNum + ',';
      const type = this.groupData.basLibType;
      return type && codes.indexOf(this.groupData.basLibType + ',') > -1;
    },
    onlyTxt: function() {
      const onlyTxt = this.dicts['onlyTxt'] || '&';
      const codes = onlyTxt + ',';
      const type = this.groupData.basLibType;
      return type && codes.indexOf(this.groupData.basLibType + ',') > -1;
    },
    ruleLine: function() {
      return (
        'klDiagnoseTypeVO.' +
        this.parInx +
        '.groupVO.' +
        this.inx +
        '.klDiagnoseDetail.'
      );
    },
    showRegx: function() {
      return this.groupData.basType === 3 || this.groupData.basType === 4;
    }
  },
  methods: {
    dataTypeChange(val) {
      this.groupData.eqOperator = val === '2' ? '=' : '';
      this.clearNumText();
      delete this.groupData.dataType; //触发更新
      this.$set(this.groupData, 'dataType', val);
    },
    basTypeChange(val) {
      //基础依据类型修改
      if (!val) {
        this.baseTermTypeList = [];
        return;
      }
      this.groupData.basLibType = '';
      this.groupData.dataType = '';
      this.clearConcept(); //清空医学标准术语
      this.clearNumText(); //清空数值、医学内容
      const obj = this.baseTypes.find(it => it.type === val);
      this.baseTermTypeList = obj.subMenuList;
    },
    basLibTypeChange(val) {
      console.log(val)
      //基础依据术语类型修改
      this.groupData.basLibType = val;
      console.log((this.numTypes + ',').indexOf(val + ','))
      if ((this.numTypes + ',').indexOf(val + ',') > -1) {
        this.groupData.dataType = '1';
      } else {
        this.groupData.dataType = '';
      }
      this.clearConcept();
      this.clearNumText();
    },
    conceptChange(val) {
      this.groupData.basConceptId = val;
      if (val) {
        this.groupData.basLibName = this.conceptList.find(
          it => it.conceptId === val
        ).conceptName;
      } else {
        this.groupData.basLibName = '';
      }
    },
    clearConcept() {
      this.groupData.basConceptId = '';
      this.groupData.basLibName = '';
      this.conceptList = [];
    },
    clearNumText() {
      this.groupData.maxOperator = '';
      this.groupData.maxVal = '';
      this.groupData.maxUnit = '';
      this.groupData.minOperator = '';
      this.groupData.minVal = '';
      this.groupData.minUnit = '';
      this.groupData.eqValue = '';
      this.groupData.eqOperator = '';
    },
    searchConcept(val) {
      const param = {
        excludedConceptIds: [this.groupData.basType],
        libType: this.groupData.basLibType,
        name: val
      };
      api
        .searchConcept(param)
        .then(res => {
          if (res.data.code == '0') {
            const data = res.data.data;
            this.conceptList = data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    /*addRule(){
                this.$emit("addRule");
                this.$emit('setRules');
            },*/
    delRule() {
      this.$emit('delRule', this.ind);
      this.$emit('setRules');
    },
    warning(msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || 'warning'
      });
    },
    showConfirmDialog(msg, resolve) {
      this.$alert(msg, '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          resolve();
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="less">
.groups-cont {
  background: #fff;
  border-bottom: 2px solid #f5f5f5;
  .conceptItem {
    padding: 0 10px;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    &:hover {
      background: #ebedf1;
    }
  }
  .sub-condition-form {
    padding: 10px 20px 9px;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    .del-btn {
      color: #ff5b5b;
      cursor: pointer;
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 1;
      &.disable {
        color: #b8b8b8;
      }
    }
  }
  .el-input__icon {
    line-height: 32px;
  }
  .select-item {
    & > div {
      float: left;
      margin-right: 10px;
    }
    .el-input {
      width: auto;
    }
    input {
      width: 95px;
      line-height: 32px;
      height: 32px;
    }
  }
  .el-input,
  .el-input__inner {
    width: 190px;
    line-height: 32px;
    height: 32px;
  }
  .el-button--danger.is-plain {
    background: none;
  }
  .itemList {
    position: absolute;
    // display: none;
    background: #fff;
    width: 188px;
    max-height: 160px;
    border: 1px solid #dcdfe6;
    left: 0;
    top: 37px;
    z-index: 2;
    overflow-y: auto;
  }
  .el-form-item {
    margin-bottom: 6px;
    &.min-margin {
      margin-bottom: 0;
      position: relative;
      .el-form-item__content {
        position: unset;
      }
      .el-form-item__error {
        top: 10px;
        left: 460px;
        white-space: normal;
        width: 260px;
      }
    }
    .el-textarea + .el-form-item__error {
      top: 80px;
      left: 0;
    }
    .tip-text + .el-form-item__error {
      top: 40px;
      left: 0;
    }
  }

  .el-input-number {
    width: 95px;
  }
  .el-input-number.is-controls-right .el-input-number__decrease,
  .el-input-number.is-controls-right .el-input-number__increase {
    width: 25px;
    height: 15px;
    line-height: 16px;
  }
  .el-col-3 {
    width: 94px;
  }
}
</style>