配件类型

css/basic/fit_type_list.css

@@ -0,0 +1,61 @@
+#main-box {
+	width: 100%;
+	height: calc(100% - 180px);
+	box-sizing: border-box;
+	background-color: #fff;
+	border-radius: 5px;
+}
+
+/*dtree样式设置*/
+[class^="dtree-icon-"],
+[class*=" dtree-icon-"] {
+	font-size: 20px !important;
+}
+
+.dtree-laySimple-item:hover {
+	background-color: #d2d2d2 !important;
+}
+
+.dtree-laySimple-item cite {
+	font-size: 16px !important;
+}
+
+.dtree-theme-item cite {
+	font-size: 16px !important;
+}
+
+.dtree-theme-item:hover cite {
+	color: #1E9FFF !important;
+}
+
+.dtree-nav-this cite {
+	color: #1E9FFF !important;
+}
+
+.dtree-nav-div:hover cite {
+	opacity: 1 !important;
+}
+
+.dtree-toolbar .layui-nav-child dd a i {
+	color: #1E9FFF !important;
+}
+
+.dtree-toolbar-fixed a i {
+	color: #1E9FFF !important;
+}
+
+.dtree-laySimple-item-this {
+	background-color: rgb(214 237 250) !important;
+}
+
+.dtree-laySimple-item:hover {
+	background-color: rgb(214 237 250) !important;
+}
+
+.dtree-theme-item:hover {
+	background-color: #d6edfa !important;
+}
+
+.dtree-theme-item-this {
+	background-color: #d6edfa !important;
+}

css/data_form.css

@@ -59,4 +59,24 @@ body {
     line-height: 10px;
     font-size: 10px;
     color: #a29c9c;
+}
+
+/**自定义滚动条样式 */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #9c9da0;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em
 }

js/basic/child/fit_type_form.js

@@ -0,0 +1,73 @@
+let form, layer;
+let objParam;
+function setParams(obj) {
+  objParam = JSON.parse(obj);
+  console.log(objParam);
+  $('#parentName').val(objParam.context);
+  $('#parentId').val(objParam.id);
+  if (objParam.type === 2) { // 新增
+    $('#id').val(objParam.nodeId);
+  }
+  console.log(objParam);
+  layui.use(['form', 'layer'], function () {
+    form = layui.form;
+    layer = layui.layer;
+    form.verify();
+    form.on('submit(formData)', function (data) {
+      submitApply(data);
+    });
+    form.render();
+  });
+}
+
+function saveData2() {
+  $('#formSubmit').trigger('click')
+}
+
+// 提交
+function submitApply(data) {
+  console.log(data.field);
+  let loadingMsg = layer.msg('正在提交保存,请稍等...', { icon: 16, shade: 0.01, time: '0' });
+  console.log(JSON.stringify(data.field));
+  let url = '';
+  if (objParam.type === 1) { // 新增
+    url = dataUrl + 'backstage/paType/addTypeData';
+  } else if (objParam.type === 2) { // 修改
+    url = dataUrl + 'backstage/paType/updateTypeData';
+  }
+  let params = {
+    encryptedData: JSON.stringify(data.field)
+  };
+  ajaxRequest(url, 'POST', params, true, function () {
+    $('.save').addClass("layui-btn-disabled").attr("disabled", true);
+    $('.cancel').addClass("layui-btn-disabled").attr("disabled", true);
+  }, function (result) {
+    console.log(result);
+    layer.close(loadingMsg);
+    $('.save').removeClass("layui-btn-disabled").attr("disabled", false);
+    $('.cancel').removeClass("layui-btn-disabled").attr("disabled", false);
+    if (result.code === 200) {
+      parent.layer.msg(result.msg, { icon: 1 });
+      closePage(1);
+    } else {
+      layer.msg(result.msg, { icon: 2 });
+    }
+  }, function (xhr, status, error) {
+    layer.close(loadingMsg); // 关闭提示层
+    layer.msg('服务异常，请稍后重试', { icon: 16, scrollbar: false, time: 2000 });
+    $('.save').removeClass("layui-btn-disabled").attr("disabled", false);
+    $('.cancel').removeClass("layui-btn-disabled").attr("disabled", false);
+    errorFn(xhr, status, error)
+  }, null);
+}
+
+// 关闭页面
+function closePage(type, obj) {
+  let index = parent.layer.getFrameIndex(window.name);
+  parent.layer.close(index);
+  if (type == 1) {
+    let json = { "id": obj.id, "title": obj.name, "parentId": obj.parentId, "level": obj.level };
+    window.parent.reloadData(json)
+  }
+
+}

