合同

src/app/routes/contract-management/components/contract-list/contract-list.component.html

@@ -0,0 +1,67 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-12-07 15:57:49
+ * @LastEditTime: 2021-12-07 16:25:09
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \tms-obc-web\src\app\routes\contract-management\components\contract-list\contract-list.component.html
+-->
+<page-header-wrapper [title]="'合同列表'">
+</page-header-wrapper>
+
+
+<nz-card>
+    <div nz-row nzGutter="8">
+      <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
+      <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
+        <sf #sf [schema]="schema" [ui]="ui" [mode]="'search'" [disabled]="!sf?.valid" [loading]="service.http.loading"
+          (formSubmit)="st?.load(1)" (formReset)="resetSF()"></sf>
+      </div>
+  
+      <!-- 查询字段大于3个时，根据展开状态调整布局 -->
+      <ng-container>
+        <div nz-col [nzSpan]="_$expand ? 24 : 18">
+          <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
+        </div>
+        <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
+          <button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="service.http.loading"
+            (click)="st?.load(1)">查询</button>
+          <button nz-button (click)="resetSF()">重置</button>
+          <button nz-button nzType="link" (click)="expandToggle()">
+            {{ !_$expand ? '展开' : '收起' }}
+            <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+          </button>
+        </div>
+      </ng-container>
+    </div>
+  </nz-card>
+
+<nz-card class="content-box" nzBordered>
+
+    <div style="position: relative">
+        <nz-alert
+          nzType="info"
+          [nzMessage]="'当前共' + st?.total + '行记录，已选择' + selectedRows.length + '项'"
+          nzShowIcon
+          [ngStyle]="{ margin: '0 0 1rem 0' }"
+        >
+        </nz-alert>
+      </div>
+
+    <st #st [data]="url" [columns]="columns"
+        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+        [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+        [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+        [loading]="service.http.loading" [scroll]="{ x:'1200px',y: '370px' }" (change)="stChange($event)"></st>
+</nz-card>
+
+<ng-template #auditModal>
+    <div nz-row nzGutter="8">
+        <div nz-col nzSpan="24" se-container [labelWidth]="80">
+            <se [col]="1" label="备注">
+                <textarea nz-input rows="3" placeholder="同意可以不用填写原因 ，拒绝必须说明原因"
+                    style="width: 325px;margin-left: 14px;"></textarea>
+            </se>
+        </div>
+    </div>
+</ng-template>

src/app/routes/contract-management/components/contract-list/contract-list.component.less

@@ -0,0 +1,34 @@
+:host::ng-deep {
+    .search-box {
+        .ant-card-body {
+            padding-bottom: 18px;
+        }
+    }
+
+    .content-box {
+        .ant-card-body {
+            padding-top: 0;
+        }
+    }
+
+    nz-range-picker {
+        width: 100%;
+    }
+
+    .ant-tabs-tab-btn {
+        padding-left : 16px;
+        padding-right: 16px;
+    }
+}
+
+.expend-options {
+    margin-top: 0px;
+}
+
+
+@media (min-width: 1200px) {
+    .expend-options {
+        margin-top: -40px;
+    }
+
+}

src/app/routes/contract-management/components/contract-list/contract-list.component.ts

@@ -0,0 +1,239 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { STComponent, STColumn, STChange } from '@delon/abc/st';
+import { SFComponent, SFSchema, SFDateWidgetSchema, SFUISchema } from '@delon/form';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { TicketService } from '../../services/contract-management.service';
+
+@Component({
+  selector: 'app-contract-management-contract-list',
+  templateUrl: './contract-list.component.html',
+  styleUrls: ['./contract-list.component.less']
+})
+export class ContractManagementContractListComponent implements OnInit {
+  url = `/rule?_allow_anonymous=true`;
+  @ViewChild('st', { static: true })
+  st!: STComponent;
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  @ViewChild('auditModal', { static: false })
+  auditModal!: any;
+  schema: SFSchema = {};
+  columns: STColumn[] = [];
+  ui: SFUISchema = {};
+  _$expand = false;
+
+  reqParams = {};
+  selectedRows: any[] = [];
+  constructor(public service: TicketService, private nzModalService: NzModalService, private router: Router) {}
+
+  ngOnInit(): void {
+    this.initST()
+    this.initSF()
+  }
+  /**
+   * 初始化数据列表
+   */
+   initST() {
+    this.columns = [
+      { title: '', type: 'checkbox', width: '50px', className: 'text-center' },
+      {
+        title: '合同编号',
+        width: '100px',
+        className: 'text-center',
+        render: 'goodsId'
+      },
+      {
+        title: '合同类型',
+        width: '100px',
+        className: 'text-center',
+      },
+      { title: '托运人', index: 'externalSn', width: '120px', className: 'text-center' },
+      { title: '承运人', index: 'linkUrl', width: '120px', className: 'text-center' },
+      {
+        title: '业务单号',
+        className: 'text-center',
+        width: '120px',
+      },
+      {
+        title: '装货地',
+        className: 'text-center',
+        width: '120px',
+      }, 
+      {
+        title: '卸货地',
+        className: 'text-center',
+        width: '120px',
+      },
+      {
+        title: '货物名称',
+        className: 'text-center',
+        width: '120px',
+      },
+      {
+        title: '重量/体积',
+        className: 'text-center',
+        width: '120px',
+      },
+      {
+        title: '金额',
+        className: 'text-center',
+        width: '120px',
+      },
+      {
+        title: '签署日期',
+        className: 'text-center',
+        width: '120px',
+        render: 'feiong'
+      },
+      {
+        title: '交易时间',
+        className: 'text-center',
+        width: '120px',
+      },
+      // {
+      //   title: '操作',
+      //   fixed: 'right',
+      //   width: '200px',
+      //   className: 'text-left',
+      //   buttons: [
+      //     {
+      //       text: '查看评价',
+      //       // click: (_record) => this.viewEvaluate(_record),
+      //     },
+      //   ],
+      // },
+    ];
+  }
+    /**
+ * 初始化查询表单
+ */
+     initSF() {
+      this.schema = {
+        properties: {
+          _$expand: { type: 'boolean', ui: { hidden: true } },
+          no: {
+            type: 'string',
+            title: '用户名',
+          },
+          no2: {
+            type: 'string',
+            title: '托运人'
+          },
+          no1: {
+            type: 'string',
+            title: '承运人'
+          },
+          createTime: {
+            title: '签署日期',
+            type: 'string',
+            ui: {
+              widget: 'date',
+              mode: 'range',
+              format: 'yyyy-MM-dd',
+              visibleIf: {
+                _$expand: (value: boolean) => value,
+              },
+            } as SFDateWidgetSchema,
+          },
+          appId: {
+            type: 'string',
+            title: '合同类型',
+            ui: {
+              widget: 'select',
+              placeholder: '请选择',
+              visibleIf: {
+                _$expand: (value: boolean) => value,
+              },
+              allowClear: true,
+              // asyncData: () => this.getCatalogueMember(),
+            },
+          },
+        },
+        type: 'object',
+      };
+      this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+    }
+      /**
+   * 查询字段个数
+   */
+  get queryFieldCount(): number {
+    return Object.keys(this.schema?.properties || {}).length;
+  }
+  stChange(e: STChange): void {
+    switch (e.type) {
+      case 'checkbox':
+        this.selectedRows = e.checkbox!;
+        break;
+      case 'filter':
+        this.st.load();
+        break;
+    }
+  }
+
+  approval(): void {}
+
+  add(): void {}
+
+  routeTo(item: any) {
+    this.router.navigate(['/ticket/invoice-requested-detail/1']);
+  }
+
+  auditAction(item: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '审核',
+      nzContent: this.auditModal,
+      nzFooter: [
+        {
+          label: '拒绝',
+          type: 'default',
+          onClick: () => {
+            modal.destroy();
+          }
+        },
+        {
+          label: '通过',
+          type: 'primary',
+          onClick: () => {
+            modal.destroy();
+          }
+        }
+      ]
+    });
+    modal.afterClose.subscribe(res => {
+      this.st.load();
+    });
+  }
+
+  showReason(item: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '查看原因',
+      nzContent: '运单数据异常，暂时无法开票，请联系客服400-xxxx-xxxx',
+      nzFooter: [
+        {
+          label: '关闭',
+          type: 'primary',
+          onClick: () => {
+            modal.destroy();
+          }
+        }
+      ]
+    });
+  }
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+    this._$expand = false;
+  }
+
+  /**
+   * 伸缩查询条件
+   */
+   expandToggle(): void {
+    this._$expand = !this._$expand;
+    this.sf?.setValue('/_$expand', this._$expand);
+  }
+}

