TableSelect.js 5.8 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import React from 'react'
import { Tree, Upload, Icon, Button, message, Span, Modal, Tag, Table } from 'antd';
import FormList from './formList/index';

const TreeNode = Tree.TreeNode;


import { connect } from 'dva';
@connect(({ DataColumn, SqlManageEntity, loading }) => ({
  DataColumn, SqlManageEntity,
  loading: loading.models.DataColumn || loading.models.SqlManageEntity
}))
export default class TableSelect extends React.Component {
  constructor(props) {
    super(props)
    const value = props.value || {};
wanyielin's avatar
wanyielin committed
17

徐立's avatar
徐立 committed
18
    this.state = {
wanyielin's avatar
wanyielin committed
19 20 21 22
      selects: value.selects || {},
      visiable: value.visiable,
      isAll: value.isAll != null ? value.isAll : false,
      querys: value.querys || [],
徐立's avatar
徐立 committed
23 24 25 26 27 28 29 30
      sql: value.sql,
    }
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
wanyielin's avatar
wanyielin committed
31
      console.log("changedValue", changedValue)
徐立's avatar
徐立 committed
32 33 34 35 36 37 38
      onChange(Object.assign({}, this.state, changedValue));
    }
  }
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
wanyielin's avatar
wanyielin committed
39 40

      if (value != null && value instanceof Object) {
徐立's avatar
徐立 committed
41 42 43 44 45 46
        this.setState(value);
      }
      //
    }
  }
  remove = (rowKey) => {
wanyielin's avatar
wanyielin committed
47
    console.log(rowKey)
徐立's avatar
徐立 committed
48 49
    const { selects } = this.state
    delete selects[rowKey]
wanyielin's avatar
wanyielin committed
50
    console.log(selects)
徐立's avatar
徐立 committed
51 52 53
    if (!('value' in this.props)) {
      this.setState({ selects });
    }
wanyielin's avatar
wanyielin committed
54
    this.triggerChange({ selects });
徐立's avatar
徐立 committed
55
  }
wanyielin's avatar
wanyielin committed
56

