zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/pages/library/components/baseList.vue
@@ -6,38 +6,28 @@
    <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
@@ -70,45 +60,11 @@
              </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 +86,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
@@ -186,43 +131,11 @@
              </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 +151,6 @@
              <div class="time-end">
                {{ item.endTime ? item.endTime : "永久有效" }}
              </div>
              <!-- {{ item.startTime }}~{{
                item.endTime ? item.endTime : "永久有效"
              }} -->
            </el-col>
          </el-row>
        </div>
@@ -263,7 +173,6 @@
    };
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
@@ -280,106 +189,44 @@
  },
  methods: {
    isShow(authority) {
      if (this.isAdmin) {
        return true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      } else {
        return false;
      }
      return (
        this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
      );
    },
    async init() {
    async init(typ) {
      await this.BaseManageData.querySyncTables();
      this.syncTableList = this.BaseManageData.syncTables;
      this.defaultShow();
      if (typ) {
        this.$emit("getList");
      } else {
        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: "底库成功变更生效状态!",
        });
      if (typ) {
        this.$emit("getList");
      } else {
        this.$notify({
          type: "error",
          message: "底库变更生效状态失败!",
        });
        this.defaultShow();
      }
    },
    add(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;
      // 调用切换右侧面板的函数并且切换父组件中isSelected的值让另一个组件清除被选中状态
      // this.$emit('clearSelected')
      this.clickBase = item;
      this.$emit("getList", item, type);
    },
    edit(item, type) {
      this.$emit("changeShow", item, type);
    },
    deleteBase(id) {
      debugger;
      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,
            });
          });
      });
    },
    // 默认显示第一个库的数据
    defaultShow() {
@@ -413,29 +260,10 @@
        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",
      default: "224px",
      type: String,
    },
    title: {
@@ -474,6 +302,7 @@
    display: flex;
    align-items: center;
    justify-content: right;
    width: auto;
    float: right;
    margin-right: 10px;
  }
@@ -496,8 +325,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;
@@ -510,8 +342,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;
@@ -520,7 +356,7 @@
    display: inline-block;
  }
  .activeRow {
    background: #4e94ff;
    background: var(--colorCard);
    color: #fff;
    .time-start {
      color: #e9e9e9;
@@ -528,7 +364,7 @@
    .time-end {
      color: #e9e9e9;
    }
    .status-dot {
    .status-dot-active {
      background: #fff !important;
    }
  }