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

import Authorization from '@/components/Authorization'
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 { iFileModal } from '@/types/file'
import { iCreateSafe } from '@/types/safe'
import { safeStatus } from '@/utils/common/constStatus'
import consts from '@/utils/consts'
import { dayjsFormat } from '@/utils/util'
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 { apiCreateQuality, apiQualityList, apiSaveRule } from './api'
import AddModel from './modal'
interface iQualityList {
  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
}

const QualityList: 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.QUALITY,
    dataId: ''
  })
  useEffect(() => {
    initData()
  }, [])
  const columns: ColumnsType<iQualityList> = [
    {
      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/quality/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>{dayjsFormat(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 [ qualityList, setQualityList ] = useState<iQualityList[]>([])
  const [ total, setTotal ] = useState<number>(0)
  const initData = (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
    apiQualityList(tenderStore.bid, pageNo, pageSize)
      .then(({ code = -1, data = [], total = 0 }) => {
        if (code === consts.RET_CODE.SUCCESS) {
          setQualityList(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: 'quality_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 = dayjsFormat(payload.createTime)
    const { code = -1 } = await apiCreateQuality({ ...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">
          {!qualityList.length ? (
            <Button
              type="ghost"
              size="small"
              icon={<SvgIcon type="xxh-cog" />}
              className="pi-mg-right-3"
              style={{ color: '#007bff' }}
              onClick={() => setRuleModal({ ...ruleModal, visible: true })}>
              设置
            </Button>
          ) : null}

          <Authorization type="quality" auth="add">
            <Button type="primary" size="small" onClick={() => setAddModal({ ...addModal, visible: true })}>
              新建巡检
            </Button>
          </Authorization>
        </Slot>
      </Header>
      <Table
        dataSource={qualityList}
        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.QUALITY}
        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 QualityList