feat: 对接流程

zhangyongtian

2024-09-13 899e81654c9389785d58f9dbdf2ea7d2b2bc9082

 gz-customerSystem/src/views/register/matterDetail/UniteHandle.jsx

@@ -1,30 +1,28 @@
import React, { useState, useRef } from 'react';
import { Form, Input, Tabs, Typography, Button, Modal, Select } from '@arco-design/web-react';
import { Col, Space, Row, Tooltip } from 'antd';
import { Form, Input, Button, Modal, Select, Tooltip } from '@arco-design/web-react';
import { Col, Row } from 'antd';
import ArcoUpload from '@/components/ArcoUpload';
import * as $$ from '@/utils/utility';
import { question1, } from '@/assets/images';
import SelectObjModal from '@/components/SelectObjModal/selectPerson';

const FormItem = Form.Item;
const Option = Select.Option;
const appUrl = $$.appUrl;

function delFile(id) {
  return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
}

function postAssistApply(data) {
  return $$.ax.request({ url: `caseAssistApply/addCaseAssistApply`, type: 'post', service: 'mediate', data });
}

const UniteHandle = ({ id, visible, handleOnCancel }) => {

const UniteHandle = ({ id, visible, handleOnCancel, caseId, caseTaskId }) => {
  const formRef = useRef();
  const [supervising, setSupervising] = useState(false);
  const [fileVisible, setFileVisible] = useState(false);

  const options = [
    { value: '1', label: '一' }, { value: '2', label: '二' }, { value: '3', label: '三' }
  ];



  const [isModalVisible, setIsModalVisible] = useState(false);
  const [wantUser, setWantUser] = useState([]);
  const [selectOptions, setSelectOptions] = useState([]);//部门选择的options

  //删除文件
  const handleDelFile = async (id) => {
@@ -35,84 +33,125 @@
  }

  const handleSupervising = () => {
    setSupervising(!supervising)
    formRef.current.validate(undefined, (errors, values) => {
      if (!errors) {
        handleJoint({
          id,
          caseId,
          applyContent: values.applyContent,
          applyAssistUnitId: wantUser?.map(item => item.value).join(',') || '',
          applyAssistUnitName: wantUser?.map(item => item.name).join(',') || '',
        })
      }
    })
  }

  //form数据同步要提交的数据
  const handleSync = (value) => {
    let newList = wantUser.filter(item => value.indexOf(item.value) != -1)
    setWantUser(newList);
  }

  //联合处置请求
  const handleJoint = async (data) => {
    const res = await postAssistApply(data)
    if (res.type) {
      $$.infoSuccess({ content: '提交申请成功！' });
      handleOnCancel();
    }
  }

  return (
    <>
      <Modal visible={visible} onCancel={handleOnCancel} title='联合处置申请' centered footer={null}>
        <Form
          ref={formRef}
          layout='vertical'
          requiredSymbol={false}
          scrollToFirstError={true}
          initialValues={{
            suggestion: ''
          }}//默认值
        >
          <Row>
            <Col span={24}>
              <FormItem
                label={<div style={{ display: 'flex' }}><div>添加配合部门</div><div style={{ color: '#86909C' }}>（可多选）</div></div>}
                field=''
    <Modal
      visible={visible}
      onCancel={handleOnCancel}
      title='联合处置申请'
      centered
      footer={null}
      unmountOnExit={true}
      maskClosable={false}
      autoFocus={false}
      focusLock={false}
    >
      <Form
        ref={formRef}
        layout='vertical'
        requiredSymbol={false}
        scrollToFirstError={true}
        initialValues={{
          applyContent: '在事项办理过程中：\n因[......业务]涉及白云区新市街司法所\n因[......业务]涉及白云区新市街劳监大队\n特申请将上述部门列为配合部门，请审批'
        }}//默认值
      >
        <Row>
          <Col span={24}>
            <FormItem
              label={<div style={{ display: 'flex' }}><div>添加配合部门</div><div style={{ color: '#86909C' }}>（可多选）</div></div>}
              field='unit'
            >
              <Select
                mode='multiple'
                placeholder='请选择配合部门'
                allowClear
                onFocus={(e) => {
                  e.stopPropagation()
                  setIsModalVisible(true)
                }}
                options={selectOptions}
                onChange={handleSync}
              >
                <Select
                  mode='multiple'
                  placeholder='请选择督办部门'
                  style={{}}
                  allowClear
                >
                  {options.map((option) => (
                    <Option key={option.value} value={option.value} onChange={(v) => console.log(v, 'vvvvvv')}>
                      {option.label}
                    </Option>
                  ))}
                </Select>
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                field='suggestion'
                label={(<div style={{ display: 'flex' }}>添加理由<div className="must">必填</div></div>)}
              >
                <Input.TextArea
                  rows={5}
                  wrapperStyle={{ width: '700px' }}
                  value='在事项办理过程中：因[......业务]涉及白云区新市街司法所因[......业务]涉及白云区新市街劳监大队特申请将上述部门列为配合部门，请审批'
                />
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem
                label={
                  <div>
                    附件材料
                    <Tooltip onClick={() => setFileVisible(true)}>
                      <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '-3px 4px 0px 4px' }} />
                    </Tooltip>
                  </div>
                }
                field='caseDes'
                rules={[{ message: '请填写事项概况', required: true }]}
              >
                <ArcoUpload
                  params={{
                    action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId='24083010062110001'&&ownerId=${id}&ownerType=22_00018-508`,
                  }}
                  field='file1'
                  // handleChangeFile={handleChangeFile}
                  label=''
                  // editData={props.editData}
                  handleDelFile={handleDelFile}
                />
              </FormItem>
            </Col>
            <Button type='primary' style={{ marginTop: '-16px' }} onClick={() => handleSupervising()}>提交申请</Button>
          </Row>
        </Form>
      </Modal>
    </>
              </Select>
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem
              field='applyContent'
              label={(<div style={{ display: 'flex' }}>添加理由<div className="must">必填</div></div>)}
              rules={[{ required: true, message: '请输入添加理由' }]}
            >
              <Input.TextArea
                rows={5}
              />
            </FormItem>
          </Col>
          <Col span={24}>
            <ArcoUpload
              params={{
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&&ownerId=${id}&ownerType=22_00018-508`,
              }}
              field='file'
              label={
                <div>
                  附件材料
                  <Tooltip>
                    <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '-3px 4px 0px 4px' }} />
                  </Tooltip>
                </div>
              }
              handleDelFile={handleDelFile}
            />
          </Col>
          <div className='dialogFooter'>
            <Button type='primary' style={{ marginTop: '-16px' }} onClick={handleSupervising}>提交申请</Button>
          </div>
        </Row>
      </Form>
      <SelectObjModal
        visible={isModalVisible}
        checkKeys={wantUser}
        onOk={(value) => {
          console.log(value);
          setWantUser(value.items)
          setSelectOptions(value.items.map(item => ({
            label: item.name,
            value: item.value
          })))
          formRef.current.setFieldValue('unit', value.items.map(item => item.value))
        }}
        onClose={() => setIsModalVisible(false)}
        type='dept'
        isCheckbox={true}
      />
    </Modal>
  )
}