From 4ff29e301de38488db0ff04f0209c99e37cf30b4 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 07 十二月 2021 18:56:34 +0800
Subject: [PATCH] 对比库管理
---
src/pages/library/components/baseList.vue | 541 ++++++++++++++++++++++++++++++++++-------------------
1 files changed, 345 insertions(+), 196 deletions(-)
diff --git a/src/pages/library/components/baseList.vue b/src/pages/library/components/baseList.vue
index e5df6ef..e2e91b9 100644
--- a/src/pages/library/components/baseList.vue
+++ b/src/pages/library/components/baseList.vue
@@ -1,139 +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">{{ title }}</span>
<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}"
+ @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"
+ 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')"
+ @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="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="iconfont iconbendiku_v" style="font-size: 32px"></span>
+ <span class="m5">{{ titleB }}</span>
<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}"
+ @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"
+ 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')"
+ @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"
- class="tl ml10 f12"
- style="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>
@@ -141,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("鎵ц浜唅nit娌�")
- 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;
// 璋冪敤鍒囨崲鍙充晶闈㈡澘鐨勫嚱鏁板苟涓斿垏鎹㈢埗缁勪欢涓璱sSelected鐨勫�艰鍙︿竴涓粍浠舵竻闄よ閫変腑鐘舵��
// 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}`, {
- method: 'POST',
+ fetch(`/data/api-v/dbtable/deleteDBtablesById?id=${id}`, {
+ method: "GET",
headers: {
- 'Content-Type': 'application/json',
- 'Authorization': token
- }
- }).then(res => {
- return res.json()
- }).then(data => {
- console.log(data.data)
- if (data.success) {
- this.$notify({
- type: 'success',
- message: '搴曞簱鍒犻櫎鎴愬姛锛�'
- })
- }
- this.init()
- }).catch(err => {
- this.$notify({
- type: 'error',
- message: err
- })
+ "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() {
- // 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 {
@@ -365,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;
@@ -383,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;
@@ -394,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;
@@ -401,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>
--
Gitblit v1.8.0