gdy_pc_8/src/newPerformance/views/TemplateDetails.vue

<template>
    <div class="box boxMinHeight">
        <header class="header">
            <div class="header-content flex-box-ce">
                <!-- 返回按钮 -->
                <div class="flex-box-ce header-left">
                    <i class="el-icon-arrow-left fontColorC" @click="$router.go(-1)"></i>
                    <div class="text fontColorB font-flex-word">{{ templateTitle }}</div>
                    <i class="el-icon-edit" style="margin-left: 10px; color: #999;" @click="openEditDialog()"></i>
                </div>

                <!-- 教程指引 -->
                <div class="header-right">
                    <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>
        </header>

        <div style="height: 1px; background-color: #DCDFE6; margin-top: 5px;"></div>


        <el-alert class="bounce animated" type="warning" :title="alertTilte" :closable="false" show-icon
            style="width: 100%; margin-top: 10px;"></el-alert>

        <div class="flex-box-ce" style="justify-content: space-between; margin-top: 10px;">
            <div class="flex-box-ce">
                <el-button class="add-indicator-btn" type="primary" size="small" @click="addData()">添加指标</el-button>

                <el-button class="delete-indicator-btn" type="danger"
                    :disabled="!(multipleSelection && multipleSelection.length > 0)" @click="confirmDelete()"
                    size="small">批量删除</el-button>
            </div>


            <div class="flex-box-ce" style="padding: 0 20px; color: #999;">
                <el-popover placement="right" trigger="hover" class="popover" @show="showPopover">
                    <div class="flex-box-ce" style="width: 200px; justify-content: space-between;">
                        <el-checkbox v-model="checkAll" @change="checkAllChangeFn">全选</el-checkbox>
                        <el-button type="text" @click="reset(true)">重置</el-button>
                    </div>
                    <div style="height: 1px; background-color: #DCDFE6; margin: 5px 0;"></div>
                    <el-checkbox-group v-model="checkColumns" @change="changeColumns"
                        style="width: 200px; display: flex; flex-direction: column;">
                        <el-checkbox v-for="(item, key) in this.tableColumn" :label="item.label"
                            :key="item.label"></el-checkbox>
                    </el-checkbox-group>
                    <div class="flex-box-ce" slot="reference">
                        <el-button class="primaryBtn" icon="el-icon-s-tools" type="primary"
                            size="mini">设置考核流程</el-button>
                    </div>
                </el-popover>
            </div>
        </div>



        <div class="table-box">

            <el-table :data="tableData" v-loading="loading" stripe style="width: 100%; margin-top: 10px;  height: auto;"
                border :header-cell-style="{ background: '#f5f7fa' }" @selection-change="handleSelectChange"
                row-key="indicatorId">
                <el-table-column type="selection"></el-table-column>
                <template v-for="item in tableColumn">

                    <el-table-column v-if="item.isShow && item.label === '规则'" :key="item.prop" :prop="item.prop"
                        :label="item.label" align="center" :min-width="item.width">
                        <template slot-scope="scope">
                            <el-tooltip v-if="scope.row.content" class="item" effect="dark" placement="top">
                                <div v-html="scope.row.content" slot="content"
                                    style="max-width: 300px; white-space: pre-line;">
                                </div>
                                <div class="oneLine"
                                    @click="editContent(scope.$index, scope.row.content, scope.row.indicatorId)">
                                    {{ scope.row.content }}
                                </div>
                            </el-tooltip>
                            <el-button v-else
                                @click="editContent(scope.$index, scope.row.content, scope.row.indicatorId)">编辑规则</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="item.isShow && ['目标', '权重(%)'].includes(item.label)" :key="item.prop"
                        :prop="item.prop" :label="item.label" align="center" :min-width="item.width">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row[item.prop]" :placeholder="item.label" clearable
                                @blur="handleEdit(item.prop, scope.row[item.prop], scope.row.indicatorId)"
                                oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="item.isShow && item.label === '计算公式'" prop="formulae" label="计算公式"
                        align="center" min-width="130">
                        <template slot-scope="scope">
                            <div class="formulas-setting">
                                <el-button @click="openFormula(scope.row, scope.$index)">
                                    {{ scope.row.expression && scope.row.expression.formulas.length > 0 ? `公式
                                    ${scope.row.expression.formulas.length} 条` : '公式' }}
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="item.isShow && item.label === '过程跟踪'" prop="okrs" label="过程跟踪"
                        align="center" min-width="130">
                        <template slot-scope="scope">
                            <div class="formulas-setting">
                                1
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="item.isShow && ['指标', '单位'].includes(item.label)" :key="item.prop"
                        :prop="item.prop" :label="item.label" align="center" :min-width="item.width">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row[item.prop]" :placeholder="item.label" clearable
                                @blur="handleEdit(item.prop, scope.row[item.prop], scope.row.indicatorId)"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column v-if="item.isShow && flowColumn.includes(item.label)" :key="item.prop"
                        :prop="item.prop" :label="item.label"
                        :render-header="(h, obj) => renderHeader(h, item, item.prop)" align="center"
                        :min-width="item.width" fixed="right">
                        <template slot-scope="scope">
                            <template v-if="item.label === '确认目标'">
                                <el-switch v-if="!scope.row.flow.nodes[0].enable"
                                    :value="scope.row.flow.nodes[0].enable"
                                    @input="handleStatusChange(-1, scope.row, 'targetConfirms')"></el-switch>
                                <ShowDataComp v-else-if="scope.row.flow.nodes[0].enable && isDataShow"
                                    :show-data="scope.row.flow.nodes[0]" :select-nodes="scope.row"
                                    @btnClick="handleBtnClick" />
                            </template>

                            <template v-if="item.label === '录入结果'">
                                <el-switch v-if="!scope.row.flow.nodes[1].enable"
                                    :value="scope.row.flow.nodes[1].enable"
                                    @input="handleStatusChange(-1, scope.row, 'resultInput')"></el-switch>
                                <ShowDataComp v-else-if="scope.row.flow.nodes[1].enable && isDataShow"
                                    :show-data="scope.row.flow.nodes[1]" :select-nodes="scope.row"
                                    @btnClick="handleBtnClick" />
                            </template>

                            <template v-if="item.label === '自评'">
                                <el-switch :value="scope.row.flow.nodes[2].enable" @input="handleStatusChange(-1, scope.row, 'scoreSelf')"></el-switch>
                            </template>

                            <template v-if="item.label === '互评'">
                                <el-switch :value="scope.row.flow.nodes[3].enable"  @input="handleStatusChange(-1, scope.row, 'scoreEachOther')"></el-switch>
                            </template>

                            <template v-if="item.label === '评分'">
                                <el-switch v-if="!scope.row.flow.nodes[4].enable"
                                    :value="scope.row.flow.nodes[4].enable"
                                    @input="handleStatusChange(-1, scope.row, 'scores')"></el-switch>
                                <ShowDataComp v-else-if="scope.row.flow.nodes[4].enable && isDataShow"
                                    :show-data="scope.row.flow.nodes[4]" :select-nodes="scope.row"
                                    @btnClick="handleBtnClick" />
                            </template>

                            <template v-if="item.label === '审批'">
                                <el-switch v-if="!scope.row.flow.nodes[5].enable"
                                    :value="scope.row.flow.nodes[5].enable"
                                    @input="handleStatusChange(-1, scope.row, 'reviews')"></el-switch>
                                <ShowDataComp v-else-if="scope.row.flow.nodes[5].enable && isDataShow"
                                    :show-data="scope.row.flow.nodes[5]" :select-nodes="scope.row"
                                    @btnClick="handleBtnClick" />
                            </template>

                            <template v-if="item.label === '抄送'">
                                <el-switch v-if="!scope.row.flow.nodes[6].enable"
                                    :value="scope.row.flow.nodes[6].enable"
                                    @input="handleStatusChange(-1, scope.row, 'cc')"></el-switch>
                                <ShowDataComp v-else-if="scope.row.flow.nodes[6].enable && isDataShow"
                                    :show-data="scope.row.flow.nodes[6]" :select-nodes="scope.row"
                                    @btnClick="handleBtnClick" />
                            </template>

                        </template>
                    </el-table-column>
                </template>

            </el-table>

            <div style="height: 50px;"></div>

        </div>



        <!-- <TiptapComp /> -->
        <!-- 编辑流程节点 -->
        <!-- <HandleNode v-if="currentIndicator" v-model="dialogVisible" :form-label="formLabel" :dialog-title="dialogTitle"
            :node-type="nodeType" :template-id="templateId" :select-nodes="selectNodes"
            :indicator-id="selectIndicatorId" @closeDialog="closeDialog" :tag-index="tagIndex"
            @onConfirm="finishHandle" /> -->

        <!-- 发布考核弹框 -->
        <PublishComp v-if="showPublish" v-model="showPublish" :template-ids="[templateId]"
            @onConfirm="onPubishConfirm" />

        <!-- 编辑计算公式 -->
        <FormulaComp v-if="showFormula" v-model="showFormula"
            :fixed-props="[{ key: 'target', name: '目标' }, { key: 'weight', name: '权重' }, { key: 'result', name: '结果值' }]"
            :expressions-props="currentIndicator.expression.formulas || []" @onConfirm="onFormulaConfirm" />


        <!-- 编辑规则 -->
        <EditContentComp v-if="showEditContent" v-model="showEditContent" :content="content"
            :indicator-id="selectIndicatorId" :template-id="templateId" @finishEdit="finishEditContent" />

        <!-- 批量修改流程节点 -->
        <BatchHandleNode v-if="batchHandleDialog" v-model="batchHandleDialog" :template-id="templateId"
            :form-label="formLabel" :dialog-title="dialogTitle" :node-type="nodeType" :handle-node="handleNode"
            @onConfirm="finishBatchHandle" />

        <!-- 编辑确认目标节点 -->
        <TargetConfirms v-if="targetConfirms" v-model="targetConfirms" :form-label="formLabel"
            :dialog-title="dialogTitle" :node-type="nodeType" :template-id="templateId" :select-nodes="selectNodes"
            :indicator-id="selectIndicatorId" @closeDialog="closeNodeDialog" :tag-index="tagIndex"
            @onConfirm="finishHandle" />

        <!-- 编辑录入结果节点 -->
        <ResultInput v-if="resultInput" v-model="resultInput" :form-label="formLabel" :dialog-title="dialogTitle"
            :node-type="nodeType" :template-id="templateId" :select-nodes="selectNodes"
            :indicator-id="selectIndicatorId" @closeDialog="closeNodeDialog" :tag-index="tagIndex"
            @onConfirm="finishHandle" />

        <!-- 编辑自评节点 -->
        <ScoreSelf v-if="scoreSelf" v-model="scoreSelf" :form-label="formLabel" :dialog-title="dialogTitle"
            :node-type="nodeType" :template-id="templateId" :select-nodes="selectNodes"
            :indicator-id="selectIndicatorId" @closeDialog="closeNodeDialog" :tag-index="tagIndex"
            @onConfirm="finishHandle" />


        <!-- 编辑互评节点 -->
        <ScoreEachOther v-if="scoreEachOther" v-model="scoreEachOther" :form-label="formLabel"
            :dialog-title="dialogTitle" :node-type="nodeType" :template-id="templateId" :select-nodes="selectNodes"
            :indicator-id="selectIndicatorId" @closeDialog="closeNodeDialog" :tag-index="tagIndex"
            @onConfirm="finishHandle" />

        <!-- 编辑评分节点 -->
        <Scores v-if="scores" v-model="scores" :form-label="formLabel" :dialog-title="dialogTitle" :node-type="nodeType"
            :template-id="templateId" :select-nodes="selectNodes" :indicator-id="selectIndicatorId"
            @closeDialog="closeNodeDialog" :tag-index="tagIndex" @onConfirm="finishHandle" />

        <!-- 编辑审批节点 -->
        <Reviews v-if="reviews" v-model="reviews" :form-label="formLabel" :dialog-title="dialogTitle"
            :node-type="nodeType" :template-id="templateId" :select-nodes="selectNodes"
            :indicator-id="selectIndicatorId" @closeDialog="closeNodeDialog" :tag-index="tagIndex"
            @onConfirm="finishHandle" />

        <!-- 编辑审批节点 -->
        <CC v-if="cc" v-model="cc" :form-label="formLabel" :dialog-title="dialogTitle" :node-type="nodeType"
            :template-id="templateId" :select-nodes="selectNodes" :indicator-id="selectIndicatorId"
            @closeDialog="closeNodeDialog" :tag-index="tagIndex" @onConfirm="finishHandle" />

        <el-dialog title="编辑标题" center :visible.sync="editTitleDialogVisible" width="30%">
            <el-input v-model="title" placeholder="请输入模板名称" size="small"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editTitleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editTitle()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import FormulaComp from '@/newPerformance/components/TemplateDetails/FormulaComp'; // 计算公式弹框
