platformFront/src/components/knowledgeExtra/SubConditions.vue

<template>
    <div class="groups-cont">
        <el-form ref="groupData" label-width="150px" class="sub-condition-form" :model="groupData" :rules="rules">
            <span v-if="!disabled&&!isLast" class="del-btn"  @click="delRule">删除</span><!--:class="isLast?'disable del-btn':'del-btn'"-->
            <el-form-item label="基础规则名称：" prop="subDescription">
                <el-input v-model.trim = "groupData.subDescription" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="基础规则类型：" prop="subType">
                <el-select v-model="groupData.subType"
                           :disabled="disabled"
                           placeholder="请选择"
                           size="small"
                           @change="subTypeChange">
                    <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 label="基础规则术语类型：" prop="subLenCode">
                <el-select v-model="groupData.subLenCode"
                           :disabled="disabled"
                           placeholder="请选择"
                           size="small" @change="subCodeChange">
                    <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  class="addDepartFormItem" label="医学标准术语：" prop="subConceptId">
                <el-select clearable remote filterable :disabled="disabled" :remote-method="searchConcept" v-model.trim="groupData.subConceptId">
                    <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.subType===2&&showDataType" label="选择类型：" prop="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'" label="最大值：">
                <div class="select-item clearfix">
                    <el-col :span="3">
                        <el-form-item prop="subMaxOperator">
                            <el-select v-model="groupData.subMaxOperator"
                                       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="subMaxValue">
                            <el-input type="text" v-model="groupData.subMaxValue" placeholder="填写数值"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item prop="subMaxUnit">
                            <el-input  type="text" v-model.trim="groupData.subMaxUnit" placeholder="填写单位"/>
                        </el-form-item>
                    </el-col>
                </div>
            </el-form-item>
            <el-form-item class="min-margin" v-if="groupData.dataType==='1'" label="最小值：">
                <div class="select-item clearfix">
                    <el-col :span="3">
                        <el-form-item prop="subMinOperator">
                            <el-select v-model="groupData.subMinOperator"
                                       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="subMinValue">
                            <el-input type="text" v-model="groupData.subMinValue" placeholder="填写数值"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item prop="subMinUnit">
                            <el-input  type="text" v-model.trim="groupData.subMinUnit" placeholder="填写单位"/>
                        </el-form-item>
                    </el-col>
                </div>
            </el-form-item>
            <el-form-item v-if="groupData.subType!==6&&groupData.dataType==='2'" label="医学内容：" prop="subEqValue" class="discDesc is-required">
                <el-input type="textarea" rows="3" placeholder="请输入医学内容" v-model.trim="groupData.subEqValue"></el-input>
            </el-form-item>
            <el-form-item v-if="groupData.subType===6" label="正则表达式：" prop="subEqValue" class="discDesc is-required">
                <el-input type="textarea" rows="3" placeholder="请输入正则表达式" v-model.trim="groupData.subEqValue"></el-input>
            </el-form-item>
        </el-form>
        <div class="inner-oper" v-if="showAdd">
            <span>新增规则：</span>
            <span class="add-btn" @click="addRule"><img src="../../images/add.png" alt="新增规则"></span>
        </div>
    </div>
