gdy_pc_8/src/newPerformance/components/IndicatorSetting.vue

<template>
    <div class="all">
        <div class="create-methods flex-box-ce">

            <div class="flex-box-ce">
                <div class="method-item" v-for="(item, index) in methods"
                    :class="currentIndex === index ? 'active' : ''" :key="item.id"
                    @click="changeMethod(item.id, index)">
                    {{ item.title }}
                </div>
            </div>
            <el-tooltip effect="dark" content="教程指引" placement="top">
                <div class="icon flex-center-center" @click="initStepData()">
                    <i class="el-icon-document"></i>
                </div>
            </el-tooltip>
        </div>


        <div class="setting-content flex-1" v-if="method == 1">
            <UploadPublish2 ref="UploadPublish2" />
        </div>

        <div class="setting-content flex-1" v-if="method == 2">
            <UploadPublish />
        </div>
        
        <el-dialog :visible.sync="dialogVisible" title="已创建的指标库" center width="600px">
            <div class="dialog-content">
                <template v-if="templateList.length > 0">
                    <div class="flex-box-ce template-item" v-for="(item, index) in templateList" :key="index">
                        <div class="flex-box flex-1" @click="chooseTemplate(item)">
                            <div style="width: 20px;"><i class="el-icon-tickets blue"></i></div>
                            <span class="message-content">{{ item.title || '默认标题' }}</span>
                        </div>

                        <div>
                            <el-popconfirm confirm-button-text='确定' cancel-button-text='不用了' icon="el-icon-info"
                                icon-color="red" title="确定删除这个考核模板吗？" @confirm="confirmDelete(item.templateId)"
                                @cancel="cancelDelete()">
                                <el-link slot="reference" type="danger">删除</el-link>
                            </el-popconfirm>
                        </div>
                    </div>
                </template>
                <noData v-else content="暂无内容" imgW="120px" imgH="120px"></noData>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import TemplateDetails from './IndicatorSetting/TemplateDetails.vue';
