update 调整流程定义图片预览

src/api/workflow/processDefinition/index.ts

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

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

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