auth-web/src/pages/log-report/persionnel-author-audit/timeLine.vue

<!--
    文件描述 自定义时间轴
    @Author:laiyh
    @Date:  2020-08-03
-->
<template>
    <div>
        <p v-if="timeData.length == 0 || !year" class="no-data">暂无对应的授权管理范围审计信息</p>
        <el-timeline :reverse="reverse" class="my-time-line" v-if="timeData && timeData.length > 0">
            <template>
                <h1 class="header-year" @click="doShowHide($event, year)">
                    {{ year }}年 <span class="turn-down"></span>
                </h1>
                <h1 class="header-title"><i class="el-icon-time"></i>{{ title }}</h1>
                <el-timeline-item
                    color="#3cdab4"
                    placement="top"
                    v-for="(childItem, childInde) in showTimeData"
                    :key="'childTime' + Math.random()"
                    :class="'year-child' + year"
                >
                    <!--<span class="dateMonth">{{ childItem.dateStr }}</span>-->
                    <div v-show="childItem.auditType == 'role'">
                        <h4 class="line-title">角色创建</h4>
                        <p class="line-sub-title">
                            操作人：
                            <span class="line-sub-text">{{
                                roleCreatorName == null || roleInfo.creator == "" ? "无" : roleCreatorName
                            }}</span>
                            &nbsp;&nbsp;&nbsp; 所属机构：
                            <span class="line-sub-text">{{
                                roleCreatorOrg == null || roleInfo.creator == "" ? "无" : roleCreatorOrg
                            }}</span>
                            &nbsp;&nbsp;&nbsp; 操作时间：
                            <span class="line-sub-text">{{ childItem.createTime }}</span>
                        </p>
                    </div>
                    <div v-show="childItem.auditType == 'orgQutoLogMaps'">
                        <h4 class="line-title">机构配额设置</h4>
                        <p class="line-sub-title">
                            机构名称：<span class="line-sub-text">{{ childItem.targetOrgName }}</span>
                            &nbsp;&nbsp;机构配额：<span class="line-sub-text">{{ childItem.number }}</span>
                        </p>
                        <p class="line-sub-title">
                            操作人：
                            <span class="line-sub-text">{{
                                childItem.managerName == null || childItem.managerName == ""
                                    ? "无"
                                    : childItem.managerName
                            }}</span>
                            &nbsp;&nbsp;&nbsp; 所属机构：
                            <span class="line-sub-text">{{ childItem.managerOrg }}</span>
                            &nbsp;&nbsp;&nbsp; 操作时间：
                            <span class="line-sub-text">{{ childItem.createTime }}</span>
                        </p>
                    </div>
                    <div v-show="childItem.auditType == 'roleAuthList'">
                        <h4 class="line-title">角色权限分配</h4>
                        <p class="line-sub-title">
                            权限信息：<span class="color-blue">{{ childItem.name }}</span>
                        </p>
                        <p class="line-sub-title">
                            操作人：
                            <span class="line-sub-text">{{
                                childItem.createUserName == null || childItem.createUserName == ""
                                    ? "无"
                                    : childItem.createUserName
                            }}</span>
                            &nbsp;&nbsp;&nbsp; 所属机构：
                            <span class="line-sub-text">{{ childItem.createUserOrg }}</span>
                            &nbsp;&nbsp;&nbsp; 操作时间：
                            <span class="line-sub-text">{{ childItem.createTime }}</span>
                        </p>
                    </div>
                    <div v-show="childItem.auditType == 'logMaps'">
                        <h4 class="line-title">人员授权</h4>
                        <p class="line-sub-title">
                            分配角色：<span class="color-blue">{{ roleInfo.name }}</span>
                        </p>
                        <p class="line-sub-title">
                            操作：<span class="color-blue" v-show="childItem.status == 10"
                                >新增&nbsp;&nbsp;&nbsp;&nbsp;{{ childItem.changeContent }}</span
                            >
                            <span class="color-blue" v-show="childItem.status == 20"
                                >修改&nbsp;&nbsp;&nbsp;&nbsp;修改内容：{{ childItem.changeContent }}</span
                            >
                            <span class="color-blue" v-show="childItem.status == 30">取消授权</span>
                        </p>
                        <p class="line-sub-title">
                            操作人：
                            <span class="line-sub-text">{{
                                childItem.managerName == null || childItem.managerName == ""
                                    ? "无"
                                    : childItem.managerName
                            }}</span>
                            &nbsp;&nbsp;&nbsp; 所属机构：
                            <span class="line-sub-text">{{ childItem.managerOrg }}</span>
                            &nbsp;&nbsp;&nbsp; 操作时间：
                            <span class="line-sub-text">{{ childItem.createTime }}</span>
                        </p>
                    </div>
                </el-timeline-item>
            </template>
        </el-timeline>
    </div>
