Blame view

src/Table/Table.js 3.12 KB
3a3ecabe   Imshann   init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
  import template from "./Table.html";
  import style from "antd/lib/table/style/index.css";
  
  class Table {
      useModules = ["esNgAntd"];
  
      props = {
          columns: Array,
          dSource: Array,
          rowSelection: Object,
          rowKey: String,
          loading: Number,
      };
  
      state = {
          dataSource: [],
          selectedrecordKeys: [],
          selectedrecords: [],
          isSelectAll: false,
          rowKey: this.props.rowKey || "id",
      };
  
      template = template;
  
      watch = {
          dSource: (newValue) => {
              if (newValue !== undefined) {
                  let dataSource = [];
                  newValue.forEach((record, index) => {
                      let row = {};
                      if (this.props.rowSelection) {
                          row.checked = false;
                          row.disabled = false;
                      }
                      if (this.props.rowSelection && typeof this.props.rowSelection.getCheckboxProps === "function") {
                          let extraAttr = this.props.rowSelection.getCheckboxProps(record);
                          row = Object.assign(row, extraAttr);
                      }
                      this.props.columns.forEach((column) => {
                          row[column.key] = column.render ? column.render(record[column.key], record, index) : record[column.key];
                      });
                      // 主键
                      if (this.props.rowKey !== undefined) {
                          row[this.state.rowKey] = record[this.state.rowKey];
                      } else {
                          row[this.state.rowKey] = index + 1;
                      }
                      dataSource[index] = row;
                  });
                  this.state.dataSource = dataSource;
              }
          },
      };
  
      constructor() {
          esNgAntd.createStyle("ant-table", style);
      }
  
      handleSelectAll(event) {
          this.state.isSelectAll = event.target.checked;
          this.state.selectedrecordKeys = [];
          this.state.selectedrecords = [];
          this.state.dataSource.map((record, key) => {
              if (record.disabled === false) {
                  record.checked = event.target.checked;
              }
              if (record.checked) {
                  this.state.selectedrecordKeys.push(key);
                  this.state.selectedrecords.push(this.props.dSource[key]);
              }
              return record;
          });
          this.props.rowSelection.onChange(this.state.selectedrecordKeys, this.state.selectedrecords);
      }
  
      handleSelect(event, index) {
          let pos = this.state.selectedrecordKeys.findIndex((value) => value === index);
          if (event.target.checked && pos === -1) {
              this.state.selectedrecordKeys.push(index);
              this.state.selectedrecords.push(this.props.dSource[index]);
          } else {
              this.state.selectedrecordKeys.splice(pos, 1);
              this.state.selectedrecords.splice(pos, 1);
          }
          if (this.state.selectedrecordKeys.length === 0) {
              this.state.isSelectAll = false;
          }
          this.props.rowSelection.onChange(this.state.selectedrecordKeys, this.state.selectedrecords);
      }
  }