ChildForm.jsx 10.0 KB
Newer Older
徐立's avatar
徐立 committed
1
import React from 'react';
2
import { Button, Row, Col, message } from 'antd';
徐立's avatar
徐立 committed
3
import ZdyTable from '../Table';
4 5
import { getOrderUid } from './splitChildForm';
import { Card } from 'antd-mobile';
徐立's avatar
徐立 committed
6

7 8 9 10 11 12 13 14 15

const sortKeys = (a = '', b = '') => {
  if (a && b && typeof a === 'string' && typeof b === 'string' && a.length > 13 && b.length > 13) {
    return Number(a.slice(0, 13)) - Number(b.slice(0, 13));
  } else {
    return 0;
  }
};

徐立's avatar
徐立 committed
16
export default class ChildForm extends React.Component {
17 18 19
  constructor(props) {
    super(props);
    const value = props.value || {};
徐立's avatar
徐立 committed
20

21 22
    this.state = value;
  }
23

24
  triggerChange = (changedValue) => {
25 26
    const onChange = this.props.onChange;
    if (onChange) {
27 28 29 30 31 32 33
      onChange(changedValue);
      // if (changedValue && typeof changedValue === 'object' && !Object.keys(changedValue).length) {
      //   onChange(changedValue);
      //   // onChange(null);
      // } else {
      //   onChange(changedValue);
      // }
34 35
    }
  };
36

37 38 39 40 41 42
  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.state = value;
    }
  }
钟是志's avatar
钟是志 committed
43

44 45 46 47 48 49
  componentDidMount = () => {
    if (Object.keys(this.state).length == 0 && this.props.isEdit) {
      if (this.props.num != null && this.props.num > 0) {
        const objs = this.state;
        if (this.props.min != null && this.props.min > this.props.num) {
          for (var i = 0; i < this.props.min; i++) {
50
            objs[getOrderUid()] = {};
51 52 53
          }
        } else {
          for (var i = 0; i < this.props.num; i++) {
54
            objs[getOrderUid()] = {};
55 56
          }
        }
57

58 59 60 61 62 63 64
        if (!('value' in this.props)) {
          this.setState(objs);
        }
        this.triggerChange(objs);
      }
    }
  };
65
  delete = (uuid) => {
66 67 68 69 70 71 72 73
    const objs = this.state;
    const {
      json: { numCode },
      form,
      base52,
    } = this.props;
    if (this.props.min != null && Object.keys(objs).length - 1 < this.props.min) {
      message.error('不能小于最小限制');
74

75 76 77 78 79
      return;
    }
    const x = form.getFieldsValue()[base52];
    delete x[uuid];
    delete x[''];
徐立's avatar
徐立 committed
80

81 82 83 84
    if (!('value' in this.props)) {
      this.state = x;
    }
    this.triggerChange(x);
钟是志's avatar
钟是志 committed
85

86 87 88 89 90 91 92 93 94 95 96 97 98
    if (numCode != null) {
      this.props.form.setFieldsValue({ [numCode]: Object.keys(objs).length });
    }
  };
  add = () => {
    const objs = this.state;
    const {
      json: { numCode },
      form,
      base52,
    } = this.props;
    if (this.props.max != null && Object.keys(objs).length + 1 > this.props.max) {
      message.error('不能大于最大限制');
徐立's avatar
徐立 committed
99

100 101
      return;
    }
102
    objs[getOrderUid()] = {};
徐立's avatar
徐立 committed
103

104 105 106 107 108 109 110 111
    if (!('value' in this.props)) {
      this.setState(objs);
    }
    this.triggerChange(objs);
    if (numCode != null) {
      this.props.form.setFieldsValue({ [numCode]: Object.keys(objs).length });
    }
  };
钟是志's avatar
钟是志 committed
112

