修复初始化页面

zhangzengfei

2022-06-08 182aed85616f7ac60d0ffb02e4feac5661b80e0c

 src/pages/library/components/baseList.vue

@@ -1,43 +1,25 @@
<template>
  <div
    :style="listWidth ? `width:${listWidth};` : ''"
    class="out-div el-menu-vertical-demo"
  >
  <div :style="listWidth ? `width:${listWidth};` : ''" class="out-div el-menu-vertical-demo">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1" class="el-collapse-item__wrap">
        <template slot="title">
          <span
            :class="
              title === '同步库'
                ? 'iconfont icontongbuku_v'
                : 'iconfont iconbendiku_v'
            "
            style="font-size: 32px"
          ></span>
          <img v-if="title === '同步库'" src="/images/library/同步库2.png" alt="" srcset="" />
          <img v-else src="/images/library/本地库2.png" alt="" srcset="" />
          <span class="m5">{{ title }}</span>
          <span
            class="iconfont icontianjiaku-09"
            style="
              font-size: 22px;
              color: #666666;
              position: absolute;
              right: 10px;
            "
            @click.stop="add('sync')"
            v-if="isShow('library:set')"
          ></span>
          <!-- <i
            class="el-icon-circle-plus-outline ml10"
            style="font-size: 20px; color: #3d68e1"
           
          ></i> -->
          <!-- <span
            class="m5"
            style="font-size: 14px; color: #3d68e1"
            @click.stop="add('sync')"
            v-if="isShow('library:set')"
            >新增</span
          > -->
          <el-tooltip content="添加同步库" placement="top">
            <!-- popper-class="atooltip" -->
            <span
              class="iconfont icontianjiaku-09"
              style="
                font-size: 22px;
                color: #666666;
                position: absolute;
                right: 10px;
              "
              @click.stop="add('sync')"
              v-if="isShow('library:set')"
            ></span>
          </el-tooltip>
        </template>
        <div class="max-height">
          <el-row
@@ -47,68 +29,19 @@
            @click.native="clickCategory(index, 'sync', item)"
            :class="{ activeRow: categoryIndex == 'sync' + index }"
          >
            <el-col
              :span="12"
              :class="item.bwType === '1' ? 'c-red' : 'c-green'"
            >
              <p
                style="text-align: left; margin-left: 5px"
                class="name-ellipsis"
                :title="item.tableName"
              >
                <span
                  class="iconfont iconrenyuanku-09"
                  v-if="item.tableType == 'person'"
                ></span>
                <span
                  class="iconfont iconcheliangku-09"
                  v-if="item.tableType == 'car'"
                ></span>
                <span style="font-size: 14px; font-weight: bold">
                  {{ item.tableName }}</span
                >
            <el-col :span="12" :class="item.bwType === '1' ? 'c-red' : 'c-green'">
              <p style="text-align: left; margin-left: 5px" class="name-ellipsis" :title="item.tableName">
                <span class="iconfont iconrenyuanku-09" v-if="item.tableType == 'person'"></span>
                <span class="iconfont iconcheliangku-09" v-if="item.tableType == 'car'"></span>
                <span style="font-size: 14px; font-weight: bold"> {{ item.tableName }}</span>
              </p>
            </el-col>
            <el-col :span="10" :offset="1">
              <!-- <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.enable"
                size="small"
                style="margin-top: -7px"
                :disabled="isDisabled(item)"
                @change="setEnable(item)"
              >
              
              </el-switch> -->
              <!-- <div class="status-dot"></div> -->
              <div
                class="status-dot"
                :class="item.enable == 1 ? 'status-dot-active' : ''"
                :style="item.enable == 1 ? { background: '#4E94FF' } : {}"
              ></div>
              <!-- <el-tooltip
                content="编辑"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconbianji iconStyle1"
                  @click.stop="edit(item, 'sync')"
                  v-if="isShow('library:set')"
                ></span>
              </el-tooltip> -->
              <!-- <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchu iconStyle1"
                  style="color: #e74c3c"
                  v-if="isShow('library:set')"
                  @click.stop="deleteBase(item.id)"
                ></span>
              </el-tooltip> -->
            </el-col>
            <el-col
              :span="24"
@@ -130,32 +63,21 @@
      </el-collapse-item>
      <el-collapse-item name="2" class="el-collapse-item__wrap">
        <template slot="title">
          <span class="iconfont iconbendiku_v" style="font-size: 32px"></span>
          <img src="/images/library/本地库2.png" alt="" srcset="" />
          <span class="m5">{{ titleB }}</span>
          <span
            class="iconfont icontianjiaku-09"
            style="
              font-size: 22px;
              color: #666666;
              position: absolute;
              right: 10px;
            "
            @click.stop="add('local')"
            v-if="isShow('library:set')"
          ></span>

          <!-- <i
            class="el-icon-circle-plus-outline ml10"
            style="font-size: 20px; color: #3d68e1"
          
          ></i> -->
          <!-- <span
            class="m5"
            style="font-size: 14px; color: #3d68e1"
            @click.stop="add('local')"
            v-if="isShow('library:set')"
            >新增</span
          > -->
          <el-tooltip content="添加同步库" placement="top">
            <span
              class="iconfont icontianjiaku-09"
              style="
                font-size: 22px;
                color: #666666;
                position: absolute;
                right: 10px;
              "
              @click.stop="add('local')"
              v-if="isShow('library:set')"
            ></span>
          </el-tooltip>
        </template>
        <div class="max-height">
          <el-row
