gt_client_pad/src/pages/DeviceManager/detail.js

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import {
  queryInventoryList,
  queryStoreList,
} from '@/services/StorageManagement';
import { useParams, useRequest } from '@umijs/max';
import { Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import { PageType } from '.';
const SparePartDetail = () => {
  const { projectId, type } = useParams();
  const titles = ['入库详情', '出库详情', '报废详情', '库存详情', '基础库存'];

  const defaultParams = {
    type: Number(type),
    project_id: Number(projectId),
    check_result: 0,
    category_id: 0,
    start_time: '',
    end_time: '',
    name: '',
  };

  const defaultParamsOfExit = {
    category_id: 0,
    name: '',
    model_number: '',
    warning_state: Number(type) === PageType.warning ? 2 : 0,
    project_id: Number(projectId),
  };

  const columns = [
    {
      title: '仓储类型',
      dataIndex: 'category_name',
      key: 'category_name',
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '型号',
      dataIndex: 'model_number',
      key: 'model_number',
      align: 'center',
    },
  ];

  const columnsIn = [
    ...columns,
    {
      title: '入库数量',
      // dataIndex: 'amount',
      // key: 'amount',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '入库日期',
      dataIndex: 'create_time',
      key: 'create_time',
      align: 'center',
      render: (time) => dayjs(time).format('YYYY-MM-DD'),
    },
    {
      title: '入库人',
      dataIndex: 'user_name',
      key: 'user_name',
      align: 'center',
    },
  ];

  const columnsOut = [
    ...columns,
    {
      title: '出库数量',
      // dataIndex: 'amount',
      // key: 'amount',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '出库日期',
      dataIndex: 'create_time',
      key: 'create_time',
      align: 'center',
      render: (time) => dayjs(time).format('YYYY-MM-DD'),
    },
    {
      title: '出库人',
      dataIndex: 'user_name',
      key: 'user_name',
      align: 'center',
    },
    {
      title: '领用人',
      dataIndex: 'recipient_user_name',
      key: 'recipient_user_name',
      align: 'center',
    },
  ];

  const columnsScrap = [
    ...columns,
    {
      title: '报废信息',
      dataIndex: 'desc',
      key: 'desc',
      align: 'center',
    },
    {
      title: '报废数量',
      // dataIndex: 'amount',
      // key: 'amount',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '经办人',
      dataIndex: 'user_name',
      key: 'user_name',
      align: 'center',
    },
    {
      title: '报废日期',
      dataIndex: 'create_time',
      key: 'create_time',
      align: 'center',
      render: (time) => dayjs(time).format('YYYY-MM-DD'),
    },
    {
      title: '图片',
      dataIndex: 'images',
      align: 'center',
      render: (images) => {
        if (images) {
          const imgs = JSON.parse(images);
          const setData = imgs.map((img) => {
            return { src: img };
          });
          return (
            <>
              <a
                onClick={() => {
                  console.log(imgs[0]);
                  return Zmage.browsing({
                    set: setData,
                  });
                }}
              >
                查看
              </a>
            </>
          );
        } else {
          return <div>暂无图片</div>;
        }
      },
    },
  ];

  const columnsExit = [
    {
      title: '类型',
      dataIndex: 'category_name',
      key: 'category_name',
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '型号',
      dataIndex: 'model_number',
      key: 'model_number',
      align: 'center',
    },
    {
      title: '在库',
      align: 'center',
      render: (record) => {
        return (
          <div>
            {record.in_amount -
              record.out_amount -
              record.scrap_amount +
              record.update_amount}
            {record.unit}
          </div>
        );
      },
    },
    {
      title: '入库',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.in_amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '出库',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.out_amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '报废',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.scrap_amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '预警状态',
      dataIndex: 'warning_state',
      align: 'warning_state',
      align: 'center',
      render: (warn) => {
        return warn == 2 ? (
          <div style={{ color: 'red' }}>报警</div>
        ) : (
          <div>正常</div>
        );
      },
    },
    {
      title: '预警内容',
      dataIndex: 'warning_content',
      key: 'warning_content',
      align: 'center',
    },
  ];

  const columnsBase = [
    {
      title: '类型',
      dataIndex: 'category_name',
      key: 'category_name',
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '型号',
      dataIndex: 'model_number',
      key: 'model_number',
      align: 'center',
    },
    {
      title: '在库',
      align: 'center',
      render: (record) => {
        return (
          <div>
            {record.in_amount -
              record.out_amount -
              record.scrap_amount +
              record.update_amount}
            {record.unit}
          </div>
        );
      },
    },
    {
      title: '入库',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.in_amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '出库',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.out_amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '报废',
      align: 'center',
      render: (recode) => (
        <div>
          {recode.scrap_amount}
          {recode.unit}
        </div>
      ),
    },
    {
      title: '预警状态',
      dataIndex: 'warning_state',
      align: 'warning_state',
      align: 'center',
      render: (warn) => {
        return warn == 2 ? (
          <div style={{ color: 'red' }}>报警</div>
        ) : (
          <div>正常</div>
        );
      },
    },
  ];

  const columnsList = [
    columnsIn,
    columnsOut,
    columnsScrap,
    columnsExit,
    columnsBase,
  ];

  const [dataSource, setDataSource] = useState([]);

  const [pagination, setPagination] = useState({
    current: 1,
    total: 0,
    pageSize: 20,
  });

  const isLoadAll = useRef(false);

  const bottomAreaOfTable = useRef();

  const { run, loading } = useRequest(
    (data) => {
      data.page = pagination?.current || defaultParams.currentPage;
      data.page_size = pagination?.pageSize || defaultParams.pageSize;
      return queryStoreList(data);
    },
    {
      manual: true,
      formatResult: (result) => {
        setDataSource(result?.data);
      },
    },
  );

  const { loading: loadingExist, run: runExist } = useRequest(
    (data) => {
      data.page = pagination?.current || defaultParamsOfExit.currentPage;
      data.page_size = pagination?.pageSize || defaultParamsOfExit.pageSize;
      return queryInventoryList(data);
    },
    {
      manual: true,
      formatResult: (result) => {
        setDataSource(result?.data);
      },
    },
  );

  useEffect(() => {
    Number(type) !== PageType.warning && Number(type) !== PageType.base
      ? run(defaultParams)
      : runExist(defaultParamsOfExit);
  }, [type]);

  return (
    <PageContent closeable={false}>
      <PageTitle children={titles[type]} returnable />
      <div className="content-tab" style={{ marginTop: '0.1rem' }}>
        {Number(type) !== PageType.warning && Number(type) !== PageType.base ? (
          <Table
            sticky={{ offsetHeader: 0 }}
            loading={loading}
            dataSource={dataSource}
            columns={columnsList[type]}
            pagination={false}
          />
        ) : (
          <Table
            sticky={{ offsetHeader: 0 }}
            loading={loadingExist}
            dataSource={dataSource}
            columns={columnsList[type]}
            pagination={false}
          />
        )}
      </div>
    </PageContent>
  );
};
export default SparePartDetail;