From bc630b555653be1cb6eff37ab2da18cd31e8ef81 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 13 十二月 2021 10:44:12 +0800
Subject: [PATCH] 配置页
---
src/pages/library/index/App.vue | 253 +++++++++++++++++++++++++++++++-------------------
1 files changed, 158 insertions(+), 95 deletions(-)
diff --git a/src/pages/library/index/App.vue b/src/pages/library/index/App.vue
index 5623643..e57302c 100644
--- a/src/pages/library/index/App.vue
+++ b/src/pages/library/index/App.vue
@@ -1,21 +1,35 @@
<template>
<div class="s-base-manage">
- <div class="flex-box base-overflow" >
- <div class="pl20 data-left-box">
- <base-list
- ref="baseSync"
- :listWidth="`100%`"
- :title="`鍚屾搴揱"
- type="sync"
- :isSelected="isSelected"
- @getList="getPersonList"
- @changeShow="changeToAdd"
- ></base-list>
+ <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 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"
+ v-show="showType == 'car'"
+ ></car-list>
</div>
<add-base
ref="addBase"
@@ -30,141 +44,190 @@
</div>
</template>
<script>
-import baseList from '../components/baseList'
-import addBase from '../components/addBase'
-import personList from '../components/personList'
-import carList from '../components/carList'
+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',
+ showType: "person",
+ syncType: "sync",
syncTables: [],
localTables: [],
baseObject: {},
baseForEdit: {}, // 缁欑紪杈戦〉闈紶鐨�
breeadCrumb: [
{
- name: '搴曞簱绠＄悊',
- path: '/baseManage',
- params: {}
+ name: "搴曞簱绠＄悊",
+ path: "/baseManage",
+ params: {},
},
{
- name: '搴曞簱璇︽儏',
- path: '/baseManage',
- params: {}
- }
- ]
- }
+ name: "搴曞簱璇︽儏",
+ path: "/baseManage",
+ params: {},
+ },
+ ],
+ };
},
methods: {
clearSelect1() {
- this.$refs.baseLocal.categoryIndex = -1
+ this.$refs.baseLocal.categoryIndex = -1;
},
clearSelect2() {
- this.$refs.baseSync.categoryIndex = -1
+ this.$refs.baseSync.categoryIndex = -1;
},
- getPersonList(item) {
- console.log('浼犵粰鐖剁粍浠剁殑鍊�', item)
- this.baseObject = item
+ getPersonList(item,type) {
+ this.baseObject = item;
+ this.baseForEdit = item;
+ this.syncType = type
// 鐩存帴璋冪敤瀛愮粍浠跺埛鏂板垪琛ㄧ殑鏂规硶
// 鍒ゆ柇杩欐槸浜哄憳搴撹繕鏄溅杈嗗簱锛屽喅瀹歴howList鐨勫��
if (item.tableType == "person") {
- console.log("person搴�")
- this.showType = 'person'
- this.$refs.personList.getPersonList()
+ this.showType = "person";
+ this.$refs.personList.getPersonList();
} else if (item.tableType == "car") {
- console.log("car搴�")
- this.showType = "car"
- this.$refs.carList.getCarList()
+ this.showType = "car";
+ this.$refs.carList.getCarList();
}
- //this.showList = '1'
- this.breeadCrumb[1].name = '搴曞簱璇︽儏'
+ this.breeadCrumb[1].name = "搴曞簱璇︽儏";
},
changeToAdd(item, type) {
if (item !== null) {
- this.baseForEdit = item
- this.breeadCrumb[1].name = '搴曞簱淇℃伅'
+ this.baseForEdit = item;
+ this.breeadCrumb[1].name = "搴曞簱淇℃伅";
} else {
- this.baseForEdit = {}
- this.breeadCrumb[1].name = '娣诲姞搴曞簱'
+ this.baseForEdit = {};
+ this.breeadCrumb[1].name = "娣诲姞搴曞簱";
}
- this.syncType = type
- this.showList = false
+ this.syncType = type;
+ this.showList = false;
+ },
+ initBaseList(){
+ this.$refs.baseSync.init()
},
// 鏌ヨ鍚屾搴撳垪琛ㄦ暟鎹甛鏌ヨ鏈湴搴撳垪琛ㄦ暟鎹�
findBaseSync() {
- this.BaseManageData.querySyncTables()
- this.BaseManageData.queryLocalTables()
+ this.BaseManageData.querySyncTables();
+ this.BaseManageData.queryLocalTables();
},
closeAdd() {
- console.log('closeAdd')
- this.showList = true
- }
+ this.showList = true;
+ },
},
props: {
cameraId: {
- default: '',
- type: String
- }
+ default: "",
+ type: String,
+ },
},
components: {
baseList,
addBase,
personList,
- carList
+ carList,
},
mounted() {
//this.TreeDataPool.showTreeBox = false
- }
-}
+ },
+};
</script>
-<style lang="scss" scoped>
+<style lang="scss" >
.s-base-manage {
box-sizing: border-box;
background-color: #e9ebf2;
-}
-.base-overflow {
- overflow: visible !important;
- background-color: #ffffff;
- box-sizing: border-box;
- // padding: 20px 10px 0 10px;
-}
-.s-data-manage-breadcrumb {
- margin: 0 3px;
- height: 5%;
- -webkit-box-sizing: border-box;
- border: 1px solid #e4e7ed;
- -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
- box-shadow: #e4e7ed 0px 0px 9px inset;
- border-radius: 5px;
-}
-.data-left-box {
- @media screen and (max-width: 1440px) {
- width: 23%;
+ min-width: 1315px;
+ height: 100%;
+ .el-collapse {
+ border: none;
}
- @media screen and (min-width: 1440px) and (max-width: 1640px) {
- width: 21%;
+ .flex-box {
+ display: flex;
}
- @media screen and (min-width: 1640px) {
- width: 20%;
+ .base-overflow {
+ height: 100%;
+ background-color: #eff1f5;
+ box-sizing: border-box;
}
- box-sizing: border-box;
- border-right: 1px solid #e0e0e0;
-}
-.data-right-box {
- @media screen and (max-width: 1440px) {
- width: 77%;
+ .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;
}
- @media screen and (min-width: 1440px) and (max-width: 1640px) {
- width: 79%;
+ .data-left-box {
+ height: 100vh;
+ position: relative;
+ background: #fff;
+ box-sizing: border-box;
+ // border-right: 1px solid #e0e0e0;
}
- @media screen and (min-width: 1640px) {
- width: 80%;
+ .resize-save {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ bottom: 0;
+ left: 0;
+ padding: 14px 10px;
+ overflow-x: hidden;
}
- padding: 5px 20px 5px 5px;
- box-sizing: border-box;
+ .resize-bar {
+ width: 254px;
+ 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>
--
Gitblit v1.8.0