@@ -165,64 +87,19 @@
            @click.native="clickCategory(index, 'local', item)"
            :class="{ activeRow: categoryIndex == 'local' + index }"
          >
            <el-col
              :span="12"
              :class="item.bwType === '1' ? 'c-red' : 'c-green'"
            >
              <p
                style="text-align: left; margin-left: 5px"
                class="name-ellipsis"
                :title="item.tableName"
              >
                <span
                  class="iconfont iconrenyuanku-09"
                  v-if="item.tableType == 'person'"
                ></span>
                <span
                  class="iconfont iconcheliangku-09"
                  v-if="item.tableType == 'car'"
                ></span>
            <el-col :span="12" :class="item.bwType === '1' ? 'c-red' : 'c-green'">
              <p style="text-align: left; margin-left: 5px" class="name-ellipsis" :title="item.tableName">
                <span class="iconfont iconrenyuanku-09" v-if="item.tableType == 'person'"></span>
                <span class="iconfont iconcheliangku-09" v-if="item.tableType == 'car'"></span>
                <span> {{ item.tableName }}</span>
              </p>
            </el-col>
            <el-col :span="10" :offset="1">
              <!-- <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.enable"
                size="small"
                style="margin-top: -7px"
                :disabled="isDisabled(item)"
                @change="setEnable(item)"
              ></el-switch> -->
              <div
                class="status-dot"
                :class="item.enable == 1 ? 'status-dot-active' : ''"
                :style="item.enable == 1 ? { background: '#4E94FF' } : {}"
              ></div>

              <!-- <el-tooltip
                content="编辑"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconbianji iconStyle1"
                  @click.stop="edit(item, 'local')"
                  v-if="isShow('library:set')"
                ></span>
              </el-tooltip> -->
              <!-- <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchu iconStyle1"
                  style="color: #e74c3c"
                  v-if="isShow('library:set')"
                  @click.stop="deleteBase(item.id)"
                ></span>
              </el-tooltip> -->
            </el-col>
            <el-col
              :span="24"
@@ -238,9 +115,6 @@
              <div class="time-end">
                {{ item.endTime ? item.endTime : "永久有效" }}
              </div>
              <!-- {{ item.startTime }}~{{
                item.endTime ? item.endTime : "永久有效"
              }} -->
            </el-col>
          </el-row>
        </div>
@@ -249,7 +123,7 @@
  </div>
