.

android/app/src/main/assets/capacitor.config.json

@@ -20,5 +20,6 @@
         "allowMixedContent": true,
         "captureInput": true,
         "webContentsDebuggingEnabled": true
-    }
+    },
+    "ios": {}
 }

capacitor.config.json

@@ -20,5 +20,6 @@
         "allowMixedContent": true,
         "captureInput": true,
         "webContentsDebuggingEnabled": true
-    }
+    },
+    "ios": {}
 }

ios/App/App/capacitor.config.json

@@ -20,5 +20,6 @@
         "allowMixedContent": true,
         "captureInput": true,
         "webContentsDebuggingEnabled": true
-    }
+    },
+    "ios": {}
 }

src/views/approval.vue

@@ -85,10 +85,22 @@
             cancel-text="取消"
             :closeable="false"
         />
+
+        <van-action-sheet v-model="showAttachDialog" title="附件" cancel-text="取消">
+            <div>
+                <div class="attach-item" v-for="(item, i) in (process.approval || {}).attach || []" :key="i">
+                    <div class="name">{{ item.name }}</div>
+                    <div class="btn-open" @click="openFile(item)">打开</div>
+                </div>
+            </div>
+        </van-action-sheet>
     </div>
 </template>
 <script>
 import axios from 'axios';
+import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';
+const { Filesystem } = Plugins;
+
 export default {
     data() {
         return {
@@ -107,7 +119,8 @@ export default {
             pass: null,
             nextApprovers: null,
             approvers: [],
-            showActionSheet: false
+            showActionSheet: false,
+            showAttachDialog: false
         };
     },
     created() {
@@ -141,10 +154,49 @@ export default {
             return (this.statusOptions.find(i => i.value === cellValue) || {}).label;
         },
         openAttach() {
+            this.showAttachDialog = true;
+        },
+        openFile(item) {
+            console.log(item);
+            this.$toast.loading();
             axios
-                .get('https://zhumj.oss-cn-hangzhou.aliyuncs.com/image/user.jpg', { responseType: 'blob' })
+                .get(item.url, {
+                    responseType: 'blob'
+                })
                 .then(res => {
+                    this.$toast.clear();
                     console.log(res);
+                    var reader = new FileReader();
+                    reader.readAsDataURL(res.data);
+                    reader.onloadend = function() {
+                        let mime = '';
+                        var base64data = reader.result;
+                        let execRes = /^data:(.+);/.exec(base64data);
+                        if (execRes) {
+                            mime = execRes[1];
+                        }
+                        console.log(mime);
+                        Filesystem.writeFile({
+                            path: item.name,
+                            data: reader.result,
+                            directory: FilesystemDirectory.Documents,
+                            recursive: true
+                        }).then(res => {
+                            console.log(res);
+                            cordova.plugins.fileOpener2.open(res.uri, mime, {
+                                error(err) {
+                                    console.log(err);
+                                },
+                                success(res) {
+                                    console.log(res);
+                                }
+                            });
+                        });
+                    };
+                })
+                .catch(e => {
+                    this.$toast.clear();
+                    this.$toast('打开失败，请稍后再试');
                 });
         },
         getTitle(row) {
@@ -447,4 +499,33 @@ export default {
         margin-left: 16px;
     }
 }
+.attach-item {
+    height: 44px;
+    .flex();
+    position: relative;
+    &::after {
+        .setBottomLine();
+        left: 16px;
+        right: 16px;
+    }
+    .name {
+        flex-grow: 1;
+        margin-left: 16px;
+        font-size: 15px;
+        .ellipsis(1);
+    }
+    .btn-open {
+        width: 50px;
+        height: 28px;
+        min-width: 50px;
+        margin-left: 10px;
+        color: @prim;
+        border: 1px solid @prim;
+        font-size: 12px;
+        border-radius: 2px;
+        .flex();
+        justify-content: center;
+        margin-right: 16px;
+    }
+}
 </style>