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

Merge pull request !306 from Jason/dev

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] =
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
+  useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
+    connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
+    destroyOnClose: true,
-//   });
+  });
 
 // 打开监听器弹窗
 const openProcessListenerDialog = async () => {
-  // processListenerSelectModalApi.setData({ type: 'execution' }).open();
+  processListenerSelectModalApi.setData({ type: 'execution' }).open();
 };
 const selectProcessListener = (listener: any) => {
   const instances = bpmnInstances();

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] =
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
+  useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
+    connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
+    destroyOnClose: true,
-//   });
+  });
 
 const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
   gridOptions: {

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] =
+const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
-//   useVbenModal({
+  useVbenModal({
-//     connectedComponent: ProcessExpressionSelectModal,
+    connectedComponent: ProcessExpressionSelectModal,
-//     destroyOnClose: true,
+    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">

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])"
           />

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])"
       />

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>
 

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"

apps/web-ele/src/views/bpm/processExpression/components/index.ts

@@ -0,0 +1 @@
+export { default as ProcessExpressionSelectModal } from './select-modal.vue';

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>

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',
+    },
+  ];
+}

apps/web-ele/src/views/bpm/processListener/components/index.ts

@@ -0,0 +1 @@
+export { default as ProcessListenerSelectModal } from './select-modal.vue';

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>

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"]