platformFront/src/components/qualityControl/AddQualityControlTemp.vue

<template>
    <div @click="closeSearch">
       <crumbs :title="title" :param="$route.params" linkTo="QualityControlTemp">
        </crumbs>
        <div class="contentWrapper">
            <div class="content">
                <el-form :model="form" :rules="rules" ref="form" class="selectHospital">
                    <el-form-item label="所属医院：" prop="hospital" class="formItem">
                        <el-select  v-model="form.hospital" placeholder="请选择医院"  :disabled="isEdit||isCopy" class="selectHospital" @change="changeHsopital">
                            <el-option v-for="item in hospitalList" :key="item.id" :label="item.name" :value="item.val"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属模块：" prop="moduleName" class="formItem">
                        <el-select  v-model="form.moduleName" placeholder="请选择所属模块"  :disabled="isEdit||isCopy" class="selectModule" @change="changeHsopital">
                            <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.val"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模块类型：" prop="moduleType" class="formItem widthLarge">
                        <el-select  v-model="form.moduleType" :disabled="form.hospital==='' || form.moduleName===''" placeholder="请选择模块类型"   @change="changeModuleType" class="selectModule">
                            <el-option v-for="item in moduleTypeList" :key="item.id" :label="item.recTypeDetail" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模板名称：" prop="tempName" class="formItem widthLarge">
                        <el-input v-model="form.tempName"  placeholder="请输入模板名称" disabled></el-input>
                    </el-form-item>
                     <el-form-item label="示例：" v-if="form.moduleType !==''" prop="example" class="formItem formExam">
                         <span class="exampleTxt">{{form.example}}</span>
                        <!-- <el-input v-model="form.example"  disabled placeholder="示例"></el-input> -->
                    </el-form-item>
                    <el-form-item label="模块内容：" prop="moduleInfo" class="formItem addCon">
                        <div class="moduleInfoItem" v-for="(item,index) in moduleInfoList">
                            <div class="orderBox">
                                <span class="el-icon-arrow-up order"  @click="upUnit(index)"></span>
                                <span  class="el-icon-arrow-down order" @click="downUnit(index)"></span> 
                            </div>
                            <div class="searchBox">
                                <el-input v-model.trim="item.searchName"  placeholder="搜索字段单元" @click="stopClick"  @input="searchFiled(index)">
                                </el-input>
                                <ul v-if="searchIndex == index &&  item.searchResult.length > 0" class="searchResultBox">
                                    <li class="searchItem" 
                                        v-for="searchItem in item.searchResult" 
                                        :title="searchItem.tagName"
                                        @click="selectSearchFiled(searchItem,index)"
                                    >
                                        {{searchItem.tagName}}
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <p>已选择字段：</p>
                                <div class="selectFiledBox">
                                     <div class="orderBox">
                                            <span class="el-icon-arrow-up order"  @click="upFiled(index)"></span>
                                            <span  class="el-icon-arrow-down order" @click="downFiled(index)"></span> 
                                        </div>
                                    <div class="selectFiled" v-for="(it,ii) in item.selectFiled">
                                        <span class="filedName" :class="{activeFiledName: item.activeIndex == ii}" @click="setActiveIndex(index,ii)">{{it.tagName}}
                                            <span class="el-icon-circle-close delFiled" @click="delSelected(ii,index)"></span>
                                        </span>
                                    
                                    </div>
                                </div>
                                
                            </div>
                            <span class="el-icon-circle-close delUnit" @click="delUnit(index)"></span>
                        </div>
                        <span  class="addUnit" >
                            <el-button  size="small" type="primary"  @click="addUnit">+单元组</el-button>
                        </span>
                    </el-form-item>
                </el-form>
                <el-button class="disclButn" size="small" type="primary" :disabled = 'saveDisable' @click="confirm('form')">确定</el-button>
            </div>
        </div>
        
    </div>