徐立's avatar
徐立 committed
57
  select = (obj) => {
wanyielin's avatar
wanyielin committed
58 59
    var { selects } = this.state
    const { json: { isMultiple, optionType } } = this.props
徐立's avatar
徐立 committed
60
    let valueName = this.props.json.valueName
wanyielin's avatar
wanyielin committed
61 62 63 64

    if (optionType == "reference" && this.props.dataColumn.referenceObjId) {
      valueName = this.props.dataColumn.referenceCodeName

徐立's avatar
徐立 committed
65
    }
wanyielin's avatar
wanyielin committed
66

徐立's avatar
徐立 committed
67 68 69 70 71 72
    const kk = obj[valueName]
    if (kk == null) {
      message.error("指定的取值字段不存在或者值为空")
      return
    }
    if (!isMultiple) {
wanyielin's avatar
wanyielin committed
73
      selects = { [kk]: { ...obj, selectKey: kk } }
徐立's avatar
徐立 committed
74 75
    } else {
      selects[kk] = obj;
wanyielin's avatar
wanyielin committed
76
      selects[kk].selectKey = kk
徐立's avatar
徐立 committed
77 78 79 80 81
    }

    if (!('value' in this.props)) {
      this.setState({ selects });
    }
wanyielin's avatar
wanyielin committed
82
    this.triggerChange({ selects });
徐立's avatar
徐立 committed
83 84 85 86 87 88 89 90 91 92 93 94






  }
  close = (i) => {
    var { values, labels } = this.state
    values.splice(i, 1)
    labels.splice(i, 1)
    if (!('value' in this.props)) {
wanyielin's avatar
wanyielin committed
95
      this.setState({ values, labels });
徐立's avatar
徐立 committed
96 97 98
    }
    this.triggerChange({ values, labels });

wanyielin's avatar
wanyielin committed
99

徐立's avatar
徐立 committed
100 101 102

  }
  open = () => {
wanyielin's avatar
wanyielin committed
103

徐立's avatar
徐立 committed
104
    if (!('value' in this.props)) {
wanyielin's avatar
wanyielin committed
105
      this.setState({ visiable: true });
徐立's avatar
徐立 committed
106 107 108 109 110 111
    }
    this.triggerChange({ visiable: true });

  }
  closeModal = () => {
    if (!('value' in this.props)) {
wanyielin's avatar
wanyielin committed
112
      this.setState({ visiable: false });
徐立's avatar
徐立 committed
113 114 115 116 117 118
    }
    this.triggerChange({ visiable: false });

  }

  render() {
wanyielin's avatar
wanyielin committed
119 120 121 122 123
    const { json: { isMultiple, sql, optionType, showTable }, dataColumn: { referenceObjId }, sqlModel, columns, dataSource } = this.props
    let { valueName, labelName } = this.props.json
    if (optionType == "reference" && referenceObjId) {
      valueName = this.props.dataColumn.referenceCodeName
      labelName = this.props.dataColumn.referenceNameName
徐立's avatar
徐立 committed
124 125 126 127 128 129 130
    }



    if (valueName == null || valueName == "") {
      return <>请指定取值的列名</>
    }
wanyielin's avatar
wanyielin committed
131
    const { selects, visiable, labels } = this.state
徐立's avatar
徐立 committed
132 133 134



wanyielin's avatar
wanyielin committed
135 136
    const keys = []
    for (let i in selects) {
徐立's avatar
徐立 committed
137 138 139 140
      keys.push(selects[i][valueName])
    }


wanyielin's avatar
wanyielin committed
141 142 143
    const columns2 = [...columns, {
      title: "操作",
      render: (val, record) => <a onClick={this.remove.bind(this, record.selectKey)}>移除</a>
徐立's avatar
徐立 committed
144
    }]
wanyielin's avatar
wanyielin committed
145 146 147 148
    const columns3 = [...columns, {
      title: "操作",
      render: (val, record) =>
        keys.includes(record[valueName]) ? <span>已选择</span> : <a onClick={this.select.bind(this, record)}>选择</a>
徐立's avatar
徐立 committed
149
    }]
wanyielin's avatar
wanyielin committed
150 151 152 153 154 155
    const custom = {
      isAll: this.state.isAll,
      querys: this.state.querys,
      sql: this.state.sql,
    }
    // console.log(columns3)
徐立's avatar
徐立 committed
156
    let allWidth = 0
wanyielin's avatar
wanyielin committed
157 158 159
    if (columns3) {
      columns3.map((item, index) => {
        if (index === columns3.length - 1) {
徐立's avatar
徐立 committed
160 161 162 163 164
          item.fixed = 'right'
          item.width = 50
          allWidth += 50
          return item
        }
wanyielin's avatar
wanyielin committed
165
        if (index === columns3.length - 2) {
徐立's avatar
徐立 committed
166 167
          allWidth += 150
        } else {
wanyielin's avatar
wanyielin committed
168
          if (item.width) {
徐立's avatar
徐立 committed
169 170 171 172 173 174 175 176 177
            allWidth += item.width
          } else {
            item.width = 180
            allWidth += 180
          }
        }
        return item
      })
    }
徐立's avatar
徐立 committed
178 179
    return (
      <div>
wanyielin's avatar
wanyielin committed
180 181 182
        {Object.keys(selects).length > 0 ?
          showTable ? <Table rowKey={valueName} size="small" dataSource={Object.values(selects)} columns={columns2} pagination={false} /> :
            Object.keys(selects).map((k) => <Tag key={k} closable onClose={this.remove.bind(this, k)}>{selects[k][labelName]}</Tag>)
徐立's avatar
徐立 committed
183 184 185 186 187 188
          : ""
        }


        <Button type="primary" onClick={this.open}>选择</Button>
        <Modal
徐立's avatar
徐立 committed
189
          width={this.props.get==='mobile'?"100%":"60%"}
徐立's avatar
徐立 committed
190 191 192 193 194 195 196 197
          maskClosable={false}
          title={`请选择`}
          visible={visiable}
          onOk={this.closeModal}
          onCancel={this.closeModal}
        >

          {optionType == "reference" ? referenceObjId ?
wanyielin's avatar
wanyielin committed
198 199
            <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={referenceObjId} isFormCom={true} isSelect={true} selects={keys} valueName={valueName} callback={this.select} sql={sql} />
            : "未关联数据对象"
徐立's avatar
徐立 committed
200
            : sqlModel.dataObjId ?
wanyielin's avatar
wanyielin committed
201
              <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={sqlModel.dataObjId} isFormCom={true} isSelect={true} selects={keys} valueName={valueName} callback={this.select} sql={sql} />
徐立's avatar
徐立 committed
202
              : <Table rowKey={valueName} size="small" dataSource={dataSource.list} columns={columns3} scroll={{ x: allWidth }} />}
徐立's avatar
徐立 committed
203 204 205 206 207 208 209
        </Modal>
      </div>

    );

  }
}