import React, { useState, useEffect } from "react" import { Card, Select, Row, Col, Input, Divider, Tabs, Table, Button, Modal, Form, Popover, message, Popconfirm, Image, Badge } from "antd" import { CloseOutlined, LinkOutlined, PlusOutlined, UploadOutlined } from "@ant-design/icons" import { history, connect } from "umi" import classNames from 'classnames'; import utilsStyles from '@/utils/utils.less'; import UploadFile from '@/components/ImgUploadFile' import useFormTable from '@/useHooks/useFormTable' import { dispatchHandle } from '@/utils/publicHandle' import EditableTable from "../components/EditableTable" import { isImg } from '../utils/util' import style from "./index.less" import ToolTipsBox from "@/components/ToolTipsBox"; import AddFeeModal from '../components/AddFeeModal' const { Option } = Select const { TextArea } = Input const { Meta } = Card; const { TabPane } = Tabs const AddNote = (props) => { const { dispatch, feeLoading, location: { query }, maintaining: { tasksDetail, taskDetailOutFeeList, firmList } } = props; const [feevisible, setFeeVisible] = useState(false) //对话框显示隐藏 const [outSourcingList, setOutSourcingList] = useState([]) const [form] = Form.useForm() const [feeForm] = Form.useForm() // 费用列表 const getFeeListItem = (payload = {}) => { payload.taskId = query.id dispatchHandle( dispatch, 'maintaining/operation_service_m_curing_task_expensesPageList_post', payload, res => { setOutSourcingList(res) } ) } const { tableProps: feeTableProps, search: feeSearch } = useFormTable(getFeeListItem, { form: feeForm }) // 表格行的选择 const [selectedRowKeys, setSelectedRowKeys] = useState([])// 选中的行的key值 const rowSelections = { selectedRowKeys, onChange: (selectedRowKey, selectedRows) => { console.log('标准selectedRowKeys changed: ', selectedRowKey, selectedRows); setSelectedRowKeys(selectedRowKey); }, fixed: true }; const deleteRequest = (payload = []) => { dispatchHandle( dispatch, 'maintaining/operation_service_m_curing_task_expensesDelete_patch', payload, () => { feeSearch.refresh() } ) } // 费用表格编辑 const [editId, setEditId] = useState() const [type, setType] = useState('add') const editFeeAction = (record) => { setEditId(record.id) setType('edit') setFeeVisible(true) } // 费用表格单行删除 const deleteFeeConfirm = (record) => { deleteRequest([record.id]) } // 是否委外养护 const [isOutSourcing, setIsOutSourcing] = useState(false) const isOutSourcingChange = (value) => { setIsOutSourcing(value) } // 费用删除事件 const [deleteFeeVisible, setDeleteFeeVisible] = useState(false) const [deleteFeeLoading, setDeleteFeeLoading] = useState(false) const feeDeleteAction = () => { if (selectedRowKeys.length === 0) { message.warn('请选择要删除的费用!') } else { setDeleteFeeVisible(true) } } // 多项删除 const deleteFeeOk = () => { setDeleteFeeLoading(true); deleteRequest(selectedRowKeys) setDeleteFeeVisible(false) } // 文件上传 const [imgList, setImgList] = useState([]); const [fileList, setfileList] = useState(); // upload const changeUpload = (files, fileInfo) => { console.log(files, fileInfo); const value = String(files); const filesList = fileInfo.fileList; setImgList(filesList); setfileList(value) } // 费用对话框事件方法 const feeShowModal = () => { setFeeVisible(true) setType('add') }; // 删除附件事件 // // 附件删除 const deleteAnnexAction = (id, index) => { const arr = imgList.filter(i => id !== i.uid) setImgList(arr) message.success('删除成功!') } const deleteImgAction = (id, index) => { const arr = imgList.filter(i => id !== i.uid) setImgList(arr) message.success('删除成功!') } const checkAnnexAction = (url) => { dispatchHandle( dispatch, 'maintaining/account_service_file_online_preview_url_post', { name: url }, res => { if (res) { window.open(res) } } ) } // 点击确定按钮 const addNoteChange = (e) => { e.preventDefault(); form.validateFields() .then((values) => { console.log(values, tasksDetail, `=======`) const arr = imgList.length > 0 && imgList.map(item => ({ enclosurName: item.name, url: item.response.data.url || '' })) const obj = { outsourcingOrNot: values.outsourcingOrNot || tasksDetail.outsourcingOrNot, appointedUnit: values.appointedUnit || tasksDetail.appointedUnit, estimatedCost: values.estimatedCost || tasksDetail.estimatedCost, acceptancePerson: values.acceptancePerson || tasksDetail.acceptancePerson, maintenanceRecord: values.maintenanceRecord || tasksDetail.maintenanceRecord, delegationInstructions: values.delegationInstructions || tasksDetail.delegationInstructions, } const payload = { ...obj, taskId: query.id, } if (values?.outsourcingOrNot) { payload.enclosurs = arr || [] } dispatchHandle( dispatch, 'maintaining/operation_service_m_curing_task_addTaskRecord_post', payload ) form.resetFields(); history.goBack(); }) .catch((err) => { console.log('Validate Failed:', err); }); } useEffect(() => { dispatchHandle( dispatch, 'maintaining/operation_service_m_curing_task_detail_id_get', { id: query.id }, res => { if (res) { form.setFieldsValue(res) setIsOutSourcing(res.outsourcingOrNot) if (res.taskEnclosurs && res.taskEnclosurs.length > 0) { const urlArr = res.taskEnclosurs?.map(item => ({ uid: item?.id, name: item.enclosurName, response: { data: { url: item?.url } } })) console.log(urlArr , res.taskEnclosurs) setImgList(urlArr) } } } ) dispatchHandle( dispatch, 'maintaining/common_service_m_maintenance_manufacturer_pageList_post', {} ) }, []) const columns = [ { title: '费用类型', dataIndex: 'usageTypeName', }, { title: '单位', dataIndex: 'companyName', }, { title: '需求数量', dataIndex: 'demandQuantity', editable: true }, { title: '单价(元)', dataIndex: 'unitPrice', editable: true }, { title: '小计', dataIndex: 'specs', render: (text, record) => <a>{(record.demandQuantity * record.unitPrice) || 0}</a> }, { title: '使用人', dataIndex: 'nameOfUser', }, { title: '费用说明', dataIndex: 'costDescription', render: (text) => <a>{text}</a> }, { title: '附件', dataIndex: 'annex', render: (text, record) => <ul style={{ display: 'flex', flexWrap: "wrap", flexDirection: 'column', alignItems: 'flex-start' }}> { record.expenseso && record.expenseso.length > 0 && record.expenseso.map((item, index) => ( <li key={index} style={{ marginRight: 10, display: 'flex', alignItems: 'center' }}> <LinkOutlined style={{ color: 'rgba(0,0,0,0.45)', paddingRight: 5 }} /> <ToolTipsBox> <span>{item?.enclosurName || ''}</span> </ToolTipsBox> </li> )) } </ul> }, { title: '操作', dataIndex: 'action', key: 'action', render: (text, record, index) => <div> <a onClick={() => editFeeAction(record)}>编辑</a> <Divider type="vertical" /> <Popconfirm title="确认删除此费用?" onConfirm={() => deleteFeeConfirm(record)} > <a>移除</a> </Popconfirm> </div> } ]; return <Card className={style.add_note}> <h3 className={style.h3_title}>养护信息:</h3> <Form form={form}> <Row className={style.add_note_head} gutter={[{ md: 8, xxl: 16 }]}> <Col span={8}> <i>是否委外养护</i> <Form.Item name="outsourcingOrNot" style={{ marginBottom: 0, flex: 1 }}> <Select onChange={isOutSourcingChange} placeholder="请选择" allowClear> <Option value>是</Option> <Option value={false}>否</Option> </Select> </Form.Item> </Col> { isOutSourcing && ( <> <Col span={8}> <i>委派单位</i> <Form.Item name="appointedUnit" style={{ marginBottom: 0, flex: 1 }}> <Select placeholder="请选择" allowClear showSearch optionFilterProp="children" > {firmList?.length > 0 && firmList?.map(item => <Option value={item?.id}>{item?.name}</Option>)} </Select> </Form.Item> <span className={style.isRequired}>*</span> </Col> <Col span={8}> <i>预计费用</i> <Form.Item name="estimatedCost" style={{ marginBottom: 0, flex: 1 }}> <Input placeholder="请输入" allowClear /> </Form.Item> <span className={style.unit}>元</span> </Col> </> ) } </Row> <Row className={style.main_note} justify="space-between"> <Col span={isOutSourcing ? 12 : 24}> <h4>养护记录:</h4> <Form.Item name="maintenanceRecord"> <TextArea rows="5" placeholder="请输入" allowClear /> </Form.Item> </Col> { isOutSourcing ? <Col span={12}> <h4>委外说明:</h4> <Form.Item name="delegationInstructions"> <TextArea rows="5" placeholder="请输入" allowClear /> </Form.Item> </Col> : null } </Row> {/* 附件 */} <div className={style.main_annex} style={{ marginBottom: 50 }}> <h4>附件:</h4> <Row gutter={[8, 16]}> <Col span={18}> <Card bordered // className={style.annex_content} title={ <div style={{ width: '100%', display: 'flex', flexWrap: 'wrap' }}> { imgList && imgList.length > 0 && imgList.filter(item => { if (item?.name && isImg(item?.name?.substr(item?.name.lastIndexOf('.') + 1))) { return item } }).map((item, index) => ( <div style={{ marginBottom: 16, marginRight: 16 }} key={item.uid}> <Badge offset={[-3, 0]} count={<CloseOutlined onClick={() => deleteImgAction(item?.uid, index)} style={{ color: '#fff', background: '#ff0000', borderRadius: '50%' }} />}> <Image style={{ width: 100, height: 100, margin: '0 10px 10px 0', cursor: 'pointer' }} alt="" key={item.uid} src={item?.response?.data?.url || '/pageImg/defaultImg@2x.png'} fallback="/pageImg/defaultImg@2x.png" /> </Badge> </div> )) } </div> } > { imgList && imgList.length > 0 && imgList.filter(item => { if (item?.name && !isImg(item?.name?.substr(item?.name.lastIndexOf('.') + 1))) { return item } }).map((item, index) => ( <div style={{ display: 'flex', margin: '0 16px 5px 0' }}> <Meta // onClick={() => checkAnnexAction(item?.response?.data?.url)} key={index} description={item.name || ''} avatar={<LinkOutlined style={{ marginRight: 5 }} />} style={{ marginRight: 5, marginBottom: 5, cursor: 'pointer' }} /> <CloseOutlined style={{ fontSize: 12 }} onClick={() => deleteAnnexAction(item?.uid, index)} /> </div> )) } </Card> </Col> <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}> <Form.Item name="annex"> <UploadFile fileType="document" onChange={changeUpload} showUploadList={false} > <Button style={{ color: 'rgba(0,0,0,0.65)' }}><UploadOutlined />上传文档</Button> </UploadFile> </Form.Item> <i style={{ color: 'rgba(0,0,0,0.65)' }}>支持扩展名:.rar .zip .doc .docx .pdf .png...</i> </Col> </Row> </div> </Form> { isOutSourcing ? <div className={style.main_fee}> <h3 className={style.h3_title}>养护费用</h3> <Divider /> <Tabs defaultActiveKey="1"> <TabPane tab="委外费用" key="1"> <div className={style.out_buttons}> <Button icon={<PlusOutlined />} type="primary" onClick={feeShowModal}>添加费用</Button> <Button danger onClick={feeDeleteAction}>删除</Button> <Modal title='删除费用提醒' visible={deleteFeeVisible} confirmLoading={deleteFeeLoading} onOk={deleteFeeOk} onCancel={() => setDeleteFeeVisible(false)} > 确认删除选中的费用? </Modal> </div> <EditableTable loading={feeLoading} rowSelection={rowSelections} optColumns={columns} tableData={outSourcingList} setTableData={setOutSourcingList} pagination={taskDetailOutFeeList.pagination} tableProps={feeTableProps} /> </TabPane> </Tabs> </div> : null } <div style={{ position: 'fixed', right: 20, bottom: 20 }}> <Button style={{ marginRight: "16px" }} onClick={() => history.goBack()}>取消</Button> <Button onClick={addNoteChange} type="primary">保存</Button> </div> <AddFeeModal feevisible={feevisible} setFeeVisible={setFeeVisible} id={query.id} editId={editId} type={type} search={feeSearch} /> </Card> } export default connect(({ maintaining, dict, loading }) => ({ dict, maintaining, feeLoading: loading.effects['maintaining/operation_service_m_curing_task_expensesPageList_post'] }))(AddNote)