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

解决invoice的图片显示问题

Browse Source
main
YCC 10 months ago
parent 7d4b7bbba1
commit 945a1a7a17
1 changed files with 57 additions and 52 deletions
Show Stats Download Patch File Download Diff File

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

@ -5,17 +5,17 @@ import { PlusOutlined } from "@ant-design/icons";
import { isNotEmpty } from "@/utils/commons";
import * as config from "@/config";
import dayjs from "dayjs";
import { fetchInvoiceDetail, postEditInvoiceDetail, postAddInvoice } from '@/stores/Invoice';
import { removeFeedbackImages } from '@/stores/Feedback';
import BackBtn from '@/components/BackBtn';
import { fetchInvoiceDetail, postEditInvoiceDetail, postAddInvoice } from "@/stores/Invoice";
import { removeFeedbackImages } from "@/stores/Feedback";
import BackBtn from "@/components/BackBtn";
import { usingStorage } from "@/hooks/usingStorage";
const { Title,Text } = Typography;
const { Title, Text } = Typography;
function Detail() {
const navigate = useNavigate();
const { GMDSN, GSN } = useParams();
const {userId, travelAgencyId, loginToken} = usingStorage();
const { userId, travelAgencyId, loginToken } = usingStorage();
const [form] = Form.useForm();
const [dataLoading, setDataLoading] = useState(false);
const [edited, setEdited] = useState(true); //表单是否允许编辑
@ -24,13 +24,13 @@ function Detail() {
const [invoicePicList, setInvoicePicList] = useState([]);
const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
const [invoiceCurrencyList, setInvoiceCurrencyList] = useState([]);
const [invoiceProductList, setInvoiceProductList] = useState([]);
const [invoiceGroupInfo, setInvoiceGroupInfo] = useState({});
const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
const [invoiceCurrencyList, setInvoiceCurrencyList] = useState([]);
const [invoiceProductList, setInvoiceProductList] = useState([]);
const [invoiceGroupInfo, setInvoiceGroupInfo] = useState({});
const [invoiceFormData, setInvoiceFormData] = useState({});
const [invoicekImages, setInvoicekImages] = useState([]);
const [invoiceFormData, setInvoiceFormData] = useState({});
const [invoicekImages, setInvoicekImages] = useState([]);
useEffect(() => {
console.info("Detail.useEffect: " + GMDSN + "/" + GSN);
@ -40,12 +40,12 @@ function Detail() {
function defaultShow() {
setDataLoading(true);
fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
.then(json => {
setInvoiceZDDetail(json.invoiceZDDetail);
setInvoiceGroupInfo(json.invoiceGroupInfo);
setInvoiceProductList(json.invoiceProductList);
setInvoiceCurrencyList(json.invoiceCurrencyList);
setInvoiceZDDetail(json.invoiceZDDetail);
setInvoiceGroupInfo(json.invoiceGroupInfo);
setInvoiceProductList(json.invoiceProductList);
setInvoiceCurrencyList(json.invoiceCurrencyList);
let ZDDetail = json.invoiceZDDetail;
if (isNotEmpty(ZDDetail)) {
@ -53,8 +53,8 @@ function Detail() {
const formData = ZDDetail.map((data, index) => {
if (data.GMD_Dealed == false && arrLen == index + 1) {
//只有最后一条账单未审核通过才显示
const _formData = { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
setInvoiceFormData(_formData);
const _formData = { info_money: data.GMD_Cost, info_Currency: data.GMD_Currency, info_date: isNotEmpty(data.GMD_PayDate) ? dayjs(data.GMD_PayDate) : "", info_gmdsn: data.GMD_SN };
setInvoiceFormData(_formData);
return _formData;
}
});
@ -79,7 +79,7 @@ function Detail() {
});
}
if (data.GMD_Dealed == false && arrLen == index + 1) {
setInvoicekImages(picList);
setInvoicekImages(picList);
}
return picList;
});
@ -99,7 +99,7 @@ function Detail() {
});
}
const fileList = (invoicekImages);
const fileList = invoicekImages;
//图片列表
let arrimg = [];
if (isNotEmpty(fileList)) {
@ -120,8 +120,8 @@ function Detail() {
if (fieldVaule) {
postEditInvoiceDetail(userId, fieldVaule.info_gmdsn, fieldVaule.info_Currency, fieldVaule.info_money, fieldVaule.info_date, fieldVaule.info_images, "").then(data => {
// console.log(data);
let param = { info_money: fieldVaule.info_money, info_Currency: fieldVaule.info_Currency, info_date: fieldVaule.info_date };
setInvoiceFormData(param);
let param = { info_money: fieldVaule.info_money, info_Currency: fieldVaule.info_Currency, info_date: fieldVaule.info_date };
setInvoiceFormData(param);
if (data.errcode == 0) {
setEdited(true);
notification.success({
@ -144,7 +144,7 @@ function Detail() {
}
return file;
});
setInvoicekImages(newFileList);
setInvoicekImages(newFileList);
};
const handRemove = info => {
@ -167,7 +167,7 @@ function Detail() {
}
function addInvoice() {
postAddInvoice(userId, travelAgencyId, GSN, "", 0, "", "[]", "")
postAddInvoice(userId, travelAgencyId, GSN, "", 0, "", "[]", "")
.then(data => {})
.finally(() => {
defaultShow();
@ -193,20 +193,20 @@ function Detail() {
}
}
const invoiceStatus = (FKState) => {
const invoiceStatus = FKState => {
switch (FKState - 1) {
case 1:
return 'Submitted';
case 2:
return 'Travel Advisor';
case 3:
return 'Finance Dept';
case 4:
return 'Paid';
default:
return '';
}
};
case 1:
return "Submitted";
case 2:
return "Travel Advisor";
case 3:
return "Finance Dept";
case 4:
return "Paid";
default:
return "";
}
};
//循环生成多次报账信息
function bindSubmitForm() {
@ -218,7 +218,7 @@ function Detail() {
<Row key={data.GMD_SN} gutter={16}>
<Col span={4}></Col>
<Col span={16}>
<Card type="inner" title={"Invoice " + ++index}>
<Card type="inner" title={"Invoice " + (index + 1)}>
<Row gutter={16}>
<Col span={12}>
<Descriptions column={1}>
@ -232,13 +232,15 @@ function Detail() {
<Image.PreviewGroup>
{invoicePicList[index] &&
invoicePicList[index].map(item => {
return <Image key={item.uid} width={90} src={item.url} />;
if (item.url) {
return <Image key={item.uid} width={90} src={item.url} />;
}
})}
</Image.PreviewGroup>
</Col>
</Row>
</Card>
{addButton(index++ == invoiceZDDetail.length)}
{addButton(index + 1 == invoiceZDDetail.length)}
</Col>
<Col span={4}></Col>
</Row>
@ -251,7 +253,7 @@ function Detail() {
<Col span={16}>
<Card
type="inner"
title={"Invoice " + ++index}
title={"Invoice " + (index + 1)}
extra={
<Button type="link" onClick={() => setEdited(false)}>
Edit
@ -283,21 +285,25 @@ function Detail() {
]}>
<Select placeholder="Select Currency type" onChange={onCurrencyChange} options={bindCurrency()}></Select>
</Form.Item>
<Form.Item name="info_date" label="Due Month"
<Form.Item
name="info_date"
label="Due Month"
rules={[
{
required:true,
message:"please select Due Month!",
required: true,
message: "please select Due Month!",
},
]}
>
]}>
<DatePicker picker="month" />
</Form.Item>
<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>
<Text type="secondary">
Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the
travel advisor.{" "}
</Text>
<Form.Item name="info_gmdsn" hidden={true}>
<input />
</Form.Item>
<br/>
<br />
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
@ -314,8 +320,7 @@ function Detail() {
listType="picture-card"
onChange={handleChange}
onRemove={handRemove}
accept=".jpg,.png,.peg,.bmp"
>
accept=".jpg,.png,.peg,.bmp">
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload Invoice</div>
@ -352,7 +357,7 @@ function Detail() {
<Title level={4}>Reference Number: {invoiceGroupInfo.VGroupInfo}</Title>
</Col>
<Col span={4}>
<BackBtn />
<BackBtn />
</Col>
</Row>
<Title level={5}></Title>
@ -362,4 +367,4 @@ function Detail() {
);
}
export default (Detail);
export default Detail;

Write Preview
Loading…
Cancel
Save