feat: 销售发货明细增加连番号修改功能

packages/app/src/apis/finishProduct.ts

@@ -1,5 +1,7 @@
 import {
   BaseListResult,
+  BaseResult,
+  EditFinishProductParams,
   FinishProductListStreamInListData,
   FinishProductListStreamOutListData,
   GetFinishProductListStreamParams,
@@ -69,3 +71,12 @@ export function otherGoodsOut(data: OtherGoodsOutParams): BaseListResult {
     url: `${BASE_URL}/otherAskGoods`,
   });
 }
+
+/** 修改产成品出库流水连番号 */
+export function editFinishProduct(data: EditFinishProductParams): BaseResult {
+  return request({
+    method: 'PUT',
+    url: `${BASE_URL}/getRemovalHalfUpdSerial`,
+    data,
+  });
+}

packages/app/src/models/request/finishProduct.ts

@@ -81,3 +81,10 @@ export type OtherGoodsOutParams = {
   /** 公司tldId */
   accountSleeve: string;
 };
+
+/** 产成品修改连番号 */
+export type EditFinishProductParams = {
+  id: string;
+  /** 连番号 */
+  serial: string;
+};

packages/app/src/models/response/finishProduct.ts

@@ -51,6 +51,8 @@ export type FinishProductListStreamOutListData = {
   realName: string;
   /** 所属公司 */
   companyName: string;
+  /** 连番号 */
+  serial: string | null;
 };
 
 /** 原材料入库流水 */

packages/app/src/pages/product-out-stream/table/hooks.tsx

@@ -0,0 +1,125 @@
+import {
+  CODE_COL_WIDTH,
+  COMPANY_COL_WIDTH,
+  MATERIAL_CODE_COL_WIDTH,
+  MATERIAL_NAME_COL_WIDTH,
+  MIDDLE_TABLE_WIDTH,
+  NORMAL_TABLE_WIDTH,
+  SMALL_TABLE_WIDTH,
+  SUPPLIER_COL_WIDTH,
+  WBS_COL_WIDTH,
+} from '@utils';
+import {ColumnsType} from 'antd/es/table';
+import {FinishProductListStreamOutListData} from '@models';
+import {useSupertube, useTableModalEvent} from '@hooks';
+import {Button} from 'antd';
+import {useMemo} from 'react';
+
+const columns: ColumnsType<FinishProductListStreamOutListData> = [
+  {
+    title: '销售单编号',
+    dataIndex: 'deliveryCode',
+    key: 'deliveryCode',
+    width: CODE_COL_WIDTH,
+  },
+  {
+    title: '出库编号',
+    dataIndex: 'storageCode',
+    key: 'storageCode',
+    width: CODE_COL_WIDTH,
+  },
+  {
+    title: '物料编号',
+    dataIndex: 'wllbCode',
+    key: 'wllbCode',
+    width: MATERIAL_CODE_COL_WIDTH,
+  },
+  {
+    title: '物料名称',
+    dataIndex: 'materialName',
+    key: 'materialName',
+    width: MATERIAL_NAME_COL_WIDTH,
+  },
+  {
+    title: '出库数量',
+    dataIndex: 'num',
+    key: 'num',
+    width: SMALL_TABLE_WIDTH,
+    align: 'right',
+  },
+  {
+    title: '所属公司',
+    dataIndex: 'companyName',
+    key: 'companyName',
+    width: COMPANY_COL_WIDTH,
+  },
+  {title: '公司编号', dataIndex: 'companyNumber', width: SMALL_TABLE_WIDTH},
+  {
+    title: '客户名称',
+    dataIndex: 'customerName',
+    key: 'customerName',
+    width: SUPPLIER_COL_WIDTH,
+  },
+  {
+    title: '出库时间',
+    dataIndex: 'scrq',
+    key: 'scrq',
+    width: MIDDLE_TABLE_WIDTH,
+  },
+  {
+    title: '出库人',
+    dataIndex: 'userName',
+    key: 'userName',
+    width: NORMAL_TABLE_WIDTH,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'realName',
+    key: 'realName',
+    width: NORMAL_TABLE_WIDTH,
+  },
+  {
+    title: 'WBS编号',
+    dataIndex: 'wbs',
+    key: 'wbs',
+    width: WBS_COL_WIDTH,
+  },
+  {title: '连番号', dataIndex: 'serial', width: NORMAL_TABLE_WIDTH},
+];
+
+export function useColumns() {
+  const isSuper = useSupertube();
+  const [{editId, visible}, {onClose, onEdit}] = useTableModalEvent();
+
+  const tableColumns = useMemo(
+    function () {
+      const tableColumns: ColumnsType<FinishProductListStreamOutListData> = [
+        ...columns,
+      ];
+
+      if (isSuper) {
+        tableColumns.push({
+          title: '操作',
+          dataIndex: 'id',
+          fixed: 'right',
+          render(_, {id}) {
+            return (
+              <Button
+                type='text'
+                className='ant-text-btn-color-primary'
+                onClick={onEdit(id)}
+              >
+                修改
+              </Button>
+            );
+          },
+        });
+      }
+
+      return tableColumns;
+    },
+    [isSuper, onEdit],
+  );
+
+  return [{tableColumns, editId, visible}, {onClose}] as const;
+}

