platformFront/src/components/knowledgeExtra/DiagBaseItem.vue

<template>
    <div class="groups-cont">
        <!--<el-form ref="groupData" label-width="150px" class="sub-condition-form" :model="groupData" :rules="rules">-->
        <div class="sub-condition-form">
        <span v-if="!isLast" class="del-btn"  @click="delRule">删除</span><!--:class="isLast?'disable del-btn':'del-btn'"-->
            <el-form-item label="基础依据名称：" :prop="ruleLine+ind+'.basDescription'">
                <el-input v-model.trim = "groupData.basDescription"></el-input>
            </el-form-item>
            <el-form-item label="基础依据类型：" :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" label="基础依据术语类型：" :prop="ruleLine+ind+'.basLibType'">
                <el-select v-model="groupData.basLibType"
                           placeholder="请选择"
                           size="small"
                           :disabled="showRegx">
                    <el-option
                            v-for="item in baseTermTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="showRegx" label="基础依据术语类型：" class="is-required">
                <el-input disabled v-model="basTypeName"></el-input>
            </el-form-item>
            <el-form-item v-if="!showRegx" class="addDepartFormItem" label="医学标准术语：" :prop="ruleLine+ind+'.basConceptId'">
                <el-select clearable remote filterable :remote-method="searchConcept" v-model.trim="groupData.basConceptId">
                    <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 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" v-if="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="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="(!onlyNum&&!showRegx&&groupData.basType===2&&groupData.dataType==='2')||onlyTxt" label="医学内容：" :prop="ruleLine+ind+'.eqValue'" class="discDesc is-required">
                <el-input type="textarea" rows="3" placeholder="请输入医学内容" v-model.trim="groupData.eqValue"></el-input>
            </el-form-item>
            <el-form-item v-if="showRegx" label="正则表达式：" :prop="ruleLine+ind+'.eqValue'" class="discDesc is-required">
                <el-input type="textarea" rows="3" placeholder="请输入正则表达式" v-model.trim="groupData.eqValue"></el-input>
            </el-form-item>
        </div>
        <!--</el-form>-->
        <div class="inner-oper" v-if="ind===len-1">
            <span>新增基础依据：</span>
            <span class="add-btn" @click="addRule"><img src="../../images/add.png" alt="新增基础依据"></span>
        </div>
    </div>
</template>
<script>
    import api from '@api/zskDiagBase.js';
    export default {
        name:'DiagBaseItem',
        props:['groupData','ind','isLast','baseTypes','parInx','inx','len'],
        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:[],
            }
        },
        watch: {
            'groupData': {
                handler: function (val) {
                    this.$emit("changeVal", val, this.ind);
                },
                deep: true
            },
        },
        created(){
            this.dicts=JSON.parse(localStorage.getItem("zskDiagDicts")||'{}');
            if(this.groupData.maxOperator||this.groupData.minOperator){
                this.groupData.dataType='1';
            }else if(this.groupData.eqValue){
                this.groupData.dataType='2';
            }
        },
        mounted(){
            this.conceptList=[{conceptName:this.groupData.basLibName,conceptId:this.groupData.basConceptId}];
            if(this.groupData.basLibType){
                this.baseTermTypeList=[{name:this.groupData.basLename,code:this.groupData.basLibType}];
            }
        },
        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;
            },
            textName:function(){
                return this.showRegx?'正则表达式':'医学内容';
            },
        },
        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.clearConcept();    //清空医学标准术语
                this.clearNumText();    //清空数值、医学内容
                const obj = this.baseTypes.find((it)=>it.type===val);
                this.baseTermTypeList = obj.subMenuList;
            },
            subCodeChange(val){        //基础规则术语类型修改
                this.groupData.basLibType=val;
                if((this.numTypes+',').indexOf(val+',')>-1){
                    this.groupData.dataType='1';
                }else{
                    this.groupData.dataType='';
                }
                this.clearConcept();
                this.clearNumText();
            },
            clearConcept(){
                this.groupData.basConceptId='';
                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);
            },
            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;
            }
        }
        .inner-oper{
            padding: 10px 0 10px 21px;
            .add-btn {
                cursor: pointer;
                img {
                    vertical-align: middle;
                }
            }
        }
        .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-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>