import HandleNode from '@/newPerformance/components/TemplateDetails/HandleNode'; //单独设置流程节点弹框
import PublishComp from '@/newPerformance/components/TemplateDetails/PublishComp'; // 发布考核弹框
import ShowDataComp from '@/newPerformance/components/PublicComp/ShowData'; // 显示节点数据组件
import EditContentComp from '@/newPerformance/components/TemplateDetails/EditContent'; // 编辑规则组件
import BatchHandleNode from '@/newPerformance/components/TemplateDetails/BatchHandleNode'; // 批量设置流程节点
import TargetConfirms from '@/newPerformance/components/TemplateDetails/TargetConfirms'; // 确认目标流程节点
import ResultInput from '@/newPerformance/components/TemplateDetails/ResultInput'; // 结果录入流程节点
import ScoreSelf from '@/newPerformance/components/TemplateDetails/ScoreSelf'; // 自评流程节点
import ScoreEachOther from '@/newPerformance/components/TemplateDetails/ScoreEachOther'; // 互评流程节点
import Scores from '@/newPerformance/components/TemplateDetails/Scores'; // 评分流程节点
import Reviews from '@/newPerformance/components/TemplateDetails/Reviews'; // 审批流程节点
import CC from '@/newPerformance/components/TemplateDetails/CC'; // 审批流程节点
import introJs from 'intro.js'
import 'intro.js/introjs.css'
import templateDetailsStep from "@/newPerformance/utils/templateDetailsStep"
import Sortable from 'sortablejs';

