对比库管理

heyujie

2021-12-07 4ff29e301de38488db0ff04f0209c99e37cf30b4

 src/pages/library/components/baseList.vue

@@ -1,138 +1,247 @@
<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 iconshuaxintongbu':'iconfont iconwenjianjia'"
            style="font-size:18px;"
            :class="
              title === '同步库'
                ? 'iconfont icontongbuku_v'
                : 'iconfont iconbendiku_v'
            "
            style="font-size: 32px"
          ></span>
          <span class="m5">{{title}}</span>
          <i
            class="el-icon-circle-plus-outline ml10"
            style="font-size:20px;color:#3D68E1;"
            @click.stop="add('sync')"
            v-if="isShow('library:set')"
          ></i>
          <span
            class="m5"
            style="font-size:14px;color:#3D68E1;"
            class="iconfont icontianjiaku-09"
            style="
              font-size: 22px;
              color: #666666;
              position: absolute;
              right: 10px;
            "
            @click.stop="add('sync')"
            v-if="isShow('library:set')"
          >新增</span>
          ></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
          > -->
        </template>
        <div class="max-height">
          <el-row
            class="p10 cursor-pointer"
            v-for="(item, index) in data"
            class="p5 cursor-pointer"
            v-for="(item, index) in syncTableList"
            :key="item.id"
            @click.native="clickCategory(index, 'sync' ,item)"
            :class="{activeRow:categoryIndex=='sync' + index}"
          >
            <el-col :span="12" :class="item.bwType === '1'?'c-red':'c-green'">
            <el-col
              :span="12"
              :class="item.bwType === '1' ? 'c-red' : 'c-green'"
            >
              <p
                style="text-align:left;margin-left:10px"
                style="text-align: left; margin-left: 5px"
                class="name-ellipsis"
                :title="item.tableName"
              >{{item.tableName}}</p>
              >
                <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
              <!-- <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.enable"
                size="small"
                style="margin-top:-7px"
                :disabled="isDisabled(item)"
                @change="enable(item)"
                @change="setEnable(item)"
              >
                <!-- :disabled="isDisa(item)" -->
              </el-switch>
              <el-tooltip content="编辑" placement="top" popper-class="atooltip">
              
              </el-switch> -->
              <!-- <div class="status-dot"></div> -->
              <div
                class="status-dot"
                :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">
              </el-tooltip> -->
              <!-- <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchu iconStyle1"
                  style="color:#E74C3C;"
                  style="color: #e74c3c"
                  v-if="isShow('library:set')"
                  @click.stop="deleteBase(item.id)"
                ></span>
              </el-tooltip>
              </el-tooltip> -->
            </el-col>
            <el-col
              :span="24"
              style="text-align:left;margin-left:10px; color:#888888"
            >{{item.startTime}}~{{item.endTime?item.endTime:'永久有效'}}</el-col>
              style="
                text-align: left;
                margin-left: 5px;
                color: #888888;
                font-size: 12px;
                line-height: 17px;
              "
            >
              <div class="time-start">{{ item.startTime }}~</div>
              <div class="time-end">
                {{ item.endTime ? item.endTime : "永久有效" }}
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2" class="el-collapse-item__wrap">
        <template slot="title">
          <span class="iconfont iconwenjianjia" style="font-size:18px;"></span>
          <span class="iconfont iconbendiku_v" style="font-size: 32px"></span>
          <span class="m5">{{titleB}}</span>
          <i
            class="el-icon-circle-plus-outline ml10"
            style="font-size:20px;color:#3D68E1;"
            @click.stop="add('local')"
            v-if="isShow('library:set')"
          ></i>
          <span
            class="m5"
            style="font-size:14px;color:#3D68E1;"
            class="iconfont icontianjiaku-09"
            style="
              font-size: 22px;
              color: #666666;
              position: absolute;
              right: 10px;
            "
            @click.stop="add('local')"
            v-if="isShow('library:set')"
          >新增</span>
          ></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
          > -->
        </template>
        <div class="max-height">
          <el-row
            class="p10 cursor-pointer"
            v-for="(item, index) in dataB"
            class="p5 cursor-pointer"
            v-for="(item, index) in localTableList"
            :key="item.id"
            @click.native="clickCategory(index, 'local' ,item)"
            :class="{activeRow:categoryIndex=='local' + index}"
          >
            <el-col :span="12" :class="item.bwType === '1'?'c-red':'c-green'">
            <el-col
              :span="12"
              :class="item.bwType === '1' ? 'c-red' : 'c-green'"
            >
              <p
                style="text-align:left;margin-left:10px"
                style="text-align: left; margin-left: 5px"
                class="name-ellipsis"
                :title="item.tableName"
              >{{item.tableName}}</p>
              >
                <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
              <!-- <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.enable"
                size="small"
                style="margin-top:-7px"
                :disabled="isDisabled(item)"
                @change="enable(item)"
              ></el-switch>
              <el-tooltip content="编辑" placement="top" popper-class="atooltip">
                @change="setEnable(item)"
              ></el-switch> -->
              <div
                class="status-dot"
                :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">
              </el-tooltip> -->
              <!-- <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchu iconStyle1"
                  style="color:#E74C3C;"
                  style="color: #e74c3c"
                  v-if="isShow('library:set')"
                  @click.stop="deleteBase(item.id)"
                ></span>
              </el-tooltip>
              </el-tooltip> -->
            </el-col>
            <el-col
              :span="24"
              style="text-align:left;margin-left:10px; color:#888888"
            >{{item.startTime}}~{{item.endTime?item.endTime:'永久有效'}}</el-col>
              style="
                text-align: left;
                margin-left: 5px;
                color: #888888;
                font-size: 12px;
                line-height: 17px;
              "
            >
              <div class="time-start">{{ item.startTime }}~</div>
              <div class="time-end">
                {{ item.endTime ? item.endTime : "永久有效" }}
              </div>
              <!-- {{ item.startTime }}~{{
                item.endTime ? item.endTime : "永久有效"
              }} -->
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
@@ -140,223 +249,213 @@
  </div>
