<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">
|
<baseList
|
ref="baseSync"
|
:title="`同步库`"
|
type="sync"
|
:isSelected="isSelected"
|
@getList="getPersonList"
|
@changeShow="changeToAdd"
|
></baseList>
|
</div>
|
</div>
|
<div class="bg-white ml20 data-right-box">
|
<div v-show="showList" style="height: 100%">
|
<person-list
|
ref="personList"
|
:baseObject="baseObject"
|
@changeShow="changeToAdd"
|
@onDelete="initBaseList"
|
:syncType="syncType"
|
v-show="showType == 'person'"
|
></person-list>
|
<car-list
|
ref="carList"
|
:baseObject="baseObject"
|
@changeShow="changeToAdd"
|
@onDelete="initBaseList"
|
:syncType="syncType"
|
v-show="showType == 'car'"
|
></car-list>
|
</div>
|
<addBase
|
ref="addBase"
|
:baseObject="baseForEdit"
|
:type="syncType"
|
v-if="!showList"
|
@refresh="findBaseSync"
|
@closeAdd="closeAdd"
|
></addBase>
|
</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";
|
const colorRgb = function (s) {
|
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
var color = s.toLowerCase();
|
if (reg.test(color)) {
|
if (color.length === 4) {
|
var colorNew = "#";
|
for (var i = 1; i < 4; i += 1) {
|
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
|
}
|
color = colorNew;
|
}
|
var colorChange = [];
|
for (var i = 1; i < 7; i += 2) {
|
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
|
}
|
return "" + colorChange.join(",") + "";
|
} else {
|
return color;
|
}
|
};
|
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: {
|
getPersonList(item, type) {
|
this.baseObject = item;
|
this.baseForEdit = item;
|
this.syncType = type;
|
// 直接调用子组件刷新列表的方法
|
// 判断这是人员库还是车辆库，决定showList的值
|
if (item.tableType == "person") {
|
this.showType = "person";
|
this.$refs.personList.getPersonList();
|
} else if (item.tableType == "car") {
|
this.showType = "car";
|
this.$refs.carList.getCarList();
|
}
|
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;
|
},
|
initBaseList() {
|
this.$refs.baseSync.init();
|
},
|
// 查询同步库列表数据\查询本地库列表数据
|
findBaseSync() {
|
this.BaseManageData.querySyncTables();
|
this.BaseManageData.queryLocalTables();
|
},
|
closeAdd() {
|
this.showList = true;
|
this.$refs.baseSync.init(this.syncType);
|
},
|
},
|
props: {
|
cameraId: {
|
default: "",
|
type: String,
|
},
|
},
|
components: {
|
baseList,
|
addBase,
|
personList,
|
carList,
|
},
|
mounted() {
|
window.addEventListener("message", (e) => {
|
if (e.data.msg === "changeColor") {
|
const res = colorRgb(e.data.color);
|
document.documentElement.style.setProperty(
|
"--colorCard",
|
`${e.data.color}`
|
);
|
}
|
});
|
},
|
created() {
|
let color = localStorage.getItem("--colorCard");
|
if (color) {
|
document.documentElement.style.setProperty("--colorCard", `${color}`);
|
} else {
|
color = getComputedStyle(document.documentElement).getPropertyValue(
|
"--colorCard"
|
);
|
const res = colorRgb(color);
|
document.documentElement.style.setProperty("--colorCard-rgb", `${res}`);
|
}
|
},
|
};
|
</script>
|
<style lang="scss" >
|
.s-base-manage {
|
box-sizing: border-box;
|
background-color: #eff1f5;
|
border-top: 1px solid #f1f3f6;
|
|
height: 100%;
|
.el-table {
|
.cell:empty::before {
|
content: "--";
|
color: #ccc;
|
}
|
.is-leaf {
|
.cell:empty::before {
|
content: "--";
|
color: #ccc;
|
}
|
}
|
}
|
.el-collapse {
|
border: none;
|
}
|
.flex-box {
|
display: flex;
|
}
|
.base-overflow {
|
height: 100%;
|
background-color: #eff1f5;
|
box-sizing: border-box;
|
}
|
.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: 100vh;
|
position: relative;
|
background: #fff;
|
box-sizing: border-box;
|
}
|
.resize-save {
|
position: absolute;
|
top: 0;
|
right: 5px;
|
bottom: 0;
|
left: 0;
|
padding: 14px 10px;
|
overflow-x: hidden;
|
}
|
.resize-bar {
|
width: 244px;
|
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-size: 100% 100%;
|
}
|
}
|
.data-right-box {
|
height: calc(100%);
|
overflow-y: auto;
|
flex: 1;
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
