Calculation/app/view/measure/work_modal.ejs

<!--弹出添加中间计量-->
<div class="modal fade" id="add-mj" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加中间计量</h5>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>中间计量编号<b class="text-danger">*</b></label>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入中间计量编号" value="WJQR1-201711" id="mj-code">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" title="自动编号" id="autoCode"><i class="fa fa-repeat"></i></button>
                        </div>
                        <div class="invalid-feedback" style="display: none" id="mj-Hint">您输入的编号已存在</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>计量月份</label>
                    <input data-view="months" data-min-view="months" class="datepicker-here form-control" placeholder="按时间筛选" type="text" data-date-format="yyyy MM " data-language="zh" id="mj-date">
                </div>
                <div class="form-group">
                    <label>计量期</label>
                    <select class="form-control">
                        <option disabled>选填</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="addCancel">关闭</button>
                <button type="button" class="btn btn-primary" id="addOk">添加</button>
            </div>
        </div>
    </div>
</div>
<!--弹出添加计量清单-->
<div class="modal fade" id="add-pos" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择计量范围</h5>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="输入项目节编号/名称 检索">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="search-pos">检索</button>
                    </div>
                </div>
                <!--检索结果-->
                <table class="table table-sm table-bordered" style="overflow: auto">
                    <legend class="h5 ">检索结果</legend>
                    <tr><th width="200">项目节编号</th><th>项目节名称</th><th width="90">添加</th></tr>
                    <tbody id="searchedPosList">
                    </tbody>
                </table>
                <table class="table table-sm table-bordered" id="measure-pos">
                    <legend class="h5 ">已添加项目节</legend>
                    <tr><th width="200">项目节编号</th><th>项目节名称</th><th width="90">移除</th></tr>
                    <tbody id="measurePosList">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="chooseBills">选择计量清单</button>
            </div>
        </div>
    </div>
</div>
<!--弹出添加计量清单-->
<div class="modal fade" id="add-qd" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择计量清单</h5>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="输入清单编号/名称 检索">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="search-bills">检索</button>
                    </div>
                </div>
                <!--检索结果-->
                <table class="table table-sm table-bordered">
                    <legend>检索结果</legend>
                    <tr><th>清单编号</th><th>名称</th><th>单位</th><th>单价</th><th width="90">选择</th></tr>
                    <tbody id="searchedBillsList">
                    <!--<tr><td>203-1-1</td><td><a href="#">挖土方</a></td><td>m3</td><td>7.54</td><td><input type="checkbox" checked> 已选择</td></tr>-->
                    <!--<tr><td colspan="5"><span>└</span> 1-2-5 排水沟工程</td></tr>-->
                    <!--<tr><td>203-1-1</td><td>挖土方</td><td>m3</td><td>7.54</td><td><input type="checkbox"></td></tr>-->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="choosePos">选择计量范围</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--审批流程/结果-->
<div class="modal fade" id="sp-list" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">审批流程</h5>
            </div>
            <div class="modal-body">
                <div class="card mt-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <span class="text-success pull-right">审批通过</span>
                            <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
                            <p class="card-text">审批意见。2018-01-01</p>
                        </li>
                        <li class="list-group-item">
                            <span class="text-warning pull-right">审批中</span>
                            <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
                            <p class="card-text"></p>
                        </li>
                        <li class="list-group-item">
                            <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--首次使用-->
<div class="modal" id="first">
    <div class="modal-dialog" role="document" >
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">设置中间计量编号规则</h5>
            </div>
            <div class="modal-body">
                <h5 >
                    当前规则：
                    <span id="preview">
                        <% if (codeRule && codeRule instanceof Array) { %>
                            <% const preview = []; %>
                            <% for (const rule of codeRule) { %>
                                <% preview.push(rule.preview); %>
                            <% } %>
                            <%- preview.join(''); %>
                        <% } %>
                    </span>
                </h5>
                <h5 id="ruleParts">
                    <% if (codeRule && codeRule instanceof Array) { %>
                        <% for (const rule of codeRule) { %>
                        <span class="badge badge-light" title="<%- ruleConst.ruleString[rule.rule_type]%>">
                            <span>
                                <%- rule.preview %>
                            </span>
                            <a href="javascript: void(0);" class="text-danger" title="移除"><i class="fa fa-remove"></i></a>
                        </span>
                        <% } %>
                    <% } %>
                </h5>
                <h5>添加新规则组件</h5>
                <div class="form-group">
                    <select class="form-control">
                        <option disabled selected>请选择组件</option>
                        <% for (const index in ruleConst.ruleString) { %>
                            <option value="<%- index %>"><%- ruleConst.ruleString[index] %></option>
                        <% } %>
                    </select>
                </div>
                <div class="form-group" id="format" style="display: none">
                    <label>自动编号位数</label>
                    <input min="3" class="form-control" step="1" max="6" value="3" type="number">
                </div>
                <div class="form-group" id="text" style="display: none">
                    <label>起始编号</label>
                    <input class="form-control" value="001" type="text">
                </div>
                <button class="btn btn-primary" id="addRule">添加组件</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button class="btn btn-primary" id="setRule">确定</button>
            </div>
        </div>
    </div>
