index.jsx

import React, { useState, useEffect, useMemo, useRef } from 'react';
import DrawerPro from '@/components/DrawerPro';
import PremButton from '@/components/PremButton';
import AutoTable from '@/components/AutoTable';
import DetailPro from '@/components/DetailPro';
import useKeepAlive from "@/components/useKeepAlive";
import getcolumns from "./columns";
import { doFetch } from '@/utils/doFetch';
import _ from "lodash";
import { useRequest, useDebounceFn } from 'ahooks';
const columnsa = [
  {
    title: "物料编号-名称",
    dataIndex: "name",
    key: "name",
    render: (_, row) => {
      return (
        <span className='table-cell'>{row?.materialCode}-{row?.materialName}</span>
      );
    },
  },
  {
    title: "工单号",
    dataIndex: "jobNo",
    key: "jobNo",
  },
  {
    title: "入库数量",
    dataIndex: "inStoreNum",
    key: "inStoreNum",
  },
  {
    title: "库存单位",
    dataIndex: "productionUnitName",
    key: "productionUnitName",
  },
  {
    title: "未上架数量",
    dataIndex: "notUploadNum",
    key: "notUploadNum",
  }
],
  columnsb = [
    {
      title: "库位名称",
      dataIndex: "storePositionName",
      key: "storePositionName",
    },
    {
      title: "计划数量",
      dataIndex: "planNum",
      key: "planNum",
    },
    {
      title: "上架数量",
      dataIndex: "inStoreNum",
      key: "inStoreNum",
    },
    {
      title: "状态",
      dataIndex: "statusName",
      key: "statusName",
    },
  ];
