edit

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "ng-alain-pro",
+  "name": "tms-obc-web",
   "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -2803,6 +2803,14 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/jquery": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.9.tgz",
+      "integrity": "sha512-B8pDk+sH/tSv/HKdx6EQER6BfUOb2GtKs0LOmozziS4h7cbe8u/eYySfUAeTwD+J09SqV3man7AMWIA5mgzCBA==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/js-base64": {
       "version": "3.3.1",
       "resolved": "https://registry.npmmirror.com/@types/js-base64/download/@types/js-base64-3.3.1.tgz",
@@ -2880,6 +2888,11 @@
       "integrity": "sha1-KOzt528VsTVTtOhgdNTPmgu+ScQ=",
       "dev": true
     },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/@types/source-list-map/download/@types/source-list-map-0.1.2.tgz?cache=0&sync_timestamp=1637284095686&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fsource-list-map%2Fdownload%2F%40types%2Fsource-list-map-0.1.2.tgz",
@@ -9331,6 +9344,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-base64": {
       "version": "3.7.2",
       "resolved": "https://registry.npmmirror.com/js-base64/download/js-base64-3.7.2.tgz",

package.json

@@ -55,6 +55,8 @@
     "ajv": "^8.6.2",
     "angular-baidu-maps": "^12.0.0",
     "file-saver": "^2.0.5",
+    "@types/jquery": "^3.5.9",
+    "jquery": "^3.6.0",
     "js-base64": "^3.6.1",
     "masonry-layout": "^4.2.2",
     "ng-gallery": "^5.0.0",

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

@@ -0,0 +1,6 @@
+<sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'"> </sf>
+
+<div *nzModalFooter>
+  <button nz-button nzType="default" (click)="close()">取消</button>
+  <button nz-button nzType="primary" (click)="save()">保存</button>
+</div>

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

@@ -0,0 +1,44 @@
+import { AfterViewInit, ChangeDetectorRef, Component, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { SFComponent, SFSchema, SFSchemaEnumType, SFUISchema } from '@delon/form';
+import { _HttpClient } from '@delon/theme';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-choose-famifiar-add',
+  templateUrl: './add.component.html'
+})
+export class PublishchooseFamifiarAddComponent implements OnInit {
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  schema!: SFSchema;
+  ui!: SFUISchema;
+
+  i: any;
+
+  constructor(public http: _HttpClient, private cdr: ChangeDetectorRef, private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.initSF();
+  }
+  initSF() {
+    this.schema = {
+      properties: {
+        name: {
+          type: 'string',
+          title: '司机手机号'
+        }
+      },
+      required: ['name']
+    };
+    this.ui = {
+      '*': {
+        spanLabelFixed: 120,
+        grid: { span: 24 }
+      }
+    };
+  }
+
+  close() {}
+  save() {}
+}

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

@@ -0,0 +1,65 @@
+<button nz-button nzType="primary" style="margin-bottom: 24px" (click)="add()"><i nz-icon nzType="plus"></i>添加司机</button>
+<!-- 搜索区 -->
+<div nz-row nzGutter="8">
+  <div nz-col [nzSpan]="12">
+    <div nz-row nzGutter="8">
+      <div nz-col [nzSpan]="18">
+        <sf #sf [ui]="ui" [schema]="schema" [button]="'none'"></sf>
+      </div>
+      <div nz-col [nzSpan]="6">
+        <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st.load(1)">查询</button>
+        <button nz-button (click)="resetSF()">重置</button>
+      </div>
+    </div>
+  </div>
+</div>
+<div nz-row nzGutter="8">
+  <div nz-col [nzSpan]="12">
+    <!-- 数据列表 -->
+    <st
+      #st
+      [bordered]="true"
+      [data]="dataInfo"
+      [columns]="columns"
+      [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams, process: reqProcess }"
+      [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+      [loadingDelay]="500"
+      [loading]="service.http.loading"
+      [widthMode]="{ type: 'strict' }"
+      [scroll]="{ x: '600px' }"
+    >
+      <ng-template st-row="name3" let-item let-index="index">
+        <nz-select ngModel="lucy" (ngModelChange)="carChange($event,item)">
+          <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
+          <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
+        </nz-select>
+      </ng-template>
+    </st>
+  </div>
+  <div nz-col [nzSpan]="12">
+    <!-- 选中列表 -->
+    <st
+      #st2
+      [bordered]="true"
+      [data]="st2Data"
+      [columns]="columns2"
+      [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams, process: reqProcess }"
+      [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+      [loadingDelay]="500"
+      [loading]="service.http.loading"
+      [widthMode]="{ type: 'strict' }"
+      [scroll]="{ x: '600px' }"
+    >
+      <ng-template st-row="name3" let-item let-index="index">
+        <span>{{ item.name3 }}&nbsp;{{ item.name4 }}</span>&nbsp;
+        <a (click)="setCaptain(item)">设置</a>
+      </ng-template>
+    </st>
+  </div>
+</div>
+<div *nzModalFooter>
+  <button nz-button nzType="default" (click)="cancel()">取消</button>
+  <button nz-button nzType="primary" (click)="ok()">发布并指派给司机</button>
+</div>

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 });
+  }
+}

