platformFront/src/components/qualityControl/AddQualityControlTemp.vue

<template>
    <div>
       <crumbs :title="title" linkTo="QualityControlTemp">
        </crumbs>
        <div class="contentWrapper">
            <div class="content">
                <el-form :model="form" :rules="rules" ref="form" class="selectHospital">
                    <el-form-item label="模板名称：" prop="tempName" class="formItem">
                        <el-input v-model="form.tempName"  placeholder="请输入模板名称"></el-input>
                    </el-form-item>
                    <el-form-item label="所属医院：" prop="hospital" class="formItem">
                        <el-select  v-model="form.hospital" placeholder="请选择医院"  class="selectHospital">
                            <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="请选择模块"  class="selectModule">
                            <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="moduleInfo" class="formItem">
                        <div class="moduleInfoItem" v-for="(item,index) in moduleInfoList">
                            <div class="searchBox">
                                <el-input v-model.trim="item.searchName"  placeholder="搜索字段单元" @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.name"
                                        @click="selectSearchFiled(searchItem,index)"
                                    >
                                        {{searchItem.name}}
                                    </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.name}}
                                            <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" @click="addUnit">+单元组</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:"",
                module:"",
            },
            rules:{
                tempName:{ required: true, message: '请输入模块名称', trigger: ['blur', 'change']},
                hospital:{ required: true, message: '请选择医院', trigger: ['blur', 'change']},
                moduleName:{ required: true, message: '请输入选择模块', trigger: ['blur', 'change']},
                /*name:[{ required: true, message: '请输入显示名称',trigger: ['blur', 'change'] }],*/
            },
            searchIndex: -1,
            
            hospitalList:[],
            moduleList:[ ],
            moduleInfoList:[
                {   
                    searchName:"",
                    activeIndex: -1,
                    searchResult:[
                        // {
                        //     name: "4姓名"
                        // },
                        // {
                        //     name: "5职业"
                        // },
                        // {
                        //     name: "6年龄"
                        // }
                    ],
                    selectFiled:[
                        
                    ]
                }
            ]
        }
    },
    created(){
        this.getAllTypes();
        // if(isEdit){
        //     // this.id = 
        // }
    },
    methods:{
        getAllTypes(){
        if(localStorage.getItem("qcModuleTypes")){
            this.hospitalList = JSON.parse(localStorage.getItem("qcHospitalTypes"));
            this.moduleList = JSON.parse(localStorage.getItem("qcModuleTypes"));
            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]));
            }else{
            this.warning("获取枚举信息失败");
            }
        });
        },
        addUnit(){
            if(!this.form.hospital){
                this.warning("请先选择所属医院")
                return
            }
            if(!this.form.modeId){
                this.warning("请先选择模块")
                return
            }
            this.moduleInfoList.push({   
                        searchName:"",
                        activeIndex: -1,
                        searchResult:[
                           
                        ],
                        selectFiled:[
                            {
                                name: "姓名1"
                            },
                            {
                                name: "职业1"
                            },
                            {
                                name: "年龄1"
                            }
                        ]
                    })
        },
        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
             }
             
        },
        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} = 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)
                       }
                        
                    }
                     let param = {
                        name: tempName,
                        modeId: moduleName,
                        hospitalId: hospital,
                        moduleDetail: moduleDetail,
                        remark:''
                     }
                     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;
}
.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;
}
.addUnit:hover{
    background: blue;
    color: #fff;
}
.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 #dcdfe6;
}
.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;
}
.activeFiledName{
    border: 1px solid #48C5D7;
}
</style>