czh-20260702-流程列表支持修改标题与截止时间同步更新流程变量

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/semri/process/BusinessProcessListModal.vue

@@ -8,6 +8,33 @@
       </BasicTable>
     </div>
     <BpmPictureModal @register="registerBpmModal" />
+    <j-modal
+      title="修改流程信息"
+      :width="460"
+      :visible="editModalVisible"
+      :confirmLoading="editLoading"
+      wrapClassName="edit-process-modal"
+      @ok="handleEditConfirm"
+      @cancel="handleEditCancel"
+      cancelText="取消"
+    >
+      <div style="padding: 8px 16px 0;">
+        <a-form :model="editForm" :label-col="{ style: { width: '100px' } }" :wrapper-col="{ span: 24 }">
+          <a-form-item label="流程标题" style="margin-bottom: 14px;">
+            <a-input v-model:value="editForm.title" placeholder="请输入流程标题" allow-clear />
+          </a-form-item>
+          <a-form-item label="要求完成日期" style="margin-bottom: 0;">
+            <a-date-picker
+              v-model:value="editForm.requireFinishDate"
+              valueFormat="YYYY-MM-DD"
+              placeholder="请选择要求完成日期"
+              style="width: 100%"
+              :getPopupContainer="(node) => node?.parentNode"
+            />
+          </a-form-item>
+        </a-form>
+      </div>
+    </j-modal>
     <j-modal
       title="审批历史"
       :width="approvalHistoryModalWidth"
@@ -22,12 +49,12 @@
 </template>
 
 <script lang="ts" setup>
-  import { nextTick, ref } from 'vue';
+  import { nextTick, reactive, ref } from 'vue';
   import { BasicColumn, BasicTable, TableAction, useTable } from '/@/components/Table';
   import JModal from '/@/components/Modal/src/JModal/JModal.vue';
   import { useModal } from '/@/components/Modal';
   import { columns } from './QueryProcessList.data';
-  import { deleteSingleProcess, deletePendingTask, queryByBusinessId } from '/@/api/common/api';
+  import { deleteSingleProcess, deletePendingTask, updateTitleAndDeadline, queryByBusinessId } from '/@/api/common/api';
   import { useMessage } from '/@/hooks/web/useMessage';
   import TaskApprovalHistoryContent from '/@/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue';
 
@@ -51,6 +78,13 @@
   const approvalHistoryVisible = ref(false);
   const approvalHistoryFormData = ref<Recordable>({});
   const approvalHistoryRef = ref();
+  const editModalVisible = ref(false);
+  const editLoading = ref(false);
+  const currentEditRecord = ref<Recordable>({});
+  const editForm = reactive({
+    title: '',
+    requireFinishDate: undefined as string | undefined,
+  });
   const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
 
   const [registerTable, { setColumns, setTableData, reload, clearSelectedRowKeys }] = useTable({
@@ -76,12 +110,12 @@
     actionColumn: {
       title: '操作',
       dataIndex: 'action',
-      width: 240,
+      width: 320,
       fixed: 'right',
       slots: { customRender: 'action' },
     },
     scroll: {
-      x: tableScrollX,
+      x: tableScrollX + 80,
       y: tableBodyHeight,
     },
   });
@@ -110,6 +144,7 @@
     setColumns(defaultColumns);
     setTableData([]);
     handleApprovalHistoryCancel();
+    handleEditCancel();
     clearSelectedRowKeys();
   }
 
@@ -141,6 +176,53 @@
     approvalHistoryFormData.value = {};
   }
 
+  function handleEditProcess(record) {
+    currentEditRecord.value = record;
+    editForm.title = record?.title || '';
+    editForm.requireFinishDate = record?.requireFinishDate
+      ? record.requireFinishDate.length > 10
+        ? record.requireFinishDate.substring(0, 10)
+        : record.requireFinishDate
+      : undefined;
+    editModalVisible.value = true;
+  }
+
+  async function handleEditConfirm() {
+    if (!editForm.title?.trim()) {
+      createMessage.error('标题不能为空');
+      return;
+    }
+    if (!editForm.requireFinishDate) {
+      createMessage.error('要求完成日期不能为空');
+      return;
+    }
+    const taskId = currentEditRecord.value?.id;
+    if (!taskId) {
+      createMessage.error('任务数据异常');
+      return;
+    }
+    editLoading.value = true;
+    try {
+      const res = await updateTitleAndDeadline({ taskId, title: editForm.title, requireFinishDate: editForm.requireFinishDate });
+      if (res?.success) {
+        createMessage.success(res.message || '修改成功');
+        editModalVisible.value = false;
+        await reload();
+      } else {
+        createMessage.error(res?.message || '修改失败');
+      }
+    } catch (error) {
+      createMessage.error('修改失败');
+    } finally {
+      editLoading.value = false;
+    }
+  }
+
+  function handleEditCancel() {
+    editModalVisible.value = false;
+    editLoading.value = false;
+  }
+
   async function handleDeleteProcess(record) {
     const processInstId = record?.processInstId;
     const taskId = record?.id;
@@ -187,6 +269,10 @@
         label: '审批历史',
         onClick: handlePreviewApprovalHistory.bind(null, record),
       },
+      {
+        label: '修改信息',
+        onClick: handleEditProcess.bind(null, record),
+      },
       {
         label: '删除流程',
         popConfirm: {
@@ -255,3 +341,13 @@
     }
   }
 </style>
+
+<style lang="less">
+  .edit-process-modal {
+    .ant-modal-body {
+      height: auto !important;
+      min-height: 160px;
+      overflow: visible !important;
+    }
+  }
+</style>