<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 iconshuaxintongbu':'iconfont iconwenjianjia'"
|
style="font-size:18px;"
|
></span>
|
<span class="m5">{{title}}</span>
|
<i
|
class="el-icon-circle-plus-outline ml10"
|
style="font-size:20px;color:#3D68E1;"
|
@click.stop="add('sync')"
|
v-if="isShow('library:set')"
|
></i>
|
<span
|
class="m5"
|
style="font-size:14px;color:#3D68E1;"
|
@click.stop="add('sync')"
|
v-if="isShow('library:set')"
|
>新增</span>
|
</template>
|
<div class="max-height">
|
<el-row
|
class="p10 cursor-pointer"
|
v-for="(item, index) in data"
|
: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:10px"
|
class="name-ellipsis"
|
:title="item.tableName"
|
>{{item.tableName}}</p>
|
</el-col>
|
<el-col :span="10" :offset="1">
|
<el-switch
|
:active-value="1"
|
:inactive-value="0"
|
v-model="item.enable"
|
size="small"
|
style="margin-top:-7px"
|
:disabled="isDisabled(item)"
|
@change="enable(item)"
|
>
|
<!-- :disabled="isDisa(item)" -->
|
</el-switch>
|
<el-tooltip content="编辑" placement="top" popper-class="atooltip">
|
<span
|
class="iconfont iconbianji iconStyle1"
|
@click.stop="edit(item,'sync')"
|
v-if="isShow('library:set')"
|
></span>
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top" popper-class="atooltip">
|
<span
|
class="iconfont iconshanchu iconStyle1"
|
style="color:#E74C3C;"
|
v-if="isShow('library:set')"
|
@click.stop="deleteBase(item.id)"
|
></span>
|
</el-tooltip>
|
</el-col>
|
<el-col
|
:span="24"
|
style="text-align:left;margin-left:10px; color:#888888"
|
>{{item.startTime}}~{{item.endTime?item.endTime:'永久有效'}}</el-col>
|
</el-row>
|
</div>
|
</el-collapse-item>
|
<el-collapse-item name="2" class="el-collapse-item__wrap">
|
<template slot="title">
|
<span class="iconfont iconwenjianjia" style="font-size:18px;"></span>
|
<span class="m5">{{titleB}}</span>
|
<i
|
class="el-icon-circle-plus-outline ml10"
|
style="font-size:20px;color:#3D68E1;"
|
@click.stop="add('local')"
|
v-if="isShow('library:set')"
|
></i>
|
<span
|
class="m5"
|
style="font-size:14px;color:#3D68E1;"
|
@click.stop="add('local')"
|
v-if="isShow('library:set')"
|
>新增</span>
|
</template>
|
<div class="max-height">
|
<el-row
|
class="p10 cursor-pointer"
|
v-for="(item, index) in dataB"
|
: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:10px"
|
class="name-ellipsis"
|
:title="item.tableName"
|
>{{item.tableName}}</p>
|
</el-col>
|
<el-col :span="10" :offset="1">
|
<el-switch
|
:active-value="1"
|
:inactive-value="0"
|
v-model="item.enable"
|
size="small"
|
style="margin-top:-7px"
|
:disabled="isDisabled(item)"
|
@change="enable(item)"
|
></el-switch>
|
<el-tooltip content="编辑" placement="top" popper-class="atooltip">
|
<span
|
class="iconfont iconbianji iconStyle1"
|
@click.stop="edit(item,'local')"
|
v-if="isShow('library:set')"
|
></span>
|
</el-tooltip>
|
<el-tooltip content="删除" placement="top" popper-class="atooltip">
|
<span
|
class="iconfont iconshanchu iconStyle1"
|
style="color:#E74C3C;"
|
v-if="isShow('library:set')"
|
@click.stop="deleteBase(item.id)"
|
></span>
|
</el-tooltip>
|
</el-col>
|
<el-col
|
:span="24"
|
style="text-align:left;margin-left:10px; color:#888888"
|
>{{item.startTime}}~{{item.endTime?item.endTime:'永久有效'}}</el-col>
|
</el-row>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
<script>
|
// const data = [{ name: '吸毒库', id: '1', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' },
|
// { name: '在逃库', id: '2', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' }, { name: '吸毒库', id: '3', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' },
|
// { name: '在逃库', id: '4', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' }]
|
import { updateDbTableStatus } from '@/api/baseLibrary'
|
export default {
|
name: 'baseList',
|
data() {
|
return {
|
buttonAuthority: sessionStorage.getItem('buttonAuthoritys') || [],
|
activeNames: ['1', '2'],
|
categoryIndex: '',
|
data: [],
|
dataB: [],
|
clickBase: {} // 当前点击的底库对象
|
}
|
},
|
computed: {
|
// eslint-disable-next-line vue/return-in-computed-property
|
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() {
|
// console.log("执行了init没")
|
await this.BaseManageData.querySyncTables()
|
this.data = this.BaseManageData.syncTables
|
this.defaultShow()
|
await this.BaseManageData.queryLocalTables()
|
this.dataB = this.BaseManageData.localTables
|
this.defaultShow()
|
},
|
handleChange(val) {
|
console.log(val)
|
},
|
async enable(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.$emit('clearSelected')
|
this.clickBase = item
|
this.$emit('getList', item)
|
},
|
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}`, {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json',
|
'Authorization': token
|
}
|
}).then(res => {
|
return res.json()
|
}).then(data => {
|
console.log(data.data)
|
if (data.success) {
|
this.$notify({
|
type: 'success',
|
message: '底库删除成功！'
|
})
|
}
|
this.init()
|
}).catch(err => {
|
this.$notify({
|
type: 'error',
|
message: err
|
})
|
})
|
})
|
},
|
// 默认显示第一个库的数据
|
defaultShow() {
|
// console.log(this.data.length,'defaultShow')
|
if (this.data !== undefined && this.data.length > 0) {
|
this.clickCategory(0, 'sync', this.data[0])
|
} else {
|
if (this.dataB !== undefined && this.dataB.length > 0) {
|
this.clickCategory(0, 'local', this.data[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)) {
|
// alert('dateString不能为空')
|
return
|
}
|
if (this.isEmpty(compareDateString)) {
|
// alert('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
|
}
|
},
|
// 左侧底库生效开关是否启用判断
|
// isDisa(data) {
|
// if (!this.isShow('library:set')) {
|
// return true
|
// } else {
|
// return false
|
// }
|
// }
|
},
|
props: {
|
listWidth: {
|
default: '300px',
|
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;
|
}
|
.activeRow {
|
background: rgb(245, 247, 250);
|
}
|
.cursor-pointer {
|
cursor: pointer;
|
}
|
.max-height {
|
max-height: 350px;
|
}
|
.c-red {
|
color: red;
|
font-size: 14px;
|
}
|
.c-green {
|
color: #222222 100%;
|
font-size: 14px;
|
}
|
.out-div {
|
overflow: hidden auto;
|
max-height: 100%;
|
// max-height: 890px;
|
.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;
|
}
|
}
|
.name-ellipsis {
|
max-width: 160px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin: 0 auto;
|
}
|
.m5 {
|
margin: 5px;
|
}
|
.p10 {
|
padding: 10px;
|
}
|
</style>
|
