zchl-ui 1.0.0

package/packages/zTree/css/zTreeStyle.css

@@ -0,0 +1,349 @@
+.ztree * {
+	padding: 0;
+	margin: 0;
+	font-size: 12px;
+	font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif
+}
+
+.ztree {
+	margin: 0;
+	padding: 5px;
+	color: #333
+}
+
+.ztree li {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	line-height: 14px;
+	text-align: left;
+	white-space: nowrap;
+	outline: 0
+}
+
+.ztree li ul {
+	margin: 0;
+	padding: 0 0 0 18px
+}
+
+.ztree li ul.line {
+	background: url(./img/line_conn.gif) 0 0 repeat-y;
+}
+
+.ztree li a {
+	padding: 1px 3px 0 0;
+	margin: 0;
+	cursor: pointer;
+	height: 17px;
+	color: #333;
+	background-color: transparent;
+	text-decoration: none;
+	vertical-align: top;
+	display: inline-block
+}
+
+.ztree li a:hover {
+	text-decoration: underline
+}
+
+.ztree li a.curSelectedNode {
+	padding-top: 0px;
+	background-color: #FFE6B0;
+	color: black;
+	height: 16px;
+	border: 1px #FFB951 solid;
+	opacity: 0.8;
+}
+
+.ztree li a.curSelectedNode_Edit {
+	padding-top: 0px;
+	background-color: #FFE6B0;
+	color: black;
+	height: 16px;
+	border: 1px #FFB951 solid;
+	opacity: 0.8;
+}
+
+.ztree li a.tmpTargetNode_inner {
+	padding-top: 0px;
+	background-color: #316AC5;
+	color: white;
+	height: 16px;
+	border: 1px #316AC5 solid;
+	opacity: 0.8;
+	filter: alpha(opacity=80)
+}
+
+.ztree li a.tmpTargetNode_prev {}
+
+.ztree li a.tmpTargetNode_next {}
+
+.ztree li a input.rename {
+	height: 14px;
+	width: 80px;
+	padding: 0;
+	margin: 0;
+	font-size: 12px;
+	border: 1px #7EC4CC solid;
+	border: 0px
+}
+
+.ztree li span {
+	line-height: 16px;
+	margin-right: 2px;
+	font-size: 14px
+}
+
+.ztree li span.button {
+	line-height: 0;
+	margin: 0;
+	width: 16px;
+	height: 16px;
+	display: inline-block;
+	vertical-align: middle;
+	border: 0 none;
+	cursor: pointer;
+	outline: none;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-attachment: scroll;
+	background-image: url("./img/zTreeStandard.png");
+	background-image: url("./img/zTreeStandard.gif")
+}
+
+.ztree li span.button.chk {
+	width: 13px;
+	height: 13px;
+	margin: 0 3px 0 0;
+	cursor: auto
+}
+
+.ztree li span.button.chk.checkbox_false_full {
+	background-position: 0 0
+}
+
+.ztree li span.button.chk.checkbox_false_full_focus {
+	background-position: 0 -14px
+}
+
+.ztree li span.button.chk.checkbox_false_part {
+	background-position: 0 -28px
+}
+
+.ztree li span.button.chk.checkbox_false_part_focus {
+	background-position: 0 -42px
+}
+
+.ztree li span.button.chk.checkbox_false_disable {
+	background-position: 0 -56px
+}
+
+.ztree li span.button.chk.checkbox_true_full {
+	background-position: -14px 0
+}
+
+.ztree li span.button.chk.checkbox_true_full_focus {
+	background-position: -14px -14px
+}
+
+.ztree li span.button.chk.checkbox_true_part {
+	background-position: -14px -28px
+}
+
+.ztree li span.button.chk.checkbox_true_part_focus {
+	background-position: -14px -42px
+}
+
+.ztree li span.button.chk.checkbox_true_disable {
+	background-position: -14px -56px
+}
+
+.ztree li span.button.chk.radio_false_full {
+	background-position: -28px 0
+}
+
+.ztree li span.button.chk.radio_false_full_focus {
+	background-position: -28px -14px
+}
+
+.ztree li span.button.chk.radio_false_part {
+	background-position: -28px -28px
+}
+
+.ztree li span.button.chk.radio_false_part_focus {
+	background-position: -28px -42px
+}
+
+.ztree li span.button.chk.radio_false_disable {
+	background-position: -28px -56px
+}
+
+.ztree li span.button.chk.radio_true_full {
+	background-position: -42px 0
+}
+
+.ztree li span.button.chk.radio_true_full_focus {
+	background-position: -42px -14px
+}
+
+.ztree li span.button.chk.radio_true_part {
+	background-position: -42px -28px
+}
+
+.ztree li span.button.chk.radio_true_part_focus {
+	background-position: -42px -42px
+}
+
+.ztree li span.button.chk.radio_true_disable {
+	background-position: -42px -56px
+}
+
+.ztree li span.button.switch {
+	width: 18px;
+	height: 18px
+}
+
+.ztree li span.button.root_open {
+	background-position: -92px -54px
+}
+
+.ztree li span.button.root_close {
+	background-position: -74px -54px
+}
+
+.ztree li span.button.roots_open {
+	background-position: -92px 0
+}
+
+.ztree li span.button.roots_close {
+	background-position: -74px 0
+}
+
+.ztree li span.button.center_open {
+	background-position: -92px -18px
+}
+
+.ztree li span.button.center_close {
+	background-position: -74px -18px
+}
+
+.ztree li span.button.bottom_open {
+	background-position: -92px -36px
+}
+
+.ztree li span.button.bottom_close {
+	background-position: -74px -36px
+}
+
+.ztree li span.button.noline_open {
+	background-position: -92px -72px
+}
+
+.ztree li span.button.noline_close {
+	background-position: -74px -72px
+}
+
+.ztree li span.button.root_docu {
+	background: none;
+}
+
+.ztree li span.button.roots_docu {
+	background-position: -56px 0
+}
+
+.ztree li span.button.center_docu {
+	background-position: -56px -18px
+}
+
+.ztree li span.button.bottom_docu {
+	background-position: -56px -36px
+}
+
+.ztree li span.button.noline_docu {
+	background: none;
+}
+
+.ztree li span.button.ico_open {
+	margin-right: 2px;
+	background-position: -110px -16px;
+	vertical-align: top;
+	vertical-align: middle
+}
+
+.ztree li span.button.ico_close {
+	margin-right: 2px;
+	background-position: -110px 0;
+	vertical-align: top;
+	vertical-align: middle
+}
+
+.ztree li span.button.ico_docu {
+	margin-right: 2px;
+	background-position: -110px -32px;
+	vertical-align: top;
+	vertical-align: middle
+}
+
+.ztree li span.button.edit {
+	margin-right: 2px;
+	background-position: -110px -48px;
+	vertical-align: top;
+	vertical-align: middle
+}
+
+.ztree li span.button.remove {
+	margin-right: 2px;
+	background-position: -110px -64px;
+	vertical-align: top;
+	vertical-align: middle
+}
+
+.ztree li span.button.ico_loading {
+	margin-right: 2px;
+	background: url(./img/loading.gif) no-repeat scroll 0 0 transparent;
+	vertical-align: top;
+	vertical-align: middle
+}
+
+ul.tmpTargetzTree {
+	background-color: #FFE6B0;
+	opacity: 0.8;
+	filter: alpha(opacity=80)
+}
+
+span.tmpzTreeMove_arrow {
+	width: 16px;
+	height: 16px;
+	display: inline-block;
+	padding: 0;
+	margin: 2px 0 0 1px;
+	border: 0 none;
+	position: absolute;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-attachment: scroll;
+	background-position: -110px -80px;
+	background-image: url("./img/zTreeStandard.png");
+	background-image: url("./img/zTreeStandard.gif")
+}
+
+ul.ztree.zTreeDragUL {
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	width: auto;
+	height: auto;
+	overflow: hidden;
+	background-color: #cfcfcf;
+	border: 1px #00B83F dotted;
+	opacity: 0.8;
+	filter: alpha(opacity=80)
+}
+
+.zTreeMask {
+	z-index: 10000;
+	background-color: #cfcfcf;
+	opacity: 0.0;
+	filter: alpha(opacity=0);
+	position: absolute
+}

