itsm-pc-handle/assets/views/newOrderSupplement.html

<div>
    <div class="modal-header" draggable class="modal-dialog">
      <div class="modal-title fontcolor-two fontsizes-14">
        补单<button
          type="button"
          class="close pull-right"
          ng-click="cancel()"
        >
          ×
        </button>
      </div>
    </div>
    <div class="newOrder_content" style="width: 100%">
      <div class="centerList" style="height: 250px;">
        <div class="body clearfix">
          <div class="c_item c_item_value_textarea clearfix" ng-if="categorySelect.hasSimple != 1">
            <label><span class="colorRed">*</span>处理方案：</label>
            <textarea
              class="c_item_value"
              ng-model="incidentModel.handlerMsg"
              placeholder="请填写处理方案"
            ></textarea>
          </div>
          <div class="c_item clearfix">
            <label><span class="colorRed">*</span>处理结果：</label>
            <ui-select
              class="c_item_value"
              ng-model="incidentModel.closecode"
              theme="bootstrap"
            >
              <ui-select-match placeholder="请选择处理结果">
                <span ng-bind="$select.selected.name"> </span>
              </ui-select-match>
              <ui-select-choices
                repeat="item in (closecodeArray | filter:$select.search) track by item.id"
              >
                <span ng-bind="item.name"></span>
              </ui-select-choices>
            </ui-select>
          </div>
          <div class="c_item clearfix">
            <label><span class="colorRed">*</span>登记时间：</label>
            <span class="input-icon" style="float: left">
              <input
                type="text"
                class="c_item_value underline"
                style="width: 175px"
                ng-click="endOpen = !endOpen"
                datepicker-popup="yyyy-MM-dd HH:mm:ss"
                ng-model="incidentModel.acceptDate"
                is-open="endOpen"
                close-on-date-selection="false"
                ng-init="endOpen = false"
                close-text="关闭"
                current-text="今天"
                clear-text="清空"
                save-text="确定"
                show-weeks="false"
              />
              <i class="ti-calendar"></i>
            </span>
          </div>
          <div class="c_item clearfix">
            <label><span class="colorRed">*</span>接单时间：</label>
            <span class="input-icon" style="float: left">
              <input
                type="text"
                class="c_item_value underline"
                style="width: 175px"
                ng-click="endOpen1 = !endOpen1"
                datepicker-popup="yyyy-MM-dd HH:mm:ss"
                ng-model="incidentModel.responseHandleTime"
                is-open="endOpen1"
                close-on-date-selection="false"
                ng-init="endOpen1 = false"
                close-text="关闭"
                current-text="今天"
                clear-text="清空"
                save-text="确定"
                show-weeks="false"
              />
              <i class="ti-calendar"></i>
            </span>
          </div>
          <div class="c_item clearfix">
            <label><span class="colorRed">*</span>解决时间：</label>
            <span class="input-icon" style="float: left">
              <input
                type="text"
                class="c_item_value underline"
                style="width: 175px"
                ng-click="endOpen2 = !endOpen2"
                datepicker-popup="yyyy-MM-dd HH:mm:ss"
                ng-model="incidentModel.handleTime"
                is-open="endOpen2"
                close-on-date-selection="false"
                ng-init="endOpen2 = false"
                close-text="关闭"
                current-text="今天"
                clear-text="清空"
                save-text="确定"
                show-weeks="false"
              />
              <i class="ti-calendar"></i>
            </span>
          </div>
          <div class="c_item clearfix">
            <label><span class="colorRed">*</span>处理人：</label>
            <ui-select
              class="c_item_value"
              style="min-width: 300px"
              ng-model="incidentModel.handlingPersonnelUser"
              theme="bootstrap"
              ng-required="true"
              reset-search-input="false"
            >
              <ui-select-match placeholder="请选择处理人">
                <span ng-bind="$select.selected.name"></span>
              </ui-select-match>
              <ui-select-choices
                repeat="item in jry_userData| filter:{$:$select.search}"
                refresh="jry_userSearch($select.search)"
              >
                <div
                  ng-bind-html="item.name | highlight: $select.search"
                ></div>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">确定</button>
      <button class="btn btn-primary btn-o" ng-click="cancel()">取消</button>
    </div>
  </div>
  <style>
    @media (min-width: 768px) {
      .modal-dialog {
        width: 1300px;
        margin: 30px auto;
        height: 100%;
      }
    }
    .newOrder_content input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #c2c2c5;
    }
    .newOrder_content input:-ms-input-placeholder {
      /* IE 10+ */
      color: #c2c2c5;
    }
    .newOrder_content input:-moz-placeholder {
      /* Firefox 18- */
      color: #c2c2c5;
      opacity: 1;
    }
    .newOrder_content input::-moz-placeholder {
      /* Firefox 19+ */
      color: #c2c2c5;
      opacity: 1;
    }

    .newOrder_content textarea::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #c2c2c5;
    }
    .newOrder_content textarea:-ms-input-placeholder {
      /* IE 10+ */
      color: #c2c2c5;
    }
    .newOrder_content textarea:-moz-placeholder {
      /* Firefox 18- */
      color: #c2c2c5;
      opacity: 1;
    }
    .newOrder_content textarea::-moz-placeholder {
      /* Firefox 19+ */
      color: #c2c2c5;
      opacity: 1;
    }

    .newOrder_content .colorRed {
      color: red;
    }
    .newOrder_content .imgsBox {
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
      background: #f9f9f9;
    }
    .newOrder_content .fileupload {
      width: 64px;
      height: 64px;
      border: 1px dotted #ccc;
      display: inline-block;
      background: #fff;
      border-radius: 5px;
      color: #d8d8d8;
    }

    .newOrder_content .fileupload-icon {
      font-size: 32px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .newOrder_content .close {
      position: absolute;
      top: -5px;
      right: -6px;
      font-size: 16px;
      display: inline-block;
      width: 14px;
      height: 14px;
      color: #fff;
      background: #bd2535;
      line-height: 8px;
      text-align: center;
      border-radius: 9px;
      border: 1px solid #bd2535;
      opacity: 1;
      overflow: hidden;
    }

    .newOrder_content .close:hover {
      opacity: 0.8;
    }
    .newOrder_content .category {
      margin-right: 8px;
    }
    .newOrder_content .newOrder_body {
      height: 652px;
      overflow-y: auto;
    }
    .newOrder_content .newOrder_category li {
      font-size: 14px;
      color: #606367;
      padding: 8px;
      border-bottom: 1px dashed #d3d3d3;
    }
    .newOrder_content .newOrder_l li {
      cursor: pointer;
    }
    .newOrder_content .newOrder_l li.active {
      background-color: #d3d3d3;
    }
    .newOrder_content .newOrder_l li:hover {
      background-color: #d3d3d3;
    }
    .newOrder_content .newOrder_r_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
    }
    .newOrder_content .newOrder_r_item .ll {
      flex: 1;
      text-align: left;
    }
    .newOrder_content .newOrder_r_item .rr {
      flex: 1;
      text-align: right;
    }

    .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;
    }

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

    .DingW {
      position: relative;
      display: flex;
      justify-content: center;
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid #d3d3d3;
    }
    .DingW .ui-select-match {
      line-height: normal;
    }
    .DingW .tab_name {
      flex: 1;
      text-align: center;
      cursor: pointer;
      border-right: 1px solid #d3d3d3;
    }
    .DingW .tab_name:last-of-type {
      border-right: none;
    }
    .DingW .tab_name.active {
      color: #fff;
      background-color: #006bc0;
    }

    .SJFL_ipt {
      width: 100%;
      height: 30px;
      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;
    }

    .noData {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      border-bottom: none !important;
      padding-top: 30px !important;
    }

    .noData img {
      width: 120px;
    }

    .newOrder_content {
      display: flex;
    }

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

    .centerList {
      /* width: 778px; */
      flex: 1;
      background-color: rgb(245, 245, 245);
      height: 700px;
      margin: 4px;
      border: 1px rgb(211, 211, 211) solid;
      border-radius: 4px;
      padding: 5px;
    }
    .centerList .c_item {
      height: 30px;
      margin-top: 16px;
      margin-right: 8px;
      float: left;
    }
    .centerList .c_item .c_item_value {
      min-width: 165px;
      height: 30px;
      float: left;
    }
    .centerList .c_item input[type="text"].c_item_value {
      width: 165px;
    }
    .centerList .c_item_value_textarea {
      width: 100%;
      height: 100px;
      display: flex;
    }
    .centerList .c_item_value_textarea .c_item_value {
      flex: 1;
      height: 100px;
      resize: none;
    }
    .centerList .c_item label {
      float: left;
      line-height: 30px;
      margin: 0;
    }

    .rightList {
      width: 280px;
      background-color: rgb(245, 245, 245);
      height: 700px;
      margin: 4px;
      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;
    }
  </style>