platformFront/src/components/icss/AddDisAndScaleRelation.vue

<!-- 添加常见科室症状  -->
<template>
    <div class="addDisAndScaleRelationWrapper">
        <!-- <div class="groupTitle"><i
            class="el-icon-back"
            @click="back"
        ></i> 量表管理维护--{{titleText}}</div> -->
        <crumbs
          :title="'量表管理维护-'+titleText"
          class="topBack"
          linkTo="/admin/LT-YXSJWH-LBGLWH"
        ></crumbs>
        <el-form :model="form" ref="ruleForm"  class="addDepartForm">
            <el-form-item  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.tagName"
                    @click="selectDiag(item)"
                    :key="item.id">
                    {{item.tagName}}
                    </li>
                </ul>
            </el-form-item>
             <el-form-item class="isRequired" label="已选择诊断：" prop="type">
                {{form.disName}}
            </el-form-item>
        </el-form>
        <div class="symptomList">
            <div class="bottomPartLeft fl">
                
                <p class="symptomPoolTitle">标签池</p>
                <div class="symptomPool">
                    <el-input
                    placeholder="请输入搜索内容"
                    v-model="searchTagVal"
                    >
                        <i
                            slot="prefix"
                            class="el-input__icon el-icon-search"
                        ></i>
                    </el-input>
                    <ul class="tagList tagPool">
                        <li v-for="(item, index) in leftTagsList"
                            class = "tagItem"
                            :key='item.id'
                            :title="'[ '+item.tagName+' ]'"
                            :style="getStyle(item)?styles:null"
                            @click='selectLeftTag(item, index)'
                        >
                            <p class="tagName ellipsis" >{{item.tagName}} </p>
                        </li>
                    </ul>
                </div>

            </div>
            <div class="bottomPartMid fl">
                <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
                <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
            </div>
            <div class="bottomPartRight fl">
                <p class="symptomPoolTitle">已选内容：</p>
                <ul class="tagList operationPool">
                        <li class = "tagItem"
                            v-for="(item,index) in rightTagsList" 
                            :key='item.id'
                            :style="index === selectRightTagIndex?styles:null"
                            @click='selectRightTag(index)'
                        >   
                            <p v-if="item.tagName" class="tagName  ellipsis" :title="'[ '+item.tagName+' ]'">{{item.tagName}} </p>
                        </li>
                    </ul>

            </div>
            <div class="bottomPartMid fl" >
                <p><span class="el-icon-arrow-up" @click="toUp"></span></p>
                <p><span class="el-icon-arrow-down" @click="toDown"></span></p>
            </div>
            
        </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: {
                disId: '',  //诊断id
                disName:''  //诊断名称
            },
            titleText: '添加量表关联',
            diagList: [],
            searchDiagVal: '',
            searchTagVal: '',
            isEdit: false,
            leftTagsList:[],
            rightTagsList:[],
            selectLeftTagsList: [],
            selectRightTagIndex: -1,
            styles:{
                background:'#eae7e7'
            },
        }
    },
    created(){
        const { isEdit, data } = this.$route.params;
        if(isEdit) {
            if(isEdit) {
                this.titleText = '修改量表关联'
            } 
            data.data.map((item) => {
                item.id = item.scaleId
                item.tagName = item.scaleName
                return item
            })
            this.isEdit = isEdit
            this.rightTagsList = data.data
            this.form.disId =data.disId
            this.form.disName =data.disName
            this.getTagList()
            
        } else {
            this.getTagList()
            
        }
    },
    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 = {
                "tagName": this.searchDiagVal,
                "type": '7',
            }
            api.searchTagList(param).then((res)=>{
               if(res.data.code === '0') {
                   this.diagList = res.data.data
                   if(this.diagList.length > 0){ this.$refs['diagList'].style.display='block' }
                }
            })
        },
        selectDiag(item) {
            this.form.disId = item.id
            this.form.disName = item.tagName
            this.$refs['diagList'].style.display='none'
            this.searchDiagVal = ''
            this.diagList=[]
        },
        focuInput() {
            this.$refs['diagList'].style.display='none'
        },
        getTagList() {
            const notIds = this.selectedTags()
            const param = {
                "tagName": this.searchTagVal,
                "type": '21',
                "notIds": notIds,
                "sexType": this.sexType,
            }
            api.searchTagList(param).then((res)=>{
               if(res.data.code === '0') {
                   this.leftTagsList = res.data.data
                }
            })
        },
        selectedTags() {
            let selectedTags = []
            for (let i =0; i < this.rightTagsList.length; i++) {
                selectedTags.push(this.rightTagsList[i].id)
            }
            return selectedTags
        },
        selectLeftTag(tag, index, e) {
            const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
            if (hasTag) {
                this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
            } else {
                this.selectLeftTagsList.push(tag);
            }
        },
        selectRightTag(index) {
            this.selectRightTagIndex = this.selectRightTagIndex === index ? -1 : index
        },
        toRightList(){
            this.rightTagsList.push(...this.selectLeftTagsList);
            this.selectLeftTagsList = [];
            this.selectRightTagIndex = -1;
            this.getTagList()
        },
        toLeftList(){
            if(this.selectRightTagIndex == -1) {
                return
            }
            this.rightTagsList.splice(this.selectRightTagIndex, 1)
            this.selectLeftTagsList = [];
            this.selectRightTagIndex -= 1;
            this.getTagList()

        },
        toUp(){
            if(this.selectRightTagIndex === 0 || this.selectRightTagIndex === -1) {
                return
            }
            const tempItem = this.rightTagsList[this.selectRightTagIndex]
            this.rightTagsList.splice(this.selectRightTagIndex, 1)
            this.rightTagsList.splice(this.selectRightTagIndex-1, 0,tempItem)
            this.selectRightTagIndex -= 1
        },
        toDown(){
             if(this.selectRightTagIndex === this.rightTagsList.length-1 || this.selectRightTagIndex === -1) {
                return
            }
            const tempItem = this.rightTagsList[this.selectRightTagIndex]
            this.rightTagsList.splice(this.selectRightTagIndex, 1)
            this.rightTagsList.splice(this.selectRightTagIndex+1, 0,tempItem)
            this.selectRightTagIndex += 1

        },

        isHasTag(item, arr) {
            for ( let i = 0; i <arr.length; i++) {
                if(arr[i].id === item.id) {
                    return true;
                }
            }
            return false;
        },
        getStyle(item){       //左侧选中状态
            return this.isHasTag(item, this.selectLeftTagsList)
        },
        getStyle2(item) {
            return this.isHasTag(item, this.selectRightTagsList)
        },
        submitForm(formName) {
            if(!this.form.disId) {
                this.warning('请选择诊断')
                return
            }
            if(this.rightTagsList.length === 0) {
                this.warning('请选择量表')
                return
            }
            this.showDelDialog()
        },
        showDelDialog() {
            const scaleId = this.selectedTags()
            const param ={
                "disId": this.form.disId,
                "scaleId": scaleId
            }
            this.showConfirmDialog('是否建立该关联？', () => {
                api.addDisScaleInfo(param).then((res) => {
                if (res.data.code  === '0') {
                    this.warning(res.data.msg || '关联成功', 'success','1000')
                    setTimeout(() => {
                    this.$router.push({
                        path:'/admin/LT-YXSJWH-LBGLWH'
                    })
                    }, 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';
    .addDisAndScaleRelationWrapper {
        color: #606266;
        font-size: 14px;
        .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 #dcdfe6;
            margin: 0px 0 0 0;
            padding: 0 5px;
        }
        .isRequired .el-form-item__label::before {
            content: '*';
            color: red;
        }
        .searchName {
            border-left: none;
            cursor: pointer;
            padding: 0 14px;
        }
        .itemList {
            position: absolute;
            display: none;
            background: #fff;
            width: 162px;
            max-height: 150px;
            border: 1px solid #dcdfe6;
            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 {
            background-color: #fff;
            padding: 20px;
            margin: 70px 20px 0px 20px;
            border-bottom: 1px solid #dcdfe6;
        }
        .symptomList {
            background-color: #fff;
             padding: 20px;
             margin: 0px 20px 0px 20px;
             height: 500px;
        }
        .bottomPartLeft {
            width: 32%;
        }
        .symptomPoolTitle {
            height: 40px;
            line-height: 40px;
        }
        .symptomPool {
            width: 100%;
            .el-input__inner {
                border-radius: 0;
            }
        }
        .tagList {
            width: 100%;
            height: 300px;
            border: 1px solid @icssBorder;
            box-sizing: border-box;
        }
        .tagList {
            border: 1px solid @icssBorder;
        }
        .tagPool {
            height: 300px;
            overflow-y: auto;

        }
        .tagItem {
            position: relative;
            line-height: 30px;
            cursor: pointer;
            padding: 0 10px;
        }
        .tagName:before {
            content: '['
        }
        .tagName::after {
            content: ']'
        }
        .bottomPartMid {
            width: 8%;
            margin-top: 60px;
            p {
            width: 100%;
            text-align: center;
            span {
                cursor: pointer;
                display: inline-block;
                width: 30px;
                height: 40px;
                line-height: 40px;
                margin: 0 auto;
                border: 1px solid @icssBorder;
                margin-bottom: 15px;
                font-size: 18px;
            }
            }
        }
        .bottomPartRight {
            width: 32%;
        }
        .operationPool {
            position: relative;
            width: 100%;
            height: 340px;
            padding: 10px 0;
            overflow-y: auto;
        }
        .btn {
            position: relative;
            background-color: #fff;
            margin: 0px 20px;
            padding: 20px;
            .el-button {
                position: absolute;
                right: 20px;
                top: -20px;
            }
        }
        .selectDepart {
            
        }
    }
    
</style>