platformFront/src/components/icss/AddChronicAndIndexRelation.vue

<!-- 添加常见科室症状  -->
<template>
    <div class="AddChronicAndIndexRelationWrapper">
        <!-- <div class="groupTitle"><i
            class="el-icon-back"
            @click="back"
        ></i> 量表管理维护--{{titleText}}</div> -->
        <crumbs
          :title="'慢病指标值关联维护-'+titleText"
          class="topBack"
          linkTo="/admin/LT-YXSJWH-MBZBZGLWH"
        ></crumbs>
        <el-form :model="form" ref="ruleForm"  class="addDepartForm">
            <el-form-item  class="addDepartFormItem"  v-if="!isEdit" label="选择诊断标签：" prop="department">
                <input class="searchInput"  @focus="focuInput" type="text" v-model = "searchDiagVal"> 
                <span class="searchName" @click="searchDiag">搜索</span>
                <ul class="itemList diagList" ref="diagList">
                    <li 
                    v-for="item in diagList" 
                    class="diagItem ellipsis"
                    :title="item.diseaseName"
                    @click="selectDiag(item)"
                    :key="item.diseaseId">
                    {{item.diseaseName}}
                    </li>
                </ul>
            </el-form-item>
             <el-form-item class="isRequired" label="已选择诊断：" prop="type">
                {{form.diseaseName}}
            </el-form-item>
        </el-form>
        <div class="symptomList">
            <div class="screenIndex clearfix">
                    <label class="screenIndexLabel">选择指标项内容：</label>
                    <input class="searchInput"  @focus="focuInput" type="text" v-model = "searchIndexVal"> 
                    <span class="searchName" @click="searchIndex">搜索</span>
                    <ul class="itemList indexList" ref="indexList">
                        <li 
                        v-for="item in indexList" 
                        class="diagItem ellipsis"
                        :title="item.conceptName"
                        @click="selectIndex(item)"
                        :key="item.conceptName">
                        {{item.conceptName}}
                        </li>
                    </ul>
            </div>
            <table class="indexTab">
                
                <tr>
                    <td class="selectedContent">已选择内容</td>
                    <td class="selectedContentGrop">已选内容分组（只可输入数字，相同数字归为一组展示）</td>
                    <td class="selectedContentOpera">操作</td>
                </tr>
                <tr v-for="(item, index) in selectedIndexList" :key="item.indexUnique"> 
                    <td class="selectedContent ">{{item.indexUnique}}</td>
                    <td class="selectedContentGrop"><input class="groupInput" type="number" v-model="item.indexDesc"></td>
                    <td class="selectedContentOpera"><el-button type="text" size="small" class="delete" @click="delSelectedIndex(item, index)">删除</el-button></td>
                </tr>
            </table>
        </div>
        <div class="btn">
            <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            >确 定</el-button>
        </div>
    </div>
    
</template>

