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 d566ff50..05e5945f 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
@@ -30,7 +30,7 @@
/>
@@ -48,10 +48,14 @@
添加父级选项
-
+
导入数据
+
- 导入格式如下:
+ {{ tip }}
- 取消
-
- 导入json文件
-
- 确定
+
+
取消
+
+ 导入json文件
+
+
确定
+
+
@@ -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([]);
@@ -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;
+ }