auth-web/src/pages/common/time-line/index.vue

<!--
     自定义时间轴
    @Author:laiyh
    @Date:  2020-08-03
-->
<template>
    <div>
        <p v-if="formData.length == 0" class="no-data">暂无对应的授权管理范围审计信息</p>
        <el-timeline :reverse="reverse" class="my-time-line" v-if="formData && formData.length > 0">
            <template v-for="(item, index) in formData">
                <h1 class="header-year" :id="'year' + index" @click="doShowHide($event, index)">
                    {{ item.YEAR }}年 <span class="turn-down"></span>
                </h1>
                <h1 class="header-title"><i class="el-icon-time"></i>{{ title }}</h1>
                <el-timeline-item
                    :timestamp="item.date"
                    color="#3cdab4"
                    placement="top"
                    v-for="(childItem, childInde) in item.childrens"
                    :key="'childTime' + Math.random()"
                    :class="'year-child' + index"
                >
                    <span class="dateMonth">{{ childItem.dateStr }}</span>
                    <h4 class="line-title">{{ transformOperateType(childItem) }}</h4>
                    <p class="line-sub-title">
                        授权管理机构：<span class="color-blue">{{ childItem.objectName }}</span>
                        &nbsp;&nbsp;&nbsp;机构配额：<span class="color-blue">{{ childItem.number }}</span>
                    </p>
                    <p class="line-sub-title">
                        操作人姓名：
                        <span class="line-sub-text">{{ childItem.operateUserName }}</span>
                        &nbsp;&nbsp;&nbsp; 单位名称：
                        <span class="line-sub-text">{{ childItem.operateOrgName }}</span>
                        &nbsp;&nbsp;&nbsp; 操作时间：
                        <span class="line-sub-text">{{ childItem.operateTime }}</span>
                    </p>
                </el-timeline-item>
            </template>
        </el-timeline>
    </div>
</template>

<script>
export default {
    name: "index",
    // 接收父页面传过来的属性
    props: {
        title: {
            type: String,
            default: ""
        },
        timeData: {
            type: Array,
            required: false,
            default: () => {
                return [];
            }
        },
        // 审计类型
        auditType: {
            type: String,
            required: true,
            default: ""
        },
        reverse: {
            type: Boolean,
            default: false
        }
    },
    // 页面数据绑定
    data() {
        return {
            formData: []
        };
    },
    // 计算属性
    computed: {},
    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] + "日"
                        });
                    }
                }
            }
        }
        // console.log(this.formData);
    },
    // 方法
    methods: {
        transformOperateType({ operateType, objectType }) {
            let transformString = "";
            if (this.auditType == "user_audit") {
                if (operateType == "10") {
                    transformString = "新增";
                } else if (operateType == "20") {
                    transformString = "修改";
                } else if (operateType == "30") {
                    transformString = "删除";
                } else if (operateType == "40") {
                    transformString = "审批通过";
                } else if (operateType == "41") {
                    transformString = "审批不通过";
                } else if (operateType == "50") {
                    transformString = "启用";
                } else if (operateType == "51") {
                    transformString = "停用";
                } else if (operateType == "61") {
                    transformString = "入职";
                } else if (objectType == "62") {
                    transformString = "离职";
                } else {
                    transformString = "";
                }
            }
            if (this.auditType == "org_audit") {
                if (operateType == "10") {
                    transformString = "新增机构";
                } else if (operateType == "20") {
                    transformString = "修改机构";
                } else if (operateType == "30") {
                    transformString = "删除机构";
                } else if (operateType == "40") {
                    transformString = "调离机构";
                } else if (operateType == "50") {
                    transformString = "合并机构";
                } else {
                    transformString = "";
                }
            } else {
                if (operateType == "10") {
                    transformString = "管理员创建";
                } else if (operateType == "11") {
                    transformString = "管理员删除";
                } else if (operateType == "20") {
                    transformString = "平台菜单权限新增";
                } else if (operateType == "21") {
                    transformString = "平台菜单权限移除";
                } else if (operateType == "30") {
                    transformString = "机构管理范围新增";
                } else if (operateType == "31") {
                    transformString = "机构管理范围变更";
                } else if (operateType == "40") {
                    transformString = "用户管理范围新增";
                } else if (operateType == "41") {
                    transformString = "用户管理范围变更";
                } else if (objectType == "50") {
                    transformString = "授权管理范围新增";
                } else if (objectType == "51") {
                    transformString = "授权管理范围变更";
                } else if (objectType == "60") {
                    transformString = "管理员管理范围新增";
                } else if (objectType == "61") {
                    transformString = "管理员管理范围变更";
                } else {
                    transformString = "";
                }
            }
            return transformString;
        },
        doShowHide(e, index) {
            // console.log(e);
            let $span = $(e.target).children();
            if ($span && $span.hasClass("turn-right")) {
                // console.log(1);
                $span.removeClass("turn-right");
                $(".year-child" + index).slideDown(1000);
            } else {
                $span.addClass("turn-right");
                $(".year-child" + index).slideUp(1000);
            }
        }
    },
    // 创建组件时调用
    created() {}
};
</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: 5px 5px 0 5px;
        border-color: black transparent transparent transparent;
        border-style: solid;
        position: absolute;
        top: 16px;
        left: 90px;
    }
    .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: rgba(0, 0, 255, 0.72);
        }
    }
    .line-sub-text {
        font-size: 15px;
    }
}
</style>