zuel-itsm-3.0.2/assets/views/newOrder.html

<div ng-controller="newOrderCtrl">
    <section id="page-title">
        <div class="row">
            <div class="col-sm-8">
                <h1 class="mainTitle">事件列表
                    <!-- <i tooltip='事件列表,点击操作处理任务' tooltip-placement="right"
                        class="fa  ti-help-alt margin-left-10 fontcolor-five pointfont"></i> -->
                </h1>
            </div>
        </div>
    </section>
    <div class="dept_tit">
        <div class="form-group itemWidth" style="float: left;">
            <div class="pull-left input-group">
                <div class="control-label pull-left margin-top-5 margin-right-5">
                    <label class="demoincident" style="font-size:14px"><span class="colorRed">*</span>报修科室:</label>
                </div>
                <div class="pull-left  ">
                    <ui-select class="pull-left" style="min-width:160px" ng-model="incidentModel.department"
                        theme="bootstrap">
                        <ui-select-match placeholder="">
                            {{$select.selected.dept||incidentModel.department}}
                        </ui-select-match>
                        <ui-select-choices repeat="item in jry_deptData"
                            refresh="jry_deptSearch($select.search,$select)">
                            <div ng-bind-html="item.dept"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
        </div>
        <div class="form-group itemWidth" style="float: left;">
            <div class="pull-left input-group">
                <div class="control-label pull-left margin-top-5 margin-right-5">
                    <label class="demoincident" style="font-size:14px"><span class="colorRed">*</span>联系电话:</label>
                </div>
                <div class="pull-left  ">
                    <input class="iteminp inputcolor" type="text" ng-model="incidentModel.contactsInformation"
                        placeholder="" />
                </div>
            </div>
        </div>
        <div class="form-group itemWidth" style="float: left;">
            <div class="pull-left input-group">
                <div class="control-label pull-left margin-top-5 margin-right-5">
                    <label class="demoincident" style="font-size:14px"> 联 系 人 :</label></div>
                <div class="pull-left  ">
                    <input class="iteminp inputcolor" type="text" ng-model="incidentModel.contacts" placeholder="" />
                </div>
            </div>
        </div>
        <div class="form-group itemWidth" style="float: left;">
            <div class="pull-left input-group">
                <div class="control-label pull-left margin-top-5 margin-right-5">
                    <label class="demoincident" style="font-size:14px"><span class="colorRed">*</span>故障地点:</label>
                </div>
                <div class="pull-left  ">
                    <input class="iteminp inputcolor" type="text" ng-model="incidentModel.houseNumber" placeholder="" />
                </div>
            </div>
        </div>

    </div>
    <div class="flex" style="width: 100%;">
        <div class="leftList">
            <div class="DingW">
                <input type="text" class="SJFL_ipt" placeholder="请输入关键字" ng-model="jry_modelLeft"
                    ng-change="left_serch()">
                <i class="glyphicon glyphicon-search jry_icon"></i>
            </div>
            <div class="head">事件分类</div>
            <div class="body">
                <!-- <div class="box-tree" ng-show="jry_modelLeft==''"> -->
                <div>
                    <span ng-if="doing_async">...加载中...</span>
                    <!-- <abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" icon-leaf="iconfont icon-zuzhijiaose" icon-expand="ti-plus" icon-collapse="ti-minus "></abn-tree> -->
                    <abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)"
                        expand-level="2" icon-leaf="iconfont icon-fenlei" icon-expand="ti-plus"
                        icon-collapse="ti-minus"></abn-tree>
                </div>
                <!-- <div ng-show="jry_modelLeft!=''">
                    <div ng-repeat="n in left_searchData" class="leftSearchData" ng-click="leftSearchGetData($index,n)"
                        ng-class="{true:'leftSearchDatabg'}[$index==indexBG]">
                        <i class="indented tree-icon iconfont icon-fenlei"></i>
                        <div>{{n.category}}</div>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="rightList">
            <div class="DingW">
                <input type="text" class="SJMS_ipt" ng-model="jry_modelRight" placeholder="请输入关键字"
                    ng-change="right_serch()">
                <i class="glyphicon glyphicon-search jry_icon"></i>
            </div>
            <div class="head">处理方案</div>
            <div class="body">
                <div class="noData" ng-show="jry_scricData.length==0">
                    <img src="./../../../../assets/images/404_wushuju.png" alt="">
                </div>
                <label class="list" ng-repeat="n in jry_scricData">
                    <div class="radio_left">
                        <input type="radio" name="jry_radio" ng-click="getFormItem(n,$index)">
                        <span class="jry_item">{{n.item}}</span>
                    </div>
                    <div class="jry_positionFather">
                        <div class="describe">
                            <span>事件描述：</span>
                            <span>{{n.describes}}</span>
                        </div>
                        <div class="weight">
                            <span>解决方案：</span>
                            <span></span>
                        </div>
                        <div class="jry_positionChild">事件分类:{{n.categoryid.category}}</div>
                    </div>
                </label>
            </div>
        </div>
    </div>
    <div class="bottomForm">
        <div class="title">快速建单信息</div>
        <div class="flex jry_btnMargin">
            <!-- <div class="col-xs-1 quickTit">
                快速建单信息
            </div> -->
            <div class="col-xs-12">
                <div class="col-xs-12">
                    <div class="massageTit">
                        <span>*</span>事件描述：</div>
                    <textarea rows="3" ng-model="incidentModel.description" style="width:100%" placeholder="填写字段500字以内"
                        class="describePlace"></textarea>
                </div>

            </div>
            <div class="col-xs-12">
                <div class="col-xs-12">
                    <div class="massageTit">处理方案：</div>
                    <textarea rows="3" ng-model="incidentModel.handleDescription" style="width:100%" placeholder="填写字段500字以内"
                        class="describePlace"></textarea>
                </div>

            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="handleNow()">直接处理</button>
        <button class="btn btn-primary" ng-click="sendOrder()">快速派单</button>
        <button class="btn btn-primary" ng-click="temporary()">暂存</button>
        <button class="btn btn-primary btn-o" ng-click="cancel()">取消</button>

    </div>
