Merge branch 'dev' of 10.0.0.22:lingxi/lingxi-business-system into dev

src/components/MellowCard/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-08-26 17:32:45
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-09-29 14:47:49
+ * @LastEditTime: 2020-12-29 15:06:05
  * @Description: 基于 antd Card 封装的适合项目 UI 的 Card，使用方式跟 antd Card 一样，这里只是修改了样式
  */
 import React from 'react';

src/components/NiceForm/components/AntUpload/index.tsx

+import React from 'react'
+import { connect } from '@formily/react-schema-renderer'
+import { Button, Upload as AntdUpload } from 'antd'
+import styled from 'styled-components'
+import { toArr, isArr, isEqual, mapStyledProps } from './shared'
+import {
+  LoadingOutlined,
+  PlusOutlined,
+  UploadOutlined,
+  InboxOutlined
+} from '@ant-design/icons'
+const { Dragger: UploadDragger } = AntdUpload
+
+const exts = [
+  {
+    ext: /\.docx?$/i,
+    icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png'
+  },
+  {
+    ext: /\.pptx?$/i,
+    icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png'
+  },
+  {
+    ext: /\.jpe?g$/i,
+    icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.pdf$/i,
+    icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.png$/i,
+    icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.eps$/i,
+    icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png'
+  },
+  {
+    ext: /\.ai$/i,
+    icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png'
+  },
+  {
+    ext: /\.gif$/i,
+    icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png'
+  },
+  {
+    ext: /\.svg$/i,
+    icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png'
+  },
+  {
+    ext: /\.xlsx?$/i,
+    icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png'
+  },
+  {
+    ext: /\.psd?$/i,
+    icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png'
+  },
+  {
+    ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)$/i,
+    icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png'
+  },
+  {
+    ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)$/i,
+    icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
+  },
+  {
+    ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)$/i,
+    icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png'
+  },
+  {
+    ext: /\.[^.]+$/i,
+    icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png'
+  }
+]
+
+const UploadPlaceholder = styled(props => (
+  <div>
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
+    <div className={'ant-upload-text'}>上传</div>
+  </div>
+))``
+
+const testOpts = (ext, options) => {
+  if (options && isArr(options.include)) {
+    return options.include.some(url => ext.test(url))
+  }
+
+  if (options && isArr(options.exclude)) {
+    return !options.exclude.some(url => ext.test(url))
+  }
+
+  return true
+}
+
+const getImageByUrl = (url, options) => {
+  for (let i = 0; i < exts.length; i++) {
+    if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) {
+      return exts[i].icon || url
+    }
+  }
+
+  return url
+}
+
+const normalizeFileList = fileList => {
+  if (fileList && fileList.length) {
+    return fileList.map(file => {
+      return file.response ? {
+        uid: file.uid,
+        status: file.status,
+        name: file.name,
+        url: file.downloadURL || file.imgURL || file.url,
+        ...file.response,
+        thumbUrl: file.imgURL || getImageByUrl(file.downloadURL || file.url, {
+          exclude: ['.png', '.jpg', '.jpeg', '.gif']
+        })
+      } : file;
+    })
+  }
+  return []
+}
+
+const shallowClone = val => {
+  let result = isArr(val)
+    ? [...val]
+    : typeof val === 'object'
+    ? { ...val }
+    : val
+  if (isArr(result)) {
+    result = result.map(item => ({
+      ...item,
+      // 必须要有一个不重复的uid
+      uid:
+        item.uid ||
+        Math.random()
+          .toFixed(16)
+          .slice(2, 10)
+    }))
+  }
+  return result
+}
+
+export interface IUploaderState {
+  value: any[]
+}
+
+// TODO 能不能直接引用 antd 里面的接口定义呢 ?
+export declare type UploadListType = 'text' | 'picture' | 'picture-card'
+
+export interface IUploaderProps {
+  onChange: (value: any[]) => void
+  locale: { [name: string]: any }
+  value: any[]
+  listType?: UploadListType
+}
+
+export const Upload = connect({
+  getProps: mapStyledProps
+})(
+  class Uploader extends React.Component<IUploaderProps, IUploaderState> {
+    public static defaultProps = {
+      action:
+        'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',
+      listType: 'text',
+      multiple: true,
+      className: 'antd-uploader'
+    }
+
+    readonly state: IUploaderState
+
+    constructor(props) {
+      super(props)
+      this.state = {
+        value: shallowClone(toArr(props.value))
+      }
+    }
+
+    public onRemoveHandler = file => {
+      const { value } = this.state
+      const fileList = []
+      value.forEach(item => {
+        if (item.uid !== file.uid) {
+          fileList.push(item)
+        }
+      })
+      this.props.onChange(fileList)
+    }
+
+    public onChangeHandler = ({ fileList }) => {
+      const { onChange } = this.props
+      fileList = toArr(fileList)
+      if (
+        fileList.every(file => {
+          if (
+            file.status === 'done' ||
+            file.imgURL ||
+            file.downloadURL ||
+            file.url ||
+            file.thumbUrl
+          )
+            return true
+          if (file.response) {
+            if (
+              file.response.imgURL ||
+              file.response.downloadURL ||
+              file.response.url ||
+              file.response.thumbUrl
+            )
+              return true
+          }
+          return false
+        }) &&
+        fileList.length
+      ) {
+        fileList = normalizeFileList(fileList)
+        this.setState(
+          {
+            value: fileList
+          },
+          () => {
+            onChange(fileList.length > 0 ? fileList : undefined)
+          }
+        )
+      } else {
+        this.setState({
+          value: fileList
+        })
+      }
+    }
+
+    public componentDidUpdate(preProps) {
+      if (this.props.value && !isEqual(this.props.value, preProps.value)) {
+        this.setState({
+          value: shallowClone(this.props.value)
+        })
+      }
+    }
+
+    public render() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { listType, locale, onChange, value, ...others } = this.props
+
+      if (listType.indexOf('card') > -1) {
+        return (
+          <AntdUpload
+            {...others}
+            fileList={this.state.value}
+            onChange={this.onChangeHandler}
+            onRemove={this.onRemoveHandler}
+            listType={'picture-card'}
+          >
+            <UploadPlaceholder />
+          </AntdUpload>
+        )
+      }
+      if (listType.indexOf('dragger') > -1) {
+        return (
+          <UploadDragger
+            {...others}
+            fileList={this.state.value}
+            onChange={this.onChangeHandler}
+            onRemove={this.onRemoveHandler}
+            // TODO image 类型是跟 picture 一样 ?
+            listType={listType.indexOf('image') > -1 ? 'picture' : 'text'}
+          >
+            <p className={'ant-upload-drag-icon'}>
+              <InboxOutlined />
+            </p>
+            <p className={'ant-upload-text'}>拖拽上传</p>
+          </UploadDragger>
+        )
+      }
+      return (
+        <AntdUpload
+          {...others}
+          fileList={this.state.value}
+          onChange={this.onChangeHandler}
+          onRemove={this.onRemoveHandler}
+          listType={listType}
+        >
+          <Button style={{ margin: '0 0 10px' }}>
+            <UploadOutlined />
+            {(locale && locale.uploadText) || '上传文件'}
+          </Button>
+        </AntdUpload>
+      )
+    }
+  }
+)
+
+export default Upload

