WMS公共组件工程

使用方法

npm i wms-common@latest --save

组件清单

Component

| 组件名 | 组件标识 | 职责 | 完成情况 | | | -------- | :--------- | -------------------- | -------- | ---- | | 表单组件 | wms-form | | 待开发 | | | 表格组件 | wms-grid | | 已完成 | | | 按钮组件 | wms-button | 统一处理样式，防抖动 | 待开发 | | | 树形组件 | wms-tree | | 待开发 | | | | | | | |

Service

| 服务名 | 服务类名 | 职责 | 完成情况 | | | ---------- | -------------- | ------------------------------ | -------- | ---- | | 上下文服务 | ContextService | | 待开发 | | | Http服务 | HttpService | 统一处理url、参数、错误处理等 | 已完成 | | | 日期服务 | DateService | 提供处理日期的工具类方法 | 开发中 | | | 缓存服务 | StorageService | 处理本地缓存 | 已完成 | | | URL服务 | UrlService | 用于正确识别开发环境服务器地址 | 已完成 | | | | | | | | | | | | | |

通用业务解决方案

表单类业务

constructor(
    private $ctx: ContextService
) {}

/**
 * 打开表单
 */
createFormArea() {
    this.$ctx.openDrawer('新增xxx', DemoCreateBusinessComponent).then(() => {
        this.$ctx.feedback('新增xxx', '操作成功', 'success');
    }, () => {});
}

// 表单类
export class DemoCreateBusinessComponent {
  	// 必须有提交和取消的输入属性
    @Input() onSubmit: () => void = () => {};
    @Input() onClose: () => void = () => {};
    
    /**
     * 提交按钮事件
     */
    handleSubmit() {
        // 提交表单后，调用 onSubmit 事件
        this.$service.addXxx().subscribe(result => {
            this.onSubmit();
        });
    }
}

非表格区域需要处理接口异常/等待/成功

orchid-async-container
<wms-async-container [observer]="observer">
    <!-- wmsAsyncSuccessTemplate指令标识接口成功会显示的内容，let-dataItem 为接口返回数据，即result.data -->
    <ng-template wmsAsyncSuccessTemplate recordsKey="list" let-data>
        <!-- 由调用方控制此处显示内容 -->
        <div class="warehouse-card-item" *ngFor="let item of data.list">
            <wms-warehouse-card [dataSource]="item"></wms-warehouse-card>
        </div>
    </ng-template>
</wms-async-container>

// 将可观察对象传入 wms-async-container 组件
this.observer = this.$service.queryWarehouseList(params);

处理成功/警告/错误等反馈信息

constructor(
    private $ctx: ContextService
) {}

handleOk() {
    // 在提交表单成功后等业务场景，
    this.$ctx.feedback('message-title', 'message-desc', 'success');
}

开发环境请求跨域问题

方案a，通过environment配置 httpUrl。然后通过chrome浏览器设置。

export const environment = {
  	production: false,
    httpUrl: 'http://localhost:8099'
};

// 谷歌解决跨域配置
右键谷歌浏览器 在目标中追加 --disable-web-security --user-data-dir=d:/myChromeDevUserData

方案b，通过angular代理。在根目录下创建proxy.conf.json。在package.json的script中新增命令

// proxy.conf.json
{
    "/api": {
        "target":"http://localhost:8099", // 指向nginx代理地址
        "secure":false,
        "changeOrigin":true,
        "pathRewrite":{
            "^/api":""
        }
    }
}

// package.json
{
	"scripts": {
		"start": "ng serve --port 4100",
		"start:proxy": "ng serve --port 4100 --proxy-config proxy.conf.json"
	}
}