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="选择概念:"  prop = "concept">
                   <el-select v-model="form.concept" clearable placeholder="请选择" size="small">
                        <el-option
                            v-for="item in conceptList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择类型:" prop="type">
                   <el-select v-model="form.type" clearable placeholder="请选择" size="small">
                        <el-option
                            v-for="item in typeList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </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 v-model="form.termStandardName"></el-input>
                </el-form-item>
                 <el-form-item label="术语小类名称:" prop="termMiniClassName">
                   <el-input v-model="form.termMiniClassName"></el-input>
                </el-form-item>
                <el-form-item label="术语类组:" prop="termClass">
                   <el-input v-model="form.termClass"></el-input>
                </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 typeList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="年龄"
                    class="fix-inp"
                    prop="age"
                >
                    <el-col :span="10">
                        <el-input v-model="form.minAge"
                                maxLength="3"
                        ></el-input>
                    </el-col>
                    <el-col :span="4">~</el-col>
                    <el-col :span="10">
                        <el-input
                            v-model="form.maxAge"
                            maxLength="3"
                        ></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="一级部位:" prop="primarySite">
                    <el-select v-model="form.primarySite" clearable placeholder="请选择" size="small">
                        <el-option
                            v-for="item in typeList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key">
                        </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 typeList"
                            :key="item.key"
                            :label="item.name"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示顺序:" prop="order">
                   <el-input v-model="form.order"></el-input>
                </el-form-item>
                <el-form-item label="科室:" prop="department">
                   <el-input v-model="form.department"></el-input>
                </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"
                >确 定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
  /**
   *
   */
  import api from '@api/icss.js';

  export default {
    name: 'AddMedicinePrompt',
    components: {
    },
    data() {
      return {
        isEdit:false,
        conceptList: [
            {
              name:'概念1',
              id:1,
              key:1
            },
            {
              name:'概念2',
              id:2,
              key:2
            },
            {
              name:'概念3',
              id:3,
              key:3
            },
        ],
        typeList:[
            {
              name:'类型1',
              id:1,
              key:1
            },
            {
              name:'类型2',
              id:2,
              key:2
            },
            {
              name:'类型3',
              id:3,
              key:3
            },
        ],
        form:{
            concept: '',
        },
        rules: {
            termName: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            termStandardName: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            termMiniClassName: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            termClass: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            sex: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            age: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            primarySite: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            twoLevelPosition: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
            department: [
                { required: true, message: '请选择模板归属', trigger: 'change' }
            ],
        }
      }
    },
    watch:{
      
    },
    created:function(){
      const {isEdit,data} = this.$route.params;
      if(isEdit){
        this.isEdit = isEdit;
      }
    },
    methods: {
      back() { this.$router.go(-1) },
     
     
      
     
      
      submitForm() {
        //验证外层表单
        let goOn=true,it=null;
        this.$refs.groups.validate((valid) =>{
          if(!valid){
            goOn = false;
            return false;
          }
        });
        //验证段落表单
        for(let i=0;i<this.$refs.subForm.length;i++){
          it=this.$refs.subForm[i];
          it.$refs.form.validate((valid) =>{
            if(!valid){
              goOn = false;
            }
          });
        };

        if(!goOn){
          return;
        }
        //通过必填验证，提交保存
        const param = {
          name:this.form.selectedTerm.libId,
          detailVOList:Object.assign(this.form.prags)
        };
        console.log(param);
        this.showSaveDialog(param);
      },
      showSaveDialog(param) {
        this.showConfirmDialog('是否保存该静态知识？', () => {
          api.saveTermPrompts(param).then((res) => {
            if (res.data.code === '0') {
              this.warning(res.data.msg || '保存成功', 'success');
              this.$router.push("/admin/LT-YXSYKWH-YXSYJTZSWH");
            } 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 {

        .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;

        }

    }
    
   
</style>