export default {
    components: {
        HandleNode,
        FormulaComp,
        PublishComp,
        ShowDataComp,
        EditContentComp,
        BatchHandleNode,
        TargetConfirms,
        ResultInput,
        ScoreSelf,
        ScoreEachOther,
        Scores,
        Reviews,
        CC
    },
    data() {
        return {
            isDataShow: false,
            isShow: false,
            templateTitle: "模板名称",
            loading: false,
            title: "模板名称",
            alertTilte: "可在表格中直接编辑指标，规则 (规则支持富文本) ，目标，单位，权重，计算公式以及流程节点, 注意: 每个指标的标题不能为空！每个指标的评分节点一定要开启！",
            templateId: "", // 模板ID
            tableData: [], // 表格数据
            showFormula: false, // 编辑计算公式弹框显示
            showPublish: false, // 发布考核弹框显示
            dialogVisible: false, // 编辑流程节点弹框显示
            editTitleDialogVisible: false,
            dialogTitle: "", // 编辑流程节点弹框标题
            isDisable: false, // 是否禁用
            nodeType: "", // 节点类型
            currentIndicator: null, // 操作的指标
            selectIndicatorId: "", // 选择的指标ID
            selectNodes: [], // 选中指标所有的节点
            selectIndex: 0, // 表格行索引
            formLabel: "",
            tagIndex: 0,
            multipleSelection: [],
            content: "", // 指标规则
            showEditContent: false, // 编辑指标内容弹框
            deptList: [], // 部门列表 - 树形结构
            dept_list: [], // 部门列表
            postList: [], // 岗位列表
            flowColumn: ["确认目标", "录入结果", "自评", "互评", "评分", "审批", "抄送"],
            tableColumn: [
                { label: "指标", prop: "title", isShow: true, width: 150 },
                { label: "规则", prop: "content", isShow: true, width: 150 },
                { label: "目标", prop: "target", isShow: true, width: 80 },
                { label: "单位", prop: "unit", isShow: true, width: 80 },
                { label: "权重(%)", prop: "weight", isShow: true, width: 80 },
                { label: "计算公式", prop: "formulae", isShow: true, width: 120 },
                // { label: "过程跟踪", prop: "okrs", isShow: true, width: 120 },
                { label: "录入结果", prop: "resultInput", isShow: false, width: 100 },
                { label: "自评", prop: "scoreSelf", isShow: false, width: 100 },
                { label: "互评", prop: "scoreEachOther", isShow: false, width: 100 },
                { label: "评分", prop: "scores", isShow: false, width: 100 },
                { label: "审批", prop: "reviews", isShow: false, width: 100 },
                { label: "抄送", prop: "cc", isShow: false, width: 100 }
            ],
            checkColumns: [],
            checkAll: false,
            flowInfo: {},
            handleNode: {},
            batchHandleDialog: false,
            targetConfirms: false,
            resultInput: false,
            scoreSelf: false,
            scoreEachOther: false,
            scores: false,
            reviews: false,
            cc: false
        }
    },
    computed: {
        ...mapGetters(['user_info']),
        // 指标标题为空不能发起考核
        isTitleNull() {
            return this.tableData.find(item => item.title == '' || item.title == null) ? true : false
        },
        // 指标评分为禁用不能发起考核
        isScoreNull() {
            return this.tableData.find(item => !item.flow.nodes[4].enable) ? true : false
        }
    },

    mounted() {
        
    },

    created() {
        this.initData();
        
        this.$nextTick(() => {
            this.rowDrop(); // 行拖拽
            this.columnDrop(); // 列拖拽
        })
    },
    methods: {

        initData() {
            this.tableColumn = [
                { label: "指标", prop: "title", isShow: true, width: 150 },
                { label: "规则", prop: "content", isShow: true, width: 150 },
                { label: "目标", prop: "target", isShow: true, width: 80 },
                { label: "单位", prop: "unit", isShow: true, width: 80 },
                { label: "权重(%)", prop: "weight", isShow: true, width: 80 },
                { label: "计算公式", prop: "formulae", isShow: true, width: 120 },
                // { label: "过程跟踪", prop: "okrs", isShow: true, width: 120 },
                { label: "确认目标", prop: "targetConfirms", isShow: false, width: 100 },
                { label: "录入结果", prop: "resultInput", isShow: false, width: 100 },
                { label: "自评", prop: "scoreSelf", isShow: false, width: 100 },
                { label: "互评", prop: "scoreEachOther", isShow: false, width: 100 },
                { label: "评分", prop: "scores", isShow: false, width: 100 },
                { label: "审批", prop: "reviews", isShow: false, width: 100 },
                { label: "抄送", prop: "cc", isShow: false, width: 100 }
            ]
            this.templateId = this.$route.params.templateDetailId;
            this.get_template_detail();
            this.get_table_data();
            this.isDataShow = false
            // 请求岗位列表，部门列表
            Promise.all([this.get_dept_list(), this.get_post_list()]).then(([deptRes, postRes]) => {
                if (deptRes.data.code !== 1) return this.$message.error(deptRes.data.msg || "请求部门列表数据出错")
                if (postRes.data.code !== 1) return this.$message.error(postRes.data.msg || "请求岗位列表数据出错")
                this.dept_list = deptRes.data.data.list;
                this.deptList = this.getTreeData(this.dept_list); // 处理成树状结构
                this.postList = postRes.data.data.list
                localStorage.setItem("dept_list", JSON.stringify(this.dept_list))
                localStorage.setItem("deptList", JSON.stringify(this.deptList))
                localStorage.setItem("postList", JSON.stringify(this.postList))
                this.isDataShow = true
            })
        },

        // 开启指引，需要静态数据
        initStepData() {
            this.tableColumn = [
                { label: "指标", prop: "title", isShow: true, width: 150 },
                { label: "规则", prop: "content", isShow: true, width: 150 },
                { label: "目标", prop: "target", isShow: true, width: 80 },
                { label: "单位", prop: "unit", isShow: true, width: 80 },
                { label: "权重(%)", prop: "weight", isShow: true, width: 80 },
                { label: "计算公式", prop: "formulae", isShow: true, width: 120 },
                // { label: "过程跟踪", prop: "okrs", isShow: true, width: 120 },
                { label: "确认目标", prop: "targetConfirms", isShow: true, width: 100 },
                { label: "录入结果", prop: "resultInput", isShow: true, width: 100 },
                { label: "自评", prop: "scoreSelf", isShow: true, width: 100 },
                { label: "互评", prop: "scoreEachOther", isShow: true, width: 100 },
                { label: "评分", prop: "scores", isShow: true, width: 100 },
                { label: "审批", prop: "reviews", isShow: true, width: 100 },
                { label: "抄送", prop: "cc", isShow: true, width: 100 }
            ]
            this.tableData = [
                {
                    indicatorId: 13, templateId: 3, title: '业绩考核', content: "业绩每月达成10万", target: 10, unit: "万", weight: 10, expression: { formulas: [] },
                    flow: {
                        nodes: [{
                            id: "TCS_1921125472071749634",
                            allows: [],
                            assigneeIds: [],
                            assigneeType: [],
                            children: [{
                                allows: [],
                                assigneeIds: [],
                                assigneeType: "self",
                                children: [],
                                enable: true,
                                id: "TC_1921125472071749635",
                                leaderLevel: 1,
                                multipleType: "or",
                                type: "targetConfirm",
                                weight: 0
                            }],
                            enable: true,
                            leaderLevel: 1,
                            multipleType: "or",
                            type: "targetConfirms",
                            weight: 0
                        },
                        {
                            id: "RI_1921125472071749636",
                            allows: ['transfer'],
                            assigneeIds: [],
                            assigneeType: 'self',
                            enable: true,
                            leaderLevel: 1,
                            multipleType: "or",
                            type: "resultInput",
                            weight: 0
                        },
                        {
                            id: "SELF_1921125472071749637",
                            allows: [],
                            assigneeIds: [],
                            assigneeType: 'self',
                            enable: true,
                            leaderLevel: 1,
                            multipleType: "or",
                            type: "selfScore",
                            weight: 0
                        },
                        {
                            id: "EO_1921125472071749638",
                            allows: [],
                            assigneeIds: [],
                            assigneeType: 'self',
                            enable: true,
                            leaderLevel: 1,
                            multipleType: "or",
                            type: "scoreEachOther",
                            weight: 0
                        },

                        {
                            id: "SS_1921125472071749634",
                            allows: [],
                            assigneeIds: [],
                            assigneeType: [],
                            children: [{
                                allows: [],
                                assigneeIds: [],
                                assigneeType: "self",
                                children: [],
                                enable: true,
                                id: "TC_1921125472071749635",
                                leaderLevel: 1,
                                multipleType: "or",
                                type: "targetConfirm",
                                weight: 0
                            }],
                            enable: true,
                            leaderLevel: 1,
                            multipleType: "or",
                            type: "scrores",
                            weight: 0
                        },
                        {
                            id: "TCS_1921125472071749634",
                            allows: [],
                            assigneeIds: [],
                            assigneeType: [],
                            children: [{
                                allows: [],
                                assigneeIds: [],
                                assigneeType: "self",
                                children: [],
                                enable: true,
                                id: "TC_1921125472071749635",
                                leaderLevel: 1,
                                multipleType: "or",
                                type: "targetConfirm",
                                weight: 0
                            }],
                            enable: true,
                            leaderLevel: 1,
                            multipleType: "or",
                            type: "targetConfirms",
                            weight: 0
                        },
                        {
                            id: "TCS_1921125472071749634",
                            allows: [],
                            assigneeIds: [],
                            assigneeType: [],
                            children: [{
                                allows: [],
                                assigneeIds: [],
                                assigneeType: "self",
                                children: [],
                                enable: true,
                                id: "TC_1921125472071749635",
                                leaderLevel: 1,
                                multipleType: "or",
                                type: "targetConfirm",
                                weight: 0
                            }],
                            enable: true,
                            leaderLevel: 1,
                            multipleType: "or",
                            type: "targetConfirms",
                            weight: 0
                        },
                        ]
                    }
                }
            ]
            setTimeout(() => {
                this.startGuide();
            }, 300)
            
        },

        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: templateDetailsStep
            }).onbeforechange((e) => {
                // console.log(e)
                // if (e.className.includes("primaryBtn")) {
                //     // this.$refs.UploadPublish2.openTemplate()
                //     this.showPopover()
                //     this.checkAllChangeFn(true)
                // }
            }).onexit((e) => {
                console.log("退出")
                this.initData()
            }).oncomplete((e) => {
                console.log("完成")
                this.initData()
            }).start()
        },


        // 行拖拽
        rowDrop() {
            // 要侦听拖拽响应的DOM对象（数据存储在.el-table__body-wrapper > .el-table__row > tbody标签中（el-table的数据部分的“最外层”class名为el-table__body-wrapper））
            const tbody = document.querySelector('.el-table__body-wrapper tbody');
            const that = this;
            if (tbody) { 
                Sortable.create(tbody, {
                    // 结束拖拽后的回调函数
                    onEnd({ newIndex, oldIndex }) {
                        console.log('拖动了行，序号(index)"' + oldIndex + '"拖动到序号(index)"' + newIndex + '"');
                        const currentRow = that.tableData.splice(oldIndex, 1)[0]; // 将oldIndex位置的数据删除并取出，oldIndex后面位置的数据会依次前移一位
                        that.tableData.splice(newIndex, 0, currentRow); // 将被删除元素插入到新位置（currRow表示上面的被删除数据）
                    }
                })
            }
            
        },
        // 列拖拽
        columnDrop() {
            // 要侦听拖拽响应的DOM对象
            const wrapperTr = document.querySelector('.el-table__body-wrapper tr');
            const that = this;
            if (wrapperTr) {
                Sortable.create(wrapperTr, {
                    animation: 180,
                    delay: 0,
                    // 结束拖拽后的回调函数
                    onEnd: evt => {
                        console.log('拖动了列（index）：');
                        const oldItem = that.dropCol[evt.oldIndex];
                        that.dropCol.splice(evt.oldIndex, 1);
                        that.dropCol.splice(evt.newIndex, 0, oldItem);
                    }
                })
            }
            
        },

        openEditDialog() {
            this.editTitleDialogVisible = true
        },

        // 处理部门树状结构数据
        getTreeData(data) {
            for (var i = 0; i < data.length; i++) {
                data[i].checked = false;
                if (data[i].children.length < 1) {
                    // children若为空数组，则将children设为undefined
                    data[i].children = undefined;
                } else {
                    // children若不为空数组，则继续 递归调用 本方法
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        },

        // 获取部门
        get_dept_list() {
            return this.$axiosUser('get', '/api/pro/department/tree', '', 'v2')
        },

        // 岗位列表
        get_post_list() {
            let data = {
                page: 1,
                page_size: 999,
                cate_id: -1,
                name: ''
            }
            return this.$axiosUser('get', '/api/pro/post/cate_post_list', data)
        },

        // 自定义表头
        renderHeader(h, item, type) {
            let label = ""
            const labels = {
                'targetConfirms': '确认目标',
                'resultInput': '录入结果',
                'scoreSelf': '自评',
                'scoreEachOther': '互评',
                'scores': '评分',
                'reviews': '审批',
                'cc': '抄送'
            }
            label = labels[type];
            let that = this;

            return h('div', {
                class: type + '-class',
                style: { display: "flex", alignItems: "center", justifyContent: "center" }
            }, [

                h('el-button', {
                    props: {
                        size: 'small'
                    },
                    on: {
                        click: function () {
                            that.clickButton(type);
                        }
                    }
                }, label),
            ])
        },

        clickButton(nodeType) {
            this.handleNode = this.flowInfo.nodes.find(node => node.type === nodeType)
            let options = {
                'targetConfirms': ['确认目标', '确认人'],
                'resultInput': ['录入结果', '录入人'],
                'scoreSelf': ['自评', ''],
                'scoreEachOther': ['互评', '互评人'],
                'scores': ['评分', '评分人'],
                'reviews': ['审批', '审批人'],
                'cc': ['抄送', '抄送人']
            }
            this.dialogTitle = options[nodeType][0]
            this.formLabel = options[nodeType][1]
            this.nodeType = nodeType; // 节点类型
            this.batchHandleDialog = true;
        },

        // 打开编辑规则内容弹框
        editContent(index, content, indicatorId) {
            this.selectIndex = index;
            this.content = content;
            this.selectIndicatorId = indicatorId;
            this.showEditContent = true
        },

        finishEditContent(content) {
            this.tableData[this.selectIndex].content = content
        },
        // 获取模板详情
        get_template_detail() {
            this.$axiosUser("get", `/performance/template/info/${this.user_info.site_id}/` + this.templateId).then(res => {
                let { data: { data: { title, flow } } } = res
                this.templateTitle = title || '模板名称'
                this.title = title || '模板名称'
                this.flowInfo = flow || {}
            })
        },

        // 获取表格数据
        get_table_data() {
            this.loading = true
            this.$axiosUser("get", `/performance/indicator/list/${this.user_info.site_id}/` + this.templateId).then(res => {
                this.tableData = res.data.data.list
                this.loading = false
                
            })
        },


        editTableData() { },
        

        // 编辑模板标题
        editTitle() {
            let title = this.title
            if (title !== null && title !== '') {
                let url = `/performance/template/title/${this.user_info.site_id}`
                this.$http.post(url, { templateId: this.templateId, title }).then(res => {
                    if (res.code == 1) {
                        this.$message.success("修改成功")
                        this.editTitleDialogVisible = false
                        this.get_template_detail();
                    }

                })
            }
        },

        // 编辑指标名称，规则，权重，目标，单位
        handleEdit(props, value, id) {
            let url = '', data = {};
            url = `/performance/indicator/${props}/${this.user_info.site_id}/${this.templateId}`;
            data[props] = value;
            data['indicatorId'] = id;
            this.$http.post(url, data).then(res => {
                if (res.code == 0) return this.$message.error(res.msg || '操作失败')
            })
        },

        handleBtnClick(index, node, row) {
            this.handleStatusChange(index, row, node.type)
        },

        // 自评节点单独操作
        handleScoreSelf(row, index) {
            let { indicatorId, flow: { nodes } } = row
            let data = {
                indicatorId, // 指标ID
                nodes
            }
            let url = `/performance/indicator/flow/${this.user_info.site_id}/${this.templateId}`
            this.$http.post(url, data).then(res => {
                let { code, data } = res
                if (code == 1) {
                    this.tableData.splice(index, 1, data); //替换元素
                    this.$message.success("操作成功");
                } else {
                    this.$message.error(res.message || '操作失败');
                }
            })
        },

        // 操作节点
        handleStatusChange(index, row, nodeType) {
            if (index !== -1) this.tagIndex = index // 子节点索引
            this.currentIndicator = row;
            let { indicatorId } = row;
            this.selectIndicatorId = indicatorId; // 指标ID
            this.selectNodes = row.flow.nodes; // 所有节点
            this.nodeType = nodeType; // 节点类型
            if (nodeType == 'targetConfirms') {
                this.dialogTitle = "确认目标"
                this.formLabel = "确认人"
                this.targetConfirms = true;
            }
            if (nodeType == 'resultInput') {
                this.dialogTitle = "录入结果"
                this.formLabel = "录入人"
                this.resultInput = true;
            }
            if (nodeType == 'scoreSelf') {
                this.dialogTitle = "自评"
                this.scoreSelf = true
            }
            if (nodeType == 'scoreEachOther') {
                this.dialogTitle = "互评"
                this.formLabel = "互评人"
                this.scoreEachOther = true
            }
            if (nodeType == 'scores') {
                this.dialogTitle = "评分"
                this.formLabel = "评分人"
                this.scores = true

            }
            if (nodeType == 'reviews') {
                this.dialogTitle = "审批"
                this.formLabel = "审批人"
                this.reviews = true
            }
            if (nodeType == 'cc') {
                this.dialogTitle = "抄送"
                this.formLabel = "抄送人"
                this.cc = true
            }
        },


        // 添加指标
        addData() {
            let url = `/performance/indicator/create/${this.user_info.site_id}/${this.templateId}`
            this.$http.post(url, {}).then(res => {
                let { data, code } = res
                if (code) {
                    data.flow.nodes.forEach((item) => {
                        if (item.type !== 'scores')
                            item.enable = false
                    })
                    this.tableData.push(data)
                }
            })
        },

        handleSelectChange(val) {
            this.multipleSelection = val;
        },
        // 取消删除
        cancelDelete() {
            console.log("取消删除");
        },
        // 确认删除
        confirmDelete() {
            if (this.multipleSelection && this.multipleSelection.length > 0) {
                this.$confirm('确定删除选中的指标吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    // 创建一个包含异步任务的数组，每个任务都是一个 axios 请求
                    const arrays = []
                    this.multipleSelection.forEach(item => {
                        arrays.push(this.deleteIndicator(item))
                    })

                    // 当所有请求都成功完成时，responses 是一个包含所有响应的数组
                    Promise.all(arrays).then(responses => {
                        // console.log(responses)
                        this.get_table_data();
                    }).catch(error => {
                        // 如果任何一个请求失败，将会进入这个 catch 块
                        console.log(error)
                    })
                }).catch(() => { });
            }
        },

        // 删除指标
        deleteIndicator(item) {
            let url = `/performance/indicator/remove/${this.user_info.site_id}/${this.templateId}/${item.indicatorId}`
            return this.$axiosUser('post', url).then(res => {
                return res.data
            })
        },

        // 打开计算公式弹框
        openFormula(row, index) {
            this.currentIndicator = null;
            this.selectIndex = -1;
            this.currentIndicator = row;
            this.selectIndex = index;
            this.showFormula = true;
        },
        // 关闭编辑计算公式弹框
        closeDialog() {
        },

        // 全选复选框事件监听
        checkAllChangeFn(val) {
            this.loading = true
            if (val) {
                // 全选
                this.tableColumn.forEach(item => {
                    item.isShow = true
                })
            } else {
                // 反全选
                this.tableColumn.forEach(item => {
                    if (this.flowColumn.includes(item.label)) {
                        item.isShow = false;
                    } else {
                        item.isShow = true
                    }
                })
            }
            this.loading = false
            this.showPopover();
        },
        // 重置，flag: Boolean，全部重置为flag
        reset(flag) {
            this.tableColumn.forEach(item => {
                if (this.flowColumn.includes(item.label)) {
                    item.isShow = false;
                } else {
                    item.isShow = true
                }
            })
            this.showPopover();
            this.refreshTable();
        },
        // 表格列是否显示的方法
        showColumn(currentColumn) {
            return this.tableColumn.find(item => item.prop == currentColumn).isShow;
        },
        /* 选择列 */
        changeColumns(val) {
            this.tableColumn.forEach(item => {
                item.isShow = false;
            })
            // columns将val数组存在的值设为true，不存在的设为false
            val && val.forEach(item => {
                let current = this.tableColumn.find(i => i.label == item)
                current.isShow = true;
            })
            // 判断是否全选
            this.judgeIsCheckAll();
            // this.refreshTable();
        },

        // 重新渲染表格
        refreshTable() {
            this.$nextTick(() => {
                if (this.$refs.fmeaTableRef) this.$refs.fmeaTableRef.doLayout();
            })
        },

        // 气泡框出现
        showPopover() {
            this.checkColumns = []
            this.tableColumn.forEach(item => {
                if (item.isShow) {
                    this.checkColumns.push(item.label)
                }
            })
            // 判断是否全选
            this.judgeIsCheckAll();
        },
        // 判断是否全选
        judgeIsCheckAll() {
            // 选中的长度 = 表格列的长度  全选按钮就选中
            if (this.checkColumns.length == this.tableColumn.length)
                this.checkAll = true
            else
                this.checkAll = false
        },

        finishHandle(nodes) {
            let data = nodes
            let url = `/performance/indicator/flow/${this.user_info.site_id}/${this.templateId}`
            this.$http.post(url, data).then(res => {
                let { code, data } = res
                if (code == 1) {
                    let index = this.tableData.findIndex(table => table.indicatorId === data.indicatorId)
                    this.tableData.splice(index, 1, data); //替换元素
                    this.$message.success("操作成功");
                    this.nodeType = ''
                    this.dialogTitle = ''
                    this.selectNodes = []
                    this.currentIndicator = []
                    this.selectIndicatorId = ''
                    this.tagIndex = -1
                } else {
                    this.$message.error(res.message || '操作失败');
                }
            })
        },


        closeNodeDialog() {
            console.log("关闭弹窗")
            this.tagIndex = -1 // 子节点索引
            this.currentIndicator = null;
            this.selectIndicatorId = null; // 指标ID
            this.selectNodes = []; // 所有节点
            this.nodeType = ''; // 节点类型
        },

        // 批量操作成功
        finishBatchHandle(data) {
            this.flowInfo = data;
            this.get_table_data();
        },

        // 编辑计算公式确定的回调
        onFormulaConfirm(formulas) {
            let url = `/performance/indicator/expression/${this.user_info.site_id}/${this.templateId}`;
            let { indicatorId } = this.currentIndicator;
            let params = {
                indicatorId,
                expression: {
                    formulas: formulas.map(item => {
                        return {
                            condition: item.condition,
                            expression: item.expression
                        }
                    })
                }
            }
            this.$http.post(url, params).then(res => {
                let { data, code } = res
                if (code) {
                    this.tableData.splice(this.selectIndex, 1, data); //替换元素
                }
            })
        },
        // 发布考核
        publish() {
            this.showPublish = true;
        },
        // 发布考核弹框的回调
        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 } = res
                this.loading = false
                if (code == 1) {
                    this.$message.success("发布成功");
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 1000);
                }
            })
        }
    }
};
</script>

