树状结构支持数据导入优化

src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue

@@ -30,7 +30,7 @@
             />
             <Input
               :value="value"
-              @input="updateLabelOrValue('value', label, value, $event.target.value)"
+              @blur="updateLabelOrValue('value', label, value, $event.target.value)"
               class="options-value"
             />
             <Tooltip title="添加子级选项" placement="top">
@@ -48,10 +48,14 @@
         <Icon icon="ant-design:file-add-outlined" />
         添加父级选项
       </a>
-      <a @click="showModal">
+      <a @click="showModal('import')">
         <Icon icon="ant-design:import-outlined" />
         导入数据
       </a>
+      <!-- <a @click="showModal('export')">
+        <Icon icon="ant-design:export-outlined" />
+        导出数据
+      </a> -->
     </div>
     <div v-else-if="['Transfer'].includes(formConfig.currentItem!.component)">
       <div v-for="(item, index) of formConfig.currentItem!.componentProps![key]" :key="index">
@@ -99,7 +103,7 @@
     </div>
   </div>
   <Modal
-    title="树状结构数据导入"
+    :title="title"
     :open="visible"
     @ok="handleImportJson"
     @cancel="handleCancel"
@@ -109,21 +113,36 @@
     style="top: 20px"
     :width="850"
   >
-    <p class="hint-box">导入格式如下:</p>
+    <p class="hint-box">{{ tip }}</p>
     <div class="v-json-box">
       <CodeEditor v-model:value="json" ref="myEditor" :mode="MODE.JSON" />
     </div>
     <template #footer>
-      <a-button @click="handleCancel">取消</a-button>
-      <Upload
-        class="upload-button"
-        :beforeUpload="beforeUpload"
-        :showUploadList="false"
-        accept="application/json"
-      >
-        <a-button type="primary">导入json文件</a-button>
-      </Upload>
-      <a-button type="primary" @click="handleImportJson">确定</a-button>
+      <div v-if="type == 'import'">
+        <a-button @click="handleCancel">取消</a-button>
+        <Upload
+          class="upload-button"
+          :beforeUpload="beforeUpload"
+          :showUploadList="false"
+          accept="application/json"
+        >
+          <a-button type="primary">导入json文件</a-button>
+        </Upload>
+        <a-button type="primary" @click="handleImportJson">确定</a-button>
+      </div>
+      <div v-if="type == 'export'">
+        <a-button @click="handleCancel">取消</a-button>
+        <a-button
+          type="primary"
+          class="copy-btn"
+          data-clipboard-action="copy"
+          :data-clipboard-text="json"
+          @click="handleCopyJson"
+        >
+          复制数据
+        </a-button>
+        <a-button @click="handleExportJson" type="primary">导出代码</a-button>
+      </div>
     </template>
   </Modal>
 </template>
@@ -135,6 +154,7 @@
   import { remove, formItemsForEach, generateKey } from '../../../utils';
   import { CodeEditor, MODE } from '@/components/CodeEditor';
   import { Upload, Modal, Input, Tooltip } from 'ant-design-vue';
+  import { copyText } from '@/utils/copyTextToClipboard';
   import { options_json, treeData_json } from '../../VFormDesign/config/formItemPropsScript';
   import { v4 as uuidv4 } from 'uuid';
   import { cloneDeep } from 'lodash-es';
@@ -152,8 +172,11 @@
 
       // 导入窗口
       const state = reactive({
+        title: '',
         visible: false,
-        json: ``,
+        json: {} as any,
+        type: '',
+        tip: '',
       });
       // 树的值
       const treeDataAndOptions = ref<TreeItem[]>([]);
@@ -164,12 +187,10 @@
           if (formConfig.value.currentItem?.component == 'TreeSelect') {
             // 树形选择
             treeDataAndOptions.value = formConfig.value.currentItem?.componentProps?.treeData;
-            state.json = treeData_json;
             key = 'treeData';
           } else if (formConfig.value.currentItem?.component == 'Cascader') {
             // 级联选择
             treeDataAndOptions.value = formConfig.value.currentItem?.componentProps?.options;
-            state.json = options_json;
             key = 'options';
           } else if (formConfig.value.currentItem?.component == 'Transfer') {
             // 穿梭框
@@ -189,7 +210,7 @@
       };
       // 添加树的父节点、子节点
       const addTreeNode = (value) => {
-        let length = getLength(1, treeDataAndOptions.value);
+        let length = getLength(1, getTree().getTreeData());
         getTree().insertNodeByKey({
           parentKey: value,
           node: {
@@ -247,8 +268,8 @@
       // 刷新树的值
       const refresh = () => {
         getTree().expandAll(true);
-        formConfig.value.currentItem.componentProps[key] = treeDataAndOptions.value =
-          getTree().getTreeData();
+        treeDataAndOptions.value = getTree().getTreeData();
+        formConfig.value.currentItem.componentProps[key] = getTree().getTreeData();
       };
 
       // 树的导入窗口关闭
@@ -256,8 +277,27 @@
         state.visible = false;
       };
       // 树的导入窗口开启
-      const showModal = () => {
+      const showModal = (type) => {
         state.visible = true;
+        state.type = type;
+        if (type == 'import') {
+          state.title = '树状结构数据导入';
+          state.tip = '导入格式如下:';
+          if (key == 'treeData') {
+            state.json = treeData_json;
+          } else {
+            state.json = options_json;
+          }
+        } else if (type == 'export') {
+          state.title = '树状结构数据导出';
+          state.tip = '导出代码如下:';
+          state.json = getTree().getTreeData();
+          if (key == 'treeData') {
+            state.json = { treeData: getTree().getTreeData() };
+          } else {
+            state.json = { options: getTree().getTreeData() };
+          }
+        }
       };
       // 树的导入JSON
       const handleImportJson = () => {
@@ -296,6 +336,25 @@
         };
         return false;
       };
+      // 导出json文件
+      const handleExportJson = () => {
+        let content = 'data:text/csv;charset=utf-8,';
+        content += `${JSON.stringify(state.json, null, 2)}`;
+        const encodedUri = encodeURI(content);
+        const actions = document.createElement('a');
+        actions.setAttribute('href', encodedUri);
+        actions.setAttribute('download', 'file.json');
+        actions.click();
+      };
+      // 复制数据
+      const handleCopyJson = () => {
+        const value = `${JSON.stringify(state.json, null, 2)}`;
+        if (!value) {
+          message.warning('代码为空');
+          return;
+        }
+        copyText(value);
+      };
 
       const addOptions = () => {
         if (!formConfig.value.currentItem?.componentProps?.[key])
@@ -340,7 +399,6 @@
       };
       const deleteGridOptions = (index: number) => {
         if (index === 0) return message.warning('请至少保留一个栅格');
-
         remove(formConfig.value.currentItem!['columns']!, index);
       };
       const updateTransferDisabled = (index: number, flag: boolean) => {
@@ -361,6 +419,8 @@
         updateLabelOrValue,
         updateTransferDisabled,
         handleImportJson,
+        handleExportJson,
+        handleCopyJson,
         beforeUpload,
         handleCancel,
         showModal,
@@ -399,4 +459,8 @@
   .upload-button {
     margin: 0 10px;
   }
+
+  .copy-btn {
+    margin: 0 5px;
+  }
 </style>