From 5d9d45b9ddc4d99aba2d9dd9d75fc4d7ebf639d1 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 20 五月 2022 18:10:37 +0800
Subject: [PATCH] 修改ip配置的交互
---
src/pages/library/components/baseList.vue | 426 +++++++++++++---------------------------------------
1 files changed, 109 insertions(+), 317 deletions(-)
diff --git a/src/pages/library/components/baseList.vue b/src/pages/library/components/baseList.vue
index e2e91b9..ef99051 100644
--- a/src/pages/library/components/baseList.vue
+++ b/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,203 +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
// 璋冪敤鍒囨崲鍙充晶闈㈡澘鐨勫嚱鏁板苟涓斿垏鎹㈢埗缁勪欢涓璱sSelected鐨勫�艰鍙︿竴涓粍浠舵竻闄よ閫変腑鐘舵��
- // 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,
- });
- });
- });
+ 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 {
@@ -474,6 +258,7 @@
display: flex;
align-items: center;
justify-content: right;
+ width: auto;
float: right;
margin-right: 10px;
}
@@ -496,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;
@@ -510,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;
@@ -520,7 +312,7 @@
display: inline-block;
}
.activeRow {
- background: #4e94ff;
+ background: var(--colorCard);
color: #fff;
.time-start {
color: #e9e9e9;
@@ -528,7 +320,7 @@
.time-end {
color: #e9e9e9;
}
- .status-dot {
+ .status-dot-active {
background: #fff !important;
}
}
--
Gitblit v1.8.0