formList 联动实时校验

241 阅读1分钟
  const bkChange = (name, value) => {
    const bkTaskList = form.getFieldValue("bkTaskList");
    const bkTaskListValue = JSON.parse(JSON.stringify(bkTaskList));
    bkTaskListValue.map((i, index) => {
      i.time = bkTaskList?.[index]?.time;
    });
    if (value.indexOf(2) !== -1) {
      if (bkTaskListValue[name]) {
        bkTaskListValue[name].jobType = [value.pop()];
      }
    }
    form.setFieldsValue({
      bkTaskList: bkTaskListValue
    });
  };


  const cxChange = (name, value) => {
    const searchTaskList = form.getFieldValue("searchTaskList");
    const searchTaskListValue = JSON.parse(JSON.stringify(searchTaskList));
    searchTaskListValue.map((i, index) => {
      i.time = searchTaskList?.[index]?.time;
    });
    if (value.indexOf(5) !== -1) {
      if (searchTaskListValue[name]) {
        searchTaskListValue[name].jobType = [value.pop()];
      }
    }
    form.setFieldsValue({
      searchTaskList: searchTaskListValue,
    });
  };

  const changePlaceholder = (name, key) => {
    const jobType = form.getFieldValue(name)[key]?.jobType;
    if (name === 'searchTaskList') {
      if (jobType && jobType.indexOf(5) !== -1) {
        return "请输入群id(cid)";
      }
      return "填写查询群ID/查询个人ID";
    }
    if (name === 'bkTaskList') {
      if (jobType && jobType.indexOf(2) !== -1) {
        return "请输入群id(cid)";
      }
      return "填写查询群ID/查询个人ID";
    }

  };
  const pattern = (name, key) => (changePlaceholder(name, key) === "请输入群id(cid)" ? new RegExp(/^cid\d+(,cid\d+)*$/g) : null);

  // bk search 联动校验提示
  const validate = (formField, key) => {
    if (formField === 'bk') {
      form.getFieldValue(['bkTaskList', key, 'bkId']) && form.validateFields(['bkTaskList', key], { recursive: true })
    }
    if (formField === 'search') {
      form.getFieldValue(['searchTaskList', key, 'searchId']) && form.validateFields(['searchTaskList', key], { recursive: true })
    }
  }

  return (
    <>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 12 }}
        initialValues={{ remember: true }}
        onFinish={checkWhiteList}
      >
        <Row>
          <Col span={12}>
            <Form.Item
              label="文书ID"
              name="docName"
              {...formItemLayout}
              rules={[{ required: true, message: '请输入文书ID' },
              ]}
            >
              <Input placeholder="文书ID" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="文书名称"
              {...formItemLayout}
              name="jobName"
              rules={[{ required: true, message: '请输入文书名称' },
              ]}
            >
              <Input placeholder="文书名称" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="任务类型"
              name="jobType"
              {...formItemLayout}
              rules={[{ required: true, message: '任务类型' },
              ]}
            >
              <Select onChange={changeJobType} mode="multiple" allowClear placeholder="任务类型">
                <Option value="BK">BK</Option>
                <Option value="查询">查询</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        {form.getFieldValue('jobType')?.indexOf('BK') >= 0 &&
          <Form.List
            name="bkTaskList"
            initialValue={[{}]}
          >
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <div className="formListWrap">
                    <div className="formListItem">
                      <Form.Item
                        {...restField}
                        label={`布控任务配置-组 ${name + 1}`}
                        name={[name, 'jobType']}
                        {...formListLayout}
                        rules={[{ required: true, message: '请选择详细类型' }]}
                      >
                        <Select
                          allowClear
                          className="type"
                          placeholder="选择详细类型"
                          onChange={(value) => { bkChange(name, value); validate('bk', key) }}
                          mode="multiple"
                        >
                          <Option value={1}>私聊BK</Option>
                          <Option value={2}>群聊BK</Option>
                          <Option value={3}>手机号群聊BK</Option>
                        </Select>
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'bkId']}
                        rules={[{
                          required: true,
                          message: changePlaceholder('bkTaskList', key),
                          pattern: pattern('bkTaskList', key)
                        }]}
                      >
                        <Input.TextArea autoSize={{ minRows: 2, maxRows: 10 }} placeholder={changePlaceholder('bkTaskList', key)} className="searchId" />
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'time']}
                        rules={[{ required: true, message: '请选择日期' }]}
                        initialValue={moment().add(30, "day")}
                      >
                        <DatePicker
                          format="YYYY-MM-DD HH:mm:ss"
                          disabledDate={disabledDateB}
                          showNow={false}
                          className="time"
                          placeholder='结束时间'
                        />
                      </Form.Item>
                    </div>
                    {(name !== 0) && <DeleteTwoTone twoToneColor="red" className="delIcon" onClick={() => remove(name)} />}
                  </div>
                ))}
                <div className="add">
                  <span onClick={() => add()}>新增一组布控配置</span>
                </div>
              </>
            )}
          </Form.List>}
        {form.getFieldValue('jobType')?.indexOf('查询') >= 0 &&
          <Form.List
            name="searchTaskList"
            initialValue={[{}]}
          >
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <div className="formListWrap">
                    <div className="formListItem">
                      <Form.Item
                        {...restField}
                        label={`查询任务配置-组 ${name + 1}`}
                        name={[name, 'jobType']}
                        {...formListLayout}
                        rules={[{ required: true, message: '请选择详细类型' }]}
                      >
                        <Select
                          allowClear
                          placeholder="选择详细类型"
                          className="type"
                          mode="multiple"
                          onChange={(value) => { cxChange(name, value); validate('search', key) }}
                        >
                          <Option value={1} >注册</Option>
                          <Option value={2} >登录</Option>
                          <Option value={3} >好友</Option>
                          <Option value={4} >账号加入群</Option>
                          <Option value={5} >群成员</Option>
                        </Select>
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'searchId']}
                        rules={[{
                          required: true,
                          message: changePlaceholder('searchTaskList', key),
                          pattern: pattern('searchTaskList', key)
                        }]}
                      >
                        <Input.TextArea autoSize={{ minRows: 2, maxRows: 10 }} placeholder={changePlaceholder('searchTaskList', key)} className="searchId" />
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'time']}
                        rules={[{ required: true, message: '请选择日期' }]}
                        initialValue={[
                          moment(moment().startOf('d'), 'YYYY/MM/DD HH:mm:ss'),
                          moment(moment().endOf('d'), 'YYYY/MM/DD HH:mm:ss'),
                        ]}
                      >
                        <RangePicker
                          disabledDate={disabledDate}
                          showTime={{
                            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]
                          }}
                          className="time"
                        />
                      </Form.Item>
                    </div>
                    {(name !== 0) && <DeleteTwoTone twoToneColor="red" className="delIcon" onClick={() => remove(name)} />}
                  </div>

                ))}
                <div className="add">
                  <span onClick={() => add()}>新增一组查询配置</span>
                </div>
              </>
            )}
          </Form.List>}
        <Row>
          <Col span={24}>
            <Form.Item
              name="docContent"
              label="文书内容"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 20 }}
              rules={[{ required: true, message: '任务类型' }]}
            >
              <Input.TextArea placeholder="文书内容" />
            </Form.Item>
            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 10 }} className="but">
              <Space>
                <Button type="primary" htmlType="submit">
                  创建
                </Button>
                <Button type="primary" onClick={cancle}>
                  取消
                </Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </>
  );