From 5449cced03ef77f5e95a08e871996abb7132c40b Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 17 六月 2022 16:26:23 +0800
Subject: [PATCH] cp dialog
---
src/pages/library/components/baseList.vue | 245 +++++++++++++++++++++---------------------------
1 files changed, 106 insertions(+), 139 deletions(-)
diff --git a/src/pages/library/components/baseList.vue b/src/pages/library/components/baseList.vue
index a578ae1..ef99051 100644
--- a/src/pages/library/components/baseList.vue
+++ b/src/pages/library/components/baseList.vue
@@ -1,26 +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">
- <img v-if="title === '鍚屾搴�'" src="/images/library/鍚屾搴�2.png" alt="" srcset="">
- <img v-else src="/images/library/鏈湴搴�2.png" alt="" srcset="">
+ <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>
-
+ <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
@@ -30,33 +29,17 @@
@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">
-
<div
class="status-dot"
- :class="item.enable == 1 ?'status-dot-active':''"
+ :class="item.enable == 1 ? 'status-dot-active' : ''"
:style="item.enable == 1 ? { background: '#4E94FF' } : {}"
></div>
</el-col>
@@ -80,19 +63,21 @@
</el-collapse-item>
<el-collapse-item name="2" class="el-collapse-item__wrap">
<template slot="title">
- <img src="/images/library/鏈湴搴�2.png" alt="" srcset="">
+ <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>
+ <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
@@ -102,31 +87,17 @@
@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">
-
<div
class="status-dot"
- :class="item.enable == 1 ?'status-dot-active':''"
+ :class="item.enable == 1 ? 'status-dot-active' : ''"
:style="item.enable == 1 ? { background: '#4E94FF' } : {}"
></div>
</el-col>
@@ -152,7 +123,7 @@
</div>
</template>
<script>
-import { updateDbTableStatus } from "@/api/baseLibrary";
+import { updateDbTableStatus } from "@/api/baseLibrary"
export default {
name: "baseList",
data() {
@@ -162,122 +133,113 @@
categoryIndex: "",
syncTableList: [],
localTableList: [],
- clickBase: {}, // 褰撳墠鐐瑰嚮鐨勫簳搴撳璞�
- };
+ clickBase: {} // 褰撳墠鐐瑰嚮鐨勫簳搴撳璞�
+ }
},
computed: {
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) {
- return (
- this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
- );
+ return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
},
- async init() {
- await this.BaseManageData.querySyncTables();
- this.syncTableList = this.BaseManageData.syncTables;
- this.defaultShow();
- await this.BaseManageData.queryLocalTables();
- this.localTableList = this.BaseManageData.localTables;
- this.defaultShow();
+ async init(typ) {
+ await this.BaseManageData.querySyncTables()
+ this.syncTableList = this.BaseManageData.syncTables
+ if (typ) {
+ this.clickLast(typ)
+ } else {
+ this.defaultShow()
+ }
+ await this.BaseManageData.queryLocalTables()
+ this.localTableList = this.BaseManageData.localTables
+ if (typ) {
+ this.clickLast(typ)
+ } else {
+ this.defaultShow()
+ }
},
add(type) {
- this.$emit("changeShow", null, type);
+ this.$emit("changeShow", null, type)
+ },
+ 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.clickBase = item;
- this.$emit("getList", item, type);
+ 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: "224px",
- type: String,
+ 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 {
@@ -319,7 +281,11 @@
font-size: 14px;
}
.out-div {
- max-height: 100%; height: 100%;
+ max-height: 100%;
+ height: 100%;
+ .el-collapse-item__header {
+ position: relative;
+ }
.el-collapse-item__wrap {
will-change: height;
background-color: #fff;
@@ -334,7 +300,8 @@
.el-row {
border-radius: 9px;
background: rgba(239, 241, 245, 0.35);
- margin-bottom: 4px; min-height: 72px;
+ margin-bottom: 4px;
+ min-height: 72px;
box-sizing: border-box;
padding: 10px 5px;
}
--
Gitblit v1.8.0