feat:流程-流程实例的版本问题

1.流程变更后，新旧流程按版本执行，按各种版本的流程定义和流程配置继续流转
2.可以切换流程实例的版本

src/components/UpdateProcessVersion/index.ts

@@ -0,0 +1,3 @@
+import { withInstall } from '/@/utils';
+import updateProcessVersionModal from './src/UpdateProcessVersionModal.vue';
+export const UpdateProcessVersionModal = withInstall(updateProcessVersionModal); //流程版本变更

src/components/UpdateProcessVersion/src/UpdateProcessVersionModal.vue

@@ -0,0 +1,185 @@
+<template>
+    <BasicModal @register="registerUpdateProcessVersionModal" v-bind="$attrs" wrapClassName="workflow-modal" @ok="handleSubmit" @cancel="cancel">
+      <a-table
+      :pagination="false"
+      :dataSource="data.dataSource"
+      :row-selection="rowSelection"
+      :columns="configColumns">
+          <template #bodyCell="{ column, record }">
+              <template v-if="column.dataIndex === 'activityFlag'"
+                  >{{ record.activityFlag == 1 ? t('当前版本') : '' }}
+              </template>
+              <template v-if="column.dataIndex === 'operation'">
+                  <div class="flex">
+                      <a-button
+                          size="small"
+                          type="primary"
+                          class="mr-2"
+                          @click="preview(record.xmlContent)"
+                          >{{ t('预览') }}
+                      </a-button>
+                  </div>
+              </template>
+          </template>
+      </a-table>
+      <Preview v-if="data.previewVisible" :xml="data.xml" @close="() => {data.previewVisible = false}" />
+
+    </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
+import {
+    updateProcessVersionApi,
+    getHistory,
+  } from '/@/api/workflow/design';
+import { ChangeResultModel, HistoryModel } from '/@/api/workflow/model';
+import { ref, reactive, onMounted, } from 'vue';
+import Preview from '/@/views/workflow/design/Preview.vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+
+const props = withDefaults(
+    defineProps<{
+        processDefinitionKey: string,
+        processIds: Array<string>,
+        schemaId: string,
+    }>(),
+    {
+        processDefinitionKey: '',
+        processIds: () => [],
+        schemaId: '',
+    },
+);
+
+onMounted(() => {
+  getHistoryList();
+});
+
+const configColumns = [
+    {
+      title: t('序号'),
+      align: 'center',
+      customRender: ({ index }) => `${index + 1}`, // 显示每一行的序号
+      width: 80,
+    },
+    {
+      title: t('状态'),
+      dataIndex: 'activityFlag',
+      sorter: {
+        multiple: 4,
+      },
+    },
+    {
+      title: t('版本'),
+      dataIndex: 'version',
+    },
+    {
+      title: t('创建人'),
+      dataIndex: 'createUserName',
+    },
+    {
+      title: t('备注'),
+      dataIndex: 'remark',
+      width: 180,
+    },
+    {
+      title: t('创建时间'),
+      dataIndex: 'createDate',
+    },
+    {
+      title: t('操作'),
+      dataIndex: 'operation',
+      width: 120,
+      align: 'center',
+    },
+  ];
+  const data: {
+    visible: boolean;
+    previewVisible: boolean;
+    xml: string;
+    dataSource: Array<HistoryModel>;
+    reusltVisible: boolean;
+    resultDataSource: ChangeResultModel[];
+  } = reactive({
+    visible: false,
+    previewVisible: false,
+    xml: '',
+    dataSource: [],
+    reusltVisible: false,
+    resultDataSource: [],
+  });
+
+
+const emits = defineEmits(['success', 'cancel']);
+const [registerUpdateProcessVersionModal, { setModalProps, closeModal }] = useModalInner(async () => {
+    setModalProps({
+      title: '流程版本变更',
+      confirmLoading: false,
+      draggable: false,
+      showOkBtn: false,
+      showCancelBtn: false,
+      destroyOnClose: true,
+      width: 800,
+      fixedHeight: true,
+    });
+});
+
+const getHistoryList = async () => {
+  try {
+      let res = await getHistory(props.schemaId);
+      data.dataSource = res;
+    } 
+  catch (error) {}
+}
+function cancel() {
+  emits('cancel')
+}
+const selectedRowSignleKey = ref('');
+
+// 右边保留流程图 单选配置
+const rowSelection = {
+  type: 'radio', // 设置为单选
+  getRecordKey: record => record.definitionId,
+  onChange: (selectedRowKeysValue, selectedRows) => {
+    selectedRowSignleKey.value = selectedRowKeysValue; // 更新选中的行keys
+  },
+};
+
+const handleSubmit = async () => {
+    const values = {
+        processDefinitionKey: props.processDefinitionKey,
+        definitionIdNew: selectedRowSignleKey.value[0],
+        processIds: props.processIds,
+    };
+    await updateProcessVersionApi(values);
+    closeModal();
+    emits('success');
+};
+
+function preview(xml: string) {
+    if (xml) {
+      data.xml = xml;
+      data.previewVisible = true;
+    }
+}
+
+</script>
+<style lang="less">
+.workflow-modal {
+  .ant-modal {
+    width: 60%!important;
+    max-width: 60%!important;
+    top: 0;
+    padding-bottom: 0;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh);
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+</style>