113 114
  render() {
    const objs = this.state;
钟是志's avatar
钟是志 committed
115
    // console.log(objs);
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
    const {
      form,
      mapData,
      sqlData,
      defaultValues,
      datas,
      base52,
      isEdit: isEditProps,
      addName,
      deleteName,
      obj,
      isMobile,
      json,
      modalInit,
      isPreview,
      hfInstance,
      getCurrentFormTitle,
      getCellValue,
      taskId,
135
      datasAll,
136
    } = this.props;
徐立's avatar
徐立 committed
137

138 139 140 141 142 143 144 145
    const span = json.span || 24;
    const gutter = json.gutter != null ? json.gutter : 0;
    const rights = this.props.rights;
    const { disabled } = json;
    const isEdit = !disabled && isEditProps; // 29128 北电]资助-新生入学资助管理-批次设置,2张图2问题不要详情改编辑只能修改是否启用
    if (datas == null) {
      return <div>还没有配置子表单key</div>;
    }
146

147 148
    if (!objs) {
      return null;
149 150
    }

151
    if (isMobile) {
152 153
      return (
        // 2022年11月24日 姚新国说的 把干掉两翼留白 解决北电科工作情况考核 移动端样式的问题
154
        <div>
155
          {Object.keys(objs).length >= 1 || rights.includes('add') ? (
156 157
            <Card>
              <Card.Body style={{ minHeight: 10 }}>
158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
                {Object.keys(objs)
                  .sort((a, b) => {
                    return sortKeys(a,b);
                  })
                  .map((r) => {
                    if (r == '') {
                      return '';
                    }
                    return (
                      <Row key={r} gutter={gutter}>
                        <Col
                          style={{
                            zIndex: 55,
                          }}
                          span={isEdit ? 24 : span}>
                          <ZdyTable
                            changedValues={this.props.changedValues}
                            setRealTimeValues={this.props.setRealTimeValues}
                            trees={this.props.trees}
                            key={r}
                            taskId={taskId}
                            modalInit={modalInit}
                            hfInstance={hfInstance}
                            currentFormTitle={
                              getCurrentFormTitle ? getCurrentFormTitle(json.childFormKey) : null
                            }
                            getCellValue={getCellValue}
                            formCode={this.props.formCode}
                            formId={this.props.formId}
                            isPreview={isPreview}
                            currentFormKey={json.childFormKey}
                            formConfig={datas}
                            get="mobile"
                            fatherCode={base52}
                            isEdit={isEdit}
                            index={r}
                            obj={objs[r]}
                            fatherObj={this.props.fatherObj}
                            init={objs}
                            isChild={true}
                            form={form}
                            mapData={mapData}
                            sqlData={sqlData}
                            datas={datasAll}
                            {...datas}
                            defaultValues={defaultValues}
                          />
205
                        </Col>
206 207 208 209 210 211 212 213 214 215 216 217
                        {rights.includes('delete') && isEdit ? (
                          <Col style={{ textAlign: 'right' }}>
                            <Button type="danger" size="small" onClick={this.delete.bind(this, r)}>
                              {deleteName || '删除'}{' '}
                            </Button>{' '}
                          </Col>
                        ) : (
                          ''
                        )}
                      </Row>
                    );
                  })}
徐立's avatar
徐立 committed
218

219 220 221 222 223 224 225
                {rights.includes('add') && isEdit ? (
                  <Row>
                    <Col style={{ textAlign: 'center' }}>
                      <Button
                        type="primary"
                        size="small"
                        style={{ margin: 'auto' }}
226
                        onClick={this.add}>
227 228 229 230 231 232 233 234 235 236 237 238
                        {addName || '新增'}
                      </Button>{' '}
                    </Col>
                  </Row>
                ) : (
                  ''
                )}
              </Card.Body>
            </Card>
          ) : (
            ''
          )}
239
        </div>
240 241
      );
    }
钟是志's avatar
钟是志 committed
242

243 244 245 246 247 248
    /***
     * 子表单
     * */
    return (
      <div style={{ width: '100%' }}>
        <Row gutter={gutter}>
249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
          {Object.keys(objs)
            .sort((a, b) => {
              return sortKeys(a,b);
            })
            .map((r) => {
              if (r == '') {
                return '';
              }
              return (
                <Col span={span} key={r}>
                  <ZdyTable
                    changedValues={this.props.changedValues}
                    taskId={taskId}
                    setRealTimeValues={this.props.setRealTimeValues}
                    modalInit={modalInit}
                    hfInstance={hfInstance}
                    currentFormTitle={
                      getCurrentFormTitle ? getCurrentFormTitle(json.childFormKey) : null
                    }
                    getCellValue={getCellValue}
                    formConfig={datas}
                    key={r}
                    fatherCode={base52}
                    isEdit={isEdit}
                    index={r}
                    isPreview={isPreview}
                    obj={objs[r]}
                    currentFormKey={json.childFormKey}
                    formCode={this.props.formCode}
                    formId={this.props.formId}
                    fatherObj={this.props.fatherObj}
                    init={objs}
                    isChild={true}
                    get="web"
                    form={form}
                    mapData={mapData}
                    sqlData={sqlData}
                    datas={datasAll}
                    {...datas}
                    defaultValues={defaultValues}
                  />
徐立's avatar
徐立 committed
290

291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314
                  {rights.includes('delete') && isEdit ? (
                    <Button
                      size="small"
                      style={{
                        position: 'absolute',
                        left: ' 95%',
                        top: '10px',
                        transform: 'translateY(-50%)',
                        borderRadius: '50%',
                        height: '13px',
                        width: '13px',
                        padding: 0,
                        lineHeight: '10px',
                      }}
                      type="danger"
                      onClick={this.delete.bind(this, r)}>
                      {deleteName || '-'}
                    </Button>
                  ) : (
                    ''
                  )}
                </Col>
              );
            })}
315 316 317 318 319 320 321 322 323 324 325 326 327 328 329
        </Row>
        {rights.includes('add') && isEdit ? (
          <Row>
            <Col span={24} style={{ textAlign: 'center' }}>
              <Button style={{ margin: 'auto' }} type="primary" onClick={this.add} size="small">
                {addName || '新增'}
              </Button>
            </Col>{' '}
          </Row>
        ) : (
          ''
        )}
      </div>
    );
  }
徐立's avatar
徐立 committed
330
}