src/components/NiceForm/components/AntUpload/shared.tsx

+import React from 'react'
+import { mapTextComponent, mapStyledProps, normalizeCol } from '@formily/antd'
+import { Select as AntSelect } from 'antd'
+import { SelectProps as AntSelectProps } from 'antd/lib/select'
+import styled from 'styled-components'
+import { isArr, FormPath } from '@formily/shared'
+export * from '@formily/shared'
+
+export const compose = (...args: any[]) => {
+  return (payload: any, ...extra: any[]) => {
+    return args.reduce((buf, fn) => {
+      return buf !== undefined ? fn(buf, ...extra) : fn(payload, ...extra)
+    }, payload)
+  }
+}
+
+interface SelectOption {
+  label: React.ReactText
+  value: any
+  [key: string]: any
+}
+
+type SelectProps = AntSelectProps & {
+  dataSource?: SelectOption[]
+}
+
+const createEnum = (enums: any) => {
+  if (isArr(enums)) {
+    return enums.map(item => {
+      if (typeof item === 'object') {
+        return {
+          ...item
+        }
+      } else {
+        return {
+          label: item,
+          value: item
+        }
+      }
+    })
+  }
+
+  return []
+}
+
+export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
+  const { dataSource = [], onChange, ...others } = props
+  const children = createEnum(dataSource).map(item => {
+    const { label, value, ...others } = item
+    return (
+      <AntSelect.Option
+        key={value}
+        {...others}
+        title={label as string}
+        value={value}
+      >
+        {label}
+      </AntSelect.Option>
+    )
+  })
+  return (
+    <AntSelect
+      className={props.className}
+      {...others}
+      onChange={(value: any, options: any) => {
+        onChange(
+          value,
+          isArr(options)
+            ? options.map(item => ({
+                ...item,
+                props: undefined
+              }))
+            : {
+                ...options,
+                props: undefined //干掉循环引用
+              }
+        )
+      }}
+    >
+      {children}
+    </AntSelect>
+  )
+})`
+  min-width: 100px;
+  width: 100%;
+`
+export const acceptEnum = (component: React.JSXElementConstructor<any>) => {
+  return ({ dataSource, ...others }) => {
+    if (dataSource) {
+      return React.createElement(Select, { dataSource, ...others })
+    } else {
+      return React.createElement(component, others)
+    }
+  }
+}
+
+export const transformDataSourceKey = (component, dataSourceKey) => {
+  return ({ dataSource, ...others }) => {
+    return React.createElement(component, {
+      [dataSourceKey]: dataSource,
+      ...others
+    })
+  }
+}
+
+export const createMatchUpdate = (name: string, path: string) => (
+  targetName: string,
+  targetPath: string,
+  callback: () => void
+) => {
+  if (targetName || targetPath) {
+    if (targetName) {
+      if (FormPath.parse(targetName).matchAliasGroup(name, path)) {
+        callback()
+      }
+    } else if (targetPath) {
+      if (FormPath.parse(targetPath).matchAliasGroup(name, path)) {
+        callback()
+      }
+    }
+  } else {
+    callback()
+  }
+}
+
+export { mapTextComponent, mapStyledProps, normalizeCol }

