feat: 修改样式

zhangyongtian

2024-09-11 6ffddb4f427176d39bb41df21919d7038e5bf668

 gz-customerSystem/src/components/ProgressStep/VisitStep.jsx

@@ -7,117 +7,100 @@
 * @Description: 来访登记步骤条
 */

import React, { useEffect, useState } from 'react';
import { Tooltip, Space } from 'antd';
import Icon, { PaperClipOutlined, RollbackOutlined, EllipsisOutlined } from '@ant-design/icons';
import React, { Fragment, useEffect, useState } from 'react';
import { Tooltip } from 'antd';
import { ledger_8, ledger_7, ledger_12, ledger_13 } from '../../assets/images';
import NameCard from '../NameCard';
import * as $$ from '../../utils/utility';
import FilesDrawer from '../FilesDrawer';
import './index.less';

/**
 * progressData:'', // 流程数据
 * progressData: {
 * assistCaseFlowList: [],//配合部门流程数组
 * handleCaseFlowList: [],//承办部门流程数组
 * }, // 流程数据
 * hasTab: false,//是否有部门切换
 */
const ProgressStep = ({ progressData }) => {
const ProgressStep = ({ progressData, hasTab }) => {
  const [proType, setProType] = useState('handleCaseFlowList')
  const iconMap = {
    1: ledger_8,
    2: ledger_7,
    3: ledger_12,
    4: ledger_13
    1: ledger_7,//完成
    2: ledger_12,//回退
    3: ledger_13//上报
  }
  const btnList = [
    {
      value: 'handleCaseFlowList',
      label: '承办部门'
    },
    {
      value: 'assistCaseFlowList',
      label: '配合部门'
    },
  ]

  // 已处理列表第一个元素
  const dom1 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName || '-'}</span>
      </div>
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作人：</span>
        <span>{x.operationName}</span>
      </div>
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>经办时间：</span>
        <span>{$$.timeFormat(x.finishTime)}</span>
      </div>
    </div>
  );
  // 已处理列表后面 元素
  const dom2 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName || '-'}</span>
      </div>
      {x.operationName &&
        <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
          <span>操作人：</span>
          <span>{x.operationName}</span>
        </div>
      }
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作时间：</span>
        <span>{$$.timeFormat(x.finishTime)}</span>
      </div>
      {
        x.handleContent &&
        <div className='myStep-item-p-yy' style={{ width: '200px' }}>
          <span className='myStep-item-p-yy-l'>
            {x.handleResult == '2' ?
              <span>退回<Tooltip placement="top" title={x.handleContent || ''}><span>{`（${x.handleContent}）` || '-'}</span></Tooltip></span>
              : x.taskNode == 'F22_00019-3' && x.handleResult == '1' ?
                // 22_00025-1：调解成功，22_00025-2：调解不成功
                <span>调解结果：<Tooltip placement="top" title={x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}><span>{`${x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}` || '-'}</span></Tooltip></span>
                : <Tooltip placement="top" title={x.handleContent || ''}><span>{x.handleContent || '-'}</span></Tooltip>}
          </span>
          {
            x.fileInfoList?.length > 0 &&
            <div style={{ marginTop: '4px' }}>
              <FilesDrawer name={<>
                <PaperClipOutlined style={{ marginRight: '4px' }} />
                <span>{x.taskNode == 'F22_00019-3' && x.handleResult == '1' ? '调解协议书' : '处理附件'}</span>
              </>} filesData={x.fileInfoList} title="经办附件" />
            </div>
          }
        </div>
      }
    </div>
  );

  // 办理中
  const dom3 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span style={{ color: 'rgba(0,0,0,0.50)' }}>待受理</span>
      </div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName}</span>
      </div>
    </div>
  );
  useEffect(() => {
    setProType('handleCaseFlowList')
  }, [progressData])

  return (
    <>
      {progressData.length !== 0
        ? progressData.map((x, t) => {
    <Fragment>
      {hasTab &&
        <div className='tabBtn'>
          {btnList.map((item, index) => {
            return <div
              className={`tabBtn-btn ${proType === item.value ? 'tabBtn-active' : ''}`}
              key={item.value}
              onClick={() => { setProType(item.value) }}
              style={{ marginRight: (index + 1) !== btnList.length ? '20px' : '0' }}
            >{item.label}</div>
          })}

        </div>
      }
      {progressData[proType] && progressData[proType].length !== 0
        ? progressData[proType].map((x, t) => {
          return (
            <div key={t + 1}>
              <div className="myStep-item">
                {t === progressData.length - 1 ? null : <div className={`${!x.handleContent ? 'myStep-item-divider' : x.fileInfoList?.length > 0 ? 'myStep-item-divider2' : "myStep-item-divider1"} ${x.status === '2' && 'myStep-item-divider-success'}`} />}
                <div className={`myStep-item-icon1 myStep-item-${x.status === '1' ? 'noStarted1' : 'success1'}`}>
                  <div className="myStep-item-title">{x.taskNodeName}</div>
                  <img className='myStep-item-img' src={iconMap[x.status]} alt="" />
                {t === progressData[proType].length - 1 ? null : <div className={`${!x.handleContent ? 'myStep-item-divider' : x.fileInfoList?.length > 0 ? 'myStep-item-divider2' : "myStep-item-divider1"} ${x.status === '2' && 'myStep-item-divider-success'}`} />}
                <div className={`myStep-item-icon1 myStep-item-${x.status === 1 ? 'noStarted1' : 'success1'}`}>
                  <div className="myStep-item-title">{x.nodeShowName || '事件流转'}</div>
                  <img className='myStep-item-img' src={x.status === 1 ? ledger_8 : iconMap[x.taskType]} alt="" />
                </div>
                <div className="myStep-item-right">
                  {
                    t === 0 && dom1(x || {})
                  }
                  {
                    t !== 0 && <>
                      {
                        x.status === '1' ?  dom3(x || {}) : dom2(x || {})
                  {t === progressData[proType].length - 1 ?
                    <div>
                      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
                        {x.processName}
                      </div>
                      <div className="myStep-item-p">
                        <span>{x.handleUnitName || '-'}</span>
                      </div>
                    </div>
                    :
                    <div>
                      <div className="myStep-item-p">
                        <span>{x.handleUnitName || '-'}</span>
                      </div>
                      {x.handleUserName &&
                        <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
                          <span>操作人：</span>
                          <span>{x.handleUserName}</span>
                        </div>
                      }
                    </>
                      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
                        <span>操作时间：</span>
                        <span>{$$.timeFormat(x.handleTime, false, 'YYYY-MM-DD HH:mm')}</span>
                      </div>
                      {
                        x.handleNotes &&
                        <div className='myStep-item-p-yy' style={{ width: '200px' }}>
                          <span className='myStep-item-p-yy-l'>
                            <span><Tooltip placement="top" title={x.handleNotes || ''}><span>{x.handleNotes || '-'}</span></Tooltip></span>
                          </span>
                        </div>
                      }
                    </div>
                  }
                </div>
              </div>
@@ -125,7 +108,7 @@
          );
        })
        : <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
    </>
    </Fragment>
  );
};