feat(bi): 为图表配置接口添加名称字段

云

6 天以前 a241b66efcc41e973290a6722fb7a4d79b833ea1

 src/views/crm/contract/index.vue

@@ -5,22 +5,26 @@
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';
import { $t } from '#/locales';
import { automaticApproval } from '#/store/audit-policy';

import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import ImportForm from './modules/import-form.vue';

const { push } = useRouter();
const sceneType = ref('1');
@@ -30,8 +34,14 @@
  destroyOnClose: true,
});

const [ImportModal, importModalApi] = useVbenModal({
  connectedComponent: ImportForm,
  destroyOnClose: true,
});

/** 刷新表格 */
function handleRefresh() {
  gridApi.grid.clearCheckboxRow();
  gridApi.query();
}

@@ -49,6 +59,29 @@
    ...formValues,
  });
  downloadFileFromBlobPart({ fileName: '合同.xls', source: data });
}

/** 导出勾选的合同 */
async function handleExportSelected() {
  const rows: CrmContractApi.Contract[] =
    gridApi.grid.getCheckboxRecords?.() ?? [];
  const ids = rows.map((row) => row.id!);
  if (ids.length === 0) {
    message.warning('请先勾选要导出的合同');
    return;
  }
  const formValues = await gridApi.formApi.getValues();
  const data = await exportContract({
    sceneType: sceneType.value,
    ids: ids.join(','),
    ...formValues,
  });
  downloadFileFromBlobPart({ fileName: '合同.xls', source: data });
}

/** 导入合同 */
function handleImport() {
  importModalApi.open();
}

/** 创建合同 */
@@ -76,18 +109,39 @@
  }
}

/** 提交审核 */
/** 提交审批弹窗 */
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 = automaticApproval.value ? [] : await getContractApproveProcessList();
  processList.value = res;
  currentRow.value = row;
  selectedProcessKey.value = undefined;
  if (automaticApproval.value) {
    selectedProcessKey.value = 'contract_approve';
    await confirmSubmit();
    return;
  }
  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(automaticApproval.value ? '已提交生效' : '提交审批成功');
    submitModalVisible.value = false;
    handleRefresh();
  } finally {
    hideLoading();
    submitLoading.value = false;
  }
}

@@ -117,6 +171,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 +239,9 @@
</script>

<template>
  <Page auto-content-height><FormModal @success="handleRefresh" />
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <ImportModal @success="handleRefresh" />
    <Grid>
      <template #toolbar-actions>
        <Tabs class="w-full" @change="handleChangeSceneType">
@@ -178,12 +267,36 @@
              auth: ['crm:contract:export'],
              onClick: handleExport,
            },
            {
              label: '导出选中',
              type: 'primary',
              icon: ACTION_ICON.DOWNLOAD,
              auth: ['crm:contract:export'],
              onClick: handleExportSelected,
            },
            {
              label: '导入',
              type: 'primary',
              icon: ACTION_ICON.UPLOAD,
              auth: ['crm:contract:import'],
              onClick: handleImport,
            },
          ]"
        />
      </template>
      <template #name="{ row }">
        <Button type="link" @click="handleDetail(row)">
          {{ 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 }">
@@ -201,6 +314,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 +340,7 @@
              ifShow: row.auditStatus === 0,
            },
            {
              label: '提交审核',
              label: '提交审批',
              type: 'link',
              auth: ['crm:contract:update'],
              onClick: handleSubmit.bind(null, row),
@@ -227,6 +354,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 +376,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>