</template>
<script>
// const data = [{ name: '吸毒库', id: '1', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' },
// { name: '在逃库', id: '2', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' }, { name: '吸毒库', id: '3', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' },
// { name: '在逃库', id: '4', time: '2019-01-01 12:00:00 ~ 2019-01-04 12:00:00' }]
import { updateDbTableStatus } from '@/api/baseLibrary'
import { updateDbTableStatus } from "@/api/baseLibrary";
export default {
  name: 'baseList',
  name: "baseList",
  data() {
    return {
      buttonAuthority: sessionStorage.getItem('buttonAuthoritys') || [],
      activeNames: ['1', '2'],
      categoryIndex: '',
      data: [],
      dataB: [],
      clickBase: {} // 当前点击的底库对象
    }
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      activeNames: ["1", "2"],
      categoryIndex: "",
      syncTableList: [],
      localTableList: [],
      clickBase: {}, // 当前点击的底库对象
    };
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    isAdmin() {
      if (
        sessionStorage.getItem('userInfo') &&
        sessionStorage.getItem('userInfo') !== ''
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username
        return (
          loginName === 'superadmin' || loginName === 'basic'
        )
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      }
      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 true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      } else {
        return false
        return false;
      }
    },
    async init() {
      // console.log("执行了init没")
      await this.BaseManageData.querySyncTables()
      this.data = this.BaseManageData.syncTables
      this.defaultShow()
      await this.BaseManageData.queryLocalTables()
      this.dataB = this.BaseManageData.localTables
      this.defaultShow()
      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)
      console.log(val);
    },
    async enable(item) {
    async setEnable(item) {
      let res = await updateDbTableStatus({
        id: item.id,
        enable: item.enable
      })
        enable: item.enable,
      });
      if (res.success === true) {
        this.$notify({
          type: 'success',
          message: '底库成功变更生效状态！'
        })
          type: "success",
          message: "底库成功变更生效状态！",
        });
      } else {
        this.$notify({
          type: 'error',
          message: '底库变更生效状态失败！'
        })
          type: "error",
          message: "底库变更生效状态失败！",
        });
      }
    },
    add(type) {
      this.$emit('changeShow', null, type)
      this.$emit("changeShow", null, type);
    },
    isDisabled(item) {
      var flag = true
      if (this.isShow('library:set')) {
      var flag = true;
      if (this.isShow("library:set")) {
        if (item.endTime == "") {
          flag = false
          flag = false;
        } else {
          flag = !this.$moment(new Date()).isBetween(item.startTime, item.endTime)
          flag = !this.$moment(new Date()).isBetween(
            item.startTime,
            item.endTime
          );
        }
      }
      return flag
      return flag;
    },
    clickCategory(index, type, item) { // 这里我们传入一个当前值
      this.categoryIndex = type + index
    clickCategory(index, type, item) {
      // 这里我们传入一个当前值
      this.categoryIndex = type + index;
      // 调用切换右侧面板的函数并且切换父组件中isSelected的值让另一个组件清除被选中状态
      // this.$emit('clearSelected')
      this.clickBase = item
      this.$emit('getList', item)
      this.clickBase = item;
      this.$emit("getList", item, type);
    },
    edit(item, type) {
      this.$emit('changeShow', item, type)
      this.$emit("changeShow", item, type);
    },
    deleteBase(id) {
      let token = sessionStorage.getItem('loginedInfo') && JSON.parse(sessionStorage.getItem('loginedInfo')).access_token
      this.$confirm('提示：确定删除底库？', {
      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'
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
      }).then(() => {
        fetch(`/data/api-v/dbtable/deleteDBtablesById?id=${id}`, {
          method: 'GET',
          method: "GET",
          headers: {
            'Content-Type': 'application/json',
            'Authorization': token
          }
        }).then(res => {
          return res.json()
        }).then(data => {
          console.log(data.data)
          if (data.success) {
            "Content-Type": "application/json",
            Authorization: token,
          },
        })
          .then((res) => {
            return res.json();
          })
          .then((res) => {
            if (res.success) {
            this.$notify({
              type: 'success',
              message: '底库删除成功！'
            })
                type: "success",
                message: "底库删除成功！",
              });
          }
          this.init()
        }).catch(err => {
            this.init();
          })
          .catch((err) => {
          this.$notify({
            type: 'error',
            message: err
          })
        })
      })
              type: "error",
              message: err,
            });
          });
      });
    },
    // 默认显示第一个库的数据
    defaultShow() {
      // console.log(this.data.length,'defaultShow')
      if (this.data !== undefined && this.data.length > 0) {
        this.clickCategory(0, 'sync', this.data[0])
      if (this.syncTableList && this.syncTableList.length) {
        this.clickCategory(0, "sync", this.syncTableList[0]);
      } else {
        if (this.dataB !== undefined && this.dataB.length > 0) {
          this.clickCategory(0, 'local', this.data[0])
        if (this.localTableList && this.localTableList.length) {
          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)) {
        // alert('dateString不能为空')  
        return
        return;
      }
      if (this.isEmpty(compareDateString)) {
        // alert('compareDateString不能为空')  
        return 1
        return 1;
      }
      var dateTime = this.dateParse(dateString).getTime()
      var compareDateTime = this.dateParse(compareDateString).getTime()
      var dateTime = this.dateParse(dateString).getTime();
      var compareDateTime = this.dateParse(compareDateString).getTime();
      if (compareDateTime > dateTime) {
        return 1
        return 1;
      } else if (compareDateTime === dateTime) {
        return 0
        return 0;
      } else {
        return -1
        return -1;
      }
    },
    // 左侧底库生效开关是否启用判断
    // isDisa(data) {
    //   if (!this.isShow('library:set')) {
    //     return true
    //   } else {
    //     return false
    //   }
    // }
  },
  props: {
    listWidth: {
      default: '300px',
      type: String
      default: "234px",
      type: String,
    },
    title: {
      default: '同步库',
      type: String
      default: "同步库",
      type: String,
    },
    titleB: {
      default: '本地库',
      type: String
      default: "本地库",
      type: String,
    },
    isSelected: {
      default: false,
      type: Boolean
      type: Boolean,
    },
    type: {
      default: '',
      type: String
    }
  }
}
      default: "",
      type: String,
    },
  },
};
</script>
<style lang="scss">
.iconStyle1 {
@@ -364,14 +463,29 @@
  margin-left: 15px;
  cursor: pointer;
}
.activeRow {
  background: rgb(245, 247, 250);
}

