hxgksystemapp/src/components/workflow/drwer/copyerDrawer.vue

<!--
@ 作者: 秦东
@ 时间: 2023-10-11 11:02:24
@ 备注: 抄送配置
-->
<script lang='ts' setup>
import employeesDialog from '@/components/workflow/dialog/employeesDialog.vue'
import $func from '@/utils/workflow/index'
import { useStore } from '@/store/workflow/index' 
let copyerConfig = ref({})
let ccSelfSelectFlag = ref([])
let copyerVisible = ref(false)
let checkedList = ref([])
let store = useStore()
let { setCopyerConfig, setCopyer } = store
let copyerDrawer = computed(()=> store.copyerDrawer)
let copyerConfig1 = computed(()=> store.copyerConfig1)
let visible = computed({
    get() {
        return copyerDrawer.value
    },
    set() {
        closeDrawer()
    }
})
watch(copyerConfig1, (val) => {
    copyerConfig.value = val.value;
    ccSelfSelectFlag.value = copyerConfig.value.ccSelfSelectFlag == 0 ? [] : [copyerConfig.value.ccSelfSelectFlag]
})

const addCopyer = () => {
    copyerVisible.value = true;
    checkedList.value = copyerConfig.value.nodeUserList
}
const sureCopyer = (data:any) => {
	// console.log("保存选中人",data)
    copyerConfig.value.nodeUserList = data;
    copyerVisible.value = false;
}
const saveCopyer = () => {
    copyerConfig.value.ccSelfSelectFlag = ccSelfSelectFlag.value.length == 0 ? 0 : 1;
    copyerConfig.value.error = !$func.copyerStr(copyerConfig.value);
    setCopyerConfig({
        value: copyerConfig.value,
        flag: true,
        id: copyerConfig1.value.id
    })
    closeDrawer();
}
const closeDrawer = () => {
    setCopyer(false)
}    
</script>
<template>
	<el-drawer v-model="visible" :append-to-body="true" title="抄送人设置" class="set_copyer" :show-close="false" :size="550" :before-close="saveCopyer"> 
		<div class="demo-drawer__content">
			<div class="copyer_content drawer_content">
                <el-button type="primary" @click="addCopyer">添加成员</el-button>
                <!-- <p class="selected_list">
                    <span v-for="(item,index) in copyerConfig.nodeUserList" :key="index">{{item.name}}
                        <img src="@/assets/images/add-close1.png" @click="$func.removeEle(copyerConfig.nodeUserList,item,'targetId')">
                    </span>
                    <a v-if="copyerConfig.nodeUserList&&copyerConfig.nodeUserList.length!=0" @click="copyerConfig.nodeUserList=[]">清除</a>
                </p> -->

				<p  class="selected_list">
					<el-tag  v-for="(item,index) in copyerConfig.nodeUserList" :key="index" closable type="info" effect="plain" class="tag_us" @close="$func.removeEle(copyerConfig.nodeUserList,item,'targetId')">{{item.name}}</el-tag>
					<el-tag v-if="copyerConfig.nodeUserList&&copyerConfig.nodeUserList.length!=0" type="danger" effect="dark" @click="copyerConfig.nodeUserList=[]">清除</el-tag>
                </p>

                <el-checkbox-group v-model="ccSelfSelectFlag" class="clear">
                    <el-checkbox :label="1">允许发起人自选抄送人</el-checkbox>
                </el-checkbox-group>
            </div>
			<div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveCopyer">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
			<employees-role-dialog 
                v-model:visible="copyerVisible"
                :data="checkedList"
                @change="sureCopyer"
            />
		</div>
	</el-drawer>
</template>
<style  lang='scss' scoped>
.set_copyer {
    .copyer_content {
        padding: 20px 20px 0;

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

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

.approver_some .el-radio-group {
  display: block;
}

.approver_some .el-radio {
  display: block;
}
.set_promoter{
    .approver_content {
        padding-bottom: 10px;
        border-bottom: 0px solid #f2f2f2;
		.el-radio{
			width:auto;
		}
    }
	.approver_manager,.approver_self_select,.approver_some,.approver_self{
		border-top: 1px solid #f2f2f2;
	}
    .approver_self_select,
    .approver_content{
        .el-button{
            margin-bottom: 20px;
        }
    }
    .approver_content,
    .approver_some,
    .approver_self_select{
        .el-radio-group{
            display: unset;
        }
        .el-radio{
            width: 27%;
            margin-bottom: 20px;
            height: 16px;
        }
    }
    .approver_manager p {
        line-height: 32px;
    }
    .approver_manager select {
        width: 420px;
        height: 32px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
    }
    .approver_manager p.tip {
        margin: 10px 0 22px 0;
        font-size: 12px;
        line-height: 16px;
        color: #f8642d;
    }
    .approver_self {
        padding: 28px 20px;
    }
    .approver_self_select,
    .approver_manager,
    .approver_content,
    .approver_some {
        padding: 20px 20px 20px 20px;
    }
    .approver_manager p:first-of-type,
    .approver_some p {
        line-height: 19px;
        font-size: 14px;
        margin-bottom: 14px;
    }
    .approver_self_select h3 {
        margin: 5px 0 20px;
        font-size: 14px;
        font-weight: bold;
        line-height: 19px;
    }
}
.selected_list{
	margin: 0;
    line-height: 0;
	.tag_us{
		margin-right: 10px;
	}
	span{
		margin-top: 10px;
	}
	a{
		margin-top: 15px;
	}
}

</style>