update 调整流程定义图片预览

src/api/workflow/processDefinition/index.ts

@@ -30,14 +30,10 @@ export const getProcessDefinitionListByKey = (key: string) => {
  * 通过流程定义id获取流程图
  */
 export const processDefinitionImage = (processDefinitionId: string) => {
-  return (
-    baseUrl +
-    `/workflow/processDefinition/processDefinitionImage/${processDefinitionId}` +
-    '?Authorization=Bearer ' +
-    getToken() +
-    '&t' +
-    Math.random()
-  );
+  return request({
+    url: `/workflow/processDefinition/processDefinitionImage/${processDefinitionId}` + '?t' + Math.random(),
+    method: 'get'
+  });
 };
 
 /**

src/views/workflow/processDefinition/components/processPreview.vue

@@ -1,36 +1,39 @@
 <template>
-  <el-dialog title="预览" v-model="visible" width="70%" append-to-body>
-    <div v-if="type==='png'" style="align:center">
-      <el-image :src="url[0]" v-if="type==='png'"> </el-image>
+  <el-dialog title="预览" v-model="data.visible" width="70%" append-to-body>
+    <div v-if="data.type === 'png'" style="align:center">
+      <el-image :src="data.url[0]" v-if="data.type === 'png'">
+        <div>流程图加载中 <i class="el-icon-loading"></i></div>
+      </el-image>
     </div>
-    <div class="xml-data" v-if="type==='xml'">
-      <div v-for="(xml,index) in url" :key="index">
-        <pre class="font">{{xml}}</pre>
+    <div class="xml-data" v-if="data.type === 'xml'">
+      <div v-for="(xml, index) in data.url" :key="index">
+        <pre class="font">{{ xml }}</pre>
       </div>
     </div>
+    <template #footer>
+      <span class="dialog-footer" v-if="data.type === 'xml'"> </span>
+    </template>
   </el-dialog>
 </template>
 
-<script>
-export default {
-  props: {
-    url: {
-      type: Array,
-      default: () => []
-    },
-    type: String
-  },
-  data() {
-    return {
-      visible: false
-    };
-  },
-  methods: {
-    init() {
-      this.visible = true;
-    }
-  }
-};
+<script setup>
+const data = reactive({
+    visible: false,
+    url: [],
+    type: ''
+})
+//打开
+function openDialog (url, type) {
+    data.visible = true
+    data.url = url
+    data.type = type
+}
+/**
+ * 对外暴露子组建方法
+ */
+defineExpose({
+    openDialog
+})
 </script>
 <style>
 .xml-data {

src/views/workflow/processDefinition/index.vue

@@ -214,7 +214,6 @@ const total = ref(0);
 const processDefinitionList = ref<Array<any>>([]);
 const processDefinitionHistoryList = ref<Array<any>>([]);
 const url = ref<Array<string>>([]);
-const type = ref<string>('');
 const categoryOptions = ref<CategoryOption[]>([]);
 const categoryName = ref('');
 const categoryTreeRef = ref(ElTree);
@@ -317,23 +316,26 @@ const getProcessDefinitionHitoryList = (id:string,key:string) => {
 
 //预览图片
 const clickPreviewImg = (id: string) => {
-  if (previewRef.value) {
-    url.value = [];
-    type.value = 'png';
-    url.value.push(processDefinitionImage(id));
-    previewRef.value.init();
-  }
+    loading.value = true;
+    processDefinitionImage(id).then((resp) => {
+        if (previewRef.value) {
+            url.value = [];
+            url.value.push('data:image/png;base64,' + resp.data);
+            loading.value = false;
+            previewRef.value.openDialog(url, 'png');
+        }
+    })
+
 };
 //预览xml
 const clickPreviewXML = (id: string) => {
   loading.value = true;
-  type.value = 'xml';
   processDefinitionXml(id).then((response) => {
     if (previewRef.value) {
-      url.value = [];
-      url.value = response.data.xml;
-      loading.value = false;
-      previewRef.value.init();
+        url.value = [];
+        url.value = response.data.xml;
+        loading.value = false;
+        previewRef.value.openDialog(url, 'xml');
     }
   });
 };