.cursor-pointer {
  cursor: pointer;
}
.max-height {
  max-height: 350px;
  .el-col-10 {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: right;
    float: right;
    margin-right: 10px;
  }
  .el-col-12 {
    width: auto;
  }
  .status-dot {
    background: #bbbbbb;
    height: 8px;
    width: 8px;
    border-radius: 50%;
  }
}
.c-red {
  color: red;
@@ -382,9 +496,8 @@
  font-size: 14px;
}
.out-div {
  overflow: hidden auto;
  // overflow: hidden auto;
  max-height: 100%;
  // max-height: 890px;
  .el-collapse-item__wrap {
    will-change: height;
    background-color: #fff;
@@ -393,6 +506,32 @@
    box-sizing: border-box;
    border-bottom: 0px solid #ebeef5;
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .el-row {
    border-radius: 9px;    background: rgba(239, 241, 245, 0.35);

  }
  .time-start {
    display: inline-block;
  }
  .time-end {
    display: inline-block;
  }
  .activeRow {
    background: #4e94ff;
    color: #fff;
    .time-start {
      color: #e9e9e9;
    }
    .time-end {
      color: #e9e9e9;
    }
    .status-dot {
      background: #fff !important;
    }
  }
}
.name-ellipsis {
  max-width: 160px;
@@ -400,11 +539,22 @@
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 24px;
    margin-right: 5px;
    line-height: 28px;
  }
}
.m5 {
  margin: 5px;
  margin-left: 10px;
  font-weight: bold;
  font-size: 16px;
  color: #5f5f5f;
  font-family: PingFang SC;
}
.p10 {
  padding: 10px;
.p5 {
  padding: 6px;
}
</style>