470 lines
20 KiB
TypeScript
470 lines
20 KiB
TypeScript
import { connect, useRequest } 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 { MenuFoldOutlined } from "@ant-design/icons";
|
||
import type { FormInstance } from "antd";
|
||
import { Popconfirm, Space, Tree, Image, Modal, Divider, Row, Col, message, Button } from "antd";
|
||
import type { ActionType } from "@ant-design/pro-table";
|
||
import ProTable from "@ant-design/pro-table";
|
||
import PageTitleBox from "@/components/PageTitleBox";
|
||
import { getFieldEnumTreeNoSession, handleGetFIELDENUMList } from "@/services/options";
|
||
import { handeGetPictureList } from "../service";
|
||
import { hanleDeletePICTURE, hanleGetPictureListPost, hanleSaveImgFile, hanleSynchroPICTURE, uploadAHYDPicture } from "@/services/picture";
|
||
import ModalFooter from "../scenicSpotConfig/component/modalFooter";
|
||
import ProForm, { ProFormSelect, ProFormText, ProFormUploadButton } from "@ant-design/pro-form";
|
||
import moment from 'moment'
|
||
|
||
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 < 2;
|
||
if (!isLt2M) {
|
||
message.error('图片大小不超过 2MB!');
|
||
}
|
||
return isJpgOrPng && isLt2M;
|
||
}
|
||
|
||
const LibraryInformationManager: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||
const { currentUser } = props
|
||
const actionRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
const [treeView, setTreeView] = useState<any>()
|
||
// 左侧树的枚举
|
||
const [treeViewObj, setTreeViewObj] = useState<any>()
|
||
// 拿到headerTitle
|
||
const { loading: imageLibraryLoading, data: imageLibrary } = useRequest(async () => {
|
||
const req: any = {
|
||
SearchParameter: {
|
||
FIELDENUM_IDS: "11462,11423,11422,11473,11472",
|
||
},
|
||
requestEncryption: true
|
||
}
|
||
const data = await handleGetFIELDENUMList(req)
|
||
setTreeView(data)
|
||
let obj: any = {}
|
||
if (data && data.length > 0) {
|
||
data.forEach((item: any) => {
|
||
obj[item.FIELDENUM_ID] = item.FIELDENUM_NAME
|
||
})
|
||
}
|
||
setTreeViewObj(obj)
|
||
return data
|
||
})
|
||
// 图片信息
|
||
const [fileList, setFileList] = useState<any>()
|
||
// 树相关的属性和方法
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
// 查询的条件
|
||
const [searchParams, setSearchParams] = useState<any>()
|
||
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false) // 预览图片
|
||
const handleChangePreview = (val: any) => {
|
||
setImagePreviewVisible(val)
|
||
}
|
||
// 详情
|
||
const [showDetail, setShowDetail] = useState<boolean>(false)
|
||
const [currentRow, setCurrentRow] = useState<any>()
|
||
const [modalLoading, setModalLoading] = useState<boolean>(false)
|
||
const ModalFormRef = useRef<FormInstance>();
|
||
|
||
const columns: any = [
|
||
{
|
||
dataIndex: "PICTURE_URL",
|
||
hideInSearch: true,
|
||
width: 200,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.PICTURE_URL ? <img style={{ width: '50px', height: '50px', borderRadius: '50%', cursor: 'pointer' }} onClick={() => {
|
||
let list: any = [{ url: record?.PICTURE_URL }]
|
||
setFileList(list)
|
||
handleChangePreview(true)
|
||
}} src={record?.PICTURE_URL} alt="" /> : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'PICTURE_NAME',
|
||
title: '图片名称',
|
||
width: 200,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PICTURE_NAME ? <a onClick={() => {
|
||
setCurrentRow(record)
|
||
setShowDetail(true)
|
||
}}>
|
||
{`${record?.PICTURE_NAME ? record?.PICTURE_NAME : ""}${record?.PICTURE_TYPE && treeViewObj[record?.PICTURE_TYPE] ? `【${treeViewObj[record?.PICTURE_TYPE]}】` : ""}`}
|
||
</a> : ""
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'STAFF_NAME',
|
||
title: '操作人',
|
||
width: 200,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'OPERATE_DATE',
|
||
title: '操作时间',
|
||
width: 200,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
},
|
||
// {
|
||
// dataIndex: 'option',
|
||
// title: '操作',
|
||
// width: 150,
|
||
// align: 'center',
|
||
// valueType: 'option',
|
||
// hideInSearch: true,
|
||
// render: (_, record) => {
|
||
// return (
|
||
// <Space>
|
||
// <a
|
||
// onClick={() => {
|
||
// setCurrentRow(record)
|
||
// setShowDetail(true)
|
||
// }}
|
||
// >
|
||
// 编辑
|
||
// </a>
|
||
// <Popconfirm
|
||
// title="确认删除该图片吗?"
|
||
// onConfirm={async () => {
|
||
// await handleDeleteImg(record?.PICTURE_ID)
|
||
// }}
|
||
// >
|
||
// <a>删除</a>
|
||
// </Popconfirm>
|
||
// </Space>
|
||
// );
|
||
// },
|
||
// },
|
||
]
|
||
|
||
// 同步图片信息
|
||
const handleSynchroImage = async (obj: any) => {
|
||
let req: any = {}
|
||
if (currentRow?.PICTURE_ID) {
|
||
req = {
|
||
...currentRow,
|
||
...obj,
|
||
requestEncryption: true
|
||
}
|
||
} else {
|
||
req = {
|
||
...obj,
|
||
PICTURE_URL: fileList[0].url,
|
||
PICTURE_INDEX: 0,
|
||
STAFF_ID: currentUser.ID,
|
||
STAFF_NAME: currentUser.Name,
|
||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
requestEncryption: true
|
||
}
|
||
}
|
||
const data = await hanleSynchroPICTURE(req)
|
||
console.log('datadatadatadatadata', data);
|
||
if (data.Result_Code === 100) {
|
||
message.success('同步成功！')
|
||
setCurrentRow(null)
|
||
setShowDetail(false)
|
||
|
||
actionRef.current?.reload()
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
}
|
||
|
||
// 删除图片信息
|
||
const handleDeleteImg = async (id: any) => {
|
||
const req: any = {
|
||
PICTUREId: id,
|
||
requestEncryption: true
|
||
}
|
||
const data = await hanleDeletePICTURE(req)
|
||
if (data.Result_Code === 100) {
|
||
message.success('同步成功！')
|
||
setCurrentRow(null)
|
||
setShowDetail(false)
|
||
|
||
actionRef.current?.reload()
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
}
|
||
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||
<ProCard
|
||
style={{ width: !collapsible ? "300px" : "60px" }}
|
||
className="pageTable-leftnav"
|
||
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: !collapsible ? "300px" : "60px" }}
|
||
extra={
|
||
<MenuFoldOutlined onClick={() => {
|
||
setCollapsible(!collapsible);
|
||
}} />
|
||
}
|
||
colSpan={!collapsible ? "300px" : "60px"}
|
||
title={!collapsible ? "请选择图库类型" : ""}
|
||
headerBordered
|
||
collapsed={collapsible}
|
||
>
|
||
{treeView && treeView.length > 0 ? <Tree
|
||
checkable
|
||
treeData={[{
|
||
FIELDENUM_NAME: '全部',
|
||
FIELDENUM_ID: 0,
|
||
key: '0-0',
|
||
children: treeView
|
||
}]}
|
||
blockNode
|
||
defaultExpandedKeys={['0-0']}
|
||
defaultExpandAll={true}
|
||
onCheck={(checkedKeys: React.Key[] | any, info) => {
|
||
// 多选逻辑
|
||
const selectedIds = info.checkedNodes.filter((n: any) => n?.key !== '0-0')
|
||
setSelectedId(selectedIds.map((n: any) => n?.FIELDENUM_ID)?.toString() || '')
|
||
}}
|
||
fieldNames={{
|
||
title: "FIELDENUM_NAME",
|
||
key: "FIELDENUM_ID"
|
||
}}
|
||
/> : ''}
|
||
</ProCard>
|
||
<div style={{
|
||
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0
|
||
}}>
|
||
<ProTable
|
||
actionRef={actionRef}
|
||
formRef={formRef}
|
||
columns={columns}
|
||
bordered
|
||
expandable={{
|
||
expandRowByClick: true
|
||
}}
|
||
scroll={{ x: "100%", y: "calc(100vh - 420px)" }}
|
||
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
||
search={{ span: 6 }}
|
||
request={async (params) => {
|
||
if (!selectedId) {
|
||
return
|
||
}
|
||
const req: any = {
|
||
SearchParameter: {
|
||
PICTURE_TYPES: selectedId,
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 999999,
|
||
requestEncryption: true
|
||
}
|
||
|
||
setSearchParams(params)
|
||
const data = await hanleGetPictureListPost(req)
|
||
if (data && data.length > 0) {
|
||
return { data, success: true }
|
||
}
|
||
return { data: [], success: true }
|
||
}}
|
||
toolbar={{
|
||
actions: [
|
||
<Button type={'primary'} onClick={() => {
|
||
setShowDetail(true)
|
||
}}>添加图片</Button>
|
||
]
|
||
}}
|
||
/>
|
||
</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
|
||
open={showDetail}
|
||
onCancel={() => {
|
||
ModalFormRef?.current?.resetFields()
|
||
setCurrentRow(null)
|
||
setShowDetail(false)
|
||
setFileList([])
|
||
}}
|
||
confirmLoading={modalLoading}
|
||
width={1400}
|
||
bodyStyle={{
|
||
height: '700px', // 你可以根据需要调整高度
|
||
overflowY: 'auto',
|
||
}}
|
||
destroyOnClose
|
||
title={currentRow?.PICTURE_ID ? '编辑图片' : "新增卡券"}
|
||
onOk={() => {
|
||
ModalFormRef?.current?.validateFields().then(async (res) => {
|
||
await handleSynchroImage(res)
|
||
})
|
||
}}
|
||
footer={<ModalFooter
|
||
hideDelete={!currentRow?.PICTURE_ID}
|
||
handleDelete={async () => {
|
||
// await handleDeleteShopRule(currentRow?.PICTURE_ID)
|
||
await handleDeleteImg(currentRow?.PICTURE_ID)
|
||
}}
|
||
handleCancel={() => {
|
||
ModalFormRef?.current?.resetFields()
|
||
setCurrentRow(null)
|
||
setShowDetail(false)
|
||
setFileList([])
|
||
}}
|
||
handleOK={() => {
|
||
ModalFormRef?.current?.validateFields().then(async (res) => {
|
||
await handleSynchroImage(res)
|
||
})
|
||
}}
|
||
|
||
/>}
|
||
>
|
||
<ProForm
|
||
formRef={ModalFormRef}
|
||
layout={'horizontal'}
|
||
submitter={false}
|
||
labelCol={{ style: { width: 80 } }}
|
||
request={async () => {
|
||
if (currentRow?.PICTURE_ID) {
|
||
return {
|
||
...currentRow
|
||
}
|
||
} else {
|
||
return {
|
||
STAFF_NAME: currentUser.Name,
|
||
OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
|
||
{
|
||
currentRow ? '' :
|
||
<>
|
||
<Divider orientation="left">上传图片</Divider>
|
||
<ProFormUploadButton
|
||
name="PICTURE_URL"
|
||
label="上传图片"
|
||
fileList={fileList}
|
||
listType="picture-card"
|
||
accept="image/*"
|
||
fieldProps={{
|
||
beforeUpload,
|
||
maxCount: 1,
|
||
onPreview: handleChangePreview,
|
||
customRequest: async (info) => {
|
||
const formData = new FormData();
|
||
formData.append('files', info.file);
|
||
formData.append('TableType', "1203");
|
||
formData.append('ImageName', typeof info.file !== 'string' ? info.file?.name : '');
|
||
if (info.filename) {
|
||
const success = await hanleSaveImgFile(formData)
|
||
|
||
console.log('successsuccesssuccess', success);
|
||
|
||
if (success) {
|
||
const list = [{
|
||
uid: `${success.Result_Data.ImageId}`, // 注意，这个uid一定不能少，否则上传失败
|
||
name: success.Result_Data.ImageName,
|
||
status: 'done',
|
||
url: success.Result_Data.ImageUrl, // url 是展示在页面上的绝对链接
|
||
// imgUrl: success.ImagePath // + success.ImageUrl,
|
||
}]
|
||
setFileList(list)
|
||
}
|
||
} else {
|
||
message.error("您上传的图片不存在.")
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
</>
|
||
}
|
||
|
||
<Divider orientation="left">基本信息</Divider>
|
||
<Row gutter={8}>
|
||
<Col span={8}>
|
||
<ProFormSelect
|
||
label={"图片类型"}
|
||
name={"PICTURE_TYPE"}
|
||
options={treeView}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请选择图片类型'
|
||
}
|
||
]}
|
||
fieldProps={{
|
||
fieldNames: {
|
||
label: "FIELDENUM_NAME",
|
||
value: "FIELDENUM_ID"
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
<Col span={8}>
|
||
<ProFormText
|
||
label={"图片名称"}
|
||
name={"PICTURE_NAME"}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入图片名称'
|
||
}
|
||
]}
|
||
/>
|
||
</Col>
|
||
<Col span={8}>
|
||
<ProFormText
|
||
label={"操作人"}
|
||
name={"STAFF_NAME"}
|
||
disabled
|
||
/>
|
||
</Col>
|
||
<Col span={8}>
|
||
<ProFormText
|
||
label={"操作时间"}
|
||
name={"OPERATE_DATE"}
|
||
disabled
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</ProForm>
|
||
</Modal>
|
||
|
||
</div>
|
||
</div >
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(LibraryInformationManager);
|