platformFront/src/components/icss/AddCommonSymptom.vue

<!-- 添加常见科室选项  -->
<template>
    <div class="addCommonSymptomWrapper">
         <crumbs
          :title="'常见选项维护系统-' + titleText"
          class="topBack"
          linkTo="CommonSymptom"
        ></crumbs>
        <el-form :model="form" ref="ruleForm" :rules="rules" class="addDepartForm">
           
             <el-form-item label="选择类型" prop="type">
                <el-select :disabled="isEdit || isDetail" v-model="form.type" placeholder="请选择类型"  @change="changeType" class="selectDepart">
                    
                    <el-option v-for="item in typeList" :key="item.key" :label="item.name" :value="item.key"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择科室" prop="department">
                <el-select :disabled="isEdit || isDetail || !form.type" v-model="form.department" placeholder="请添加科室" @change="changeDept" 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>
        <div class="symptomList">
            <div class="bottomPartLeft fl" v-if="!isDetail">
                
                <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" v-if="!isDetail">
                <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='isDetail ? "":selectRightTag(index)'
                        >   
                            <p v-if="item.tagName" class="tagName  ellipsis" :title="'[ '+item.tagName+' ]'">{{item.tagName}} </p>
                        </li>
                    </ul>

            </div>
            <div class="bottomPartMid fl" v-if="!isDetail">
                <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:''
            },
            titleText: '添加科室常见选项',
            departList: [],
            typeList:[
                //  {
                //     "name": "症状",
                //     "key": 1
                // },
            ],
            searchVal: '',
            isEdit: false,
            isDetail: false,
            leftTagsList:[],
            rightTagsList:[],
            selectLeftTagsList: [],
            selectRightTagIndex: -1,
            styles:{
                background:'#eae7e7'
            },
        }
    },
    created(){
        const { isEdit, isDetail, data } = this.$route.params;
        if(isEdit || isDetail) {
            if(isEdit) {
                this.titleText = '修改科室常见选项'
            } else {
                this.titleText = '科室常见选项详情'
            }
            console.log('datadata', data)
            this.isEdit = isEdit
            this.isDetail = isDetail
            this.rightTagsList = data.data
            this.departList.push({name: data.name, id: data.id})
            this.typeList.push({name: data.typeName, key: data.type})
            this.form.department =data.id
            this.form.type =data.type
            this.getSymptomList()
            
        } else {
            this.getDepartmentList()
            this.getIcssEnumsData()
        }
    },
    watch: {
        searchVal(newVal, preVal) {
            if(newVal.trim() == ''){
                this.getSymptomList()
            }else if(newVal.trim() != preVal.trim()){
                this.getSymptomList()
            }
        }
    },
    methods: {
        back(){
            this.$router.go(-1);
        },
        getIcssEnumsData()  {
            api.getIcssEnumsData().then((res) => {
                if(res.data.code === '0') {
                   this.typeList = res.data.data.questionUsualTypeEnum
                }
            })
        },
        getDepartmentList() {
            const param = {
                "type": this.form.type
            }
            api.getDepartmentList(param).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,
                "type": this.form.type,
                "notTagType": [8],
            }
            api.getSymptomList(param).then((res)=>{
               if(res.data.code === '0') {
                   this.leftTagsList = res.data.data
                }
            })
        },
        changeDept() {
            this.getSymptomList()
            this.clearData()
        },
        changeType() {
            this.form.department = ''
            this.getDepartmentList()
            this.clearData()
        },
        clearData() {
            this.leftTagsList = [];
            this.rightTagsList = [];
            this.selectLeftTagsList = [];
            this.selectRightTagIndex = -1;
        },
        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.getSymptomList()
        },
        toLeftList(){
            if(this.selectRightTagIndex == -1) {
                return
            }
            this.rightTagsList.splice(this.selectRightTagIndex, 1)
            this.selectLeftTagsList = [];
            this.selectRightTagIndex -= 1;
            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) {
            if(this.isDetail) {
                this.$router.push({
                        path:'/admin/LT-YXSJWH-CJXXWH'
                })
                return;
            }
            const valided = this.$refs[formName].validate((valid, callback) => {
                if (valid) {
                    return
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
             if(!this.form.department || !this.form.type) {
                return 
            }
            if(this.rightTagsList.length === 0) {
                this.warning('请选择常见选项标签')
                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,
                "type": this.form.type,
   
            }
            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-CJXXWH'
                    })
                    }, 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 {
        .topBack {
            top: 0;
        }
        .groupTitle {
            background-color: #fff;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
        }
        .addDepartForm {
            background-color: #fff;
            padding: 20px;
            margin: 70px 20px 0px 20px;
            border-bottom: 1px solid #c0c4cc;
        }
        .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%;
        }
        .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>