function Instoreapplication() {
  let actionRef = useRef(), formRef = useRef();
  const { loading, run } = useRequest(doFetch, {
    manual: true,
    onSuccess: (res, params) => {
      if (res.code == '0000') {
        actionRef?.current?.reload();
        setdrawer((s) => ({
          ...s,
          open: false,
        }));
      }
    }
  });
  const debounceFn = useDebounceFn(
    async (changedValues) => {
      for (let i in changedValues) {
        if (i === 'trayCode') {
          if (changedValues[i]) {
            let stations = await doFetch({ url: '/ta_wms_auth/sysStation/queryLyPositionForFitOut', params: { trayNo: changedValues[i] } }),
              tables = await doFetch({ url: '/ta_wms_workmanship/wmsInStoreApplyDetail/queryListForProduct', params: { trayCode: changedValues[i] } });
            formRef?.current?.setFieldsValue({ sourceAreaPosition: stations?.data?.data?.stationName });
            setdrawer(s => {
              return {
                ...s,
                item: {
                  ...s.item,
                  sourceAreaPosition: stations?.data?.data?.stationName,
                  materiallist: tables?.data?.dataList ?? [],
                  stations: stations?.data?.data
                }

              }
            });
          } else {
            formRef?.current?.setFieldsValue({ sourceAreaPosition: '' });
            setdrawer(s => {
              return {
                ...s,
                item: {
                  ...s.item,
                  sourceAreaPosition: '',
                  materiallist: [],
                  stations: {}
                }

              }
            });
          }
        }
      }
    },
    {
      wait: 500,
    },
  );
  const [drawer, setdrawer] = useState({
    open: false,
  }),
    [tabKey, setTabKey] = useState('1');
  const tabList = useMemo(() => {
    return getcolumns();
  }, [tabKey]);
  const columns = useMemo(() => {
    let defcolumn = getcolumns(setdrawer).filter((it) => it.key == tabKey)[0]?.columns ?? [];
    return tabKey === '2' ? defcolumn : defcolumn.concat({
      title: "操作",
      valueType: "option",
      width: 80,
      render: (text, row, _, action) => rightExtra(text, row, _, action),
    });
  }, [tabKey]),
    dom = useMemo(() => {
      const renderType = {
        'detailaddon': <div>
          <div className='splittitle' style={{ borderWidth: 1, marginBottom: 16 }}>物料信息</div>
          <AutoTable
            columns={columnsa}
            withCard={false}
            pagination={false}
            expandable={{
              expandedRowRender: (record) => (
                <AutoTable
                  withCard={false}
                  pagination={false}
                  className="expandableTable"
                  columns={columnsb}
                  dataSource={record?.uploadList ?? []}
                />
              )
            }}
            dataSource={drawer?.item?.detailList ?? []}
            defaultExpandAllRows
            style={{ marginBottom: 16 }}
          />
          {
            tabKey === '2' && <DetailPro
              fields={[
                { title: "强制关单信息", valueType: "split" },
                { title: "关单人员", dataIndex: "closeUserName" },
                { title: "关单时间", dataIndex: "closeTime" },
              ]}
              detailData={drawer?.item}
            />
          }
        </div>,
        'add': <div>
          <div className='splittitle' style={{ borderWidth: 1, marginBottom: 16 }}>物料信息</div>
          <AutoTable
            columns={columnsa.filter(it => it.key != 'notUploadNum')}
            withCard={false}
            pagination={false}
            dataSource={drawer?.item?.materiallist ?? []}
            rowKey='jobNo'
          />
          <PremButton
            btn={{
              type: 'primary',
              style: { marginTop: 16 },
              onClick: () => {
                formRef?.current?.validateFields().then(val => {
                  let objs = _.pick(drawer?.item?.materiallist?.[0], ['jobNo', 'materialId', 'materialCode', 'materialName', 'productModel', 'factoryNo', 'inStoreNum', 'productionUnitName']);
                  let params = {
                    inStoreNo: val.inStoreNo,
                    trayCode: val.trayCode,
                    sourcePositionId: drawer?.item?.stations?.id,
                    detailList: [
                      {
                        ...objs
                      }
                    ]
                  };
                  run({ url: '/ta_wms_workmanship/wmsInStoreProduct/saveProductInFromPc', params })
                })
              },
              loading: loading
            }}
          >提交</PremButton>
        </div>
      };
      return renderType[drawer?.val];
    }, [tabKey, drawer?.val, drawer?.item,loading])
  const pathconfig = useMemo(() => {
    let defpath = getcolumns(setdrawer).filter((it) => it.key == tabKey)[0]?.pathconfig ?? {};
    return defpath;
  }, [tabKey]);
  const rightExtra = (text, row, _, action) => {
    return [
      (row.inStoreStatus === 0 || row.inStoreStatus === 1) && <PremButton
        key="delete"
        pop={{
          title: "是否关闭该入库单?",
          okText: "确认",
          cancelText: "取消",
          onConfirm: () => {
            run({
              url: "/ta_wms_workmanship/wmsInStoreProduct/closeProductIn",
              params: { id: row.id },
            });
          },
        }}
        btn={{
          size: "small",
          danger: true,
        }}
      >
        关单
      </PremButton>,
    ];
  };



  return <div>
    <AutoTable
      pagetitle='装配入库'
      columns={columns}
      path={drawer?.open ? null : pathconfig?.list}
      actionRef={actionRef}
      resizeable={false}
      tabList={tabList}
      tabKey={tabKey}
      onTabChange={(key) => {
        setTabKey(key);
      }}
      pageextra={tabKey == '1' ? 'add' : null}
      addconfig={{
        // access: 'sysDepartment_save',
        name: '新增',
        btn: {
          type: 'primary',
          onClick: () => {
            setdrawer((s) => ({
              ...s,
              open: true,
              title: '新增',
              val: 'add',
              item: {
                inStoreTypeName: '生产入库单',
                sourceAreaName: '装配区',
                targetAreaName: '成品缓存区'
              },
              fields: [
                {
                  title: "入库单号",
                  dataIndex: "inStoreNo",
                  key: "inStoreNo"
                },
                {
                  title: "托盘号",
                  dataIndex: "trayCode",
                  key: "trayCode",
                  formItemProps: { rules: [{ required: true, message: '此项为必填项' }] }
                },
                {
                  title: "入库类型",
                  dataIndex: "inStoreTypeName",
                  key: "inStoreTypeName",
                  fieldProps: {
                    disabled: true
                  }
                },
                {
                  title: "来源区域",
                  dataIndex: "sourceAreaName",
                  key: "sourceAreaName",
                  fieldProps: {
                    disabled: true
                  }
                },
                {
                  title: "来源位置",
                  dataIndex: "sourceAreaPosition",
                  key: "sourceAreaPosition",
                  fieldProps: {
                    disabled: true
                  }
                },
                {
                  title: "目标区域",
                  dataIndex: "targetAreaName",
                  key: "targetAreaName",
                  fieldProps: {
                    disabled: true
                  }
                },
              ]
            }));
          },
        },
      }}
    />
    <DrawerPro
      {...drawer}
      fields={drawer?.val === 'add' ? drawer?.fields : columns}
      detailData={drawer?.item}
      defaultFormValue={drawer?.item}
      placement="right"
      onClose={() => {
        setdrawer((s) => ({
          ...s,
          open: false,
        }));
      }}
      onValuesChange={(changedValues, allValues) => {
        debounceFn.run(changedValues)
      }}
      childrenposition={drawer.val === 'add' ? 'bottom' : null}
      submitter={false}
      formRef={formRef}
    >
      {dom}
    </DrawerPro>
  </div>
}

export default useKeepAlive(Instoreapplication);