From f309eb5a5de6c7c27dfe44c9d5ad4c1e6ea600e2 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 11:37:59 +0800
Subject: [PATCH] 树形组件滚动
---
vue.config.js | 103 ++++++++++----------
src/components/giantTree/zTree/ztree.vue | 172 +++++++++++++++++++++-------------
2 files changed, 158 insertions(+), 117 deletions(-)
diff --git a/src/components/giantTree/zTree/ztree.vue b/src/components/giantTree/zTree/ztree.vue
index 9f2c183..f17ee9c 100644
--- a/src/components/giantTree/zTree/ztree.vue
+++ b/src/components/giantTree/zTree/ztree.vue
@@ -41,11 +41,11 @@
showLine: true,
showIcon: true, // default to hide icon
addHoverDom: this.addHoverDom,
- removeHoverDom: this.removeHoverDom
+ removeHoverDom: this.removeHoverDom,
},
check: {
- chkboxType: { "Y": "", "N": "" },
- enable: this.showCheckbox
+ chkboxType: { Y: "", N: "" },
+ enable: this.showCheckbox,
},
callback: {
onAsyncError: (...arg) => {
@@ -84,7 +84,6 @@
},
onMouseUp: (...arg) => {
this.$emit("onMouseUp", ...arg);
-
},
onRemove: (...arg) => {
this.$emit("onRemove", ...arg);
@@ -122,6 +121,10 @@
},
showCheckbox: {
handler: function () {
+ let top = $("#" + this.ztreeId)
+ .parent()
+ .scrollTop();
+
this.ztreeSetting.check.enable = this.showCheckbox;
if (this.ztreeObj) {
@@ -134,11 +137,14 @@
Object.assign({}, this.ztreeSetting, this.setting),
this.list
);
+ $("#" + this.ztreeId)
+ .parent()
+ .scrollTop(top);
this.$emit("onCreated", this.ztreeObj);
});
},
immediate: true,
- }
+ },
},
methods: {
addHoverDom(treeid, treeNode) {
@@ -146,103 +152,137 @@
const item = document.getElementById(`${treeNode.tId}_a`);
// 鏂囦欢澶规柊澧炴寜閽�
- if (item && !item.querySelector('.el-icon-circle-plus-outline') && treeNode.isParent && !this.readonly && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".el-icon-circle-plus-outline") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('el-icon-circle-plus-outline');
- btn.classList.add('primary');
+ btn.classList.add("el-icon-circle-plus-outline");
+ btn.classList.add("primary");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onAddNode", treeNode);
- })
+ });
item.appendChild(btn);
}
// 鏂囦欢澶瑰垹闄ゆ寜閽�
- if (item && !item.querySelector('.el-icon-remove-outline') && treeNode.isParent && !this.readonly && !treeNode.children && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".el-icon-remove-outline") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !treeNode.children &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('el-icon-remove-outline');
- btn.classList.add('danger');
+ btn.classList.add("el-icon-remove-outline");
+ btn.classList.add("danger");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onRemoveNode", treeNode);
- })
+ });
item.appendChild(btn);
}
// 鏂囦欢澶圭紪杈戞寜閽�
- if (item && !item.querySelector('.el-icon-edit') && treeNode.isParent && !this.readonly) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".el-icon-edit") &&
+ treeNode.isParent &&
+ !this.readonly
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('el-icon-edit');
- btn.classList.add('primary');
+ btn.classList.add("el-icon-edit");
+ btn.classList.add("primary");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onRenameNode", treeNode);
- })
+ });
item.appendChild(btn);
}
// 娣诲姞鎽勫儚鏈烘寜閽�
- if (item && !item.querySelector('.iconshishishipin') && treeNode.isParent && !this.readonly && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".iconshishishipin") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('iconfont');
- btn.classList.add('iconshishishipin');
- btn.classList.add('primary');
- btn.classList.add('icon-fix');
+ btn.classList.add("iconfont");
+ btn.classList.add("iconshishishipin");
+ btn.classList.add("primary");
+ btn.classList.add("icon-fix");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onAddDevice", treeNode.id);
- })
+ });
item.appendChild(btn);
}
// 瀵煎叆鎽勫儚鏈烘寜閽�
- if (item && !item.querySelector('.icondaoru') && treeNode.isParent && !this.readonly && !this.gb28181) {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".icondaoru") &&
+ treeNode.isParent &&
+ !this.readonly &&
+ !this.gb28181
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('iconfont');
- btn.classList.add('icondaoru');
- btn.classList.add('primary');
- btn.classList.add('icon-fix');
+ btn.classList.add("iconfont");
+ btn.classList.add("icondaoru");
+ btn.classList.add("primary");
+ btn.classList.add("icon-fix");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onImport", treeNode.id);
- })
+ });
item.appendChild(btn);
}
// 鏌ョ湅搴曞浘鎸夐挳
- if (item && !item.querySelector('.icontupian1') && treeNode.type == "camera") {
- const btn = document.createElement('i');
+ if (
+ item &&
+ !item.querySelector(".icontupian1") &&
+ treeNode.type == "camera"
+ ) {
+ const btn = document.createElement("i");
btn.id = `${treeid}_${treeNode.id}_btn`;
- btn.classList.add('iconfont');
- btn.classList.add('icontupian1');
- btn.classList.add('primary');
- btn.classList.add('icon-fix');
+ btn.classList.add("iconfont");
+ btn.classList.add("icontupian1");
+ btn.classList.add("primary");
+ btn.classList.add("icon-fix");
// btn.innerText = '鍒犻櫎';
- btn.addEventListener('click', (e) => {
- e.stopPropagation()
+ btn.addEventListener("click", (e) => {
+ e.stopPropagation();
// this.clickRemove(treeNode)
_vue.$emit("onShowPic", treeNode);
- })
+ });
item.appendChild(btn);
}
@@ -253,38 +293,38 @@
removeHoverDom(treeid, treeNode) {
const item = document.getElementById(`${treeNode.tId}_a`);
if (item) {
- let btn = item.querySelector('.el-icon-circle-plus-outline');
+ let btn = item.querySelector(".el-icon-circle-plus-outline");
if (btn) {
- item.removeChild(item.querySelector('.el-icon-circle-plus-outline'))
+ item.removeChild(item.querySelector(".el-icon-circle-plus-outline"));
}
- btn = item.querySelector('.el-icon-remove-outline');
+ btn = item.querySelector(".el-icon-remove-outline");
if (btn) {
- item.removeChild(item.querySelector('.el-icon-remove-outline'))
+ item.removeChild(item.querySelector(".el-icon-remove-outline"));
}
- btn = item.querySelector('.el-icon-edit');
+ btn = item.querySelector(".el-icon-edit");
if (btn) {
- item.removeChild(item.querySelector('.el-icon-edit'))
+ item.removeChild(item.querySelector(".el-icon-edit"));
}
- btn = item.querySelector('.iconshishishipin');
+ btn = item.querySelector(".iconshishishipin");
if (btn) {
- item.removeChild(item.querySelector('.iconshishishipin'))
+ item.removeChild(item.querySelector(".iconshishishipin"));
}
- btn = item.querySelector('.icondaoru');
+ btn = item.querySelector(".icondaoru");
if (btn) {
- item.removeChild(item.querySelector('.icondaoru'))
+ item.removeChild(item.querySelector(".icondaoru"));
}
- btn = item.querySelector('.icontupian1');
+ btn = item.querySelector(".icontupian1");
if (btn) {
- item.removeChild(item.querySelector('.icontupian1'))
+ item.removeChild(item.querySelector(".icontupian1"));
}
}
},
- }
+ },
};
</script>
diff --git a/vue.config.js b/vue.config.js
index 89da434..2a114a4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,34 +1,34 @@
-'use strict'
-const glob = require('glob')
-const pages = {}
-const IS_VENDOR = /[\\/]node_modules[\\/]/
-const pageVendor = {}
+"use strict";
+const glob = require("glob");
+const pages = {};
+const IS_VENDOR = /[\\/]node_modules[\\/]/;
+const pageVendor = {};
-const pkg = require('./package.json')
-const timestamp = new Date().getTime()
-const queryStr = `?v=${pkg.version}&t=${timestamp}`
+const pkg = require("./package.json");
+const timestamp = new Date().getTime();
+const queryStr = `?v=${pkg.version}&t=${timestamp}`;
-glob.sync('./src/pages/**/main.ts').forEach(path => {
- const chunk = path.split('./src/pages/')[1].split('/main.ts')[0]
- const chunk_vendor = `${chunk}-vendors`
- const chunk_common = `${chunk}-common`
+glob.sync("./src/pages/**/main.ts").forEach((path) => {
+ const chunk = path.split("./src/pages/")[1].split("/main.ts")[0];
+ const chunk_vendor = `${chunk}-vendors`;
+ const chunk_common = `${chunk}-common`;
pages[chunk] = {
entry: path,
- template: 'public/index.html',
- title: chunk == 'desktop/index' ? 'SmartAI' : chunk,
- chunks: [chunk_vendor, 'chunk-common', chunk]
- }
- if (chunk != 'index') {
- pages[chunk].filename = 'view/' + chunk + '.html'
+ template: "public/index.html",
+ title: chunk == "desktop/index" ? "SmartAI" : chunk,
+ chunks: [chunk_vendor, "chunk-common", chunk],
+ };
+ if (chunk != "index") {
+ pages[chunk].filename = "view/" + chunk + ".html";
}
pageVendor[chunk_vendor] = {
name: chunk_vendor,
priority: -11,
- chunks: c => c.name === chunk,
+ chunks: (c) => c.name === chunk,
test: /\.js$/,
- enforce: true
- }
+ enforce: true,
+ };
// pageVendor[chunk_common] = {
// name: chunk_common,
@@ -38,30 +38,31 @@
// reuseExistingChunk: true,
// enforce: true
// }
-})
+});
// const serverUrl = "http://58.118.225.79:41243" // 缇婁簲
-const serverUrl = "http://192.168.20.117:7009"
+//const serverUrl = "http://192.168.20.117:7009"
+const serverUrl = "http://192.168.20.10:7009";
module.exports = {
pages,
- chainWebpack: config => {
- config.plugins.delete('named-chunks')
- if (process.env.NODE_ENV === 'production') {
- config.output.filename('js/[name].js' + queryStr).end()
- config.output.chunkFilename('js/[name].js' + queryStr).end()
+ chainWebpack: (config) => {
+ config.plugins.delete("named-chunks");
+ if (process.env.NODE_ENV === "production") {
+ config.output.filename("js/[name].js" + queryStr).end();
+ config.output.chunkFilename("js/[name].js" + queryStr).end();
// 淇敼鐢熶骇閰嶇疆
- config.plugin('extract-css').tap(() => [
+ config.plugin("extract-css").tap(() => [
{
filename: `css/[name].css${queryStr}`,
- chunkFilename: `css/[name].css${queryStr}`
- }
- ])
+ chunkFilename: `css/[name].css${queryStr}`,
+ },
+ ]);
}
config.optimization.splitChunks({
- cacheGroups: pageVendor
- })
+ cacheGroups: pageVendor,
+ });
// config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', publicPath: '../' })
//config.module.rule('fonts').use('url-loader').loader('file-loader').options({ name: 'fonts/[name].[ext]', outputPath: '../' })
@@ -70,51 +71,51 @@
filenameHashing: false,
pwa: {
iconPaths: {
- favicon32: 'favicon.ico',
- favicon16: 'favicon.ico'
- }
+ favicon32: "favicon.ico",
+ favicon16: "favicon.ico",
+ },
},
devServer: {
proxy: {
- '/track': {
+ "/track": {
target: serverUrl,
// ws: true,
changeOrigin: true,
},
- '/ws': {
+ "/ws": {
target: serverUrl,
// ws: true,
changeOrigin: true,
},
"/data/api-v/app/findAllApp": {
- target: '/',
+ target: "/",
//target: 'http://localhost:8080/',
changeOrigin: true,
pathRewrite: {
- '^/data/api-v/app/findAllApp': 'apps.json'
- }
+ "^/data/api-v/app/findAllApp": "apps.json",
+ },
},
"/api-c": {
target: serverUrl,
- changeOrigin: true
+ changeOrigin: true,
},
"/api-v": {
target: serverUrl,
- changeOrigin: true
+ changeOrigin: true,
},
"/api-f": {
target: serverUrl,
// secure: false,
- changeOrigin: true
+ changeOrigin: true,
},
"/api-p": {
target: serverUrl,
// secure: false,
- changeOrigin: true
+ changeOrigin: true,
},
"/api-u": {
target: serverUrl,
- changeOrigin: true
+ changeOrigin: true,
},
"/httpImage": {
target: serverUrl,
@@ -123,7 +124,7 @@
"/files": {
target: serverUrl,
changeOrigin: true, //寮�鍚唬鐞�
- }
- }
- }
-}
+ },
+ },
+ },
+};
--
Gitblit v1.8.0