platformFront/src/components/knowledgeExtra/AddDiagBase.vue

<template>
    <div>
        <crumbs :title="title" :param="$route.params" linkTo="ZskDiagBase"></crumbs>
        <div class="contents">
            <div class="content">
                <el-form ref="form" :label-position="labelPosition" class="add-new-form" label-width="150px" :model="form" :rules="rules">
                    <el-form-item label="疾病名称：" prop="conceptId">
                        <el-select clearable remote filterable :remote-method="searchDiag" v-model.trim="form.conceptId">
                            <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 label="诊断依据描述：" prop="description" class="description">
                        <el-input type="textarea" :rows="3" placeholder="请输入诊断依据描述" v-model.trim="form.description"></el-input>
                    </el-form-item>
                    <el-form-item label="诊断依据内容：" prop="remind" class="discDesc is-required">
                        <DiagBaseType v-for="(group,i) in form.klDiagnoseTypeVO"
                                       ref="groups"
                                       :data="group"
                                       :inx="i"
                                       :isLast="form.klDiagnoseTypeVO.length===1"
                                       @setRules="setRules"
                                       @addDiag="addDiag"
                                       @copyDiag="copyDiag"
                                       @delDiag="delDiag"></DiagBaseType>
                    </el-form-item>
                    <el-button class="disclButn" size="small" type="primary" @click="confirm">保存</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    import api from '@api/zskDiagBase.js';
    import DiagBaseType from './DiagBaseType'
    export default {
        name:'AddZskDiagBase',
        data(){
            return{
                labelPosition:'left',
                isCopy:false,
                title:'诊断依据维护-添加诊断依据',
                conceptName:'',
                conceptList:[],
                form:{
                    description:'',
                    conceptId:'',
                    klDiagnoseTypeVO:[{conditionType:'',groupVO:[{
                            "baseGroup": '',
                            "conditionGroup": '',
                            "fitNo": '',
                            "klDiagnoseDetail": [{
                                "basConceptId": '',
                                "basDescription": "",
                                "basLename": "",
                                "basLibName": "",
                                "basLibType":null,
                                "basType": '',
                                "eqOperator": "",
                                "eqUnit": "",
                                "eqValue": "",
                                "maxOperator": "",
                                "maxUnit": "",
                                "maxVal": "",
                                "minOperator": "",
                                "minUnit": "",
                                "minVal": ""
                            }]
                        }]}],
                },
                id:null,
                rules:{
                    conceptId:[{ required: true, message: '请输入疾病名称',trigger: ['change'] }],
                    description:[{
                        validator: (rule,value,callback)=>{
                            if(value.length>100){
                                callback(new Error('诊断依据描述不能超过100字'));
                            }else{
                                callback();
                            }}, trigger: 'change'
                    }],
                }
            }
        },
        created(){
            const param = this.$route.params;
            let info = param.data;
            if(info){
                this.id = info.id;
                this.isCopy=param.copy;
                this.title = "诊断依据维护-"+(this.isCopy?'复制':'修改')+"诊断依据";
                this.conceptList = [{conceptId:info.conceptId,conceptName:info.conceptName}];
                this.form=Object.assign({},this.form,this.formatData(info));
                if(this.isCopy){
                    this.conceptList =[];
                    delete this.form.conceptName;
                    delete this.form.conceptId;
                    delete this.form.description;
                    delete this.form.id;
                }
                console.log(info)
            }
            this.setRules()
        },
        watch:{
        },
        components:{
            DiagBaseType
        },
        computed:{

        },
        methods:{
            formatData(data){       //转换字段名
                let str = JSON.stringify(data).replace(/byIdDTO/g,"groupVO").replace(/klDiagnoseByIdDTO/g,"klDiagnoseDetail");
                return JSON.parse(str);
            },
            setRules(){
                let that=this;
                let list=this.form.klDiagnoseTypeVO;
                if(list&&list.length>0){
                    list.forEach((item,i)=>{
                        let list1=list[i].groupVO;
                        that.rules['klDiagnoseTypeVO.'+i+'.conditionType']=[{required: true, message: '请选择诊断依据类型',trigger: ['change'] }];
                        list1.forEach((it,x)=>{
                            that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.fitNo']=[{required: true, message: '请选择符合条件的数量',trigger: ['change'] }];
                            let list2=list1[x].klDiagnoseDetail;
                            list2.forEach((t,j)=>{
                                const grandeObj = this.form.klDiagnoseTypeVO[i].groupVO[x].klDiagnoseDetail[j];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.basDescription']=[{required: true, message: '请输入基础依据名称',trigger: ['blur'] }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.basType']=[{ required: true, message: '请选择基础依据类型',trigger: ['change'] }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.basLibType']=[{ required: true, message: '请选择基础依据术语类型',trigger: ['change'] }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.basConceptId']=[{ required: true, message: '请输入医学标准术语',trigger: ['change'] }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.dataType']=[{ required: true, message: '请选择类型',trigger: ['change'] }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.maxOperator']=[{
                                    validator: (rule,value,callback)=>{
                                        const {maxVal,minOperator,minVal}=grandeObj;
                                        const val=value+minOperator+minVal+maxVal;
                                        if(!val||(!value&&maxVal!=='')){
                                            callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                                        }else{
                                            callback();
                                        }}, trigger: 'blur'
                                }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.minOperator']=[{
                                    validator: (rule,value,callback)=>{
                                        const {maxVal,maxOperator,minVal}=grandeObj;
                                        const val=value+maxOperator+minVal+maxVal;
                                        if(!val||(!value&&minVal!=='')){
                                            callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                                        }else{
                                            callback();
                                        }}, trigger: 'blur'
                                }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.maxVal']=[{
                                    validator: (rule,value,callback)=>{
                                        const {maxOperator,minOperator,minVal}=grandeObj;
                                        const val=value+maxOperator+minVal+minOperator;
                                        const isNum=/^(\-|\+)?\d+(\.\d+)?$/.test(value);
                                        if(!val||(value==''&&maxOperator)){
                                            callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                                        }else if(value!==''&&!isNum){
                                            callback(new Error('只能输入数字'));
                                        }else{
                                            callback();
                                        }}, trigger: 'blur'
                                }]
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.minVal']=[{
                                    validator: (rule,value,callback)=>{
                                        const {maxVal,minOperator,maxOperator}=grandeObj;
                                        const val=value+maxOperator+maxVal+minOperator;
                                        const isNum=/^(\-|\+)?\d+(\.\d+)?$/.test(value);
                                        if(!val||(value==''&&minOperator)){
                                            callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
                                        }else if(value!==''&&!isNum){
                                            callback(new Error('只能输入数字'));
                                        }else{
                                            callback();
                                        }}, trigger: 'blur'
                                }];
                                that.rules['klDiagnoseTypeVO.'+i+'.groupVO.'+x+'.klDiagnoseDetail.'+j+'.eqValue']=[{
                                    validator: (rule,value,callback)=>{
                                        if(value===''){
                                            callback(new Error('不能为空~'));
                                        }else if(value.length>200){
                                            callback(new Error('不能超过200字'));
                                        }else{
                                            callback();
                                        }}, trigger: 'blur'
                                }];
                            });
                        });
                    })
                }
            },
            formatGroupDatas(data){
                let arr=[];
                return arr;
            },
            searchDiag(val){
                const param = {
                    diseaseName:val,
                };
                api.searchDiag(param).then((res) => {
                    if (res.data.code == '0') {
                        const data = res.data.data;
                        this.conceptList = data;
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            getInitData(){
                return {conditionType:'',groupVO:[{
                        "baseGroup": '',
                        "conditionGroup": '',
                        "fitNo": '',
                        "klDiagnoseDetail": [{
                            "basConceptId": '',
                            "basDescription": "",
                            "basLename": "",
                            "basLibName": "",
                            "basLibType": null,
                            "basType": '',
                            "eqOperator": "",
                            "eqUnit": "",
                            "eqValue": "",
                            "maxOperator": "",
                            "maxUnit": "",
                            "maxVal": "",
                            "minOperator": "",
                            "minUnit": "",
                            "minVal": ""
                        }]
                    }]}
            },
            setInitGroupData(){
                let temp = this.getInitData();
                this.form.klDiagnoseTypeVO = [temp];
            },
            addDiag(){
                let temp = this.getInitData();
                this.form.klDiagnoseTypeVO.push(temp);
                this.setRules();
            },
            copyDiag(i){
                let temp = JSON.parse(JSON.stringify(this.form.klDiagnoseTypeVO[i]));
                this.form.klDiagnoseTypeVO.splice(i,0,temp);
                this.setRules();
            },
            delDiag(i){
                this.form.klDiagnoseTypeVO.splice(i,1);
            },
            saveDiagBase(params){
                api.saveDiagBase(params).then((res)=>{
                    if(res.data.code==0){
                        this.$message({
                            message:"操作成功",
                            type:'success'
                        });
                        this.$router.push({name: 'ZskDiagBase'});
                    }else{
                        this.$message({
                            message:res.data.msg,
                            type:'warning'
                        });
                    }
                })
            },
            validateForms(callBack){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        callBack();
                    } else {
                        return false;
                    }
                });
            },
            confirm(){
                const _this=this;
                this.validateForms(function(){
                    let params = _this.form;

                    _this.saveDiagBase(params);
                });
            },
        }
    }
