对比库管理ui修正

heyujie

2021-12-22 ecf388a7953a10fe1ae8ee1a332c74ce40d782eb

 src/pages/library/index/App.vue

@@ -16,7 +16,7 @@
        </div>
      </div>
      <div class="bg-white ml20 data-right-box">
        <div v-show="showList" style="height: 100%;">
        <div v-show="showList" style="height: 100%">
          <person-list
            ref="personList"
            :baseObject="baseObject"
@@ -38,7 +38,7 @@
          ref="addBase"
          :baseObject="baseForEdit"
          :type="syncType"
          v-show="!showList"
          v-if="!showList"
          @refresh="findBaseSync"
          @closeAdd="closeAdd"
        ></add-base>
@@ -51,6 +51,26 @@
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 {
@@ -77,10 +97,10 @@
    };
  },
  methods: {
    getPersonList(item,type) {
    getPersonList(item, type) {
      this.baseObject = item;
      this.baseForEdit = item;
      this.syncType  = type
      this.syncType = type;
      // 直接调用子组件刷新列表的方法
      // 判断这是人员库还是车辆库，决定showList的值
      if (item.tableType == "person") {
@@ -103,8 +123,8 @@
      this.syncType = type;
      this.showList = false;
    },
    initBaseList(){
      this.$refs.baseSync.init()
    initBaseList() {
      this.$refs.baseSync.init();
    },
    // 查询同步库列表数据\查询本地库列表数据
    findBaseSync() {
@@ -130,6 +150,7 @@
  mounted() {
    window.addEventListener("message", (e) => {
      if (e.data.msg === "changeColor") {
        const res = colorRgb(e.data.color);
        document.documentElement.style.setProperty(
          "--colorCard",
          `${e.data.color}`
@@ -138,9 +159,15 @@
    });
  },
  created() {
    const color = localStorage.getItem("--colorCard");
    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}`);
    }
  },
};
@@ -148,8 +175,22 @@
<style lang="scss" >
.s-base-manage {
  box-sizing: border-box;
  background-color: #e9ebf2;
  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;
  }