platformFront/src/components/knowledgeExtra/SubConditions.vue

<template>
    <div class="groups-cont">
        <el-form ref="form" label-width="150px" class="sub-condition-form" :model="groupData" :rules="rules">
            <span 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&&firstPlace"></el-input>
            </el-form-item>
            <el-form-item label="基础规则类型：" prop="subType">
                <el-select v-model="groupData.subType"
                           :disabled="disabled&&firstPlace"
                           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&&firstPlace"
                           placeholder="请选择"
                           size="small">
                    <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&&firstPlace" :remote-method="searchConcept" v-model="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" label="选择类型：" prop="dataType">
                <el-select v-model="dataType"
                           placeholder="请选择"
                           size="small">
                    <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="dataType==='1'" label="最大值：" required>
                <div class="select-item clearfix">
                    <el-col :span="4">
                        <el-form-item prop="subMaxOperator">
                            <el-select v-model="groupData.subMaxOperator"
                                       placeholder="请选择"
                                       size="small">
                                <el-option
                                        v-for="item in operTypeList"
                                        :key="item.key"
                                        :label="item.name"
                                        :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="subMaxValue">
                            <el-input  type="text" v-model="groupData.subMaxValue" placeholder="填写数值"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="subMaxUnit">
                            <el-input  type="text" v-model="groupData.subMaxUnit" placeholder="填写单位"/>
                        </el-form-item>
                    </el-col>
                </div>
            </el-form-item>
            <el-form-item class="min-margin" v-if="dataType==='1'" label="最小值：" required>
                <div class="select-item clearfix">
                    <el-col :span="4">
                        <el-form-item prop="subMinOperator">
                            <el-select v-model="groupData.subMinOperator"
                                       placeholder="请选择"
                                       size="small">
                                <el-option
                                        v-for="item in operTypeList"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="subMaxValue">
                            <el-input  type="text" v-model="groupData.subMinValue" placeholder="填写数值"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="subMinUnit">
                            <el-input  type="text" v-model="groupData.subMinUnit" placeholder="填写单位"/>
                        </el-form-item>
                    </el-col>
                </div>
            </el-form-item>
            <el-form-item v-if="dataType==='2'" label="医学内容：" prop="subEqValue" class="discDesc">
                <el-input type="textarea" :rows="3" placeholder="请输入医学内容" v-model="groupData.subEqValue" maxlength="121"></el-input>
            </el-form-item>
            <el-form-item v-if="groupData.subType===6" label="正则表达式：" prop="regx" class="discDesc">
                <el-input type="textarea" :rows="3" placeholder="请输入正则表达式" v-model="groupData.subEqValue" maxlength="121"></el-input>
            </el-form-item>
        </el-form>
        <div class="inner-oper">
            <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'],
        data(){
            return {
                baseTermTypeList:[],
                typeList:[],
                dataType:'',
                operTypeList:[{name:'>',key:1},
                    {name:'>=',key:2},
                    {name:'<',key:3},
                    {name:'<=',key:4},
                    {name:'=',key:5},
                ],
                dataTypes:[{id:'1',name:'数值类型'},{id:'2',name:'文本类型'}],
                conceptList:[],
                rules:{
                    subDescription:[{ required: true, message: '请选择基础规则名称',trigger: ['blur'] },{
                        validator: (rule,value,callback)=>{
                            if(value.length>100){
                                callback(new Error('规则名称不能超过100字'));
                            }else{
                                callback();
                            }}, trigger: 'change'
                    }],
                    subType:[{ required: true, message: '请选择基础规则类型',trigger: ['blur'] }],
                    subLenCode:[{ required: true, message: '请选择基础规则术语类型',trigger: ['blur'] }],
                    subConceptId:[{ required: true, message: '请输入医学标准术语',trigger: ['blur'] }],
                    type:[{ required: true, message: '请选择类型',trigger: ['blur'] }],
                    subMaxOperator:[{ required: true, message: '请选择最大值操作符号',trigger: ['blur'] }],
                    subMaxValue:[{ required: true, message: '请输入最大值',trigger: ['blur'] }],
                    subMaxUnit:[{ required: true, message: '请输入最大值单位',trigger: ['blur'] }],
                    subMinOperator:[{ required: true, message: '请选择最小值操作符号',trigger: ['blur'] }],
                    subMinValue:[{ required: true, message: '请输入最小值',trigger: ['blur'] }],
                    subMinUnit:[{ required: true, message: '请输入最小值单位',trigger: ['blur'] }],
                    subEqValue:[{ required: true, message: '请输入医学内容',trigger: ['blur'] }],
                },
            }
        },
        watch:{
            'groupData':{
                handler:function(val){
                    this.$emit("changeVal",val,this.ind);
                },
                deep:true
            },
            'baseTypes':{
                handler:function(){
                    if(!this.groupData.subType){
                        this.baseTermTypeList =[];
                        return;
                    }
                    const obj = this.baseTypes.find((it)=>it.type===this.groupData.subType);
                    this.baseTermTypeList = obj.subMenuList;
                },
                deep:true
            },
            'firstPlace':function(val){
                if(!val)return;
                const sub = this.baseTypes.find((it)=>it.firstPlace===1);
                this.groupData.subType=sub.type;
                this.baseTermTypeList =sub.subMenuList;
                this.groupData.subLenCode=this.baseTermTypeList.find((it)=>it.firstPlace===1).code;
                this.conceptList=[val];
                this.groupData.subDescription=val.conceptName;
                this.groupData.subConceptId = val.conceptId;
                this.groupData.subConceptName = val.conceptName;
            }
        },
        created(){
            this.conceptList=[{conceptName:this.groupData.subLibName,conceptId:this.groupData.subConceptId}];
            if(this.groupData.subMaxOperator){
                this.dataType='1'
            }else if(this.groupData.subEqValue){
                this.dataType='2'
            }
        },
        methods:{
            subTypeChange(val){
                this.dataType='';
                this.groupData.subLibName='';
                if(!val){
                    this.baseTermTypeList =[];
                    return;
                }
                const obj = this.baseTypes.find((it)=>it.type===val);
                this.baseTermTypeList = obj.subMenuList;
            },
            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{
            border-top:2px solid #F5F5F5;
            padding: 15px 0 15px 21px;
            .add-btn {
                cursor: pointer;
                img {
                    vertical-align: middle;
                }
            }
        }
        .sub-condition-form{
            padding: 20px;
            position: relative;
            .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;
        }
    }
</style>