</template>

<script>
import dayjs from "dayjs";
export default {
    name: "timeLine",
    // 接收父页面传过来的属性
    props: {
        title: {
            type: String || Number,
            default: ""
        },
        year: {
            type: String,
            default: ""
        },
        timeData: {
            type: Array,
            required: false,
            default: () => {
                return [];
            }
        },
        roleCreatorName: {
            type: String,
            default: ""
        },
        roleCreatorOrg: {
            type: String,
            default: ""
        },
        roleInfo: {
            type: Object,
            default: () => {}
        },
        // 审计类型
        auditType: {
            type: String,
            required: true,
            default: ""
        },
        reverse: {
            type: Boolean,
            default: false
        }
    },
    // 页面数据绑定
    data() {
        return {
            formData: []
        };
    },
    // 计算属性
    computed: {
        // TODO 最好不要去尝试改变父组件的参数
        showTimeData() {
            return this.timeData.map(item => {
                let tmp = item;
                if (tmp.createTime) {
                    tmp.createTime = dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss");
                }
                return tmp;
            });
        }
    },
    mounted() {
        // for (let i = 0; i < this.timeData.length; i++) {
        //     let obj = {
        //         YEAR: "",
        //         childrens: []
        //     };
        //     if (this.timeData[i].operateTime) {
        //         let arr1 = this.timeData[i].operateTime.split(" ");
        //         let arr2 = arr1[0].split("-");
        //         if (this.formData.length == 0) {
        //             obj.YEAR = arr2[0];
        //             obj.childrens.push({
        //                 ...this.timeData[i],
        //                 dateStr: arr2[1] + "月" + arr2[2] + "日"
        //             });
        //             this.formData.push(obj);
        //         } else {
        //             let falg = false;
        //             let index;
        //             for (let j = 0; j < this.formData.length; j++) {
        //                 if (arr2[0] == this.formData[j].YEAR) {
        //                     falg = true;
        //                     index = j;
        //                     break;
        //                 }
        //             }
        //             if (!falg) {
        //                 obj.YEAR = arr2[0];
        //                 obj.childrens.push({ ...this.timeData[i], dateStr: arr2[1] + "月" + arr2[2] + "日" });
        //                 this.formData.push(obj);
        //             } else {
        //                 this.formData[index].YEAR = arr2[0];
        //                 this.formData[index].childrens.push({
        //                     ...this.timeData[i],
        //                     dateStr: arr2[1] + "月" + arr2[2] + "日"
        //                 });
        //             }
        //         }
        //     }
        // }
    },
    // 方法
    methods: {
        doShowHide(e, year) {
            // console.log(year);
            let $span = $(e.target);
            if ($span && $span.hasClass("turn-right")) {
                // console.log(1);
                $span.removeClass("turn-right");
                $(".year-child" + year).slideDown(1000);
            } else {
                $span.addClass("turn-right");
                $(".year-child" + year).slideUp(1000);
            }
        }
    },
    // 创建组件时调用
    created() {
        // debugger;
    }
};
</script>

<style scope lang="scss">
.no-data {
    font-size: 20px;
    margin: 50px auto 0;
    width: 50%;
}
/deep/.el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
    display: block;
}
.my-time-line {
    padding-left: 160px;
    position: relative;
    .header-year {
        position: absolute;
        left: 50px;
        color: #00bbff;
        font-size: 25px;
    }
    .turn-down {
        width: 0;
        height: 0;
        border-width: 7px 7px 0 7px;
        border-color: black transparent transparent transparent;
        border-style: solid;
        position: absolute;
        top: 16px;
        left: 90px;
        cursor: pointer;
    }
    .turn-right {
        transform: rotate(-90deg);
    }
    .el-timeline-item__timestamp.is-top {
        margin-bottom: 0;
        padding-top: 0;
        color: #c3c3c3;
        font: normal 18px/16px Arial;
    }
    .dateMonth {
        position: absolute;
        left: -84px;
        top: -3px;
        color: #c3c3c3;
        font-size: 18px;
    }
    .header-title {
        font-size: 25px;
        margin-bottom: 20px;
        i {
            font-size: 30px;
            color: green;
            margin-right: 20px;
        }
    }
    .el-timeline-item__node--normal {
        left: 8px;
    }
    .el-timeline-item__tail {
        left: 13px;
    }

    .line-title {
        margin-bottom: 12px;
        font: 20px/22px 微软雅黑;
        color: #737373;
    }
    .line-sub-title {
        color: #787878;
        font-size: 12px;
        .color-blue {
            font-size: 15px;
            color: #5e8afa;
        }
    }
    .line-sub-text {
        font-size: 15px;
    }
}
</style>