packages/app/src/pages/product-out-stream/table/index.tsx

@@ -1,20 +1,7 @@
 import {FC} from 'react';
-import {ColumnsType} from 'antd/es/table';
-import {FinishProductListStreamOutListData} from '@models';
 import {Card} from 'antd';
 import {Table, TableTools} from '@components';
 import {context, pageContext, searchContext} from '../context';
-import {
-  CODE_COL_WIDTH,
-  COMPANY_COL_WIDTH,
-  MATERIAL_CODE_COL_WIDTH,
-  MATERIAL_NAME_COL_WIDTH,
-  MIDDLE_TABLE_WIDTH,
-  NORMAL_TABLE_WIDTH,
-  SMALL_TABLE_WIDTH,
-  SUPPLIER_COL_WIDTH,
-  WBS_COL_WIDTH,
-} from '@utils';
 import {
   getFinishProductOutStreamExport,
   getFinishProductOutStreamList,
@@ -24,112 +11,52 @@ import {
   useQueryTableList,
   useTableExportEvent,
 } from '@hooks';
-
-const columns: ColumnsType<FinishProductListStreamOutListData> = [
-  {
-    title: '销售单编号',
-    dataIndex: 'deliveryCode',
-    key: 'deliveryCode',
-    width: CODE_COL_WIDTH,
-  },
-  {
-    title: '出库编号',
-    dataIndex: 'storageCode',
-    key: 'storageCode',
-    width: CODE_COL_WIDTH,
-  },
-  {
-    title: '物料编号',
-    dataIndex: 'wllbCode',
-    key: 'wllbCode',
-    width: MATERIAL_CODE_COL_WIDTH,
-  },
-  {
-    title: '物料名称',
-    dataIndex: 'materialName',
-    key: 'materialName',
-    width: MATERIAL_NAME_COL_WIDTH,
-  },
-  {
-    title: '出库数量',
-    dataIndex: 'num',
-    key: 'num',
-    width: SMALL_TABLE_WIDTH,
-    align: 'right',
-  },
-  {
-    title: '所属公司',
-    dataIndex: 'companyName',
-    key: 'companyName',
-    width: COMPANY_COL_WIDTH,
-  },
-  {title: '公司编号', dataIndex: 'companyNumber', width: SMALL_TABLE_WIDTH},
-  {
-    title: '客户名称',
-    dataIndex: 'customerName',
-    key: 'customerName',
-    width: SUPPLIER_COL_WIDTH,
-  },
-  {
-    title: '出库时间',
-    dataIndex: 'scrq',
-    key: 'scrq',
-    width: MIDDLE_TABLE_WIDTH,
-  },
-  {
-    title: '出库人',
-    dataIndex: 'userName',
-    key: 'userName',
-    width: NORMAL_TABLE_WIDTH,
-  },
-  {
-    title: '姓名',
-    dataIndex: 'realName',
-    key: 'realName',
-    width: NORMAL_TABLE_WIDTH,
-  },
-  {
-    title: 'WBS编号',
-    dataIndex: 'wbs',
-    key: 'wbs',
-    width: WBS_COL_WIDTH,
-  },
-];
+import {useColumns} from './hooks';
+import EditModal from './modal';
 
 const TableList: FC = function () {
   const params = useContextSection(context, state => state[0]);
-
-  const [{data, count}] = useQueryTableList({
+  const [{data, count}, {refetch}] = useQueryTableList({
     queryFn: getFinishProductOutStreamList,
     params,
     pageContext,
     searchContext,
   });
-
   const [isExporting, onExport] = useTableExportEvent({
     pageContext,
     context,
     fn: getFinishProductOutStreamExport,
   });
 
+  const [{tableColumns: columns, editId, visible}, {onClose}] = useColumns();
+
   return (
-    <Card className='table-wrapper'>
-      <TableTools
-        isExporting={isExporting}
-        onExport={onExport}
-        pageContext={pageContext}
-        searchContext={searchContext}
-      />
+    <>
+      <Card className='table-wrapper'>
+        <TableTools
+          isExporting={isExporting}
+          onExport={onExport}
+          pageContext={pageContext}
+          searchContext={searchContext}
+        />
+
+        <Table
+          columns={columns}
+          data={data}
+          data-testid='product_out_stream_table'
+          count={count}
+          pageContext={pageContext}
+          searchContext={searchContext}
+        />
+      </Card>
 
-      <Table
-        columns={columns}
-        data={data}
-        data-testid='product_out_stream_table'
-        count={count}
-        pageContext={pageContext}
-        searchContext={searchContext}
+      <EditModal
+        visible={visible}
+        onFetch={refetch}
+        id={editId}
+        onClose={onClose}
       />
-    </Card>
+    </>
   );
 };
 

packages/app/src/pages/product-out-stream/table/modal/hooks.ts

@@ -0,0 +1,73 @@
+import {editFinishProduct, getFinishProductOutStreamList} from '@apis';
+import {yupResolver} from '@hookform/resolvers/yup';
+import {FinishProductListStreamOutListData} from '@models';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+import {message} from 'antd';
+import {find} from 'lodash-es';
+import {useEffect} from 'react';
+import {useForm} from 'react-hook-form';
+import {object, string} from 'yup';
+
+type FormState = {
+  serial: string;
+};
+
+const validate = object({
+  serial: string().required('请输入连番号'),
+});
+
+export function useFormState(
+  id: string,
+  visible: boolean,
+  options: {
+    onClose: () => void;
+    onFetch: () => void;
+  },
+) {
+  const {control, setValue, clearErrors, handleSubmit} = useForm<FormState>({
+    resolver: yupResolver(validate),
+    defaultValues: {
+      serial: '',
+    },
+  });
+
+  useEffect(
+    function () {
+      visible && clearErrors();
+    },
+    [clearErrors, visible],
+  );
+
+  const queryClient = useQueryClient();
+  useEffect(
+    function () {
+      const data = queryClient.getQueryData<
+        FinishProductListStreamOutListData[]
+      >([getFinishProductOutStreamList.name], {exact: false});
+      if (!data) return;
+
+      const result = find(data, val => val.id === id);
+      if (!result) return;
+
+      setValue('serial', result?.serial ?? '');
+    },
+    [id, queryClient, setValue],
+  );
+
+  const {isLoading, mutate} = useMutation({
+    mutationFn: editFinishProduct,
+    onSuccess({msg}) {
+      if (msg === '200') {
+        options.onClose();
+        options.onFetch();
+        message.success('修改成功');
+      }
+    },
+  });
+
+  const onSubmit = handleSubmit(function ({serial}) {
+    mutate({id, serial});
+  });
+
+  return [{control, isLoading}, {onSubmit}] as const;
+}

packages/app/src/pages/product-out-stream/table/modal/index.tsx

@@ -0,0 +1,34 @@
+import {Modal, ModalField} from '@components';
+import {FC} from 'react';
+import {useFormState} from './hooks';
+
+type Props = {
+  onClose: () => void;
+  onFetch: () => void;
+  id: string;
+  visible: boolean;
+};
+
+const EditModal: FC<Props> = function ({id, visible, onClose, onFetch}) {
+  const [{control, isLoading}, {onSubmit}] = useFormState(id, visible, {
+    onFetch,
+    onClose,
+  });
+
+  return (
+    <Modal
+      visible={visible}
+      title='修改发货明细'
+      onClose={onClose}
+      testId='product_out_stream_modal'
+      onSubmit={onSubmit}
+      isLoading={isLoading}
+      height='460px'
+      width='600px'
+    >
+      <ModalField label='连番号' control={control} name='serial' />
+    </Modal>
+  );
+};
+
+export default EditModal;