<template>
|
<div
|
:style="listWidth ? `width:${listWidth};` : ''"
|
class="out-div el-menu-vertical-demo"
|
>
|
<el-collapse v-model="activeNames">
|
<el-collapse-item name="1" class="el-collapse-item__wrap">
|
<template slot="title">
|
<img
|
v-if="title === '同步库'"
|
src="/images/library/同步库2.png"
|
alt=""
|
srcset=""
|
/>
|
<img v-else src="/images/library/本地库2.png" alt="" srcset="" />
|
<span class="m5">{{ title }}</span>
|
<el-tooltip content="添加同步库" placement="top">
|
<!-- popper-class="atooltip" -->
|
<span
|
class="iconfont icontianjiaku-09"
|
style="
|
font-size: 22px;
|
color: #666666;
|
position: absolute;
|
right: 10px;
|
"
|
@click.stop="add('sync')"
|
v-if="isShow('library:set')"
|
></span>
|
</el-tooltip>
|
</template>
|
<div class="max-height">
|
<el-row
|
class="p5 cursor-pointer"
|
v-for="(item, index) in syncTableList"
|
:key="item.id"
|
@click.native="clickCategory(index, 'sync', item)"
|
:class="{ activeRow: categoryIndex == 'sync' + index }"
|
>
|
<el-col
|
:span="12"
|
:class="item.bwType === '1' ? 'c-red' : 'c-green'"
|
>
|
<p
|
style="text-align: left; margin-left: 5px"
|
class="name-ellipsis"
|
:title="item.tableName"
|
>
|
<span
|
class="iconfont iconrenyuanku-09"
|
v-if="item.tableType == 'person'"
|
></span>
|
<span
|
class="iconfont iconcheliangku-09"
|
v-if="item.tableType == 'car'"
|
></span>
|
<span style="font-size: 14px; font-weight: bold">
|
{{ item.tableName }}</span
|
>
|
</p>
|
</el-col>
|
<el-col :span="10" :offset="1">
|
<div
|
class="status-dot"
|
:class="item.enable == 1 ? 'status-dot-active' : ''"
|
:style="item.enable == 1 ? { background: '#4E94FF' } : {}"
|
></div>
|
</el-col>
|
<el-col
|
:span="24"
|
style="
|
text-align: left;
|
margin-left: 5px;
|
color: #888888;
|
font-size: 12px;
|
line-height: 17px;
|
"
|
>
|
<div class="time-start">{{ item.startTime }}~</div>
|
<div class="time-end">
|
{{ item.endTime ? item.endTime : "永久有效" }}
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item name="2" class="el-collapse-item__wrap">
|
<template slot="title">
|
<img src="/images/library/本地库2.png" alt="" srcset="" />
|
<span class="m5">{{ titleB }}</span>
|
<el-tooltip content="添加同步库" placement="top">
|
<span
|
class="iconfont icontianjiaku-09"
|
style="
|
font-size: 22px;
|
color: #666666;
|
position: absolute;
|
right: 10px;
|
"
|
@click.stop="add('local')"
|
v-if="isShow('library:set')"
|
></span>
|
</el-tooltip>
|
</template>
|
<div class="max-height">
|
<el-row
|
class="p5 cursor-pointer"
|
v-for="(item, index) in localTableList"
|
:key="item.id"
|
@click.native="clickCategory(index, 'local', item)"
|
:class="{ activeRow: categoryIndex == 'local' + index }"
|
>
|
<el-col
|
:span="12"
|
:class="item.bwType === '1' ? 'c-red' : 'c-green'"
|
>
|
<p
|
style="text-align: left; margin-left: 5px"
|
class="name-ellipsis"
|
:title="item.tableName"
|
>
|
<span
|
class="iconfont iconrenyuanku-09"
|
v-if="item.tableType == 'person'"
|
></span>
|
<span
|
class="iconfont iconcheliangku-09"
|
v-if="item.tableType == 'car'"
|
></span>
|
<span> {{ item.tableName }}</span>
|
</p>
|
</el-col>
|
<el-col :span="10" :offset="1">
|
<div
|
class="status-dot"
|
:class="item.enable == 1 ? 'status-dot-active' : ''"
|
:style="item.enable == 1 ? { background: '#4E94FF' } : {}"
|
></div>
|
</el-col>
|
<el-col
|
:span="24"
|
style="
|
text-align: left;
|
margin-left: 5px;
|
color: #888888;
|
font-size: 12px;
|
line-height: 17px;
|
"
|
>
|
<div class="time-start">{{ item.startTime }}~</div>
|
<div class="time-end">
|
{{ item.endTime ? item.endTime : "永久有效" }}
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
<script>
|
import { updateDbTableStatus } from "@/api/baseLibrary";
|
export default {
|
name: "baseList",
|
data() {
|
return {
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
|
activeNames: ["1", "2"],
|
categoryIndex: "",
|
syncTableList: [],
|
localTableList: [],
|
clickBase: {}, // 当前点击的底库对象
|
};
|
},
|
computed: {
|
isAdmin() {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "superadmin" || loginName === "basic";
|
}
|
return false;
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
methods: {
|
isShow(authority) {
|
return (
|
this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
|
);
|
},
|
async init(typ) {
|
await this.BaseManageData.querySyncTables();
|
this.syncTableList = this.BaseManageData.syncTables;
|
if (typ) {
|
this.$emit("getList");
|
} else {
|
this.defaultShow();
|
}
|
await this.BaseManageData.queryLocalTables();
|
this.localTableList = this.BaseManageData.localTables;
|
if (typ) {
|
this.$emit("getList");
|
} else {
|
this.defaultShow();
|
}
|
},
|
add(type) {
|
this.$emit("changeShow", null, type);
|
},
|
clickLast(type) {
|
// this.$nextTick(() => {
|
|
// });
|
this.clickCategory(
|
this.syncTableList.length - 1,
|
type,
|
this.syncTableList[this.syncTableList.length - 1]
|
);
|
},
|
clickCategory(index, type, item) {
|
this.categoryIndex = type + index;
|
// 调用切换右侧面板的函数并且切换父组件中isSelected的值让另一个组件清除被选中状态
|
this.clickBase = item;
|
this.$emit("getList", item, type);
|
},
|
// 默认显示第一个库的数据
|
defaultShow() {
|
if (this.syncTableList && this.syncTableList.length) {
|
this.clickCategory(0, "sync", this.syncTableList[0]);
|
} else
|
if (this.localTableList && this.localTableList.length) {
|
this.clickCategory(0, "local", this.syncTableList[0]);
|
}
|
else {
|
console.log("this.localTableList.length",this.localTableList.length)
|
}
|
},
|
// 添加时间比较函数
|
dateParse(dateString) {
|
var SEPARATOR_BAR = "-";
|
var SEPARATOR_SLASH = "/";
|
var SEPARATOR_DOT = ".";
|
var dateArray;
|
if (dateString.indexOf(SEPARATOR_BAR) > -1) {
|
dateArray = dateString.split(SEPARATOR_BAR);
|
} else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
|
dateArray = dateString.split(SEPARATOR_SLASH);
|
} else {
|
dateArray = dateString.split(SEPARATOR_DOT);
|
}
|
return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
|
},
|
isEmpty(str) {
|
if (!str || str === undefined || str === null) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
},
|
props: {
|
listWidth: {
|
default: "224px",
|
type: String,
|
},
|
title: {
|
default: "同步库",
|
type: String,
|
},
|
titleB: {
|
default: "本地库",
|
type: String,
|
},
|
isSelected: {
|
default: false,
|
type: Boolean,
|
},
|
type: {
|
default: "",
|
type: String,
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.iconStyle1 {
|
font-size: 18px;
|
margin-left: 15px;
|
cursor: pointer;
|
}
|
|
.cursor-pointer {
|
cursor: pointer;
|
}
|
.max-height {
|
max-height: 350px;
|
.el-col-10 {
|
height: 28px;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
width: auto;
|
float: right;
|
margin-right: 10px;
|
}
|
.el-col-12 {
|
width: auto;
|
}
|
.status-dot {
|
background: #bbbbbb;
|
height: 8px;
|
width: 8px;
|
border-radius: 50%;
|
}
|
}
|
.c-red {
|
color: red;
|
font-size: 14px;
|
}
|
.c-green {
|
color: #222222 100%;
|
font-size: 14px;
|
}
|
.out-div {
|
max-height: 100%;
|
height: 100%;
|
.el-collapse-item__header {
|
position: relative;
|
}
|
.el-collapse-item__wrap {
|
will-change: height;
|
background-color: #fff;
|
overflow: hidden;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
border-bottom: 0px solid #ebeef5;
|
}
|
.el-collapse-item__arrow {
|
display: none;
|
}
|
.el-row {
|
border-radius: 9px;
|
background: rgba(239, 241, 245, 0.35);
|
margin-bottom: 4px;
|
min-height: 72px;
|
box-sizing: border-box;
|
padding: 10px 5px;
|
}
|
.time-start {
|
display: inline-block;
|
}
|
.time-end {
|
display: inline-block;
|
}
|
.activeRow {
|
background: var(--colorCard);
|
color: #fff;
|
.time-start {
|
color: #e9e9e9;
|
}
|
.time-end {
|
color: #e9e9e9;
|
}
|
.status-dot-active {
|
background: #fff !important;
|
}
|
}
|
}
|
.name-ellipsis {
|
max-width: 160px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin: 0 auto;
|
display: flex;
|
align-items: center;
|
.iconfont {
|
font-size: 24px;
|
margin-right: 5px;
|
line-height: 28px;
|
}
|
}
|
.m5 {
|
margin-left: 10px;
|
font-weight: bold;
|
font-size: 16px;
|
color: #5f5f5f;
|
font-family: PingFang SC;
|
}
|
.p5 {
|
padding: 6px;
|
}
|
</style>
|