Calculation/app/view/change/modal.ejs

<!--首次使用-->
<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="add-bj" 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 is-invalid" placeholder="请输入变更令号" value="WJQR1-201711" id="bj-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="bjHint">您输入的编号已存在</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>工程名称<b class="text-danger">*</b></label>
                    <input class="form-control" value="" type="text" id="bj-name">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="addCancel">关闭</button>
                <a href="javascript: void(0)" class="btn btn-primary" id="addOk">确认添加</a>
            </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="#bianhao" role="tab" aria-controls="home" aria-selected="true">编号规则</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="bianhao">
                        <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>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="setRule">确定添加</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>