From eeff8ef4f4614f53ef65d720cceafaceac45ae95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Tue, 25 Jun 2024 17:08:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=91=E7=8A=B6=E7=BB=93=E6=9E=84=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=95=B0=E6=8D=AE=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VFormDesign/components/FormOptions.vue    | 167 +++++++++++++++---
 .../VFormDesign/config/formItemPropsScript.ts |  39 ++++
 2 files changed, 177 insertions(+), 29 deletions(-)

diff --git a/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue b/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
index f77bb0a5..d566ff50 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
@@ -33,9 +33,11 @@
               @input="updateLabelOrValue('value', label, value, $event.target.value)"
               class="options-value"
             />
-            <a class="options-delete" @click="addTreeNode(value)">
-              <Icon icon="ant-design:folder-add-outlined" />
-            </a>
+            <Tooltip title="添加子级选项" placement="top">
+              <a class="options-delete" @click="addTreeNode(value)">
+                <Icon icon="ant-design:folder-add-outlined" />
+              </a>
+            </Tooltip>
             <a class="options-delete" @click="deleteTreeNode(value)">
               <Icon icon="ant-design:delete-outlined" />
             </a>
@@ -46,6 +48,10 @@
         <Icon icon="ant-design:file-add-outlined" />
         添加父级选项
       </a>
+      <a @click="showModal">
+        <Icon icon="ant-design:import-outlined" />
+        导入数据
+      </a>
     </div>
     <div v-else-if="['Transfer'].includes(formConfig.currentItem!.component)">
       <div v-for="(item, index) of formConfig.currentItem!.componentProps![key]" :key="index">
@@ -92,30 +98,64 @@
       </a>
     </div>
   </div>
+  <Modal
+    title="树状结构数据导入"
+    :open="visible"
+    @ok="handleImportJson"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    :destroyOnClose="true"
+    wrapClassName="v-code-modal"
+    style="top: 20px"
+    :width="850"
+  >
+    <p class="hint-box">导入格式如下:</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>
+    </template>
+  </Modal>
 </template>
 
 <script lang="ts">
   import { defineComponent, reactive, toRefs, ref, unref, watch } from 'vue';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
-  import { remove } from '../../../utils';
-  import message from '../../../utils/message';
-  import { Input } from 'ant-design-vue';
-
-  import Icon from '@/components/Icon/Icon.vue';
+  import { remove, formItemsForEach, generateKey } from '../../../utils';
+  import { CodeEditor, MODE } from '@/components/CodeEditor';
+  import { Upload, Modal, Input, Tooltip } from 'ant-design-vue';
+  import { options_json, treeData_json } from '../../VFormDesign/config/formItemPropsScript';
   import { v4 as uuidv4 } from 'uuid';
