gaoluyang
98 分钟以前 787ccc59ba89bacc075562a161ecf02bc76ebadc
src/views/crm/contract/index.vue
@@ -5,15 +5,17 @@
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 { downloadFileFromBlobPart } from '@vben/utils';
import { Button, message, Tabs } from 'ant-design-vue';
import { Button, message, Modal, Select, Tabs, Tag, Tooltip } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  deleteContract,
  exportContract,
  generateSaleOrder,
  getContractApproveProcessList,
  getContractPage,
  submitContract,
} from '#/api/crm/contract';
@@ -76,18 +78,34 @@
  }
}
/** 提交审核 */
/** 提交审批弹窗 */
const submitModalVisible = ref(false);
const currentRow = ref<CrmContractApi.Contract>();
const processList = ref<CrmContractApi.ApproveProcess[]>([]);
const selectedProcessKey = ref<string>();
const submitLoading = ref(false);
async function handleSubmit(row: CrmContractApi.Contract) {
  const hideLoading = message.loading({
    content: '提交审核中...',
    duration: 0,
  });
  const res = await getContractApproveProcessList();
  processList.value = res;
  currentRow.value = row;
  selectedProcessKey.value = undefined;
  submitModalVisible.value = true;
}
async function confirmSubmit() {
  if (!selectedProcessKey.value) {
    message.warning('请选择审批流程');
    return;
  }
  submitLoading.value = true;
  try {
    await submitContract(row.id!);
    message.success('提交审核成功');
    await submitContract(currentRow.value!.id!, selectedProcessKey.value);
    message.success('提交审批成功');
    submitModalVisible.value = false;
    handleRefresh();
  } finally {
    hideLoading();
    submitLoading.value = false;
  }
}
@@ -117,6 +135,39 @@
    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({
@@ -152,7 +203,8 @@
</script>
<template>
  <Page auto-content-height><FormModal @success="handleRefresh" />
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <Grid>
      <template #toolbar-actions>
        <Tabs class="w-full" @change="handleChangeSceneType">
@@ -186,6 +238,16 @@
          {{ 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 }}
@@ -201,6 +263,20 @@
          {{ 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="[
@@ -213,7 +289,7 @@
              ifShow: row.auditStatus === 0,
            },
            {
              label: '提交审核',
              label: '提交审批',
              type: 'link',
              auth: ['crm:contract:update'],
              onClick: handleSubmit.bind(null, row),
@@ -227,6 +303,20 @@
              ifShow: row.auditStatus !== 0,
            },
            {
              label: '生成销售订单',
              type: 'link',
              auth: ['crm:contract:update'],
              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'),
              type: 'link',
              danger: true,
@@ -235,10 +325,34 @@
                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                confirm: handleDelete.bind(null, row),
              },
              ifShow: row.auditStatus === 0,
            },
          ]"
        />
      </template>
    </Grid>
    <!-- 提交审批弹窗 -->
    <Modal
      v-model:open="submitModalVisible"
      title="选择审批流程"
      width="400px"
      @ok="confirmSubmit"
      :confirmLoading="submitLoading"
    >
      <Select
        v-model:value="selectedProcessKey"
        placeholder="请选择审批流程"
        class="w-full"
      >
        <Select.Option
          v-for="item in processList"
          :key="item.key"
          :value="item.key"
        >
          {{ item.name }}
        </Select.Option>
      </Select>
    </Modal>
  </Page>
</template>