src/app/routes/supply-management/components/choose-famifiar/set-captain/set-captain.component.html

@@ -0,0 +1,6 @@
+<sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'"> </sf>
+
+<div *nzModalFooter>
+  <button nz-button nzType="default" (click)="close()">取消</button>
+  <button nz-button nzType="primary" (click)="save()">保存</button>
+</div>

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

@@ -0,0 +1,44 @@
+import { AfterViewInit, ChangeDetectorRef, Component, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { SFComponent, SFSchema, SFSchemaEnumType, SFUISchema } from '@delon/form';
+import { _HttpClient } from '@delon/theme';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-choose-famifiar-set-captain',
+  templateUrl: './set-captain.component.html'
+})
+export class PublishchooseFamifiarSetCaptainComponent implements OnInit {
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  schema!: SFSchema;
+  ui!: SFUISchema;
+
+  i: any;
+
+  constructor(public http: _HttpClient, private cdr: ChangeDetectorRef, private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.initSF();
+  }
+  initSF() {
+    this.schema = {
+      properties: {
+        name: {
+          type: 'string',
+          title: '车队长手机号'
+        }
+      },
+      required: ['name']
+    };
+    this.ui = {
+      '*': {
+        spanLabelFixed: 120,
+        grid: { span: 24 }
+      }
+    };
+  }
+
+  close() {}
+  save() {}
+}

src/app/routes/supply-management/components/gaode-map/gaode-map.component.html

@@ -0,0 +1,6 @@
+<div nz-row style="margin-bottom: 24px">
+  <div nz-col nzSpan="8">
+    <input nz-input id="pickerInput" [(ngModel)]="addressInput" placeholder="请输入地址" />
+  </div>
+</div>
+<div id="container" style="width: 800px; height: 500px"></div>

src/app/routes/supply-management/components/gaode-map/gaode-map.component.ts

@@ -0,0 +1,70 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { _HttpClient } from '@delon/theme';
+import * as $ from 'jquery';
+declare var AMapUI: any;
+declare var AMap: any;
+
+@Component({
+  selector: 'app-gaode-map',
+  templateUrl: './gaode-map.component.html'
+})
+export class GaodeMapComponent implements OnInit {
+  addressInput: any;
+  constructor() {}
+  ngOnInit(): void {
+    this.PoiPicker();
+  }
+
+  // poi选点
+  PoiPicker() {
+    AMapUI.setDomLibrary($);
+    let map = new AMap.Map('container', {
+      zoom: 10
+    });
+    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker: any) {
+      let poiPicker = new PoiPicker({
+        // city:'北京',
+        input: 'pickerInput'
+      });
+      //初始化poiPicker
+      (window as any).poiPicker = poiPicker;
+
+      var marker = new AMap.Marker();
+
+      var infoWindow = new AMap.InfoWindow({
+        offset: new AMap.Pixel(0, -20)
+      });
+      console.log('0000')
+      console.log(PoiPicker)
+      //选取了某个POI
+      poiPicker.on('poiPicked', function (poiResult: any) {
+        console.log(1111);
+        console.log(poiResult)
+        // console.log(this.addressInput)
+        // this.addressInput = poiResult.item?.name
+        var source = poiResult.source,
+          poi = poiResult.item,
+          info = {
+            source: source,
+            id: poi.id,
+            name: poi.name,
+            location: poi.location.toString(),
+            address: poi.address
+          };
+        marker.setMap(map);
+        infoWindow.setMap(map);
+
+        marker.setPosition(poi.location);
+        infoWindow.setPosition(poi.location);
+
+        infoWindow.setContent(`POI信息: <pre>${JSON.stringify(info, null, 2)}</pre>`);
+        infoWindow.open(map, marker.getPosition());
+
+        map.setCenter(marker.getPosition());
+      });
+      poiPicker.onCityReady(() => {
+        // poiPicker.suggest('美食');
+      });
+    });
+  }
+}

src/app/routes/supply-management/components/onecar-publish/onecar-publish.component.html

@@ -35,7 +35,7 @@
                   ><i nz-icon nzType="menu" nzTheme="outline" style="color: #1890ff" (click)="openMap()"></i
                 ></span>
                 <span *ngIf="idx !== 0"
-                  ><i nz-icon nzType="minus-circle-o" nzTheme="fill" style="color: #d9001b" (click)="subStartInfo($event, idx)">X</i
+                  ><i nz-icon nzType="minus-circle-o" nzTheme="fill" style="color: #d9001b" (click)="subStartInfo($event, idx)"></i
                 ></span>
               </div>
             </nz-form-control>