+  import { cloneDeep } from 'lodash-es';
+  import Icon from '@/components/Icon/Icon.vue';
+  import message from '../../../utils/message';
 
   export default defineComponent({
     name: 'FormOptions',
-    components: { Input, Icon, BasicTree },
+    components: { Input, Icon, BasicTree, CodeEditor, Upload, Modal, Tooltip },
     // props: {},
     setup() {
-      const state = reactive({});
       const { formConfig } = useFormDesignState();
 
       let key: string = '';
 
-      // 树的ref
+      // 导入窗口
+      const state = reactive({
+        visible: false,
+        json: ``,
+      });
+      // 树的值
       const treeDataAndOptions = ref<TreeItem[]>([]);
 
       watch(
@@ -124,10 +164,12 @@
           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') {
             // 穿梭框
@@ -142,11 +184,11 @@
 
       // 获取树
       const treeDataRef = ref<Nullable<TreeActionType>>(null);
-      function getTree(): any {
+      const getTree = (): any => {
         return unref(treeDataRef);
-      }
+      };
       // 添加树的父节点、子节点
-      function addTreeNode(value) {
+      const addTreeNode = (value) => {
         let length = getLength(1, treeDataAndOptions.value);
         getTree().insertNodeByKey({
           parentKey: value,
@@ -158,14 +200,14 @@
           push: 'push',
         });
         refresh();
-      }
+      };
       // 删除树的节点
-      function deleteTreeNode(value) {
+      const deleteTreeNode = (value) => {
         getTree().deleteNodeByKey(value);
         refresh();
-      }
+      };
       // 获取树的节点的不重复的默认值
-      function getLength(length, treeDataOrOptions) {
+      const getLength = (length, treeDataOrOptions) => {
         treeDataOrOptions?.forEach((to) => {
           if (to.children) {
             length = getLength(length, to.children);
@@ -176,24 +218,84 @@
           }
         });
         return length;
-      }
+      };
       // 修改树的label或者value
-      function updateLabelOrValue(type, label, value, newLabelOrValue) {
+      const updateLabelOrValue = (type, label, value, newLabelOrValue) => {
         if (type == 'label') {
           getTree().updateNodeByKey(value, { label: newLabelOrValue, value: value });
         }
         if (type == 'value') {
-          getTree().updateNodeByKey(value, { label: label, value: newLabelOrValue });
+          if (checkRepeat(true, getTree().getTreeData(), newLabelOrValue)) {
+            getTree().updateNodeByKey(value, { label: label, value: newLabelOrValue });
+          } else {
+            message.warning('不能赋给重复的值');
+          }
         }
         refresh();
-        // console.log(getTree().getTreeData());
-      }
+      };
+      // 修改树的label或者value-检查是否有重复值
+      const checkRepeat = (flag, treeData, newValue) => {
+        treeData.forEach((tree) => {
+          if (tree.value == newValue) {
+            flag = false;
+          } else if (tree.children) {
+            return checkRepeat(flag, tree.children, newValue);
+          }
+        });
+        return flag;
+      };
       // 刷新树的值
-      function refresh() {
+      const refresh = () => {
         getTree().expandAll(true);
-        treeDataAndOptions.value = getTree().getTreeData();
-        formConfig.value.currentItem.componentProps[key] = treeDataAndOptions.value;
-      }
+        formConfig.value.currentItem.componentProps[key] = treeDataAndOptions.value =
+          getTree().getTreeData();
+      };
+
+      // 树的导入窗口关闭
+      const handleCancel = () => {
+        state.visible = false;
+      };
+      // 树的导入窗口开启
+      const showModal = () => {
+        state.visible = true;
+      };
+      // 树的导入JSON
+      const handleImportJson = () => {
+        try {
+          const editorJsonData = JSON.parse(state.json);
+          editorJsonData[key] &&
+            formItemsForEach(editorJsonData[key], (formItem) => {
+              generateKey(formItem);
+            });
+          // 删除旧的树
+          cloneDeep(getTree().getTreeData())?.forEach((item) => {
+            deleteTreeNode(item.value);
+          });
+          // 导入新数据
+          editorJsonData[key]?.forEach((item) => {
+            getTree().insertNodeByKey({
+              parentKey: null,
+              node: item,
+              push: 'push',
+            });
+          });
+          refresh();
+          handleCancel();
+          message.success('导入成功');
+        } catch {
+          message.error('导入失败，数据格式不对');
+        }
+      };
+      // 通过json文件导入
+      const beforeUpload = (e: File) => {
+        const reader = new FileReader();
+        reader.readAsText(e);
+        reader.onload = function () {
+          state.json = this.result as string;
+          handleImportJson();
+        };
+        return false;
+      };
 
       const addOptions = () => {
         if (!formConfig.value.currentItem?.componentProps?.[key])
@@ -230,7 +332,6 @@
       const deleteOptions = (index: number) => {
         remove(formConfig.value.currentItem?.componentProps?.[key], index);
       };
-
       const addGridOptions = () => {
         formConfig.value.currentItem?.['columns']?.push({
           span: 12,
@@ -242,7 +343,6 @@
 
         remove(formConfig.value.currentItem!['columns']!, index);
       };
-
       const updateTransferDisabled = (index: number, flag: boolean) => {
         formConfig.value.currentItem.componentProps[key][index].disabled = flag;
       };
@@ -260,6 +360,11 @@
         deleteTreeNode,
         updateLabelOrValue,
         updateTransferDisabled,
+        handleImportJson,
+        beforeUpload,
+        handleCancel,
+        showModal,
+        MODE,
       };
     },
   });
@@ -290,4 +395,8 @@
       }
     }
   }
+
+  .upload-button {
+    margin: 0 10px;
+  }
 </style>
diff --git a/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts b/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts
index ce8a4fff..7abaaa76 100644
--- a/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts
+++ b/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts
@@ -58,3 +58,42 @@ url:api地址, params:参数
 let resPut = await utils.httpPut(url, params);
 url:api地址, params:参数
 `;
+
+
+export const options_json = `{
+    "options": [
+    {
+        "label": "选项1",
+        "value": "1",
+        "children": [
+        {
+          "label": "选项3",
+          "value": "3"
+        }
+      ]
+    },
+    {
+      "label": "选项2",
+      "value": "2"
+    }
+  ]
+}`;
+
+export const treeData_json = `{
+    "treeData": [
+    {
+        "label": "选项1",
+        "value": "1",
+        "children": [
+        {
+          "label": "选项3",
+          "value": "3"
+        }
+      ]
+    },
+    {
+      "label": "选项2",
+      "value": "2"
+    }
+  ]
+}`;
\ No newline at end of file