</div>
<style>
    .describePlace::-webkit-input-placeholder {
        color: #a5a4a4
    }

    .dept_tit {
        margin-top: 5px;
        padding-left: 5px;
        height: 40px;
    }

    .dept_tit .itemWidth {
        width: 25%;
    }

    .iteminp {
        height: 30px;
    }

    .colorRed {
        color: red;
    }

    .dept_tit .titColor {
        color: rgb(10, 91, 154)
    }

    .bottomForm {
        border-top: 1px solid #e5e5e5;
        padding-top: 10px;
    }

    .bottomForm .title {
        text-align: center;
        color: #333;
        font-size: 16px;
    }

    .jry_btnMargin {
        margin-bottom: 10px;
        padding-top: 10px;
        /* flex-wrap:wrap */
    }

    .jry_btnMargin .massageTit {
        height: 28px;
        line-height: 28px
    }

    .jry_btnMargin .massageTit span {
        color: red
    }

    .jry_positionFather .describe {
        width: 430px
    }

    .jry_positionChild {
        position: absolute;
        height: 20px;
        margin-top: -10px;
        right: 14px;
        top: 50%
    }

    .jry_positionFather {
        position: relative;
        width: 100%
    }

    .jry_item {
        display: inline-block;
        margin-left: 5px
    }

    .leftSearchData {
        height: 28.4px;
        line-height: 28.4px;
        color: #8e8e93;
        font-size: 14px;
        display: flex;
        padding-left: 11px;
        cursor: pointer;
    }

    .leftSearchDatabg {
        background-color: rgb(0, 107, 191);
        color: white
    }

    /* .leftSearchData:hover{
        background-color: rgb(238,238,238)
    } */

    .leftSearchData i {
        color: #007AFF
    }

    .leftSearchData div {
        margin-left: 5px
    }

    .jry_icon {
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        width: 20px;
        height: 23px;
        text-align: center;
        line-height: 23px;
        border: 1px rgb(211, 211, 211) solid;
        background-color: white;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
    }

    .DingW {
        position: relative;
    }

    .SJFL_ipt {
        width: 100%;
        height: 23px;
        border-radius: 4px 0 0 4px !important;
    }

    .SJMS_ipt {
        width: 100%;
        height: 23px;
        border-radius: 4px 0 0 4px !important;
    }

    .radio_left {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list {
        padding: 10px 0;
        border-bottom: 1px rgb(211, 211, 211) solid;
        border-top: 1px rgb(211, 211, 211) solid;
        display: flex
    }

    .body {
        height: 330px;
        overflow: hidden;
        overflow-y: scroll
    }

    .noData {
        /* background: url(./../../images/404_wushuju.png); */
        /* background-size: 100% 100% */
        width: 100%;
        height: 330px;
        line-height: 330px;
        text-align: center
    }

    .flex {
        display: flex
    }

    .leftList {
        width: 30%;
        background-color: rgb(245, 245, 245);
        height: 400px;
        margin: 10px 5px 10px 10px;
        border: 1px rgb(211, 211, 211) solid;
        border-radius: 4px;
        padding: 5px;
    }

    .rightList {
        width: 66%;
        background-color: rgb(245, 245, 245);
        height: 400px;
        margin: 10px 5px 10px 10px;
        border: 1px rgb(211, 211, 211) solid;
        border-radius: 4px;
        padding: 5px;
    }

    .head {
        color: #005395;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px rgb(211, 211, 211) solid
    }

    /* 公共css,需要复用 */

    .iconfont {
        font-size: 14px;
    }

    .nav-pills>li>a {
        border-radius: 0px;
    }

    .nav-pills>li.active>a,
    .nav-pills>li.active>a:hover,
    .nav-pills>li.active>a:focus {
        background-color: #006bbf;
        color: white !important;
    }

    .panel-tabs,
    .tabbable {
        /* padding: 14px; */
        background-color: white;
    }

    .tab-content>.tab-pane,
    .pill-content>.pill-pane {
        padding: 14px;
        border-bottom: 1px solid #eeeeee;
        border-left: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        border-radius: 0px 0px 8px 8px;
    }

    .nav-tabs>li.active a,
    .nav-tabs>li.active a:hover,
    .nav-tabs>li.active a:focus {
        background-color: #006bc0;
        color: white;
    }

    .nav-tabs {
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        border-left: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        border-radius: 8px 8px 0 0;
        height: 47px;
    }

    .nav-tabs>li {
        border-right: 1px solid #eeeeee;
    }

    .nav-tabs>li:last-child {
        border-right: none;
    }

    /* 独立css */

    .mainDiv {
        /* background: red; */
        /* padding: 14px; */
        /* height: 50px; */
        overflow: hidden;
        /* zoom: 1; */
    }

    .mainDivLeft {
        border-radius: 8px;
        border: 1px solid #eeeeee;
        width: 288px;
        float: left;
    }

    .mainDivRight {
        margin-left: 302px;
        border-radius: 8px;
        border: 1px solid #eeeeee;
    }

    .mainDiv-head {
        height: 47px;
        line-height: 47px;
        background: #f5f5f5;
        font-size: 16px;
        color: #606367;
        border-radius: 8px 8px 0 0;
        padding-left: 10px;
        padding-right: 4px;
    }

    .mainDivLeft-span {
        border: 1px solid;
        /* padding: 15px 0px 15px 0px; */
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 4px;
        padding-bottom: 4px;
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
    }

    .mainDiv-head-right {
        display: inline-block;
        float: right;
    }

    .edit-left {
        display: inline-block;
        /* float: left; */
        margin-left: 10px;
    }

    .span-1 {
        border-color: #006bc0;
        color: #006bc0;
    }

    .span-2 {
        border: none;
        color: white;
        background-color: #006bc0;
    }

    .span-3 {
        border: none;
        color: white;
        background-color: #fc4c58;
    }

    .mainDiv-body {
        border-radius: 8px;
        border: 1px solid #eeeeee;
        margin: 14px;
        padding-top: 14px;
    }

    .mainDiv-body-1 {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #606367;
        padding: 0px 14px;
        border-bottom: 1px solid #eeeeee;
    }

    .mainDiv-body-2 {
        height: 70px;
        line-height: 70px;
        font-size: 14px;
        color: #606367;
        padding: 0px 30px;
        border-bottom: 1px solid #eeeeee;
    }

    .mainDiv-body-2:last-child {
        border-bottom: none;
    }

    .fixHeight {
        height: 450px;
        overflow: auto;
    }

    .mainDiv-body-3 {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        color: #606367;
        padding: 0px 30px;
        border-bottom: 1px solid #eeeeee;
    }

    .mainDiv-body-3:last-child {
        border-bottom: none;
    }

    .mainDiv-body-img {
        height: 90px;
        border-radius: 4px;
        margin: 14px;
        margin-bottom: 0px;
        overflow: hidden;
    }

    .mainDiv-body-noList {
        height: 110px;
        margin: 50px 0;
        text-align: center;
    }

    .form-control {
        display: inline-block;
    }

    .mainDivLeft-span-1 {
        border: 1px solid;
        padding-left: 15px;
        padding-right: 15px;
        /* padding-top: 4px; */
        /* padding-bottom: 4px; */
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
        display: inline-block;
    }

    .mainDivLeft-span-2 {
        border: 1px solid;
        padding-left: 15px;
        padding-right: 15px;
        /* padding-top: 4px; */
        /* padding-bottom: 4px; */
        height: 28px;
        line-height: 28px;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
        display: inline-block;
    }

    .mainDivLeft-span-edit-1 {
        border: 1px solid;
        padding-left: 8px;
        padding-right: 8px;
        /* padding-top: 4px; */
        /* padding-bottom: 4px; */
        height: 22px;
        line-height: 22px;
        border-radius: 2px;
        margin-right: 10px;
        font-size: 12px;
        display: inline-block;
    }

    .mainDivLeft-span-edit-2 {
        border: 1px solid;
        padding-left: 8px;
        padding-right: 8px;
        /* padding-top: 4px; */
        /* padding-bottom: 4px; */
        height: 22px;
        line-height: 22px;
        border-radius: 2px;
        margin-right: 10px;
        font-size: 12px;
        display: inline-block;
    }

    /* tab内容css */

    .tab-mainDiv {
        border: 1px solid #eeeeee;
        border-radius: 8px;
        /* min-height: 360px; */
    }

    .tab-mainDiv-head {
        text-align: center;
        border-bottom: 1px solid #eeeeee;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: #93989e;
    }

    .tab-mainDiv-body {
        padding: 14px;
        min-height: 280px;
        max-height: 320px;
        overflow: auto;
        /* padding-top: 14px; */
        /* padding-bottom: 14px; */
    }

    .tab-mainDiv-body-lineDiv-50 {
        /* display: inline-block; */
        font-size: 14px;
        color: #93989e;
        margin-right: 14px;
        width: 47%;
        padding-left: 14px;
    }

    .tab-mainDiv-body-lineDiv-100 {
        /* display: inline-block; */
        font-size: 14px;
        color: #93989e;
        margin-right: 14px;
        width: 96%;
        padding-left: 14px;
    }

    .tab-mainDiv-body-lable {
        padding-bottom: 10px;
        /* width: 370px; */
    }

    .tab-mainDiv-body-content {
        padding-bottom: 10px;
        /* width: 370px; */
    }

    .tab-mainDiv-body-content>textarea {
        min-height: 68px;
        width: 100%;
    }

    .tab-mainDiv-foot {
        /* margin: 14px auto; */
        border-top: 1px solid #eeeeee;
        text-align: center;
        padding: 7px;
    }

    .tab-mainDiv-body-button-1 {
        display: inline-block;
        width: 80px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: white;
        text-align: center;
        background-color: #006bc0;
        border-radius: 4px;
        margin-right: 14px;
    }

    .tab-mainDiv-body-button-2 {
        display: inline-block;
        width: 80px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: #93989e;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 4px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
    }


    .tree-control .tree-view {
        width: inherit;
        z-index: 9999;
    }
</style>