fantasy-ngzorro v1.3.33

TOC

Fantasy-Ngzorro

更新记录

前言

1、文档中的插槽概念借用vue中的插槽，在angular里面体现出来就是模板 #template。

2、事件传递建议使用bind(this)绑定自定义的函数去实现方法, 而不是箭头函数。示例：onChangeEvent: this.formInputChange.bind(this)

3、运行本地服务之后，访问demo路由即可查看具体交互

1、按钮(hd-button)

效果图

示例

<hd-button type="primary">查询</hd-button>

说明

注意点

• 为防止回车触发表单提交事件，禁止使用submit类型的按钮，请使用普通按钮+click事件触发表单提交!

2、按钮组(hd-button-group)

效果图

示例

<hd-button-group>
  <ng-template #buttonGroupLeft>
    <hd-button type="add">add</hd-button>
    <hd-button type="default">default</hd-button>
    <hd-button type="default">default</hd-button>
    <hd-button type="default">default</hd-button>
  </ng-template>
  <ng-template #buttonGroupRight>
    <hd-button type="default">default</hd-button>
  </ng-template>
</hd-button-group>

说明

注意点

• hd-button-group中的按钮会自动增加间距12px

3、通用表格(hd-current-table)

效果图

示例

<hd-current-table #hdCurrentTable [(tablePageIndex)]="pageIndex" [(tablePageSize)]="pageSize" [scroll]="{x: '600px'}" [tableData]="page" (tableSearchEvent)="search($event)" showSelected selectField="billNumber" (selectEvent)="selectResult($event)">
  <ng-template #tableTotal>
    <nz-alert nzType="info" [nzMessage]="nzAlertTotal" nzShowIcon></nz-alert>
    <ng-template #nzAlertTotal>
      <span>已选择{{ tableSelectList.length }}项服务</span>&nbsp;&nbsp;
      <span>调用总计：36.4万</span>&nbsp;&nbsp;
      <span class="common-btn-group">
        <a (click)="hdCurrentTable.resetStatus()">清空</a>
      </span>
    </ng-template>
  </ng-template>
  <ng-template #tableHead>
    <th nzLeft="40px" style="width: 100px">配送单号</th>
    <th>收货日期</th>
    <th>状态</th>
    <th nzRight="0px">操作</th>
  </ng-template>
  <ng-template #tableBody let-data>
    <!-- 父页面自己的样式，不允许用行内样式，全都定义class写到css文件中，颜色、字号等属性用通用文件中的变量，不允许直接写颜色值 -->
    <td nzLeft="40px" style="width: 100px" class="common-billNumber"><a>{{ data.billNumber || '&lt;空&gt;' }}</a></td>
    <td>{{ data.distDate || '&lt;空&gt;' }}</td>
    <td>
      <hd-status [status]="'initial'">未审核</hd-status>
    </td>
    <td nzRight="0px" style="width: 200px">
      <span class="common-btn-group">
        <a>复制</a>
        <a>修改详情</a>
        <a>修改日期</a>
        <a class="common-danger-btn">删除</a>
      </span>
    </td>
  </ng-template>
</hd-current-table>

// 通用表格的相关变量
page: Page<any> = new Page<any>();
pageIndex = 1;
pageSize = 10;
loading: boolean = false;
tableSelectList: Array<any> = [];

// 表格的查询事件
search(reset: boolean = false): void {
  if (reset) {
    this.pageIndex = 1;
  }

  this.queryFilter.pageNumber = this.pageIndex - 1;
  this.queryFilter.pageSize = this.pageSize;

  this.loading = true;
  this.hdDemoService.queryDemo(this.queryFilter).subscribe(
    result => {
      this.loading = false;
      this.page = result;
    }, error => {
      this.loading = false;
    }
  );
}

/**
  * 表格的选择事件
  * @param selectList 勾选的所有的数据集合
  */
selectResult(selectList?: any) {
  // 拿到勾选的所有的数据
  // console.log('selectList', selectList);
  this.tableSelectList = selectList;
}

说明

注意点

• 如果发现tableSearchEvent绑定的函数当tablePageSize改变时会触发两次，请不要惊慌，这是ngzorro8.5.x版本的bug，不会影响使用体验，只会额外调用一次接口，浪费些性能。

4、筛选器(hd-filter)

效果图

示例

<hd-filter [filterList]="filterList" (searchEvent)="search(true, $event)"></hd-filter>

