CRM-合同：新增合同预览审批流程和提交审核

src/views/crm/contract/components/BPMLModel.vue

@@ -0,0 +1,31 @@
+<template>
+  <!-- 弹窗：流程模型图的预览 -->
+  <Dialog v-model="bpmnDetailVisible" :append-to-body="true" title="流程图" width="800">
+    <MyProcessViewer
+      key="designer"
+      v-model="bpmnXML"
+      :prefix="bpmnControlForm.prefix"
+      :value="bpmnXML as any"
+      v-bind="bpmnControlForm"
+    />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import * as ModelApi from '@/api/bpm/model'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
+
+defineOptions({ name: 'BPMLModel' })
+/** 流程图的详情按钮操作 */
+const bpmnDetailVisible = ref(false)
+const bpmnXML = ref(null)
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
+const handleBpmnDetail = async (key: string) => {
+  const data = await ModelApi.getModelByKey(key)
+  bpmnXML.value = data.bpmnXml || ''
+  bpmnDetailVisible.value = true
+}
+defineExpose({ handleBpmnDetail })
+</script>