Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
release
YCC 2 years ago
parent f7bdb55312
commit 4a07f5b0a8
1 changed files with 113 additions and 99 deletions
Show Stats Download Patch File Download Diff File

212
src/views/invoice/Detail.jsx
Unescape Escape View File

@ -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)){
let submitForm = invoiceZDDetail.map((data, index) => {
if (isNotEmpty(invoiceZDDetail)) {
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}>
<Descriptions column={4} title={"Invoice " + index + 1}>
<Descriptions.Item span={4}>
<Upload
name="ghhfile"
// accept="image/*" 不限制类型
multiple={true}
action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
fileList={invoicePicList[index]}
listType="picture-card"></Upload>
</Descriptions.Item>
<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
<Descriptions.Item label="Status">{invoiceStore.invoiceStatus(data.FKState)}</Descriptions.Item>
</Descriptions>
{addButton(index + 1 == invoiceZDDetail.length)}
<Col span={16}>
<Card type="inner" title={"Invoice " + ++index}>
<Row gutter={16}>
<Col span={12}>
<Descriptions column={1}>
<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
<Descriptions.Item label="Status">{invoiceStore.invoiceStatus(data.FKState)}</Descriptions.Item>
</Descriptions>
</Col>
<Col span={12}>
<Image.PreviewGroup>
{invoicePicList[index] &&
invoicePicList[index].map(item => {
return <Image key={item.uid} width={90} src={item.url} />;
})}
</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}>
<Form name="invoice_submit" onFinish={onFinish} labelCol={{ span: 5 }} form={form} style={{ backgroundColor: "#fff", padding: "20px" }}>
<Divider orientation="left">Invoice {index + 1}</Divider>
<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 }}>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
<Col span={16}>
<Card
type="inner"
title={"Invoice " + ++index}
extra={
<Button type="link" onClick={() => setEdited(false)}>
Edit
</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{
return(
<Row gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
<Col span={4}></Col>
<Col span={18}>
{addButton(1==1)}
</Col>
<Col span={4}></Col>
</Row>
);
} else {
return (
<Row gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
<Col span={4}></Col>
<Col span={18}>{addButton(1 == 1)}</Col>
<Col span={4}></Col>
</Row>
);
}
}
return (

Write Preview
Loading…
Cancel
Save