filterList: Array<Filter> = [];
filterListTemplate: Array<Filter> = [{
  type: FilterListType.Input,
  label: '配送单号',
  name: 'billNumberEq',
  value: '',
  onChangeEvent: (item) => {
    console.log('item', item);
  }
}, {
  type: FilterListType.Select,
  label: '单项选择器测试测',
  name: 'selectValue',
  value: true,
  selectOption: {
    value: 'value',
    label: 'label',
    selectList: [{
      value: true,
      label: '是是是是是是是是是是是是是是是是是是是是是是'
    }, {
      value: false,
      label: '否'
    }]
  },
  onChangeEvent: (item) => {
    console.log('item', item);
  }
}, {
  type: FilterListType.MultipleSelect,
  label: '多项选择器选择',
  name: 'multipleSelectValue',
  value: null,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'value',
    label: 'label',
    selectList: [{
      value: '01',
      label: '第一个第一个第一个第一个第一个'
    }, {
      value: '02',
      label: '第二个'
    }, {
      value: '03',
      label: '第三个'
    }, {
      value: '04',
      label: '第四个'
    }]
  }
}, {
  type: FilterListType.Select,
  label: '测试label',
  name: 'selectValue1',
  value: null,
  selectOption: {
    value: 'productCode',
    label: 'productName',
    showLabelAndValue: true,
    selectList: []
  },
  onSearchEvent: (item, selectOption) => {
    console.log('onSearchEvent', item);
    console.log('selectOption', selectOption);
    // 在这里去调接口查数据 定时器模拟调接口
    setTimeout(() => {
      selectOption.selectList = [{
        productCode: '123213213',
        productName: '测试商品1'
      }, {
        productCode: 'qwertyuiop',
        productName: '测试商品2'
      }]
    }, 1000);
  }
}, {
  type: FilterListType.Date,
  label: '单个日期选择',
  name: 'dateValue',
  value: '2020-1-2'
}, {
  type: FilterListType.DateRange,
  label: '日期范围选择',
  name: 'dateRangeValue',
  value: ['2020-1-2', '2020-1-2']
}];

// 查询、重置按钮触发函数
filterChange(filter?: any) {
  console.log('filter',filter);
  if (filter) {
    this.queryFilter = filter;
    // 因为更改了filter 需要清空所有的勾选 触发组件的重置事件
    this.hdCurrentTable.resetStatus();
    this.search(true);
  }
}

说明

Filter

SelectOption

注意点

• 事件函数如果内部语句过多，请使用bind（this）方法，示例：onChangeEvent: this.formInputChange.bind(this)

5、状态(hd-status)

效果图

示例

<hd-status status="initial">未审核</hd-status>
<hd-status status="audited">已审核</hd-status>
<hd-status status="picking">拣货中</hd-status>
<hd-status status="partshipped">部分收货</hd-status>
<hd-status status="received">已收货</hd-status>
<hd-status status="deleted">已删除</hd-status>
<hd-status status="shipped">已配送</hd-status>

说明

注意点

• state需要在hd-status.service.ts中的statusToColor添加值，选择对应的颜色

6、详情头(hd-detail-tip)

效果图

示例

<hd-detail-tip state="shipped" stateText="配送中" billNumber="202111030001"></hd-detail-tip>

说明

注意点

• state需要在hd-status.service.ts中的statusToColor添加值，选择对应的颜色

7、详情单头(hd-detail-form)

效果图

示例

<hd-detail-form [formCols]="formCols"></hd-detail-form>

// 详情页面单头组件数据
formCols: Array<HdOption> = [
  {
    label: '收货单号收货单号收货单号',
    value: '202111030001'
  },
  {
    label: '收货单号',
    value: '202111030001'
  },
  {
    label: '收货单号',
    value: '202111030001'
  },
  {
    label: '收货单号',
    value: ''
  },
  {
    label: '收货单号',
    value: '202111030001'
  },
  {
    label: '备注',
    value: '字数很多字数很多字数很多字数很多202111030001字数很多字数很多字数很多字数很多202111030001字数很多字数很多字数很多字数很多202111030001'
  },
];

说明

8、详情明细(hd-detail-lines)

效果图

示例