<script>
  import api from '@api/icss.js';
  export default {
    name: 'AddDisAndScaleRelationWrapper',
    data() {
        return{
            
            form: {
                diseaseId: '',  //诊断id
                diseaseName:''  //诊断名称
            },
            titleText: '添加关联',
            diagList: [],
            indexList: [],
            selectedIndexMap: [],   //已经选择过的指标
            selectedIndexList: [],  //选择的指标列表
            searchDiagVal: '',
            searchIndexVal: '',
            isEdit: false,
        }
    },
    created(){
        const { isEdit, data } = this.$route.params;
        if(isEdit) {
            if(isEdit) {
                this.isEdit = isEdit;
                this.titleText = '修改关联';
                this.form.diseaseId = data.diseaseId
                this.form.diseaseName = data.diseaseName
                this.selectedIndexList = data.data
                for (let i = 0; i < this.selectedIndexList.length; i++) {
                    this.selectedIndexMap.push(this.selectedIndexList[i].indexUnique)
                }
            } 
        } else {
            
        }
    },
    watch: {
        // searchTagVal(newVal, preVal) {
        //     if(newVal.trim() == ''){
        //         this.getTagList()
        //     }else if(newVal.trim() != preVal.trim()){
        //         this.getTagList()
        //     }
        // }
    },
    methods: {
        back(){
            this.$router.go(-1);
        },
        searchDiag() {
            const param = {
                "diseaseName": this.searchDiagVal,
            }
            api.queryIndexConfigDiseaseNames(param).then((res)=>{
               if(res.data.code === '0') {
                   this.diagList = res.data.data
                   if(this.diagList.length>0) {this.$refs['diagList'].style.display = 'block'}
                   if(this.indexList.length>0) {this.$refs['indexList'].style.display = 'none'}
                }
            })
        },
        selectDiag(item) {
            this.form.diseaseId = item.diseaseId
            this.form.diseaseName = item.diseaseName
            this.$refs['diagList'].style.display='none'
            this.searchDiagVal = ''
            this.diagList=[]
        },
        focuInput() {
            this.$refs['diagList'].style.display='none'
             this.$refs['indexList'].style.display='none'
            
        },
        searchIndex() {
             const param = {
                conceptName: this.searchIndexVal,
                excludedConceptNames:  this.selectedIndexMap
            }
            
            api.getAllLisConcept(param).then((res)=>{
               if(res.data.code === '0') {
                   this.indexList = res.data.data
                    // this.indexList =[
                    //     {conceptName : '空腹血糖'},
                    //     {conceptName : '餐后2小时血糖'},
                    //     {conceptName : '随机血糖'},
                    //     {conceptName : '糖化血红蛋白'},
                    //     {conceptName : '血常规'},
                    // ]
                   if(this.indexList.length > 0){this.$refs['indexList'].style.display='block'}
                   if(this.diagList.length>0) {this.$refs['diagList'].style.display = 'none'}
                }
            })
        },
        selectIndex(item) {
            this.selectedIndexList.push({indexUnique: item.conceptName, indexDesc:''})
            this.selectedIndexMap.push(item.conceptName)
            this.indexList = []
            this.$refs['indexList'].style.display='none'
        },
        delSelectedIndex(selectedItem, index) {
            this.selectedIndexMap = this.selectedIndexMap.filter((item) => {return item != selectedItem.indexUnique})
            this.selectedIndexList.splice(index, 1)
        },
        submitForm(formName) {
            if(!this.form.diseaseId) {
                this.warning('请选择诊断')
                return
            }
            if(this.selectedIndexList.length === 0) {
                this.warning('请选择指标')
                return
            }
            for (let i = 0; i < this.selectedIndexList.length; i++) {
                if(!this.selectedIndexList[i].indexDesc) {
                    this.warning('请填写内容分组')
                    return
                }
            }
            this.showDelDialog()
        },
        showDelDialog() {
            this.selectedIndexList.map((item) => {
                item.diseaseId = this.form.diseaseId
                return item
            })
            const param ={
                "diseaseId": this.form.diseaseId,
                "indexConfigData": this.selectedIndexList
            }
            this.showConfirmDialog('是否建立该关联？', () => {
                const  url = this.isEdit ?api.updateIndexConfigList(param) : api.saveIndexConfigLists(param) 
                url.then((res) => {
                if (res.data.code  === '0') {
                    this.warning(res.data.msg || '关联成功', 'success','1000')
                    setTimeout(() => {
                    this.$router.push({
                        path:'/admin/LT-YXSJWH-MBZBZGLWH'
                    })
                    }, 1000);
                } else {
                    this.warning(res.data.msg)
                }
                }).catch((err) => {
                    this.warning(err);
                })
            });
        },
        showConfirmDialog(msg, resolve) {
            this.$alert(msg, '提示', {
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {
                resolve();
            }).catch(() => {});
        },
        warning(msg, type,time) {
            this.$message({
                showClose: true,
                message: msg,
                type: type || 'warning',
                duration:time || '3000'
            })
        },
    }
  }
</script>

<style lang="less">
    @import '../../less/common.less';
    .AddChronicAndIndexRelationWrapper {
        color: #606266;
        .topBack {
            top: 0;
        }
        .groupTitle {
            background-color: #fff;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
        }
        
        .searchInput, .searchName {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            border: 1px solid #a9a9a9;
            margin: 0px 0 0 0;
            padding: 0 5px;
            float: left;
            margin-top: 4px;
        }
        .isRequired .el-form-item__label::before {
            content: '*';
            color: red;
        }
        .searchName {
            border-left: none;
            cursor: pointer;
            font-size: 16px;
            padding: 0 14px;
        }
        .itemList {
            position: absolute;
            display: none;
            background: #fff;
            width: 162px;
            max-height: 150px;
            border: 1px solid #a9a9a9;
            left: 110px;
            top: 35px;
            z-index: 2;
            overflow-y: auto;
        }
        .diagItem {
            padding: 0 5px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            cursor: pointer;
        }
        .diagItem:hover {
            background: #f5f7fa;
        }
        .addDepartForm {
            position: relative;
            background-color: #fff;
            padding: 20px;
            margin: 70px 20px 0px 20px;
            border-bottom: 1px solid #c0c4cc;
        }
        .addDepartFormItem {
            position: relative;
        }
        .symptomList {
            background-color: #fff;
             padding: 20px;
             margin: 0px 20px 0px 20px;
             min-height: 400px;
        }
        .screenIndexLabel {
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }
        .indexTab {
            width: 100%;
            border-collapse: collapse;
            tr {
                td {
                    padding: 5px 10px;
                    border-bottom: 1px solid #a9a9a9;
                    text-align: center;
                }
            }
            .selectedContent {
                width: 25%;
            }
            .selectedContentGrop {
                width: 55%;
            }
            .selectedContentOpera {
                width: 20%;
            }
        }
        .screenIndex {
            width: 100%;
            margin-bottom: 30px;
            position: relative;
        }
        .indexList {
            left: 112px;
        }
        .groupInput {
            text-align: center;
            height: 28px;
            color: #606266;
            width: 60%;
        }
        .btn {
            position: relative;
            background-color: #fff;
            margin: 0px 20px;
            height: 40px;
            padding: 20px;
            .el-button {
                position: absolute;
                right: 20px;
            }
        }
        .selectDepart {
            
        }
    }
    
</style>