修改样式

release
YCC 2 years ago
parent bd1b8340ec
commit b4ebb06c88

@ -177,6 +177,7 @@ class Invoice {
removeFeedbackImages(fileurl) { removeFeedbackImages(fileurl) {
let url = `/service-fileServer/FileDelete`; let url = `/service-fileServer/FileDelete`;
url += `?fileurl=${fileurl}`; url += `?fileurl=${fileurl}`;
url += `&token=${this.root.authStore.login.token}`;
return fetch(config.HT_HOST + url) return fetch(config.HT_HOST + url)
.then(response => response.json()) .then(response => response.json())
.then(json => { .then(json => {

@ -2,7 +2,7 @@ import { useParams, useNavigate, NavLink } from "react-router-dom";
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { toJS, runInAction } from "mobx"; import { toJS, runInAction } from "mobx";
import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Modal } from "antd"; import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Descriptions } from "antd";
import { useStore } from "@/stores/StoreContext.js"; import { useStore } from "@/stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from "@ant-design/icons";
import { isNotEmpty } from "@/utils/commons"; import { isNotEmpty } from "@/utils/commons";
@ -179,167 +179,133 @@ function Detail() {
} }
} }
// //
function bindSubmitForm() { function bindSubmitForm() {
let submitForm = invoiceZDDetail.map((data, index) => { let submitForm = invoiceZDDetail.map((data, index) => {
if (data.GMD_Dealed) { // if (data.GMD_Dealed) {
return ( //
<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }} > return (
<Col span={4}></Col> <Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
<Col span={18} > <Col span={4}></Col>
<Divider orientation="left">Invoice {index + 1}</Divider> <Col span={18}>
<Upload <Divider orientation="left">Invoice {index + 1}</Divider>
name="ghhfile" <Upload
accept="image/*" name="ghhfile"
multiple={true} accept="image/*"
action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`} multiple={true}
fileList={invoicePicList[index]} action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
listType="picture-card" fileList={invoicePicList[index]}
> listType="picture-card"></Upload>
<div> <Descriptions title={"Detail"}>
<PlusOutlined /> <Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
<div style={{ marginTop: 8 }}>Click to Upload</div> <Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
</div> <Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
</Upload> </Descriptions>
<Divider orientation="left">Details</Divider>
<Row gutter={16}>
<Col span={8}>
<Input addonBefore="Amount" value={data.GMD_Cost} />
</Col>
<Col span={8}>
Currency <Select
placeholder="Select Currency type"
allowClear
options={bindCurrency()}
value={data.GMD_Currency}
>
</Select>
</Col>
<Col span={8}>
<Input addonBefore="Due Dat:" value={data.GMD_PayDate} />
</Col>
</Row>
{addButton(index + 1 == invoiceZDDetail.length)}
</Col>
<Col span={4}></Col>
</Row>
)
} else {
//
return (
<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }} >
<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"
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={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}
allowClear
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>
<p>Our Finance Dept makes payment during the last week in each month. So due date can only the last day of each month. If there's urgent payment, please contact the travel advisor and send invoice separately.</p>
</Form>
</Col>
<Col span={4}></Col>
</Row>
)
}
})
return submitForm;
}
return (
<>
<Space direction="vertical" style={{ width: "100%" }}>
<Row gutter={16}>
<Col span={20}>
<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
</Col>
<Col span={4}>
<Button type="link" onClick={() => navigate("/invoice")}>
Back
</Button>
</Col>
</Row>
<Title level={5}></Title>
{bindSubmitForm()}
</Space>
</>
);
{addButton(index + 1 == invoiceZDDetail.length)}
</Col>
<Col span={4}></Col>
</Row>
);
} else {
//
return (
<Row key={data.GMD_SN} gutter={16} style={{ backgroundColor: "#f6f7f9", width: "100%", padding: "20px 40px" }}>
<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"
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={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>
<p>
Our Finance Dept makes payment during the last week in each month. So due date can only the last day of each month. If there's urgent payment, please contact the travel advisor and send invoice
separately.
</p>
</Form>
</Col>
<Col span={4}></Col>
</Row>
);
}
});
return submitForm;
}
return (
<>
<Space direction="vertical" style={{ width: "100%" }}>
<Row gutter={16}>
<Col span={20}>
<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
</Col>
<Col span={4}>
<Button type="link" onClick={() => navigate("/invoice")}>
Back
</Button>
</Col>
</Row>
<Title level={5}></Title>
{bindSubmitForm()}
</Space>
</>
);
} }
export default observer(Detail); export default observer(Detail);

@ -100,7 +100,7 @@ function Index() {
</Row> </Row>
<Title level={3}></Title> <Title level={3}></Title>
<Row> <Row>
<Col span={24}> <Col md={24} lg={24} xxl={12}>
<Table bordered pagination={{ defaultPageSize: 20, showTotal: showTotal }} columns={invoiceListColumns} dataSource={toJS(invoiceList)} /> <Table bordered pagination={{ defaultPageSize: 20, showTotal: showTotal }} columns={invoiceListColumns} dataSource={toJS(invoiceList)} />
</Col> </Col>
</Row> </Row>

Loading…
Cancel
Save