<hd-detail-lines [scroll]="{x: '1150px'}" selectField="uuid" (selectEvent)="selectResultLines($event)"
  [lines]="lines" showSelected columnsNumber="4" showTotal [totalOption]="detailLinesTotalOption">
  <ng-template #detailLineHead>
    <th style="width: 40px">序号</th>
    <th style="width: 150px">商品编码</th>
    <th>商品名称</th>
    <th style="width: 80px" nzRight="0">操作</th>
  </ng-template>
  <ng-template #detailLineBody let-data>
    <td style="width: 40px">{{ data.lineNumber || '&lt;空&gt;' }}</td>
    <td style="width: 150px">
      <span *ngIf="!modifyFlag;else modifyTmp">{{ data.productCode || '&lt;空&gt;'  }}</span>
      <ng-template #modifyTmp>
        <input nz-input placeholder="请输入商品编码" [(ngModel)]="data.productCode" />
      </ng-template>
    </td>
    <td>{{ data.productName || '&lt;空&gt;'  }}</td>
    <td style="width: 80px" nzRight="0">
      <span class="common-btn-group">
        <a>详情</a>
        <a class="common-danger-btn">删除</a>
      </span>
    </td>
  </ng-template>
</hd-detail-lines>

detailLinesTotalOption = [{
  insertIndex: 1,
  insertValue: 100
},{
  insertIndex: 2,
  insertValue: 200,
  align: 'right'
}]

/**
  * 明细的选择事件
  * @param selectList 勾选的所有的数据集合
  */
selectResultLines(selectList?: any) {
   // 拿到勾选的所有的数据
   // console.log('selectResultLines', selectList);
}

说明

TotalOption

9、表单(hd-form)

效果图

示例

<hd-form [formList]="formInput" (changeEvent)="formChangeEvent($event)"></hd-form>

validateHdForm: FormGroup;
formInput: Array<FormItem> = [{
  type: FormListType.Input,
  label: '配送单号',
  name: 'billNumberEq',
  require: true,
  width: 2,
  value: '',
  maxLength: 10,
  color: 'blue',
  // 事件传递的建议写法, 建议使用bind(this), 而不是箭头函数
  onChangeEvent: this.formInputChange.bind(this)
}, {
  type: FormListType.ViewDom,
  label: '学校',
  name: 'school',
  width: 2,
  value: '[T8888]测试用中学'
}, {
  type: FormListType.Select,
  label: '单项选择器选择',
  name: 'selectValue',
  value: 'qwer',
  require: true,
  defaultLabel: '组件外默认的选项',
  width: 2,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
    console.log('测试this', this);
    this.validateHdForm.get('qwer').setValue(true);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'value',
    label: 'label',
    showLabelAndValue: true, // 使用此配置，最后展示为[value]label
    selectList: [{
      value: true,
      label: '是'
    }, {
      value: false,
      label: '否'
    }]
  }
}, {
  type: FormListType.MultipleSelect,
  label: '多项选择器选择',
  name: 'multipleSelectValue',
  value: ['05', '06'],
  require: true,
  defaultLabel: ['第五个', '第六个'],
  width: 2,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'value',
    label: 'label',
    selectList: [{
      value: '01',
      label: '第一个'
    }, {
      value: '02',
      label: '第二个'
    }, {
      value: '03',
      label: '第三个'
    }, {
      value: '04',
      label: '第四个'
    }]
  }
}, {
  type: FormListType.Date,
  label: '单个日期选择选择',
  name: 'dateValue',
  width: 1,
  value: '2020-1-2'
}, {
  type: FormListType.DateRange,
  label: '日期范围选择',
  require: true,
  width: 1,
  name: 'dateRangeValue',
  value: ['2020-1-2', '2020-1-2']
}, {
  type: FormListType.InputNumber,
  label: '数字输入',
  require: true,
  width: 1,
  name: 'inputNumberValue',
  value: null,
  disabled: false,
  color: 'red'
}, {
  type: FormListType.TextArea,
  label: '备注',
  require: true,
  name: 'remark',
  width: 4,
  value: '这是个备注'
}];


/**
  * form组件值改变函数
  * @param validateForm form组件返回的表单对象
  */
formChangeEvent(validateForm: any) {
  this.validateHdForm = validateForm;
  // console.log('form组件返回',this.validateHdForm.getRawValue());
}

说明

TotalOption

InputNumber

SelectOption

10、明细表单(hd-form-lines)

效果图

示例

