/** * @description 商品业务-资料编辑/查看 */importReact, { useRef, useState, useEffect } from'react';
importPropTypesfrom'prop-types';
import { Form, Modal, Input, Button, Space } from'antd';
import { ExclamationCircleFilled } from'@ant-design/icons';
import { Upload } from'@/components';
constProductMaterial= ({ visible, data, onCancel }) => {
constformRef=useRef({});
constlayout= {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
  };
const [confirmLoading, setConfirmLoading] =useState(false);
const [productItem, setProductItem] =useState({});
/**   * 操作-关闭弹框   * @param {string} type 要关闭的弹框key值   * @param {boolean} refresh 弹窗关闭后是否刷新列表   * @return {void} 无   */consthandleCancel=refresh=> {
setConfirmLoading(false);
setProductItem({});
onCancel&&onCancel(refresh);
  };
/**   * 操作-确定按钮   * @param {void} 无   * @return {void} 无   */consthandleOk= () => {
formRef.current.submit();
  };
/** @name 商品对象  */constproductObj= {
edit: {
modalTitle: '资料上传', // 弹窗展示标题productLabel: '详情文件', // 详情项label值endorseLabel: '批注文件', // 批注项label值footer: (
<><ButtononClick={() =>handleCancel(false)}>取消</Button><Buttontype="primary"onClick={handleOk}>确定</Button></>      ), // 底部按钮组    },
view: {
modalTitle: '资料查看',
productLabel: '详情查看',
endorseLabel: '批注查看',
footer: <ButtononClick={() =>handleCancel(false)}>关闭</Button>,    },
  };
useEffect(() => {
if (data.modalType) {
letproductItemInit=productObj[data.modalType];
productItemInit.editFlag=data.modalType==='edit'?false : true; // 是否可以编辑的布尔值setProductItem(productItemInit);
    }
  }, [visible]);
/**   * 操作-上传   * @param {string} type 上传图片类型   * @return {void} 无   */constuploadCallback=type=> {
returnurl=> {
formRef.current.setFieldsValue({
        [type]: url,
      });
    };
  };
/**   * 操作-提交   * @param {Object} value 表单数据对象   * @return {void} 无   */consthandleSubmit=value=> {
// 请求接口提交表单数据，请求成功之后进行结果回调到父组件onCancel&&onCancel();
  };
return (
<Modaltitle={productItem.modalTitle} width={800} visible={visible} confirmLoading={confirmLoading} footer={productItem.footer} onCancel={() =>handleCancel(false)}><Form {...layout} labelAlign="left"onFinish={handleSubmit} ref={formRef}>        {productItem.editFlag? (
<Spacestyle={{ marginBottom: '15px' }}><ExclamationCircleFilledstyle={{ color: '#d80000', fontSize: '16px' }} /> 上传文件的格式不限</Space>        ) : null}
<Form.Itemlabel={productItem.productLabel} name="productFileUrl"rules={[{ required: true, message: `请上传${productItem.productLabel}` }]}><Uploadcallback={uploadCallback('productFileUrl')} accept="*"limit={Infinity} disabled={productItem.disabled} isArray="true"/></Form.Item><Form.Itemlabel={productItem.endorseLabel} name="endorseFileUrl"><Uploadcallback={uploadCallback('endorseFileUrl')} accept="*"limit={Infinity} disabled={productItem.disabled} isArray="true"/></Form.Item><Form.Itemlabel="其他资料"name="otherFileUrl"><Uploadcallback={uploadCallback('otherFileUrl')} accept="*"limit={Infinity} disabled={productItem.disabled} isArray="true"/></Form.Item><Form.Itemname="remark"label="修改备注"><Input.TextAreamaxLength={1000} rows={3} placeholder="请填写修改备注"disabled={productItem.disabled} /></Form.Item></Form></Modal>  );
};
ProductMaterial.propTypes= {
visible: PropTypes.bool.isRequired, // 弹窗关闭控制变量 必传data: PropTypes.object.isRequired, // 组件入参 必传onCancel: PropTypes.func, // 弹窗关闭事件};
ProductMaterial.defaultProps= {
visible: false,
data: {},
};
exportdefaultProductMaterial;

/** * @description 商品管理-首页 */importReact, { useState, useRef } from'react';
import { Button } from'antd';
import { List } from'@/components';
import { PRODUCT_COLUMNS, PRODUCT_FIELDS } from'@/constants/product';
import { list } from'@/api/product';
// 业务组件引入import { ProductMaterial } from'@/bundleComponents';
constProductList= () => {
constlistRef=useRef();
letcolumns=_.cloneDeep(PRODUCT_COLUMNS);
const [visible, setVisible] =useState(false);
const [recordData, setRecordData] =useState(false);
/**   * 操作   * @param {boolean} visibleType 弹窗是否展示布尔值   * @param {Object} data 数据对象   * @param {boolean} refresh 列表是否刷新布尔值   * @return {void} 无   */constoperate= (visibleType, data= {}, refresh) => {
setVisible(visibleType);
setRecordData(data);
// =>true: 刷新列表if (refresh) {
// 刷新列表    }
  };
columns=columns.concat([
    {
title: '操作',
width: 200,
fixed: 'right',
// eslint-disable-next-linerender: (text, record) => (
<>          {/* 查看操作 */}
<ButtononClick={() => {
operate(true, { ...record, modalType: 'view' });
            }}
>资料查看</Button>          {/* 上传操作 */}
<Buttontype="primary"onClick={() => {
operate(true, { ...record, modalType: 'edit' });
            }}
style={{ marginLeft: '10px' }}
>资料上传</Button></>      ),
    },
  ]);
return (
<div><Listfields={PRODUCT_FIELDS} columns={columns} http={list} ref={listRef} />      {/* 业务组件使用 */}
<ProductMaterialvisible={visible} data={recordData} onCancel={refresh=>operate(false, {}, refresh)} /></div>  );
};
exportdefaultProductList;