tsg-web/src/views/rcgl/jdkh/khrwgl/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Popconfirm, message, Tabs,Dropdown,Space } from 'antd';
import {FileWordOutlined,FilePdfOutlined,DownOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_';
import KhResultModal from './khResultModal';
import PfDetail from "./PfDetail"
import { httpget2 } from '../../../../utils/request';
import "./index.less"
const Page = () => {
  const role = useSelector(state => state.auth.role);
  const qd = role?.rule?.find(item => item.menuName == "清单") || true;
  const khLevel = {
    1: "优秀",
    2: "良好",
    3: "合格",
  }
  const khStatus = {
    0: "未启动",
    1: "评分中",
    2: "已完成",
    9:"评分中"
  }
  const expandedRowRender = (record) => {
    const columns = [
      {
        title: '考核对象',
        dataIndex: 'objectUserName',
        key: 'objectUserName',
        align: "center",
        width: 200,
      },
      {
        title: '标准得分',
        dataIndex: 'standardScore',
        align:"center",
        key: 'standardScore',
        width:200
      },
      {
        title: '考核得分',
        dataIndex: 'assessScore',
        align:"center",
        key: 'assessScore',
        width:200
      },
      {
        title: '考核等级',
        dataIndex: 'assessLevel',
        align:"center",
        key: 'assessLevel',
        width: 200,
        render: (value) => <span>{khLevel[value]}</span>
      },{
        title: '考核记录状态',
        dataIndex: 'status',
        align:"center",
        key: 'status',
        width: 200,
        render: (value) => <span>{khStatus[value]}</span>
      },
      {
        title: '操作',
        dataIndex: 'operator',
        align:"center",
        key: 'operator',
        width: 200,
        render: (value, row) => (
          <>
            {(row.status == 1 || row.status == 9 ) && tabs !=2 ? <a onClick={() => handlePf(row,record)}>评分</a> : null}
            {(row.status == 2 || tabs ==2) ? <a onClick={() => viewPf(row,record)}>查看评分详情</a> : null}
          </>
        )
      },
    ];
    return <Table columns={columns} dataSource={record?.assessObjects} pagination={false} rowKey="id"/>;
  };
  const taskStatus = {
    0: '未启动',
    1: '评分中',
    2: '审核中',
    3: '已审核',
    4: '已作废',
  }

  const [dropItem, setDropItem] = useState({})
  const refModal = useRef();
  const [searchVal, setSearchVal] = useState({})
  const columns = [
    { title: '', key: '', dataIndex: '', width: 0, align: "center" },
    { title: '考核任务名称', key: 'taskName', dataIndex: 'taskName', width: 200, },
    {
      title: '考核频次', key: 'taskFreq', dataIndex: 'taskFreq', width: 200,
      render: (value) => <span>{value == 1? '年度' : value == 2 ? "季度": value == 3 ? "月度" : ''}</span>
    },
    {
      title: '考核时间', key: 'time', dataIndex: 'time', width: 200,
      render: (value, record) => <span>{(record?.startDate || record?.startDate?.endDate)
        ? record?.startDate + '-' + record?.endDate : '' }</span>
     },
    {
      title: '考核任务状态', key: 'status', dataIndex: 'status', width: 200,align: 'center',
      render: (value) => <div>{taskStatus[value] || ''}</div>
    },
    {title: '创建人', key: 'createUserName', dataIndex: 'createUserName', width: 100},
    {
      title: '操作', key: 'operation', width: 300,align: 'center',
      render: (v,r) => (
        <Space Space size="middle" >
          {
            tabs == 2 ? 
              <>
                {r.status == 0 ? <a onClick={() =>command("edit")(r)}>编辑</a> : null}
              <a onClick={() => command("view")(r)}>查看</a>
              {r.status == 0 ? <a style={{ color: "red" }} onClick={() => command("del")(r)}>删除</a> : null}
              {r.status == 0 ?  <Popconfirm title="确认启动评分?" onConfirm={()=>startPf(r)}>
                <Button type="link" size="small" title="启动">启动</Button>
              </Popconfirm> : null}
              {r.status == 1 ?  <Popconfirm title="确认作废评分?" onConfirm={()=>pause(r)}>
                <Button type="link" size="small" title="作废">作废</Button>
              </Popconfirm> : null}
              {r.status == 2 ? 
                <>
                  <a onClick={() => khResult(r)}>考核结果</a>
                    <Popconfirm title="确认审核通过?" onConfirm={()=>pass(r)}>
                <Button type="link" size="small" title="审核通过">审核通过</Button>
              </Popconfirm>
              <Dropdown
                menu={{
                  items:[ {
                    key: '1',
                    label: <Popconfirm title="确定要驳回评分吗?" onConfirm={() =>{refuse(r)}}>
                    <Button  type="link" size="small" title="驳回评分" style={{color:"#000"}}>驳回评分</Button>
                  </Popconfirm>
                  },
                  {
                    key: '2',
                    label:  <Popconfirm title="确定要作废吗?" onConfirm={() =>{pause(r)}}>
                    <Button  type="link" size="small" title="作废" style={{color:"#000"}}>作废</Button>
                  </Popconfirm>,
                  },]
                }}
                trigger={['click']}
              >
                  <a onClick={(e) => { e.preventDefault(); setDropItem(r)}}>
                  更多 <DownOutlined />
                </a>
              </Dropdown>
            </> : r.status == 3 ? <a onClick={() => khResult(r)}>考核结果</a> : null
          }
        
              </> : <a onClick={() => command("view")({...r,tabs})}>查看</a>
          }
        </Space>
      )
    },
  ];
  const [tabs, setTabsChange] = useState(0)
 
  
  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);

  // 开始评分
  const [pfOpen, setPfOpen] = useState(false)
  const [pfItem, setPfItem] = useState({})
  const [pfItem1, setPfItem1] = useState({})
  const handlePf = (column,record) => {
    setPfOpen(true);
    setPfItem(record);
    setPfItem1({...column,type:"start"});
  }
  // 启动评分
  const startPf = async (params) => {
    try {
      const res = await httpget2(apiurl.rcgl.jdkh.khrwgl.start + `/${params.id}`)
      if (res.code == 200) {
        message.success('启动成功')
        refresh()
      }
    } catch (error) {
      console.log(error);
    }
  }
// 评分详情
  const viewPf = (row, record) => {
    setPfOpen(true);
    setPfItem({ ...record,view:1 });
    setPfItem1({ ...row,view:1,tabs });
  }

  // 作废
  const pause = async (params) => {
    try {
      const res = await httpget2(apiurl.rcgl.jdkh.khrwgl.pause + `/${params.id}`)
      if (res.code == 200) {
        message.success('作废成功')
        refresh()
      }
    } catch (error) {
      console.log(error);
    }
  }

  // 驳回评分
  const refuse = async (params) => {
    try {
      const res = await httpget2(apiurl.rcgl.jdkh.khrwgl.refuse + `/${params.id}`)
      if (res.code == 200) {
        message.success('驳回评分成功')
        refresh()
      }
    } catch (error) {
      console.log(error);
    }
  }
  // 审核通过
  const pass = async (params) => {
    try {
      const res = await httpget2(apiurl.rcgl.jdkh.khrwgl.pass + `/${params.id}`)
      if (res.code == 200) {
        message.success('审核通过成功')
        refresh()
      }
    } catch (error) {
      console.log(error);
    }
  }

  // 考核结果
  const [khResultOpen, setKhResultOpen] = useState(false)
  const [khResultItem, setKhResultItem] = useState({})
  const khResult = (row) => {
    setKhResultOpen(true)
    setKhResultItem(row)
  }
  const command = (type) => (params) => {
    if (type === 'save') {
      refModal.current.showSave();
    } else if (type === 'edit') {
      refModal.current.showEdit({ ...params });
    } else if (type === 'view') {
      refModal.current.showView(params);
    } else if (type === 'del') {
      refModal.current.onDeleteGet(apiurl.rcgl.jdkh.khrwgl.delete + `/${params.id}`);
    }
  }
  
 
  // 任务清单
  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.jdkh.khrwgl.taskPage).find_noCode);
   // 待办
  const { tableProps: tableProps1, search: search1,refresh:refresh1 } = usePageTable(createCrudService(apiurl.rcgl.jdkh.khrwgl.todoPage).find_noCode);
  // 已办
   const { tableProps:tableProps2, search:search2,refresh:refresh2 } = usePageTable(createCrudService(apiurl.rcgl.jdkh.khrwgl.myDonePage).find_noCode);

 /**
   * @description 处理成功的回调
   */
 const successCallback = () => {
   refresh()
   setTabsChange(2)
  }
 //移入某一行禁用 
  const rowClassName = (record) => {
  return record.status == 4 ? 'disabled-row' : '';
};

  useEffect(() => {
    const userId = localStorage.getItem("userId");
    if (searchVal) {
      const params = {
        search: {
          ...searchVal,
          userId: tabs != 2 ? userId :undefined
        }
      }; 
      if (tabs == 0) {
        search1(params)
      } else if (tabs == 1) {
        search2(params)
      } else {
        search(params)
      }
      
    }
  }, [searchVal,tabs])
  
  
  return (
    <>
      <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              onSave={command('save')}
              role={role}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
          <Tabs
              // defaultActiveKey={0}
              onChange={(e) => setTabsChange(e)}
              activeKey={tabs}
              items={[
                {
                  label: `我的待办评分任务`,
                  key: 0,
                  children: <Table
                    columns={columns}
                    rowKey="inx"
                    {...tableProps1}
                    scroll={{ x: width, y: "calc( 100vh - 400px )" }}
                    expandable={{
                      expandedRowRender,
                    }}
                  />
                },
                {
                  label: `我的已办评分任务`,
                  key: 1,
                  children: <Table
                    columns={columns}
                    rowKey="inx"
                    {...tableProps2}
                    scroll={{ x: width, y: "calc( 100vh - 400px )" }}
                    expandable={{
                      expandedRowRender,
                    }}
                  />
                },
                qd &&   {
                  label: `考核任务清单`,
                  key: 2,
                  children: <Table
                    columns={columns}
                    rowKey="inx"
                    rowClassName={rowClassName}
                    {...tableProps}
                    scroll={{ x: width, y: "calc( 100vh - 400px )" }}
                    expandable={{
                      expandedRowRender,
                    }}
                  />
               }
              ]}
            >
          </Tabs>
          </div>
        </div>

        <BasicCrudModal
          width={1000}
          ref={refModal}
          title=""
          component={ModalForm}
          onCrudSuccess={successCallback}
          // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
        />

        {/* 评分弹框 */}
        <Modal
          open={pfOpen}
          width={1000}
          footer={null}
          title={pfItem1.objectUserName}
          destroyOnClose
          onCancel={() =>setPfOpen(false)}
        >
          <PfDetail
            record={pfItem}
            Item={pfItem1}
            refresh={refresh1}
            onCancel={() => setPfOpen(false)}
            tabs={tabs}
          />
        </Modal>

        {/* 考核结果 */}
        <Modal
            open={khResultOpen}
            width={800}
            footer={null}
            title="考核结果"
            destroyOnClose
            onCancel={() =>setKhResultOpen(false)}
        >
          <KhResultModal khItem={khResultItem} />
        </Modal>
      </div>
    </>
  );
}

export default Page;