Demo：导入存在多个画布的xmind文件支持选择指定的画布进行导入

web/src/lang/en_us.js

@@ -152,7 +152,8 @@ export default {
     notSelectTip: 'Please select the file to import',
     fileContentError: 'The file content is incorrect',
     importSuccess: 'Import success',
-    fileParsingFailed: 'File parsing failed'
+    fileParsingFailed: 'File parsing failed',
+    xmindCanvasSelectDialogTitle: 'Select the canvas to import'
   },
   navigatorToolbar: {
     openMiniMap: 'Open mini map',

web/src/lang/zh_cn.js

@@ -150,7 +150,8 @@ export default {
     notSelectTip: '请选择要导入的文件',
     fileContentError: '文件内容有误',
     importSuccess: '导入成功',
-    fileParsingFailed: '文件解析失败'
+    fileParsingFailed: '文件解析失败',
+    xmindCanvasSelectDialogTitle: '选择要导入的画布'
   },
   navigatorToolbar: {
     openMiniMap: '开启小地图',

web/src/pages/Edit/components/Import.vue

@@ -1,36 +1,56 @@
 <template>
-  <el-dialog
+  <div>
-    class="nodeImportDialog"
+    <el-dialog
-    :title="$t('import.title')"
+      class="nodeImportDialog"
-    :visible.sync="dialogVisible"
+      :title="$t('import.title')"
-    width="300px"
+      :visible.sync="dialogVisible"
-  >
+      width="300px"
-    <el-upload
-      ref="upload"
-      action="x"
-      accept=".smm,.json,.xmind,.xlsx,.md"
-      :file-list="fileList"
-      :auto-upload="false"
-      :multiple="false"
-      :on-change="onChange"
-      :on-remove="onRemove"
-      :limit="1"
-      :on-exceed="onExceed"
     >
-      <el-button slot="trigger" size="small" type="primary">{{
+      <el-upload
-        $t('import.selectFile')
+        ref="upload"
-      }}</el-button>
+        action="x"
-      <div slot="tip" class="el-upload__tip">
+        accept=".smm,.json,.xmind,.xlsx,.md"
-        {{ $t('import.supportFile') }}
+        :file-list="fileList"
-      </div>
+        :auto-upload="false"
-    </el-upload>
+        :multiple="false"
-    <span slot="footer" class="dialog-footer">
+        :on-change="onChange"
-      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
+        :on-remove="onRemove"
-      <el-button type="primary" @click="confirm">{{
+        :limit="1"
-        $t('dialog.confirm')
+        :on-exceed="onExceed"
-      }}</el-button>
+      >
-    </span>
+        <el-button slot="trigger" size="small" type="primary">{{
-  </el-dialog>
+          $t('import.selectFile')
+        }}</el-button>
+        <div slot="tip" class="el-upload__tip">
+          {{ $t('import.supportFile') }}
+        </div>
+      </el-upload>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
+        <el-button type="primary" @click="confirm">{{
+          $t('dialog.confirm')
+        }}</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      class="xmindCanvasSelectDialog"
+      :title="$t('import.xmindCanvasSelectDialogTitle')"
+      :visible.sync="xmindCanvasSelectDialogVisible"
+      width="300px"
+      :show-close="false"
+    >
+      <el-radio-group v-model="selectCanvas" class="canvasList">
+        <el-radio v-for="(item, index) in canvasList" :label="index">{{
+          item.title
+        }}</el-radio>
+      </el-radio-group>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmSelect">{{
+          $t('dialog.confirm')
+        }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -50,7 +70,11 @@ export default {
   data() {
     return {
       dialogVisible: false,
-      fileList: []
+      fileList: [],
+      selectPromiseResolve: null,
+      xmindCanvasSelectDialogVisible: false,
+      selectCanvas: '',
+      canvasList: []
     }
   },
   watch: {
@@ -106,11 +130,7 @@ export default {
       }
     },
 
-    /**
+    // 文件选择
-     * @Author: 王林
-     * @Date: 2021-08-03 22:48:42
-     * @Desc: 文件选择
-     */
     onChange(file) {
       let reg = /\.(smm|xmind|json|xlsx|md)$/
       if (!reg.test(file.name)) {
@@ -126,29 +146,17 @@ export default {
       this.fileList = fileList
     },
 
-    /**
+    // 数量超出限制
-     * @Author: 王林
-     * @Date: 2021-08-03 22:48:47
-     * @Desc: 数量超出限制
-     */
     onExceed() {
       this.$message.error(this.$t('import.maxFileNum'))
     },
 
-    /**
+    // 取消
-     * @Author: 王林
-     * @Date: 2021-06-22 22:08:11
-     * @Desc: 取消
-     */
     cancel() {
       this.dialogVisible = false
     },
 
-    /**
+    // 确定
-     * @Author: 王林
-     * @Date: 2021-06-06 22:28:20
-     * @Desc:  确定
-     */
     confirm() {
       if (this.fileList.length <= 0) {
         return this.$message.error(this.$t('import.notSelectTip'))
@@ -168,11 +176,7 @@ export default {
       this.setActiveSidebar(null)
     },
 
-    /**
+    // 处理.smm文件
-     * @Author: 王林25
-     * @Date: 2022-10-24 14:19:33
-     * @Desc: 处理.smm文件
-     */
     handleSmm(file) {
       let fileReader = new FileReader()
       fileReader.readAsText(file.raw)
@@ -191,14 +195,15 @@ export default {
       }
     },
 
-    /**
+    // 处理.xmind文件
-     * @Author: 王林25
-     * @Date: 2022-10-24 14:19:41
-     * @Desc: 处理.xmind文件
-     */
     async handleXmind(file) {
       try {
-        let data = await xmind.parseXmindFile(file.raw)
+        let data = await xmind.parseXmindFile(file.raw, content => {
+          this.showSelectXmindCanvasDialog(content)
+          return new Promise(resolve => {
+            this.selectPromiseResolve = resolve
+          })
+        })
         this.$bus.$emit('setData', data)
         this.$message.success(this.$t('import.importSuccess'))
       } catch (error) {
@@ -207,11 +212,22 @@ export default {
       }
     },
 
-    /**
+    // 显示xmind文件的多个画布选择弹窗
-     * @Author: 王林25
+    showSelectXmindCanvasDialog(content) {
-     * @Date: 2022-10-24 14:19:51
+      this.canvasList = content
-     * @Desc: 处理.xlsx文件
+      this.selectCanvas = 0
-     */
+      this.xmindCanvasSelectDialogVisible = true
+    },
+
+    // 确认导入指定的画布
+    confirmSelect() {
+      this.selectPromiseResolve(this.canvasList[this.selectCanvas])
+      this.xmindCanvasSelectDialogVisible = false
+      this.canvasList = []
+      this.selectCanvas = 0
+    },
+
+    // 处理.xlsx文件
     async handleExcel(file) {
       try {
         const wb = read(await fileToBuffer(file.raw))
@@ -306,4 +322,17 @@ export default {
 <style lang="less" scoped>
 .nodeImportDialog {
 }
+
+.canvasList {
+  display: flex;
+  flex-direction: column;
+
+  /deep/ .el-radio {
+    margin-bottom: 12px;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
 </style>