使用1120版本合同导出模版文件

main
eddie 7 months ago
parent 7b15478640
commit 87e7c0acc4

@ -1,35 +1,46 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useParams, Link, useNavigate, useLocation } from 'react-router-dom'; import { useParams, Link, useNavigate, useLocation } from "react-router-dom";
import { App, Button, Divider, Popconfirm, Select } from 'antd'; import { App, Button, Divider, Popconfirm, Select } from "antd";
import { ReloadOutlined } from '@ant-design/icons'; import { ReloadOutlined } from "@ant-design/icons";
import { useProductsAuditStatesMapVal } from '@/hooks/useProductsSets'; import { useProductsAuditStatesMapVal } from "@/hooks/useProductsSets";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import useProductsStore, { postAgencyProductsAuditAction, postAgencyAuditAction, getAgencyAllExtrasAction } from '@/stores/Products/Index'; import useProductsStore, {
import { isEmpty, objectMapper } from '@/utils/commons'; postAgencyProductsAuditAction,
import useAuthStore from '@/stores/Auth'; postAgencyAuditAction,
import RequireAuth from '@/components/RequireAuth'; getAgencyAllExtrasAction,
} from "@/stores/Products/Index";
import { isEmpty, objectMapper } from "@/utils/commons";
import useAuthStore from "@/stores/Auth";
import RequireAuth from "@/components/RequireAuth";
// import PrintContractPDF from './PrintContractPDF'; // import PrintContractPDF from './PrintContractPDF';
import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config'; import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from "@/config";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import VendorSelector from '@/components/VendorSelector'; import VendorSelector from "@/components/VendorSelector";
import AuditStateSelector from '@/components/AuditStateSelector'; import AuditStateSelector from "@/components/AuditStateSelector";
import { usingStorage } from '@/hooks/usingStorage'; import { usingStorage } from "@/hooks/usingStorage";
import AgencyContract from '../Print/AgencyContract_v0903'; import AgencyContract from "../Print/AgencyContract_v1120";
// import AgencyContract from "../Print/AgencyContract_v0903";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import { Packer } from "docx"; import { Packer } from "docx";
const Header = ({ refresh, ...props }) => { const Header = ({ refresh, ...props }) => {
const location = useLocation(); const location = useLocation();
const isEditPage = location.pathname.includes('edit'); const isEditPage = location.pathname.includes("edit");
const showEditA = !location.pathname.includes('edit'); const showEditA = !location.pathname.includes("edit");
const showAuditA = !location.pathname.includes('audit'); const showAuditA = !location.pathname.includes("audit");
const { travel_agency_id, use_year, audit_state } = useParams(); const { travel_agency_id, use_year, audit_state } = useParams();
const { travelAgencyId } = usingStorage(); const { travelAgencyId } = usingStorage();
const { t } = useTranslation(); const { t } = useTranslation();
const isPermitted = useAuthStore((state) => state.isPermitted); const isPermitted = useAuthStore((state) => state.isPermitted);
const [activeAgency, setActiveAgency] = useProductsStore((state) => [state.activeAgency, state.setActiveAgency]); const [activeAgency, setActiveAgency] = useProductsStore((state) => [
const [switchParams, setSwitchParams] = useProductsStore((state) => [state.switchParams, state.setSwitchParams]); state.activeAgency,
state.setActiveAgency,
]);
const [switchParams, setSwitchParams] = useProductsStore((state) => [
state.switchParams,
state.setSwitchParams,
]);
// const [activeAgencyState] = useProductsStore((state) => [state.activeAgencyState]); // const [activeAgencyState] = useProductsStore((state) => [state.activeAgencyState]);
const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]); const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]);
const stateMapVal = useProductsAuditStatesMapVal(); const stateMapVal = useProductsAuditStatesMapVal();
@ -38,26 +49,49 @@ const Header = ({ refresh, ...props }) => {
const yearOptions = []; const yearOptions = [];
const currentYear = switchParams.use_year || dayjs().year(); const currentYear = switchParams.use_year || dayjs().year();
const baseYear = use_year ? Number(use_year === 'all' ? currentYear : use_year) : currentYear; const baseYear = use_year
? Number(use_year === "all" ? currentYear : use_year)
: currentYear;
for (let i = currentYear - 5; i <= baseYear + 5; i++) { for (let i = currentYear - 5; i <= baseYear + 5; i++) {
yearOptions.push({ label: i, value: i }); yearOptions.push({ label: i, value: i });
} }
const [param, setParam] = useState({ pick_year: baseYear, pick_agency: travel_agency_id }); const { getRemarkList } = useProductsStore((selector) => ({
getRemarkList: selector.getRemarkList,
}));
const [param, setParam] = useState({
pick_year: baseYear,
pick_agency: travel_agency_id,
});
const [pickYear, setPickYear] = useState(baseYear); const [pickYear, setPickYear] = useState(baseYear);
const [pickAgency, setPickAgency] = useState({ value: activeAgency.travel_agency_id, label: activeAgency.travel_agency_name }); const [pickAgency, setPickAgency] = useState({
value: activeAgency.travel_agency_id,
label: activeAgency.travel_agency_name,
});
const [pickAuditState, setPickAuditState] = useState(); const [pickAuditState, setPickAuditState] = useState();
useEffect(() => { useEffect(() => {
const _param = objectMapper(param, { pick_year: 'use_year', pick_agency: 'travel_agency_id', pick_state: 'audit_state' }); const _param = objectMapper(param, {
setSwitchParams({ ..._param, travel_agency_id: _param?.travel_agency_id || travelAgencyId }); pick_year: "use_year",
pick_agency: "travel_agency_id",
pick_state: "audit_state",
});
setSwitchParams({
..._param,
travel_agency_id: _param?.travel_agency_id || travelAgencyId,
});
refresh(param); refresh(param);
return () => {}; return () => {};
}, [param]); }, [param]);
const emptyPickState = { value: '', label: t('products:State') }; const emptyPickState = { value: "", label: t("products:State") };
useEffect(() => { useEffect(() => {
const baseState = audit_state ? (audit_state === 'all' ? emptyPickState : stateMapVal[`${audit_state}`]) : emptyPickState; const baseState = audit_state
? audit_state === "all"
? emptyPickState
: stateMapVal[`${audit_state}`]
: emptyPickState;
if (isEmpty(pickAuditState)) { if (isEmpty(pickAuditState)) {
setPickAuditState(baseState); setPickAuditState(baseState);
} }
@ -84,20 +118,23 @@ const Header = ({ refresh, ...props }) => {
// const s = Object.keys(agencyProducts).map((typeKey) => { // const s = Object.keys(agencyProducts).map((typeKey) => {
// }); // });
postAgencyProductsAuditAction(state, { travel_agency_id: activeAgency.travel_agency_id, use_year: switchParams.use_year }) postAgencyProductsAuditAction(state, {
travel_agency_id: activeAgency.travel_agency_id,
use_year: switchParams.use_year,
})
.then((json) => { .then((json) => {
if (json.errcode === 0) { if (json.errcode === 0) {
message.success(json.errmsg); message.success(json.errmsg);
if (typeof refresh === 'function') { if (typeof refresh === "function") {
refresh(param); refresh(param);
} }
} }
}) })
.catch((ex) => { .catch((ex) => {
notification.error({ notification.error({
message: 'Notification', message: "Notification",
description: ex.message, description: ex.message,
placement: 'top', placement: "top",
duration: 4, duration: 4,
}); });
}); });
@ -107,105 +144,166 @@ const Header = ({ refresh, ...props }) => {
postAgencyAuditAction(activeAgency.travel_agency_id, switchParams.use_year) postAgencyAuditAction(activeAgency.travel_agency_id, switchParams.use_year)
.then((json) => { .then((json) => {
if (json.errcode === 0) { if (json.errcode === 0) {
message.success(t('Success')); message.success(t("Success"));
if (typeof refresh === 'function') { if (typeof refresh === "function") {
refresh(param); refresh(param);
const auditPagePath = isPermitted(PERM_PRODUCTS_OFFER_AUDIT) const auditPagePath = isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
? `/products/${activeAgency.travel_agency_id}/${switchParams.use_year}/all/audit` ? `/products/${activeAgency.travel_agency_id}/${switchParams.use_year}/all/audit`
: isPermitted(PERM_PRODUCTS_OFFER_PUT) : isPermitted(PERM_PRODUCTS_OFFER_PUT)
? `/products/audit` ? `/products/audit`
: ''; : "";
navigate(auditPagePath); navigate(auditPagePath);
} }
} }
}) })
.catch((ex) => { .catch((ex) => {
notification.error({ notification.error({
message: 'Notification', message: "Notification",
description: ex.message, description: ex.message,
placement: 'top', placement: "top",
duration: 4, duration: 4,
}); });
}); });
}; };
const handleDownload = async () => { const handleDownload = async () => {
// await refresh(); // await refresh();
const agencyExtras = await getAgencyAllExtrasAction(switchParams); const agencyExtras = await getAgencyAllExtrasAction(switchParams);
const remarks = await getRemarkList()
const documentCreator = new AgencyContract(); const documentCreator = new AgencyContract();
const doc = documentCreator.create([switchParams, activeAgency, agencyProducts, agencyExtras]); const doc = documentCreator.create([
switchParams,
activeAgency,
agencyProducts,
agencyExtras,
remarks
]);
const _d = dayjs().format('YYYYMMDD_HH.mm.ss.SSS'); // Date.now().toString(32) const _d = dayjs().format("YYYYMMDD_HH.mm.ss.SSS"); // Date.now().toString(32)
Packer.toBlob(doc).then(blob => { Packer.toBlob(doc).then((blob) => {
saveAs(blob, `${activeAgency.travel_agency_name}${pickYear}年地接合同-${_d}.docx`); saveAs(
blob,
`${activeAgency.travel_agency_name}${pickYear}年地接合同-${_d}.docx`
);
}); });
}; };
return ( return (
<div className='flex justify-end items-center gap-4 h-full'> <div className="flex justify-end items-center gap-4 h-full">
<div className='grow'> <div className="grow">
<h2 className='m-0 leading-tight'> <h2 className="m-0 leading-tight">
{isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? ( {isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
<VendorSelector <VendorSelector
value={{ label: activeAgency.travel_agency_name, value: activeAgency.travel_agency_id }} value={{
label: activeAgency.travel_agency_name,
value: activeAgency.travel_agency_id,
}}
onChange={handleAgencyChange} onChange={handleAgencyChange}
allowClear={false} allowClear={false}
mode={null} mode={null}
className='w-72' className="w-72"
size='large' size="large"
variant={'borderless'} variant={"borderless"}
/> />
) : ( ) : (
activeAgency.travel_agency_name activeAgency.travel_agency_name
)} )}
<Divider type={'vertical'} /> <Divider type={"vertical"} />
<Select options={yearOptions} variant={'borderless'} className='w-24' size='large' value={pickYear} onChange={handleYearChange} /> <Select
<Divider type={'vertical'} /> options={yearOptions}
<AuditStateSelector variant={'borderless'} className='w-32' size='large' value={pickAuditState} onChange={handleAuditStateChange} /> variant={"borderless"}
className="w-24"
size="large"
value={pickYear}
onChange={handleYearChange}
/>
<Divider type={"vertical"} />
<AuditStateSelector
variant={"borderless"}
className="w-32"
size="large"
value={pickAuditState}
onChange={handleAuditStateChange}
/>
{/* <Divider type={'vertical'} /> {/* <Divider type={'vertical'} />
{(use_year || '').replace('all', '')} */} {(use_year || '').replace('all', '')} */}
<Button onClick={() => refresh(param)} type='text' className='text-primary round-none' icon={<ReloadOutlined />} /> <Button
onClick={() => refresh(param)}
type="text"
className="text-primary round-none"
icon={<ReloadOutlined />}
/>
</h2> </h2>
</div> </div>
{/* todo: export, 审核完成之后才能导出 */} {/* todo: export, 审核完成之后才能导出 */}
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}> <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
<Button size='small' onClick={handleDownload}>{t('Export')} .docx</Button> <Button size="small" onClick={handleDownload}>
{t("Export")} .docx
</Button>
{/* <PrintContractPDF /> */} {/* <PrintContractPDF /> */}
</RequireAuth> </RequireAuth>
{/* {activeAgencyState === 0 && ( */} {/* {activeAgencyState === 0 && ( */}
<> <>
<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}> <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
<Popconfirm title={t('products:sureSubmitAudit')} onConfirm={handleSubmitForAudit} okText={t('Yes')} placement={'bottomLeft'}> <Popconfirm
<Button size='small' type={'primary'} > title={t("products:sureSubmitAudit")}
{t('Submit')} onConfirm={handleSubmitForAudit}
{t('Audit')} okText={t("Yes")}
placement={"bottomLeft"}
>
<Button size="small" type={"primary"}>
{t("Submit")}
{t("Audit")}
</Button> </Button>
</Popconfirm> </Popconfirm>
</RequireAuth> </RequireAuth>
</> </>
{/* )} */} {/* )} */}
{showEditA && ( {showEditA && (
<Link className='px-2' to={isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? `/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/edit` : `/products/edit`}> <Link
{t('Edit')} className="px-2"
to={
isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
? `/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/edit`
: `/products/edit`
}
>
{t("Edit")}
</Link> </Link>
)} )}
{showAuditA && ( {showAuditA && (
<Link className='px-2' to={isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? `/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/audit` : `/products/audit`}> <Link
{t('products:AuditRes')} className="px-2"
to={
isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
? `/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/audit`
: `/products/audit`
}
>
{t("products:AuditRes")}
</Link> </Link>
)} )}
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}> <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
<Button size='small' type={'primary'} onClick={() => handleAuditAgency('1')}> <Button
{t('products:auditStateAction.Published')} size="small"
type={"primary"}
onClick={() => handleAuditAgency("1")}
>
{t("products:auditStateAction.Published")}
</Button> </Button>
</RequireAuth> </RequireAuth>
{/* <Button size='small' type={'primary'} ghost onClick={() => handleAuditAgency('2')}> {/* <Button size='small' type={'primary'} ghost onClick={() => handleAuditAgency('2')}>
{t('products:auditStateAction.Approved')} {t('products:auditStateAction.Approved')}
</Button> */} </Button> */}
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}> <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
<Button size='small' type={'primary'} danger ghost onClick={() => handleAuditAgency('3')}> <Button
{t('products:auditStateAction.Rejected')} size="small"
type={"primary"}
danger
ghost
onClick={() => handleAuditAgency("3")}
>
{t("products:auditStateAction.Rejected")}
</Button> </Button>
</RequireAuth> </RequireAuth>
</div> </div>

@ -229,10 +229,8 @@ const tableBorderOne = {
export default class AgencyContract { export default class AgencyContract {
#remarkList = [] #remarkList = []
constructor(remarkList) { create([headerParams, activeAgency, agencyProducts, agencyExtras, remarks]) {
this.#remarkList = remarkList this.#remarkList = remarks
}
create([headerParams, activeAgency, agencyProducts, agencyExtras]) {
const { use_year } = headerParams const { use_year } = headerParams
const h1 = `${activeAgency.travel_agency_name}${use_year}${DOC_TITLE}` const h1 = `${activeAgency.travel_agency_name}${use_year}${DOC_TITLE}`
const yearStart = dayjs(`${use_year}-01-01`).format('YYYY.MM.DD') const yearStart = dayjs(`${use_year}-01-01`).format('YYYY.MM.DD')

Loading…
Cancel
Save