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

Write Preview
Loading…
Cancel
Save