donate-parent/donate-console/src/main/webapp/resources/view/message/message_edit.html

<style>
    body{
        font-family: "Microsoft Yahei", "微软雅黑";
        box-sizing: border-box;
    }
    .clearfix {
        clear: both;
    }
    .content-header{
        padding-left: 22px;
    }
    .content .box-show{
        position: relative;
        margin-top: 4px;
        padding-left: 22px;
        border-radius: 3px;
        background: #ffffff;
        margin-bottom: 20px;
        width: 100%;
        height: 700px;
        border: 1px solid #dcdcdc;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }
    .content-setting{
        margin-top: 24px;
    }
    .content-setting .form-group{
        margin-bottom: 14px;
        height: 30px;
        line-height: 30px;
    }
    .content-setting .form-group label{
        margin: 0 22px 0 14px;
        font-family: 'SimHei'!important;
        width: 60px;
        font-size: 14px;
        font-weight: normal;
        color: #8da8b8;
    }
    .content-setting .form-group input[type=text]{
        margin-right: 15px;
        width: 780px;
        height: 30px;
        font-size: 14px;
        color: #323232;
        border-radius: 0;
    }
    .content-setting .form-group input[type=checkbox]{
        margin:0 5px 0 15px;
        font-size: 14px;
        color: #323232;
    }
    .content-setting .edit {
        position: relative;
        width: 780px;
        height: 30px;
    }

    .content-setting .edit div.choose{
        position: absolute;
        top: 4px;
        left: 10px;
        width: 110px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        background: #3c8dbc;
        border-radius: 30px;
        cursor: pointer;
    }
    .content-setting .edit div.choose span{
        margin-right: 10px;
        font-family: 'SimHei'!important;
        font-size: 12px;
        color: #fff;
    }
    .content-setting .edit div.choose i{
        font-size: 16px;
        color: #fff;
    }
    .introduce {
        width: 780px;
        height: 380px;
    }
    .introduce .intro-header {
        /*position: relative;*/
        width: 100%;
        height: 54px;
        line-height: 54px;
        background: -webkit-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -o-linear-gradient(top, #fff 0%,#dadada 100%);
        background: -ms-linear-gradient(top, #fff 0%,#dadada 100%);
        background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
        border: 1px solid #ccc;
        border-bottom: none;
    }
    .introduce .intro-header span{
        font-size: 16px;
        color: #323232;
    }
    .introduce .intro-header span img{
        margin-left: 30px;
    }
    .introduce .intro-header span em{
        margin-left: 8px;
        font-size: 16px;
        color: #323232;
        font-style: normal;
    }
    .introduce .intro-header span input{
        position: absolute;
        top: 119px;
        left: 338px;
        width: 65px;
        outline: none;
        opacity: 0;
    }
    .introduce textarea{
        width: 780px;
        height: 325px;
        border-radius: 0;
    }
    .introduce .button{
        margin-top: 30px;
    }
    .introduce .button a{
        display: inline-block ;
        width: 140px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 16px;
        font-family: 'SimHei'!important;
        border-radius: 3px;
    }
    .introduce .button a:first-child {
        margin-right: 26px;
        color: #fff;
        background: #3c8dbc;
    }
    .introduce .button a:last-child {
        color: #787878;
        background: #fff;
        border: 1px solid #dcdcdc;
    }
    /*定时发送弹出框*/
    .modal-open .modal {
        width: 100%;
        height: 100%;
    }
    .modal-open .modal .modal-dialog.timing{
        width: 450px;
        height: 180px;
    }
    .setting{
        margin: 0 auto;
        width: 450px;
        height: 180px;
        text-align: center;
    }
    .setting .header{
        padding: 0 20px;
        width: 100%;
        height: 44px;
        line-height: 44px;
        background: #eeeeee;
    }
    .setting .header p{
        font-size: 16px;
        color: #323232;
    }
    .setting .header .close{
        font-size: 38px;
    }
    .setting .body{
        width: 100%;
        height: 80px;
        padding: 0 20px;
        text-align: left;
    }
    .setting .body .form-group{
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
    }
    .setting .body .form-group label{
        margin-right: 22px;
        font-family: 'SimHei'!important;
        font-size: 14px;
        font-weight: normal;
        color: #8da8b8;
    }
    .setting .body .form-group input{
        width: 200px;
        height: 30px;
        border-radius: 0;
    }
    .setting .footer{
        padding-top: 10px;
        width: 100%;
        height: 50px;
        background: #f4f4f4;
    }
    .setting .footer a{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        text-align: center;
        border-radius: 3px;
        letter-spacing: 10px;
    }
    .setting .footer a:first-child{
        margin-right: 10px;
        width: 120px;
        color: #fff;
        background: #3c8dbc;
    }
    .setting .footer a:last-child{
        width: 80px;
        color: #959595;
        background: #fff;
        border: 1px solid #dcdcdc;
    }

    /* 富文本编辑器input大小控制 */
    div.fl.introduce input{
       width: 80%;
    }

    /* 已选择展示样式 */
    span.selected-item {
        display: inline-block;
        margin-right: 18px;
        margin-bottom: 5px;
        padding: 0 14px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #323232;
        background: #ebf1f4;
        border-radius: 3px;
    }
</style>
<div class="wrapper">
    <!--主体内容-->
    <div class="content-wrapper" style="min-height: 924px;; z-index: 50;">
        <section class="content-header clearfix">
            <h1>编辑消息</h1>
        </section>
        <!-- Main content -->
        <section class="content">
            <form name="messageForm">
                <div class="box-show">
                    <div class="content-setting">
                        <div class="form-group clearfix">
                            <label class="control-label fl">接收对象</label>
                            <div class="edit fl">
                                <select class="form-control input-sm jp-width120" ng-model="message.type">
                                    <option value="角色类型">角色类型</option>
                                    <option value="机构对象">机构对象</option>
                                    <option value="指定用户">指定用户</option>
                                    <option value="所有用户">所有用户</option>
                                </select>
                            </div>
                            <!--<div class="edit fl">-->
                                <!--<input style="cursor: pointer;" type="text" class="form-control" id="chooseReceiver" ng-click="selectReceiver()" placeholder="点击选择接受对象" readonly/>-->
                                <!--<div ng-if="message.receiver" class="choose"><span ng-click="selectReceiver()" ng-bind="message.receiver" title="重新选择"></span><i class="fa fa-close" ng-click="deleteReceiver()" title="删除"></i></div>-->
                            <!--</div>-->
                        </div>
                        <!-- 按角色类型时 -->
                        <div ng-if="message.type == '角色类型'" class="form-group clearfix">
                            <label class="control-label fl">请选择</label>
                            <span ng-repeat="temp in types track by $index">
                                <input type="checkbox" ng-checked="temp.checked" ng-click="checkType(temp)"><span ng-bind="temp.type"></span>
                            </span>
                            <span class="error" ng-show="submited && noChoose">*请选择发送对象</span>
                        </div>
                        <!-- 非所有用户及按类型时 -->
                        <div ng-if="message.type != '角色类型' && message.type != '所有用户'" class="form-group clearfix">
                            <label class="control-label fl">&nbsp;</label>
                            <span style="cursor: pointer; color: #5078cb;" ng-click="selectReceiver(message.type)"><i class="fa fa-plus-square"></i>选择接收对象</span>
                        </div>
                        <!-- 机构对象已选择 -->
                        <div ng-if="message.type == '机构对象' && orgs.length > 0" class="form-group clearfix" style="height:auto!important;">
                            <label class="control-label fl">已选择</label>
                            <span ng-repeat="org in orgs | limitTo: 20" class="selected-item">
                                <span ng-bind="org.name"></span>
                            </span>
                            <span ng-if="orgs.length > 20">...</span>
                        </div>
                        <!-- 指定用户已选择 -->
                        <div ng-if="message.type == '指定用户' && users.length > 0" class="form-group clearfix" style="height:auto!important;">
                            <label class="control-label fl">已选择</label>
                            <span ng-repeat="user in users | limitTo: 20" class="selected-item">
                                <span ng-bind="user.name"></span>
                            </span>
                            <span ng-if="orgs.length > 20">...</span>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label fl">主题</label>
                            <input type="text" ng-model="message.title" maxlength="100" class="form-control fl" placeholder="请填写消息主题" required
                                   ng-class="{'showEmpty' : submited && !message.title}"/>
                            <span class="error" ng-show="submited && !message.title">*请填写消息主题</span>
                        </div>
                        <div class="form-group clearfix">
                            <label class="control-label fl">消息内容</label>
                            <div class="fl introduce">
                                <div class="fl introduce">
                                    <!--<summernote lang="zh-CN" ng-model="message.context" height="300px" maxlength="3500" config="editorConfig">-->
                                    <!--</summernote>-->
                                    <textarea ng-model="message.context" style="width: 100%;" title="消息内容" class="form-control f1" placeholder="请填写消息内容，最大长度为500"
                                              maxlength="500" ng-class="{'showEmpty' : submited && !message.context}"></textarea>
                                    <span class="error" ng-show="submited && !message.context">*请填写消息内容</span>
                                </div>
                                <div class="button"><a ng-click="publishMessage(messageForm.$invalid)">发布</a><a data-toggle="modal" data-target="#setting">定时发送</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>
<!--定时发送弹出框-->
<div class="modal setting" role="dialog" id="setting" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog timing">
        <div class="modal-content">
            <div class="modal-header header">
                <p class="fl">设置发送时间</p>
                <div class="close fr" data-dismiss="modal" ng-click="clearPublishDate()">&times;</div>
            </div>
            <div class="modal-body body">
                <div class="form-group clearfix">
                    <label class="control-label fl">发布时间</label>
                    <input type="text" ng-model="message.publishDate" readonly style="float:left"
                           class="date-choose f1 form-control" placeholder="发布时间"
                           datepicker-popup="yyyy-MM-dd" is-open="message.$publishTimeOpened"
                           current-text="今天" clear-text="清除" close-text="关闭"
                           datepicker-options="{formatDayTitle: 'yyyy年M月', formatMonth: 'M月', showWeeks: false}"
                           ng-click="openDatePicker($event, message, '$publishTimeOpened')"
                           ng-class="{'showEmpty' : submited && !message.publishDate}">
                    <span class="error" ng-show="submited && !message.publishDate">*请选择发布时间</span>
                </div>
            </div>
            <div class="modal-footer footer text-right">
                <a ng-click="publishMessage(messageForm.$invalid && !message.publishDate)">确认</a><a data-dismiss="modal" ng-click="clearPublishDate()">取消</a>
            </div>
        </div>
    </div>
</div>
<script>
    $('#chooseReceiver').on('click', function () {
        $('.chooseUser').toggle();
    });
</script>