| | |
| | | import { ref } from 'vue'; |
| | | import { useRouter } from 'vue-router'; |
| | | |
| | | import { Page, useVbenModal } from '../../../packages/effects/common-ui/src'; |
| | | import { downloadFileFromBlobPart } from '../../../packages/utils/src'; |
| | | import { Page, useVbenModal } from '@vben/common-ui'; |
| | | import { useUserStore } from '@vben/stores'; |
| | | import { downloadFileFromBlobPart } from '@vben/utils'; |
| | | |
| | | import { Button, message, Tabs } from 'ant-design-vue'; |
| | | import { Button, message, Tabs, Tag, Tooltip } from 'ant-design-vue'; |
| | | |
| | | import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; |
| | | import { |
| | | deleteContract, |
| | | exportContract, |
| | | generateSaleOrder, |
| | | getContractApproverIds, |
| | | getContractPage, |
| | | submitContract, |
| | | } from '#/api/crm/contract'; |
| | | import { $t } from '#/locales'; |
| | | |
| | | import { useGridColumns, useGridFormSchema } from './data'; |
| | | import AuditModal from './modules/audit-modal.vue'; |
| | | import Form from './modules/form.vue'; |
| | | |
| | | const { push } = useRouter(); |
| | | const sceneType = ref('1'); |
| | | const userStore = useUserStore(); |
| | | const currentUserId = userStore.userInfo?.id; // 当前登录用户 ID,用于审批人权限判断 |
| | | |
| | | /** 审批配置中该业务的审批人编号集合,决定「审核 / 审核不通过」按钮是否展示 */ |
| | | const approverIds = ref<number[]>([]); |
| | | |
| | | /** 拉取审批人集合;失败时保持为空(按钮不展示),不阻断列表加载 */ |
| | | async function loadApproverIds() { |
| | | try { |
| | | approverIds.value = (await getContractApproverIds()) ?? []; |
| | | } catch { |
| | | approverIds.value = []; |
| | | } |
| | | } |
| | | |
| | | /** 当前登录用户是否为该业务的审批人,且合同处于审批中(10) */ |
| | | function canAudit(row: CrmContractApi.Contract) { |
| | | return ( |
| | | row.auditStatus === 10 && |
| | | !!currentUserId && |
| | | approverIds.value.includes(currentUserId) |
| | | ); |
| | | } |
| | | |
| | | const [FormModal, formModalApi] = useVbenModal({ |
| | | connectedComponent: Form, |
| | | destroyOnClose: true, |
| | | }); |
| | | |
| | | /** 刷新表格 */ |
| | | const [AuditModalComp, auditModalApi] = useVbenModal({ |
| | | connectedComponent: AuditModal, |
| | | destroyOnClose: true, |
| | | }); |
| | | |
| | | /** 刷新表格与审批人集合 */ |
| | | function handleRefresh() { |
| | | gridApi.query(); |
| | | loadApproverIds(); |
| | | } |
| | | |
| | | /** 处理场景类型的切换 */ |
| | |
| | | } |
| | | } |
| | | |
| | | /** 提交审核 */ |
| | | /** 提交审批 - 审批人由「系统管理 - 审批配置」统一指定,此处无需选择 */ |
| | | async function handleSubmit(row: CrmContractApi.Contract) { |
| | | const hideLoading = message.loading({ |
| | | content: '提交审核中...', |
| | | content: '正在提交审批...', |
| | | duration: 0, |
| | | }); |
| | | try { |
| | | await submitContract(row.id!); |
| | | message.success('提交审核成功'); |
| | | message.success('提交审批成功'); |
| | | handleRefresh(); |
| | | } finally { |
| | | hideLoading(); |
| | | } |
| | | } |
| | | |
| | | /** 审核 - 通过 / 不通过 */ |
| | | function handleAudit(row: CrmContractApi.Contract, pass: boolean) { |
| | | auditModalApi.setData({ pass, row }).open(); |
| | | } |
| | | |
| | | /** 查看合同详情 */ |
| | |
| | | push({ name: 'CrmBusinessDetail', params: { id: row.businessId } }); |
| | | } |
| | | |
| | | /** 查看审批详情 */ |
| | | function handleProcessDetail(row: CrmContractApi.Contract) { |
| | | push({ |
| | | name: 'BpmProcessInstanceDetail', |
| | | query: { id: row.processInstanceId }, |
| | | /** 生成销售订单 */ |
| | | async function handleGenerateOrder(row: CrmContractApi.Contract) { |
| | | if (row.auditStatus !== 20) { |
| | | message.warning('只有已审批的合同才能生成销售订单'); |
| | | return; |
| | | } |
| | | if (row.orderId) { |
| | | message.warning('该合同已生成销售订单'); |
| | | return; |
| | | } |
| | | const hideLoading = message.loading({ |
| | | content: '正在生成销售订单...', |
| | | duration: 0, |
| | | }); |
| | | try { |
| | | const orderId = await generateSaleOrder(row.id!); |
| | | message.success('生成销售订单成功'); |
| | | handleRefresh(); |
| | | } finally { |
| | | hideLoading(); |
| | | } |
| | | } |
| | | |
| | | /** 查看销售订单 */ |
| | | function handleViewOrder(row: CrmContractApi.Contract) { |
| | | if (row.orderId) { |
| | | push({ |
| | | name: 'ErpSaleOrder', |
| | | query: { id: row.orderId }, |
| | | }); |
| | | } |
| | | } |
| | | |
| | | const [Grid, gridApi] = useVbenVxeGrid({ |
| | |
| | | }, |
| | | } as VxeTableGridOptions<CrmContractApi.Contract>, |
| | | }); |
| | | |
| | | // 进入页面即拉取审批人集合,用于控制审核按钮显隐 |
| | | loadApproverIds(); |
| | | </script> |
| | | |
| | | <template> |
| | | <Page auto-content-height><FormModal @success="handleRefresh" /> |
| | | <Page auto-content-height> |
| | | <FormModal @success="handleRefresh" /> |
| | | <AuditModalComp @success="handleRefresh" /> |
| | | <Grid> |
| | | <template #toolbar-actions> |
| | | <Tabs class="w-full" @change="handleChangeSceneType"> |
| | |
| | | {{ row.name }} |
| | | </Button> |
| | | </template> |
| | | <template #no="{ row }"> |
| | | <Tooltip v-if="row.auditStatus === 50" title="该合同已作废,订单已失效"> |
| | | <span class="text-red-500 cursor-pointer" @click="handleDetail(row)"> |
| | | {{ row.no }} |
| | | </span> |
| | | </Tooltip> |
| | | <Button v-else type="link" @click="handleDetail(row)"> |
| | | {{ row.no }} |
| | | </Button> |
| | | </template> |
| | | <template #customerName="{ row }"> |
| | | <Button type="link" @click="handleCustomerDetail(row)"> |
| | | {{ row.customerName }} |
| | |
| | | {{ row.signContactName }} |
| | | </Button> |
| | | </template> |
| | | <template #auditStatus="{ row }"> |
| | | <Tag v-if="row.auditStatus === 0" color="default">未提交</Tag> |
| | | <Tag v-if="row.auditStatus === 10" color="warning">审批中</Tag> |
| | | <Tag v-if="row.auditStatus === 20" color="success">审核通过</Tag> |
| | | <Tag v-if="row.auditStatus === 30" color="error">审核不通过</Tag> |
| | | <Tag v-if="row.auditStatus === 40" color="default">已取消</Tag> |
| | | <Tag v-if="row.auditStatus === 50" color="error">已作废</Tag> |
| | | </template> |
| | | <template #orderNo="{ row }"> |
| | | <Button v-if="row.orderId" type="link" @click="handleViewOrder(row)"> |
| | | {{ row.orderNo }} |
| | | </Button> |
| | | <span v-else>-</span> |
| | | </template> |
| | | <template #actions="{ row }"> |
| | | <TableAction |
| | | :actions="[ |
| | |
| | | ifShow: row.auditStatus === 0, |
| | | }, |
| | | { |
| | | label: '提交审核', |
| | | label: '提交审批', |
| | | type: 'link', |
| | | auth: ['crm:contract:update'], |
| | | onClick: handleSubmit.bind(null, row), |
| | | ifShow: row.auditStatus === 0, |
| | | // 审批人由审批配置统一指定,提交前仅二次确认,不再弹选流程框 |
| | | popConfirm: { |
| | | title: '确认提交审批?提交后由审批配置中指定的审批人处理。', |
| | | confirm: handleSubmit.bind(null, row), |
| | | }, |
| | | // 未提交(0) 与 审核不通过(30) 均可提交,后者需修改后重新提交 |
| | | ifShow: row.auditStatus === 0 || row.auditStatus === 30, |
| | | }, |
| | | { |
| | | label: '查看审批', |
| | | label: '审核', |
| | | type: 'link', |
| | | icon: ACTION_ICON.AUDIT, |
| | | auth: ['crm:contract:audit'], |
| | | // 仅「审批中 + 当前登录用户在审批配置的审批人名单内」才显示 |
| | | ifShow: canAudit(row), |
| | | onClick: handleAudit.bind(null, row, true), |
| | | }, |
| | | { |
| | | label: '审核不通过', |
| | | type: 'link', |
| | | danger: true, |
| | | auth: ['crm:contract:audit'], |
| | | // 同上,与「审核」成对出现 |
| | | ifShow: canAudit(row), |
| | | onClick: handleAudit.bind(null, row, false), |
| | | }, |
| | | { |
| | | label: '生成销售订单', |
| | | type: 'link', |
| | | auth: ['crm:contract:update'], |
| | | onClick: handleProcessDetail.bind(null, row), |
| | | ifShow: row.auditStatus !== 0, |
| | | onClick: handleGenerateOrder.bind(null, row), |
| | | ifShow: row.auditStatus === 20 && !row.orderId, |
| | | }, |
| | | { |
| | | label: '查看订单', |
| | | type: 'link', |
| | | auth: ['erp:sale-order:query'], |
| | | onClick: handleViewOrder.bind(null, row), |
| | | ifShow: !!row.orderId, |
| | | }, |
| | | { |
| | | label: $t('common.delete'), |
| | |
| | | title: $t('ui.actionMessage.deleteConfirm', [row.name]), |
| | | confirm: handleDelete.bind(null, row), |
| | | }, |
| | | ifShow: row.auditStatus === 0, |
| | | }, |
| | | ]" |
| | | /> |
| | | </template> |
| | | </Grid> |
| | | |
| | | </Page> |
| | | </template> |