src/components/NiceForm/components/AntUpload/style.ts

+import 'antd/lib/upload/style/index'
\ No newline at end of file

src/components/NiceForm/index.tsx

@@ -26,6 +26,7 @@ import { Checkbox } from '@formily/antd-components';
 import DateSelect from './components/DateSelect';
 import DateRangePickerUnix from './components/DateRangePickerUnix';
 import SmilingFace from './components/SmilingFace';
+import AntUpload from './components/AntUpload';
 import './index.less'
 
 export interface NiceFormProps extends IAntdSchemaFormProps {}
@@ -96,6 +97,7 @@ export const componentExport = {
   DateSelect,
   DateRangePickerUnix,
   SmilingFace,
+  AntUpload,
 }
 const NiceForm: React.FC<NiceFormProps> = props => {
   const { children, components, ...reset } = props;

src/pages/member/components/SincerityInfo/index.tsx

@@ -550,9 +550,10 @@ const SincerityInfo: React.FC<SincerityInfoProps> = ({
         <Col span={24}>
           <Spin spinning={Boolean(basicInfo.loading)}>
             <Row gutter={24}>
-              <Col span={8}>
+              <Col flex="386px">
                 <MellowCard
                   title="信用积分"
+                  fullHeight
                 >
                   <Pie
                     hasLegend
@@ -566,9 +567,9 @@ const SincerityInfo: React.FC<SincerityInfoProps> = ({
               </Col>
 
               {basicInfo.loading === false && (
-                <Col span={16}>
+                <Col flex="1">
                   <div className={styles.tofo}>
-                    <MellowCard>
+                    <MellowCard fullHeight>
                       {integralItems.map((item, index) => (
                         <Card.Grid key={item.id} className={styles['tofo-item']}>
                           <ContentBox

src/pages/returnManage/components/DetailInfo/index.tsx

@@ -282,7 +282,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
   
   // 退款
   const handleRefund = (values): Promise<any> => {
-    const { id, ...rest } = values;
+    const { id, refundAmount, ...rest } = values;
     return PublicApi.postAsReturnGoodsRefund({
       dataId: id, 
       ...rest, 
@@ -400,6 +400,9 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
                     dataSource={detailInfo && detailInfo.refundList ? detailInfo.refundList : []}
                     onRefund={handleRefund}
                     isPurchaser={isPurchaser}
+                    innerStatus={detailInfo?.innerStatus}
+                    purchaserId={detailInfo?.memberId}
+                    purchaserRoleId={detailInfo?.roleId}
                   />
                 </Suspense>
               </Col>

src/pages/returnManage/components/RefundModal/Balance/index.tsx

-import React, { useState } from 'react';
-import { Descriptions, Space, Button } from 'antd';
-
-interface bankAccount {
-  id: number, 
-  name: string, 
-  bankAccount: string, 
-  bankDeposit: string, 
-  memberId: number, 
-};
+import React, { useEffect, useState } from 'react';
+import { Descriptions, Space, Button, Spin } from 'antd';
+import { PublicApi } from '@/services/api';
 
 interface BalanceProps {
   /**
@@ -26,6 +19,14 @@ interface BalanceProps {
    * 弹窗提交 loading
    */
   submitLoading: boolean;
+  /**
+   * 采购商id
+   */
+  purchaserId: number,
+  /**
+   * 采购商角色id
+   */
+  purchaserRoleId: number,
 };
 
 const Balance: React.FC<BalanceProps> = ({
@@ -33,21 +34,39 @@ const Balance: React.FC<BalanceProps> = ({
   handleConfirm, 
   value, 
   submitLoading, 
+  purchaserId, 
+  purchaserRoleId, 
 }) => {
-  const [bankAccount, setBankAccount] = useState<bankAccount>({
-    id: 0, 
-    name: '', 
-    bankAccount: '', 
-    bankDeposit: '', 
-    memberId: 0, 
+  const [balance, setBalance] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const getPayAssetAccountGetUserBalance = () => {
+    if (!purchaserId || !purchaserRoleId) {
+      return;
+    }
+    setLoading(true);
+    PublicApi.getPayAssetAccountGetChildUserBalance({
+      childMemberId: `${purchaserId}`, 
+      childMemberRoleId: `${purchaserRoleId}`, 
+    }).then(res => {
+      if (res.code === 1000) {
+        setBalance(res.data);
+      }
+    }).finally(() => {
+      setLoading(false);
     });
+  };
+
+  useEffect(() => {
+    getPayAssetAccountGetUserBalance();
+  }, []);
 
   return (
-    <>
+    <Spin spinning={loading}>
       <Descriptions title="账户余额信息" column={1}>
-        <Descriptions.Item label="账户可用余额">￥500000.00</Descriptions.Item>
+        <Descriptions.Item label="账户可用余额">￥{balance}</Descriptions.Item>
         <Descriptions.Item label="当前退款金额">
-          <span style={{ color: '#EF6260' }}>￥6000.00</span>
+          <span style={{ color: '#EF6260' }}>￥{value.refundAmount}</span>
         </Descriptions.Item>
       </Descriptions>
 
@@ -65,7 +84,7 @@ const Balance: React.FC<BalanceProps> = ({
           </Button>
         </Space>
       </div>
-    </>
+    </Spin>
   )
 };
 

src/pages/returnManage/components/RefundModal/UploadVoucher/index.tsx

-import React, { useState } from 'react';
-import { Button, Space, message } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Button, Space, message, Spin } from 'antd';
 import { createFormActions } from '@formily/antd';
+import { PublicApi } from '@/services/api';
 import NiceForm from '@/components/NiceForm';
 import { uploadVoucherModalSchema } from './schema';
 
 const uploadVoucherFormActions = createFormActions();
 
-interface bankAccount {
+interface BankAccount {
   name: string, 
   bankAccount: string, 
   bankDeposit: string, 
+  id: number,
 };
 
 interface UploadVoucherProps {
@@ -29,6 +31,14 @@ interface UploadVoucherProps {
    * 弹窗提交 loading
    */
   submitLoading: boolean;
+  /**
+   * 采购商id
+   */
+  purchaserId: number,
+  /**
+   * 采购商角色id
+   */
+  purchaserRoleId: number,
 };
 
 const UploadVoucher: React.FC<UploadVoucherProps> = ({
@@ -36,15 +46,40 @@ const UploadVoucher: React.FC<UploadVoucherProps> = ({
   handleModalVisible, 
   value, 
   submitLoading, 
+  purchaserId, 
+  purchaserRoleId, 
 }) => {
-  const [bankAccount, setBankAccount] = useState<bankAccount>({
+  const [bankAccount, setBankAccount] = useState<BankAccount>({
     name: '', 
     bankAccount: '', 
     bankDeposit: '', 
+    id: 0,
   });
+  const [loading, setLoading] = useState(false);
+
+  // 获取对公账户信息
+  const getSettleAccountsGetMemberAccountConfig = () => {
+    if (!purchaserId || !purchaserRoleId) {
+      return;
+    }
+    setLoading(true);
+    PublicApi.getSettleAccountsGetMemberAccountConfig({
+      memberId: `${purchaserId}`, 
+      roleId: `${purchaserRoleId}`, 
+    }).then(res => {
+      if (res.code === 1000) {
+        setBankAccount(res.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    getSettleAccountsGetMemberAccountConfig();
+  }, []);
 
   const beforeUploadVoucher = file => {
-    console.log(file.size)
     if (file.size / 1024 > 200) {
       message.warning('图片大小超过200K');
       return Promise.reject();
@@ -52,17 +87,17 @@ const UploadVoucher: React.FC<UploadVoucherProps> = ({
   };
 
   const handleUploadVoucherSubmit = values => {
-    const { fileList = [] } = values;
+    const { fileList = [], id, ...rest } = values;
 
     if (handleConfirm) {
-      if (!bankAccount || !bankAccount.name) {
+      if (!bankAccount || !bankAccount.id) {
         message.error('没有收款账户相关信息，无法退款');
         return;
       }
       handleConfirm({
         ...value, 
         payProve: {
-          ...values, 
+          ...rest, 
           fileList: fileList.map(item => item.status === 'done' && ({
             name: item.name, 
             proveUrl: item.data.url,
@@ -73,10 +108,10 @@ const UploadVoucher: React.FC<UploadVoucherProps> = ({
   };
 
   return (
-    <>
+    <Spin spinning={loading}>
       <NiceForm
         previewPlaceholder=""
-        initialValues={bankAccount}
+        value={bankAccount}
         effects={($, { setFieldState }) => {
           
         }}
@@ -102,7 +137,7 @@ const UploadVoucher: React.FC<UploadVoucherProps> = ({
           </Button>
         </Space>
       </div>
-    </>
+    </Spin>
   )
 };
 

src/pages/returnManage/components/RefundModal/index.tsx

@@ -41,6 +41,13 @@ const RefundModal: React.FC<RefundModalProps> = ({
   value, 
   submitLoading, 
 }) => {
+  const { 
+    purchaserId, 
+    purchaserRoleId, 
+    supplierId, 
+    supplierRoleId, 
+    ...rest
+  } = value;
 
   const tempMap = {
     uploadVoucher: {
@@ -49,7 +56,9 @@ const RefundModal: React.FC<RefundModalProps> = ({
       render: () => (
         <Suspense fallback={null}>
           <UploadVoucher
-            value={value}
+            value={rest}
+            purchaserId={purchaserId}
+            purchaserRoleId={purchaserRoleId}
             handleConfirm={handleConfirm}
             handleModalVisible={handleModalVisible}
             submitLoading={submitLoading}
@@ -63,7 +72,9 @@ const RefundModal: React.FC<RefundModalProps> = ({
       render: () => (
         <Suspense fallback={null}>
           <Balance
-            value={value}
+            value={rest}
+            purchaserId={purchaserId}
+            purchaserRoleId={purchaserRoleId}
             handleConfirm={handleConfirm}
             handleModalVisible={handleModalVisible}
             submitLoading={submitLoading}
@@ -77,7 +88,7 @@ const RefundModal: React.FC<RefundModalProps> = ({
       render: () => (
         <Suspense fallback={null}>
           <Credit
-            value={value}
+            value={rest}
             handleConfirm={handleConfirm}
             handleModalVisible={handleModalVisible}
             submitLoading={submitLoading}
@@ -91,7 +102,7 @@ const RefundModal: React.FC<RefundModalProps> = ({
       render: () => (
         <Suspense fallback={null}>
           <COD
-            value={value}
+            value={rest}
             handleConfirm={handleConfirm}
             handleModalVisible={handleModalVisible}
             submitLoading={submitLoading}

src/pages/returnManage/components/ReturnDetailInfo/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-05 18:02:18
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-12-15 10:26:44
+ * @LastEditTime: 2020-12-29 13:50:18
  * @Description: 退款明细
  */
 import React, { useState } from 'react';
@@ -18,6 +18,8 @@ import {
   PAY_CHANNEL_BALANCE, 
   PAY_CHANNEL_CREDIT, 
   PAY_CHANNEL_COD, 
+  RETURN_INNER_STATUS_TO_BE_REFUNDED, 
+  RETURN_INNER_STATUS_UNCONFIRMED_REFUNDED, 
 } from '@/constants';
 import Stamp from '../Stamp';
 import CheckVoucherModal from '../CheckVoucherModal';
@@ -51,6 +53,18 @@ interface ReturnDetailInfoProps {
    * 是否是采购商
    */
   isPurchaser?: boolean;
+  /**
+   * 退货申请单内部状态
+   */
+  innerStatus: number;
+  /**
+   * 采购商id
+   */
+  purchaserId: number,
+  /**
+   * 采购商角色id
+   */
+  purchaserRoleId: number,
 };
 
 const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
@@ -58,6 +72,9 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
   onRefund, 
   onConfirm, 
   isPurchaser = false,
+  innerStatus, 
+  purchaserId, 
+  purchaserRoleId, 
 }) => {
   const [visibleResult, setVisibleResult] = useState(false);
   const [notReceivedLoading, setNotReceivedLoading] = useState(false);
@@ -135,20 +152,29 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
     },
   ];
 
-  const handleRefund = (id, channel) => {
+  const handleRefund = (id, channel, amount) => {
     switch(channel) {
       // 余额支付
       case PAY_CHANNEL_BALANCE: {
         setModalName('balance');
         setRefundModalVisible(true);
-        setRefundModalValue({ id });
+        setRefundModalValue({
+          id, 
+          refundAmount: amount, 
+          purchaserId, 
+          purchaserRoleId, 
+        });
         break;
       };
       // 线下支付
       case PAY_CHANNEL_OFFLINE: {
         setModalName('uploadVoucher');
         setRefundModalVisible(true);
-        setRefundModalValue({ id });
+        setRefundModalValue({ 
+          id, 
+          purchaserId, 
+          purchaserRoleId, 
+        });
         break;
       };
       // 授信支付
@@ -207,9 +233,11 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
 
   const handleRefundConfirm = (values, modalName) => {
     setSubmitLoading(true);
+    if (onRefund) {
       onRefund(values).finally(() => {
         setSubmitLoading(false);
       });
+    }
   };
 
   return (
@@ -219,7 +247,7 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
         dataSource={dataSource}
         columns={columns}
         loading={false}
-        pagination={null}
+        pagination={false}
         expandable={{
           expandIcon: ({ expanded, onExpand, record }) =>
             expanded ? (
@@ -255,24 +283,33 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
 
                     <div className={styles['deliver-item-actions']}>
                       {
-                        !isPurchaser && (
+                        !isPurchaser && 
+                        innerStatus === RETURN_INNER_STATUS_TO_BE_REFUNDED && 
+                        !!item.canRefund && (
                           item.outerStatus === REFUND_OUTER_STATUS_NOT_RECEIVED ||  
                           item.innerStatus === REFUND_INNER_STATUS_NO_REFUND || 
                           item.innerStatus === REFUND_INNER_STATUS_REFUND_FAILED 
                         ) && (
                           <div 
                             className={styles['deliver-item-return']}
-                            onClick={() => handleRefund(item.refundId, item.channel)}
+                            onClick={() => handleRefund(item.refundId, item.channel, item.refundAmount)}
                           >
                             退款
                           </div>
                         )
                       }
+                      <div 
+                        className={styles['deliver-item-return']}
+                        onClick={() => handleRefund(item.refundId, PAY_CHANNEL_OFFLINE, item.refundAmount)}
+                      >
+                        退款
+                      </div>
                       {/* 线下支付 才有确认 与 查看功能 */}
                       {item.channel === PAY_CHANNEL_OFFLINE && (
                         <>
                           {
-                            isPurchaser && (
+                            isPurchaser && 
+                            innerStatus === RETURN_INNER_STATUS_UNCONFIRMED_REFUNDED && (
                               item.outerStatus === REFUND_OUTER_STATUS_UNCONFIRMED_REFUND || 
                               item.outerStatus === REFUND_OUTER_STATUS_NOT_RECEIVED 
                             ) && (