platformFront/src/components/icss/AddCommonSymptom.vue

<!-- 添加常见科室症状  -->
<template>
    <div class="addCommonSymptomWrapper">
        <div class="groupTitle"><i
            class="el-icon-back"
            @click="back"
        ></i> 常见症状维护系统--添加科室常见症状</div>
        <el-form :model="form" ref="ruleForm" :rules="rules" class="addDepartForm">
            <el-form-item label="选择科室" prop="department">
                <el-select v-model="form.department" placeholder="请添加科室" class="selectDepart">
                    <el-option v-for="item in departList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="选择类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择类型" class="selectDepart">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="symptomList">
            <div class="bottomPartLeft fl">
                
                <p class="symptomPoolTitle">症状池</p>
                <div class="symptomPool">
                    <el-input
                    placeholder="请输入搜索内容"
                    v-model="searchVal"
                    >
                        <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: 'AddCommonSymptom',
    data() {
        return{
            rules: {
                department:[{required: true, message: '请选择科室', trigger: ['blur']}],
                type:[{required: true, message: '请选择科室', trigger: ['blur']}]
            },
            form: {
                department: '',
                type:''
            },
            departList: [],
            typeList:[],
            searchVal: '',
            leftTagsList:[],
            rightTagsList:[],
            selectLeftTagsList: [],
            selectRightTagIndex: -1,
            styles:{
                background:'#eae7e7'
            },
        }
    },
    created(){
        this.getDepartmentList()
        this.getSymptomList()
    },
    watch: {
        searchVal(newVal, preVal) {
            if(newVal.trim() == ''){
                this.getSymptomList()
            }else if(newVal.trim() != preVal.trim()){
                this.getSymptomList()
            }
        }
    },
    methods: {
        back(){
            this.$router.go(-1);
        },
        getDepartmentList() {
            api.getDepartmentList().then((res)=>{
               if(res.data.code === '0') {
                   this.departList = res.data.data
                   
                }
            })
        },
        getSymptomList() {
            let noIds = []
            for (let i =0; i < this.rightTagsList.length; i++) {
                noIds.push(this.rightTagsList[i].id)
            }
            const param = {
                "deptId": this.form.department,
                "tagName": this.searchVal,
                "noIds": noIds
            }
            api.getSymptomList(param).then((res)=>{
               if(res.data.code === '0') {
                   this.leftTagsList = res.data.data
                }
            })
        },
        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.selectRightTagsList = [];
            this.getSymptomList()
        },
        toLeftList(){
            for(let i = 0; i < this.selectRightTagsList.length; i++) {
                this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
            }
            this.selectLeftTagsList = [];
            this.selectRightTagsList = [];
            this.getSymptomList()

        },
        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) {
           
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    return
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
             if(!this.form.department) {
                return 
            }
            this.showDelDialog()
        },
        showDelDialog() {
            let questionId = []
            for (let i =0; i < this.rightTagsList.length; i++) {
                questionId.push(this.rightTagsList[i].id)
            }
            const param ={
                "deptId": this.form.department,
                "questionId": questionId
   
            }
            this.showConfirmDialog('是否保存该标签组？', () => {
                api.addCommonSymptom(param).then((res) => {
                if (res.data.code  === '0') {
                    this.warning(res.data.msg || '保存成功', 'success','1000')
                    setTimeout(() => {
                    this.$router.push({
                        path:'/admin/LT-YXSJWH-CJZZWH'
                    })
                    }, 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';
    .addCommonSymptomWrapper {
        .groupTitle {
            background-color: #fff;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
        }
        .addDepartForm {
            background-color: #fff;
            padding: 20px;
            margin: 20px 20px 0px 20px;
        }
        .symptomList {
            background-color: #fff;
             padding: 20px;
             margin: 20px 20px 0px 20px;
             height: 500px;
        }
        .bottomPartLeft {
            width: 32%;
        }
        .symptomPoolTitle {
            height: 40px;
            line-height: 40px;
        }
        .symptomPool {
            width: 100%;
        }
        .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;
        }
        .btn {
            position: relative;
            background-color: #fff;
            margin: 0px 20px;
            padding: 20px;
            .el-button {
                position: absolute;
                right: 20px;
                top: -20px;
            }
        }
        .selectDepart {
            
        }
    }
    
</style>