</div>
<!--设置-->
<div class="modal fade" id="setting" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">中间计量设置</h5>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#profile" role="tab">信息设置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#rule" role="tab">编号规则</a>
                    </li>
                </ul>
                <div class="tab-content" >
                    <div class="tab-pane fade show active" id="profile" role="tabpanel">
                        <div class="form-group">
                            <label>中间计量编号<b class="text-danger">*</b></label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入中间计量编号" value="WJQR1-201711">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" title="自动编号"><i class="fa fa-repeat"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>计量月份</label>
                            <input data-view="months" data-min-view="months" class="datepicker-here form-control" placeholder="按时间筛选" type="text" data-date-format="yyyy MM " data-language="zh">
                        </div>
                        <div class="form-group">
                            <label>计量期</label>
                            <select class="form-control">
                                <option>选填</option>
                                <option>15</option>
                                <option>14</option>
                            </select>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="rule" role="tabpanel">
                        <h5 id="preview">
                            当前规则：
                            <% if (codeRule && codeRule instanceof Array) { %>
                                <% const preview = []; %>
                                <% for (const rule of codeRule) { %>
                                    <% preview.push(rule.preview); %>
                                <% } %>
                                <%- preview.join(''); %>
                            <% } %>
                        </h5>
                        <h5 id="ruleParts">
                            <% if (codeRule && codeRule instanceof Array) { %>
                                <% for (const rule of codeRule) { %>
                                    <span class="badge badge-light" title="<%- ruleConst.ruleString[rule.rule_type]%>">
                                        <span>
                                            <%- rule.preview %>
                                        </span>
                                        <a href="javascript: void(0);" class="text-danger" title="移除"><i class="fa fa-remove"></i></a>
                                    </span>
                                <% } %>
                            <% } %>
                        </h5>
                        <h5>添加新规则组件</h5>
                        <div class="form-group">
                            <select class="form-control">
                                <option disabled selected>请选择组件</option>
                                <% for (const index in ruleConst.ruleString) { %>
                                <option value="<%- index %>"><%- ruleConst.ruleString[index] %></option>
                                <% } %>
                            </select>
                        </div>
                        <div class="form-group" id="format" style="display: none">
                            <label>自动编号位数</label>
                            <input min="3" class="form-control" step="1" max="6" value="3" type="number">
                        </div>
                        <div class="form-group" id="text" style="display: none">
                            <label>起始编号</label>
                            <input class="form-control" value="001" type="text">
                        </div>
                        <button class="btn btn-primary" id="addRule">添加组件</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-outline-danger text-truncate" style="max-width: 200px;" title="删除 WJQR1-201710">删除 WJQR1-201710</button>
                <div>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--上报审批-->
<div class="modal fade" id="sub-sp" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">上报审批</h5>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>搜索审批人</label>
                    <div class="input-group">
                        <input class="form-control" placeholder="请输入姓名进行检索" type="text">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </div>
                <div class="card border-primary">
                    <div class="card-body">
                        <h5 class="card-title">
                            <a href="#" class="btn btn-primary btn-sm pull-right">添加</a>张三
                        </h5>
                        <h6 class="card-subtitle mb-2 text-muted">监理</h6>
                        <p class="card-text">XXXXX公司</p>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header">
                        审批流程
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>1 张三  <small class="text-muted">监理</small></li>
                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>2 王五 <small class="text-muted">监理</small></li>
                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>3 李四 <small class="text-muted">监理</small></li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确认上报</button>
            </div>
        </div>
    </div>
</div>
<!--审批流程/结果-->
<div class="modal fade" id="sp-list" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">审批流程</h5>
            </div>
            <div class="modal-body">
                <div class="card mt-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <span class="text-success pull-right">审批通过</span>
                            <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
                            <p class="card-text">审批意见。2018-01-01</p>
                        </li>
                        <li class="list-group-item">
                            <span class="text-warning pull-right">审批中</span>
                            <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
                            <p class="card-text"></p>
                        </li>
                        <li class="list-group-item">
                            <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--添加草图-->
<div class="modal fade" id="edit-img" data-backdrop="static">
    <div class="modal-dialog modal-lgx" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加草图</h5>
            </div>
            <div class="modal-body">
                <p><a href="" class="btn btn-outline-primary btn-sm">上传图片</a></p>
                <div class="img-view">
                    <div class="img-item">
                        <div class="img-bar">
                            <a href="" class="text-danger" title="删除"><i class="fa fa-remove"></i></a>
                        </div>
                        <img src="img/sketch/1.png" id="draggable">
                    </div>
                    <div class="img-item" style="left:300px;">
                        <div class="img-bar">
                            <a href="" class="text-danger" title="删除"><i class="fa fa-remove"></i></a>
                        </div>
                        <img src="img/sketch/2.png" id="draggable">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" >确认</button>
            </div>
        </div>
    </div>
</div>
<script>
    const ruleType = <%- ruleType %>;
    const ruleConst = JSON.parse('<%- JSON.stringify(ruleConst) %>');
    let codeRule = JSON.parse('<%- JSON.stringify(codeRule) %>');
</script>
<script src="/public/js/moment/moment.min.js"></script>
<script src="/public/js/datepicker/datepicker.min.js"></script>
<script src="/public/js/datepicker/datepicker.zh.js"></script>