wms-common v1.0.45

WMS公共组件工程

使用方法

npm i wms-common@latest --save

组件清单

Component

Service

通用业务解决方案

表单类业务

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"
	}
}