</template>
<script>
import api from '@api/qualityControl.js';
export default {
    name:"AddQualityControlTemp",
    data: function(){
        return {
            title: "模板维护-添加",
            isEdit:false,
            isCopy: false,
            saveDisable: false,
            form:{
                tempName: "",
                hospital:"",
                moduleName:"",
                moduleType:"",
                nameType:""
            },
            rules:{
                tempName:{ required: true, message: '请输入模块名称', trigger: ['blur', 'change']},
                hospital:{ required: true, message: '请选择医院', trigger: ['blur', 'change']},
                moduleName:{ required: true, message: '请选择所属模块', trigger: ['blur', 'change']},
                moduleType:{ required: true, message: '请选择模块类型   ', trigger: ['blur', 'change']},
                /*name:[{ required: true, message: '请输入显示名称',trigger: ['blur', 'change'] }],*/
            },
            searchIndex: -1,
            
            hospitalList:[],
            moduleList:[ ],
            moduleTypeList:[], //模块类型列表
            moduleInfoList:[
                // {   
                //     searchName:"",
                //     activeIndex: -1,
                //     searchResult:[
                //         // {
                //         //     name: "4姓名"
                //         // },
                //         // {
                //         //     name: "5职业"
                //         // },
                //         // {
                //         //     name: "6年龄"
                //         // }
                //     ],
                //     selectFiled:[
                        
                //     ]
                // }
            ]
        }
    },
    created(){
        this.getAllTypes();
        const {isCopy, isEdit, data } = this.$route.params
        if(isEdit || isCopy) {
            this.form.hospital = ''+data.hospitalId
            this.form.moduleName = ''+data.modeId
            if(isEdit){
                this.isEdit = isEdit;
                this.id = data.id
                this.title ="模板维护-修改"
               this.form.tempName = data.name
               this.getModuleTypeList().then(res =>{
                   this.form.moduleType = data.recordModuleId
                   this.form.example = this.moduleTypeList.find(item => item.id == this.form.moduleType).behospitalCodes
                })
            }
            if(isCopy){
                this.isEdit = isEdit;
                this.isCopy = isCopy
                this.id = ""
                this.title ="模板维护-复制"
                this.form.tempName = ""
                 this.form.moduleType=""
                 this.form.example=""
                 this.getModuleTypeList()
            }
            const moduleDetail = data.moduleDetail
            const keysList = Object.keys(moduleDetail)
            for(let i = 0; i < keysList.length; i++){
                let selectFiled = []
                for(let j = 0; j < moduleDetail[keysList[i]].length; j++){
                    const item =  moduleDetail[keysList[i]][j]
                    selectFiled.push(item.questionDTO)
                }
                this.moduleInfoList.push({
                    searchName:"",
                    activeIndex: -1,
                    searchResult:[
                    ],
                    selectFiled:selectFiled
                })
                
            }
          
            
        }
       
    },
    methods:{
        closeSearch(){
            if(this.searchIndex > -1){
                this.moduleInfoList[this.searchIndex].searchName = ""
                this.moduleInfoList[this.searchIndex].searchResult=[]
                this.searchIndex = -1
            }
            
        },
        getAllTypes(){
            if(localStorage.getItem("qcModuleTypes")){
                this.hospitalList = JSON.parse(localStorage.getItem("qcHospitalTypes"));
                this.moduleList = JSON.parse(localStorage.getItem("qcModuleTypes"));
                return new Promise(function(resolve, reject){
                    resolve()
                });
            }
            //获取枚举信息
            return api.getQcTypes().then((res)=>{
                if(res.data.code==="0"){
                    const data = res.data.data;
                    localStorage.setItem("qcFieldTypes",JSON.stringify(data[11]));
                    localStorage.setItem("qcModuleTypes",JSON.stringify(data[12]));
                    localStorage.setItem("qcHospitalTypes",JSON.stringify(data[13]));
                    this.hospitalList = JSON.parse(localStorage.getItem("qcHospitalTypes"));
                    this.moduleList = JSON.parse(localStorage.getItem("qcModuleTypes"));
                }else{
                    this.warning("获取枚举信息失败");
                }
            });
        },
        stopClick(e){
            console.log('11111')
            // e.stopPropagation()
        },
        changeHsopital(){
            this.form.moduleType = ""
            this.getModuleTypeList()
        },
        changeModule(){
             this.form.moduleType = ""
            this.getModuleTypeList()
        },
        changeModuleType(){
            this.form.example = this.moduleTypeList.find(item => item.id == this.form.moduleType).behospitalCodes
            this.form.tempName = this.moduleTypeList.find(item => item.id == this.form.moduleType).recTypeDetail
        },
        getModuleTypeList(){
            this.moduleTypeList = []
            if(this.form.hospital === "" || this.form.moduleName===""){
                return
            }
            return api.getModuleTypeList({hospitalId: this.form.hospital, modeId: this.form.moduleName}).then((res) =>{
                if(res.data.code==="0"){
                    const data = res.data.data;
                    this.moduleTypeList = data
                }else{
                    this.moduleTypeList=[]
                    this.warning("获取模块类型失败");
                }
            })
        },
        addUnit(){
            if(!this.form.hospital){
                this.warning("请先选择所属医院")
                return
            }
            if(!this.form.moduleName){
                this.warning("请先选择模块")
                return
            }
            this.moduleInfoList.push({   
                        searchName:"",
                        activeIndex: -1,
                        searchResult:[
                        ],
                        selectFiled:[
                           
                        ]
                    })
        },
        searchFiled(index){
            this.searchIndex = index
            const searchName = this.moduleInfoList[index].searchName
            if(!searchName){
                return
            }
            const param = {
                tagName: searchName,
                hospitalId: this.form.hospital,
                modeId:  [this.form.moduleName],
            }
            api.getQCName(param).then(res =>{
                if(res.data.code == '0'){
                     this.moduleInfoList[index].searchResult = []
                     this.moduleInfoList[index].searchResult.push(...res.data.data)
                }
            }).catch(e =>{
                console.log(e)
            })
          
        },
        selectSearchFiled(searchItem,index){
            this.moduleInfoList[index].selectFiled.push(searchItem)
            this.searchIndex = -1
            this.moduleInfoList[index].searchName=""
            this.moduleInfoList[index].searchResult = []
        },
        setActiveIndex(index, ii){
             let activeIndex = this.moduleInfoList[index].activeIndex
             if( ii === activeIndex) {
                 this.moduleInfoList[index].activeIndex = -1
             } else {
                 this.moduleInfoList[index].activeIndex = ii
             }
             
        },
        upUnit(index){
            if(index == 0){
                return
            }
            const current = this.moduleInfoList[index]
            const currentPre = this.moduleInfoList[index-1]
            this.moduleInfoList.splice(index-1,2,current,currentPre)
        },
        downUnit(index){
             if(index == this.moduleInfoList.length -1){
                return
            }
            const current = this.moduleInfoList[index]
            const currentNext = this.moduleInfoList[index+1]
            this.moduleInfoList.splice(index,2,currentNext,current)
        },
        upFiled(index){
            let activeIndex = this.moduleInfoList[index].activeIndex
            if(activeIndex == 0 || activeIndex == -1){
                return
            }
            const current = this.moduleInfoList[index].selectFiled[activeIndex]
            const currentPre = this.moduleInfoList[index].selectFiled[activeIndex-1]
            this.moduleInfoList[index].selectFiled.splice(activeIndex-1,2,current,currentPre)
            this.moduleInfoList[index].activeIndex--
        },
        downFiled(index){
             let activeIndex = this.moduleInfoList[index].activeIndex
            if(activeIndex == this.moduleInfoList[index].selectFiled.length -1 || activeIndex == -1){
                return
            }
            const current = this.moduleInfoList[index].selectFiled[activeIndex]
            const currentNext = this.moduleInfoList[index].selectFiled[activeIndex+1]
            this.moduleInfoList[index].selectFiled.splice(activeIndex,2,currentNext,current)
             this.moduleInfoList[index].activeIndex++

        },
        delSelected(ii,index){
            this.moduleInfoList[index].selectFiled.splice(ii,1)
           
        },
        delUnit(index){
             this.moduleInfoList.splice(index,1)
        },
        confirm(form){
            this.$refs[form].validate((valid) => {
                if (valid) {
                    const {tempName,hospital,moduleName,moduleType} = this.form
                    let moduleDetail = [], moduleInfoList = this.moduleInfoList
                    for(let i = 0; i < moduleInfoList.length; i++){
                       for(let j = 0; j < moduleInfoList[i].selectFiled.length; j++){
                            let item ={
                                groupId: i,
                                questionId: moduleInfoList[i].selectFiled[j].id
                            }
                            moduleDetail.push(item)
                       }
                        
                    }
                    if(moduleDetail.length === 0){
                        this.warning('请添加模块内容')
                        return
                    }
                     let param = {
                        name: tempName,
                        modeId: moduleName,
                        hospitalId: hospital,
                        moduleDetail: moduleDetail,
                        remark:'',
                        recordModuleId:moduleType
                     }
                     if(this.isEdit){
                         param = Object.assign({}, param, {id: this.id})
                     }
                    if(this.id && !this.isCopy){//修改
                   
                        this.saveDisable = true  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
                        api.saveOrUpdateQCTemp(param).then((res)=>{
                            if(res.data.code==0){
                            this.$message({
                                message:"修改成功",
                                type:'success'
                            });
                            //返回带搜索条件的首页
                            this.$router.push({
                                name: 'QualityControlTemp',
                                params: Object.assign({}, this.$route.params, {currentPage: 1})
                            });
                            }else{
                            this.$message({
                                message:res.data.msg,
                                type:'warning'
                            });
                            }
                            this.saveDisable = false
                        })
                    }else{//添加
                        this.saveDisable = true;  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
                        api.saveOrUpdateQCTemp(param).then((res)=>{
                            if(res.data.code==0){
                            this.$message({
                                message:"添加成功",
                                type:'success'
                            })
                            this.$router.push({name: 'QualityControlTemp'});
                            }else{
                            this.$message({
                                message:res.data.msg,
                                type:'warning'
                            });
                            }
                            this.saveDisable = false
                        })
                    }
                } else {
                    return false;
                }
            }); 
        },
        warning(msg, type,time) {
            this.$message({
                showClose: true,
                message: msg,
                type: type || 'warning',
                duration:time || '3000'
            })
        },
    }

}
</script>
<style lang="less" scoped>
.contentWrapper{
     padding: 50px 20px 0;
}
.content{
    background: #fff;
}
.formItem{
    /deep/.el-form-item__label{
        width: 150px;
    }
}
/deep/.el-form-item__content{
    display: inline-block;
}
/deep/.el-input__inner {
    height: 30px;
    line-height: 30px;
    width: 200px;
}
/deep/.widthLarge .el-input__inner {
    width: 350px;
}
/deep/.addCon .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}
.formExam{
    /deep/.el-form-item__content{
        width: calc(100% - 185px);
    }
}
.exampleTxt{
        display: inline-block;
        position: relative;
        width: 100%;
        max-height: 200px;
        padding: 0 20px 0 0;
        height: 100%;
        word-break: break-all;
        overflow-y: auto;
}
.moduleInfoItem{
    width: 500px;
    min-height: 200px;
    padding: 0 50px 0 50px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    margin-bottom: 20px;
    position: relative;
}
.addUnit{
    display: inline-block;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    width: 80px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}

.searchBox{
    width: 200px;
    position: relative;
}
.searchResultBox{
    position: absolute;
    width: 200px;
    box-sizing: border-box;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    z-index: 2;
    border: 1px solid #48c5d7;
}
.searchItem{
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.searchItem:hover{
    background-color: #F5F7FA;
}
.selectFiled{
    position: relative;
}
.orderBox{
    position: absolute;
    left: -50px;
    top: 50%;
    width: 50px;
    height: 84px;
    margin-top: -42px;
}
.selectFiledBox{
    position: relative;
    min-height: 120px;
}
.order{
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 30px;
    margin-left: 5px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
   
}
.firstItem{
    margin-left: 28px;
}
.delUnit,.delFiled{
    position: absolute;
    top: -8px;
    right: -6px;
    cursor: pointer;
}
.delFiled{
    top: -7px;
    right: -9px;
}
.filedName{
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px 10px;
    display: inline-block;
    line-height: 20px;
}
.activeFiledName{
    border: 1px solid #48C5D7;
}
</style>