kpi_vue_pc/src/customworkflow/drawer/promoterDrawer.vue

<!--
@ 作者: 秦东
@ 时间: 2023-03-20 15:40:05
@ 备注: 发起人节点选择操作条件
-->
<template><!--发起人节点抽屉选项-->
    <el-drawer :append-to-body="true" title="发起人" :visible.sync="promoterDrawer" direction="rtl" class="set_promoter" size="550px" :before-close="savePromoter">
        <div class="demo-drawer__content">
            <div class="promoter_content drawer_content">
                <p>{{$func.arrToStr(flowPermission)?$func.arrToStr(flowPermission):'所有人'}}</p>
                <el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
            </div>
            <div class="demo-drawer__footer clear">
                <el-button type="primary" @click="savePromoter">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
            <employeesDialog
                :isDepartment="true"
                :visible.sync="promoterVisible"
                :data.sync="checkedList"
                @change="surePromoter"
            />
        </div>
    </el-drawer>
</template>
<script>
import employeesDialog from '@/customworkflow/dialog/employeesDialog'
import { mapState, mapMutations } from 'vuex'
export default {
    components: { employeesDialog },
    data() {
        return {
            flowPermission: [],
            promoterVisible: false,
            checkedList: [],
        }
    },
    computed: {
        ...mapState(['promoterDrawer', 'flowPermission1']),
    },
    watch: {
        flowPermission1(val) {
            this.flowPermission = val.value
        }
    },
    created(){
        
    },
    methods:{
        ...mapMutations(['setPromoter', 'setFlowPermission']),
        //保存设定
        savePromoter(){
            this.setFlowPermission({
                value: this.flowPermission,
                flag: true,
                id: this.flowPermission1.id
            })
            this.closeDrawer()
        },
        //添加修改发起人
        addPromoter() {
            console.log("this.flowPermission--->",this.flowPermission);
            this.checkedList = this.flowPermission
            this.promoterVisible = true;
        },
        //取消设定
        closeDrawer() {
            this.setPromoter(false)
        },
        surePromoter(data) {
            this.flowPermission = data;
            this.promoterVisible = false;
        },
    }
}
</script>
<style lang="less">
.set_promoter {
    .promoter_content {
        padding: 0 20px;

        .el-button {
            margin-bottom: 20px;
        }

        p {
            padding: 18px 0;
            font-size: 14px;
            line-height: 20px;
            color: #000000;
        }
    }
}
</style>