import PublishComp from './IndicatorSetting/PublishComp.vue';
import TemplateMixedPublish from './IndicatorSetting/TemplateMixedPublish.vue';
import UploadPublish from './IndicatorSetting/UploadPublish.vue';
import UploadPublish2 from './IndicatorSetting/UploadPublish2.vue';
import indicatorSettingStep from "@/newPerformance/utils/indicatorSettingStep"
import introJs from 'intro.js'
import 'intro.js/introjs.css'
export default {
    components: {
        TemplateDetails,
        PublishComp,
        TemplateMixedPublish,
        UploadPublish,
        UploadPublish2
    },
    data() {
        return {
            dialogVisible: false,
            currentIndex: 0,
            methods: [
                // { id: 0, title: "方式1：手动创建指标" },
                { id: 1, title: "方式1：快速创建" },
                { id: 2, title: "方式2：批量导入指标" },
            ],
            method: 1,
            loading: false,
            templateList: [],
            step: 0,
            activeIndex: 1,
            templateId: "",
        }
        
    },

    watch: {
        step(v) {
            this.activeIndex = v + 1
        }
    },

    computed: {
        ...mapGetters(['user_info'])
    },


    mounted() {
        this.$nextTick(() => {
            if (!localStorage.getItem("isLearned")) {
                this.startGuide()
            }
        })
    },

    created() {
    },

    methods: {

        startGuide() {
            introJs().setOptions({
                nextLabel: '下一个',  // 下一个按钮文字
                prevLabel: '上一个',  // 上一个按钮文字
                skipLabel: '跳过',    // 跳过按钮文字
                doneLabel: '立即体验',// 完成按钮文字
                tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */
                highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
                exitOnEsc: true, /* 是否使用键盘Esc退出 */
                exitOnOverlayClick: false, /* 是否允许点击空白处退出 */
                keyboardNavigation: true, /* 是否允许键盘来操作 */
                showBullets: false, /* 是否使用点显示进度 */
                showProgress: false, /* 是否显示进度条 */
                scrollToElement: true, /* 是否滑动到高亮的区域 */
                overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
                positionPrecedence: ['bottom', 'top', 'right', 'left'], /* 当位置选择自动的时候，位置排列的优先级 */
                disableInteraction: false, /* 是否禁止与元素的相互关联 */
                hidePrev: true, /* 是否在第一步隐藏上一步 */
                hidePrev: false,       // 在第一步中是否隐藏上一个按钮
                hideNext: false,       // 在最后一步中是否隐藏下一个按钮
                exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍
                showStepNumbers: false,     // 是否显示红色圆圈的步骤编号
                disableInteraction: true,   // 是否禁用与突出显示的框内的元素的交互，就是禁止点击
                showBullets: true,        // 是否显示面板指示点
                // 配置内容 steps数组,内部一个对象代表一个步骤
                steps: indicatorSettingStep
            }).onbeforechange((e) => {
                console.log(e)
                // if (e.className.includes("choose-btn")) {
                //     this.$refs.UploadPublish2.openTemplate()
                // }
            }).oncomplete(function () {
                //点击跳过按钮后执行的事件
                localStorage.setItem("isLearned", true)
            }).onexit(function () {
                //点击结束按钮后， 执行的事件
                localStorage.setItem("isLearned", true)
            }).start()
        },

        // 开启教程指引
        initStepData() {
            setTimeout(() => {
                this.startGuide();
            }, 300)
        },

        changeMethod(id, index) {
            this.method = id;
            this.currentIndex = index;
        },
        chooseTemplate(item) {
            this.templateId = item.templateId
            this.step = 1;
            this.dialogVisible = false;
        },
        getTemplateList() {
            this.$axiosUser("get", `/performance/template/list/self/${this.user_info.site_id}`).then(res => {
                this.templateList = res.data.data.list;
            })
        },

        addTemplate() {
            this.$axiosUser('post', `/performance/template/create/${this.user_info.site_id}`).then(res => {
                let { data: { data, code } } = res
                if (code == 1) {
                    this.$axiosUser("get", `/performance/template/list/self/${this.user_info.site_id}`).then(res => {
                        this.templateList = res.data.data.list
                        this.templateId = this.templateList[this.templateList.length - 1].templateId;
                        this.$message.success("创建成功")
                        this.step = 1;
                    })
                }
            });
        },


        // 确认删除模板
        confirmDelete(templateId) {
            this.$axiosUser('post', `/performance/template/remove/${this.user_info.site_id}/${templateId}`).then(res => {
                this.$axiosUser("get", `/performance/template/list/self/${this.user_info.site_id}`).then(res => {
                    this.templateList = res.data.data.list
                })
            })
        },
        cancelDelete() {
            console.log("取消删除");
        },

        prevStep() {
            if (this.step <= 0) return;
            this.step--;
        },
        nextStep() {
            if (this.step >= 2) return;
            this.step++;
        },

        // 发布考核弹框的回调
        onPubishConfirm(params, selectOkrs) {
            let templateId = this.templateId;
            let { title, startDate, endDate, cycleType, employeeIds, okrs, cateId } = params
            let employees = employeeIds.map(employee => ({
                employeeId: employee,
                ids: [],
                interviewFlow: {
                    nodes: [
                        {
                            id: "IT_1894283564934688769",
                            type: "interview",
                            allows: [],
                            enable: false,
                            weight: 0,
                            children: [],
                            assigneeIds: [],
                            leaderLevel: 1,
                            assigneeType: "self",
                            multipleType: "or"
                        }
                    ]
                }
            }))

            let requireParams = {
                title,
                cycleType,
                startDate,
                endDate,
                okrs,
                templates: [
                    {
                        templateId,
                        employees
                    }
                ],
                cateId
            }
            // let url = `/performance/review/publish/${this.user_info.site_id}`;
            // console.log(requireParams)
            let url = `/performance/review/publish/templates/${this.user_info.site_id}`;
            this.loading = true
            this.$http.post(url, requireParams).then(res => {
                console.log(res)
                let { data, code, message } = res
                this.loading = false
                if (code == 1) {
                    this.$message.success("发布成功");
                    this.$emit("changeCurrentId", {currentId: '1'})
                    setTimeout(() => {
                        this.$router.push("newPerformance")
                    }, 1000);
                } else {
                    this.$message.error(message || '发布失败');
                }
            })
        },
        activeStep(index, flag = true) {
            this.activeIndex = index;
            if (flag) this.step = index - 1;
        },
        changeStep(step) {
            this.activeIndex = step + 1;
        }
    }
}

</script>

