|
@@ -1,287 +0,0 @@
|
|
|
-<!--
|
|
|
- 自定义时间轴
|
|
|
- @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>
|
|
|
- 机构配额:<span class="color-blue">{{ childItem.number }}</span>
|
|
|
- </p>
|
|
|
- <p class="line-sub-title">
|
|
|
- 操作人姓名:
|
|
|
- <span class="line-sub-text">{{ childItem.operateUserName }}</span>
|
|
|
- 单位名称:
|
|
|
- <span class="line-sub-text">{{ childItem.operateOrgName }}</span>
|
|
|
- 操作时间:
|
|
|
- <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>
|