对比库管理

heyujie

2021-12-07 4ff29e301de38488db0ff04f0209c99e37cf30b4

 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
      // 直接调用子组件刷新列表的方法
      // 判断这是人员库还是车辆库，决定showList的值
      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>