<hd-form-lines [formLines]="formLines" [operateButtons]="['delete']" showDeleteConfirm     			[formLinesData]="formLinesData" (changeEvent)="formLinesChangeEvent($event)"></hd-form-lines>

validateHdFormLines: FormGroup;
formLines: Array<FormLine> = [{
  type: FormLineType.Select,
  label: '商品',
  name: 'productCode',
  require: true,
  onChangeEvent: (item, line: FormGroup) => {
    // 列之间的交互赋值等等
    console.log('item', item);
    console.log('测试this', line);
    if (item) {
      line.get('productSpec').setValue(12);
      line.get('money').setValue(22);
    }
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
    // 在这里去调接口查数据
    this.formLines[0].selectOption.selectList = [{
      productCode: '03',
      productName: '第三个'
    }, {
      productCode: '04',
      productName: '第四个'
    }]
    console.log('formLines', this.formLines);
  },
  selectOption: {
    value: 'productCode',
    label: 'productName',
    showLabelAndValue: true,
    selectList: [{
      productCode: '01',
      productName: '第一个'
    }, {
      productCode: '02',
      productName: '第二个'
    }]
  }
},{
  type: FormLineType.MultipleSelect,
  label: '多项选择器选择',
  name: 'multipleSelectValue',
  require: true,
  onChangeEvent: (item) => {
    console.log('onChangeEvent', item);
  },
  onSearchEvent: (item) => {
    console.log('onSearchEvent', item);
  },
  selectOption: {
    value: 'multipleSelectValue',
    label: 'multipleSelectValueLabel',
    selectList: [{
      multipleSelectValue: '01',
      multipleSelectValueLabel: '第一个'
    }, {
      multipleSelectValue: '02',
      multipleSelectValueLabel: '第二个'
    }, {
      multipleSelectValue: '03',
      multipleSelectValueLabel: '第三个'
    }, {
      multipleSelectValue: '04',
      multipleSelectValueLabel: '第四个'
    }]
  }
}, {
  type: FormLineType.Input,
  label: '测试输入框',
  name: 'testInput',
  maxLength: 10,
  explainOption: {
    show: true,
    name: 'explain',
    color: 'red'
  },
  onChangeEvent: (item, line: FormGroup) => {
    // 这里利用隐藏属性 根据line里面的相关字段 去判断是否需要展示出来
    if(line.get('hideQuantity').value === 100 && item){
      line.get('explain').setValue('这是一个测试文案qaq');
    }else{
      line.get('explain').setValue('');
    }
  },
}, {
  type: FormLineType.InputNumber,
  label: '测试输入框1',
  name: 'testInput1',
  maxLength: 10,
  colorOption: {
    name: 'inputColor',
    color: 'red'
  },
  onChangeEvent: (item, line: FormGroup) => {
    // 这里利用隐藏属性 根据line里面的相关字段 去判断是否需要展示出来
    if(line.get('testInput1').value >= 50 && item){
      line.get('inputColor').setValue('red');
    }else{
      line.get('inputColor').setValue(null);
    }
  },
}, {
  type: FormLineType.ViewDom,
  label: '规格',
  name: 'productSpec'
}, {
  type: FormLineType.ViewDom,
  label: '金额',
  name: 'money',
  preserveNumber: 1
}, {
  type: FormLineType.ViewDom,
  label: '价格',
  align: 'right',
  name: 'price',
  preserveNumber: 2
}, {
  type: FormLineType.ViewDom,
  label: '数量',
  name: 'quantity'
}, {
  type: FormLineType.ViewDom,
  label: '隐藏数量',
  hide: true,
  name: 'hideQuantity'
}, {
  type: FormLineType.ViewDom,
  label: '隐藏的说明',
  hide: true,
  name: 'explain'
}, {
  type: FormLineType.ViewDom,
  label: '隐藏的颜色，用于表示',
  hide: true,
  name: 'inputColor'
}];

说明

TotalOption

ColorOption

ExplainOption

InputNumber

SelectOption

11、间隔(hd-space)

效果图(组件间的空白区域)

示例

<hd-space background="#fff" type="row" size="12"></hd-space>

说明

12、小标题(hd-tip)

效果图

示例

<hd-tip title="基本信息" [fontSize]="14"></hd-tip>
<hd-tip title="新增" [showIcon]="false" [fontSize]="16"></hd-tip>

说明

TODO

• 文档示例
• 更新记录