地图

src/app/routes/supply-management/components/choose-famifiar/choose-famifiar.component.ts

@@ -0,0 +1,244 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { STChange, STColumn, STComponent, STData, STRequestOptions } from '@delon/abc/st';
+import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
+import { processSingleSort } from '@shared';
+import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { map } from 'rxjs/operators';
+
+import { SupplyManagementService } from '../../services/supply-management.service';
+import { PublishchooseFamifiarAddComponent } from './add/add.component';
+import { PublishchooseFamifiarSetCaptainComponent } from './set-captain/set-captain.component';
+
+@Component({
+  selector: 'app-publish-goods-choose-famifiar',
+  templateUrl: './choose-famifiar.component.html'
+})
+export class PublishGoodsChooseFamifiarComponent implements OnInit {
+  schema: SFSchema = {};
+  columns!: STColumn[];
+  ui!: SFUISchema;
+  sfExpand = false;
+  @ViewChild('st', { static: false })
+  st!: STComponent;
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+
+  @ViewChild('st2', { static: false })
+  st2!: STComponent;
+  columns2!: STColumn[];
+  st2Data: STData[] = [];
+
+  constructor(
+    private modal: NzModalService,
+    public router: Router,
+    public ar: ActivatedRoute,
+    private drawerService: NzDrawerService,
+    public service: SupplyManagementService,
+    private modalService: NzModalService
+  ) {}
+
+  dataInfo: STData[] = [
+    {
+      id: '1',
+      name1: '1111',
+      name2: '2222',
+      name3: '3333',
+      name4: '4444',
+      name5: '5555',
+      name6: '6666',
+      name7: '7777',
+      name8: '8888',
+      name9: '9999',
+      name10: '1010',
+      name11: '1012',
+      name12: '1013'
+    },
+    {
+      id: '2',
+      name1: '9999',
+      name2: '8888',
+      name3: '7777',
+      name4: '6666',
+      name5: '5555',
+      name6: '4444',
+      name7: '3333',
+      name8: '2222',
+      name9: '1111'
+    }
+  ];
+
+  /**
+   * 查询参数
+   */
+  get reqParams() {
+    return {
+      ...this.sf?.value,
+      isManage: 0
+    };
+  }
+
+  get selectedRows() {
+    return this.st?.list.filter(item => item.checked) || [];
+  }
+  ngOnInit() {
+    this.initSF();
+    this.initST();
+    this.initST2();
+  }
+
+  initSF() {
+    this.schema = {
+      properties: {
+        name: {
+          type: 'string',
+          title: '',
+          ui: {
+            placeholder: '请输入司机姓名/手机号'
+          }
+        },
+        name2: {
+          type: 'string',
+          title: '',
+          ui: {
+            placeholder: '请输入车牌号'
+          }
+        }
+      }
+    };
+    this.ui = {
+      '*': {
+        grid: { span: 12, gutter: 4 }
+      }
+    };
+  }
+
+  initST() {
+    this.columns = [
+      {
+        title: '司机姓名',
+        index: 'name1'
+      },
+      {
+        title: '手机号',
+        index: 'name2'
+      },
+      {
+        title: '指定车辆',
+        index: 'name3',
+        render: 'name3',
+        width: '180px'
+      },
+      {
+        title: '状态',
+        index: 'name4'
+      },
+      {
+        title: '操作',
+        className: 'text-center',
+        buttons: [
+          {
+            text: '选择',
+            iif: item => item.showChoose !== 'false',
+            click: (_record, _modal, _instance) => this.choose(_record)
+          }
+        ]
+      }
+    ];
+  }
+
+  initST2() {
+    this.columns2 = [
+      {
+        title: '司机姓名',
+        index: 'name1'
+      },
+      {
+        title: '手机号',
+        index: 'name2'
+      },
+      {
+        title: '车队长',
+        index: 'name3',
+        render: 'name3',
+        width: '180px'
+      },
+      {
+        title: '指定车辆',
+        index: 'name4'
+      },
+      {
+        title: '操作',
+        className: 'text-center',
+        buttons: [
+          {
+            text: '移除',
+            click: (_record, _modal, _instance) => this.remove(_record, _modal, _instance)
+          }
+        ]
+      }
+    ];
+  }
+
+  // 选择
+  choose(record: STData) {
+    this.st2Data.push({ ...record });
+    this.st2.load();
+    this.st.setRow(record, { showChoose: 'false' });
+  }
+  // 移除
+  remove(record: STData, value1: any, value2: any) {
+    this.st.setRow(record, { showChoose: 'true' });
+    let index = (this.st2Data || []).findIndex(obj => obj.id === record.id);
+    this.st2Data.splice(index, 1);
+    this.st2.load();
+
+    const stData = this.st.data;
+    let index2 = (stData as any).findIndex((obj: any) => obj.id === record.id);
+    this.st.setRow(index2, { showChoose: 'true' });
+  }
+
+  //添加司机
+  add() {
+    this.modalService.create({
+      nzTitle: '添加司机',
+      nzContent: PublishchooseFamifiarAddComponent
+    });
+  }
+
+  //设置车队长
+  setCaptain(record: STData) {
+    this.modalService.create({
+      nzTitle: '设置车队长',
+      nzContent: PublishchooseFamifiarSetCaptainComponent
+    });
+  }
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+    this.sfExpand = false;
+    this.st.load(1);
+  }
+
+  expandToggle() {
+    this.sfExpand = !this.sfExpand;
+    this.sf?.setValue('/_expand', this.sfExpand);
+  }
+
+  // 排序
+  reqProcess(requestOptions: STRequestOptions): STRequestOptions {
+    return processSingleSort(requestOptions);
+  }
+
+  cancel() {}
+
+  ok() {}
+
+  carChange(event: any, item: STData) {
+    this.st.setRow(item, { name3: event });
+  }
+}