feat(bpm): 流程模型列表新增「免审批」开关与全局总开关

liu

昨天 b725cca0ff60728be04ef2ddb4cde5fcdf80bf8e

 src/views/bpm/model/modules/category-draggable-model.vue

@@ -5,12 +5,12 @@
import { computed, ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router';

import { useAccess } from '..\..\..\..\packages\effects\access\src';
import { confirm, EllipsisText, useVbenModal } from '..\..\..\..\packages\effects\common-ui\src';
import { BpmModelFormType } from '..\..\..\..\packages\constants\src';
import { IconifyIcon } from '..\..\..\..\packages\icons\src';
import { useUserStore } from '..\..\..\..\packages\stores\src';
import { cloneDeep, formatDateTime, isEqual } from '..\..\..\..\packages\utils\src';
import { useAccess } from '@vben/access';
import { confirm, EllipsisText, useVbenModal } from '@vben/common-ui';
import { BpmModelFormType } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { useUserStore } from '@vben/stores';
import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';

import { useDebounceFn } from '@vueuse/core';
import { useSortable } from '@vueuse/integrations/useSortable';
@@ -21,11 +21,13 @@
  Dropdown,
  Menu,
  message,
  Switch,
  Tag,
  Tooltip,
} from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { updateAutoApproveByKey } from '#/api/bpm/autoApprove';
import { deleteCategory } from '#/api/bpm/category';
import {
  cleanModel,
@@ -64,6 +66,7 @@
const isModelSorting = ref(false);
const originalData = ref<BpmModelApi.Model[]>([]);
const modelList = ref<BpmModelApi.Model[]>([]);
const autoApproveLoadingId = ref<null | number>(null); // 免审批开关：正在提交的模型编号
// TODO @jason：可以全部展开么？ @芋艿 上次讨论。好像是因为性能问题才只展开第一个分类
const isExpand = ref(props.isFirst); // 根据是否为第一个分类, 来设置初始展开状态

@@ -81,6 +84,10 @@
});
const hasPermiDeploy = computed(() => {
  return hasAccessByCodes(['bpm:model:deploy']);
});
/** 免审批开关的权限：无权限时开关置灰，避免点了才报错 */
const hasPermiAutoApprove = computed(() => {
  return hasAccessByCodes(['bpm:process-auto-approve:update']);
});

const [Grid, gridApi] = useVbenVxeGrid({
@@ -287,6 +294,32 @@
  message.success(`发布[${row.name}]流程成功`);
  // 刷新列表
  emit('success');
}

/** 切换免审批开关：开启后该流程提交时不再进入人工审批，由系统自动通过 */
async function handleAutoApproveChange(checked: boolean, row: any) {
  const oldValue = row.autoApprove;
  // 乐观更新，避免等待接口期间开关状态回跳
  row.autoApprove = checked;
  gridApi.setGridOptions({ data: modelList.value });
  autoApproveLoadingId.value = row.id;
  try {
    await updateAutoApproveByKey(row.key, checked);
    message.success(
      checked
        ? `已开启[${row.name}]免审批：该流程提交后将由系统自动通过`
        : `已关闭[${row.name}]免审批：恢复为正常人工审批`,
    );
    // 重新拉取列表，保证前端状态与后端一致
    emit('success');
  } catch (error) {
    // 失败回滚
    row.autoApprove = oldValue;
    gridApi.setGridOptions({ data: modelList.value });
    console.error('设置免审批开关失败', error);
  } finally {
    autoApproveLoadingId.value = null;
  }
}

/** '更多'操作按钮 */
@@ -661,6 +694,28 @@
                </Tag>
              </div>
            </template>
            <template #autoApprove="{ row }">
              <div class="flex items-center gap-1">
                <Switch
                  :checked="row.autoApprove"
                  :loading="autoApproveLoadingId === row.id"
                  :disabled="!hasPermiAutoApprove"
                  size="small"
                  @change="
                    (checked: any) => handleAutoApproveChange(checked, row)
                  "
                />
                <Tooltip
                  v-if="!row.processDefinition"
                  title="流程尚未发布，免审批开关不会生效，请先发布流程"
                >
                  <IconifyIcon
                    icon="lucide:alert-circle"
                    class="text-base text-orange-400"
                  />
                </Tooltip>
              </div>
            </template>
            <template #actions="{ row }">
              <div class="flex items-center space-x-0">
                <Button