platformFront/src/components/icss/AddMedicalInfo.vue

<template>
    <div class="MedicalInfoWrapper">
        <div class="groupTitle"><i
                class="el-icon-back"
                @click="back"
        ></i> 医学术语属性--{{isEdit?'修改':'添加'}}</div>
        <div class="info-container">
            <el-form :rules="rules"
                     :model="form"
                     label-width="130px"
                     ref="groups">
                <el-form-item label="搜索概念:">
                  <div class="conceptSearch">
                    <input v-model="conceptText" type="text" class="searchText">
                    <span class="searchName" @click="searchConcept">搜索</span>
                    <ul class="conceptList" ref="conceptList">
                      <li 
                        v-for="item in conceptList" 
                        class="conceptItem ellipsis"
                        :title="item.nameAndType"
                        @click="selectConcept(item)"
                        :key="item.id">
                        {{item.nameAndType}}
                      </li>
                    </ul>
                  </div>
                </el-form-item>


                <el-form-item label="选择概念:"  prop = "concept">

                      <el-input v-model="form.concept" disabled></el-input>
                      <!-- <el-select v-model="form.concept"   filterable  @change="selectConcept" placeholder="请选择" size="small">
                          <el-option
                              v-for="(item) in conceptList"
                              :key="item.id"
                              :label="item.nameAndType"
                              :value="item.id">
                          </el-option>
                      </el-select> -->
                   
                </el-form-item>
                <el-form-item label="选择类型:" prop="type">
                        <el-input disabled v-model="form.conceptType"></el-input>
                </el-form-item>
               
                <!-- <el-form-item label="术语名称:" prop="termName">
                   <el-input v-model="form.termName"></el-input>
                </el-form-item> -->
                 <el-form-item label="术语标准名称:" prop="termStandardName">
                   <el-input disabled v-model="form.stdName"></el-input>
                </el-form-item>
                <el-form-item label="搜索小类名称:">
                  <div class="conceptSearch  termMiniClassSearch">
                    <input v-model="termMiniClassText" type="text" class="searchText">
                    <span class="searchName" @click="searchTermMiniClass">搜索</span>
                    <ul class="conceptList" ref="termMiniClassNameList">
                      <li 
                        v-for="item in termMiniClassNameList" 
                        class="conceptItem ellipsis"
                        :title="item.nameAndType"
                        @click="selectTermMiniClass(item)"
                        :key="item.id">
                        {{item.nameAndType}}
                      </li>
                    </ul>
                  </div>
                </el-form-item>
                 <el-form-item label="术语小类名称:" prop="termMiniClassName">
                   <el-input disabled v-model="form.termMiniClassName"></el-input>
                   <!-- <el-select v-model="form.termMiniClassName"   filterable  placeholder="请选择" size="small">
                        <el-option
                            v-for="(item) in termClassList"
                            :key="item.id"
                            :label="item.nameAndType"
                            :value="item.name">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                 <el-form-item label="搜索术语类组:">
                  <div class="conceptSearch termClassSearch">
                    <input v-model="termClassText" type="text" class="searchText">
                    <span class="searchName" @click="searchTermClass">搜索</span>
                    <ul class="conceptList" ref="termClassList">
                      <li 
                        v-for="item in termClassList" 
                        class="conceptItem ellipsis"
                        :title="item.nameAndType"
                        @click="selectTermClass(item)"
                        :key="item.id">
                        {{item.nameAndType}}
                      </li>
                    </ul>
                  </div>
                </el-form-item>
                <el-form-item label="术语类组:" prop="termClass">
                   <el-input disabled v-model="form.termClass"></el-input>
                   <!-- <el-select v-model="form.termClass"   filterable  placeholder="请选择" size="small">
                        <el-option
                            v-for="(item) in termClassList"
                            :key="item.id"
                            :label="item.nameAndType"
                            :value="item.name">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="性别:" prop="sex">
                   <el-select v-model="form.sex" clearable placeholder="请选择" size="small">
                        <el-option
                            v-for="item in sexList"
                            :key="item.sex"
                            :label="item.sex"
                            :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="年龄"
                    class="fix-inp"
                    prop="age"
                >
                    <el-col :span="10">
                      <el-form-item
                         prop="minAge"
                      >
                        <el-input v-model="form.minAge"
                                maxLength="3"
                                type="number"
                                
                        ></el-input>
                      </el-form-item>
                        
                    </el-col>
                    <el-col :span="4">~</el-col>
                    <el-col :span="10">
                      <el-form-item
                         prop="maxAge"
                      >
                        <el-input
                            v-model="form.maxAge"
                            type="number"
                            maxLength="3"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="一级部位:" prop="primarySite">
                    <el-select v-model="form.primarySite" clearable placeholder="请选择" @change="selectPrimarySite" size="small">
                        <el-option
                            v-for="item in primarySiteList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级部位:" prop="twoLevelPosition">
                    <el-select v-model="form.twoLevelPosition" clearable placeholder="请选择" size="small">
                        <el-option
                            v-for="item in twoLevelPositionList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示顺序:" prop="order">
                   <!-- <el-input v-model="form.order"></el-input> -->
                   <el-select v-model="form.order" clearable placeholder="请选择" size="small">
                         <el-option
                              v-for="(item) in orderList"
                              :key="item.key"
                              :label="item.val"
                              :value="item.val">
                          </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室:" prop="department">
                   <el-select v-model="form.department"   filterable  placeholder="请选择" size="small">
                          <el-option
                              v-for="(item) in departmentList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.name">
                          </el-option>
                      </el-select>
                </el-form-item>
                <el-form-item label="术语编码:" prop="termCode">
                   <el-input v-model="form.termCode"></el-input>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                   <el-input  type="textarea"  v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button
                        type="primary"
                        @click="submitForm"
                        class="confirmBtn"
                >确 定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
  /**
   *
   */
  import api from '@api/icss.js';

  export default {
    name: 'AddMedicalInfo',
    components: {
    },
    data() {
      return {
        isEdit:false,
        conceptText: '',
        conceptList: [],  //概念列表（标准书语列表，过滤掉已添加过的）
        termClassText: '',
        termClassList:[], //术语类组列表（未过滤）
        termMiniClassText:'',
        termMiniClassNameList:[], //术语小类名称列表（未过滤）
        sexList: [
          {
              sex:'男',
              val:'1',
          },
          {
              sex:'女',
              val:'2',
          },
          {
              sex:'通用',
              val:'3',
          },
        ],
        typeList:[],
        primarySiteList: [],   //一级部位列表
        twoLevelPositionList: [],  //二级部位列表
        departmentList:[
          {
            id: 1,
            name: '全科'
          }
        ], //科室列表
        orderList:[
          {
            key: 0,
            val: 0
          },
          {
            key: 1,
            val: 1
          },
          {
            key: 2,
            val: 2
          },
          {
            key: 3,
            val: 3
          },
          {
            key: 4,
            val: 4
          },
          {
            key: 5,
            val: 5
          },
          {
            key: 6,
            val: 6
          },
          {
            key: 7,
            val: 7
          },
          {
            key: 8,
            val: 8
          },
          {
            key: 9,
            val: 9
          },
          {
            key: 10,
            val: 10
          }
        ], //显示顺序列表
        concept: '',
        form:{
           concept:'',  //概念名称
           name: '',    //术语名称
           stdName: '', //术语标准名称
           conceptType: '', //概念类型
           termClass: '', //术语类组
           termMiniClassName: '', //术语小类名称
           sex: '',   //性别
           minAge: '',  //最小年龄
           maxAge: '',  //最大年龄
           primarySite: '', //一级部位
           twoLevelPosition: '',  //二级部位
           order: '', //显示顺序
           department: '',  //科室
           termCode: '',  //术语编码
           remark: '' //备注
        },
        rules: {
            termStandardName: [
                { required: true, message: '请选择标准术语', trigger: '' }
            ],

            termMiniClassName: [
                { required: true, message: '请选择小类名称', trigger: 'change' }
            ],
            termClass: [
                { required: true, message: '请选择术语类组', trigger: 'change' }
            ],
            sex: [
                { required: true, message: '请选择性别', trigger: 'change' }
            ],
            
            primarySite: [
                { required: true, message: '请选择一级部位', trigger: 'change' }
            ],
            twoLevelPosition: [
                { required: true, message: '请选择二级部位', trigger: 'change' }
            ],
            department: [
                { required: true, message: '请选择科室', trigger: 'change' }
            ],
            minAge: [
                { required: true, message: '请输入最小年龄', trigger: 'change' }
            ],
            maxAge: [
                { required: true, message: '请输入最大年龄', trigger: 'change' }
            ]
        }
      }
    },
    watch:{
      
    },
    created:function(){
      const {isEdit,data} = this.$route.params;
      if(isEdit){
        this.isEdit = isEdit;
        this.form.concept = data.conceptName
        this.form.conceptType = data.conceptType
        this.form.name = data.name
        this.form.stdName = data.stdName
        this.form.termClass = data.cateName
        this.form.termMiniClassName = data.grp
        this.form.sex = data.gender
        this.form.minAge = data.minAge
        this.form.maxAge = data.maxAge
        this.form.primarySite = data.bodypart
        this.form.twoLevelPosition = data.subBodypart
        this.form.order = data.displayOrder
        this.form.department = data.dept
        this.form.termCode = data.code
        this.form.remark = data.note

      } else {
        
      }
      this.getPrimarySite()
    },
    methods: {
      back() { this.$router.go(-1) },
      searchConcept() {
        let param1 = {
          "name": this.conceptText,
          "isMedical": 1
        }
        this.getAllConcept(1, param1)
        this.$refs['conceptList'].style.display = 'block'
      },
      searchTermClass() {
        let param1 = {
          "name": this.termClassText,
        }
        this.getAllConcept(2, param1)
        this.$refs['termClassList'].style.display = 'block'
      },
      searchTermMiniClass() {
        let param1 = {
          "name": this.termMiniClassText,
        }
        this.getAllConcept(3, param1)
        this.$refs['termMiniClassNameList'].style.display = 'block'
      },
      getAllConcept(type, param1) {   //获取所有概念
        let param = {
          "isConcept": 1,
        }
        param = Object.assign({}, param, param1)
        api.getAllConcept(param).then((res) =>{
          if(res.data.code == '0') {
            if( type === 1 ) {
              this.conceptList = res.data.data
            } else if (type === 2) {
              this.termClassList = res.data.data
            } else if (type ===3) {
              this.termMiniClassNameList = res.data.data
            }
            
          } else {
            this.warning(res.data.msg)
          }
        })
      },
      selectConcept(item) {
        // const conceptItem = this.form.concept
        const selectedConcept = item
        this.form.concept = selectedConcept.name
        this.form.name = selectedConcept.name
        this.form.stdName = selectedConcept.name
        this.form.conceptType = selectedConcept.type
        this.$refs['conceptList'].style.display = 'none'
        this.conceptText = ''
      },
      selectTermClass(item) {
        this.form.termClass = item.name
        this.$refs['termClassList'].style.display = 'none'
        this.termClassText = ''
      },
      selectTermMiniClass(item) {
        this.form.termMiniClassName = item.name
        this.$refs['termMiniClassNameList'].style.display = 'none'
        this.termMiniClassText = ''
      },
      
      getPrimarySite() { //获取一级部位
        const param = {
          "level": 1
        }
        this.getAllBodypart(param, 1)
      },
      getTwoLevelPosition() {
        const param = {
          "bodypart": this.form.primarySite,
          "level": 2
        }
        this.getAllBodypart(param, 2)
      },
      getAllBodypart(param, type) {   //获取部位
        api.getAllBodypart(param).then((res) =>{
            if(res.data.code == '0') {
              if (type === 1) {
                  this.primarySiteList =  res.data.data
              } else if(type === 2) {
                  this.twoLevelPositionList =  res.data.data
              }
             
            }
         
        })
      },
      getDeptInfo() {
        api.getDeptInfo({}).then((res) => {
          if(res.data.code == '0') {
            this.departmentList = res.data.data.records
          }
        })
      },
      selectPrimarySite() {
        this.form.twoLevelPosition = '';
        this.getTwoLevelPosition();
      },
      submitForm() {
        //验证外层表单
        let goOn=true,it=null;
        this.$refs.groups.validate((valid) =>{
          if(!valid){
            goOn = false;
            return false;
          }
        });

        if(!goOn){
          return;
        }
        //通过必填验证，提交保存
        const param = {
          "bodypart": this.form.primarySite,
          "cateName": this.form.termClass,
          "code": this.form.termCode,
          "conceptName": this.form.concept,
          "conceptType": this.form.conceptType,
          "dept": this.form.department,
          "displayOrder": this.form.order,
          "gender": this.form.sex,
          "grp": this.form.termMiniClassName,
          "maxAge":this.form.maxAge,
          "minAge": this.form.minAge,
          "name": this.form.name,
          "note": this.form.remark,
          "stdName": this.form.stdName,
          "subBodypart": this.form.twoLevelPosition,
        }
        console.log(param);
        this.showSaveDialog(param);
      },
      showSaveDialog(param) {
        this.showConfirmDialog('是否保存该医学术语属性？', () => {
          api.addMedicalInfo(param).then((res) => {
            if (res.data.code === '0') {
              this.warning(res.data.msg || '保存成功', 'success');
              this.$router.push("/admin/LT-YXSYKWH-SYYXSXWH");
            } 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'
        })
      },
    }
  }
</script>
<style lang="less">
    @import "../../less/common.less";
    .MedicalInfoWrapper {
        .conceptSearch {
          height: 30px;
          margin: 4px 0;
          position: relative;
        }
        .searchText {
          padding: 0 10px;
          width: 180px;
          height: 30px;
          line-height: 30px;
          border: 1px solid #dcdfe6;
          float: left;
          border-radius: 4px 0 0 4px;
        }
        .searchName {
          display: block;
          width: 40px;
          height: 30px;
          border: 1px solid #dcdfe6;
          border-left: none;
          border-radius: 0 4px 4px 0;
          font-size: 14px;
          line-height: 30px;
          text-align: center;
          float: left;
          
        }
        .conceptList {
          position: absolute;
          border: 1px solid #dcdfe6;
          top: 30px;
          width: 200px;
          max-height: 160px;
          z-index: 10;
          overflow: auto;
          background: #fff
        }
        .conceptItem {
          padding: 0 10px;
          height: 30px;;
          line-height: 30px;
          overflow: hidden;
        }
        .conceptItem:hover {
          border: 1px solid #22ccc8;
        }
        .termMiniClassSearch {
          z-index: 8
        }
        .termClassSearch {
          z-index: 6
        }
        .info-container {
            .fix-inp {
              
              .el-form-item__error {
                width: 200px;
              }
            }
        }
        .groupTitle {
            width: calc(100% - 50px);
            height: 40px;
            background: #fff;
            padding: 0 20px 0 30px;
            margin-bottom: 20px;
            line-height: 40px;
            position: relative;
            z-index: 5;
            
        }
        .fix-inp{
            width: 330px;
        }
        .fix-inp .el-col .el-input__inner{
            width: 100%;
            display: inline-block;
        }
        .fix-inp .el-col-4{
            text-align: center;
        }
        .fix-inp .el-col-8{
            text-align: center;
        }
        
        .el-textarea__inner {
            width: 400px;
        }
        .info-container{
            background: #fff;
            padding: 20px;
            margin: 20px 20px -20px 20px;
        .el-input__inner{
            width: 200px;
            height: 32px;
        }
        .el-form-item__label{
            text-align: left;
        }
        .add-prg .el-form-item{
            margin-bottom: 20px;
        }
        }
        .line{
            border-top:1px #dcdfe6 solid;
            margin-bottom: 25px;

        }
        .btn {
          position: relative;
          height: 50px;
        }
        .confirmBtn {
          position: absolute;
          right: 40px;
        }
         // 处理input type = number的上下箭头
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          text-align: center;
        }
        input[type="number"]{
          -moz-appearance: textfield;
          text-align: center;
        }

    }
    
   
</style>