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

Merge pull request !306 from Jason/dev
2025-12-30 02:22:25 +00:00 · 2025-12-20 07:10:35 +00:00
parent d4b99f321d 01dd8171e9
commit 1fc39e3fbb
13 changed files with 274 additions and 51 deletions
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -16,7 +16,7 @@ import {
 } from 'element-plus';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-// import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';

 import { createListenerObject, updateElementExtensions } from '../../utils';
 import ListenerFieldModal from './ListenerFieldModal.vue';
@@ -268,15 +268,15 @@ const [FieldModal, fieldModalApi] = useVbenModal({
 });

 // 配置选择监听器 Modal
-// const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
-//   });
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });

 // 打开监听器弹窗
 const openProcessListenerDialog = async () => {
-  // processListenerSelectModalApi.setData({ type: 'execution' }).open();
+  processListenerSelectModalApi.setData({ type: 'execution' }).open();
 };
 const selectProcessListener = (listener: any) => {
  const instances = bpmnInstances();
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -16,7 +16,7 @@ import {
 } from 'element-plus';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-// import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';

 import { createListenerObject, updateElementExtensions } from '../../utils';
 import ListenerFieldModal from './ListenerFieldModal.vue';
@@ -220,7 +220,7 @@ const removeListenerField = (_: any, index: number) => {
 };

 const openProcessListenerDialog = async () => {
-  // processListenerSelectModalApi.setData({ type: 'task' }).open();
+  processListenerSelectModalApi.setData({ type: 'task' }).open();
 };
 const selectProcessListener = (listener: any) => {
  const instances = bpmnInstances();
@@ -253,11 +253,11 @@ const [FieldModal, fieldModalApi] = useVbenModal({
  connectedComponent: ListenerFieldModal,
 });

-// const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
-//   });
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });

 const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
  gridOptions: {
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
 import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
 import type { SystemPostApi } from '#/api/system/post';
 import type { SystemRoleApi } from '#/api/system/role';
@@ -16,6 +17,7 @@ import {
  watch,
 } from 'vue';

+import { useVbenModal } from '@vben/common-ui';
 import { SelectOutlined } from '@vben/icons';
 import { handleTree } from '@vben/utils';

@@ -41,7 +43,7 @@ import {
  MULTI_LEVEL_DEPT,
 } from '#/views/bpm/components/simple-process-design/consts';
 import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
-// import ProcessExpressionSelectModal from '#/views/bpm/processExpression/components/process-expression-select-modal.vue';
+import { ProcessExpressionSelectModal } from '#/views/bpm/processExpression/components';

 defineOptions({ name: 'UserTask' });
 const props = defineProps({
@@ -290,21 +292,21 @@ const updateSkipExpression = () => {
 };

 // 打开监听器弹窗
-// const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
-//   useVbenModal({
-//     connectedComponent: ProcessExpressionSelectModal,
-//     destroyOnClose: true,
-//   });
+const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessExpressionSelectModal,
+    destroyOnClose: true,
+  });
 const openProcessExpressionDialog = async () => {
-  // ProcessExpressionSelectModalApi.open();
+  ProcessExpressionSelectModalApi.open();
+};
+const selectProcessExpression = (
+  expression: BpmProcessExpressionApi.ProcessExpression,
+) => {
+  // @ts-ignore
+  userTaskForm.value.candidateParam = [expression.expression];
+  updateElementTask();
 };
-// const selectProcessExpression = (
-//   expression: BpmProcessExpressionApi.ProcessExpression,
-// ) => {
-//   // @ts-ignore
-//   userTaskForm.value.candidateParam = [expression.expression];
-//   updateElementTask();
-// };

 const handleFormUserChange = (e: any) => {
  if (e === 'PROCESS_START_USER_ID') {
@@ -551,9 +553,8 @@ onBeforeUnmount(() => {
          选择表达式
        </ElButton>
      </div>
-      <!-- 选择弹窗
+      <!-- 选择弹窗 -->
      <ProcessExpressionSelectModalComp @select="selectProcessExpression" />
-      -->
    </ElFormItem>

    <ElFormItem label="跳过表达式" prop="skipExpression">
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
@@ -211,7 +211,7 @@ watch(
        <ElInput
          v-model="cronStr"
          readonly
-          class="w-[400px] font-bold"
+          class="!w-[400px] font-bold"
          key="cronStr"
        />
      </div>
@@ -273,7 +273,7 @@ watch(
                  :min="f.min"
                  :max="f.max"
                  size="small"
-                  class="w-[60px]"
+                  class="!w-[100px]"
                  :key="`range0-${f.key}`"
                />
                到
@@ -282,7 +282,7 @@ watch(
                  :min="f.min"
                  :max="f.max"
                  size="small"
-                  class="w-[60px]"
+                  class="!w-[100px]"
                  :key="`range1-${f.key}`"
                />
                之间每{{ f.label }}
@@ -294,7 +294,7 @@ watch(
                  :min="f.min"
                  :max="f.max"
                  size="small"
-                  class="w-[60px]"
+                  class="!w-[100px]"
                  :key="`step0-${f.key}`"
                />
                开始每
@@ -303,7 +303,7 @@ watch(
                  :min="1"
                  :max="f.max"
                  size="small"
-                  class="w-[60px]"
+                  class="!w-[100px]"
                  :key="`step1-${f.key}`"
                />
                {{ f.label }}
@@ -342,7 +342,7 @@ watch(
        循环次数：<ElInputNumber
          v-model="repeat"
          :min="1"
-          class="w-[100px]"
+          class="!w-[100px]"
          key="repeat"
        />
      </div>
@@ -351,7 +351,7 @@ watch(
          v-model="isoDate"
          type="datetime"
          placeholder="选择开始时间"
-          class="w-[200px]"
+          class="!w-[200px]"
          key="isoDate"
        />
      </div>
@@ -360,7 +360,7 @@ watch(
          v-model="isoDuration"
          readonly
          placeholder="如P3DT30M30S"
-          class="w-[200px]"
+          class="!w-[200px]"
          key="isoDuration"
        />
      </div>
@@ -380,7 +380,7 @@ watch(
          <ElInput
            v-model="durationCustom[unit.key]"
            size="small"
-            class="ml-2 w-[60px]"
+            class="ml-2 !w-[60px]"
            placeholder="自定义"
            @change="setDuration(unit.key, durationCustom[unit.key])"
          />
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
@@ -69,7 +69,7 @@ watch(
 <template>
  <div>
    <div class="mb-2.5">
-      当前选择：<ElInput v-model="isoString" readonly class="w-[300px]" />
+      当前选择：<ElInput v-model="isoString" readonly class="!w-[300px]" />
    </div>
    <div v-for="unit in units" :key="unit.key" class="mb-2">
      <span>{{ unit.label }}：</span>
@@ -86,7 +86,7 @@ watch(
      <ElInput
        v-model="custom[unit.key]"
        size="small"
-        class="ml-2 w-[60px]"
+        class="ml-2 !w-[60px]"
        placeholder="自定义"
        @change="setUnit(unit.key, custom[unit.key])"
      />
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { Dayjs } from 'dayjs';
-
 import type { Ref } from 'vue';

 import { computed, nextTick, onMounted, ref, toRaw, watch } from 'vue';
@@ -30,7 +28,7 @@ const bpmnInstances = () => (window as any).bpmnInstances;
 const type: Ref<string> = ref('time');
 const condition: Ref<string> = ref('');
 const valid: Ref<boolean> = ref(false);
-const dateValue = ref<Dayjs>();
+const dateValue = ref();

 const placeholder = computed<string>(() => {
  if (type.value === 'time') return '请输入时间';
@@ -108,7 +106,6 @@ function validate(): boolean {
 // 选择时间 Modal
 const [DateModal, dateModalApi] = useVbenModal({
  title: '选择时间',
-  class: 'w-[400px]',
  onConfirm: onDateConfirm,
 });

@@ -126,7 +123,6 @@ function onDateConfirm(): void {
 // 持续时长 Modal
 const [DurationModal, durationModalApi] = useVbenModal({
  title: '时间配置',
-  class: 'w-[600px]',
  onConfirm: onDurationConfirm,
 });

@@ -141,7 +137,6 @@ function onDurationConfirm(): void {
 // 循环配置 Modal
 const [CycleModal, cycleModalApi] = useVbenModal({
  title: '时间配置',
-  class: 'w-[800px]',
  onConfirm: onCycleConfirm,
 });

@@ -338,7 +333,7 @@ watch(
        v-model="dateValue"
        type="datetime"
        placeholder="选择日期时间"
-        class="w-full"
+        class="!w-full"
        @change="onDateChange"
      />
    </DateModal>
@@ -349,7 +344,7 @@ watch(
    </DurationModal>

    <!-- 循环配置器 -->
-    <CycleModal>
+    <CycleModal class="w-2/3">
      <CycleConfig :value="condition" @change="onCycleChange" />
    </CycleModal>

--- a/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
@@ -289,7 +289,7 @@ defineExpose({ validate });
      </ElFormItem>
      <ElFormItem label="流程图标">
        <ImageUpload
-          v-model:value="modelData.icon"
+          v-model="modelData.icon"
          :show-description="false"
          width="120px"
          height="120px"
--- a/apps/web-ele/src/views/bpm/processExpression/components/index.ts
+++ b/apps/web-ele/src/views/bpm/processExpression/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessExpressionSelectModal } from './select-modal.vue';
--- a/apps/web-ele/src/views/bpm/processExpression/components/select-modal.vue
+++ b/apps/web-ele/src/views/bpm/processExpression/components/select-modal.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessExpressionPage } from '#/api/bpm/processExpression';
+
+defineOptions({ name: 'ProcessExpressionSelectModal' });
+
+const emit = defineEmits<{
+  select: [expression: BpmProcessExpressionApi.ProcessExpression];
+}>();
+
+// 查询参数
+const queryParams = ref({
+  status: CommonStatusEnum.ENABLE,
+});
+
+// 配置 VxeGrid
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'name', title: '名字', minWidth: 160 },
+      { field: 'expression', title: '表达式', minWidth: 260 },
+      {
+        field: 'action',
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+      },
+    ],
+    showOverflow: true,
+    minHeight: 300,
+    proxyConfig: {
+      ajax: {
+        // 查询表达式列表
+        query: async ({ page }) => {
+          return await getProcessExpressionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            status: queryParams.value.status,
+          });
+        },
+      },
+    } as VxeGridPropTypes.ProxyConfig,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Modal
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  destroyOnClose: true,
+});
+
+// 选择表达式
+function handleSelect(row: BpmProcessExpressionApi.ProcessExpression) {
+  emit('select', row);
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal class="w-4/5" title="请选择表达式">
+    <Grid>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '选择',
+              type: 'primary',
+              link: true,
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
--- a/apps/web-ele/src/views/bpm/processListener/components/data.ts
+++ b/apps/web-ele/src/views/bpm/processListener/components/data.ts
@@ -0,0 +1,36 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 选择监听器弹窗的列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { field: 'name', title: '名字', minWidth: 120 },
+    {
+      field: 'type',
+      title: '类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
+      },
+    },
+    { field: 'event', title: '事件', minWidth: 200 },
+    {
+      field: 'valueType',
+      title: '值类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE },
+      },
+    },
+    { field: 'value', title: '值', minWidth: 150 },
+    {
+      title: '操作',
+      width: 100,
+      slots: { default: 'action' },
+      fixed: 'right',
+    },
+  ];
+}
--- a/apps/web-ele/src/views/bpm/processListener/components/index.ts
+++ b/apps/web-ele/src/views/bpm/processListener/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessListenerSelectModal } from './select-modal.vue';
--- a/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue
+++ b/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessListenerPage } from '#/api/bpm/processListener';
+
+import { useGridColumns } from './data';
+
+defineOptions({ name: 'ProcessListenerSelectModal' });
+
+const emit = defineEmits<{
+  select: [listener: BpmProcessListenerApi.ProcessListener];
+}>();
+
+// 查询参数
+const queryParams = ref({
+  type: '',
+  status: CommonStatusEnum.ENABLE,
+});
+
+// 配置 VxeGrid
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    showOverflow: true,
+    minHeight: 300,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProcessListenerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: queryParams.value.type,
+            status: queryParams.value.status,
+          });
+        },
+      },
+    } as VxeGridPropTypes.ProxyConfig,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Modal
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      queryParams.value.type = '';
+      return;
+    }
+    const data = modalApi.getData<{ type: string }>();
+    if (data?.type) {
+      queryParams.value.type = data.type;
+    }
+  },
+  destroyOnClose: true,
+});
+
+// 选择监听器
+function handleSelect(row: BpmProcessListenerApi.ProcessListener) {
+  emit('select', row);
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal class="w-4/5" title="请选择监听器">
+    <Grid>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '选择',
+              type: 'primary',
+              link: true,
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
--- a/apps/web-ele/tsconfig.json
+++ b/apps/web-ele/tsconfig.json
@@ -5,7 +5,8 @@
    "baseUrl": ".",
    "paths": {
      "#/*": ["./src/*"]
-    }
+    },
+    "allowJs": true
  },
  "references": [{ "path": "./tsconfig.node.json" }],
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
				`@@ -0,0 +1 @@`
				`export { default as ProcessExpressionSelectModal } from './select-modal.vue';`
				`@@ -0,0 +1 @@`
				`export { default as ProcessListenerSelectModal } from './select-modal.vue';`