897 lines
39 KiB
TypeScript
897 lines
39 KiB
TypeScript
import moment from 'moment';
|
||
import { connect } from 'umi';
|
||
import { useRef, useState } from 'react';
|
||
import useRequest from '@ahooksjs/use-request';
|
||
import ProTable, { EditableProTable } from '@ant-design/pro-table';
|
||
import ProDescriptions from '@ant-design/pro-descriptions';
|
||
import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||
import { PageContainer } from '@ant-design/pro-layout';
|
||
import { Button, Col, Drawer, message, Popconfirm, Row, Space, Image, Modal, Form, Switch, Upload, Typography } from 'antd';
|
||
import { ModalForm, ProFormDatePicker, ProFormSelect, ProFormText, ProFormTextArea, ProFormUploadButton } from '@ant-design/pro-form';
|
||
|
||
import type { CurrentUser } from 'umi';
|
||
import type { FormInstance } from 'antd';
|
||
import type { ConnectState } from '@/models/connect';
|
||
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
|
||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||
import type { UploadFile } from 'antd/es/upload/interface';
|
||
import type { PictureModel } from '@/services/options/typings';
|
||
|
||
import { getQualificationList, delQualification, updateQualification, getQualificationDetail, relateBusinessCommodity } from './service';
|
||
import { getSupplierList } from '../Management/service';
|
||
import { deleteAHYDPicture, deletePicture, uploadAHYDPicture, uploadPicture } from '@/services/picture';
|
||
import { getFieldEnum } from '@/services/options';
|
||
import { transferImg } from '@/utils/format';
|
||
import { getBase64 } from '@/utils/utils';
|
||
|
||
import type { QualificationModel, RTQCBModel } from './data';
|
||
import type { CommdityLocalModel } from '../../commodity/BaseInfo/data';
|
||
|
||
import SelectCommdity from '@/pages/merchantManagement/commodity/BaseInfo/components/SelectCommdity';
|
||
import React from 'react';
|
||
import Draggable from 'react-draggable';
|
||
import { getCommodityList } from '../../commodity/BaseInfo/service';
|
||
|
||
const { confirm } = Modal;
|
||
|
||
// 删除资质数据
|
||
// const handelDelete = async (supplierid: number) => {
|
||
// const hide = message.loading('正在删除...');
|
||
// try {
|
||
// const result = await delQualification(supplierid);
|
||
|
||
// hide();
|
||
// if (result.Result_Code !== 100) {
|
||
// message.error(`${result.Result_Code !== 100}:删除失败`);
|
||
// return false;
|
||
// }
|
||
// message.success('删除成功！');
|
||
// return true;
|
||
// } catch (error) {
|
||
// hide();
|
||
// message.error('删除失败');
|
||
// return false;
|
||
// }
|
||
// };
|
||
|
||
// 更新资质数据
|
||
const handleAddUpdate = async (fields: QualificationModel, commodityIds: string,
|
||
staffId: number | undefined, staffName: string | undefined) => {
|
||
const hide = message.loading('正在提交...');
|
||
const result = await updateQualification(fields);
|
||
if (result.Result_Code !== 100) {
|
||
message.error(`${result.Result_Desc}` || `${result.Result_Code}:提交失败`);
|
||
return false;
|
||
}
|
||
|
||
if (commodityIds && commodityIds.split(',').length > 0) {
|
||
const rtResult = await relateBusinessCommodity({
|
||
QualificationId: result.Result_Data.QUALIFICATION_ID,
|
||
CommodityIds: commodityIds,
|
||
StaffId: staffId, StaffName: staffName
|
||
} as RTQCBModel)
|
||
if (rtResult.Result_Code !== 100) {
|
||
message.error(`${rtResult.Result_Desc}` || `${rtResult.Result_Code}:提交失败`);
|
||
return false;
|
||
}
|
||
}
|
||
hide();
|
||
message.success(fields.QUALIFICATION_ID ? '更新成功！' : '新建成功！');
|
||
return result.Result_Data;
|
||
};
|
||
|
||
// 上传资质图片
|
||
const customUploadRequest = async (fileList: UploadFile[], tableId: string) => {
|
||
if (!fileList.length) {
|
||
message.error("您上传的图片不存在.")
|
||
return false
|
||
}
|
||
const formData = new FormData();
|
||
fileList.forEach(file => {
|
||
formData.append('files[]', file);
|
||
});
|
||
|
||
formData.append('TableName', 'QUALIFICATION');
|
||
formData.append('TableId', tableId);
|
||
const success = await uploadAHYDPicture(formData)
|
||
if (success) {
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
|
||
/**
|
||
* @description: 资质管理
|
||
* @param {currentUser} 用户信息
|
||
* @return {CommdityTable} 页面组件
|
||
*/
|
||
const CommdityTable: React.FC<{ currentUser?: CurrentUser }> = ({ currentUser }) => {
|
||
const actionRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const rtCommodityFormRef = useRef<FormInstance>();
|
||
const [currentRow, setCurrentRow] = useState<QualificationModel>();
|
||
const [showDetail, setShowDetail] = useState<boolean>();
|
||
const [modalVisible, handleModalVisible] = useState<boolean>();
|
||
const [priviewImage, setPriviewImage] = useState<string>(); // 预览的图片地址
|
||
const [fileList, setFileList] = useState<UploadFile[]>([]); // 需要上传的资质图片列表
|
||
const nowFilterDate = {
|
||
1: [moment(), moment().add(1, 'months')],
|
||
2: [moment(), moment().add(3, 'months')],
|
||
3: [moment(), moment().add(6, 'months')]
|
||
}
|
||
const [selectCommdityVisible, setSelectCommdityVisible] = useState<boolean>(false);
|
||
const [editCommdity, setEditCommdity] = useState<CommdityLocalModel[]>([]); // 需要关联资质的商品
|
||
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>();
|
||
|
||
const [qualificationId, setQualificationId] = useState<number>();
|
||
const [modalRTVisible, handleModalRTVisible] = useState<boolean>();
|
||
// 拖动
|
||
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
|
||
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
||
const draggleRef = React.createRef<any>()
|
||
|
||
const onDraggaleStart = (event, uiData) => {
|
||
|
||
const { clientWidth, clientHeight } = window.document.documentElement;
|
||
const targetRect = draggleRef.current?.getBoundingClientRect();
|
||
if (!targetRect) {
|
||
return;
|
||
}
|
||
setBounds({
|
||
left: -targetRect.left + uiData.x,
|
||
right: clientWidth - (targetRect.right - uiData.x),
|
||
top: -targetRect.top + uiData.y,
|
||
bottom: clientHeight - (targetRect.bottom - uiData.y),
|
||
});
|
||
};
|
||
// 拖动结束
|
||
|
||
// const [priviewFileList, setPriviewFileList] = useState<UploadFile[]>([]); // 预览资质图片列表
|
||
// 获取供应商列表
|
||
const { loading, data: supplierList } = useRequest(async () => {
|
||
const data = await getSupplierList({ OWNERUNIT_ID: currentUser?.BusinessManID, current: 1, pageSize: 9999, SUPPLIER_STATE: 1 })
|
||
return data?.data ? data?.data.reduce((p: any, c: { SUPPLIER_NAME: any; SUPPLIER_ID: any; }) => { // 格式化供应商数据为 下拉选择使用的数据
|
||
return [...p, {
|
||
label: c.SUPPLIER_NAME,
|
||
value: c.SUPPLIER_ID,
|
||
// state: c.SUPPLIER_STATE
|
||
}]
|
||
}, []) : []
|
||
})
|
||
// 获取详情
|
||
const getDetail = async (record: QualificationModel) => {
|
||
const data = await getQualificationDetail(record?.QUALIFICATION_ID)
|
||
const files = data?.ImgList ? data?.ImgList.map((n: PictureModel) => {
|
||
return {
|
||
uid: n.ImageId,
|
||
name: n.ImageName,
|
||
status: 'done',
|
||
url: n.ImageUrl,
|
||
deletepath: n.ImagePath
|
||
}
|
||
}) : []
|
||
// setPriviewFileList(files)
|
||
setFileList(files)
|
||
return data
|
||
}
|
||
|
||
const columns: ProColumns<QualificationModel>[] = [
|
||
{
|
||
dataIndex: 'QUALIFICATION_NAME',
|
||
title: '资质名称',
|
||
hideInDescriptions: true,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return <a onClick={async () => {
|
||
setCurrentRow(await getDetail(record));
|
||
setShowDetail(true);
|
||
}}>{_}</a>
|
||
}
|
||
// width: '15%',
|
||
},
|
||
{
|
||
dataIndex: 'QUALIFICATION_DESC',
|
||
title: '资质说明',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'SUPPLIER_ID',
|
||
title: '供应商名称',
|
||
valueType: 'select',
|
||
fieldProps: {
|
||
showSearch: true,
|
||
options: !loading ? supplierList : []
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'QUALIFICATION_TYPE',
|
||
title: '资质类型',
|
||
align: 'center',
|
||
valueType: 'select',
|
||
request: async () => {
|
||
return await getFieldEnum({ FieldExplainField: 'QUALIFICATION_TYPE' })
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'ISSUING_DATE',
|
||
title: '签发日期',
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
if (record?.ISSUING_DATE) {
|
||
return moment(record?.ISSUING_DATE).format('YYYY-MM-DD')
|
||
}
|
||
return _
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'QUALIFICATION_ENDDATE',
|
||
title: '有效期至',
|
||
align: 'center',
|
||
sorter: true,
|
||
hideInSearch: true,
|
||
valueType: 'date',
|
||
render: (_, record) => {
|
||
if (record?.QUALIFICATION_ENDDATE && record?.QUALIFICATION_ENDDATE.toString() !== '') {
|
||
// 资质到期时间在一个月内，内容标红显示
|
||
if (moment().add(1, 'month').diff(moment(record?.QUALIFICATION_ENDDATE)) > 0 &&
|
||
moment(record?.QUALIFICATION_ENDDATE).diff(moment().format('YYYY/MM/DD')) >= 0) {
|
||
return <Space style={{ color: '#FD4B54' }}>{_}</Space>
|
||
}
|
||
// 资质已过期，则置灰显示
|
||
if (moment(record?.QUALIFICATION_ENDDATE).diff(moment().format('YYYY/MM/DD')) < 0) {
|
||
return <Space style={{ color: '#d9d9d9' }}>{_}</Space>
|
||
}
|
||
}
|
||
return _
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'QUALIFICATION_ENDDATE',
|
||
title: '到期',
|
||
align: 'center',
|
||
hideInTable: true,
|
||
valueType: 'radioButton',
|
||
hideInDescriptions: true,
|
||
valueEnum: {
|
||
1: { text: '一个月' },
|
||
2: { text: '三个月' },
|
||
3: { text: '半年' },
|
||
},
|
||
},
|
||
{
|
||
dataIndex: 'QUALIFICATION_STATE',
|
||
title: '状态',
|
||
align: 'center',
|
||
valueType: 'select',
|
||
hideInDescriptions: true,
|
||
valueEnum: {
|
||
1: { text: '有效', status: 'processing' },
|
||
2: { text: '过期', status: "default" },
|
||
},
|
||
},
|
||
{
|
||
dataIndex: 'OPERATE_DATE',
|
||
title: '更新时间',
|
||
align: 'center',
|
||
valueType: 'fromNow',
|
||
hideInTable: true,
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'STAFF_NAME',
|
||
title: '操作员',
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
hideInTable: true,
|
||
},
|
||
{
|
||
dataIndex: 'option',
|
||
title: '操作',
|
||
align: 'center',
|
||
valueType: 'option',
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return (
|
||
<Space>
|
||
<a
|
||
onClick={async () => {
|
||
setCurrentRow(await getDetail(record));
|
||
handleModalVisible(true);
|
||
}}
|
||
>
|
||
编辑
|
||
</a>
|
||
<a
|
||
onClick={async () => {
|
||
setQualificationId(record.QUALIFICATION_ID);
|
||
handleModalRTVisible(true);
|
||
}}
|
||
>
|
||
查看商品
|
||
</a>
|
||
{/* <Popconfirm
|
||
title="确认删除该资质信息吗?"
|
||
onConfirm={async () => {
|
||
const sucesse = await handelDelete(record.QUALIFICATION_ID);
|
||
if (sucesse && actionRef.current) {
|
||
actionRef.current.reload();
|
||
}
|
||
}}
|
||
>
|
||
<a>删除</a>
|
||
</Popconfirm> */}
|
||
</Space>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
// 表格列数据配置
|
||
const columnsCommodity: ProColumns<CommdityLocalModel>[] = [
|
||
{
|
||
dataIndex: 'COMMODITY_NAME',
|
||
title: '商品名称',
|
||
hideInSearch: true,
|
||
editable: false
|
||
},
|
||
{
|
||
dataIndex: 'COMMODITY_BARCODE',
|
||
title: '商品条码',
|
||
hideInSearch: true,
|
||
width: 150,
|
||
align: 'center',
|
||
editable: false,
|
||
},
|
||
{
|
||
dataIndex: 'COMMODITY_RETAILPRICE',
|
||
title: '零售价',
|
||
width: 80,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
editable: false
|
||
},
|
||
{
|
||
dataIndex: 'COMMODITY_RULE',
|
||
title: '规格',
|
||
width: 100,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
editable: false
|
||
},
|
||
{
|
||
dataIndex: 'COMMODITY_UNIT',
|
||
title: '单位',
|
||
width: 100,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
editable: false
|
||
},
|
||
];
|
||
|
||
return (
|
||
<PageContainer header={{
|
||
title: '',
|
||
breadcrumb: {},
|
||
}}>
|
||
<ProTable<QualificationModel>
|
||
rowKey="QUALIFICATION_ID"
|
||
headerTitle="资质管理"
|
||
actionRef={actionRef}
|
||
search={{ span: 6 }}
|
||
request={async (params, sorter) => {
|
||
// 排序字段
|
||
const sortstr = Object.keys(sorter).map(n => {
|
||
const value = sorter[n]
|
||
return value ? `${n} ${value.replace('end', '')}` : ''
|
||
})
|
||
const data = await getQualificationList({
|
||
...params,
|
||
BUSINESSMAN_ID: currentUser?.BusinessManID,
|
||
QUALIFICATION_ENDDATE: params?.QUALIFICATION_ENDDATE ? nowFilterDate[params?.QUALIFICATION_ENDDATE][1] : '',
|
||
QUALIFICATION_STARTDATE: params?.QUALIFICATION_ENDDATE ?
|
||
nowFilterDate[params?.QUALIFICATION_ENDDATE][0] : params?.QUALIFICATION_STARTDATE || '',
|
||
QUALIFICATION_STATESEARCH: '1,2',
|
||
SortStr: sortstr.length ? sortstr.toString() : "OPERATE_DATE desc",
|
||
});
|
||
return data;
|
||
}}
|
||
columns={columns}
|
||
toolbar={{
|
||
actions: [
|
||
<Button
|
||
key="new"
|
||
icon={<PlusOutlined />}
|
||
type="primary"
|
||
onClick={() => {
|
||
setCurrentRow({ QUALIFICATION_TYPE: 1000 } as QualificationModel)
|
||
handleModalVisible(true);
|
||
}}
|
||
>
|
||
资质
|
||
</Button>,
|
||
],
|
||
}}
|
||
// options={false}
|
||
/>
|
||
<Drawer
|
||
width={600}
|
||
visible={showDetail}
|
||
onClose={() => {
|
||
setCurrentRow(undefined);
|
||
setFileList([]);
|
||
setShowDetail(false);
|
||
}}
|
||
closable={false}
|
||
>
|
||
{currentRow?.QUALIFICATION_NAME && (<>
|
||
<ProDescriptions<QualificationModel>
|
||
column={1}
|
||
title={currentRow?.QUALIFICATION_NAME}
|
||
request={async () => ({
|
||
data: currentRow || {},
|
||
})}
|
||
params={{
|
||
id: currentRow?.QUALIFICATION_ID,
|
||
}}
|
||
columns={columns as ProDescriptionsItemProps<QualificationModel>[]}
|
||
/>
|
||
|
||
</>)}
|
||
<div>资质文件</div>
|
||
{
|
||
currentRow?.ImgList ?
|
||
<Upload
|
||
defaultFileList={transferImg(currentRow?.ImgList) as unknown as UploadFile[] || []}
|
||
showUploadList={{
|
||
showDownloadIcon: false,
|
||
showRemoveIcon: false,
|
||
}}
|
||
/> : '-'
|
||
// <Image.PreviewGroup>
|
||
// {currentRow?.ImgList && currentRow?.ImgList.map(n =>
|
||
// <div style={{ width: 108, height: 108, padding: 4, border: '1px solid #eee', display: "inline-flex", marginRight: 16 }}>
|
||
// <Image width={100} height={100} src={n?.ImageUrl} style={{ objectFit: "contain" }} />
|
||
// </div>
|
||
// )
|
||
// }
|
||
// </Image.PreviewGroup>
|
||
}
|
||
</Drawer>
|
||
<ModalForm<QualificationModel>
|
||
title={currentRow?.QUALIFICATION_ID ? '更新资质信息' : '新建资质'}
|
||
layout={'horizontal'}
|
||
width={1024}
|
||
wrapperCol={{ span: 16 }}
|
||
labelCol={{ span: 6 }}
|
||
formRef={formRef}
|
||
visible={modalVisible}
|
||
autoFocusFirstInput
|
||
modalProps={{
|
||
onCancel: () => {
|
||
// console.log('close')
|
||
},
|
||
}}
|
||
onVisibleChange={(value) => {
|
||
handleModalVisible(value);
|
||
if (value) {
|
||
formRef.current?.setFieldsValue(
|
||
currentRow || { QUALIFICATION_STATE: 1 },
|
||
);
|
||
} else {
|
||
formRef.current?.resetFields();
|
||
setFileList([])
|
||
setPriviewImage('')
|
||
// setPriviewFileList([])
|
||
setCurrentRow(undefined);
|
||
setEditCommdity([])
|
||
setEditableRowKeys([])
|
||
}
|
||
}}
|
||
onFinish={async (values) => {
|
||
let newValue: QualificationModel = {
|
||
...values,
|
||
QUALIFICATION_STATE: values.QUALIFICATION_STATE || 1,
|
||
QUALIFICATION_ENDDATE: values.QUALIFICATION_ENDDATE || ''
|
||
};
|
||
if (currentRow) {
|
||
// 编辑数据
|
||
newValue = { ...currentRow, ...newValue };
|
||
}
|
||
const success = await handleAddUpdate(newValue,
|
||
editableKeys ? editableKeys?.toString() : '',
|
||
currentUser?.ID, currentUser?.Name);
|
||
|
||
if (success) {
|
||
const waitUpload = fileList.filter(n => n.status !== 'done')
|
||
|
||
if (waitUpload.length > 0) {
|
||
setCurrentRow(success)
|
||
const uploadSuccess = await customUploadRequest(waitUpload, success?.QUALIFICATION_ID)
|
||
if (uploadSuccess) {
|
||
if (actionRef.current) {
|
||
actionRef.current.reload();
|
||
}
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
if (actionRef.current) {
|
||
actionRef.current.reload();
|
||
}
|
||
return true
|
||
}
|
||
return false
|
||
}}
|
||
>
|
||
<div>
|
||
<Row >
|
||
<Col span={12}>
|
||
<ProFormText
|
||
name="QUALIFICATION_NAME"
|
||
label="资质名称"
|
||
placeholder="请输入资质名称"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入资质名称',
|
||
},
|
||
]}
|
||
/>
|
||
</Col>
|
||
<Col span={12}>
|
||
<ProFormSelect
|
||
name="SUPPLIER_ID"
|
||
label="供应商名称"
|
||
placeholder="请输入供应商名称"
|
||
|
||
showSearch
|
||
options={!loading ? supplierList : []}
|
||
|
||
/>
|
||
</Col>
|
||
<Col span={12}>
|
||
<ProFormSelect
|
||
name="QUALIFICATION_TYPE"
|
||
label="资质类型"
|
||
placeholder="请选择资质类型"
|
||
rules={[{
|
||
required: true,
|
||
message: '请选择资质类型',
|
||
}]}
|
||
fieldProps={{
|
||
onChange: (value) => {
|
||
setCurrentRow({ ...currentRow, QUALIFICATION_TYPE: value } as QualificationModel)
|
||
}
|
||
}}
|
||
request={async () => {
|
||
return await getFieldEnum({ FieldExplainField: 'QUALIFICATION_TYPE' })
|
||
}}
|
||
/>
|
||
</Col>
|
||
<Col span={12}>
|
||
<ProFormDatePicker
|
||
name="ISSUING_DATE"
|
||
label="签发日期"
|
||
width="md"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请选择签发日期',
|
||
}
|
||
]}
|
||
fieldProps={{
|
||
onChange: (value) => {
|
||
if (currentRow?.QUALIFICATION_TYPE === 1000) {
|
||
formRef.current?.setFieldsValue({ QUALIFICATION_ENDDATE: moment(value).add(1, 'year') })
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
<Col span={12}>
|
||
<ProFormDatePicker
|
||
name="QUALIFICATION_ENDDATE"
|
||
label={"有效期至"}
|
||
width="md"
|
||
rules={[
|
||
{
|
||
required: currentRow?.QUALIFICATION_TYPE === 1000,
|
||
message: '请选择有效截止期',
|
||
}
|
||
]}
|
||
// readonly={currentRow?.QUALIFICATION_TYPE === 1000}
|
||
fieldProps={{
|
||
allowClear: true,
|
||
onChange: (value) => {
|
||
if (value && value > moment(currentRow?.ISSUING_DATE).add(1, 'year')) {
|
||
formRef.current?.setFieldsValue({ QUALIFICATION_ENDDATE: moment(currentRow?.ISSUING_DATE).add(1, 'year') })
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
{
|
||
currentRow?.QUALIFICATION_TYPE === 2000 &&
|
||
<Col span={12}>
|
||
<Form.Item
|
||
name="QUALIFICATION_STATE"
|
||
label="是否过期"
|
||
>
|
||
<Switch
|
||
checkedChildren="是"
|
||
unCheckedChildren="否"
|
||
defaultChecked={currentRow ? currentRow.QUALIFICATION_STATE === 2 : false}
|
||
onChange={(value) => {
|
||
formRef.current?.setFieldsValue({ QUALIFICATION_STATE: value ? 2 : 1 })
|
||
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
}
|
||
<Col span={24}>
|
||
<ProFormTextArea
|
||
name="QUALIFICATION_DESC"
|
||
label={currentRow?.QUALIFICATION_TYPE === 2000 ? "批次说明" : "备注说明"}
|
||
labelCol={{ span: 3 }}
|
||
wrapperCol={{ span: 20 }}
|
||
placeholder={`请输入${currentRow?.QUALIFICATION_TYPE === 2000 ? "批次说明" : "备注说明"}`}
|
||
fieldProps={{
|
||
autoSize: { minRows: 1, maxRows: 2 }
|
||
}}
|
||
/>
|
||
</Col>
|
||
<Col span={24}>
|
||
<ProFormUploadButton
|
||
name="ImgList"
|
||
title="选择资质文件"
|
||
label="上传资质"
|
||
wrapperCol={{ span: 20 }}
|
||
labelCol={{ span: 3 }}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请上传资质文件，文件类型为pdf',
|
||
}
|
||
]}
|
||
fieldProps={{
|
||
name: 'files',
|
||
// listType: 'picture-card',
|
||
className: 'upload-list-inline',
|
||
accept: '.pdf',
|
||
// defaultFileList: priviewFileList,
|
||
fileList, // : fileList,
|
||
multiple: true,
|
||
onPreview: async (file) => {
|
||
if (file.type && file.type?.indexOf('image/') > -1) { // 未上传的文件 如果是图片类型的
|
||
if (!file.url && !file.preview) {
|
||
setPriviewImage(await getBase64(file.lastModifiedDate))
|
||
} else {
|
||
setPriviewImage(file?.url)
|
||
}
|
||
} else {
|
||
const filenameSplitPointArr = file.fileName?.split('.') || []
|
||
|
||
if (['png', 'jpg', 'jpeg'].indexOf(filenameSplitPointArr[filenameSplitPointArr?.length - 1]) > -1) {
|
||
setPriviewImage(file?.url)
|
||
}
|
||
else if (file?.url) {
|
||
window.open(file?.url)
|
||
}
|
||
}
|
||
},
|
||
beforeUpload: (file, files) => {
|
||
setFileList([...fileList, ...files])
|
||
return false
|
||
},
|
||
onChange: async (info: any) => {
|
||
if (info.file.status === 'removed') {
|
||
// 如果在待上传列表中找到，则说明当前图片没有上传服务器，可直接删除
|
||
const index = fileList.findIndex(n => n.uid === info.file.uid);
|
||
|
||
if (!info.file?.deletepath) {
|
||
const newFileList = fileList.slice();
|
||
newFileList.splice(index, 1);
|
||
setFileList(newFileList)
|
||
return
|
||
}
|
||
confirm({
|
||
title: '确认删除该文件吗？',
|
||
icon: <ExclamationCircleOutlined />,
|
||
async onOk() {
|
||
const deleteLoading = message.loading('正在删除...')
|
||
// const success = await deletePicture(info.file?.deletepath, info.file?.uid, 'QUALIFICATION')
|
||
const success = await deleteAHYDPicture(info.file?.deletepath, info.file?.uid, 'QUALIFICATION')
|
||
deleteLoading()
|
||
|
||
if (success) {
|
||
const files = [...fileList]
|
||
files.splice(index, 1)
|
||
setFileList(files)
|
||
}
|
||
else {
|
||
message.error("删除失败")
|
||
}
|
||
},
|
||
onCancel() {
|
||
},
|
||
});
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
<div style={{ display: 'none' }}>
|
||
<Image width={100} height={100} src={priviewImage} style={{ objectFit: "contain", display: 'none' }}
|
||
preview={{
|
||
visible: !!priviewImage,
|
||
onVisibleChange: value => {
|
||
if (!value) {
|
||
setPriviewImage('');
|
||
}
|
||
},
|
||
}} />
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
<div>
|
||
<EditableProTable
|
||
cardProps={{
|
||
bodyStyle: {
|
||
padding: '0px 40px 0px 40px'
|
||
}
|
||
}}
|
||
headerTitle={<div >
|
||
<Typography.Text>关联商品</Typography.Text>
|
||
<Typography.Text>(共<span> {editCommdity.length} </span>项商品)</Typography.Text>
|
||
</div>}
|
||
scroll={{ y: 370 }}
|
||
formRef={rtCommodityFormRef}
|
||
columns={[
|
||
{
|
||
title: '序号', valueType: 'indexBorder', dataIndex: 'index', width: 48,
|
||
align: 'center',
|
||
},
|
||
...columnsCommodity,
|
||
{
|
||
title: '操作',
|
||
valueType: 'option',
|
||
width: 60,
|
||
align: 'center',
|
||
render: () => {
|
||
return null;
|
||
},
|
||
},
|
||
]}
|
||
dataSource={editCommdity}
|
||
rowKey="COMMODITY_BUSINESS_ID"
|
||
value={editCommdity}
|
||
recordCreatorProps={false}
|
||
editable={{
|
||
type: 'multiple',
|
||
editableKeys,
|
||
actionRender: (row, config, defaultDoms) => {
|
||
return [defaultDoms.delete];
|
||
},
|
||
onValuesChange: (record, recordList) => {
|
||
setEditCommdity(recordList);
|
||
},
|
||
onChange: setEditableRowKeys,
|
||
}}
|
||
toolbar={{
|
||
actions: [
|
||
<Button type="primary" onClick={() => setSelectCommdityVisible(true)}>选择商品</Button>,
|
||
],
|
||
}}
|
||
>
|
||
</EditableProTable>
|
||
</div>
|
||
</ModalForm>
|
||
{/* 选择要关联资质的商品 */}
|
||
<SelectCommdity editableKeys={editableKeys}
|
||
ServerpartShopIds={formRef.current?.getFieldValue('ServerpartShopIds') ?
|
||
formRef.current?.getFieldValue('ServerpartShopIds').toString() : ''}
|
||
dataFormat={2} visible={selectCommdityVisible}
|
||
onOk={(values) => {
|
||
// 去重
|
||
const totalCommdity = [...editCommdity, ...values].reduce<CommdityLocalModel[]>((p, item) => {
|
||
const haveThis = p.find(n => n.COMMODITY_BUSINESS_ID === item.COMMODITY_BUSINESS_ID)
|
||
if (!haveThis) {
|
||
return [...p, item]
|
||
}
|
||
return p
|
||
}, [])
|
||
setSelectCommdityVisible(false)
|
||
setEditCommdity(totalCommdity)
|
||
setEditableRowKeys(totalCommdity?.map(n => n.COMMODITY_BUSINESS_ID))
|
||
}}
|
||
onCancel={() => {
|
||
setSelectCommdityVisible(false)
|
||
}} />
|
||
{/* 关联商品列表 */}
|
||
<Modal
|
||
title={
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
cursor: 'move',
|
||
}}
|
||
onMouseOver={() => {
|
||
if (disabled) {
|
||
setDraggleDisabled(false)
|
||
}
|
||
}}
|
||
onMouseOut={() => {
|
||
setDraggleDisabled(true)
|
||
}}
|
||
|
||
onFocus={() => { }}
|
||
onBlur={() => { }}
|
||
>
|
||
关联商品列表
|
||
</div>
|
||
}
|
||
destroyOnClose={true}
|
||
width={1024}
|
||
visible={modalRTVisible}
|
||
onCancel={() => {
|
||
handleModalRTVisible(false)
|
||
}}
|
||
onOk={() => {
|
||
handleModalRTVisible(false)
|
||
}}
|
||
modalRender={(modal) => {
|
||
return <Draggable
|
||
disabled={disabled}
|
||
bounds={bounds}
|
||
onStart={(event, uiData) => onDraggaleStart(event, uiData)}
|
||
>
|
||
<div ref={draggleRef}>{modal}</div>
|
||
</Draggable>
|
||
}}
|
||
>
|
||
<ProTable<CommdityLocalModel>
|
||
rowKey="COMMODITY_BUSINESS_ID"
|
||
size="small"
|
||
actionRef={actionRef}
|
||
search={{ span: 12 }}
|
||
tableStyle={{ minHeight: 500 }}
|
||
request={async (params) => {
|
||
const data = await getCommodityList({
|
||
...params,
|
||
QUALIFICATION_ID: qualificationId,
|
||
BUSINESSMAN_ID: currentUser?.BusinessManID,
|
||
keyWord: params.keyword ? { key: 'COMMODITY_NAME,COMMODITY_BARCODE', value: params.keyword } : null, // 关键词查询
|
||
});
|
||
return data;
|
||
}}
|
||
params={{
|
||
SERVERPARTSHOP_IDS: formRef.current?.getFieldValue('ServerpartShopIds') ?
|
||
formRef.current?.getFieldValue('ServerpartShopIds').toString() : '',
|
||
}}
|
||
columns={[{
|
||
dataIndex: 'keyword',
|
||
title: '名称/条码',
|
||
hideInDescriptions: true,
|
||
hideInTable: true,
|
||
},
|
||
{
|
||
dataIndex: 'COMMODITY_TYPENAME',
|
||
title: '类别',
|
||
// width: 150,
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
}, ...columnsCommodity]}
|
||
options={false}
|
||
pagination={{ defaultPageSize: 10, size: 'small', showSizeChanger: false }}
|
||
/>
|
||
</Modal>
|
||
</PageContainer>
|
||
);
|
||
};
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(CommdityTable);
|