itsm-pc-handle/assets/views/working/manage.html

<style>
  .allSeletedUsers li{
    margin-bottom: 8px;
  }
  .allSeletedUsers li .allSeletedUser {
    padding: 8px;
    border: 1px solid #dde1e5;
    background-color: #f9fafb;
    display: inline-block;
    position: relative;
    border-radius: 8px;
  }
  .allSeletedUsers li .allSeletedUser span {
    vertical-align: middle;
  }
  .allSeletedUsers li .allSeletedUser em {
    display: inline-block;
    font-style: normal;
    background-color: #fff;
    font-size: 16px;
    border: 1px solid #333;
    width: 16px;
    height: 16px;
    font-weight: normal;
    border-radius: 50%;
    color: #333;
    text-align: center;
    line-height: 10px;
    margin-left: 8px;
    cursor: pointer;
  }
  .allSeletedUsers li .allSeletedUser em:hover{
    color: #fff;
    background-color: #eb3941;
    border-color: #eb3941;
  }
  .tree-control .tree-input {
    min-height: 30px !important;
    padding-top: 5px;
  }

  .tree-control .tree-view .item-container:hover,
  .tree-control .tree-view .selected,
  .tree-control .tree-view .active {
    background-color: #428bca;
    background-image: linear-gradient(#428bca, #428bca) !important;
    background: #428bca;
    color: #fff;
  }

  .tree-control .tree-view .item-container:hover .expand,
  .tree-control .tree-view .selected .expand,
  .tree-control .tree-view .active .expand {
    border-left: 10px solid #fff;
  }

  .tree-control .tree-view .item-container:hover .expand-opened,
  .tree-control .tree-view .selected .expand-opened,
  .tree-control .tree-view .active .expand-opened {
    border-bottom: 0px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #fff;
  }

  /* .jry_selectHeight .dropdown-menu{
        height: 150px!important;
    } */
  .dropdown-menu {
    z-index: 9999;
  }
  .autosize {
    height: auto !important;
  }
  /* -----------------------选择上班人员----------------------- */
  /* 公共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;
  }

  .mainDiv {
    overflow: hidden;
    float: left;
    width: 100%;
    margin-top: 8px;
  }

  .mainDiv-wrapper {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mainDivLeft {
    display: inline-block;
    width: 32%;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    margin-right: 1%;
  }

  .mainDivRight {
    display: inline-block;
    width: 32%;
    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-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 {
    float: right;
  }

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

  .span-1 {
    border: none;
    color: white;
    background-color: #2edbb8;
  }

  .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;
    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;
    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;
    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;
    height: 22px;
    line-height: 22px;
    border-radius: 2px;
    margin-right: 10px;
    font-size: 12px;
    display: inline-block;
  }
</style>
<div ng-controller="workingFormCtrl">
  <div class="col-xs-12 panel">
    <section id="page-title-form">
      <div class="row">
        <div class="col-sm-8">
          <h1 class="mainTitle">
            {{vm.model.label}}<i
              tooltip="{{vm.model.placeholder}}"
              tooltip-placement="right"
              class="fa ti-help-alt margin-left-10 fontcolor-five pointfont"
            ></i>
          </h1>
        </div>
      </div>
    </section>
  </div>
  <form ng-submit="vm.submit(vm.model,'sm')" class="jry_selectHeight">
    <!-- <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" ng-if="vm.fields.length">
        </formly-form> -->
    <div class="panel col-xs-12 col-0 bg-lightgrey">
      <formly-form
        model="vm.model "
        fields="vm.fields[0].fields "
        form="vm.form"
        options="vm.options "
      >
      </formly-form>
    </div>
    <div
      class="panel col-xs-12 col-0 bg-lightgrey margin-top-15"
      ng-if="vm.fields[1].fields"
    >
      <formly-form
        model="vm.model "
        fields="vm.fields[1].fields"
        form="vm.form"
        options="vm.options "
      >
      </formly-form>
    </div>
    <div
      class="panel col-xs-12 col-0 bg-lightgrey margin-top-15"
      ng-if="vm.fields[2].fields"
    >
      <formly-form
        model="vm.model "
        fields="vm.fields[2].fields "
        form="vm.form"
        options="vm.options "
      >
      </formly-form>
    </div>
    <div
      class="panel col-xs-12 col-0 bg-lightgrey margin-top-15"
      ng-if="vm.fields[3].fields"
    >
      <formly-form
        model="vm.model "
        fields="vm.fields[3].fields "
        form="vm.form"
        options="vm.options "
      >
      </formly-form>
    </div>
    <!-- 选择上班人员 -->
    <div class="mainDiv">
      <div class="mainDivLeft">
        <div class="mainDiv-head">
          <span>工作组</span>
        </div>
        <div class="mainDiv-body fixHeight group-tree">
          <div class="box-tree">
            <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-zuzhijigou"
              icon-expand="ti-plus"
              icon-collapse="ti-minus "
            ></abn-tree>
          </div>
        </div>
      </div>
      <div class="mainDivLeft">
        <div class="mainDiv-head">
          <span>人员列表</span>
        </div>
        <div class="mainDiv-body fixHeight">
          <div class="mainDiv-wrapper">
            <div class="box-tree">
              <span ng-if="doing_asyncuser ">...加载中...</span>
              <abn-trees
                tree-data="my_user"
                on-chioce="formbranch(item)"
                tree-control="my_tree"
                expand-level=""
                icon-expand="ti-plus "
                icon-collapse="ti-minus "
                check-boxs="true"
              ></abn-trees>
            </div>
          </div>
        </div>
      </div>
      <div class="mainDivLeft">
        <div class="mainDiv-head">
          <span>上班人员（{{getbranchs.length}}）</span>
        </div>
        <div class="mainDiv-body fixHeight">
          <div class="mainDiv-wrapper">
            <div class="box-tree">
              <ul class="allSeletedUsers">
                <li ng-repeat="u in getbranchs">
                  <div class="allSeletedUser">
                    <span>{{u.name}}</span><em ng-click="removeBranch(u)">x</em>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 margin-top-30 margin-bottom-30 text-center">
      <button
        type="submit"
        ladda="ldloading.sm"
        class="btn btn-addbutton addbutton"
        translate="form.button.SUBMIT"
        ng-if="vm.model.showSub=='true'"
      >
        Submit
      </button>
      <button
        type="close"
        class="btn btn-removebutton removebutton"
        ng-click="closeModel()"
        translate="form.button.CLOSE"
      >
        CLOSE
      </button>
    </div>
  </form>
</div>