</template>
<script>
    import api from '@api/knowledgeLib.js';
    export default {
        name:'subCondititons',
        props:['groupData','ind','isLast','baseTypes','firstPlace','disabled','showAdd'],
        data(){
            return {
                //baseTermTypeList:[],
                typeList:[],
                numTypes:'',    //只有数值类型的类型id
                operMaxList:[
                    {name:'<=',key:'<='},
                    {name:'<',key:'<'},
                ],
                operMinList:[{name:'>',key:'>'},
                    {name:'>=',key:'>='},
                ],
                dataTypes:[{id:'1',name:'数值类型'},{id:'2',name:'文本类型'}],
                conceptList:[],
                rules:{
                    subDescription:[{ required: true, message: '请输入基础规则名称',trigger: ['blur'] },{
                        validator: (rule,value,callback)=>{
                            if(value&&value.length>100){
                                callback(new Error('规则名称不能超过100字'));
                            }else{
                                callback();
                            }}, trigger: 'change'
                    }],
                    subType:[{ required: true, message: '请选择基础规则类型',trigger: ['change'] }],
                    subLenCode:[{ required: true, message: '请选择基础规则术语类型',trigger: ['change'] }],
                    subConceptId:[{ required: true, message: '请输入医学标准术语',trigger: ['blur'] }],
                    dataType:[{ required: true, message: '请选择类型',trigger: ['change'] }],
                    subMaxOperator:[{
                        validator: (rule,value,callback)=>{
                            const {subMaxValue,subMinOperator,subMinValue}=this.groupData;
                            const val=value+subMinOperator+subMinValue+subMaxValue;
                            if(!val||(!value&&subMaxValue!=='')){
                                callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                            }else{
                                callback();
                            }}, trigger: 'blur'
                    }],
                    subMinOperator:[{
                        validator: (rule,value,callback)=>{
                            const {subMaxValue,subMaxOperator,subMinValue}=this.groupData;
                            const val=value+subMaxOperator+subMinValue+subMaxValue;
                            if(!val||(!value&&subMinValue!=='')){
                                callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                            }else{
                                callback();
                            }}, trigger: 'blur'
                    }],
                    subMaxValue:[{
                        validator: (rule,value,callback)=>{
                            const {subMaxOperator,subMinOperator,subMinValue}=this.groupData;
                            const val=value+subMaxOperator+subMinValue+subMinOperator;
                            const isNum=/^(\-|\+)?\d+(\.\d+)?$/.test(value);
                            if(!val||(value==''&&subMaxOperator)){
                                callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                            }else if(value!==''&&!isNum){
                                callback(new Error('只能输入数字'));
                            }else{
                                callback();
                            }}, trigger: 'blur'
                    }],
                    subMinValue:[{
                        validator: (rule,value,callback)=>{
                            const {subMaxValue,subMinOperator,subMaxOperator}=this.groupData;
                            const val=value+subMaxOperator+subMaxValue+subMinOperator;
                            const isNum=/^(\-|\+)?\d+(\.\d+)?$/.test(value);
                            if(!val||(value==''&&subMinOperator)){
                                callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                            }else if(value!==''&&!isNum){
                                callback(new Error('只能输入数字'));
                            }else{
                                callback();
                            }}, trigger: 'blur'
                    }],
                    subEqValue:[{
                        validator: (rule,value,callback)=>{
                            if(value===''){
                                callback(new Error('请输入'+this.textName));
                            }else if(value.length>200){
                                callback(new Error(this.textName+'不能超过200字'));
                            }else{
                                callback();
                            }}, trigger: 'blur'
                    }],
                },
            }
        },
        watch:{
            'groupData':{
                handler:function(val){
                    this.$emit("changeVal",val,this.ind);
                },
                deep:true
            },
            /*'baseTypes':{
                handler:function(val){
                    if(!this.groupData.subType){
                        this.baseTermTypeList =[];
                        return;
                    }
                    const obj = val.find((it)=>it.type===this.groupData.subType);
                    this.baseTermTypeList = obj.subMenuList;
                },
                deep:true
            },*/
            'firstPlace':{
                handler:function(val) {
                    if (this.ind!==0||!val) return;
                    const dict = localStorage.getItem("zskDicts").match(new RegExp(val.checkedType+'-\\d+','g'))||[];
                    const types = dict[0].split("-");
                    this.groupData.subType = +types[2];
                    this.groupData.subLenCode = types[1];
                    this.conceptList = [val];
                    this.groupData.subDescription = val.conceptName;
                    this.groupData.subConceptId = val.conceptId;
                    this.groupData.subConceptName = val.conceptName;
                },
                deep:true
            }
        },
        created(){
            this.numTypes = localStorage.getItem("zskNumDict");
            this.conceptList=[{conceptName:this.groupData.subLibName||this.groupData.subConceptName,conceptId:this.groupData.subConceptId}];
        },
        computed:{
            baseTermTypeList:function(){
                if(!this.baseTypes.length){
                    return [];
                }
                const sub = this.baseTypes.find((it) => it.type === this.groupData.subType)||{};
                return sub.subMenuList;
            },
            showDataType:function(){
               return (this.numTypes+',').indexOf(this.groupData.subLenCode+',')===-1;
            },
            textName:function(){
                return this.groupData.subType!==6&&this.groupData.dataType==='2'?'医学内容':'正则表达式';
            }
        },
        methods:{
            dataTypeChange(val){
                this.groupData.subEqOperator=(val==='2'?'=':'');
                this.clearNumText();
                delete this.groupData.dataType;     //触发更新
                this.$set(this.groupData,'dataType',val);
            },
            subTypeChange(val){        //基础规则类型修改
                this.groupData.subLenCode='';
                this.groupData.dataType='';
                this.clearConcept();
                this.clearNumText();
            },
            subCodeChange(val){        //基础规则术语类型修改
                this.groupData.subLenCode=val;
                if((this.numTypes+',').indexOf(val+',')>-1){
                    this.groupData.dataType='1';
                }else{
                    this.groupData.dataType='';
                }
                this.clearConcept();
                this.clearNumText();
            },
            clearConcept(){
              this.groupData.subConceptId='';
              this.conceptList=[];
            },
            clearNumText(){
                this.groupData.subMaxOperator='';
                this.groupData.subMaxValue='';
                this.groupData.subMaxUnit='';
                this.groupData.subMinOperator='';
                this.groupData.subMinValue='';
                this.groupData.subMinUnit='';
                this.groupData.subEqValue='';
                this.groupData.subEqOperator='';
            },
            searchConcept(val){
                const param = {
                    excludedConceptIds:[this.groupData.subType],
                    libType:this.groupData.subLenCode,
                    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");
            },
            delRule(){
                if(this.isLast){
                    this.warning("初始状态规则不能删除~");
                    return;
                }
                //this.showConfirmDialog("是否删除该条规则，可能对现有系统会造成影响",()=>{
                    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;
        .conceptItem{
            padding: 0 10px;
            cursor: pointer;
            height: 32px;
            line-height: 32px;
            &:hover{
                background: #ebedf1;
            }
        }
        .inner-oper{
            padding: 15px 0 15px 21px;
            .add-btn {
                cursor: pointer;
                img {
                    vertical-align: middle;
                }
            }
        }
        .sub-condition-form{
            padding: 20px;
            position: relative;
            border-bottom:2px 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: 22px;
            &.min-margin{
                margin-bottom: 0;
            }
        }
        .el-form-item__error{
            top: auto;
            white-space: nowrap;
            background: #fff;
        }
        .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>