platformFront/src/components/icss/AddPhysicalExamTemp.vue

<!-- 添加常见科室症状  -->
<template>
    <div class="AddPhysicalExamTempWrapper">
        <crumbs
                :title="'查体模板维护系统-'+titleText"
                class="topBack"
                :param="$route.params"
                linkTo="PhysicalExamTemplate"
        ></crumbs>
        <el-form :model="form" ref="ruleForm" :rules="rules" class="addDepartForm">
            <el-form-item label="模板归属："  >
               <span>查体</span>
            </el-form-item>
            <el-form-item label="选择科室" prop="department">
                <el-select :disabled="isEdit || isDetail" v-model="form.department" placeholder="请添加科室" @change="changeDepart" 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">查体模板： 
                    <span v-if="!isDetail" class="el-icon-arrow-right arrowIcon" @click="toDown"></span>
                    <span v-if="!isDetail" class="el-icon-arrow-left arrowIcon" @click="toUp"></span> 
                </p>
                <ul class="tagList operationPool">
                        <li class = "tagItem fl"
                            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>
        <div class="btn">
            <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :disabled = 'saveDisable'
            >确 定</el-button>
        </div>
    </div>
    
</template>

<script>
  import api from '@api/icss.js';
  export default {
    name: 'AddPhysicalExamTempWrapper',
    data() {
        return{
            rules: {
                department:[{required: true, message: '请选择科室', trigger: ['blur', 'change']}],
            },
            form: {
                department: '',
            },
            titleText: '添加模板',
            departList: [],
            searchVal: '',
            leftTagsList:[],
            rightTagsList:[],
            selectLeftTagsList: [],
            isEdit: false, 
            isDetail: false,
            selectRightTagIndex: -1,
            styles:{
                background:'#eae7e7'
            },
            saveDisable: false  //保存按钮禁止点击
        }
    },
    created(){
        const { isEdit, isDetail, data } = this.$route.params;
        if(isEdit || isDetail) {
            if(isEdit) {
                this.titleText = '修改模板'
            } else {
                this.titleText = '模板详情'
            }
            const { deptId, name } = data
            this.isEdit = isEdit
            this.isDetail = isDetail
            this.rightTagsList = data.vitals
            this.departList.push({ id:deptId, name, val:deptId })
            this.form.department = deptId
            
        } else {
            this.getDepartmentList()
        }
        
        this.getTagList()
    },
    watch: {
        searchVal(newVal, preVal) {
            if(newVal.trim() == ''){
                this.getTagList()
            }else if(newVal.trim() != preVal.trim()){
                this.getTagList()
            }
        }
    },
    methods: {
        getDepartmentList() {
            api.getPhysicalExamTempDepartList().then((res)=>{
               if(res.data.code === '0') {
                   this.departList = res.data.data
                   
                }
            })
        },
        getTagList() {
                const notIds = this.getRightTagListIds()
                let param = {
                "tagName": this.searchVal,
                "type": 4,
                "notIds": notIds,
                "notTagType": [8],
            }
            api.searchTagList(param).then((res) => {
                if (res.data.code === '0') {
                    this.leftTagsList = res.data.data
                }
            })
            
        },
        getRightTagListIds() {
            let RightTagListIds = []
            for (let i =0; i < this.rightTagsList.length; i++) {
                RightTagListIds.push(this.rightTagsList[i].id)
            }
            return RightTagListIds
        },
        changeDepart(){
            this.getTagList()
        },
        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.isDetail) {
                this.$router.push({
                        path:'/admin/LT-YXSJWH-CTMBWH'
                })
                return
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    return
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
             if(!this.form.department) {
                return 
            }
            this.showDelDialog()
        },
        showDelDialog() {
            let dvDetailVOList = []
            const deptName = this.departList.filter(item => item.id == this.form.department)[0].name
            for (let i =0; i < this.rightTagsList.length; i++) {
                dvDetailVOList.push({orderNo: i+1,vitalId:this.rightTagsList[i].id , remark: `${deptName}-${this.rightTagsList[i].tagName}`})
            }
            const param ={
                "deptId": this.form.department,
                "dvDetailVOList": dvDetailVOList
   
            }
            if(dvDetailVOList.length === 0) {
                this.warning('查体模板不能为空');
                return
            }
            this.showConfirmDialog('是否保存该模板？', () => {
                this.saveDisable = false  //提交保存按钮不可点击，返回结果时才可点击，防止频繁发送请求
                api.savePhysicalExamTemp(param).then((res) => {
                if (res.data.code  === '0') {
                    this.warning(res.data.msg || '保存成功', 'success','1000')
                    setTimeout(() => {
                      //返回带搜索条件的首页
                    this.$router.push({
                      name: 'PhysicalExamTemplate',
                      params: Object.assign({}, this.$route.params, {currentPage: 1})
                    })
                    }, 1000);
                } else {
                    this.warning(res.data.msg)
                }
                this.saveDisable = true
                }).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';
    .AddPhysicalExamTempWrapper {
        .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;
            }
            }
        }
        .arrowIcon {
             cursor: pointer;
            display: inline-block;
            width: 40px;
            height: 30px;
            line-height: 30px;
            border: 1px solid @icssBorder;
            font-size: 18px;
            text-align: center;
            margin-right: 15px;
            .fr

        }
        .bottomPartRight {
            width: 52%;
        }
        .operationPool {
            position: relative;
            width: 100%;
            height: 340px;
            padding: 10px 0;
            overflow: auto;
        }
        .btn {
            position: relative;
            background-color: #fff;
            margin: 0px 20px;
            padding: 20px;
            .el-button {
                position: absolute;
                right: 20px;
                top: -20px;
            }
        }
        .selectDepart {
            
        }
    }
    
</style>