gdy_pc_8/src/newPerformance/components/Workbench/EditNode.vue

<template>
    <div>
        <el-dialog :title="dialogTitle" center :visible.sync="dialogVisible" width="800px"
            :before-close="dialogBeforeClose">
            <div class="status-btn-box fadeInDown animated">
                <el-link type="primary" @click="detailsDialogVisible = true">查看处理详情</el-link>
            </div>

            <div class="dialog-content" v-loading="loading">
                <div class="dialog-content-left scroll-bar"
                    style="padding-bottom: 50px; min-height: 500px; overflow-y: auto;">
                    <!-- 附加属性 -->
                    <div class="append-properties" v-if="dialogData.expand && dialogData.expand.length > 0">
                        <div class="tips">
                            自定义属性（只有通过excel上传发布的指标才有）
                        </div>
                        <table>
                            <tr>
                                <td v-for="item in dialogData.expand" :key="item.p">
                                    <el-tooltip class="item" effect="dark" placement="top">
                                        <div v-html="item.k" slot="content" style="max-width: 300px;"></div>
                                        <div class="oneLine">{{ item.k }}</div>
                                    </el-tooltip>
                                </td>
                            </tr>
                            <tr>
                                <td v-for="item in dialogData.expand" :key="item.p">
                                    <el-tooltip class="item" effect="dark" placement="top">
                                        <div v-html="item.v" slot="content" style="max-width: 300px;"></div>
                                        <div class="oneLine">{{ item.v }}</div>
                                    </el-tooltip>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!-- 附加属性 -->


                    <!-- 考核基本信息 -->
                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-user"></i>
                            被考核人
                        </div>
                        <div class="value">
                            {{ dialogData.task && dialogData.task.assigneeName || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-eleme"></i>
                            考核名称
                        </div>
                        <div class="value">
                            {{ dialogData.reviewTitle || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-eleme"></i>
                            考核状态
                        </div>
                        <div class="value">
                            <div class="status-btn" :class="reviewStatus == 0 ? 'green-color' : 'gray-color'">
                                {{ reviewStatus == 0 ? '进行中' : '已结束' }}
                            </div>
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-date"></i>
                            周期类型
                        </div>
                        <div class="value">
                            <el-tag size="small">{{ dialogData.cycleType | formatCycleType }}</el-tag>
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-time"></i>
                            考核周期
                        </div>
                        <div class="value">
                            {{ dialogData.startTime | formatDate }} 至 {{ dialogData.endTime | formatDate }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-thumb"></i>
                            指标
                        </div>
                        <div class="value">
                            {{ dialogData.title || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-aim"></i>
                            目标
                        </div>
                        <div class="value">
                            {{ dialogData.target || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-s-check"></i>
                            单位
                        </div>
                        <div class="value">
                            {{ dialogData.unit || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-pie-chart"></i>
                            权重(%)
                        </div>
                        <div class="value">
                            {{ dialogData.weight || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-s-flag"></i>
                            结果值
                        </div>
                        <div class="value">
                            {{ dialogData.result || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-document-checked"></i>
                            最终评分
                        </div>
                        <div class="value">
                            {{ dialogData.score || '--' }}
                        </div>
                    </div>

                    <div class="base-info-box">
                        <div class="label">
                            <i class="el-icon-document"></i>
                            规则
                        </div>
                        <div v-if="dialogData.content" class="value text-style" v-html="dialogData.content">
                        </div>
                        <div v-else>
                            --
                        </div>
                    </div>
                    <!-- 考核基本信息 -->

                </div>

                <!-- 录入信息 -->
                <div class="dialog-content-right">

                    <div class="data-box" v-if="activeName == 1">
                        <el-input v-model="formData && formData.title" placeholder="指标标题" style="width: 300px;"
                            clearable @focus="handleFocus" @blur="handleEdit('title')" :disabled="!isEdit || loading">
                            <template slot="prepend">指标</template>
                        </el-input>
                    </div>

                    <div class="data-box" v-if="activeName == 1" style="height: 120px;">
                        <el-input type="textarea" v-model="formData && formData.content" placeholder="规则说明"
                            style="width: 300px;" rows="4" cols="4" clearable @focus="handleFocus"
                            @blur="handleEdit('content')" :disabled="!isEdit || loading">
                            <template slot="prepend">规则</template>
                        </el-input>
                    </div>


                    <div class="data-box" v-if="activeName == 1">
                        <el-input placeholder="目标值（数字）" @input="handleInputTarget" v-model="formData && formData.target"
                            style="width: 300px;" :disabled="!isEdit || loading" clearable @focus="handleFocus"
                            @blur="handleEdit('target')">
                            <template slot="prepend">目标值</template>
                        </el-input>
                    </div>

                    <!-- 单位编辑 -->
                    <div class="data-box" v-if="activeName == 1">
                        <el-input placeholder="单位" v-model="formData && formData.unit" style="width: 300px;" clearable
                            @focus="handleFocus" @blur="handleEdit('unit')" :disabled="!isEdit || loading">
                            <template slot="prepend">单位</template>
                        </el-input>
                    </div>

                    <div class="data-box" v-if="activeName == 2">
                        <el-input placeholder="结果值" v-model="formData && formData.result" style="width: 300px;"
                            @focus="handleFocus" @blur="handleEdit('result')" clearable :disabled="loading">
                            <template slot="prepend">结果值</template>
                        </el-input>
                    </div>


                    <!-- 自评 -->
                    <div class="data-box" v-if="activeName == 3">
                        <el-input :controls="false" placeholder="评分（数字）" @input="handleInputScore"
                            v-model="formData && formData.task && formData.task.score" style="width: 300px;" clearable
                            @focus="handleFocus" @blur="handleEdit('scoreSelf')" :disabled="loading">
                            <template slot="prepend">评分</template>
                        </el-input>
                    </div>

                    <!-- 互评 -->
                    <div class="data-box" v-if="activeName == 4">
                        <el-input placeholder="评分（数字）" @input="handleInputScore"
                            v-model="formData && formData.task && formData.task.score" style="width: 300px;" clearable
                            @focus="handleFocus" @blur="handleEdit('scoreEachOther')" :disabled="loading">
                            <template slot="prepend">评分</template>
                        </el-input>
                    </div>


                    <!-- 评分 -->
                    <div class="data-box" v-if="activeName == 5">

                        <div v-if="dialogData && dialogData.scoreExpression" class="flex-box-ce"
                            style="margin-bottom: 10px; ">
                            <div class="flex-box-ce">系统评分: {{ dialogData.scoreExpression }} </div>
                            <el-link type="primary" :disabled="loading" style="margin-left: 20px;"
                                @click="handleScore()">立即评分</el-link>
                        </div>
                        <el-input placeholder="评分（数字）" @input="handleInputScore"
                            v-model="formData && formData.task && formData.task.score" style="width: 300px;" clearable
                            @focus="handleFocus" @blur="handleEdit('score')" :disabled="loading">
                            <template slot="prepend">评分</template>
                        </el-input>
                    </div>

                    <!-- 审批 -->
                    <div class="data-box" v-if="activeName == 6">
                        <el-input disabled placeholder="最终分（数字）" oninput="value=value.replace(/[^\d.]/g,'')"
                            v-model="formData && formData.score" style="width: 300px;" clearable>
                            <template slot="prepend">最终分</template>
                        </el-input>
                    </div>

                    <div class="data-box" style="height: 160px;">
                        <el-input type="textarea" v-model="comment" placeholder="请输入意见" style="width: 300px;" clearable
                            rows="5" cols="3" @focus="handleFocus" @blur="confirmCommentDialog(1)"
                            :disabled="loading"></el-input>
                    </div>

                    <uploadOss v-if="activeName > 1 && activeName <= 6" :key="Date.now()" class="avatar-uploader"
                        :headers="$xtoken" :show-file-list="true" :multiple="true" :limit="5" :accept="acceptFile"
                        :file-list="fileList" :action="$action" :on-preview="onFilePreView" :on-success="handleSuccess"
                        :on-remove="handleRemove" :before-upload="beforeFilesUpload">
                        <el-button class="primaryBtn" icon="el-icon-paperclip" plain size="mini">上传附件</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">(支持上传xlsx,xls,doc,docx,pdf,txt,png,jpeg,jpg,gif, 大小不能超过5M)</div> -->
                    </uploadOss>

                    <el-button v-if="activeName > 1 && activeName <= 6" class="primaryBtn" icon="el-icon-check"
                        type="primary" size="mini" @click="comfirmUploadFiles()"
                        style="margin-top: 10px;">提交附件</el-button>
                </div>
                <!-- 录入信息 -->
            </div>

            <div slot="footer">
                <el-button v-if="isCreator || getRole1 || isTransfer" @click="showEmployeeSelector = true">转 交</el-button>
                <el-button v-if="activeName == 6" type="danger" @click="reset" :disabled="isInputFocused">驳 回</el-button>
                <el-button type="primary" @click="confirmCommentDialog(2)" :disabled="isInputFocused">提 交</el-button>
            </div>

        </el-dialog>

        <!-- 输入意见 -->
        <el-dialog title="意见" :visible.sync="commentDialog" width="500px" :before-close="beforCommentDialogClose">
            <div>
                <el-input type="textarea" v-model="comment" placeholder="请输入意见" rows="5" cols="5"></el-input>
            </div>
            <div slot="footer">
                <el-button @click="commentDialog = false">取 消</el-button>
                <el-button type="primary" @click="confirmCommentDialog">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 各节点处理详情 -->
        <DetailsDialog v-model="detailsDialogVisible" :dialog-data="dialogData" />

        <!-- 图片查看 -->
        <el-dialog title="图片查看" :visible.sync="isShowImg" width="50%">
            <div class="flex-box-ce  flex-center-center" style="width: 100%; height: 100%;">
                <div style="width: 500px;">
                    <img :src="imgUrl" style="width: 100%;" />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closePreview">关闭</el-button>
            </span>
        </el-dialog>
        <!-- 图片查看 -->

        <!-- 员工选择组件 -->
        <EmployeeSelector :multi="false" :is_filtration_creator="false" :selected="employeeSelectedObj"
            :isChecKedAll="false" :visible.sync="showEmployeeSelector" @confirm="onEmployeeSelected" />
    </div>

</template>


<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import cloneDeep from 'lodash.clonedeep';
import DetailsDialog from "./EditNodeDialog.vue"
import uploadOss from '@/components/upload';
import { _debounce } from '@/utils/auth';
import EmployeeSelector from '@/components/EmployeeSelector';

export default {
    components: {
        DetailsDialog,
        uploadOss,
        EmployeeSelector
    },
    model: {
        prop: 'dialogVisible',
        event: 'close-dialog'
    },
    props: {
        activeName: {
            type: String,
            default: "1"
        },
        nodeType: {
            type: String,
            default: ""
        },
        dialogTitle: {
            type: String,
            default: ""
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        dialogData: {
            type: Object,
            default: () => {}
        }
    },

    watch: {
        dialogData(v) {
            if (this.dialogData) {
                this.loading = false;
                this.formData = cloneDeep(this.dialogData);
                this.comment = this.formData.task.comment || '';
            }
        }
    },
    
    filters: {
        formatCycleType(val) {
            if (val == 0) return '未定义'
            if (val == 1) return '年度'
            if (val == 2) return '半年'
            if (val == 3) return '季度'
            if (val == 4) return '月度' 
            else return '--' 
        },
        formatDate(val) {
            if (val) return moment(val).format('YYYY-MM-DD')
            else return "--"
        }
    },
    data() {
        return {
            isCreator: this.$supremeAuthority('creator'), // 创始人，总经理
            getRole1: this.$getRole(1), // 绩效主管理员，子管理员
            loading: false,
            isInputFocused: false,
            commentDialog: false,
            currentInput: null, // 当前操作的 el-input 的标识
            comment: "",
            score: 0,
            reject: false,
            formData: null, // 用于提交的数据，指标，目标，规则，
            baseInfo: null, // 用于展示的数据，指标，目标，规则，权重，标题
            detailsDialogVisible: false,
            acceptFile: '.jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF',
            fileList: [], // 附件列表
            uploadFileList: [], // 上传成功的fileList
            isShowImg: false, // 图片预览弹框
            imgUrl: '', // 预览图片地址
            isUploadFile: true,
            showEmployeeSelector: false,
            employeeSelectedObj: {
                employee: [],
                dept: []
            },
        }
    },

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

        // 确认目标是否可以编辑
        isEdit() {
            let children = [], employeeIds = [];
            let user_id = this.user_info.id.toString() // 当前用户ID
            const { nodes = [] } = this.dialogData && this.dialogData.flow || {};
            if (nodes && nodes.length > 0)
                children = nodes.find(node => node.type === 'targetConfirms').children

            children.forEach(child => {
                // 是否允许编辑
                if (child.allows.includes('edit')) {
                    if (['leader', 'deptLeader', 'post', 'user'].includes(child.assigneeType)) {
                        if (child.tasks && child.tasks.length > 0) {
                            child.tasks.forEach(task => {
                                employeeIds.push(task.assignee)
                            })
                        }
                    }
                    else {
                        employeeIds = [user_id]
                    }
                }
            })
            return employeeIds && employeeIds.length > 0 && employeeIds.includes(user_id) ? true : false
        },

        // 判断当前任务是否可以转交
        isTransfer() {
            let children = [], employeeIds = [], currentNode = null;
            let user_id = this.user_info.id.toString() // 当前用户ID
            const { nodes = [] } = this.dialogData && this.dialogData.flow || {};
            if (nodes && nodes.length > 0) {
                currentNode = nodes.find(node => node.type === this.nodeType)
                // 有子节点
                if (currentNode && currentNode.children && currentNode.children.length > 0) {
                    children = currentNode.children
                    children.forEach(child => {
                        // 是否允许转交
                        if (child.allows.includes('transfer')) {
                            if (['leader', 'deptLeader', 'post', 'user'].includes(child.assigneeType)) {
                                if (child.tasks && child.tasks.length > 0) {
                                    child.tasks.forEach(task => {
                                        employeeIds.push(task.assignee)
                                    })
                                }
                            }
                            else {
                                employeeIds = [user_id]
                            }
                        }
                    })
                // 无子节点
                } else {
                    if (currentNode.allows.includes('transfer')) {
                        if (['leader', 'deptLeader', 'post', 'user'].includes(currentNode.assigneeType)) {
                            if (currentNode.tasks && currentNode.tasks.length > 0) {
                                currentNode.tasks.forEach(task => {
                                    employeeIds.push(task.assignee)
                                })
                            }
                        }
                        else {
                            employeeIds = [user_id]
                        }
                    }
                    
                }
                
            }
                
            
            return employeeIds && employeeIds.length > 0 && employeeIds.includes(user_id) ? true : false
        },


        // 整个审批的状态 0，进行中 1，已完成
        reviewStatus() {
            return this.dialogData && this.dialogData.reviewStatus
        },
        // 自评节点
        scoreSelf() {
            // 通过解构赋予默认值
            const { nodes = [] } = this.dialogData && this.dialogData.flow || {};
            if (nodes.length > 0) {
                return this.dialogData.flow.nodes.find(node => node.type == 'scoreSelf')
            }
        },
        // 互评节点
        scoreEachOther() {
            // 通过解构赋予默认值
            const { nodes = [] } = this.dialogData && this.dialogData.flow || {};
            if (nodes.length > 0) {
                return this.dialogData.flow.nodes.find(node => node.type == 'scoreEachOther')
            }
        },
        // 评分节点
        scoreNode() {
            // 通过解构赋予默认值
            const { nodes = [] } = this.dialogData && this.dialogData.flow || {};
            if (nodes.length > 0) {
                return this.dialogData.flow.nodes.find(node => node.type == 'score')
            }
        },
        
    },

    mounted() {
        if (this.dialogData) {
            this.formData = cloneDeep(this.dialogData);
            this.comment = this.formData && this.formData.task && this.formData.task.comment ? this.formData.task.comment : ''
        }
        // 监听全局 focus 和 blur 事件
        document.addEventListener('focusin', this.handleGlobalFocus);
        document.addEventListener('focusout', this.handleGlobalBlur);
    },

    beforeDestroy() {
        // 移除全局事件监听器
        document.removeEventListener('focusin', this.handleGlobalFocus);
        document.removeEventListener('focusout', this.handleGlobalBlur);
    },
    

    methods: {

        closeEmployeeSelector() {
            this.showEmployeeSelector = false;
        },

        onEmployeeSelected(params) {
            console.log(params);
            this.employeeSelectedObj = params;
            this.$confirm('确定将当前任务转交给《' + params.employee[0].name + '》吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = `/performance/review/job/forward/${this.user_info.site_id}/${this.dialogData.reviewIndicatorId}`
                let { taskId } = this.dialogData.task
                let data = {
                    taskId,
                    employeeId: params.employee[0].id
                }

                this.loading = true;
                this.$http.post(url, data).then(res => {
                    let { data, code, message } = res

                    if (code == 1) {
                        this.$message.success('操作成功，已将当前任务转交给《' + params.employee[0].name + '》');
                        this.$emit('handleEditSuccess', data)
                        this.closeEmployeeSelector();
                    }
                    else this.$message.error(message || '操作失败');

                    this.loading = false;
                })

                
            }).catch(() => { });
            
        },

        handleInputTarget(value) {
            // 使用正则表达式限制输入
            const regex = /^([0-9])*$/; // 匹配非负整数

            // 如果输入值不符合正则表达式，则恢复为之前的值
            if (!regex.test(value)) {
                value = ''; // 重置输入框的值
                this.formData.task.score = 0
            } else {
                // 如果输入值符合正则表达式，更新绑定的值
                this.formData.target = Number(value);
            }
        },

        handleInputScore(value) {
            // 使用正则表达式限制输入
            const regex = /^([0-9])*$/; // 匹配非负整数

            // 如果输入值不符合正则表达式，则恢复为之前的值
            if (!regex.test(value)) {
                value = ''; // 重置输入框的值
                if (this.formData && this.formData.task && this.formData.task.score)
                    this.formData.task.score = 0
            } else {
                // 如果输入值符合正则表达式，更新绑定的值
                if (this.formData && this.formData.task && this.formData.task.score)
                    this.formData.task.score = Number(value);
            }
        },

        // 录入系统评分
        handleScore() {
            this.formData.task.score = this.dialogData.scoreExpression
        },

        dialogBeforeClose() {
            this.formData = null
            this.imgUrl = "";
            this.isShowImg = false;
            this.comment = '';
            this.$emit('close-dialog', false)
        },

        beforCommentDialogClose() {
            this.commentDialog = false;
        },

        handleFocus() {
            // 当 el-input 获得焦点时，设置标志变量为 true
            this.isInputFocused = true;
        },
        handleBlur() {
            // 当 el-input 失去焦点时，设置标志变量为 false
            this.isInputFocused = false;
        },
        handleGlobalFocus(event) {
            // 检查触发事件的元素是否是 input
            if (event.target.tagName.toLowerCase() === 'input') {
                this.isInputFocused = true;
                console.log('全局：有 input 获得焦点');
            }
        },
        handleGlobalBlur(event) {
            // 检查触发事件的元素是否是 input
            if (event.target.tagName.toLowerCase() === 'input') {
                this.isInputFocused = false;
                console.log('全局：input 失去焦点');
            }
        },

        // 编辑节点
        handleEdit: _debounce(function(type) { 
            this.loading = true;
            let { reviewIndicatorId } = this.dialogData
            let { taskId, nodeType } = this.dialogData.task
            let data = { taskId }
            if (type === 'scoreSelf' || type === 'scoreEachOther' || type === 'score') {
                data['score'] = this.formData.task['score'];
            }
            
            else data[type] = this.formData[type];
            let url;
            switch (nodeType) {
                // 确认目标
                case 'targetConfirm':
                    url = `/performance/review/target/confirm/${type}/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 录入结果值
                case 'resultInput':
                    url = `/performance/review/result/Input/${type}/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 自评
                case 'scoreSelf':
                    url = `/performance/review/score/self/score/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 互评
                case 'scoreEachOther':
                    url = `/performance/review/score/each/other/score/${this.user_info.site_id}/${reviewIndicatorId}`
                    break; 
                // 评分
                case 'score':
                    url = `/performance/review/score/score/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;  
                default:
                    break;
            }  
            if (!url) return 
            this.$http.post(url, data).then(res => {
                if (res.code == 1) {
                    let { data } = res
                    this.$emit('handleEditSuccess', data)
                }
                else this.$message.error(res.message || '操作失败');
                this.loading = false;
                this.handleBlur();
            })
        }, 100),

        confirmCommentDialog(type) {
            // 阻止事件冒泡，避免触发全局点击事件
            // event.stopPropagation();
            if(this.loading) return
            let { reviewIndicatorId } = this.dialogData;
            let { taskId, nodeType } = this.dialogData.task
            let url;
            switch (nodeType) {
                case 'targetConfirm':
                    url = `/performance/review/target/confirm/complete/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                case 'resultInput':
                    url = `/performance/review/result/Input/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 自评
                case 'scoreSelf':
                    url = `/performance/review/score/self/${this.user_info.site_id}/${reviewIndicatorId}`
                    break; 
                // 互评
                case 'scoreEachOther':
                    url = `/performance/review/score/each/other/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 评分
                case 'score':
                    url = `/performance/review/score/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                case 'review':
                    if (this.reject) url = `/performance/review/review/refuse/${this.user_info.site_id}/${reviewIndicatorId}`
                    else url = `/performance/review/review/pass/${this.user_info.site_id}/${reviewIndicatorId}`
                    break; 
                default:
                    break;
            }

            
            let data = {
                taskId,
                comment: this.comment,
                complete: type == 1 ? false : true // false 暂存，true 提交
            }

            // 提交时，提醒用户要提交附件
            if (type == 2) {
                if (!this.isUploadFile) {
                    return this.$message.warning("上传了附件，记得提交哦")
                }
                
            }
            this.$http.post(url, data).then(res => {
                if (type == 1) {
                    if (res.code == 1) { }
                    else this.$message.error(res.message || '操作失败');
                } else {
                    if (res.code == 1) {
                        this.$message.success("操作成功");
                        this.$emit("handleSuccess")
                        this.$emit('close-dialog', false);
                        this.formData = null;
                        this.commentDialog = false;
                        this.comment = "";
                        this.reject = false; // 驳回标识
                        this.uploadFileList = [];
                        this.fileList = [];
                    } else {
                        this.$message.error(res.message || '操作失败');
                    }
                }
                this.handleBlur();
            })
        },

        onFilePreView(file) {
            let imgFiles = ['BMP', 'GIF', 'PNG', 'JPEG', 'JPG', 'bmp', 'gif', 'png', 'jpeg', 'jpg'];
            let lastIndex = file.url && file.url.lastIndexOf("/") || -1
            let suffix; //文件后缀名

            if (lastIndex > 0) {
                suffix = file.url.substr(lastIndex + 1, file.url.length - 1).split(".")[1];
                if (imgFiles.includes(suffix)) {
                    this.imgUrl = file.url;
                    this.isShowImg = true;
                } else {
                    window.open(file.url, '_blank');
                }
            }
            
        },

        
        handleSuccess: _debounce(function (response, file, fileList) {
            
            this.uploadFileList = fileList.map(item => {
                return item.url;
            });
            this.isUploadFile = false;
        }),
        
        handleRemove(file, fileList) {
            setTimeout(() => {
                this.fileList = fileList;
                if (!(this.fileList && this.fileList.length > 0)) {
                    this.isUploadFile = true;
                }
            }, 500);
        },

        beforeFilesUpload(file) {
            const $ext_list = ['BMP', 'GIF', 'PNG', 'JPEG', 'JPG', 'bmp', 'gif', 'png', 'jpeg', 'jpg', 'xlsx', 'xls', 'doc', 'docx', 'pdf', 'XLSX', 'XLS', 'DOC', 'DOCX', 'PDF'];
            const isLt2M = file.size / 1024 / 1024 < 5;
            let len = file.name.split('.').length - 1;
            const $ext_name = file.name.split('.')[len];
            let isFile = $ext_list.indexOf($ext_name) != -1;
            if (!isLt2M) {
                this.$message.error('文件大小不能超过 5MB!');
            }
            if (!isFile) {
                this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls,doc,docx,pdf）');
            }
            return isFile && isLt2M;
        },





        comfirmUploadFiles() {
            this.isUploadFile = false;
            let { reviewIndicatorId } = this.dialogData
            let { taskId, nodeType } = this.dialogData.task
            let url;

            switch (nodeType) {
                // 结果值附件录入
                case 'resultInput':
                    url = `/performance/review/result/Input/result/file/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 自评附件录入
                case 'scoreSelf':
                    url = `/performance/review/score/self/files/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 互评附件录入
                case 'scoreEachOther':
                    url = `/performance/review/score/each/other/files/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 评分附件录入
                case 'score':
                    url = `/performance/review/score/files/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                // 审批附件录入
                case 'review':
                    url = `/performance/review/review/files/${this.user_info.site_id}/${reviewIndicatorId}`
                    break;
                default:
                    break;
            }
            
            let data = {
                taskId: taskId,
                files: this.uploadFileList
            }
            this.$http.post(url, data).then(res => {
                this.isUploadFile = true;
                let { code } = res
                if (code == 1) return this.$message.success("上传附件成功")
                else return this.$message.success("上传附件失败")
            })
        },

        closePreview() {
            this.imgUrl = "";
            this.isShowImg = false;
        },

        // 驳回
        reset() {
            this.reject = true;
            this.commentDialog = true;
        },
        // 提交
        confirm() {
            this.commentDialog = true;
        },
    }
}

</script>

<style lang="scss">

    .dialog-content { 
        .el-descriptions-item__label {
            width: 120px;
        }
    }

    .oneLine {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>


<style scoped="scoped" lang="scss">
.status-box {
    padding: 2px;
    display: inline-block;
    border: 1px solid;
    box-sizing: border-box;
    border-radius: 4px;
}
.green-color {
    border-color: #67C23A;
    color: #67C23A;
}


.gray-color {
    border-color: #f56c6c;
    color: #f56c6c;
}
.status-btn-box {
    width: 120px;
    height: 40px;
    z-index: 10;
    position: absolute;
    top: 20px;
    left: 20px;
    .status-btn {
        width: 100%;
        height: 100%;
        background: transparent;
        border: 2px dashed;
        text-align: center;
        font-size: 20px;
        line-height: 40px;
    }
}
.dialog-content {
    width: 100%;
    height: 450px;
    display: flex;
    .append-properties {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 6px;
        background-color: #f7f7f7;
        overflow-x: auto;
        margin-bottom: 5px;
        /* 设置滚动条的宽度和背景色 */
        &::-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;
        }
        .tips {
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            margin: 0 auto 10px auto;
        }

        table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            /* 合并表格边框 */
            border: 1px solid #ccc;
            /* 设置表格边框样式和颜色 */
            margin: 0 auto 10px auto;
            /* 设置表格外边距 */
            background-color: #f8f8f8;
            /* 设置表格背景颜色 */
            color: #000;
            /* 设置表格文字颜色 */
            text-align: center;
            /* 设置表格文字居中 */
            line-height: 40px;
            border-radius: 6px;

            /* 设置表格行高 */
            tr:nth-child(1) {
                background-color: #f2f2f2;
                /* 偶数行背景色 */
            }

            tr:nth-child(even) {
                background-color: #fff;
                /* 偶数行背景色 */
            }

            tr:nth-child(odd) {
                background-color: #f2f2f2;
                /* 奇数行背景色 */
            }

            td {
                width: 100px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

            }
        }
    }
    
    .dialog-content-left, .dialog-content-right {
        width: 50%;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .dialog-content-left {
        border-right: 1px solid #f1f1f1;
    }
    
    .dialog-content-right {
        width: 50%;
    }
    
}

.base-info-box {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    .label {
        display: flex;
        align-items: center;
        color: #606266;
        width: 120px;
        i {
            margin-right: 5px;
        }
    }
    .value {
        flex: 1;
    }
    .text-style {
        padding: 5px;
        border-radius: 4px;
        background: #f7f7f7;
        white-space: pre-line;
        box-sizing: border-box;
    }
}

.data-box {
    width: 500px;
    height: 60px;
    margin-bottom: 10px;

    .label {
        width: 160px;
        i {
            font-size: 16px;
            font-weight: 500;
            margin-right: 5px;
            color: #409EFF;
        }
    }

    .value {
        display: flex;
        align-items: center;
    }
}
</style>