<template>
|
<div class="s-base-manage">
|
<div class="flex-box base-overflow" >
|
<div class="data-left-box">
|
<div class="resize-bar"></div>
|
<div class="resize-line"></div>
|
<div class="resize-save">
|
<base-list
|
ref="baseSync"
|
:title="`同步库`"
|
type="sync"
|
:isSelected="isSelected"
|
@getList="getPersonList"
|
@changeShow="changeToAdd"
|
></base-list>
|
</div>
|
</div>
|
<div class="bg-white ml20 data-right-box">
|
<div v-show="showList">
|
<person-list ref="personList" :baseObject="baseObject" v-show="showType == 'person'"></person-list>
|
<car-list ref="carList" :baseObject="baseObject" v-show="showType == 'car'"></car-list>
|
</div>
|
<add-base
|
ref="addBase"
|
:baseObject="baseForEdit"
|
:type="syncType"
|
v-show="!showList"
|
@refresh="findBaseSync"
|
@closeAdd="closeAdd"
|
></add-base>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import baseList from '../components/baseList'
|
import addBase from '../components/addBase'
|
import personList from '../components/personList'
|
import carList from '../components/carList'
|
export default {
|
data() {
|
return {
|
isSelected: false,
|
showList: true,
|
showType: 'person',
|
syncType: 'sync',
|
syncTables: [],
|
localTables: [],
|
baseObject: {},
|
baseForEdit: {}, // 给编辑页面传的
|
breeadCrumb: [
|
{
|
name: '底库管理',
|
path: '/baseManage',
|
params: {}
|
},
|
{
|
name: '底库详情',
|
path: '/baseManage',
|
params: {}
|
}
|
]
|
}
|
},
|
methods: {
|
clearSelect1() {
|
this.$refs.baseLocal.categoryIndex = -1
|
},
|
clearSelect2() {
|
this.$refs.baseSync.categoryIndex = -1
|
},
|
getPersonList(item) {
|
console.log('传给父组件的值', item)
|
this.baseObject = item
|
// 直接调用子组件刷新列表的方法
|
// 判断这是人员库还是车辆库，决定showList的值
|
if (item.tableType == "person") {
|
console.log("person库")
|
this.showType = 'person'
|
this.$refs.personList.getPersonList()
|
} else if (item.tableType == "car") {
|
console.log("car库")
|
this.showType = "car"
|
this.$refs.carList.getCarList()
|
}
|
//this.showList = '1'
|
this.breeadCrumb[1].name = '底库详情'
|
},
|
changeToAdd(item, type) {
|
if (item !== null) {
|
this.baseForEdit = item
|
this.breeadCrumb[1].name = '底库信息'
|
} else {
|
this.baseForEdit = {}
|
this.breeadCrumb[1].name = '添加底库'
|
}
|
this.syncType = type
|
this.showList = false
|
},
|
// 查询同步库列表数据\查询本地库列表数据
|
findBaseSync() {
|
this.BaseManageData.querySyncTables()
|
this.BaseManageData.queryLocalTables()
|
},
|
closeAdd() {
|
console.log('closeAdd')
|
this.showList = true
|
}
|
},
|
props: {
|
cameraId: {
|
default: '',
|
type: String
|
}
|
},
|
components: {
|
baseList,
|
addBase,
|
personList,
|
carList
|
},
|
mounted() {
|
//this.TreeDataPool.showTreeBox = false
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.flex-box{
|
display: flex;
|
}
|
.s-base-manage {
|
box-sizing: border-box;
|
background-color: #e9ebf2;
|
min-width: 1315px;
|
height: 100%;
|
}
|
.base-overflow {
|
height: 100%;
|
//overflow: visible !important;
|
background-color: #ffffff;
|
box-sizing: border-box;
|
// padding: 20px 10px 0 10px;
|
}
|
.s-data-manage-breadcrumb {
|
margin: 0 3px;
|
height: 5%;
|
box-sizing: border-box;
|
border: 1px solid #e4e7ed;
|
box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
}
|
.data-left-box {
|
//height: 100%;
|
height: 100vh;
|
position: relative;
|
background: #fff;
|
box-sizing: border-box;
|
border-right: 1px solid #e0e0e0;
|
}
|
.resize-save {
|
position: absolute;
|
top: 0;
|
right: 5px;
|
bottom: 0;
|
left: 0;
|
padding: 14px;
|
overflow-x: hidden;
|
}
|
.resize-bar {
|
width: 310px;
|
height: inherit;
|
resize: horizontal;
|
cursor: ew-resize;
|
opacity: 0;
|
overflow: scroll;
|
max-width: 500px; //设定最大拉伸长度
|
min-width: 33px; //设定最小宽度
|
}
|
/* 拖拽线 */
|
.resize-line {
|
position: absolute;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
border-right: 2px solid #efefef;
|
border-left: 1px solid #e0e0e0;
|
pointer-events: none;
|
}
|
.resize-bar:hover ~ .resize-line,
|
.resize-bar:active ~ .resize-line {
|
border-left: 1px dashed skyblue;
|
}
|
.resize-bar::-webkit-scrollbar {
|
width: 200px;
|
height: inherit;
|
}
|
|
/* Firefox只有下面一小块区域可以拉伸 */
|
@supports (-moz-user-select: none) {
|
.resize-bar:hover ~ .resize-line,
|
.resize-bar:active ~ .resize-line {
|
border-left: 1px solid #bbb;
|
}
|
.resize-bar:hover ~ .resize-line::after,
|
.resize-bar:active ~ .resize-line::after {
|
content: "";
|
position: absolute;
|
width: 16px;
|
height: 16px;
|
bottom: 0;
|
right: -8px;
|
// background: url(./resize.svg);
|
background-size: 100% 100%;
|
}
|
}
|
.data-right-box {
|
height: calc(100% - 40px);
|
overflow-y: auto;
|
flex: 1;
|
padding: 5px 20px 5px 5px;
|
box-sizing: border-box;
|
}
|
</style>
|
