修改账单样式，增加编辑按钮

src/views/invoice/Detail.jsx

@@ -2,9 +2,9 @@ import { useParams, useNavigate, NavLink } from "react-router-dom";
 import { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { toJS, runInAction } from "mobx";
-import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Descriptions } from "antd";
+import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Descriptions, Image, Steps } from "antd";
 import { useStore } from "@/stores/StoreContext.js";
-import { PlusOutlined } from "@ant-design/icons";
+import { PlusOutlined, AuditOutlined, SmileOutlined, SolutionOutlined, EditOutlined } from "@ant-design/icons";
 import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
@@ -19,6 +19,7 @@ function Detail() {
 	const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail } = invoiceStore;
 	const [form] = Form.useForm();
 	const [dataLoading, setDataLoading] = useState(false);
+	const [edited, setEdited] = useState(true); //表单是否允许编辑
 	const { formCurrency, onCurrencyChange } = useState();
 	const { notification } = App.useApp();
 
@@ -36,7 +37,7 @@ function Detail() {
 			.then(json => {
 				let ZDDetail = json.ZDDetail;
 
-				if (isNotEmpty(ZDDetail)){
+				if (isNotEmpty(ZDDetail)) {
 					let arrLen = ZDDetail.length;
 					const formData = ZDDetail.map((data, index) => {
 						if (data.GMD_Dealed == false && arrLen == index + 1) {
@@ -174,7 +175,13 @@ function Detail() {
 			return (
 				<Row>
 					<Divider orientation="left"></Divider>
-					<Button type="primary" block onClick={() => addInvoice(confirm)}>
+					<Button
+						type="primary"
+						block
+						onClick={() => {
+							addInvoice(confirm);
+							setEdited(false);
+						}}>
 						ADD New Invoice
 					</Button>
 				</Row>
@@ -184,31 +191,35 @@ function Detail() {
 
 	//循环生成多次报账信息
 	function bindSubmitForm() {
-		if (isNotEmpty(invoiceZDDetail)){
+		if (isNotEmpty(invoiceZDDetail)) {
-			let	submitForm = invoiceZDDetail.map((data, index) => {
+			let submitForm = invoiceZDDetail.map((data, index) => {
 				if (data.GMD_Dealed) {
 					//已审核的直接显示信息即可，无需表单
 					return (
-						<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
+						<Row key={data.GMD_SN} gutter={16}>
 							<Col span={4}></Col>
-							<Col span={18}>
+							<Col span={16}>
-								<Descriptions column={4} title={"Invoice " + index + 1}>
+								<Card type="inner" title={"Invoice " + ++index}>
-									<Descriptions.Item span={4}>
+									<Row gutter={16}>
-										<Upload
+										<Col span={12}>
-											name="ghhfile"
+											<Descriptions column={1}>
-											// accept="image/*" 不限制类型
+												<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
-											multiple={true}
+												<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
-											action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
+												<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
-											fileList={invoicePicList[index]}
+												<Descriptions.Item label="Status">{invoiceStore.invoiceStatus(data.FKState)}</Descriptions.Item>
-											listType="picture-card"></Upload>
+											</Descriptions>
-									</Descriptions.Item>
+										</Col>
-									<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
+										<Col span={12}>
-									<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
+											<Image.PreviewGroup>
-									<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
+												{invoicePicList[index] &&
-									<Descriptions.Item label="Status">{invoiceStore.invoiceStatus(data.FKState)}</Descriptions.Item>
+													invoicePicList[index].map(item => {
-								</Descriptions>
+														return <Image key={item.uid} width={90} src={item.url} />;
-
+													})}
-								{addButton(index + 1 == invoiceZDDetail.length)}
+											</Image.PreviewGroup>
+										</Col>
+									</Row>
+								</Card>
+								{addButton(index++ == invoiceZDDetail.length)}
 							</Col>
 							<Col span={4}></Col>
 						</Row>
@@ -216,70 +227,77 @@ function Detail() {
 				} else {
 					// 一个团只能有一个未审核的账单记录
 					return (
-						<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
+						<Row key={data.GMD_SN} gutter={16}>
 							<Col span={4}></Col>
-							<Col span={18}>
+							<Col span={16}>
-								<Form name="invoice_submit" onFinish={onFinish} labelCol={{ span: 5 }} form={form} style={{ backgroundColor: "#fff", padding: "20px" }}>
+								<Card
-									<Divider orientation="left">Invoice {index + 1}</Divider>
+									type="inner"
-									<Form.Item>
+									title={"Invoice " + ++index}
-										<Upload
+									extra={
-											name="ghhfile"
+										<Button type="link" onClick={() => setEdited(false)}>
-											multiple={true}
+											Edit
-											action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
-											fileList={fileList}
-											listType="picture-card"
-											onChange={handleChange}
-											onRemove={handRemove}>
-											<div>
-												<PlusOutlined />
-												<div style={{ marginTop: 8 }}>Click to Upload</div>
-											</div>
-										</Upload>
-									</Form.Item>
-									<Divider orientation="left">Details</Divider>
-									<Row gutter={16}>
-										<Col span={8}>
-											{" "}
-											<Form.Item
-												name="info_money"
-												label="Amount："
-												rules={[
-													{
-														required: true,
-														message: "Please input your money!",
-													},
-												]}>
-												<Input />
-											</Form.Item>
-										</Col>
-										<Col span={8}>
-											<Form.Item
-												name="info_Currency"
-												label="Currency："
-												rules={[
-													{
-														required: true,
-														message: "Please select Currency type!",
-													},
-												]}>
-												<Select placeholder="Select Currency type" onChange={onCurrencyChange} options={bindCurrency()}></Select>
-											</Form.Item>
-										</Col>
-										<Col span={8}>
-											<Form.Item name="info_date" label="Due Date: ">
-												<DatePicker />
-											</Form.Item>
-										</Col>
-									</Row>
-									<Form.Item name="info_gmdsn" hidden={true}>
-										<input />
-									</Form.Item>
-									<Form.Item>
-										<Button type="primary" htmlType="submit">
-											Submit
 										</Button>
-									</Form.Item>
+									}>
-								</Form>
+									<Form name="invoice_submit" onFinish={onFinish} form={form} disabled={edited}>
+										<Row gutter={16}>
+											<Col span={12}>
+												<Form.Item
+													name="info_money"
+													label="Amount"
+													rules={[
+														{
+															required: true,
+															message: "Please input your money!",
+														},
+													]}>
+													<Input />
+												</Form.Item>
+
+												<Form.Item
+													name="info_Currency"
+													label="Currency"
+													rules={[
+														{
+															required: true,
+															message: "Please select Currency type!",
+														},
+													]}>
+													<Select placeholder="Select Currency type" onChange={onCurrencyChange} options={bindCurrency()}></Select>
+												</Form.Item>
+
+												<Form.Item name="info_date" label="Due Month">
+													<DatePicker picker="month" />
+												</Form.Item>
+
+												<Form.Item name="info_gmdsn" hidden={true}>
+													<input />
+												</Form.Item>
+												<Form.Item>
+													<Button type="primary" htmlType="submit">
+														Submit
+													</Button>
+												</Form.Item>
+											</Col>
+											<Col span={12}>
+												<Form.Item>
+													<Upload
+														name="ghhfile"
+														multiple={true}
+														action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
+														fileList={fileList}
+														listType="picture-card"
+														onChange={handleChange}
+														onRemove={handRemove}>
+														<div>
+															<PlusOutlined />
+															<div style={{ marginTop: 8 }}>Upload Invoice</div>
+														</div>
+													</Upload>
+												</Form.Item>
+											</Col>
+										</Row>
+									</Form>
+								</Card>
 							</Col>
 							<Col span={4}></Col>
 						</Row>
@@ -287,19 +305,15 @@ function Detail() {
 				}
 			});
 			return submitForm;
-		}else{
+		} else {
-				return(
+			return (
-					<Row gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
+				<Row gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
-						<Col span={4}></Col>
+					<Col span={4}></Col>
-							<Col span={18}>
+					<Col span={18}>{addButton(1 == 1)}</Col>
-								{addButton(1==1)}
+					<Col span={4}></Col>
-							</Col>
+				</Row>
-							<Col span={4}></Col>
+			);
-					</Row>
-				);				
-			
 		}
-		
 	}
 
 	return (