eta_front/src/views/approve_manage/components/flowNode/approveNode.vue

<template>
    <div class="approve-node-wrap node-wrap">
        <div class="node-content">
            <div class="head">
                <span class="icon"></span>
                <span class="name">{{$t('SystemManage.ReportApprove.reviewer')}}</span>
                <span class="icon-btn" @click="removeNode"><i class="el-icon-close"></i></span>
            </div>
            <div class="content" @click="showDrawer">
                <ul class="approver-list" v-if="flowNode.approvers.length">
                    <li class="list-item" v-for="(item,index) in flowNode.approvers" :key="item.NodeIdKey">
                        {{item.NodeName}}{{index===flowNode.approvers.length-1?'':'、'}}
                    </li>
                </ul>
                <span v-else style="color:#0052D9;display: flex;align-items: center;">
                    <img src="~@/assets/img/approve_m/select.png">
                    {{$t('SystemManage.ReportApprove.placeholder03')}}
                </span>
            </div>
        </div>
        <AddNode :node="flowNode" v-on="$listeners"/>
        <el-drawer
            direction="rtl"
            :visible.sync="drawerShow"
            :withHeader="true"
            :modal-append-to-body="false"
            >
            <div class="approve-drawer-wrap">
                <div class="header">
                    <p>{{$t('SystemManage.ReportApprove.approver_set')}}</p>
                    <span class="close-icon" @click="drawerShow=false" style="cursor: pointer;"><i class="el-icon-close"></i></span>
                </div>
                <div class="drawer-content">
                    <div class="block">
                        <p>{{$t('SystemManage.ReportApprove.select_appriver')}}</p>
                        <div class="choose-box">
                            <el-radio v-model="block1" :label="1">{{$t('SystemManage.ReportApprove.designate_personnel')}}</el-radio>
                            <el-button @click="chooseDialogShow=true" type="primary">
                                <i class="el-icon-circle-plus-outline" style="margin-right: 5px;"></i>
                                {{$t('SystemManage.ReportApprove.select_user')}}
                            </el-button>
                        </div>
                        <draggable 
                            v-model="choosedList"
                            animation="300"
                            tag="ul"
                            class="approve-list">
                            <li class="list-item" v-for="item in choosedList" :key="item.NodeIdKey">
                                <span class="name">{{item.NodeName}}</span>
                                <span class="icon-btn">
                                    <i class="el-icon-close" @click.stop="removeChoosedItem(item)"></i>
                                </span>
                            </li>
                        </draggable>
                    </div>
                    <div class="line"></div>
                    <div class="block" style="margin-top:30px;">
                        <p>{{$t('SystemManage.ReportApprove.mutl_person')}}</p>
                        <el-radio-group v-model="approveType">
                            <!-- <el-radio :label="1">
                                {{$t('SystemManage.ReportApprove.approval_type01')}}
                                <el-tooltip effect="dark" placement="top" :content="$t('SystemManage.ReportApprove.des01')" >
                                    <span class="hint-text">
                                        <i class="el-icon-info"></i>
                                    </span>
                                </el-tooltip>
                            </el-radio> -->
                            <el-radio :label="2">
                                {{$t('SystemManage.ReportApprove.approval_type02')}}
                                <el-tooltip effect="dark" placement="top" :content="$t('SystemManage.ReportApprove.des02')" >
                                    <span class="hint-text">
                                        <i class="el-icon-info"></i>
                                    </span>
                                </el-tooltip>
                            </el-radio>
                            <el-radio :label="3">
                                {{$t('SystemManage.ReportApprove.approval_type03')}}
                                <el-tooltip effect="dark" placement="top" :content="$t('SystemManage.ReportApprove.des03')" >
                                    <span class="hint-text">
                                        <i class="el-icon-info"></i>
                                    </span>
                                </el-tooltip>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="drawer-btn">
                    <el-button type="primary" plain @click="drawerShow=false">{{$t('Dialog.cancel_btn')}}</el-button>
                    <el-button type="primary" @click="editApproveNode">{{$t('Dialog.confirm_btn')}}</el-button>
                </div>
            </div>
        </el-drawer>
        <!-- 选择人员弹窗 -->
        <el-dialog 
            :title="$t('SystemManage.ReportApprove.select_user')"
            width="600px"
            :visible.sync="chooseDialogShow"
            :modal-append-to-body="false"
            :append-to-body="false"
            @close="chooseDialogShow=false"
        >
            <div class="dialog-wrap">
                <TreeTransfer 
                    ref="tree-trans"
                    :defaultList="choosedList"
                    :chooseDialogShow="chooseDialogShow"
                />
            </div>
            <div class="dialog-btn">
                <el-button type="primary" plain @click="chooseDialogShow=false">{{$t('Dialog.cancel_btn')}}</el-button>
                <el-button type="primary" @click="getChoosedList">{{$t('Dialog.confirm_btn')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TreeTransfer from '../treeTransfer';
import draggable from 'vuedraggable';
import AddNode from './addNode';
export default {
    props:{
        flowNode:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            drawerShow: false,
            block1: 1,
            approveType: 3,
            chooseDialogShow: false,
            choosedList:[]
        };
    },
    watch:{
        drawerShow(val){
            if(val){
                this.choosedList = _.cloneDeep(this.flowNode.approvers||[])
                this.approveType = this.flowNode.ApproveType
            }
        }
    },
    methods: {
        removeNode() {
            this.$emit('removeNode', this.flowNode);
        },
        showDrawer() {
            this.drawerShow = true;
        },
        getChoosedList(){
            if(!this.$refs["tree-trans"].choosedList.length){
                this.$message.warning(this.$t('SystemManage.ReportApprove.warning_msg01'))
                return
            }
            this.choosedList = _.cloneDeep(this.$refs["tree-trans"].choosedList)||[]
            this.chooseDialogShow = false
        },
        removeChoosedItem(item){
            const index = this.choosedList.findIndex(i=>i.NodeIdKey===item.NodeIdKey)
            index!==-1&&this.choosedList.splice(index,1)
        },
        editApproveNode(){
            const node = _.cloneDeep(this.flowNode)
            node.approvers = _.cloneDeep(this.choosedList)
            node.ApproveType = this.approveType
            this.$emit('editNode',node)
            this.drawerShow = false
        },
    },
    components: { TreeTransfer, draggable, AddNode }
};
</script>

<style lang="scss">
.approve-node-wrap{
    .el-drawer__body{
        overflow: hidden;
    }
    #el-drawer__title{ //drawer弹出时会自动聚焦第一个元素,设置无内容的title清除聚焦状态
        height:0px;
        margin:0px;
        padding:0px;
    }
    .dialog-btn{
        margin-top:60px;
        padding-bottom: 40px;
        text-align: center;
    }
}
</style>
<style scoped lang="scss">
.approve-node-wrap{
    .head{
        background-color: #0052D9;
        .icon{
            background-image: url('~@/assets/img/approve_m/approve.png');
        }
        .icon-btn{
            font-size: 20px;
        }
    }
    .content{
        .approver-list{
            color:#0052D9;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
    .approve-drawer-wrap{
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* font-weight: bold; */
            font-size: 18px;
            height:35px;
            padding:20px;
            border-bottom: 1px solid #C8CDD9;
        }
        .drawer-content{
            flex:1;
            overflow-y: auto;
            box-sizing: border-box;
            padding:30px;
            .block{
                min-height: 340px;
                .choose-box{
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }
            .line{
                margin:0 -30px;
                height: 1px;
                background-color:#C8CDD9;
            }
            .approve-list{
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                gap:10px;
                .list-item{
                    cursor: move;
                    padding:8px;
                    border-radius: 4px;
                    border:1px solid #C8CDD9;
                    .icon-btn{
                        cursor: pointer;
                    }
                }
            }
            .el-radio-group{
                margin-top: 20px;
                .el-radio{
                    display: block;
                    margin-bottom: 10px;
                    .hint-text{
                        color:#C0C4CC;
                    }

                }
            }
        }
        .drawer-btn{
            text-align: center;
            margin:10px;
        }
    }
    
}
</style>