zuel-itsm-3.0.2/assets/views/system/tpl/notificationBj.html

<style>
    .modal-header .close{
        font-size: 18px;
        line-height: 14px;
    }
    .modal-footer {
        border-top: none;
    }

    .modal-body-common {
        margin: 8px 16px;
        border-radius: 2px;
        border: 1px solid #d1d1d1;
        background-color: #f5f5f5;
        font-size: 14px;
    }

    .modal-body-common .modal-body-group {
        border-bottom: 1px solid #ddd;
    }

    .modal-body-common .modal-body-groupItem {
        padding: 16px;
    }

    .modal-body-common h2 {
        color: #333;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 0;
    }

    .modal-body-common h2 .noticeRule {
        width: 50px;
        height: 20px;
        border-radius: 5px;
        border: 1px solid #ddd;
        outline: none;
    }

    .modal-body-common .processNode {
        margin-top: 16px;
        font-size: 14px;
        color: #333;
    }

    .modal-body-common .processNode span {
        color: #666;
    }

    .modal-body-common .infoParent {
        margin-top: 8px;
        overflow: hidden;
    }

    .modal-body-common .infoCommon {
        font-size: 14px;
        color: #333;
        float: left;
    }

    .modal-body-common .infoCommon span {
        color: #666;
    }

    .modal-body-common .notifiedPerson {
        margin-left: 192px;
    }

    /* tab */
    .modal-body-common .modal-body-tab {
        padding: 16px 16px 16px 8px;
    }

    .modal-body-common .modal-body-tab .modal-body-tab_hd em {
        color: #fe2a44;
    }

    .modal-body-common .modal-body-tab .tab_hd {
        height: 40px;
        overflow: hidden;
        margin-left: 8px;
        margin-top: 16px;
    }

    .modal-body-common .modal-body-tab .tab_hd .tab_hdItem {
        width: 156px;
        height: 100%;
        line-height: 36px;
        float: left;
        border-top: 3px solid #eaeaea;
        cursor: pointer;
    }

    .modal-body-common .modal-body-tab .tab_hd .tab_hdItem .tab_checkbox {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        border: 1px solid #d1d1d1;
        display: inline-block;
        vertical-align: middle;
        margin-left: 16px;
        background-color: #fff;
    }

    .modal-body-common .modal-body-tab .tab_hd .tab_hdItem .tab_checkbox:hover {
        border-color: #005395;
    }

    .modal-body-common .modal-body-tab .tab_hd .tab_hdItem .tab_checkbox.active {
        background-color: #005395;
        color: #fff;
        font-size: 14px;
        border-color: #005395;
    }

    .modal-body-common .modal-body-tab .tab_hd .tab_hdItem .tab_checkbox.active:before {
        position: relative;
        top: -11px;
        left: 0;
    }

    .modal-body-common .modal-body-tab .tab_hd .tab_hdItem .tab_title {
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
    }

    .modal-body-common .modal-body-tab .tab_hd .tab_hdItem.active {
        background-color: #e6eef4;
        border-top: 3px solid #79a3c4;
    }

    .modal-body-common .modal-body-tab .tab_bd {
        margin-left: 8px;
    }

    .modal-body-common .modal-body-tab .tab_bd {
        margin-left: 8px;
    }

    .modal-body-common .modal-body-tab .tab_bd .openaddlable {
        width: 100%;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .modal-body-common .modal-body-tab .tab_bd .openaddinput {
        width: 100%;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_bdBox {
        display: none;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_bdBox.active {
        display: block;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_bdItem .tab_configure {
        margin-top: 8px;
        color: #666;
        font-size: 12px;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_bdItem .tab_configure span {
        color: #005395;
        cursor: pointer;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_switch {
        margin-left: -8px;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_switch .tab_bdItem_tips em {
        color: #fe2a44;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_switch .tab_bdItem_tab li {
        margin-left: 24px;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_switch .tab_bdItem_tabItem {
        font-size: 14px;
        color: #ddd;
        cursor: pointer;
    }

    .modal-body-common .modal-body-tab .tab_bd .tab_switch .tab_bdItem_tabItem.active {
        color: #005395;
    }

    textarea {
        resize: none;
    }

    textarea.form-control {
        height: 68px;
        padding: 8px 16px;
        font-size: 12px;
    }

    input.form-control {
        padding: 0 16px;
        font-size: 12px;
    }

    i,
    strong,
    em {
        font-style: normal;
    }
</style>
<div class="modal-header">
    <div class="modal-title fontcolor-two fontsizes-14">消息通知设置<button type="button" class="close pull-right"
            ng-click="cancel()">×</button></div>
</div>
<div class="modal-body-common">
    <div class="modal-body-group">
        <div class="modal-body-groupItem">
            <h2 ng-if="editData.noticeRule === 'no'">{{editData.processName}}- 进入步骤时</h2>
            <h2 ng-if="editData.noticeRule !== 'no'&&(editData.id==13||editData.id==14||editData.id==12)">
                {{editData.processName}}-【逾期响应时长】<input class="noticeRule" type="number"
                ng-model="editData.noticeRule">分钟</h2>
            <h2 ng-if="editData.noticeRule !== 'no'&&(editData.id == 18||editData.id == 19)">{{editData.processName}}-【解决时长】剩余<input
                    class="noticeRule" type="number" ng-model="editData.noticeRule">%</h2>
            <div class="processNode">流程节点：<span>{{editData.processNode}}</span></div>
            <div class="infoParent">
                <div class="processStatus infoCommon">状态：<span>{{editData.processStatus}}</span></div>
                <div class="notifiedPerson infoCommon">被通知人：<span>{{editData.notifiedPerson}}</span></div>
            </div>
        </div>
    </div>
    <div class="modal-body-tab">
        <div class="modal-body-tab_hd">
            <span><em>*</em> 通知模式：</span>
        </div>
        <div class="tab_hd">
            <div class="tab_hdItem" ng-repeat="v in tabs" ng-class="$index == currentIndex?'active':''" ng-click="selectTab($index)">
                <div class="tab_checkbox iconfont"
                    ng-class="{active:tabs[$index].checkboxFlag,'icon-duigou':tabs[$index].checkboxFlag}"
                    ng-click="selectThis($index)"></div>
                <div class="tab_title">{{v.tabName}}</div>
            </div>
        </div>
        <div class="tab_bd">
            <div class="tab_bdBox" ng-repeat="v in tabs" ng-class="$index == currentIndex?'active':''">
                <div class="tab_bdItem" ng-if="!($index==1)">
                    <div class="openaddlable control-label fontcolor-two fontsizes-14">通知标题:</div>
                    <div class="openaddinput">
                        <input class="form-control" ng-model="tabs[$index].processTitle" placeholder="请输入通知标题"
                            ng-disabled="tabs[$index].disable">
                    </div>
                </div>
                <div class="tab_bdItem">
                    <div class="openaddlable control-label fontcolor-two fontsizes-14">通知内容:</div>
                    <div class="openaddinput">
                        <textarea class="form-control" ng-model="tabs[$index].processContent" ng-blur="textBlur($event)"
                            ng-disabled="tabs[$index].disable" placeholder="{{varPlaceholder}}"></textarea>
                    </div>
                    <p class="tab_configure">
                        备注：[$变量名称$]可添加<em ng-repeat="v in varArr"><span ng-click="insertClick($event)">{{v}}</span><i ng-if="!$last">、</i><i ng-if="$last">。</i></em>
                    </p>
                </div>
            </div>
            <div class="tab_bdItem tab_switch clearfix">
                <div class="tab_bdItem_tips fl"><em>*</em> 是否开启：</div>
                <ul class="tab_bdItem_tab fl">
                    <li class="fl">
                        <i class="tab_bdItem_tabItem iconfont icon-icon_weizuo" ng-click="changeIcon($index)"
                            ng-class="editData.flag === true?'active':''"></i>
                        <span>开启</span>
                    </li>
                    <li class="fl">
                        <i class="tab_bdItem_tabItem iconfont icon-icon_weizuo" ng-click="changeIcon($index)"
                            ng-class="editData.flag === false?'active':''"></i>
                        <span>关闭</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <a ng-click="savercode()" data-dismiss="modal " class="btn btn-primary ">确定</a>
    <button class="btn btn-primary btn-o " ng-click="cancel() " translate="modal.button.CANCEL">取消</button>
</div>