!141 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !141 from Jason/dev

apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue

@@ -33,6 +33,18 @@ const [Modal, modalApi] = useVbenModal({
   title: '条件配置',
   destroyOnClose: true,
   draggable: true,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      // 获取传递的数据
+      const conditionObj = modalApi.getData();
+      if (conditionObj) {
+        conditionData.value.conditionType = conditionObj.conditionType;
+        conditionData.value.conditionExpression =
+          conditionObj.conditionExpression;
+        conditionData.value.conditionGroups = conditionObj.conditionGroups;
+      }
+    }
+  },
   async onConfirm() {
     // 校验表单
     if (!conditionRef.value) return;
@@ -50,17 +62,8 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
-// TODO: jason  open 在 useVbenModal 中 onOpenChange 方法
+// TODO xingyu 暴露 modalApi 给父组件是否合适? trigger-node-config.vue 会有多个 conditionDialog 实例
-function open(conditionObj: any | undefined) {
+defineExpose({ modalApi });
-  if (conditionObj) {
-    conditionData.value.conditionType = conditionObj.conditionType;
-    conditionData.value.conditionExpression = conditionObj.conditionExpression;
-    conditionData.value.conditionGroups = conditionObj.conditionGroups;
-  }
-  modalApi.open();
-}
-// TODO: jason  不需要暴露expose，直接使用modalApi.setData(formSetting).open()
-defineExpose({ open });
 </script>
 <template>
   <Modal class="w-1/2">

apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue

@@ -200,8 +200,8 @@ function addFormSettingCondition(
   formSetting: FormTriggerSetting,
 ) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
-  // TODO: jason Modal 使用 useVbenModal 初始化，弹出使用modalApi.setData(formSetting).open()
+  // 使用modalApi来打开模态框并传递数据
-  conditionDialog.open(formSetting);
+  conditionDialog.modalApi.setData(formSetting).open();
 }
 
 /** 删除条件配置 */
@@ -215,7 +215,8 @@ function openFormSettingCondition(
   formSetting: FormTriggerSetting,
 ) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
-  conditionDialog.open(formSetting);
+  // 使用 modalApi 来打开模态框并传递数据
+  conditionDialog.modalApi.setData(formSetting).open();
 }
 
 /** 处理条件配置保存 */

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
 
 import { computed, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { confirm, EllipsisText, useVbenModal } from '@vben/common-ui';
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
@@ -18,11 +19,11 @@ import {
   Dropdown,
   Menu,
   message,
-  Table,
   Tag,
   Tooltip,
 } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteCategory } from '#/api/bpm/category';
 import {
   cleanModel,
@@ -31,14 +32,14 @@ import {
   updateModelSortBatch,
   updateModelState,
 } from '#/api/bpm/model';
-import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
-import { BpmModelFormType, DICT_TYPE } from '#/utils';
+import { BpmModelFormType } from '#/utils';
 
 // 导入重命名表单
 import CategoryRenameForm from '../../category/modules/rename-form.vue';
 // 导入 FormCreate 表单详情
 import FormCreateDetail from '../../form/modules/detail.vue';
+import { useGridColumns } from './data';
 
 const props = defineProps<{
   categoryInfo: ModelCategoryInfo;
@@ -67,66 +68,41 @@ const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.ModelVO[]>([]);
 const modelList = ref<BpmModelApi.ModelVO[]>([]);
 const isExpand = ref(false);
-const tableRef = ref();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    pagerConfig: {
+      enabled: false,
+    },
+    data: modelList.value,
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      enabled: false, // 完全禁用工具栏
+    },
+  } as VxeTableGridOptions,
+});
 
 // 排序引用，以便后续启用或禁用排序
 const sortableInstance = ref<any>(null);
 /** 解决 v-model 问题，使用计算属性 */
 const expandKeys = computed(() => (isExpand.value ? ['1'] : []));
 