js/basic/fit_type_list.js

@@ -0,0 +1,122 @@
+let form, layer, dtree, fitTypeTree, util, dtreeData = [], jsonData = null;
+layui.config({
+    base: "../../lib/layui-v2.9.18/layui/dtree/", //此处路径请自行处理, 可以使用绝对路径
+}).extend({
+    dtree: 'dtree'
+}).use(['form', 'layer', 'dtree', 'util'], function () {
+    layer = layui.layer;
+    form = layui.form;
+    dtree = layui.dtree;
+    util = layui.util;
+    form.render();
+    dtreeData = getDTreeData();
+    fitTypeTree = dtree.render({
+        elem: "#fitTypeTree",
+        width: "98%", // 指定树的宽度
+        dataFormat: "list",
+        none: "无数据",
+        menubar: true,
+        data: dtreeData,
+        line: true,  // 显示树线
+        toolbar: true,
+        menubarTips: {
+            group: []
+        },
+        toolbarWay: "follow",
+        toolbarShow: [],
+        toolbarFun: {
+            loadToolbarBefore: function (buttons, param, $div) { //（层级最多3级，一级配件类型，二级配件名称，三级规格型号）
+                if (param.level === '1') {
+                    buttons.customEdit = "";
+                    buttons.customDel = "";
+                } else if (param.level === '4') { // 三级规格型号
+                    buttons.customAdd = "";
+                }
+                return buttons; // 将按钮对象返回
+            },
+        },
+        toolbarExt: [{
+            toolbarId: "customAdd", icon: "dtree-icon-roundadd", title: "新增", handler: function (node, $div) {
+                addOrEditFitType(1, node, $div);
+            }
+        },
+        {
+            toolbarId: "customEdit", icon: "dtree-icon-bianji", title: "修改", handler: function (node, $div) {
+                addOrEditFitType(2, node, $div);
+            }
+        },
+        {
+            toolbarId: "customDel", icon: "dtree-icon-roundclose", title: "删除", handler: function (node, $div) {
+                if (node.level === '2') { // 删除配件
+                    delAreaData(node.nodeId, node.parentId, '1', $div)
+                } else if (node.level === '3') { // 删除配件
+                    delAreaData(node.nodeId, node.parentId, '2', $div)
+                }
+            }
+        }],
+        done: function (result, $ul, first) {
+
+        }
+    });
+    dtree.on('node("areaTree")', function (obj) {
+    });
+});
+
+/**
+ * 新增/修改 配件管理
+ * */
+function addOrEditFitType(type, node, $div) {
+    let title = '';
+    node.type = type;
+    if (type == 1) {
+        title = '新增';
+    } else if (type == 2) {
+        title = '修改';
+    }
+    console.log(node);
+    openIframeByDtree("fit_type_form", title, './child/fit_type_form.html', '40%', '50%', node, $div);
+}
+
+// 赋值新增节点
+function reloadData(data) {
+    jsonData = data;
+}
+
+
+// 加载dtree数据
+function getDTreeData() {
+    let list = [];
+    let encryptedData = {};
+    let url = dataUrl + 'backstage/paType/getTypeList?encryptedData=' + encodeURIComponent(JSON.stringify(encryptedData));
+    ajaxRequest(url, "GET", null, false, function () {
+    }, function (result) {
+        console.log(result);
+        if (result.code === 200) {
+            if (result.data && result.data.length > 0) {
+                $.each(result.data, function (index, item) {
+                    item.title = item.name;
+                    list.push(item);
+                })
+            }
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, null);
+    return list;
+}
+
+// 查询、重置
+function queryDtree(type) {
+    if (type === 1) {
+        var keyWord = $("#keyWord").val();
+        fitTypeTree.fuzzySearch(keyWord);
+    } else if (type === 2) {
+        $("#keyWord").val('');
+        fitTypeTree.fuzzySearch('');
+    }
+}
+
+// 赋值新增节点
+function reloadData(data) {
+    jsonData = data;
+}

js/openIframe.js

@@ -6,7 +6,7 @@
  * height：高度
  * params 参数
  */
-function openIframeByParam(id, title, content, width, height,params) {
+function openIframeByParam(id, title, content, width, height, params) {
     let layerIndex = layer.open({
         id: id,
         type: 2,
@@ -18,13 +18,13 @@ function openIframeByParam(id, title, content, width, height,params) {
         area: [width, height],
         move: false,
         success: function () {
-            if(params){
+            if (params) {
                 let iframeWin = window["layui-layer-iframe" + layerIndex];
                 iframeWin.setParams(params);
             }
         },
-        cancel:function () {},
+        cancel: function () { },
-        end:function(){}
+        end: function () { }
     });
 }
 
@@ -36,7 +36,7 @@ function openIframeByParam(id, title, content, width, height,params) {
  * height：高度
  * params 参数对象
  */
-function openIframeByParamObj(id, title, content, width, height,paramsObj) {
+function openIframeByParamObj(id, title, content, width, height, paramsObj) {
     let layerIndex = layer.open({
         id: id,
         type: 2,
@@ -48,17 +48,17 @@ function openIframeByParamObj(id, title, content, width, height,paramsObj) {
         area: [width, height],
         move: false,
         success: function () {
-            if(paramsObj){
+            if (paramsObj) {
                 let iframeWin = window["layui-layer-iframe" + layerIndex];
                 iframeWin.setParams(JSON.stringify(paramsObj));
             }
         },
-        cancel:function () {},
+        cancel: function () { },
-        end:function(){}
+        end: function () { }
     });
 }
 
-function openIframeByParamObj2(id, title, content, width, height,paramsObj) {
+function openIframeByParamObj2(id, title, content, width, height, paramsObj) {
     let layerIndex = parent.layer.open({
         id: id,
         type: 2,
@@ -70,12 +70,44 @@ function openIframeByParamObj2(id, title, content, width, height,paramsObj) {
         area: [width, height],
         move: false,
         success: function () {
-            if(paramsObj){
+            if (paramsObj) {
                 let iframeWin = parent.window["layui-layer-iframe" + layerIndex];
                 iframeWin.setParams(JSON.stringify(paramsObj));
             }
         },
-        cancel:function () {},
+        cancel: function () { },
-        end:function(){}
+        end: function () { }
+    });
+}
+
+
+/* dtree专用弹框 */
+function openIframeByDtree(id, title, content, width, height, params, $div) {
+    let layerIndex = layer.open({
+        id: id,
+        type: 2,
+        title: ['<div style="border-left: 3px solid #409EFF;color:#409EFF;font-size:18px;letter-spacing:1px;display: flex;align-items: center;height: 20px;padding: 0 10px;font-weight: bold;">' + title + '</div>', 'font-size:16px;background-color:#f0f0f0;display: flex;align-items: center;'],
+        content: content,
+        shade: 0.3,
+        anim: 2,
+        shadeClose: false,
+        area: [width, height],
+        move: false,
+        success: function () {
+            let iframeWin = window["layui-layer-iframe" + layerIndex];
+            iframeWin.setParams(JSON.stringify(params));
+        },
+        end: function () {
+            if (jsonData) {
+                if (params.id) {
+                    // 修改节点
+                    areaTree.partialRefreshEdit($div, jsonData.title);
+                } else {
+                    // 新增节点
+                    areaTree.partialRefreshAdd($div, jsonData);
+                }
+                jsonData = null;
+            }
+        }
     });
 }

page/basic/child/fit_type_form.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>配件类型-新增/修改</title>
+    <link rel="stylesheet" href="../../../lib/layui-v2.9.18/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="../../../css/font.css" media="all">
+    <link rel="stylesheet" href="../../../css/data_form.css" media="all">
+</head>
+
+<style>
+    body {
+        height: 96%;
+    }
+</style>
+
+<body>
+    <div class="main-box">
+        <form class="layui-form layuimini-form" onclick="return false;" style="padding: 0 15%;">
+            <input id="id" name="id" hidden>
+            <input id="parentId" name="parentId" hidden>
+            <div class="layui-form-item" style="margin-top: 2%;">
+                <div class="layui-inline">
+                    <label class="layui-form-label required" style="width: 100px !important;">数据节点</label>
+                    <div class="layui-input-inline">
+                        <input class="layui-input" name="parentName" id="parentName" style="background-color: #F2F2F2;"
+                            lay-verify="required" readonly>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-form-item">
+                <div class="layui-inline">
+                    <label class="layui-form-label required" style="width: 100px !important;">节点名称</label>
+                    <div class="layui-input-inline">
+                        <input class="layui-input" name="name" id="name" autocomplete="off" placeholder="请输入内容"
+                            lay-verify="required" maxlength="30" lay-affix="clear">
+                    </div>
+                </div>
+            </div>
+            <div class="layui-form-item">
+                <div class="layui-inline">
+                    <label class="layui-form-label required" style="width: 100px !important;">计量单位</label>
+                    <div class="layui-input-inline">
+                        <input class="layui-input" name="unit" id="unit" autocomplete="off" placeholder="请输入内容"
+                            lay-verify="required" maxlength="30" lay-affix="clear">
+                    </div>
+                </div>
+            </div>
+            <button type="submit" id="formSubmit" class="layui-btn" lay-submit="" lay-filter="formData"
+                style="display: none;"></button>
+        </form>
+    </div>
+    <div class="btn-box">
+        <button class="layui-btn layui-bg-blue save" onclick="saveData2()">确定</button>
+        <button class="layui-btn layui-btn-primary cancel" onclick="closePage()">取消</button>
+    </div>
+</body>
+<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
+<script src="../../../js/public.js" charset="utf-8"></script>
+<script src="../../../lib/layui-v2.9.18/layui/layui.js" charset="utf-8"></script>
+<script src="../../../js/basic/child/fit_type_form.js" charset="utf-8"></script>
+
+</html>

page/basic/fit_type_list.html

@@ -10,11 +10,46 @@
     <link rel="stylesheet" href="../../lib/layui-v2.9.18/layui/css/layui.css" media="all">
     <link rel="stylesheet" href="../../lib/layui-v2.9.18/layui/dtree/dtree.css" media="all">
     <link rel="stylesheet" href="../../lib/layui-v2.9.18/layui/dtree/font/dtreefont.css" media="all">
-    
     <link rel="stylesheet" href="../../css/font.css" media="all">
     <link rel="stylesheet" href="../../css/public.css" media="all">
+    <link rel="stylesheet" href="../../css/basic/fit_type_list.css" media="all">
 </head>
+
 <body>
+    <div class="layuimini-container">
+        <div class="layuimini-main">
+            <fieldset class="table-search-fieldset">
+                <legend>搜索信息</legend>
+                <div style="margin: 10px 10px 10px 10px">
+                    <form class="layui-form layui-form-pane" action="#" onsubmit="return false;">
+                        <div class="layui-form-item">
+                            <div class="layui-inline">
+                                <div class="layui-input-inline" style="width: 300px;">
+                                    <input type="text" name="keyWord" id="keyWord" autocomplete="off"
+                                        class="layui-input" lay-affix="clear" placeholder="输入关键字" maxlength="30">
+                                </div>
+                            </div>
+
+                            <div class="layui-inline">
+                                <button class="layui-btn layui-bg-blue" onclick="queryDtree(1)"><i
+                                        class="layui-icon"></i> 搜 索</button>
+                                <button class="layui-btn layui-btn-primary" onclick="queryDtree(2)"><i
+                                        class="layui-icon layui-icon-refresh"></i> 重 置</button>
+                                <button class="layui-btn layui-btn-primary layui-border" dtree-id="fitTypeTree"
+                                    dtree-menu="moveDown">全 部 展 开</button>
+                                <button class="layui-btn layui-btn-primary layui-border" dtree-id="fitTypeTree"
+                                    dtree-menu="moveUp"> 全 部 折 叠</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </fieldset>
+            <div id="main-box">
+                <ul id="fitTypeTree" class="dtree" style="height: calc(100vh - 180px);overflow: auto;" data-id="-1">
+                </ul>
+            </div>
+        </div>
+    </div>
 
 </body>
 <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>