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

<template>
    <el-dialog :title="dialogTitle" center :visible.sync="dialogVisible" width="600px" @close="save">
        <div>
            <div class="tips">自定义属性（只有通过excel上传发布的指标才有）</div>
            <el-table :data="tableData" style="width: 100%; margin-bottom: 10px;" border stripe>
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="resume" label="考核结论" align="center">
                </el-table-column>
                <el-table-column prop="project" label="考核项目" align="center">
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                </el-table-column>
                <el-table-column prop="resource" label="数据来源" align="center">
                </el-table-column>
            </el-table>
            <div class="data-box">
                <div class="label">考核人</div>
                <div class="value">{{ dialogData.task && dialogData.task.assigneeName || '--' }}</div>
            </div>

            <div class="data-box">
                <div class="label">考核名称</div>
                <div class="value">{{ dialogData.reviewTitle || '--' }}</div>
            </div>

            <div class="data-box">
                <div class="label">考核周期</div>
                <div class="value">{{ dialogData.startTime | formatDate }} 至 {{ dialogData.startTime | formatDate }}
                </div>
            </div>

            <div class="data-box" v-if="activeName == 1">
                <div class="label">指标</div>
                <div class="value">
                    <el-input v-model="dialogData.title" placeholder="指标标题" style="width: 300px;" clearable
                        @blur="handleEdit('title')"></el-input>
                </div>
            </div>

            <div class="data-box" v-else>
                <div class="label">指标</div>
                <div class="value">
                    {{ dialogData.title }}
                </div>
            </div>

            <div class="data-box" style="margin: 30px auto;" v-if="activeName == 1">
                <div class="label">规则</div>
                <div class="value">
                    <el-input type="textarea" v-model="dialogData.content" placeholder="规则说明" style="width: 300px;"
                        clearable @blur="handleEdit('content')"></el-input>
                </div>
            </div>


            <div class="data-box" v-else>
                <div class="label">规则</div>
                <div class="value">
                    {{ dialogData.content }}
                </div>
            </div>

            <div class="data-box" v-if="activeName == 1">
                <div class="label">目标</div>
                <div class="value">
                    <el-input placeholder="目标值" v-model="dialogData.target" style="width: 300px;" clearable
                        @blur="handleEdit('target')"></el-input>
                </div>
            </div>

            <div class="data-box" v-else>
                <div class="label">目标</div>
                <div class="value">
                    {{ dialogData.target }}
                </div>
            </div>

            <div class="data-box" v-if="activeName == 1">
                <div class="label">单位</div>
                <div class="value">
                    <el-input placeholder="单位值" v-model="dialogData.unit" style="width: 300px;" clearable
                        @blur="handleEdit('unit')"></el-input>
                </div>
            </div>


            <div class="data-box" v-else>
                <div class="label">单位</div>
                <div class="value">
                    {{ dialogData.unit }}
                </div>
            </div>

            <div class="data-box" v-if="activeName == 2">
                <div class="label">结果值</div>
                <div class="value">
                    <el-input placeholder="结果值" v-model="dialogData.result" style="width: 300px;" clearable
                        @blur="handleEdit('result')"></el-input>
                </div>
            </div>

            <div class="data-box" v-else-if="activeName > 2">
                <div class="label">结果值</div>
                <div class="value">
                    {{ dialogData.result }}
                </div>
            </div>

            <!-- 评分 -->
            <div class="data-box" v-if="activeName >= 3">
                <div class="label">评分</div>
                <div class="value">
                    <el-input placeholder="评分" v-model="dialogData.scoreSelf" style="width: 300px;"
                        clearable></el-input>
                </div>
            </div>
            <!-- 评价 -->
            <div class="data-box" v-if="activeName >= 3">
                <div class="label">评价</div>
                <div class="value">
                    <el-input placeholder="评价" v-model="dialogData.unit" style="width: 300px;" clearable></el-input>
                </div>
            </div>

        </div>
        <div slot="footer">
            <el-button @click="save">暂 存</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
export default {
    props: {
        activeName: {
            type: String,
            default: "1"
        },
        dialogTitle: {
            type: String,
            default: ""
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        dialogData: {
            type: Object,
            default: () => {}
        }
    },
    filters: {
        formatDate(val) {
            if (val) return moment(val).format('YYYY-MM-DD')
            else return "--"
        }
    },
    data() {
        return {
            tableData: [
                { resume: "随便写点什么", project: "人事年终考核", remark: "备注", resource: "数据来源" }
            ]
        }
    },
    computed: {
        ...mapGetters(['user_info'])
    },
    methods: {
        dialogBeforeClose() {

        },
        save() {
            this.$emit("close")
        },
        confirm() {
            this.$emit("close")
        },
        handleEdit(type) { 
            let { reviewIndicatorId } = this.dialogData
            let { taskId } = this.dialogData.task
            let data = { taskId }
            data[type] = this.dialogData[type]
            this.$http.post(`/performance/review/target/confirm/${type}/${this.user_info.site_id}/${reviewIndicatorId}`, data)
        }
    }
}

</script>


<style scoped="scoped" lang="scss">

.tips {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    margin: 0 auto 10px auto;
}

.data-box {
    width: 500px;
    height: 30px;
    display: flex;
    align-items: center;
    margin: 0 auto 10px auto;

    .label {
        width: 100px;
    }
}

</style>