-// 表格列配置
-const columns = [
-  {
-    title: '流程名',
-    dataIndex: 'name',
-    key: 'name',
-    align: 'left' as const,
-    width: 250,
-  },
-  {
-    title: '可见范围',
-    dataIndex: 'startUserIds',
-    key: 'startUserIds',
-    align: 'center' as const,
-    ellipsis: true,
-    width: 150,
-  },
-  {
-    title: '流程类型',
-    dataIndex: 'type',
-    key: 'type',
-    align: 'center' as const,
-    ellipsis: true,
-    width: 150,
-  },
-  {
-    title: '表单信息',
-    dataIndex: 'formType',
-    key: 'formType',
-    align: 'center' as const,
-    ellipsis: true,
-    width: 150,
-  },
-  {
-    title: '最后发布',
-    dataIndex: 'deploymentTime',
-    key: 'deploymentTime',
-    align: 'center' as const,
-    width: 250,
-  },
-  {
-    title: '操作',
-    key: 'operation',
-    align: 'center' as const,
-    fixed: 'right' as const,
-    width: 150,
-  },
-];
-
 /** 处理模型的排序 */
 function handleModelSort() {
-  // 保存初始数据
+  // 保存初始数据并确保数据完整
-  originalData.value = cloneDeep(props.categoryInfo.modelList);
+  if (props.categoryInfo.modelList && props.categoryInfo.modelList.length > 0) {
+    originalData.value = cloneDeep(props.categoryInfo.modelList);
+    modelList.value = cloneDeep(props.categoryInfo.modelList);
+  }
+
+  // 更新表格数据
+  gridApi.setGridOptions({
+    data: modelList.value,
+  });
+
   // 展开数据
   isExpand.value = true;
   isModelSorting.value = true;
@@ -135,9 +111,28 @@ function handleModelSort() {
     // 已存在实例，则启用排序功能
     sortableInstance.value.option('disabled', false);
   } else {
-    const sortableClass = `.category-${props.categoryInfo.id} .ant-table .ant-table-tbody`;
+    const sortableClass = `.category-${props.categoryInfo.id} .vxe-table .vxe-table--body-wrapper:not(.fixed-right--wrapper) .vxe-table--body tbody`;
-    sortableInstance.value = useSortable(sortableClass, modelList, {
+    // 确保使用最新的数据
-      disabled: false, // 启用排序
+    modelList.value = cloneDeep(props.categoryInfo.modelList);
+    // 更新表格数据
+    gridApi.setGridOptions({
+      data: modelList.value,
+    });
+
+    sortableInstance.value = useSortable(sortableClass, modelList.value, {
+      draggable: '.vxe-body--row',
+      animation: 150,
+      handle: '.drag-handle',
+      disabled: false,
+      onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
+        if (oldDraggableIndex !== newDraggableIndex) {
+          modelList.value.splice(
+            newDraggableIndex ?? 0,
+            0,
+            modelList.value.splice(oldDraggableIndex ?? 0, 1)[0]!,
+          );
+        }
+      },
     });
   }
 }
@@ -145,9 +140,26 @@ function handleModelSort() {
 /** 处理模型的排序提交 */
 async function handleModelSortSubmit() {
   try {
+    // 确保数据已经正确同步
+    if (!modelList.value || modelList.value.length === 0) {
+      message.error('排序数据异常，请重试');
+      return;
+    }
+
     // 保存排序
     const ids = modelList.value.map((item) => item.id);
-    await updateModelSortBatch(ids);
+
+    // 检查是否有所有必要的ID
+    if (ids.length === props.categoryInfo.modelList.length) {
+      // 使用排序后的数据
+      await updateModelSortBatch(ids);
+    } else {
+      console.warn('排序数据不完整，尝试使用原始数据');
+      // 如果数据不完整，使用原始数据
+      const originalIds = props.categoryInfo.modelList.map((item) => item.id);
+      await updateModelSortBatch(originalIds);
+    }
+
     // 刷新列表
     isModelSorting.value = false;
     message.success('排序模型成功');
@@ -160,12 +172,18 @@ async function handleModelSortSubmit() {
 /** 处理模型的排序取消 */
 function handleModelSortCancel() {
   // 恢复初始数据
-  modelList.value = cloneDeep(originalData.value);
+  if (originalData.value && originalData.value.length > 0) {
-  isModelSorting.value = false;
+    modelList.value = cloneDeep(originalData.value);
+    // 更新表格数据
+    gridApi.setGridOptions({
+      data: modelList.value,
+    });
+  }
   // 禁用排序功能
   if (sortableInstance.value) {
     sortableInstance.value.option('disabled', true);
   }
+  isModelSorting.value = false;
 }
 
 /** 处理下拉菜单命令 */
@@ -353,6 +371,10 @@ const updateModelList = useDebounceFn(() => {
     isModelSorting.value = false;
     // 重置排序实例
     sortableInstance.value = null;
+    // 更新表格数据
+    gridApi.setGridOptions({
+      data: modelList.value,
+    });
   }
 }, 100);
 
@@ -367,13 +389,6 @@ watchEffect(() => {
   }
 });
 
-/** 自定义表格行渲染 */
-function customRow(_record: any) {
-  return {
-    class: isModelSorting.value ? 'cursor-move' : '',
-  };
-}
-
 // 处理重命名成功
 const handleRenameSuccess = () => {
   emit('success');
@@ -476,208 +491,179 @@ const handleRenameSuccess = () => {
           class="border-0 bg-transparent p-0"
           v-show="isExpand"
         >
-          <Table
+          <Grid
             v-if="modelList && modelList.length > 0"
             :class="`category-${categoryInfo.id}`"
-            ref="tableRef"
-            :data-source="modelList"
-            :columns="columns"
-            :pagination="false"
-            :custom-row="customRow"
-            :scroll="{ x: '100%' }"
-            row-key="id"
           >
-            <template #bodyCell="{ column, record }">
+            <template #name="{ row }">
-              <!-- 流程名 -->
+              <div class="flex items-center">
-              <template v-if="column.key === 'name'">
+                <Tooltip
-                <div class="flex items-center">
+                  v-if="isModelSorting"
-                  <Tooltip v-if="isModelSorting" title="拖动排序">
+                  title="拖动排序"
-                    <span
+                  placement="left"
-                      class="icon-[ic--round-drag-indicator] mr-2.5 cursor-move text-2xl text-gray-500"
+                >
-                    ></span>
+                  <span
-                  </Tooltip>
+                    class="icon-[ic--round-drag-indicator] drag-handle mr-2.5 cursor-move text-2xl text-gray-500"
-                  <div
+                  ></span>
-                    v-if="!record.icon"
+                </Tooltip>
-                    class="mr-2.5 flex h-9 w-9 items-center justify-center rounded bg-blue-500 text-white"
+                <div
-                  >
+                  v-if="!row.icon"
-                    <span style="font-size: 12px">
+                  class="mr-2.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded bg-blue-500 text-white"
-                      {{ record.name.substring(0, 2) }}
+                >
-                    </span>
+                  <span style="font-size: 12px">
-                  </div>
+                    {{ row.name.substring(0, 2) }}
-                  <img
+                  </span>
-                    v-else
+                </div>
-                    :src="record.icon"
+                <img
-                    class="mr-2.5 h-9 w-9 rounded"
+                  v-else
-                    alt="图标"
+                  :src="row.icon"
-                  />
+                  class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
-                  <EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
+                  alt="图标"
-                    {{ record.name }}
+                />
+                <div class="min-w-0">
+                  <EllipsisText :max-width="100" :tooltip-when-ellipsis="true">
+                    {{ row.name }}
                   </EllipsisText>
                 </div>
-              </template>
+              </div>
-
+            </template>
-              <!-- 可见范围列-->
+            <template #startUserIds="{ row }">
-              <template v-else-if="column.key === 'startUserIds'">
+              <span v-if="!row.startUsers?.length && !row.startDepts?.length">
-                <span
+                全部可见
-                  v-if="
+              </span>
-                    !record.startUsers?.length && !record.startDepts?.length
+              <span v-else-if="row.startUsers?.length === 1">
+                {{ row.startUsers[0].nickname }}
+              </span>
+              <span v-else-if="row.startDepts?.length === 1">
+                {{ row.startDepts[0].name }}
+              </span>
+              <span v-else-if="row.startDepts?.length > 1">
+                <Tooltip
+                  placement="top"
+                  :title="
+                    row.startDepts.map((dept: any) => dept.name).join('、')
                   "
                 >
-                  全部可见
+                  {{ row.startDepts[0].name }}等
-                </span>
+                  {{ row.startDepts.length }} 个部门可见
-                <span v-else-if="record.startUsers?.length === 1">
+                </Tooltip>
-                  {{ record.startUsers[0].nickname }}
+              </span>
-                </span>
+              <span v-else-if="row.startUsers?.length > 1">
-                <span v-else-if="record.startDepts?.length === 1">
+                <Tooltip
-                  {{ record.startDepts[0].name }}
+                  placement="top"
-                </span>
+                  :title="
-                <span v-else-if="record.startDepts?.length > 1">
+                    row.startUsers.map((user: any) => user.nickname).join('、')
-                  <Tooltip
+                  "
-                    placement="top"
-                    :title="
-                      record.startDepts.map((dept: any) => dept.name).join('、')
-                    "
-                  >
-                    {{ record.startDepts[0].name }}等
-                    {{ record.startDepts.length }} 个部门可见
-                  </Tooltip>
-                </span>
-                <span v-else-if="record.startUsers?.length > 1">
-                  <Tooltip
-                    placement="top"
-                    :title="
-                      record.startUsers
-                        .map((user: any) => user.nickname)
-                        .join('、')
-                    "
-                  >
-                    {{ record.startUsers[0].nickname }}等
-                    {{ record.startUsers.length }} 人可见
-                  </Tooltip>
-                </span>
-              </template>
-              <!-- 流程类型列 -->
-              <template v-else-if="column.key === 'type'">
-                <!-- <DictTag :value="record.type" :type="DICT_TYPE.BPM_MODEL_TYPE" /> -->
-                <!-- <Tag>{{ record.type }}</Tag> -->
-                <DictTag
-                  :type="DICT_TYPE.BPM_MODEL_TYPE"
-                  :value="record.type"
-                />
-              </template>
-              <!-- 表单信息列 -->
-              <template v-else-if="column.key === 'formType'">
-                <!-- TODO BpmModelFormType.NORMAL -->
-                <Button
-                  v-if="record.formType === BpmModelFormType.NORMAL"
-                  type="link"
-                  @click="handleFormDetail(record)"
                 >
-                  {{ record.formName }}
+                  {{ row.startUsers[0].nickname }}等
-                </Button>
+                  {{ row.startUsers.length }} 人可见
-                <!-- TODO BpmModelFormType.CUSTOM -->
+                </Tooltip>
-                <Button
+              </span>
-                  v-else-if="record.formType === BpmModelFormType.CUSTOM"
+            </template>
-                  type="link"
+            <template #formInfo="{ row }">
-                  @click="handleFormDetail(record)"
+              <Button
+                v-if="row.formType === BpmModelFormType.NORMAL"
+                type="link"
+                @click="handleFormDetail(row)"
+              >
+                {{ row.formName }}
+              </Button>
+              <!-- TODO BpmModelFormType.CUSTOM -->
+              <Button
+                v-else-if="row.formType === BpmModelFormType.CUSTOM"
+                type="link"
+                @click="handleFormDetail(row)"
+              >
+                {{ row.formCustomCreatePath }}
+              </Button>
+              <span v-else>暂无表单</span>
+            </template>
+            <template #deploymentTime="{ row }">
+              <div class="flex items-center justify-center">
+                <span v-if="row.processDefinition" class="w-[150px]">
+                  {{ formatDateTime(row.processDefinition.deploymentTime) }}
+                </span>
+                <Tag v-if="row.processDefinition">
+                  v{{ row.processDefinition.version }}
+                </Tag>
+                <Tag v-else color="warning">未部署</Tag>
+                <Tag
+                  v-if="row.processDefinition?.suspensionState === 2"
+                  color="warning"
+                  class="ml-[10px]"
                 >
-                  {{ record.formCustomCreatePath }}
+                  已停用
+                </Tag>
+              </div>
+            </template>
+            <template #actions="{ row }">
+              <div class="flex items-center space-x-0">
+                <!-- TODO 权限校验-->
+                <Button
+                  type="link"
+                  size="small"
+                  class="px-1"
+                  @click="modelOperation('update', row.id)"
+                  :disabled="!isManagerUser(row)"
+                >
+                  修改
                 </Button>
-                <span v-else>暂无表单</span>
+                <Button
-              </template>
+                  type="link"
-              <!-- 最后发布列 -->
+                  size="small"
-              <template v-else-if="column.key === 'deploymentTime'">
+                  class="px-1"
-                <div class="flex items-center justify-center">
+                  @click="handleDeploy(row)"
-                  <span v-if="record.processDefinition" class="w-[150px]">
+                  :disabled="!isManagerUser(row)"
-                    {{
+                >
-                      formatDateTime(record.processDefinition.deploymentTime)
+                  发布
-                    }}
+                </Button>
-                  </span>
+                <Dropdown placement="bottomRight" arrow>
-                  <Tag v-if="record.processDefinition">
+                  <Button type="link" size="small" class="px-1">更多</Button>
-                    v{{ record.processDefinition.version }}
+                  <template #overlay>
-                  </Tag>
+                    <Menu
-                  <Tag v-else color="warning">未部署</Tag>
+                      @click="(e) => handleModelCommand(e.key as string, row)"
-                  <Tag
+                    >
-                    v-if="record.processDefinition?.suspensionState === 2"
+                      <Menu.Item key="handleCopy"> 复制 </Menu.Item>
-                    color="warning"
+                      <Menu.Item key="handleDefinitionList"> 历史 </Menu.Item>
-                    class="ml-[10px]"
-                  >
-                    已停用
-                  </Tag>
-                </div>
-              </template>
-              <!-- 操作列 -->
-              <template v-else-if="column.key === 'operation'">
-                <div class="flex items-center space-x-0">
-                  <!-- TODO 权限校验-->
-                  <Button
-                    type="link"
-                    size="small"
-                    class="px-1"
-                    @click="modelOperation('update', record.id)"
-                    :disabled="!isManagerUser(record)"
-                  >
-                    修改
-                  </Button>
-                  <Button
-                    type="link"
-                    size="small"
-                    class="px-1"
-                    @click="handleDeploy(record)"
-                    :disabled="!isManagerUser(record)"
-                  >
-                    发布
-                  </Button>
-                  <Dropdown placement="bottomRight" arrow>
-                    <Button type="link" size="small" class="px-1">更多</Button>
-                    <template #overlay>
-                      <Menu
-                        @click="
-                          (e) => handleModelCommand(e.key as string, record)
-                        "
-                      >
-                        <Menu.Item key="handleCopy"> 复制 </Menu.Item>
-                        <Menu.Item key="handleDefinitionList"> 历史 </Menu.Item>
 
-                        <!-- TODO 待实现报表
+                      <!-- TODO 待实现报表
                         <Menu.Item
                           key="handleReport"
                           :disabled="!isManagerUser(record)"
                         >
                           报表
                         </Menu.Item> -->
-                        <Menu.Item
+                      <Menu.Item
-                          key="handleChangeState"
+                        key="handleChangeState"
-                          v-if="record.processDefinition"
+                        v-if="row.processDefinition"
-                          :disabled="!isManagerUser(record)"
+                        :disabled="!isManagerUser(row)"
-                        >
+                      >
-                          {{
+                        {{
-                            record.processDefinition.suspensionState === 1
+                          row.processDefinition.suspensionState === 1
-                              ? '停用'
+                            ? '停用'
-                              : '启用'
+                            : '启用'
-                          }}
+                        }}
-                        </Menu.Item>
+                      </Menu.Item>
-                        <Menu.Item
+                      <Menu.Item
-                          danger
+                        danger
-                          key="handleClean"
+                        key="handleClean"
-                          :disabled="!isManagerUser(record)"
+                        :disabled="!isManagerUser(row)"
-                        >
+                      >
-                          清理
+                        清理
-                        </Menu.Item>
+                      </Menu.Item>
-                        <Menu.Item
+                      <Menu.Item
-                          danger
+                        danger
-                          key="handleDelete"
+                        key="handleDelete"
-                          :disabled="!isManagerUser(record)"
+                        :disabled="!isManagerUser(row)"
-                        >
+                      >
-                          删除
+                        删除
-                        </Menu.Item>
+                      </Menu.Item>
-                      </Menu>
+                    </Menu>
-                    </template>
+                  </template>
-                  </Dropdown>
+                </Dropdown>
-                </div>
+              </div>
-              </template>
             </template>
-          </Table>
+          </Grid>
         </Collapse.Panel>
       </Collapse>
     </Card>
@@ -691,22 +677,11 @@ const handleRenameSuccess = () => {
 
 <style lang="scss" scoped>
 .category-draggable-model {
-  // ant-table-tbody 自定义样式
-  :deep(.ant-table-tbody > tr > td) {
-    overflow: hidden;
-    border-bottom: none;
-  }
   // ant-collapse-header 自定义样式
   :deep(.ant-collapse-header) {
     padding: 0;
   }
 
-  // 优化表格渲染性能
-  :deep(.ant-table-tbody) {
-    transform: translateZ(0);
-    will-change: transform;
-  }
-
   // 折叠面板样式
   :deep(.ant-collapse-content-box) {
     padding: 0;

apps/web-antd/src/views/bpm/model/modules/data.ts

@@ -0,0 +1,49 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmModelApi } from '#/api/bpm/model';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<BpmModelApi.ModelVO>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '流程名称',
+      width: 250,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'startUserIds',
+      title: '可见范围',
+      width: 150,
+      slots: { default: 'startUserIds' },
+    },
+    {
+      field: 'type',
+      title: '流程类型',
+      width: 150,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_MODEL_TYPE },
+      },
+    },
+    {
+      field: 'formType',
+      title: '表单信息',
+      width: 150,
+      slots: { default: 'formInfo' },
+    },
+    {
+      field: 'deploymentTime',
+      title: '最后发布',
+      width: 260,
+      slots: { default: 'deploymentTime' },
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}