package/packages/zTree/js/initTree.js

@@ -0,0 +1,75 @@
+const $ = require('jquery')
+const ztree = require("./jquery.ztree.core.js")
+import "../css/zTreeStyle.css"
+//import ztreeContent from './jquery.ztree.core.js?raw'
+//const ztree = Function('module', 'exports', ztreeContent + '; return module.exports')()
+import axios from 'axios';
+export default function initZtree(domId, callback) {
+    // 初始化zTree工具
+    ztree($)
+    // 设置zTree配置对象
+    const setting = {
+        view: {
+            fontCss: { color: "#555", "font-size": "13px" },
+            showIcon: false,
+        },
+        data: {
+            key: {
+                id: 'code',
+                name: "text",
+                children: "nodes"
+            }
+        },
+        callback: {
+            onClick: function (a, b, node) {
+                //window.treeNode = node
+                callback(node);
+            },
+        },
+    };
+    async function organizationTree() {
+        const res = await axios({
+            method: 'post',
+            url: `/qkljg/common/getOrgTree`,
+        });
+
+        if (res.status === 200) {
+            if (res.data) {
+                const tree = [res.data]
+
+                function filterTree(tree, targetCode) {
+                    for (let i = 0; i < tree.length; i++) {
+                        const node = tree[i];
+
+                        // 找到目标节点
+                        if (node.code === targetCode) {
+                            return [node];
+                        }
+
+                        // 如果有子节点，递归查找
+                        if (node.nodes && node.nodes.length > 0) {
+                            const result = filterTree(node.nodes, targetCode);
+                            if (result) {
+                                return result;
+                            }
+                        }
+                    }
+
+                    return null;
+                }
+                //console.log(filterTree(data))
+                //渲染树型
+                const treeObj = $.fn.zTree.init($("#" + domId), setting, filterTree(tree, currentOrgCode));
+                const nodes = treeObj.getNodes();
+                if (nodes.length > 0) {
+                    treeObj.selectNode(nodes[0]);
+                    callback(nodes[0])
+                }
+            }
+        } else {
+            //layer.msg(res.msg || "银行树数据获取响应失败");
+        }
+    }
+    organizationTree()
+}
+