<style lang="scss">
.box {
    .el-switch__core {
        width: 30px !important;
        height: 16px;
    }

    .el-switch__core::after {
        width: 14px;
        height: 14px;
        margin-top: -1px;
    }

    .el-switch.is-checked .el-switch__core::after {
        margin-left: -15px;
    }
}

.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="scoped" lang="scss">
.oneLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    font-size: 14px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;

    /* 设置滚动条的宽度和背景色 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #f9f9f9;
    }

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

    /* 设置滚动条滑块hover样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }

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

    /*头部样式*/
    .header-content {
        position: relative;
        box-sizing: border-box;
        height: 60px;
        justify-content: space-between;

        .header-left {
            width: 230px;
            box-sizing: border-box;
            height: 60px;
            cursor: pointer;

            .el-icon-arrow-left {
                font-size: 22px;
            }

            &:hover {
                .el-icon-arrow-left {
                    background-color: #f5f7fa;
                    color: #222;
                }
            }

            .text {
                font-size: 16px;
                font-weight: 600;
                padding-left: 50px;

                &::before {
                    position: absolute;
                    content: '';
                    width: 1px;
                    height: 36px;
                    background-color: #ebebeb;
                    left: 44px;
                    top: 50%;
                    margin-top: -18px;
                }
            }

        }

        .header-right {
            text-align: right;
            .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;
                }
            }
        }
    }

    .plus-button {
        display: block;
        margin: 10px auto;
    }

    .table-box {
        flex: 1;
        width: 100%;
        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;
        }
    }

}
</style>