index.jsx

import * as React from 'react';
  import { useState, useMemo, useRef } from 'react';
  import DrawerPro from '@/components/DrawerPro';
  import AutoTable from '@/components/AutoTable';
  import PremButton from '@/components/PremButton';
  import getcolumns from './columns';
  import { useRequest } from 'ahooks';
  import { doFetch } from '@/utils/doFetch';

  function WorkOrder(props) {
    const actionRef = useRef(),
      formRef = useRef();
    const [drawer, setdrawer] = useState({
      open: false,
    });
    const pathconfig = useMemo(() => {
      let pathconf = getcolumns(setdrawer)?.pathconfig ?? {};
      return pathconf;
    }, []);
    const { run, loading } = useRequest(doFetch, {
      manual: true,
      onSuccess: (res, params) => {
        if (res?.code == '0000') {
          actionRef?.current?.reload();
          setdrawer((s) => ({
            ...s,
            open: false,
          }));
        }
      },
    });

    const detail = (text, row, _, action) => {
      return (
        <PremButton
          btn={{
            size: 'small',
            type: 'link',
            onClick: () => {
              setdrawer((s) => ({
                ...s,
                open: true,
                item: row,
                title: '详情',
                val: 'detail',
                title: '详细信息',
              }));
            },
          }}
        >
          详情
        </PremButton>
      );
    };

    const edit = (text, row, _, action) => {
      return (
        <PremButton
          btn={{
            size: 'small',
            onClick: () => {
              setdrawer((s) => ({
                ...s,
                open: true,
                item: row,
                title: '编辑',
                val: 'edit',
              }));
            },
          }}
        >
          编辑
        </PremButton>
      );
    };

    const remove = (text, row, _, action) => {
      return (
        <PremButton
          pop={{
            title: '是否删除?',
            okText: '确认',
            cancelText: '取消',
            onConfirm: () => {
              run({ url: pathconfig?.delete || '/delete', params: { id: row?.id } });
            },
          }}
          btn={{
            size: 'small',
            type: 'danger',
          }}
        >
          删除
        </PremButton>
      );
    };

    const columns = useMemo(() => {
      let defcolumn = getcolumns(setdrawer)?.columns;
      return defcolumn.concat({
        title: '操作',
        valueType: 'option',
        width: 150,
        render: (text, row, _, action) => [
          pathconfig?.enabledetail && detail(text, row, _, action),
          pathconfig?.enableedit && edit(text, row, _, action),
          pathconfig?.enabledelete && remove(text, row, _, action),
        ],
      });
    }, []);

    return (
      <div style={{ position: 'relative' }}>
        <AutoTable
          pagetitle="保养工单"
          columns={columns}
          actionRef={actionRef}
          path={pathconfig?.list || '/ngic-auth/sysUser/query/page'}
          pageextra={pathconfig?.enableadd ? 'add' : null}
          resizeable={true}
          addconfig={{
            // access: 'sysDepartment_save',
            btn: {
              disabled: false,
              onClick: () => {
                setdrawer((s) => ({
                  ...s,
                  open: true,
                  item: null,
                  title: '新增',
                  val: 'add',
                }));
              },
            },
          }}
        />

        <DrawerPro
          fields={columns}
          params={{ id: drawer?.item?.id }}
          formRef={formRef}
          placement="right"
          detailpath={pathconfig?.detail || null}
          detailData={drawer?.item}
          defaultFormValue={drawer?.item}
          onClose={() => {
            setdrawer((s) => ({
              ...s,
              open: false,
            }));
          }}
          {...drawer}
          onFinish={(vals) => {
            if (drawer?.val == 'add') {
              run({ url: pathconfig?.add || '/add', params: { ...vals } });
            } else if (drawer?.val == 'edit') {
              run({ url: pathconfig?.edit || '/edit', params: { ...vals, id: drawer?.item?.id } });
            }
          }}
        />
      </div>
    );
  }

  export default WorkOrder;