management/src/pages/Safe/Content/List/index.tsx

import FileModal from '@/components/FileModal'
import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import RuleModal from '@/components/RuleModal'
import SvgIcon from '@/components/SvgIcon'
import { tenderStore } from '@/store/mobx'
import { iCreateSafe } from '@/types/safe'
import { safeStatus } from '@/utils/common/constStatus'
import consts from '@/utils/consts'
import { dayjsFomrat } from '@/utils/util'
import { SettingOutlined } from '@ant-design/icons'
import { Button, message, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { apiCreateSafe, apiSafeList, apiSaveRule } from './api'
import AddModel from './modal'
interface iSafeList {
  id: string;
  code: string;
  createTime: string;
  position: string;
  inspection: string;
  inspectionDetail: string;
  demand: string;
  status: number;
  auditName: string;
  fileCounts: number;
}
interface iModal {
  visible: boolean
  loading: boolean
}

interface iFileModal {
  visible: boolean
  dataType: number
  dataId: string
}
const SafeList:React.FC<{}> =() => {
  const [ ruleModal, setRuleModal ] = useState<iModal>({
    visible: false,
    loading: false
  })
  const [ addModal, setAddModal ] = useState<iModal>({
    visible: false,
    loading: false
  })
  const [ fileModal, setFileModal ] = useState<iFileModal>({
    visible: false,
    dataType: consts.DATA_TYPE.SAFE,
    dataId: ''
  })
  useEffect(() => {
    initData()
  }, [])
  const columns:ColumnsType<iSafeList> = [
    {
      title: '序号',
      // eslint-disable-next-line react/display-name
      render: (_: string, record: any, i: number) => {
        return <span>{i + 1}</span>
      }
    },
    {
      title: '编号',
      dataIndex: 'code',
      // eslint-disable-next-line react/display-name
      render: (text: string, record) => {
        return <Link to={{ pathname: "/console/safe/content/detail/info", state: { saveId: record.id } }}>{text}</Link>
      }
    },
    {
      title: '检查项目',
      dataIndex: 'inspection'
    },
    {
      title: '现场检查情况',
      dataIndex: 'inspection_detail'
    },
    {
      title: '处理要求及措施',
      dataIndex: 'demand'
    },
    {
      title: '检查日期',
      dataIndex: 'create_time',
      // eslint-disable-next-line react/display-name
      render: (text: string) => {
        return <span>{dayjsFomrat(text, 'YYYY-MM-DD')}</span>
      }
    },
    {
      title: '检查人',
      dataIndex: 'auditName'
    },
    {
      title: '附件',
      dataIndex: 'fileCounts',
      // eslint-disable-next-line react/display-name
      render: (text: string, record) => {
      return <span className="pi-pointer" onClick={() => setFileModal({ ...fileModal, dataId: record.id, visible: true })}><SvgIcon type="xxh-paperclip1"></SvgIcon> {text}</span>
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      // eslint-disable-next-line react/display-name
      render: (statu: number) => {
      return <span className={safeStatus[statu].className}>{safeStatus[statu].text}</span>
      }
    }
  ]
  const [ list, setList ] = useState<iSafeList[]>([
    {
      id: '',
      code: '',
      createTime: '',
      position: '',
      inspection: '',
      inspectionDetail: '',
      demand: '',
      status: 0,
      auditName: '',
      fileCounts: 0
    }
  ])
  const [ total, setTotal ] = useState<number>(0)
  const initData = (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
    apiSafeList(tenderStore.bid, pageNo, pageSize).then(({ code = -1, data = [], total = 0 }) => {
      if (code === consts.RET_CODE.SUCCESS) {
        setList(data)
        setTotal(total)
      }
    }).catch(err => {
      console.log(err)
    })
  }

  const onRuleCreate = async (ruleValue: any) => {
    setRuleModal({ ...ruleModal, loading: true })
    const { code = -1 } = await apiSaveRule({ bidsectionId: tenderStore.bid, type: 'safe_rule', rule: ruleValue })
    if (code === consts.RET_CODE.SUCCESS) {
      message.success("规则更改成功!")
      initData()
    }
    setRuleModal({ ...ruleModal, loading: false, visible: false })
  }
  const onAddCreate = async (payload: iCreateSafe) => {
    setAddModal({ ...addModal, loading: true })
    const createTime = dayjsFomrat(payload.createTime)
    const { code = -1 } = await apiCreateSafe({ ...payload, createTime })
    if (code === consts.RET_CODE.SUCCESS) {
      initData()
    }
    setAddModal({ ...addModal, loading: false, visible: false })
  }

  return (
    <div className="wrap-contaniner">
      <Header title="巡检概况">
        <Slot position="right">
          {
            !list.length ?
            <Button type="ghost" size="small" icon={<SettingOutlined />} className="pi-mg-right-3" style={{ color: '#007bff' }} onClick={() => setRuleModal({ ...ruleModal, visible: true })}>设置</Button>
            : ""
          }

          <Button type="primary" size="small" onClick={() => setAddModal({ ...addModal, visible: true })}>新建巡检</Button>
        </Slot>
      </Header>
      <Table
        dataSource={list}
        columns={columns}
        pagination={{
          hideOnSinglePage: true,
          size: "small",
          pageSize: consts.PAGE_SIZE,
          onChange: (page, pageSize) => initData(page, pageSize),
          total
        }}
        rowKey={record => record.id}
        bordered
        >
      </Table>
      <RuleModal
        type={consts.RULE.SAFE}
        title="安全巡检编号设置"
        visible={ruleModal.visible}
        onCreate={onRuleCreate}
        loading={ruleModal.loading}
        onCancel={() => setRuleModal({ ...ruleModal, visible: false })}
        >
      </RuleModal>
      <AddModel
        visible={addModal.visible}
        onCreate={onAddCreate}
        loading={addModal.loading}
        onCancel={() => setAddModal({ ...addModal, visible: false })}
        >
      </AddModel>
      <FileModal
        visible={fileModal.visible}
        dataType={fileModal.dataType}
        dataId={fileModal.dataId}
        onCancel={() => setFileModal({ ...fileModal, visible: false })}
      ></FileModal>
    </div>
  )
}

export default SafeList