629 lines
27 KiB
TypeScript
629 lines
27 KiB
TypeScript
// 商城品牌管理
|
|
import { connect } from "umi";
|
|
import type { CurrentUser } from "umi";
|
|
import type { ConnectState } from "@/models/connect";
|
|
import React, { useRef, useState } from "react";
|
|
import ProCard from "@ant-design/pro-card";
|
|
import { ExclamationCircleOutlined, MenuFoldOutlined, PlusOutlined } from "@ant-design/icons";
|
|
import type { FormInstance } from "antd";
|
|
import { Button, Col, Form, message, Modal, Popconfirm, Row, Space, Spin, Tree, Image, TreeSelect } from "antd";
|
|
import useRequest from "@ahooksjs/use-request";
|
|
import { getServerpartTree } from "@/services/options";
|
|
import type { ActionType } from "@ant-design/pro-table";
|
|
import ProTable from "@ant-design/pro-table";
|
|
import ReactHTMLTableToExcel from "react-html-table-to-excel";
|
|
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
|
|
import { handlDeleteBRAND, handleGetBRANDList, handleSynchroBRAND } from "../service";
|
|
import session from "@/utils/session";
|
|
import Draggable from "react-draggable";
|
|
import ProForm, { ProFormDatePicker, ProFormDigit, ProFormMoney, ProFormSelect, ProFormText, ProFormTextArea, ProFormUploadButton } from "@ant-design/pro-form";
|
|
import moment from 'moment'
|
|
import PageTitleBox from "@/components/PageTitleBox";
|
|
import { deletePicture, uploadPicture } from "@/services/picture";
|
|
import { handleSetlogSave } from "@/utils/format";
|
|
import ModalFooter from "../scenicSpotConfig/component/modalFooter";
|
|
import { highlightText } from "@/utils/highlightText";
|
|
|
|
const beforeUpload = (file: any) => {
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
if (!isJpgOrPng) {
|
|
message.error('请上传JPEG、jpg、png格式的图片文件!');
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
if (!isLt2M) {
|
|
message.error('图片大小不超过 5MB!');
|
|
}
|
|
return isJpgOrPng && isLt2M;
|
|
}
|
|
|
|
const MallBrandManage: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
|
const { confirm } = Modal;
|
|
const { currentUser } = props
|
|
const downloadBtnRef = useRef<any>()
|
|
const actionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
|
|
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
|
const [collapsible, setCollapsible] = useState<boolean>(false)
|
|
const [treeView, setTreeView] = useState<any>()
|
|
const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
|
|
|
|
let BRANDCATEGORYObj = session.get('BRANDCATEGORYObj')
|
|
let BRANDCATEGORYList = session.get('BRANDCATEGORYList')
|
|
let brandObj = session.get('brandObj')
|
|
let brandList = session.get('brandList')
|
|
|
|
// 树相关的属性和方法
|
|
const [selectedId, setSelectedId] = useState<string>()
|
|
// 导出的加载效果
|
|
const [showLoading, setShowLoading] = useState<boolean>(false)
|
|
// 是否显示打印的表格
|
|
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
|
// 查询的条件
|
|
const [searchParams, setSearchParams] = useState<any>()
|
|
const [modalVisible, handleModalVisible] = useState<boolean>();
|
|
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
|
const draggleRef = React.createRef<any>()
|
|
const [currentRow, setCurrentRow] = useState<any>();
|
|
const [confirmLoading, handleConfirmLoading] = useState<boolean>(false) // 弹出框的内容表单是否在提交
|
|
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
|
|
const [selectBrandList, setSelectBrandList] = useState<any>([])
|
|
// 文件列表
|
|
const [fileList, setFileList] = useState<any>([])
|
|
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false) // 预览图片
|
|
// 当前查询的文字
|
|
const [currentSearchText, setCurrentSearchText] = useState<string>('')
|
|
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 columns: any = [
|
|
{
|
|
dataIndex: 'BRAND_INDEX',
|
|
title: '品牌索引',
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
dataIndex: 'BRAND_NAME',
|
|
title: '品牌名称',
|
|
align: 'center',
|
|
width: 150,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.BRAND_NAME ? <a onClick={() => {
|
|
console.log('recordrecordrecord', record);
|
|
if (record?.BRAND_INTRO) {
|
|
setFileList([{ url: record?.BRAND_INTRO }])
|
|
}
|
|
setCurrentRow({ ...record });
|
|
handleModalVisible(true);
|
|
}}>
|
|
{/* {record?.BRAND_NAME} */}
|
|
{highlightText(record?.BRAND_NAME, currentSearchText)}
|
|
</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
dataIndex: 'BRAND_CATEGORY',
|
|
title: '品牌分类',
|
|
width: 120,
|
|
valueType: 'select',
|
|
align: 'center',
|
|
ellipsis: true,
|
|
valueEnum: BRANDCATEGORYObj,
|
|
hideInSearch: true,
|
|
// request: async () => {
|
|
// return await getFieldEnumTree({ FieldExplainField: 'BRAND_CATEGORY', sessionName: 'BRAND_CATEGORY' });
|
|
// },
|
|
// render: (_, record) => {
|
|
// return <a>
|
|
// {getFieldEnumName('BRAND_CATEGORY', record?.BRAND_CATEGORY)}
|
|
// </a>
|
|
// },
|
|
},
|
|
// {
|
|
// dataIndex: 'BRAND_TYPE',
|
|
// title: '品牌类型',
|
|
// valueType: 'select',
|
|
// align: 'center',
|
|
// width: 120,
|
|
// ellipsis: true,
|
|
// valueEnum: brandObj
|
|
// },
|
|
{
|
|
dataIndex: 'BRAND_STATE',
|
|
title: '有效状态',
|
|
align: 'center',
|
|
width: 120,
|
|
valueType: 'select',
|
|
fieldProps: {
|
|
options: [
|
|
{ label: '有效', value: "1" },
|
|
{ label: '无效', value: "0" }
|
|
]
|
|
},
|
|
initialValue: "1"
|
|
},
|
|
{
|
|
dataIndex: 'BRAND_DESC',
|
|
title: '品牌介绍',
|
|
align: 'center',
|
|
width: 120,
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
|
|
// {
|
|
// dataIndex: 'option',
|
|
// title: '操作',
|
|
// width: 120,
|
|
// valueType: 'option',
|
|
// align: 'center',
|
|
// hideInSearch: true,
|
|
// render: (_, record) => {
|
|
// return (
|
|
// <Space>
|
|
// <a
|
|
// onClick={() => {
|
|
// console.log('recordrecordrecord', record);
|
|
// if (record?.BRAND_INTRO) {
|
|
// setFileList([{ url: record?.BRAND_INTRO }])
|
|
// }
|
|
// setCurrentRow({ ...record });
|
|
// handleModalVisible(true);
|
|
// }}
|
|
// >
|
|
// 编辑
|
|
// </a>
|
|
// <Popconfirm
|
|
// title="确认删除该品牌列表信息吗?"
|
|
// onConfirm={async () => {
|
|
// await handelDelete(record.BRAND_ID);
|
|
// }}>
|
|
// <a>删除</a>
|
|
// </Popconfirm>
|
|
// </Space >
|
|
// );
|
|
// },
|
|
// },
|
|
];
|
|
|
|
|
|
const handelDelete = async (id: number) => {
|
|
const req: any = {
|
|
BRANDId: id
|
|
}
|
|
const result = await handlDeleteBRAND(req)
|
|
if (result.Result_Code !== 100) {
|
|
message.error(`${result.Result_Desc}` || `${result.Result_Code}:删除失败`);
|
|
} else {
|
|
message.success('删除成功！');
|
|
handleSetlogSave(`删除品牌【${currentRow?.BRAND_NAME}】`)
|
|
actionRef.current?.reload()
|
|
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setFileList([])
|
|
formRef.current?.resetFields();
|
|
setCurrentRow(undefined);
|
|
}
|
|
};
|
|
|
|
const handleAddUpdate = async (res: any) => {
|
|
let imgData: string = ''
|
|
if (res.brandImgList && res.brandImgList.length > 0) {
|
|
const formData = new FormData();
|
|
res.brandImgList.forEach((file: any) => {
|
|
formData.append('files[]', file.originFileObj);
|
|
formData.append('ImageName', typeof file !== 'string' ? file?.name : '');
|
|
});
|
|
formData.append('TableId', '111');
|
|
// formData.append('imageType', "1204");
|
|
formData.append('TableType', "1125");
|
|
|
|
let imgRes = await uploadPicture(formData)
|
|
console.log('imgResimgResimgResimgRes', imgRes);
|
|
imgData = imgRes.Result_Data.ImageUrl
|
|
}
|
|
|
|
|
|
let req: any = {}
|
|
if (currentRow?.BRAND_ID) {
|
|
req = {
|
|
...currentRow,
|
|
...res,
|
|
BRAND_INTRO: fileList && fileList.length > 0 ? imgData || currentRow?.BRAND_INTRO || "" : "",
|
|
BRAND_CATEGORY: 2000,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
STAFF_ID: currentUser?.ID,
|
|
STAFF_NAME: currentUser?.Name,
|
|
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
}
|
|
} else {
|
|
req = {
|
|
...res,
|
|
BRAND_INTRO: imgData || "",
|
|
BRAND_CATEGORY: 2000,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
STAFF_ID: currentUser?.ID,
|
|
STAFF_NAME: currentUser?.Name,
|
|
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
}
|
|
}
|
|
|
|
const data = await handleSynchroBRAND(req)
|
|
handleConfirmLoading(false)
|
|
if (data.Result_Code === 100) {
|
|
message.success("新增成功！")
|
|
handleSetlogSave(`${currentRow?.BRAND_ID ? '更新' : '新增'}品牌【${data.Result_Data.BRAND_NAME}】`)
|
|
setCurrentRow(undefined)
|
|
formRef?.current?.resetFields()
|
|
handleModalVisible(false)
|
|
actionRef.current?.reload()
|
|
setFileList([])
|
|
} else {
|
|
message.error(data.Result_Desc)
|
|
}
|
|
|
|
};
|
|
|
|
// 预览上传后的图片
|
|
const handlePreview = async () => {
|
|
setFileList(fileList)
|
|
setImagePreviewVisible(true)
|
|
};
|
|
const handleChangePreview = (val: any) => {
|
|
setImagePreviewVisible(val)
|
|
}
|
|
|
|
return (
|
|
<div ref={(el) => {
|
|
// 打印报表
|
|
if (!reqDetailList || reqDetailList.length === 0) return;
|
|
setPrintOut(el);
|
|
}} >
|
|
|
|
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
|
<div style={{
|
|
width: '100%',
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingRight: 0
|
|
}}>
|
|
<ProTable
|
|
actionRef={actionRef}
|
|
formRef={formRef}
|
|
columns={columns}
|
|
bordered
|
|
expandable={{
|
|
expandRowByClick: true
|
|
}}
|
|
search={{ span: 6 }}
|
|
rowKey={(record: any) => {
|
|
return `${record.BRAND_PID}-${record.BRAND_ID}`
|
|
}}
|
|
scroll={{ x: "100%", y: "calc(100vh - 430px)" }}
|
|
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
|
request={async (params) => {
|
|
setSearchParams(params)
|
|
const req: any = {
|
|
searchParameter: {
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
BRAND_TYPE: params?.BRAND_TYPE,
|
|
BRAND_STATE: params?.BRAND_STATE === '-1' ? '' : params?.BRAND_STATE,
|
|
BRAND_CATEGORY: 2000
|
|
},
|
|
keyWord: {
|
|
key: "BRAND_NAME",
|
|
value: params?.BRAND_NAME
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
SortStr: "BRAND_INDEX,OPERATE_DATE"
|
|
}
|
|
const data = await handleGetBRANDList(req)
|
|
setCurrentSearchText(params?.BRAND_NAME || "")
|
|
|
|
console.log('datadatadatadatadata', data);
|
|
handleSetlogSave(`点击查询按钮`)
|
|
if (data.List && data.List.length > 0) {
|
|
let brandSelectList: any = []
|
|
data.List.forEach((item: any) => {
|
|
brandSelectList.push({ label: item.BRAND_NAME, value: item.BRAND_ID })
|
|
})
|
|
setSelectBrandList(brandSelectList)
|
|
return { data: data.List, success: true, total: data.TotalCount }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
toolbar={{
|
|
actions: [
|
|
<Button
|
|
key="new"
|
|
icon={<PlusOutlined />}
|
|
type="primary"
|
|
onClick={() => {
|
|
handleModalVisible(true);
|
|
}}
|
|
>
|
|
品牌
|
|
</Button>,
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 图片预览组件 */}
|
|
{fileList && fileList.length > 0 && <div style={{ display: 'none' }}>
|
|
<Image.PreviewGroup
|
|
preview={{
|
|
visible: imagePreviewVisible,
|
|
onVisibleChange: vis => {
|
|
handleChangePreview(vis)
|
|
}
|
|
}}>
|
|
{
|
|
fileList.map((n) => <Image src={n.url} key={n.url} />)
|
|
}
|
|
</Image.PreviewGroup>
|
|
</div>}
|
|
|
|
|
|
<Modal
|
|
title={
|
|
<div
|
|
className="brandManager"
|
|
style={{
|
|
width: '100%',
|
|
cursor: 'move',
|
|
}}
|
|
onMouseOver={() => {
|
|
if (disabled) {
|
|
setDraggleDisabled(false)
|
|
}
|
|
}}
|
|
onMouseOut={() => {
|
|
setDraggleDisabled(true)
|
|
}}
|
|
|
|
onFocus={() => { }}
|
|
onBlur={() => { }}
|
|
>
|
|
{currentRow ? '更新品牌' : '新建品牌'}
|
|
</div>
|
|
}
|
|
destroyOnClose={true}
|
|
width={900}
|
|
bodyStyle={{
|
|
height: '700px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
visible={modalVisible}
|
|
confirmLoading={confirmLoading}
|
|
afterClose={() => {
|
|
formRef.current?.resetFields();
|
|
setCurrentRow(undefined);
|
|
}}
|
|
onCancel={() => {
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setFileList([])
|
|
}}
|
|
|
|
onOk={async () => { // 提交框内的数据
|
|
formRef?.current?.validateFields().then(() => {
|
|
handleConfirmLoading(true)
|
|
formRef?.current?.submit()
|
|
})
|
|
}}
|
|
modalRender={(modal) => {
|
|
return <Draggable
|
|
disabled={disabled}
|
|
bounds={bounds}
|
|
onStart={(event, uiData) => onDraggaleStart(event, uiData)}
|
|
handle=".brandManager"
|
|
>
|
|
<div ref={draggleRef}>{modal}</div>
|
|
</Draggable>
|
|
}}
|
|
footer={<ModalFooter
|
|
hideDelete={!currentRow?.BRAND_ID}
|
|
handleDelete={async () => {
|
|
await handelDelete(currentRow?.BRAND_ID)
|
|
}}
|
|
handleCancel={() => {
|
|
handleConfirmLoading(false)
|
|
handleModalVisible(false)
|
|
setFileList([])
|
|
formRef.current?.resetFields();
|
|
setCurrentRow(undefined);
|
|
}}
|
|
handleOK={() => {
|
|
formRef?.current?.validateFields().then(() => {
|
|
handleConfirmLoading(true)
|
|
formRef?.current?.submit()
|
|
})
|
|
}}
|
|
|
|
/>}
|
|
>
|
|
<ProForm
|
|
layout={'horizontal'}
|
|
formRef={formRef}
|
|
autoFocusFirstInput
|
|
labelCol={{ style: { width: 80 } }}
|
|
submitter={false}
|
|
preserve={false}
|
|
initialValues={currentRow ? currentRow : {
|
|
BRAND_PID: -1, // 默认上级内码为-1
|
|
BRAND_STATE: 1, // 默认有效状态为1
|
|
}}
|
|
onFinish={async (values) => {
|
|
let newValue: any = { ...values };
|
|
if (currentRow) {
|
|
// 编辑数据
|
|
newValue = { ...values, BRAND_ID: currentRow.BRAND_ID };
|
|
}
|
|
|
|
// 如果有开关，要把开关的代码写进去
|
|
await handleAddUpdate(newValue);
|
|
handleConfirmLoading(false)
|
|
}}
|
|
>
|
|
<Row gutter={8}>
|
|
<Col span={12}>
|
|
<ProFormSelect
|
|
name="BRAND_PID"
|
|
label="上级内码"
|
|
request={async () => {
|
|
if (selectBrandList && selectBrandList.length > 0) {
|
|
let list: any = [{ label: "默认类别", value: -1 }, ...selectBrandList]
|
|
return list
|
|
} else {
|
|
const req: any = {
|
|
searchParameter: {
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
PROVINCE_CODE: currentUser?.ProvinceCode,
|
|
BRAND_CATEGORY: 2000
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
}
|
|
const data = await handleGetBRANDList(req)
|
|
if (data.List && data.List.length > 0) {
|
|
let brandSelectList: any = []
|
|
data.List.forEach((item: any) => {
|
|
brandSelectList.push({ label: item.BRAND_NAME, value: item.BRAND_ID })
|
|
})
|
|
setSelectBrandList(brandSelectList)
|
|
brandSelectList.unshirft({ label: "默认类别", value: -1 })
|
|
return brandSelectList
|
|
} else {
|
|
return [{ label: "默认类别", value: -1 }]
|
|
}
|
|
}
|
|
}}
|
|
fieldProps={{
|
|
showSearch: true,
|
|
filterOption: (input, option) =>
|
|
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormDigit
|
|
name="BRAND_INDEX"
|
|
label="品牌索引"
|
|
fieldProps={{
|
|
precision: 0, // 只允许整数
|
|
min: -1, // 可选：最小值
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormText
|
|
name="BRAND_NAME"
|
|
label="品牌名称"
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ProFormSelect
|
|
name="BRAND_STATE"
|
|
label="有效状态"
|
|
options={[
|
|
{ label: "有效", value: 1 },
|
|
{ label: "无效", value: 0 },
|
|
]}
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<ProFormUploadButton
|
|
label={"品牌图标"}
|
|
name={"brandImgList"}
|
|
listType="picture-card"
|
|
accept="image/*"
|
|
fieldProps={{
|
|
beforeUpload,
|
|
onPreview: handlePreview,
|
|
fileList: fileList, // 绑定 fileList
|
|
customRequest: ({ file, onSuccess }) => {
|
|
// 自定义上传，不实际发送请求
|
|
setTimeout(() => {
|
|
if (onSuccess) {
|
|
onSuccess({});
|
|
}
|
|
}, 0);
|
|
},
|
|
onChange: async (info: any) => {
|
|
if (info.file.status === 'removed') {
|
|
const index = fileList.findIndex(n => n.uid === info.file.uid);
|
|
confirm({
|
|
title: '确认删除该文件吗？',
|
|
icon: <ExclamationCircleOutlined />,
|
|
async onOk() {
|
|
if (info.file.ImageId) {
|
|
const deleteLoading = message.loading('正在删除...')
|
|
const success = await deletePicture(info.file?.ImagePath, info.file?.uid, '', '6000')
|
|
deleteLoading()
|
|
if (success) {
|
|
const files = [...fileList]
|
|
files.splice(index, 1)
|
|
setFileList(files)
|
|
message.success("删除成功")
|
|
}
|
|
else {
|
|
message.error("删除失败")
|
|
}
|
|
} else {
|
|
const files = [...fileList];
|
|
files.splice(index, 1);
|
|
setFileList(files);
|
|
}
|
|
},
|
|
onCancel() {
|
|
},
|
|
});
|
|
} else {
|
|
// 只保留最新上传的那一张图片
|
|
let newFileList = info.fileList;
|
|
if (newFileList.length > 1) {
|
|
newFileList = [newFileList[newFileList.length - 1]];
|
|
}
|
|
setFileList(newFileList);
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<ProFormTextArea
|
|
name="BRAND_DESC"
|
|
label="品牌介绍"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</ProForm>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(MallBrandManage);
|
|
|
|
|