<style lang="scss">
        .introjs-helperLayer {
            box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 0px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
            border: 3px dashed #409eff;
        }

        /* 调整 intro.js 弹出框的大小 */
        .introjs-tooltip {
            width: auto;
            /* 自动调整宽度 */
            max-width: 1600px;
            /* 最大宽度 */
            height: auto;
            /* 自动调整高度 */
            overflow: hidden;
            /* 防止内容溢出 */
        }
    
        .new-tips {
            color: #409eff;
            line-height: 80px;
            cursor: pointer;
        }
    
        .introjs-tooltip-title {
            font-size: 16px;
            width: 80%;
            padding-top: 10px;
        }
    
        .warper {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid saddlebrown;
        }
    
        /* 重置引导组件样式(类似element-ui个人使用) */
        .intro-tooltip {
            color: #ffff;
            background: #2c3e50;
        }
    
        /* 引导提示框的位置 */
        .introjs-bottom-left-aligned {
            left: 45% !important;
        }
    
        .introjs-right,
        .introjs-left {
            top: 30%;
        }
    
        .intro-highlight {
            background: rgba(255, 255, 255, 0.5);
        }
    
        .introjs-arrow.left {
            border-right-color: #2c3e50;
        }
    
        .introjs-arrow.top {
            border-bottom-color: #2c3e50;
        }
    
        .introjs-arrow.right {
            border-left-color: #2c3e50;
        }
    
        .introjs-arrow.bottom {
            border-top-color: #2c3e50;
        }
    
        /* 提示框头部区域 */
        .introjs-tooltip-header {
            padding-right: 0 !important;
            padding-top: 0 !important;
        }
    
        .introjs-skipbutton {
            color: #409eff !important;
            font-size: 14px !important;
            font-weight: normal !important;
            //   padding: 8px 10px !important ;
        }
    
        .introjs-tooltipbuttons {
            border: none !important;
        }
    
        .introjs-tooltiptext {
            font-size: 14px !important;
            padding: 15px !important;
        }
    
        /* 提示框按钮 */
        .introjs-tooltipbuttons {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .introjs-button {
            width: 50px !important;
            text-align: center;
            padding: 4px !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            border-radius: 3px !important;
            border: none !important;
        }
    
        .introjs-button:last-child {
            margin-left: 10px;
        }
    
        .introjs-prevbutton {
            color: #606266 !important;
            background: #fff !important;
            border: 1px solid #dcdfe6 !important;
        }
    
        .introjs-nextbutton {
            color: #fff !important;
            background-color: #409eff !important;
            border-color: #409eff !important;
        }
    
        .introjs-disabled {
            color: #9e9e9e !important;
            border-color: #bdbdbd !important;
            background-color: #f4f4f4 !important;
        }
</style>


<style scoped lang="scss">


.dialog-content {
    width: 100%;
    height: 500px;
    overflow-y: auto;
    padding-bottom: 20px;
    box-sizing: border-box;

    .template-item {
        padding: 5px;
        box-sizing: border-box;
        transition: all 0.3s;

        &:hover {
            cursor: pointer;
            background: #f7f7f7;
        }
    }

    /* 设置滚动条的宽度和背景色 */
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #f9f9f9;
    }

    /* 设置滚动条滑块的样式 */
    &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background-color: #c1c1c1;
    }

    /* 设置滚动条滑块hover样式 */
    &::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }

    /* 设置滚动条轨道的样式 */
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
        border-radius: 6px;
        background: #ededed;
    }

}



.all {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

    .create-methods {
        background: #fff;
        padding: 10px;
        box-sizing: border-box;
        justify-content: space-between;
        .method-item {
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #ebebeb;
            font-size: 14px;
            width: 200px;
            color: #222;
            margin-right: 12px;
            cursor: pointer;
            box-sizing: border-box;
            &:hover {
                background-color: #f5f7fa;
            }
        }
        .active {
            background-color: #f5f7fa;
            color: #409EFF;
        }
        .icon {
            width: 40px;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 50%;
            font-size: 20px;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;

            &:hover {
                cursor: pointer;
                background: #f5f5f5;
            }
        }
    }

    .setting-content {
        margin: 10px 0;
        background: #fff;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        
        
        .operation-box {
            border: 1px solid #eee;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            overflow-y: auto;
            /* 设置滚动条的宽度和背景色 */
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
                background-color: #f9f9f9;
            }

        
            /* 设置滚动条滑块的样式 */
            &::-webkit-scrollbar-thumb {
                border-radius: 6px;
                background-color: #c1c1c1;
            }
        
            /* 设置滚动条滑块hover样式 */
            &::-webkit-scrollbar-thumb:hover {
                background-color: #a8a8a8;
            }
        
            /* 设置滚动条轨道的样式 */
            &::-webkit-scrollbar-track {
                box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
                border-radius: 6px;
                background: #ededed;
            }

        }
        
    }
}

.step-item2 {
    padding: 0 10px;
    color: #d6d6d6;
    text-align: center;
    height: 60px;
    cursor: pointer;
    position: relative;
}

.step-item2 span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 20px;
    border: 4px solid #d6d6d6;
}

.step-item2 div {
    font-size: 14px;
    margin-left: 5px;
}

.active-step2 span {
    border: 4px solid #409EFF;
    color: #fff;
    background-color: #409EFF;
}

.active-step2 div {
    color: #409EFF;
}

.barder-a::before {
    position: absolute;
    content: ' ';
    height: 4px;
    width: 120px;
    top: 28px;
    background-color: #d6d6d6;
    border-radius: 3px;
    right: -60px;
}

.step-item {
    width: 140px;
    color: #777777;
    text-align: center;
    height: 60px;
    cursor: pointer;
}

.step-item span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    border: 1px solid #ebebeb;
    margin-right: 10px;
}

.active-step {
    background-color: #1583f2;
    color: #fff;
}

.active-step span {
    border: 1px solid #1583f2;
    background-color: #fff;
    color: #1583f2;
}
</style>