</script>
<style lang="less">
    @import "../../less/admin.less";
    .content{
        background: #fff;
        // padding: 20px 20px 30px;
        padding: 20px 20px 50px;
        color: #545455;
        min-width: 980px;
        position: relative;
        .tip-text{
            color:#F56C6C;
            margin-left: 10px;
        }
        .conceptItem{
            padding: 0 10px;
            cursor: pointer;
            height: 32px;
            line-height: 32px;
            &:hover{
                background: #ebedf1;
            }
        }
        .discDesc{
            margin-bottom: 20px;
            .el-form-item__error{
                top: 9px;
                left:200px;
                white-space: nowrap;
                background: #fff;
            }
        }
        .disclButn{
            position: absolute;
            right: calc(50% - 60px);
            bottom: 10px;
        }
    }
    .description .el-form-item__error{
        top:auto;
    }
    .add-new-form{
        .el-form-item__label{
            text-align: right;
        }
        .addDepartFormItem {
            position: relative;
        }
        .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;
        }
        .indexList {
            left: 42px;
            top: 78px;
        }
        .el-input__prefix, .el-input__suffix{
            /*top:-2px;*/
            right: 3px;
        }
        .el-input--suffix .el-input__inner{
            padding-right: 22px;
        }
        .el-input,.el-input__inner{
            width: 190px;
            line-height: 32px;
            height: 32px;
        }
        .el-input__icon{
            line-height: 32px;
        }
    }

</style>