广州市综治平台前端
liuwh
5 days ago bd4e6eb3d29de84c00f5e448f5839300873a6abe
src/views/comprehensive/index.jsx
@@ -1,4 +1,3 @@
import React, { useRef, useEffect, useState } from 'react';
import NewPage from '../../components/NewPage/index';
import { Form, Typography, Space, Tooltip } from 'antd';
@@ -7,7 +6,7 @@
import TableView from '../../components/TableViewCanSort';
import NewTableSearch from '../../components/NewTableSearch';
import SelectObjModal from '@/components/SelectObjModal/newSelectPerson';
import './index.less'
import './index.less';
const { Link } = Typography;
// 获取数据
@@ -19,7 +18,6 @@
function treeByUserIdApi(submitData) {
  return $$.ax.request({ url: 'syRegion/treeByUserId', type: 'get', data: submitData, service: 'sys' });
}
const Comprehensive = () => {
  const [form] = Form.useForm();
@@ -42,25 +40,29 @@
  // 承办配合部门select框数据
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectObjModalData, setSelectObjModalData] = useState({})
   const [selectObjModalData, setSelectObjModalData] = useState({});
  // 选择部门弹窗
  function onChange(key) {
    if (key === 'mediateUnitId') {
      setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' })
         setSelectObjModalData({ ...selectObjModalData, key, title: '承办部门' });
    } else if (key === 'assistUnitId') {
      setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' })
         setSelectObjModalData({ ...selectObjModalData, key, title: '配合部门' });
    } else {
      setSelectObjModalData({ ...selectObjModalData, key, type: 'person', title: '经办人' })
         setSelectObjModalData({ ...selectObjModalData, key, type: 'person', title: '经办人' });
    }
    setIsModalVisible(true)
      setIsModalVisible(true);
  }
  // 表头
  const columns = () => {
    const columnsData = [
      {
        title: '登记时间', width: 140, dataIndex: 'createTime', defaultSortOrder: 'descend', order: 'ascend',
            title: '登记时间',
            width: 140,
            dataIndex: 'createTime',
            defaultSortOrder: 'descend',
            order: 'ascend',
        sorter: { compare: (a, b) => { } },          
        render: (text, record, index) => {
          return (
@@ -80,23 +82,51 @@
      { title: '配合部门', width: 120, dataIndex: 'assistUnitName' },
      { title: '事项状态', width: 100, dataIndex: 'statusName' },
      {
        title: '办结时间', width: 100, dataIndex: 'closeTime', order: 'ascend',
        sorter: { compare: (a, b) => { } }, render: (text) => <span>{$$.dateFormat(text)}</span>
            title: '办结时间',
            width: 100,
            dataIndex: 'closeTime',
            order: 'ascend',
            sorter: { compare: (a, b) => {} },
            render: (text) => <span>{$$.dateFormat(text)}</span>,
      },
      {
        title: '化解结果', width: 100, dataIndex: 'mediResult', render: (text) => <div className={text === '22_00025-1' ? 'comprehensive-green' : text === '22_00025-2' ? 'comprehensive-red' : '-'} >{text === '22_00025-1' ? '化解成功' : text === '22_00025-2' ? '化解不成功' : '-'}</div>
            title: '化解结果',
            width: 100,
            dataIndex: 'mediResult',
            render: (text) => (
               <div className={text === '22_00025-1' ? 'comprehensive-green' : text === '22_00025-2' ? 'comprehensive-red' : '-'}>
                  {text === '22_00025-1' ? '化解成功' : text === '22_00025-2' ? '化解不成功' : '-'}
               </div>
            ),
      },
      { title: '申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map(i => i.trueName)?.join(',') : '-'}</div> },
      { title: '被申请方', width: 100, dataIndex: 'action', render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map(i => i.trueName)?.join(',') : '-'}</div> },
         {
            title: '申请方',
            width: 100,
            dataIndex: 'action',
            render: (text, record) => <div>{record.plaintiffList?.length > 0 ? record.plaintiffList?.map((i) => i.trueName)?.join(',') : '-'}</div>,
         },
         {
            title: '被申请方',
            width: 100,
            dataIndex: 'action',
            render: (text, record) => <div>{record.defendantList?.length > 0 ? record.defendantList?.map((i) => i.trueName)?.join(',') : '-'}</div>,
         },
      {
        title: '操作',
        dataIndex: 'action',
        width: 50,
        render: (_, record) => {
          return <Space>
            <span onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)} className='public-color public-a'>详情</span>
          </Space>;
               return (
                  <Space>
                     <span
                        onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${record.caseTaskId}&caseId=${record.id}`)}
                        className="public-color public-a"
                     >
                        详情
                     </span>
                  </Space>
               );
        },
        // render: (_, record) => {
        //   return <Link onClick={() => {
@@ -115,22 +145,18 @@
    let sortColmn = '';
    let sortType = '';
    sortColmn = field === 'createTime' ? 1 : field === 'closeTime' ? 2 : '';
    sortType = order === 'ascend' ? 1 : order === 'descend' ? 2 : ''
      sortType = order === 'ascend' ? 1 : order === 'descend' ? 2 : '';
    setSearch({ ...paramsObj, sortColmn, sortType });
    getCaseInfoData({ ...paramsObj, sortColmn, sortType });
  }
  // 导出数据
  function downloadXls() {
    const keysToFilter = ['page', 'size'];
    const filteredObj = Object.fromEntries(
      Object.entries(search)
        .filter(([key, value]) => value !== undefined && !keysToFilter.includes(key))
    );
      const filteredObj = Object.fromEntries(Object.entries(search).filter(([key, value]) => value !== undefined && !keysToFilter.includes(key)));
    window.open(`${$$.appUrl.baseUrl}/${$$.appUrl.mediate}/api/web/caseInfo/exportQueryAll?${$$.useQueryParams(filteredObj)}`);
  };
   }
  // 搜索 or 重置
  function handleSearch(type, session) {
@@ -139,26 +165,32 @@
      $$.changeTimNeweFormat(values, 'createTime', 'createStart', 'createEnd');
      $$.changeTimNeweFormat(values, 'closeTime', 'closeStart', 'closeEnd');
      $$.changeTimNeweFormat(values, 'fileTime', 'fileStart', 'fileEnd');
      $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage'])
      $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType'])
      $$.searchCascader(search, 'caseType', 1, ['caseType', 'caseType'])
         $$.searchCascader(values, 'queCode', normalSearch.level, ['queCity', 'queArea', 'queRoad', 'queVillage']);
         $$.searchCascader(values, 'caseType', 1, ['caseType', 'caseType']);
         $$.searchCascader(search, 'caseType', 1, ['caseType', 'caseType']);
         $$.searchCascader(values, 'canal', 1, ['canal', 'canalSecond']);
         $$.searchCascader(search, 'canal', 1, ['canal', 'canalSecond']);
      if (form.getFieldsValue()?.caseType) {
        values.caseType1 = form.getFieldsValue()?.caseType[0]
            values.caseType1 = form.getFieldsValue()?.caseType[0];
         }
         if (form.getFieldsValue()?.canal) {
            values.caseType1 = form.getFieldsValue()?.canal[0];
      }
      if (values.mediateUnitId) {
        values.mediateUnitId = selectObjModalData?.mediateUnitId?.key
            values.mediateUnitId = selectObjModalData?.mediateUnitId?.key;
      } else {
        delete values.mediateUnitId;
        delete search.mediateUnitId;
      }
      if (values.assistUnitId) {
        values.assistUnitId = selectObjModalData?.assistUnitId?.key
            values.assistUnitId = selectObjModalData?.assistUnitId?.key;
      } else {
        delete values.assistUnitId;
        delete search.assistUnitId;
      }
      if (values.mediatorId) {
        values.mediatorId = selectObjModalData?.mediatorId?.key
            values.mediatorId = selectObjModalData?.mediatorId?.key;
      } else {
        delete values.mediatorId;
        delete search.mediatorId;
@@ -167,7 +199,12 @@
    }
    if (type === 'reset') {
      let paramsObj = { page: 1, size: 10, sortColmn: 1, sortType: 2 };
      getCaseInfoData({ ...paramsObj, [session.key]: session.value[0], createStart: $$.dateFormat(session.createStart), createEnd: $$.dateFormat(session.createEnd) });
         getCaseInfoData({
            ...paramsObj,
            [session.key]: session.value[0],
            createStart: $$.dateFormat(session.createStart),
            createEnd: $$.dateFormat(session.createEnd),
         });
      return;
    }
    if (type === 'recurrent') {
@@ -186,28 +223,30 @@
        copyObj.queCode = [copyObj.queCity];
      }
      if (copyObj.queArea) {
        let arrayList = $$.convertStringToArray(copyObj.queArea)
            let arrayList = $$.convertStringToArray(copyObj.queArea);
        console.log('arrayList', arrayList);
        copyObj.queCode = arrayList
            copyObj.queCode = arrayList;
      }
      if (copyObj.queRoad) {
        let arrayList = $$.convertStringToArray(copyObj.queRoad)
            let arrayList = $$.convertStringToArray(copyObj.queRoad);
        console.log('arrayList', arrayList);
        copyObj.queCode = arrayList
            copyObj.queCode = arrayList;
      }
      if (copyObj.queVillage) {
        let arrayList = $$.convertStringToArray(copyObj.queVillage)
        copyObj.queCode = arrayList
            let arrayList = $$.convertStringToArray(copyObj.queVillage);
            copyObj.queCode = arrayList;
      }
      if (copyObj.caseType) {
        copyObj.caseType = [copyObj.caseType1, copyObj.caseType]
            copyObj.caseType = [copyObj.caseType1, copyObj.caseType];
         }
         if (copyObj.canal) {
            copyObj.canal = [copyObj.canalSecond, copyObj.canal];
      }
      form.setFieldsValue(copyObj);
      getCaseInfoData(paramsObj);
      return;
    }
  }
  // 获取数据
@@ -224,23 +263,36 @@
    }
  }
  // 获取区域字典值
  async function treeByUserId() {
    global.setSpinning(true);
    const res = await treeByUserIdApi();
    global.setSpinning(false);
    if (res.type) {
      let list = res.data || []
         let list = res.data || [];
      setTreeList(list);
      let values = form.getFieldsValue();
      let key = levelKey(list[0].level || '1');
      values.queCode = [list[0].value]
      values.createTime = [$$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'), $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD')]
         values.queCode = [list[0].value];
         values.createTime = [
            $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
            $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
         ];
      form.setFieldsValue(values);
      setLabels([list[0].label]);
      setNormalSearch({ key, value: [list[0].value], level: list[0].level, createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'), createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD') })
      handleSearch('reset', { key, value: [list[0].value], createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'), createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD') });
         setNormalSearch({
            key,
            value: [list[0].value],
            level: list[0].level,
            createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
            createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
         });
         handleSearch('reset', {
            key,
            value: [list[0].value],
            createStart: $$.myMoment().subtract(0, 'months').startOf('month').format('YYYY-MM-DD'),
            createEnd: $$.myMoment().subtract(0, 'months').endOf('month').format('YYYY-MM-DD'),
         });
    }
  }
@@ -249,8 +301,8 @@
      1: 'queCity',
      2: 'queArea',
      3: 'queRoad',
      4: 'queVillage'
    }[KeyIndex]
         4: 'queVillage',
      }[KeyIndex];
  }
  // 初始化
@@ -259,61 +311,152 @@
    console.log('values', values);
    if (!!values) {
      setTreeList(values?.treeList || [])
      setNormalSearch(values?.normalSearch || {})
      handleSearch('recurrent', values)
         setTreeList(values?.treeList || []);
         setNormalSearch(values?.normalSearch || {});
         handleSearch('recurrent', values);
      $$.clearSessionStorage(location.pathname);
    } else {
      treeByUserId();
    }
  }, []);
  return (
    <NewPage
      pageHead={
        { breadcrumbData: [{ title: '工作台' }, { title: '综合查询' }], title: '综合查询' }
      }
    >
      <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '综合查询' }], title: '综合查询' }}>
      <div className="comprehensive">
        <div className="pageSearch">
          <div className='comprehensive-title'>查询条件</div>
               <div className="comprehensive-title">查询条件</div>
          <NewTableSearch
            exportButton={downloadXls}
            labelLength={6}
            form={form}
            itemData={[
              { type: 'Cascader', name: 'queCode', label: '问题属地', placeholder: '请选择', changeSelect: true, allowClear: false, treedata: treeList || [] },
              { type: 'RangePicker', name: 'createTime', label: '登记时间', shortcutsPlacementLeft: true, allowClear: false, shortcuts: $$.shortcutsList(), span: 8 },
                     {
                        type: 'Cascader',
                        name: 'queCode',
                        label: '问题属地',
                        placeholder: '请选择',
                        changeSelect: true,
                        allowClear: false,
                        treedata: treeList || [],
                     },
                     {
                        type: 'RangePicker',
                        name: 'createTime',
                        label: '登记时间',
                        shortcutsPlacementLeft: true,
                        allowClear: false,
                        shortcuts: $$.shortcutsList(),
                        span: 8,
                     },
              { type: 'RangePicker', name: 'closeTime', label: '办结时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
              { type: 'RangePicker', name: 'fileTime', label: '归档时间', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
              { type: 'Cascader', name: 'caseType', label: '纠纷类型', placeholder: '请选择', span: 8, changeSelect: true, treedata: $$.caseTypeSelect.caseTypeSelect },
                     {
                        type: 'Cascader',
                        name: 'caseType',
                        label: '纠纷类型',
                        placeholder: '请选择',
                        span: 8,
                        changeSelect: true,
                        treedata: $$.caseTypeSelect.caseTypeSelect,
                     },
              { type: 'Select', name: 'mediResult', label: '化解结果', placeholder: '请选择', span: 8, selectdata: $$.options.mediResult },
              { type: 'Input', name: 'caseRef', label: '事项编号' },
              { type: 'Select', name: 'canal', label: '事项来源', placeholder: '请选择', span: 8, selectdata: $$.options.caseCanal },
                     {
                        type: 'Cascader',
                        name: 'canal',
                        label: '事项来源',
                        placeholder: '请选择',
                        span: 8,
                        changeSelect: true,
                        treedata: $$.options.caseCanal,
                     },
              { type: 'Select', name: 'status', label: '事项状态', placeholder: '请选择', span: 8, selectdata: $$.options.caseStatus },
              { type: 'Select', name: 'caseLevel', label: '事项等级', placeholder: '请选择', span: 8, selectdata: $$.options.caseLevelList },
              { type: 'Select', name: 'systemSource', label: '系统来源', placeholder: '请选择', span: 8, selectdata: $$.options.systemSource },
              { type: 'Input', name: 'inputUnitName', label: '登记机构' },
              { type: 'searchButton', name: 'mediateUnitId', maxLength: 0, onClear: () => { console.log('clear'); setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} }); form.setFieldValue('mediateUnitId', '') }, onSearch: () => { onChange('mediateUnitId') }, searchButton: '选择', placeholder: '请选择', label: '承办部门' },
              { type: 'searchButton', name: 'assistUnitId', maxLength: 0, onClear: () => { setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} }); form.setFieldValue('assistUnitId', '') }, onSearch: () => { onChange('assistUnitId') }, searchButton: '选择', placeholder: '请选择', label: '配合部门' },
                     {
                        type: 'searchButton',
                        name: 'mediateUnitId',
                        maxLength: 0,
                        onClear: () => {
                           console.log('clear');
                           setSelectObjModalData({ ...selectObjModalData, mediateUnitId: {} });
                           form.setFieldValue('mediateUnitId', '');
                        },
                        onSearch: () => {
                           onChange('mediateUnitId');
                        },
                        searchButton: '选择',
                        placeholder: '请选择',
                        label: '承办部门',
                     },
                     {
                        type: 'searchButton',
                        name: 'assistUnitId',
                        maxLength: 0,
                        onClear: () => {
                           setSelectObjModalData({ ...selectObjModalData, assistUnitId: {} });
                           form.setFieldValue('assistUnitId', '');
                        },
                        onSearch: () => {
                           onChange('assistUnitId');
                        },
                        searchButton: '选择',
                        placeholder: '请选择',
                        label: '配合部门',
                     },
              { type: 'Input', name: 'plaintiffs', label: '申请方', labelStyle: { width: '56px' } },
              { type: 'Input', name: 'defendants', label: '被申请方' },
              { type: 'Select', name: 'peopleNum', placeholder: '请选择', label: '涉及人数', selectdata: $$.options.peopleNum },
              { type: 'Select', name: 'amount', placeholder: '请选择', label: '涉及金额', selectdata: $$.options.amount },
              { type: 'Select', name: 'evaluateGrade', placeholder: '请选择', label: '评价等级', selectdata: $$.options.evaluateGrade },
              { type: 'Select', name: 'majorStatus', placeholder: '请选择', label: '是否重大矛盾', selectdata: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
              { type: 'searchButton', name: 'mediatorId', maxLength: 0, onClear: () => { setSelectObjModalData({ ...selectObjModalData, mediatorId: {} }); form.setFieldValue('mediatorId', '') }, onSearch: () => { onChange('mediatorId') }, searchButton: '选择', placeholder: '请选择', label: '经办人' },
              { type: 'Select', name: 'isRisk', placeholder: '请选择', label: '是否扬言极端', selectdata: [{ label: '是', value: '1' }, { label: '否', value: '0' }] },
                     {
                        type: 'Select',
                        name: 'majorStatus',
                        placeholder: '请选择',
                        label: '是否重大矛盾',
                        selectdata: [
                           { label: '是', value: '1' },
                           { label: '否', value: '0' },
                        ],
                     },
                     {
                        type: 'searchButton',
                        name: 'mediatorId',
                        maxLength: 0,
                        onClear: () => {
                           setSelectObjModalData({ ...selectObjModalData, mediatorId: {} });
                           form.setFieldValue('mediatorId', '');
                        },
                        onSearch: () => {
                           onChange('mediatorId');
                        },
                        searchButton: '选择',
                        placeholder: '请选择',
                        label: '经办人',
                     },
                     {
                        type: 'Select',
                        name: 'isRisk',
                        placeholder: '请选择',
                        label: '是否扬言极端',
                        selectdata: [
                           { label: '是', value: '1' },
                           { label: '否', value: '0' },
                        ],
                     },
              { type: 'Select', name: 'agreeType', placeholder: '请选择', label: '结案协议类型', selectdata: $$.options.caseAgreeType },
              { type: 'Select', name: 'repeatCase', placeholder: '请选择', label: '合并事项', selectdata: $$.options.repeatCase },
              { type: 'Input', name: 'caseCityCode', label: '市民编号' },
            ]}
            handleReset={() => {
              form.resetFields();
              form.setFieldsValue({ queCode: [normalSearch.value[0]], createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)] });
                     form.setFieldsValue({
                        queCode: [normalSearch.value[0]],
                        createTime: [$$.dateFormat(normalSearch.createStart), $$.dateFormat(normalSearch.createEnd)],
                     });
              setLabels([treeList[0].label]);
              handleSearch('reset', normalSearch)
                     handleSearch('reset', normalSearch);
            }}
            handleSearch={() => handleSearch('search')}
          />
@@ -326,7 +469,7 @@
            columns={columns()}
            dataSource={data.tableData}
            onChange={(pagination, filters, sorter) => {
              handleChangePage(pagination.current, pagination.pageSize, sorter.field, sorter.order)
                     handleChangePage(pagination.current, pagination.pageSize, sorter.field, sorter.order);
            }}
            pagination={{
              current: search.page,
@@ -341,8 +484,8 @@
          checkKeys={[selectObjModalData[selectObjModalData.key]?.key || '']}
          onOk={(item) => {
            setIsModalVisible(false);
            setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item })
            form.setFieldValue(selectObjModalData?.key, item.name)
                  setSelectObjModalData({ ...selectObjModalData, [selectObjModalData.key]: item });
                  form.setFieldValue(selectObjModalData?.key, item.name);
          }}
          type={selectObjModalData.type || 'dept'}
          onClose={() => setIsModalVisible(false)}