</template>
<script>
import { updateDbTableStatus } from "@/api/baseLibrary";
import { updateDbTableStatus } from "@/api/baseLibrary"
export default {
  name: "baseList",
  data() {
@@ -259,202 +133,113 @@
      categoryIndex: "",
      syncTableList: [],
      localTableList: [],
      clickBase: {}, // 当前点击的底库对象
    };
      clickBase: {} // 当前点击的底库对象
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username
        return loginName === "superadmin" || loginName === "basic"
      }
      return false;
    },
      return false
    }
  },
  mounted() {
    this.init();
    this.init()
  },
  methods: {
    isShow(authority) {
      if (this.isAdmin) {
        return true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
    },
    async init(typ) {
      await this.BaseManageData.querySyncTables()
      this.syncTableList = this.BaseManageData.syncTables
      if (typ) {
        this.clickLast(typ)
      } else {
        return false;
        this.defaultShow()
      }
    },
    async init() {
      await this.BaseManageData.querySyncTables();
      this.syncTableList = this.BaseManageData.syncTables;
      this.defaultShow();
      await this.BaseManageData.queryLocalTables();
      this.localTableList = this.BaseManageData.localTables;
      this.defaultShow();
    },
    handleChange(val) {
      console.log(val);
    },
    async setEnable(item) {
      let res = await updateDbTableStatus({
        id: item.id,
        enable: item.enable,
      });
      if (res.success === true) {
        this.$notify({
          type: "success",
          message: "底库成功变更生效状态！",
        });
      await this.BaseManageData.queryLocalTables()
      this.localTableList = this.BaseManageData.localTables
      if (typ) {
        this.clickLast(typ)
      } else {
        this.$notify({
          type: "error",
          message: "底库变更生效状态失败！",
        });
        this.defaultShow()
      }
    },
    add(type) {
      this.$emit("changeShow", null, type);
      this.$emit("changeShow", null, type)
    },
    isDisabled(item) {
      var flag = true;
      if (this.isShow("library:set")) {
        if (item.endTime == "") {
          flag = false;
        } else {
          flag = !this.$moment(new Date()).isBetween(
            item.startTime,
            item.endTime
          );
        }
      }
      return flag;
    clickLast(type) {
      // this.$nextTick(() => {

      // });
      this.clickCategory(this.syncTableList.length - 1, type, this.syncTableList[this.syncTableList.length - 1])
    },
    clickCategory(index, type, item) {
      // 这里我们传入一个当前值
      this.categoryIndex = type + index;
      this.categoryIndex = type + index
      // 调用切换右侧面板的函数并且切换父组件中isSelected的值让另一个组件清除被选中状态
      // this.$emit('clearSelected')
      this.clickBase = item;
      this.$emit("getList", item, type);
    },
    edit(item, type) {
      this.$emit("changeShow", item, type);
    },
    deleteBase(id) {
      let token =
        sessionStorage.getItem("loginedInfo") &&
        JSON.parse(sessionStorage.getItem("loginedInfo")).access_token;
      this.$confirm("提示：确定删除底库？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
      }).then(() => {
        fetch(`/data/api-v/dbtable/deleteDBtablesById?id=${id}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: token,
          },
        })
          .then((res) => {
            return res.json();
          })
          .then((res) => {
            if (res.success) {
              this.$notify({
                type: "success",
                message: "底库删除成功！",
              });
            }
            this.init();
          })
          .catch((err) => {
            this.$notify({
              type: "error",
              message: err,
            });
          });
      });
      this.clickBase = item
      this.$emit("getList", item, type)
      console.log("clickCategory", item, type)
    },
    // 默认显示第一个库的数据
    defaultShow() {
      if (this.syncTableList && this.syncTableList.length) {
        this.clickCategory(0, "sync", this.syncTableList[0]);
        this.clickCategory(0, "sync", this.syncTableList[0])
      } else {
        if (this.localTableList && this.localTableList.length) {
          this.clickCategory(0, "local", this.syncTableList[0]);
          this.clickCategory(0, "local", this.syncTableList[0])
        }
      }
    },
    // 添加时间比较函数
    dateParse(dateString) {
      var SEPARATOR_BAR = "-";
      var SEPARATOR_SLASH = "/";
      var SEPARATOR_DOT = ".";
      var dateArray;
      var SEPARATOR_BAR = "-"
      var SEPARATOR_SLASH = "/"
      var SEPARATOR_DOT = "."
      var dateArray
      if (dateString.indexOf(SEPARATOR_BAR) > -1) {
        dateArray = dateString.split(SEPARATOR_BAR);
        dateArray = dateString.split(SEPARATOR_BAR)
      } else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
        dateArray = dateString.split(SEPARATOR_SLASH);
        dateArray = dateString.split(SEPARATOR_SLASH)
      } else {
        dateArray = dateString.split(SEPARATOR_DOT);
        dateArray = dateString.split(SEPARATOR_DOT)
      }
      return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
      return new Date(dateArray[0], dateArray[1] - 1, dateArray[2])
    },
    isEmpty(str) {
      if (!str || str === undefined || str === null) {
        return true;
        return true
      } else {
        return false;
        return false
      }
    },
    dateCompare(dateString, compareDateString) {
      // dateString:当前时间
      // compareDateString:需要比较的时间
      if (this.isEmpty(dateString)) {
        return;
      }
      if (this.isEmpty(compareDateString)) {
        return 1;
      }
      var dateTime = this.dateParse(dateString).getTime();
      var compareDateTime = this.dateParse(compareDateString).getTime();
      if (compareDateTime > dateTime) {
        return 1;
      } else if (compareDateTime === dateTime) {
        return 0;
      } else {
        return -1;
      }
    },
    }
  },
  props: {
    listWidth: {
      default: "234px",
      type: String,
      default: "224px",
      type: String
    },
    title: {
      default: "同步库",
      type: String,
      type: String
    },
    titleB: {
      default: "本地库",
      type: String,
      type: String
    },
    isSelected: {
      default: false,
      type: Boolean,
      type: Boolean
    },
    type: {
      default: "",
      type: String,
    },
  },
};
      type: String
    }
  }
}
</script>
<style lang="scss">
.iconStyle1 {
@@ -473,6 +258,7 @@
    display: flex;
    align-items: center;
    justify-content: right;
    width: auto;
    float: right;
    margin-right: 10px;
  }
@@ -495,8 +281,11 @@
  font-size: 14px;
}
.out-div {
  // overflow: hidden auto;
  max-height: 100%;
  height: 100%;
  .el-collapse-item__header {
    position: relative;
  }
  .el-collapse-item__wrap {
    will-change: height;
    background-color: #fff;
@@ -509,8 +298,12 @@
    display: none;
  }
  .el-row {
    border-radius: 9px;    background: rgba(239, 241, 245, 0.35);

    border-radius: 9px;
    background: rgba(239, 241, 245, 0.35);
    margin-bottom: 4px;
    min-height: 72px;
    box-sizing: border-box;
    padding: 10px 5px;
  }
  .time-start {
    display: inline-block;
@@ -519,7 +312,7 @@
    display: inline-block;
  }
  .activeRow {
    background: #4e94ff;
    background: var(--colorCard);
    color: #fff;
    .time-start {
      color: #e9e9e9;
@@ -527,7 +320,7 @@
    .time-end {
      color: #e9e9e9;
    }
    .status-dot {
    .status-dot-active {
      background: #fff !important;
    }
  }