<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">
|
<span
|
:class="
|
title === '同步库'
|
? 'iconfont icontongbuku_v'
|
: 'iconfont iconbendiku_v'
|
"
|
style="font-size: 32px"
|
></span>
|
<span class="m5">{{ title }}</span>
|
<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>
|
|
</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"
|
: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">
|
<span class="iconfont iconbendiku_v" style="font-size: 32px"></span>
|
<span class="m5">{{ titleB }}</span>
|
<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>
|
</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"
|
: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>
|
<!-- {{ item.startTime }}~{{
|
item.endTime ? item.endTime : "永久有效"
|
}} -->
|
</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) {
|
if (this.isAdmin) {
|
return true;
|
} else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
async init() {
|
await this.BaseManageData.querySyncTables();
|
this.syncTableList = this.BaseManageData.syncTables;
|
this.defaultShow();
|
await this.BaseManageData.queryLocalTables();
|
this.localTableList = this.BaseManageData.localTables;
|
this.defaultShow();
|
},
|
handleChange(val) {},
|
async setEnable(item) {
|
let res = await updateDbTableStatus({
|
id: item.id,
|
enable: item.enable,
|
});
|
if (res.success === true) {
|
this.$notify({
|
type: "success",
|
message: "底库成功变更生效状态！",
|
});
|
} else {
|
this.$notify({
|
type: "error",
|
message: "底库变更生效状态失败！",
|
});
|
}
|
},
|
add(type) {
|
this.$emit("changeShow", null, type);
|
},
|
isDisabled(item) {
|
var flag = true;
|
if (this.isShow("library:set")) {
|
if (item.endTime == "") {
|
flag = false;
|
} else {
|
flag = !this.$moment(new Date()).isBetween(
|
item.startTime,
|
item.endTime
|
);
|
}
|
}
|
return flag;
|
},
|
clickCategory(index, type, item) {
|
this.categoryIndex = type + index;
|
// 调用切换右侧面板的函数并且切换父组件中isSelected的值让另一个组件清除被选中状态
|
this.clickBase = item;
|
this.$emit("getList", item, type);
|
},
|
edit(item, type) {
|
this.$emit("changeShow", item, type);
|
},
|
deleteBase(id) {
|
let token =
|
sessionStorage.getItem("loginedInfo") &&
|
JSON.parse(sessionStorage.getItem("loginedInfo")).access_token;
|
this.$confirm("提示：确定删除底库？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure",
|
}).then(() => {
|
fetch(`/data/api-v/dbtable/deleteDBtablesById?id=${id}`, {
|
method: "GET",
|
headers: {
|
"Content-Type": "application/json",
|
Authorization: token,
|
},
|
})
|
.then((res) => {
|
return res.json();
|
})
|
.then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: "底库删除成功！",
|
});
|
}
|
this.init();
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: err,
|
});
|
});
|
});
|
},
|
// 默认显示第一个库的数据
|
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]);
|
}
|
}
|
},
|
// 添加时间比较函数
|
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;
|
}
|
},
|
dateCompare(dateString, compareDateString) {
|
// dateString:当前时间
|
// compareDateString:需要比较的时间
|
if (this.isEmpty(dateString)) {
|
return;
|
}
|
if (this.isEmpty(compareDateString)) {
|
return 1;
|
}
|
var dateTime = this.dateParse(dateString).getTime();
|
var compareDateTime = this.dateParse(compareDateString).getTime();
|
if (compareDateTime > dateTime) {
|
return 1;
|
} else if (compareDateTime === dateTime) {
|
return 0;
|
} else {
|
return -1;
|
}
|
},
|
},
|
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%;
|
.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 {
|
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>
|