src/app/routes/supply-management/components/onecar-publish/onecar-publish.component.ts

@@ -13,8 +13,8 @@ import {
 import { _HttpClient } from '@delon/theme';
 import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
 
-// import { PublishGoodsChooseFamifiarComponent } from '../bulk-publish/choose-famifiar/choose-famifiar.component';
+import { PublishGoodsChooseFamifiarComponent } from '../choose-famifiar/choose-famifiar.component';
-// import { GaodeMapComponent } from '../gaode-map/gaode-map.component';
+import { GaodeMapComponent } from '../gaode-map/gaode-map.component';
 @Component({
   selector: 'app-publish-goods-onecar-publish',
   templateUrl: './onecar-publish.component.html',
@@ -461,7 +461,7 @@ export class  SupplyManagementOnecarPublishComponent implements OnInit {
   chooseFamifiar() {
     this.modalService.create({
       nzTitle: '指派熟车',
-      // nzContent: PublishGoodsChooseFamifiarComponent,
+      nzContent: PublishGoodsChooseFamifiarComponent,
       nzWidth: 1300
     });
   }
@@ -489,7 +489,7 @@ export class  SupplyManagementOnecarPublishComponent implements OnInit {
   openMap() {
     this.modalService.create({
       nzTitle: '',
-      // nzContent: GaodeMapComponent,
+      nzContent: GaodeMapComponent,
       nzWidth: 1200
     });
   }

src/app/routes/supply-management/supply-management.module.ts

@@ -21,6 +21,10 @@ import { SupplyManagementBulkDetailComponent } from './components/bulk-detail/bu
 import { SupplyManagementVehicleDetailComponent } from './components/vehicle-detail/vehicle-detail.component';
 import { SupplyManagementAddDriversComponent } from './components/add-drivers/add-drivers.component';
 import { SupplyManagementOnecarPublishComponent } from './components/onecar-publish/onecar-publish.component';
+import { GaodeMapComponent } from './components/gaode-map/gaode-map.component';
+import { PublishGoodsChooseFamifiarComponent } from './components/choose-famifiar/choose-famifiar.component';
+import { PublishchooseFamifiarSetCaptainComponent } from './components/choose-famifiar/set-captain/set-captain.component';
+import { PublishchooseFamifiarAddComponent } from './components/choose-famifiar/add/add.component';
 
 const COMPONENTS: Type<void>[] = [
   SupplyManagementIndexComponent,
@@ -34,7 +38,11 @@ const COMPONENTS: Type<void>[] = [
   SupplyManagementBulkDetailComponent,
   SupplyManagementVehicleDetailComponent,
   SupplyManagementAddDriversComponent,
-  SupplyManagementOnecarPublishComponent
+  SupplyManagementOnecarPublishComponent,
+  GaodeMapComponent,
+  PublishGoodsChooseFamifiarComponent,
+  PublishchooseFamifiarSetCaptainComponent,
+  PublishchooseFamifiarAddComponent
 ];
 
 @NgModule({

src/app/shared/index.ts

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2021-11-29 10:04:12
- * @LastEditTime: 2021-11-29 11:19:24
+ * @LastEditTime: 2021-12-06 15:21:46
- * @LastEditors: your name
+ * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\shared\index.ts
  */
@@ -18,7 +18,7 @@ export * from './components/address/index';
 export * from './components/captcha/index';
 
 // Utils
-export * from './utils/yuan';
+export * from './utils';
 
 // Module
 export * from './shared.module';

src/index.html

@@ -1,3 +1,11 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 10:04:12
+ * @LastEditTime: 2021-12-06 15:29:11
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \tms-obc-web\src\index.html
+-->
 <!DOCTYPE html>
 <html>
   <head>
@@ -46,3 +54,10 @@
     </div>
   </body>
 </html>
+<script type="text/javascript">
+    window._AMapSecurityConfig = {
+        securityJsCode:'dde4610c3bd04617b99fb55ba5adbe9d',
+    }
+  </script>
+  <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=63f9573ca55fef2b92d4ffe0c85dea8f'></script>
+  <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

src/style-icons-auto.ts

@@ -53,7 +53,8 @@ import {
   UserOutline,
   WeiboCircleOutline,
   EyeInvisibleOutline,
-  MoreOutline
+  MoreOutline,
+  MenuOutline
 } from '@ant-design/icons-angular/icons';
 
 export const ICONS_AUTO = [
@@ -106,5 +107,6 @@ export const ICONS_AUTO = [
   UserOutline,
   WeiboCircleOutline,
   EyeInvisibleOutline,
-  MoreOutline
+  MoreOutline,
+  MenuOutline
 ];