From 4ff29e301de38488db0ff04f0209c99e37cf30b4 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期二, 07 十二月 2021 18:56:34 +0800 Subject: [PATCH] 对比库管理 --- src/pages/library/index/App.vue | 282 +++++++++++++++++++++++++++++--------------------------- 1 files changed, 146 insertions(+), 136 deletions(-) diff --git a/src/pages/library/index/App.vue b/src/pages/library/index/App.vue index 2da0f8b..e57302c 100644 --- a/src/pages/library/index/App.vue +++ b/src/pages/library/index/App.vue @@ -1,9 +1,9 @@ <template> <div class="s-base-manage"> - <div class="flex-box base-overflow" > + <div class="flex-box base-overflow"> <div class="data-left-box"> <div class="resize-bar"></div> - <div class="resize-line"></div> + <!-- <div class="resize-line"></div> --> <div class="resize-save"> <base-list ref="baseSync" @@ -16,9 +16,20 @@ </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" @@ -33,191 +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> -.flex-box{ - display: flex; -} +<style lang="scss" > .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) { + .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; + // border-right: 1px solid #e0e0e0; + } + .resize-save { + position: absolute; + top: 0; + right: 5px; + bottom: 0; + left: 0; + padding: 14px 10px; + overflow-x: hidden; + } + .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 solid #bbb; + border-left: 1px dashed skyblue; } - .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%; + .resize-bar::-webkit-scrollbar { + width: 200px; + height: inherit; } -} -.data-right-box { - height: calc(100% - 40px); - overflow-y: auto; - flex: 1; - padding: 5px 20px 5px 5px; - box-sizing: border-box; + + /* 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