工单范围

proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/service": {
-		"target": "http://192.168.3.108",
+		"target": "http://192.168.4.105",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {

src/app/components/order-scope/order-scope.component.html

@@ -0,0 +1,90 @@
+<!-- 工单范围 -->
+<div class="init recallOrder display_flex justify-content_flex-center align-items_center">
+  <div class="con modalBody">
+    <div class="title">
+      工单范围<i class="icon_transport transport-guanbi" (click)="cancelInit()"></i>
+    </div>
+    <div class="content">
+      <div class="scopeTab">
+        <div class="scopeTabItem" [ngClass]="{ active: item.value == activeScopeTabValue }" *ngFor="let item of scopeTabs" (click)="activeScopeTabValue = item.value">{{item.name}}</div>
+      </div>
+      <div class="conditions" *ngIf="activeScopeTabValue == 1">
+        <div nz-row>
+          <div nz-col nzSpan="3">院区：</div>
+          <div nz-col nzSpan="21">
+            <nz-checkbox-group class="w100" style="display: flex; flex-wrap: wrap; gap:8px;" [(ngModel)]="itsmCheckedHos" (ngModelChange)="changeItsmHospital($event)"></nz-checkbox-group>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="3">人员分组：</div>
+          <div nz-col nzSpan="21">
+            <label class="checkAll mb8" nz-checkbox *ngIf="itsmCheckedGroup.length" [(ngModel)]="isAllItsmGroupChecked" (ngModelChange)="updateAllItsmGroupChecked()">
+              全选
+            </label>
+            <nz-checkbox-group class="w100" style="display: flex; flex-wrap: wrap; gap:8px;" [(ngModel)]="itsmCheckedGroup" (ngModelChange)="changeItsmGroup($event)"></nz-checkbox-group>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="3">工单范围：</div>
+          <div nz-col nzSpan="21">
+            <nz-radio-group class="w100" [(ngModel)]="itsmOrderScopeRadio">
+              <label nz-radio nzValue="0">全工单</label>
+              <label nz-radio nzValue="1">急单</label>
+              <label nz-radio nzValue="2">急单以及超时工单</label>
+            </nz-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="conditions" *ngIf="activeScopeTabValue == 2">
+        <div nz-row>
+          <div nz-col nzSpan="3">院区：</div>
+          <div nz-col nzSpan="21">
+            <nz-radio-group class="w100" style="display: flex; flex-wrap: wrap; gap:8px;" [(ngModel)]="checkedHos">
+              <label *ngFor="let data of hosList" nz-radio [nzValue]="data.id">{{ data.hosName }}</label>
+            </nz-radio-group>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="3">工单类型：</div>
+          <div nz-col nzSpan="21" *ngIf="hosTaskTypes && checkedHos && hosTaskTypes['hos' + checkedHos]">
+            <label class="checkAll mb8" nz-checkbox *ngIf="hosTaskTypes['hos' + checkedHos].length" [(ngModel)]="allTypeChecked" (ngModelChange)="updateAllTypeChecked()">
+              全选
+            </label>
+            <nz-checkbox-wrapper class="w100" style="display: flex; flex-wrap: wrap; gap:8px;" (nzOnChange)="changeTaskTypes($event)">
+              <label nz-checkbox [nzValue]="data.id" [ngModel]="initTypes[data.id]" *ngFor="let data of hosTaskTypes['hos' + checkedHos]">{{ data.taskName }}</label>
+            </nz-checkbox-wrapper>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="3">人员分组：</div>
+          <div nz-col nzSpan="21" *ngIf="hosGroups && checkedHos && hosGroups['hos' + checkedHos]">
+            <label class="checkAll mb8" nz-checkbox *ngIf="hosGroups['hos' + checkedHos].length" [(ngModel)]="allGroupChecked" (ngModelChange)="updateAllGroupChecked()">
+              全选
+            </label>
+            <nz-checkbox-wrapper class="w100" style="display: flex; flex-wrap: wrap; gap:8px;" (nzOnChange)="changeGroups($event)">
+              <label nz-checkbox [nzValue]="data.id" [ngModel]="initGroups[data.id]" *ngFor="let data of hosGroups['hos' + checkedHos]">{{ data.groupName }}</label>
+            </nz-checkbox-wrapper>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="3">工单范围：</div>
+          <div nz-col nzSpan="21">
+            <nz-radio-group class="w100" [(ngModel)]="orderScopeRadio">
+              <label nz-radio nzValue="0">全工单</label>
+              <label nz-radio nzValue="1">急单</label>
+              <label nz-radio nzValue="2">急单以及超时工单</label>
+            </nz-radio-group>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btns display_flex justify-content_flex-center">
+      <button class="btn" nz-button nzType="primary" [nzLoading]="saveLoading" (click)="saveOrderScope()">
+        保存
+      </button>
+      <button class="btn cancel" nz-button nzType="default" (click)="cancelInit()">
+        知道了
+      </button>
+    </div>
+  </div>
+</div>

src/app/components/order-scope/order-scope.component.less

@@ -0,0 +1,170 @@
+@import "../../../../src/theme.less";
+:host {
+  ::ng-deep .ant-checkbox-wrapper + .ant-checkbox-wrapper{
+    margin-left: 0!important;
+  }
+  // 撤回工单
+  .recallOrder {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 9999999;
+
+    .modalBody {
+      width: 350px;
+      height: 220px;
+      background: #fff;
+      border-radius: 5px;
+      padding: 10px 20px;
+      color: #333;
+
+      .title {
+        width: 100%;
+        text-align: center;
+        font-size: 18px;
+        position: relative;
+
+        i {
+          position: absolute;
+          right: 0;
+          top: 0;
+          font-size: 20px;
+          color: #666;
+          cursor: pointer;
+          padding: 0 5px;
+        }
+      }
+
+      .content {
+        width: 310px;
+        height: 117px;
+        background: #f9fafb;
+        border: 1px solid #e5e9ed;
+        border-radius: 5px;
+        overflow: hidden;
+        margin-top: 12px;
+
+        div {
+          text-align: center;
+          margin: 0;
+
+          &.icon {
+            margin-top: 17px;
+
+            i {
+              color: #ff3b53;
+              font-size: 30px !important;
+
+              &.transport-wenhao {
+                color: #f5a523;
+              }
+            }
+          }
+
+          &.defeat {
+            color: #333;
+            font-size: 18px;
+          }
+
+          &:nth-child(3) {
+            font-size: 14px;
+            color: #666;
+          }
+        }
+
+        .conditions {
+          height: 400px;
+          overflow: auto;
+          padding: 16px 20px;
+
+          div {
+            text-align: left;
+            margin-bottom: 8px;
+          }
+        }
+      }
+
+      .btns {
+        button {
+          margin-top: 10px;
+          margin-left: 5px;
+        }
+
+        .recDelBtn {
+          width: 115px;
+        }
+      }
+    }
+  }
+
+  // 初始化设置
+  .init {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+
+    .con {
+      width: 832px;
+      height: auto;
+      background: #fff;
+      border-radius: 5px;
+      padding: 10px 20px;
+      color: #333;
+
+      .content {
+        width: 100%;
+        height: auto;
+
+        .scopeTab{
+          display: flex;
+          height: 60px;
+          border-bottom: 1px solid #D9D9D9;
+          .scopeTabItem{
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-right: 1px solid #D9D9D9;
+            background-color: #fff;
+            cursor: pointer;
+            &:last-of-type{
+              border-right: none;
+            }
+            &.active{
+              background-color: #F0F6ED;
+            }
+          }
+        }
+
+        .remin {
+          font-size: 14px;
+          color: #666;
+          line-height: 48px;
+          border-bottom: 1px solid #e5e9ed;
+        }
+
+        .boxes {
+          color: #333;
+          padding: 8px 12px;
+
+          & > div:nth-child(1) {
+            color: #333;
+            text-align: left;
+          }
+
+          & > div:nth-child(2) {
+            color: #666;
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+}

src/app/components/order-scope/order-scope.component.ts

@@ -0,0 +1,348 @@
+import { Component, OnInit, Output, Input } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { MainService } from 'src/app/services/main.service';
+import { ToolService } from 'src/app/services/tool.service';
+
+@Component({
+  selector: 'app-order-scope',
+  templateUrl: './order-scope.component.html',
+  styleUrls: ['./order-scope.component.less']
+})
+export class OrderScopeComponent implements OnInit {
+  @Input() hsmsData:any = {
+    checkedHos: undefined,
+    scopeGroups: [],
+    orderScopeRadio: undefined,
+  }
+  @Input() itsmData:any = {
+    checkedHos: undefined,
+    scopeGroups: [],
+    orderScopeRadio: undefined,
+  }
+  @Output() confirmModal = new EventEmitter();
+  @Output() cancelModal = new EventEmitter();
+  constructor(
+    private mainService: MainService,
+    private tool: ToolService,
+  ) { }
+
+  user = JSON.parse(localStorage.getItem("user")); //用户信息
+  checkedHos;//转运-院区
+  orderScopeRadio:any = '0';//转运-工单范围
+
+  itsmCheckedHos:any[] = [];//运维-院区
+  itsmCheckedGroup:any[] = [];//运维-分组
+  itsmOrderScopeRadio = '0';//运维-工单范围
+  isAllItsmGroupChecked:boolean = false;//运维-是否全选分组
+
+  ngOnInit() {
+    this.initHsms();
+    this.initItsm();
+  }
+
+  initHsms(){
+    this.checkedHos = this.hsmsData.checkedHos;
+    this.orderScopeRadio = this.hsmsData.orderScopeRadio;
+    this.initOrderScope();
+    this.getOrderScope();
+  }
+
+  initItsm(){
+    this.itsmOrderScopeRadio = this.itsmData.orderScopeRadio;
+    this.itsmGetOrderScope();
+  }
+
+    // 工单范选项卡
+    activeScopeTabValue = 1;
+    scopeTabs:any[] = [
+      { name: '运维', value: 1 },
+      { name: '配送', value: 2 },
+    ];
+
+    // =============================工单范围-运维start========================================
+    // 工单范围数据
+    itsmGetOrderScope() {
+      // 权限内的院区和组
+      let hosList = this.user.infoPermission.hospitals || [];
+      let groups = this.user.infoPermission.groups || [];
+
+      // 选中的院区和组
+      let itsmCheckedHos = this.itsmData.checkedHos || [];
+      let itsmCheckedGroup = this.itsmData.scopeGroups || [];
+
+      let hosIds = itsmCheckedHos.map(v => v.id);
+      let groupIds = itsmCheckedGroup.map(v => v.id);
+
+      this.itsmCheckedHos = hosList.map(v => ({ label: v.hosName, value: v.id, checked: hosIds.includes(v.id) }));
+      this.itsmCheckedGroup = groups.filter(v => hosIds.includes(v.hospital.id)).map(v => ({ label: v.hospital.hosName + '-' + v.groupName, value: v.id, checked: groupIds.includes(v.id) }));
+      this.isAllItsmGroupChecked = this.itsmCheckedGroup.length ? this.itsmCheckedGroup.every(v => v.checked) : false;
+    }
+
+    // 全选、全不选分组
+    updateAllItsmGroupChecked(){
+      this.isAllItsmGroupChecked = !this.isAllItsmGroupChecked;
+      let flag = this.itsmCheckedGroup.length ? this.itsmCheckedGroup.every(v => v.checked) : false;
+      this.itsmCheckedGroup.forEach(v => v.checked = !flag);
+    }
+    // 选择分组
+    changeItsmGroup(e){
+      this.isAllItsmGroupChecked = this.itsmCheckedGroup.length ? this.itsmCheckedGroup.every(v => v.checked) : false;
+    }
+    // 选择院区
+    changeItsmHospital(hospitalList){
+      // 权限内的院区和组
+      let groups = this.user.infoPermission.groups || [];
+
+      // 选中的院区和组
+      let itsmCheckedHos = this.itsmCheckedHos || [];
+      let itsmCheckedGroup = this.itsmCheckedGroup || [];
+
+      let hosIds = itsmCheckedHos.filter(v => v.checked).map(v => v.value);
+      let groupIds = itsmCheckedGroup.filter(v => v.checked).map(v => v.value);
+
+      this.itsmCheckedGroup = groups.filter(v => hosIds.includes(v.hospital.id)).map(v => ({ label: v.hospital.hosName + '-' + v.groupName, value: v.id, checked: groupIds.includes(v.id) }));
+      this.isAllItsmGroupChecked = this.itsmCheckedGroup.length ? this.itsmCheckedGroup.every(v => v.checked) : false;
+    }
+    // =============================工单范围-运维end========================================
+
+    // =============================工单范围-配送start========================================
+
+    // 工单范围数据
+    hosList = []; //院区
+    taskTypes = []; //当前权限下所有工单类型
+    userGroups = []; //当前权限下所有人员分组
+    hosTaskTypes = {}; //当前权限下所有院区对应的任务类型
+    hosGroups = {}; //当前权限下所有院区对应的人员分组
+    getOrderScope() {
+      this.hosList = this.user.infoPermission.hospitals;
+      this.taskTypes = this.user.infoPermission.taskTypes;
+      this.userGroups = this.user.infoPermission.groups;
+      this.hosList.forEach((e) => {
+        let arrT = [],
+          arrG = [];
+        this.taskTypes.forEach((el) => {
+          if (el.hosId.id == e.id) {
+            arrT.push(el);
+            this.hosTaskTypes["hos" + e.id] = arrT;
+          }
+        });
+
+        this.userGroups.forEach((ele) => {
+          if (ele.hospital.id == e.id) {
+            arrG.push(ele);
+            this.hosGroups["hos" + e.id] = arrG;
+          }
+        });
+      });
+      console.log(this.hosTaskTypes, this.hosGroups);
+
+      // 工单范围全选按钮是否选中
+      this.allTypeChecked = false;
+      if (this.user.user.scope && this.user.user.scope.typeIds) {
+        if (
+          this.user.user.scope.typeIds.length ==
+          this.hosTaskTypes["hos" + this.checkedHos].length
+        ) {
+          this.allTypeChecked = true;
+        }
+      }
+      this.allGroupChecked = false;
+      if (this.user.user.scope && this.user.user.scope.groupIds) {
+        if (
+          this.user.user.scope.groupIds.length ==
+          this.hosGroups["hos" + this.checkedHos].length
+        ) {
+          this.allGroupChecked = true;
+        }
+      }
+    }
+
+    // 工单类型全选
+    allTypeChecked: boolean = false; //工单类型全选框
+    updateAllTypeChecked() {
+      let arr = [];
+      this.hosTaskTypes["hos" + this.checkedHos].forEach((e) => {
+        arr.push(e.id);
+      });
+      this.changeTaskTypes(this.allTypeChecked ? arr : []);
+      let obj = {};
+      arr.forEach((e) => {
+        obj[e] = this.allTypeChecked;
+      });
+      this.initTypes = obj;
+    }
+
+    // 工单类型
+    checkedTypes = []; //已选中taskTypes的ID数组
+    changeType: boolean = false; //是否改变工单类型
+    hosTypesChecked = {}; //当前权限下所有院区下选中的工单类型
+    changeTaskTypes(val) {
+      this.checkedTypes = val;
+      this.changeType = true;
+      this.hosTypesChecked["hos" + this.checkedHos] = val;
+      console.log(this.hosTypesChecked);
+      if (val.length == this.hosTaskTypes["hos" + this.checkedHos].length) {
+        this.allTypeChecked = true;
+      } else {
+        this.allTypeChecked = false;
+      }
+    }
+
+    // 人员分组全选
+    allGroupChecked: boolean = false; //工单类型全选框
+    updateAllGroupChecked() {
+      let arr = [];
+      this.hosGroups["hos" + this.checkedHos].forEach((e) => {
+        arr.push(e.id);
+      });
+      this.changeGroups(this.allGroupChecked ? arr : []);
+      let obj = {};
+      arr.forEach((e) => {
+        obj[e] = this.allGroupChecked;
+      });
+      this.initGroups = obj;
+    }
+    // 人员分组
+    checkedGroups = [];
+    changeGroup: boolean = false; //是否改变分组
+    hosGroupsChecked = {}; //当前权限下所有院区下选中的人员分组
+    changeGroups(val) {
+      this.checkedGroups = val;
+      this.changeGroup = true;
+      this.hosGroupsChecked["hos" + this.checkedHos] = val;
+      console.log(this.hosGroupsChecked);
+      if (val.length == this.hosGroups["hos" + this.checkedHos].length) {
+        this.allGroupChecked = true;
+      } else {
+        this.allGroupChecked = false;
+      }
+    }
+
+    // 工单范围院区切换
+    getTypeAndGroup() {
+      this.allTypeChecked = false;
+      this.allGroupChecked = false;
+      for (let k1 in this.initTypes) {
+        this.initTypes[k1] = false;
+      }
+      for (let k1 in this.initGroups) {
+        this.initGroups[k1] = false;
+      }
+      this.orderScopeRadio = "0";
+    }
+
+    // 保存工单范围设置
+    saveLoading: boolean = false; //保存按钮loading状态
+    saveOrderScope() {
+      this.saveLoading = true;
+      let types = [];
+      if (!this.changeType) {
+        // 没有改变当前工单类型设置，取初始化设置，
+        for (var i in this.initTypes) {
+          if (this.initTypes[i]) {
+            types.push(Number(i));
+          }
+        }
+      } else {
+        let arr = this.hosTypesChecked["hos" + this.checkedHos] || [];
+        arr.forEach(function (val) {
+          types.push(Number(val));
+        });
+      }
+
+      let groups = [];
+      if (!this.changeGroup) {
+        // 没有改变当前分组设置，取初始化设置，
+        for (var k in this.initGroups) {
+          if (this.initGroups[k]) {
+            groups.push(Number(k));
+          }
+        }
+      } else {
+        let arr = this.hosGroupsChecked["hos" + this.checkedHos] || [];
+        arr.forEach(function (val) {
+          groups.push(Number(val));
+        });
+      }
+      types = [...new Set(types)];
+      groups = [...new Set(groups)];
+
+      let groupsId = [];
+      groups.forEach((e) => {
+        groupsId.push({ id: e });
+      });
+      let typesId = [];
+      types.forEach((e) => {
+        typesId.push({ id: e });
+      });
+
+      let postData = {
+        workerOrderScope: {
+          hospitalId: { id: this.checkedHos - 0 },
+          typeIds: typesId,
+          groupIds: groupsId,
+          range: this.orderScopeRadio - 0,
+          userId: this.user.user.id,
+        },
+      };
+      if (this.user.user.scope && this.user.user.scope.id) {
+        postData.workerOrderScope["id"] = this.user.user.scope.id;
+      }
+      console.log(postData);
+      return;
+      this.mainService
+        .coopTypeConfig("addData", "workerOrderScope", postData)
+        .subscribe((data) => {
+          this.saveLoading = false;
+          this.confirmModal.emit(data);
+        });
+    }
+
+    // 关闭弹窗
+    cancelInit() {
+      this.cancelModal.emit();
+    }
+
+    // 工单范围设置回显
+    initTypes = {}; //工单类型
+    initGroups = {}; //人员分组
+    initOrderScope() {
+      if (!this.user || !this.user.user || !this.user.user.scope) return;
+      let scopeInfo = this.user.user.scope;
+      if (!this.taskTypes.length) {
+        this.initTypes = {};
+      } else {
+        this.taskTypes.forEach((val, idx) => {
+          this.initTypes[val.id] = false;
+        });
+      }
+      if (!scopeInfo.typeIds) {
+        this.initTypes = {};
+        this.allTypeChecked = false;
+      } else {
+        scopeInfo.typeIds.forEach((val, idx) => {
+          this.initTypes[val.id] = true;
+        });
+      }
+
+      console.log(this.initTypes);
+
+      if (!this.userGroups || !this.userGroups.length) {
+        this.initGroups = {};
+      } else {
+        this.userGroups.forEach((val, idx) => {
+          this.initGroups[val.id] = false;
+        });
+      }
+      if (!scopeInfo.groupIds || !scopeInfo.groupIds.length) {
+        this.initGroups = {};
+      } else {
+        scopeInfo.groupIds.forEach((val, idx) => {
+          this.initGroups[val.id] = true;
+        });
+      }
+      console.log(this.initGroups);
+      console.log(this.initTypes);
+    }
+    // =============================工单范围-配送end========================================
+}

src/app/components/order-scope/order-scope.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { OrderScopeComponent } from './order-scope.component';
+import { ShareModule } from 'src/app/share/share.module';
+
+
+@NgModule({
+  declarations: [
+    OrderScopeComponent,
+  ],
+  imports: [
+    CommonModule,
+    ShareModule,
+  ],
+  exports: [
+    OrderScopeComponent,
+  ]
+})
+export class OrderScopeModule { }

src/app/views/fuwutai/fuwutai.component.html

@@ -1451,142 +1451,6 @@
           </div>
         </div>
       </div>
-      <!-- 工单范围 -->
-      <div
-        class="con"
-        *ngIf="fixedTab == 'orderScope' && fixedTab != 'newOrder'"
-      >
-        <div class="title">工单范围</div>
-        <overlay-scrollbars
-          #9
-          [ngStyle]="{ height: '206px' }"
-          class="conditions"
-        >
-          <div nz-row>
-            <div nz-col nzSpan="6">院区：</div>
-            <div nz-col nzSpan="18">
-              <nz-radio-group
-                class="w100"
-                [(ngModel)]="checkedHos"
-                nzName="radioHos"
-                (ngModelChange)="getTypeAndGroup()"
-              >
-                <label
-                  *ngFor="let data of hosList"
-                  nz-radio
-                  [nzValue]="data.id"
-                  >{{ data.hosName }}</label
-                >
-              </nz-radio-group>
-            </div>
-          </div>
-          <div nz-row>
-            <div nz-col nzSpan="6">工单类型：</div>
-            <div
-              nz-col
-              nzSpan="18"
-              *ngIf="
-                hosTaskTypes && checkedHos && hosTaskTypes['hos' + checkedHos]
-              "
-            >
-              <label
-                class="checkAll"
-                nz-checkbox
-                *ngIf="hosTaskTypes['hos' + checkedHos].length"
-                [(ngModel)]="allTypeChecked"
-                (ngModelChange)="updateAllTypeChecked()"
-              >
-                全选
-              </label>
-              <div nz-row>
-                <nz-checkbox-wrapper
-                  class="w100"
-                  (nzOnChange)="changeTaskTypes($event)"
-                >
-                  <div nz-row>
-                    <div
-                      *ngFor="let data of hosTaskTypes['hos' + checkedHos]"
-                      nz-col
-                      nzSpan="12"
-                    >
-                      <label
-                        nz-checkbox
-                        [nzValue]="data.id"
-                        [ngModel]="initTypes[data.id]"
-                        >{{ data.taskName }}</label
-                      >
-                    </div>
-                  </div>
-                </nz-checkbox-wrapper>
-              </div>
-            </div>
-          </div>
-          <div nz-row>
-            <div nz-col nzSpan="6">人员分组：</div>
-            <div
-              nz-col
-              nzSpan="18"
-              *ngIf="hosGroups && checkedHos && hosGroups['hos' + checkedHos]"
-            >
-              <label
-                class="checkAll"
-                nz-checkbox
-                *ngIf="hosGroups['hos' + checkedHos].length"
-                [(ngModel)]="allGroupChecked"
-                (ngModelChange)="updateAllGroupChecked()"
-              >
-                全选
-              </label>
-              <div nz-row>
-                <nz-checkbox-wrapper
-                  class="w100"
-                  (nzOnChange)="changeGroups($event)"
-                >
-                  <div nz-row>
-                    <div
-                      *ngFor="let data of hosGroups['hos' + checkedHos]"
-                      nz-col
-                      nzSpan="12"
-                    >
-                      <label
-                        nz-checkbox
-                        [nzValue]="data.id"
-                        [ngModel]="initGroups[data.id]"
-                        >{{ data.groupName }}</label
-                      >
-                    </div>
-                  </div>
-                </nz-checkbox-wrapper>
-              </div>
-            </div>
-          </div>
-          <div nz-row>
-            <div nz-col nzSpan="6">工单范围：</div>
-            <div nz-col nzSpan="18">
-              <nz-radio-group
-                class="w100"
-                [(ngModel)]="orderScopeRadio"
-                nzName="radiogroup"
-              >
-                <label nz-radio nzValue="0">全工单</label>
-                <label nz-radio nzValue="1">急单</label>
-                <label nz-radio nzValue="2">急单以及超时工单</label>
-              </nz-radio-group>
-            </div>
-          </div>
-        </overlay-scrollbars>
-        <div class="btns display_flex justify-content_flex-center">
-          <button
-            nz-button
-            nzType="primary"
-            nzValue="small"
-            [nzLoading]="saveLoading"
-            (click)="saveOrderScope()"
-          >
-            保存
-          </button>
-        </div>
-      </div>
       <!-- 展示形式 -->
       <div class="con" *ngIf="fixedTab == 'colType' && fixedTab != 'newOrder'">
         <div class="title">展示形式</div>
@@ -1835,7 +1699,7 @@
             </div>
             <div
               [ngClass]="{ item: true, checked: fixedTab == 'orderScope' }"
-              (click)="checkFixedTab('orderScope')"
+              (click)="showOrderScope()"
             >
               工单范围
             </div>
@@ -3191,166 +3055,9 @@
     (confirmDelEvent)="confirmLogout()"
     content="您确认要退出系统吗？"
   ></app-dialog-delete>
-
-  <!-- 初始化范围设置 -->
-  <div
-    class="
-      init
-      recallOrder
-      display_flex
-      justify-content_flex-center
-      align-items_center
-    "
-    *ngIf="showInitModal && (!user.user.scope || !user.user.scope.id)"
-  >
-    <div class="con modalBody">
-      <div class="title">
-        初始化范围设置<i
-          class="icon_transport transport-guanbi"
-          (click)="cancelInit()"
-        ></i>
-      </div>
-      <div class="content">
-        <div class="remin">
-          提示：您第一次进入此调度，请您设置您调度范围后续也可修改
-        </div>
-        <div class="conditions">
-          <div nz-row>
-            <div nz-col nzSpan="6">院区：</div>
-            <div nz-col nzSpan="18">
-              <nz-radio-group
-                class="w100"
-                [(ngModel)]="checkedHos"
-                nzName="radioHos"
-              >
-                <label
-                  *ngFor="let data of hosList"
-                  nz-radio
-                  [nzValue]="data.id"
-                  >{{ data.hosName }}</label
-                >
-              </nz-radio-group>
-            </div>
-          </div>
-          <div nz-row>
-            <div nz-col nzSpan="6">工单类型：</div>
-            <div
-              nz-col
-              nzSpan="18"
-              *ngIf="
-                hosTaskTypes && checkedHos && hosTaskTypes['hos' + checkedHos]
-              "
-            >
-              <label
-                class="checkAll"
-                nz-checkbox
-                *ngIf="hosTaskTypes['hos' + checkedHos].length"
-                [(ngModel)]="allTypeChecked"
-                (ngModelChange)="updateAllTypeChecked()"
-              >
-                全选
-              </label>
-              <div nz-row>
-                <nz-checkbox-wrapper
-                  class="w100"
-                  (nzOnChange)="changeTaskTypes($event)"
-                >
-                  <div nz-row>
-                    <div
-                      *ngFor="let data of hosTaskTypes['hos' + checkedHos]"
-                      nz-col
-                      nzSpan="12"
-                    >
-                      <label
-                        nz-checkbox
-                        [nzValue]="data.id"
-                        [ngModel]="initTypes[data.id]"
-                        >{{ data.taskName }}</label
-                      >
-                    </div>
-                  </div>
-                </nz-checkbox-wrapper>
-              </div>
-            </div>
-          </div>
-          <div nz-row>
-            <div nz-col nzSpan="6">人员分组：</div>
-            <div
-              nz-col
-              nzSpan="18"
-              *ngIf="hosGroups && checkedHos && hosGroups['hos' + checkedHos]"
-            >
-              <label
-                class="checkAll"
-                nz-checkbox
-                *ngIf="hosGroups['hos' + checkedHos].length"
-                [(ngModel)]="allGroupChecked"
-                (ngModelChange)="updateAllGroupChecked()"
-              >
-                全选
-              </label>
-              <div nz-row>
-                <nz-checkbox-wrapper
-                  class="w100"
-                  (nzOnChange)="changeGroups($event)"
-                >
-                  <div nz-row>
-                    <div
-                      *ngFor="let data of hosGroups['hos' + checkedHos]"
-                      nz-col
-                      nzSpan="12"
-                    >
-                      <label
-                        nz-checkbox
-                        [nzValue]="data.id"
-                        [ngModel]="initGroups[data.id]"
-                        >{{ data.groupName }}</label
-                      >
-                    </div>
-                  </div>
-                </nz-checkbox-wrapper>
-              </div>
-            </div>
-          </div>
-          <div nz-row>
-            <div nz-col nzSpan="6">工单范围：</div>
-            <div nz-col nzSpan="18">
-              <nz-radio-group
-                class="w100"
-                [(ngModel)]="orderScopeRadio"
-                nzName="radiogroup"
-              >
-                <label nz-radio nzValue="0">全工单</label>
-                <label nz-radio nzValue="1">急单</label>
-                <label nz-radio nzValue="2">急单以及超时工单</label>
-              </nz-radio-group>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="btns display_flex justify-content_flex-center">
-        <button
-          class="btn default"
-          nz-button
-          nzType="primary"
-          [nzLoading]="saveLoading"
-          (click)="saveOrderScope()"
-        >
-          保存
-        </button>
-        <button
-          class="btn cancel"
-          nz-button
-          nzType="default"
-          (click)="cancelInit()"
-        >
-          取消
-        </button>
-      </div>
-    </div>
-  </div>
 </div>
-
+<!-- 工单范围 -->
+<app-order-scope *ngIf="showInitModal" [hsmsData]="hsmsData" [itsmData]="itsmData" (confirmModal)="confirmOrderScope($event)" (cancelModal)="cancelOrderScope($event)"></app-order-scope>
 <!-- 消息弹框模板 -->
 <ng-template #msgTemplate let-msg="data">
   <div class="msgTemBox ant-notification-notice-content">

src/app/views/fuwutai/fuwutai.component.less

@@ -2061,7 +2061,7 @@
     z-index: 99;
 
     .con {
-      width: 480px;
+      width: 832px;
       height: auto;
       background: #fff;
       border-radius: 5px;
@@ -2072,6 +2072,27 @@
         width: 100%;
         height: auto;
 
+        .scopeTab{
+          display: flex;
+          height: 60px;
+          border-bottom: 1px solid #D9D9D9;
+          .scopeTabItem{
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-right: 1px solid #D9D9D9;
+            background-color: #fff;
+            cursor: pointer;
+            &:last-of-type{
+              border-right: none;
+            }
+            &.active{
+              background-color: #F0F6ED;
+            }
+          }
+        }
+
         .remin {
           font-size: 14px;
           color: #666;

src/app/views/fuwutai/fuwutai.component.ts

@@ -677,7 +677,6 @@ export class FuwutaiComponent implements OnInit {
     this.getOrderList(1);
     this.getOrderList(2);
     this.getOrderList(3);
-    this.getOrderScope();
     this.initControlView();
     this.moveMenu();
     this.getPhoneNum();
@@ -749,6 +748,75 @@ export class FuwutaiComponent implements OnInit {
     }
   }
 
+  // 工单范围设置回显
+  checkedHos;// 院区选择
+  scopeGroups = []; //当前所属人员分组
+  orderScopeRadio;// 工单范围
+
+  hsmsData: any = {
+    checkedHos: undefined,
+    scopeGroups: [],
+    orderScopeRadio: '0',
+  }; //转运工单范围相关信息
+
+  itsmData: any = {
+    checkedHos: [],
+    scopeGroups: [],
+    orderScopeRadio: '0',
+  }; //运维工单范围相关信息
+  initOrderScope() {
+    if (!this.user || !this.user.user || !this.user.user.scope){
+      this.showOrderScope();
+      return;
+    }
+    let scopeInfo = this.user.user.scope;
+    this.checkedHos = scopeInfo.hospitalId ? scopeInfo.hospitalId.id : null;
+    this.orderScopeRadio = scopeInfo.range + "";
+    this.scopeGroups = scopeInfo.groupIds || [];
+    this.hsmsData = {
+      checkedHos: this.checkedHos,
+      scopeGroups: this.scopeGroups,
+      orderScopeRadio: this.orderScopeRadio || '0',
+    }
+    this.itsmData = {
+      checkedHos: scopeInfo.hospitalId ? [scopeInfo.hospitalId] : [],
+      scopeGroups: this.scopeGroups,
+      orderScopeRadio: this.orderScopeRadio || '0',
+    }
+    this.getHospitalConfigList('allowNucleicAcidPrinting');
+  }
+
+  // 保存工单信息
+  confirmOrderScope(data){
+    if (data.status == 200) {
+      this.cancelOrderScope();
+      this.showPromptModal("保存", true, "");
+      // 关闭phone的websocket
+      this.phones.closeWs(true);
+      this.getPhoneNum(false);
+      this.user.user.scope = data.data;
+      localStorage.setItem("user", JSON.stringify(this.user));
+      this.initOrderScope();
+      this.initControlView();
+    } else {
+      this.showPromptModal("保存", false, data.msg);
+    }
+  }
+
+  // 第一次打开调度台页面初始化范围设置
+  showInitModal: boolean = false;
+  cancelOrderScope() {
+    this.showInitModal = false;
+  }
+
+  showOrderScope() {
+    if (!this.user || !this.user.user || !this.user.user.scope){
+      this.cancelOrderScope();
+      return;
+    }
+    this.showInitModal = true;
+  }
+
   // 连接websocket
   getWebsocketSer() {
     this.sers
@@ -2353,344 +2421,6 @@ export class FuwutaiComponent implements OnInit {
     this.deptFlag = true;
   }
 
-  // 工单范围数据
-  hosList = []; //院区
-  taskTypes = []; //当前权限下所有工单类型
-  userGroups = []; //当前权限下所有人员分组
-  hosTaskTypes = {}; //当前权限下所有院区对应的任务类型
-  hosGroups = {}; //当前权限下所有院区对应的人员分组
-  getOrderScope() {
-    this.hosList = this.user.infoPermission.hospitals;
-    this.taskTypes = this.user.infoPermission.taskTypes;
-    this.userGroups = this.user.infoPermission.groups;
-    // this.checkedHos = this.user.infoPermission.hospitals ? this.user.infoPermission.hospitals[0].id : null;
-    // this.orderScopeRadio = '0';
-    this.hosList.forEach((e) => {
-      let arrT = [],
-        arrG = [];
-      this.taskTypes.forEach((el) => {
-        if (el.hosId.id == e.id) {
-          arrT.push(el);
-          this.hosTaskTypes["hos" + e.id] = arrT;
-        }
-      });
-
-      this.userGroups.forEach((ele) => {
-        if (ele.hospital.id == e.id) {
-          arrG.push(ele);
-          this.hosGroups["hos" + e.id] = arrG;
-        }
-      });
-    });
-    console.log(this.hosTaskTypes, this.hosGroups);
-
-    // 工单范围全选按钮是否选中
-    this.allTypeChecked = false;
-    if (this.user.user.scope && this.user.user.scope.typeIds) {
-      if (
-        this.user.user.scope.typeIds.length ==
-        this.hosTaskTypes["hos" + this.checkedHos].length
-      ) {
-        this.allTypeChecked = true;
-      }
-    }
-    this.allGroupChecked = false;
-    if (this.user.user.scope && this.user.user.scope.groupIds) {
-      if (
-        this.user.user.scope.groupIds.length ==
-        this.hosGroups["hos" + this.checkedHos].length
-      ) {
-        this.allGroupChecked = true;
-      }
-    }
-  }
-  // 院区选择
-  checkedHos;
-
-  // 工单类型全选
-  allTypeChecked: boolean = false; //工单类型全选框
-  updateAllTypeChecked() {
-    let arr = [];
-    this.hosTaskTypes["hos" + this.checkedHos].forEach((e) => {
-      arr.push(e.id);
-    });
-    this.changeTaskTypes(this.allTypeChecked ? arr : []);
-    let obj = {};
-    arr.forEach((e) => {
-      obj[e] = this.allTypeChecked;
-    });
-    this.initTypes = obj;
-  }
-
-  // 工单类型
-  checkedTypes = []; //已选中taskTypes的ID数组
-  changeType: boolean = false; //是否改变工单类型
-  hosTypesChecked = {}; //当前权限下所有院区下选中的工单类型
-  changeTaskTypes(val) {
-    this.checkedTypes = val;
-    this.changeType = true;
-    this.hosTypesChecked["hos" + this.checkedHos] = val;
-    console.log(this.hosTypesChecked);
-    if (val.length == this.hosTaskTypes["hos" + this.checkedHos].length) {
-      this.allTypeChecked = true;
-    } else {
-      this.allTypeChecked = false;
-    }
-  }
-
-  // 人员分组全选
-  allGroupChecked: boolean = false; //工单类型全选框
-  updateAllGroupChecked() {
-    let arr = [];
-    this.hosGroups["hos" + this.checkedHos].forEach((e) => {
-      arr.push(e.id);
-    });
-    this.changeGroups(this.allGroupChecked ? arr : []);
-    let obj = {};
-    arr.forEach((e) => {
-      obj[e] = this.allGroupChecked;
-    });
-    this.initGroups = obj;
-  }
-  // 人员分组
-  checkedGroups = [];
-  changeGroup: boolean = false; //是否改变分组
-  hosGroupsChecked = {}; //当前权限下所有院区下选中的人员分组
-  changeGroups(val) {
-    this.checkedGroups = val;
-    this.changeGroup = true;
-    this.hosGroupsChecked["hos" + this.checkedHos] = val;
-    console.log(this.hosGroupsChecked);
-    if (val.length == this.hosGroups["hos" + this.checkedHos].length) {
-      this.allGroupChecked = true;
-    } else {
-      this.allGroupChecked = false;
-    }
-  }
-
-  // 工单范围
-  orderScopeRadio;
-  // 工单范围院区切换
-  getTypeAndGroup() {
-    this.allTypeChecked = false;
-    this.allGroupChecked = false;
-    for (let k1 in this.initTypes) {
-      this.initTypes[k1] = false;
-    }
-    for (let k1 in this.initGroups) {
-      this.initGroups[k1] = false;
-    }
-    this.orderScopeRadio = "0";
-  }
-
-  // 保存工单范围设置
-  saveOrderScope() {
-    let that = this;
-    that.saveLoading = true;
-    let types = [];
-    if (!this.changeType) {
-      // 没有改变当前工单类型设置，取初始化设置，
-      for (var i in that.initTypes) {
-        if (that.initTypes[i]) {
-          types.push(Number(i));
-        }
-      }
-    } else {
-      // that.checkedTypes.forEach(function (val) {
-      //   types.push(Number(val))
-      // })
-      let arr = this.hosTypesChecked["hos" + this.checkedHos] || [];
-      arr.forEach(function (val) {
-        types.push(Number(val));
-      });
-    }
-
-    let groups = [];
-    if (!this.changeGroup) {
-      // 没有改变当前分组设置，取初始化设置，
-      for (var k in that.initGroups) {
-        if (that.initGroups[k]) {
-          groups.push(Number(k));
-        }
-      }
-    } else {
-      // that.checkedGroups.forEach(function (val) {
-      //   groups.push(Number(val))
-      // })
-      let arr = this.hosGroupsChecked["hos" + this.checkedHos] || [];
-      arr.forEach(function (val) {
-        groups.push(Number(val));
-      });
-    }
-    types = [...new Set(types)];
-    groups = [...new Set(groups)];
-
-    let groupsId = [];
-    groups.forEach((e) => {
-      groupsId.push({ id: e });
-    });
-    let typesId = [];
-    types.forEach((e) => {
-      typesId.push({ id: e });
-    });
-
-    let postData = {
-      workerOrderScope: {
-        hospitalId: { id: that.checkedHos - 0 },
-        typeIds: typesId,
-        groupIds: groupsId,
-        range: that.orderScopeRadio - 0,
-        userId: that.user.user.id,
-      },
-    };
-    if (that.user.user.scope && that.user.user.scope.id) {
-      postData.workerOrderScope["id"] = that.user.user.scope.id;
-    }
-    console.log(postData);
-    // return
-    that.mainService
-      .coopTypeConfig("addData", "workerOrderScope", postData)
-      .subscribe((data) => {
-        that.saveLoading = false;
-        if (data.status == 200) {
-          that.showPromptModal("保存", true, "");
-          // 关闭phone的websocket
-          this.phones.closeWs(true);
-          this.getPhoneNum(false);
-          that.user.user.scope = data.data;
-          localStorage.setItem("user", JSON.stringify(that.user));
-          that.initOrderScope();
-          that.getOrderScope();
-          that.initControlView();
-        } else {
-          that.showPromptModal("保存", false, data.msg);
-        }
-      });
-  }
-  // 确认工单范围设置
-  confirmOrderScope() {
-    let that = this;
-    that.btnLoading = true;
-    let types = [];
-    if (!that.changeType) {
-      // 没有改变当前工单类型设置，取初始化设置，
-      for (var i in that.initTypes) {
-        if (that.initTypes[i]) {
-          types.push(Number(i));
-        }
-      }
-    } else {
-      that.hosTypesChecked["hos" + that.checkedHos].forEach(function (val) {
-        types.push(Number(val));
-      });
-    }
-
-    let groups = [];
-    if (!that.changeGroup) {
-      // 没有改变当前分组设置，取初始化设置，
-      for (var k in that.initGroups) {
-        if (that.initGroups[k]) {
-          groups.push(Number(k));
-        }
-      }
-    } else {
-      that.hosGroupsChecked["hos" + that.checkedHos].forEach(function (val) {
-        groups.push(Number(val));
-      });
-    }
-    types = [...new Set(types)];
-    groups = [...new Set(groups)];
-
-    that.user.user.scope.range = that.orderScopeRadio - 0;
-    that.hosList.forEach((e) => {
-      if (e.id == that.checkedHos) {
-        that.user.user.scope.hospitalId = e;
-      }
-    });
-    let arrT = [],
-      arrG = [];
-    console.log(that.hosTaskTypes, types);
-    that.hosTaskTypes["hos" + that.checkedHos].forEach((e) => {
-      types.forEach((el) => {
-        if (e.id == el) {
-          arrT.push(e);
-        }
-      });
-    });
-    that.hosGroups["hos" + that.checkedHos].forEach((e) => {
-      groups.forEach((el) => {
-        if (e.id == el) {
-          arrG.push(e);
-        }
-      });
-    });
-    that.user.user.scope.typeIds = arrT;
-    that.user.user.scope.groupIds = arrG;
-
-    console.log(that.user);
-    that.initOrderScope();
-    that.getOrderList(1);
-    that.getOrderList(2);
-    that.getOrderList(3);
-    that.getOrderScope();
-    that.initControlView();
-    that.msg.success("修改成功！", {
-      nzDuration: 1000,
-    });
-    that.btnLoading = false;
-
-    that.fixedTab = "";
-    that.fixedMenuShangla();
-  }
-  // 工单范围设置回显
-  initTypes = {}; //工单类型
-  initGroups = {}; //人员分组
-  scopeGroups = []; //当前所属人员分组
-  scopeTypes = []; //当前所属人员类型
-  initOrderScope() {
-    if (!this.user || !this.user.user || !this.user.user.scope) return;
-    let scopeInfo = this.user.user.scope;
-    this.checkedHos = scopeInfo.hospitalId ? scopeInfo.hospitalId.id : null;
-    this.orderScopeRadio = scopeInfo.range + "";
-    if (!this.taskTypes.length) {
-      this.initTypes = {};
-    } else {
-      this.taskTypes.forEach((val, idx) => {
-        this.initTypes[val.id] = false;
-      });
-    }
-    if (!scopeInfo.typeIds) {
-      this.initTypes = {};
-      this.allTypeChecked = false;
-    } else {
-      scopeInfo.typeIds.forEach((val, idx) => {
-        this.initTypes[val.id] = true;
-      });
-    }
-
-    console.log(this.initTypes);
-
-    if (!this.userGroups || !this.userGroups.length) {
-      this.initGroups = {};
-    } else {
-      this.userGroups.forEach((val, idx) => {
-        this.initGroups[val.id] = false;
-      });
-    }
-    if (!scopeInfo.groupIds || !scopeInfo.groupIds.length) {
-      this.initGroups = {};
-    } else {
-      scopeInfo.groupIds.forEach((val, idx) => {
-        this.initGroups[val.id] = true;
-      });
-    }
-    this.scopeGroups = scopeInfo.groupIds || [];
-    this.scopeTypes = scopeInfo.typeIds || [];
-    console.log(this.scopeGroups, this.initGroups);
-    console.log(this.scopeTypes, this.initTypes);
-    this.getHospitalConfigList('allowNucleicAcidPrinting');
-  }
-
   // 初始化展示形式
   controlView = {}; //展示形式
   initControlView() {
@@ -2773,12 +2503,6 @@ export class FuwutaiComponent implements OnInit {
       });
   }
 
-  // 第一次打开调度台页面初始化范围设置
-  showInitModal: boolean = true;
-  cancelInit() {
-    this.showInitModal = false;
-  }
-
   closeModel(e) {
     if (e === "close") {
       this.newOrderShowOpen = false; //此时可出现新的弹窗

src/app/views/fuwutai/fuwutai.module.ts

@@ -6,6 +6,7 @@ import { FuwutaiComponent } from './fuwutai.component';
 import { ShareModule } from 'src/app/share/share.module';
 
 import { NgxPrintModule } from 'ngx-print';
+import { OrderScopeModule } from 'src/app/components/order-scope/order-scope.module';
 
 
 @NgModule({
@@ -17,6 +18,7 @@ import { NgxPrintModule } from 'ngx-print';
     ShareModule,
     FuwutaiRoutingModule,
     NgxPrintModule,
+    OrderScopeModule,
   ]
 })
 export class FuwutaiModule { }