src/app/routes/contract-management/contract-management-routing.module.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-07 15:57:49
+ * @LastEditTime: 2021-12-07 16:11:00
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \tms-obc-web\src\app\routes\contract-management\contract-management-routing.module.ts
+ */
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ContractManagementContractListComponent } from './components/contract-list/contract-list.component';
+const routes: Routes = [
+  { path: 'list', component: ContractManagementContractListComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ContractManagementManagementRoutingModule {}

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

@@ -0,0 +1,23 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-07 15:57:49
+ * @LastEditTime: 2021-12-07 16:11:48
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: \tms-obc-web\src\app\routes\contract-management\contract-management.module.ts
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared';
+import { ContractManagementManagementRoutingModule } from './contract-management-routing.module';
+import { ContractManagementContractListComponent } from './components/contract-list/contract-list.component';
+
+const COMPONENTS: any = [
+  ContractManagementContractListComponent
+];
+const NOTROUTECOMPONENTS: any = [];
+@NgModule({
+  declarations: [...COMPONENTS, ...NOTROUTECOMPONENTS],
+  imports: [CommonModule, ContractManagementManagementRoutingModule, SharedModule]
+})
+export class ContractManagementManagementModule {}

src/app/routes/contract-management/services/contract-management.service.ts

@@ -0,0 +1,11 @@
+import { Injectable, Injector } from '@angular/core';
+import { BaseService } from 'src/app/shared/services';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TicketService extends BaseService {
+  constructor(public injector: Injector) {
+    super(injector);
+  }
+}

src/app/routes/routes-routing.module.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-29 10:20:33
- * @LastEditTime: 2021-12-07 14:57:47
+ * @LastEditTime: 2021-12-07 16:12:50
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \tms-obc-web\src\app\routes\routes-routing.module.ts
@@ -38,6 +38,7 @@ const routes: Routes = [
       { path: 'supply-management', loadChildren: () => import('./supply-management/supply-management.module').then((m) => m.SupplyManagementModule) },
       { path: 'order-management', loadChildren: () => import('./order-management/order-management.module').then((m) => m.OrderManagementModule) },
       { path: 'waybill-management', loadChildren: () => import('./waybill-management/waybill-management.module').then((m) => m.WaybillManagementModule) },
+      { path: 'contract-management', loadChildren: () => import('./contract-management/contract-management.module').then((m) => m.ContractManagementManagementModule) },
     ]
   },
   // passport

src/assets/mocks/menu-data.json

@@ -285,6 +285,17 @@
             }
           ]
         },
+        {
+          "text": "合同管理",
+          "icon": "anticon anticon-dashboard",
+          "group": true,
+          "children": [
+            {
+              "text": "合同列表",
+              "link": "/contract-management/list"
+            }
+          ]
+        },
         {
           "text": "系统设置",
           "icon": "anticon anticon-dashboard",