S.H.I.E.L.D.
/
building-admin-cailiao


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>材料替换库</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
    <!--zTree-->
  	<link rel="stylesheet" href="css/ztree/zTreeStyle.css" type="text/css">
</head>

<body>
    <div class="header">
        <nav class="navbar navbar-toggleable-lg navbar-light bg-faded p-0 ">
            <span class="header-logo px-2">材料替换库</span>
            <div class="navbar-text"><a href="main.html" class="mr-3">返回</a>重庆 [2013]调整人工单价 <i class="fa fa-angle-right fa-fw"></i> 市政土建工程</div>
        </nav>
        <nav class="navbar navbar-toggleable-lg justify-content-between navbar-light p-0">
              <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item">
                      <a class="nav-link active px-3" href="gongliao.html">清单</a>
                  </li>
              </ul>
        </nav>
    </div>
    <div class="main">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                  <div class="main-content col-lg-4 p-0">
                    <div class="toolsbar p-1 d-flex justify-content-between">
                      <div class="input-group input-group-sm">
                            <input class="form-control" placeholder="搜索定位" type="text">
                            <span class="input-group-btn">
                              <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
                            </span>
                          </div>
                          <a class="btn btn-sm btn-link"  href="javacript:void(0);" data-toggle="modal" data-target="#guize"">关于规则</a>
                    </div>
                    <div class="main-data">
                      <table class="table table-sm table-bordered m-0">
                      <thead>
                        <tr>
                          <th>项目编码</th>
                          <th>项目名称</th>
                          <th>关联规则</th>
                        </tr>
                      </thead>
                      <tr>
                        <td>D</td>
                        <td>市政工程</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>D.5.1</td>
                        <td>管道铺设</td>
                        <td></td>
                      </tr>
                      <tr>
                        <td>40501003</td>
                        <td>铸铁管</td>
                        <td><select class="form-control form-control-sm">
                          <option value="">规则1</option>
                          <option value="">规则2</option>
                          <option value="">规则3</option>
                        </select></td>
                      </tr>
                    </table>
                    </div>
                  </div>
                  <div class="main-side col-lg-4 p-0">
                    <div class="sidebar-tools-bar tools-bar-height-q">
                      <div class="p-1">
                          <a href="javacript:void(0);" data-toggle="modal" data-target="#add" class="btn btn-primary btn-sm">增加材料</a>
                      </div>
                    </div>
                    <div class="main-data-side-q">
                      <table class="table table-sm table-bordered m-0">
                        <thead>
                          <tr><th>材料编号</th><th>材料名称</th><th>规格</th></tr>
                        </thead>
                        <tbody>
                          <tr><td>24030101</td><td>铸铁管</td><td></td></tr>
                          <tr><td>24030102</td><td>铸铁管Φ150</td><td></td></tr>
                          <tr><td>24030501</td><td>法兰铸铁管</td><td></td></tr>
                          <tr><td>24030601</td><td>球墨铸铁管</td><td></td></tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
    <!--弹出增加材料-->
    <div class="modal fade" id="add" data-backdrop="static">
        <div class="modal-dialog  modal-lgx" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">增加材料</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="row">
                    <div class="col-3">
                      <div class="modal-fixed-height">
                        <ul id="treeDemo" class="ztree"></ul>
                      </div>
                    </div>
                    <div class="col-9">
                      <div class="row justify-content-between">
                        <div class="col-4">
                          <div class="form-check form-check-inline">
                            <label class="form-check-label">
                              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 所有
                            </label>
                          </div>
                          <div class="form-check form-check-inline">
                            <label class="form-check-label">
                              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 标准
                            </label>
                          </div>
                          <div class="form-check form-check-inline">
                            <label class="form-check-label">
                              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 补充
                            </label>
                          </div>
                        </div>
                        <div class="col-4">
                          <input class="form-control form-control-sm" type="text" placeholder="输入编码或名称 筛选">
                        </div>
                      </div>
                      <div class="modal-fixed-height2">
                        <table class="table table-sm table-bordered">
                          <thead>
                            <tr><th></th><th>选择</th><th>编码</th><th>名称</th><th>规格型号</th><th>单位</th><th>单价</th><th>类型</th></tr>
                          </thead>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <a href="" class="btn btn-primary">确认添加</a>
                </div>
            </div>
        </div>
    </div>
    <!--弹出关于规则-->
    <div class="modal fade" id="guize" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">关于规则</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <table class="table table-bordered">
                    <thead><tr><th width="90">规则名称</th><th>规则解释</th></tr></thead>
                    <tr><td>规则1</td><td>1.混凝土种类：商品混凝土<br>2.混凝土强度等级：C30</td></tr>
                    <tr><td>规则2</td><td>砖品种、规格、强度等级：MU5烧结页岩空心砖</td></tr>
                  </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- JS. -->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/tether/tether.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/global.js"></script>
        <!-- zTree -->
    <script type="text/javascript" src="js/ztree/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/ztree/jquery.ztree.excheck.js"></script>
    <script type="text/javascript">
        <!--
        var setting = {
          data: {
            simpleData: {
              enable: true
            }
          }
        };

        var zNodes =[
          { id:1, pId:0, name:"随意勾选 1", open:true},
          { id:11, pId:1, name:"随意勾选 1-1"},
          { id:12, pId:1, name:"随意勾选  1-2", open:true},
          { id:121, pId:12, name:"随意勾选 1-2-1", checked:true},
          { id:122, pId:12, name:"随意勾选 1-2-2"},
          { id:123, pId:12, name:"随意勾选 1-2-3"},
          { id:13, pId:1, name:"随意勾选 1-3"},
          { id:2, pId:0, name:"随意勾选 2", open:true},
          { id:21, pId:2, name:"随意勾选 2-1"},
          { id:22, pId:2, name:"随意勾选 2-2", open:true},
          { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
          { id:222, pId:22, name:"随意勾选 2-2-2"},
          { id:223, pId:22, name:"随意勾选 2-2-3"},
          { id:23, pId:2, name:"随意勾选 2-3", checked:true}
        ];

        var clearFlag = false;
        function onCheck(e, treeId, treeNode) {
          count();
          if (clearFlag) {
            clearCheckedOldNodes();
          }
        }
        function clearCheckedOldNodes() {
          var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
          nodes = zTree.getChangeCheckedNodes();
          for (var i=0, l=nodes.length; i<l; i++) {
            nodes[i].checkedOld = nodes[i].checked;
          }
        }
        function count() {
          var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
          checkCount = zTree.getCheckedNodes(true).length;
          $("#checkCount2").text(checkCount);

        }
        function createTree() {
          $.fn.zTree.init($("#treeDemo"), setting, zNodes);
          count();
        }
        $(document).ready(function(){
          createTree();
        });
        //-->
    </script>
</body>
<script type="text/javascript">
    autoFlashHeight();
</script>

</html>