修改bug,增加商城文件页面

src/views/mallResourceDevelopment/dataFile/GroupTree.vue

+<template>
+  <div class="m-5 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title=""
+      ref="treeRef"
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
+  import { Nullable } from '@vben/types';
+  import { TreeData } from './dataFileData';
+
+  const emit = defineEmits(['select']);
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+  async function fetch() {
+    treeData.value = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    await nextTick(() => {
+      getTree().expandAll(true);
+    });
+  }
+
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+
+  /**选中的数据*/
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/mallResourceDevelopment/dataFile/data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '文件名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '描述',
+    dataIndex: 'remark',
+    width: 150,
+  },
+  {
+    title: '权属机构',
+    dataIndex: 'workgroup',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 150,
+  },
+  {
+    title: '版本发布状态',
+    dataIndex: 'status',
+    width: 150,
+  },
+  {
+    title: '上架状态',
+    dataIndex: 'uploadStatus',
+    width: 100,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: ' ',
+    component: 'Input',
+    colProps: { span: 5 },
+    componentProps: {
+      placeholder: '搜索文件名称',
+    },
+  },
+  {
+    field: 'workGroup',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 5 },
+    componentProps: {
+      placeholder: '权属机构',
+      options: [
+        { label: '审核中', value: '审核中' },
+        { label: '已下线', value: '已下线' },
+      ],
+    },
+  },
+  {
+    field: 'status',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 5 },
+    componentProps: {
+      placeholder: '版本发布状态',
+      options: [
+        { label: '已发布', value: '0' },
+        { label: '未发布', value: '1' },
+      ],
+    },
+  },
+  {
+    field: 'uploadStatus',
+    label: ' ',
+    component: 'Select',
+    colProps: { span: 5 },
+    componentProps: {
+      placeholder: '上架状态',
+      options: [
+        { label: '已上架', value: '0' },
+        { label: '未上架', value: '1' },
+      ],
+    },
+  },
+];
+export const MoveFormSchema: any[] = [
+  {
+    field: 'taskId',
+    label: '路径',
+    component: 'TreeSelect',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      // border: 'none',
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+];
+export const formSchemaNewFolder: any = [
+  {
+    field: 'path',
+    label: '路径',
+    component: 'TreeSelect',
+    rules: [
+      {
+        required: true,
+        message: '请选择上级菜单',
+      },
+    ],
+    componentProps: {
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+
+  {
+    field: 'name',
+    label: '文件夹名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '输入文件夹名称',
+    },
+  },
+];

src/views/mallResourceDevelopment/dataFile/dataFileData.ts

+export const tableList: any[] = [
+  {
+    name: 'test1',
+    remark: '这是第一个测试文件的备注信息。',
+    workgroup: '测试功能部',
+    createTime: '2023-01-16 11:30:45',
+    status: '0',
+    uploadStatus: '0',
+  },
+  {
+    name: 'test2',
+    remark: '第二个测试文件，用于测试不同状态的效果。',
+    workgroup: '开发部',
+    createTime: '2023-02-20 15:45:20',
+    status: '1',
+    uploadStatus: '0',
+  },
+  {
+    name: 'test3',
+    remark: '第三个测试文件，模拟已完成所有流程的情况。',
+    workgroup: '测试功能部',
+    createTime: '2023-03-10 09:15:30',
+    status: '1',
+    uploadStatus: '1',
+  },
+  {
+    name: 'test4',
+    remark: '第四个测试文件，检查创建时间排序。',
+    workgroup: '市场部',
+    createTime: '2023-04-05 14:25:10',
+    status: '0',
+    uploadStatus: '1',
+  },
+  {
+    name: 'test5',
+    remark: '第五个测试文件，用于验证不同部门的数据展示。',
+    workgroup: '财务部',
+    createTime: '2023-05-15 16:50:05',
+    status: '0',
+    uploadStatus: '0',
+  },
+];
+export const TreeData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 100,
+    parentWorkSpaceName: '整合',
+    workSpaceName: '整合',
+    parentId: 0,
+    'code:': '001',
+    ancestors: '0',
+    orderNum: 0,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 101,
+    parentWorkSpaceName: '数据加载',
+    workSpaceName: '数据加载',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 201,
+    parentWorkSpaceName: '数据加载',
+    workSpaceName: '个人工作区',
+    parentId: 101,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 1,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 202,
+    parentWorkSpaceName: '数据加载',
+    workSpaceName: '共享工作区',
+    parentId: 101,
+    'code:': '004',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 301,
+    parentWorkSpaceName: '个人工作区',
+    workSpaceName: '图标验收',
+    parentId: 201,
+    'code:': '004',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 302,
+    parentWorkSpaceName: '共享工作区',
+    workSpaceName: '学生成绩',
+    parentId: 202,
+    'code:': '004',
+    ancestors: '0,100',
+    orderNum: 2,
+    children: [],
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+];

src/views/mallResourceDevelopment/dataFile/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <GroupTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5">
+      <template #toolbar>
+        <a-button
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          type="primary"
+          @click="deleteButton"
+          >删除</a-button
+        >
+        <a-button
+          :disabled="getRowSelection().selectedRowKeys <= 0"
+          type="primary"
+          @click="handleMove(1)"
+          >移动</a-button
+        >
+        <a-button type="primary" @click="batchUploading">批量上架</a-button>
+        <a-button type="primary" @click="handleNewFolder">新建文件夹</a-button>
+        <a-button type="primary" @click="handleDataEntry">新建文件</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'status'">
+          <template v-if="record.uploadStatus === '0'">
+            <Icon icon="grommet-icons:status-good" color="green" /><span>已发布</span>
+          </template>
+          <template v-if="record.uploadStatus === '1'">
+            <Icon icon="carbon:error-outline" color="red" /><span>未发布</span>
+          </template>
+        </template>
+        <template v-if="column.key === 'uploadStatus'">
+          <template v-if="record.uploadStatus === '0'">
+            <Icon icon="grommet-icons:status-good" color="green" /><span>已上架</span>
+          </template>
+          <template v-if="record.uploadStatus === '1'">
+            <Icon icon="carbon:error-outline" color="red" /><span>未上架</span>
+          </template>
+        </template>
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '上架',
+                onClick: handleMove.bind(null, 0, record),
+              },
+              {
+                label: '删除',
+                onClick: deleteButton.bind(null),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <MoveFile @register="registerMoveFile" />
+    <NewFolder @register="registerNewFolder" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useModal } from '@/components/Modal';
+  import { tableList } from './dataFileData';
+  import { columns, searchFormSchema } from './data';
+  import MoveFile from './moveFile.vue';
+  import NewFolder from './newFolder.vue';
+  import GroupTree from './GroupTree.vue';
+  import Icon from '@/components/Icon/Icon.vue';
+
+  const { createMessage, createConfirm } = useMessage();
+  const [registerMoveFile, { openModal: openMoveFileModal }] = useModal();
+  const [registerNewFolder, { openModal: openNewFolderModal }] = useModal();
+  const [registerTable, { reload, getRowSelection }] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: tableList.length,
+        code: '',
+        message: '',
+        data: tableList,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    rowSelection: true,
+    columns,
+    formConfig: {
+      labelWidth: 10,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+
+  function handleDataEntry() {
+    openSceneSelectionModal(true);
+  }
+
+  function handleNewFolder() {
+    openNewFolderModal(true, {
+      isUpdate: false,
+    });
+  }
+
+  /** 移动按钮*/
+  function handleMove(isMove, record: Recordable) {
+    // console.log('record',record)
+    openMoveFileModal(true, {
+      record,
+      isMove: isMove,
+    });
+  }
+
+  function batchUploading() {
+    createConfirm({
+      iconType: 'info',
+      title: '确认上架',
+      content: '确认批量上架选中数据吗？',
+      onOk() {
+        createMessage.success('上架成功!');
+        reload();
+      },
+    });
+  }
+
+  /**删除按钮*/
+  function deleteButton() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认删除',
+      content: '确认批量删除选中数据吗？',
+      onOk() {
+        createMessage.success('删除成功!');
+        reload();
+      },
+    });
+  }
+
+  /** 部门树的select*/
+  function handleSelect() {
+    reload();
+  }
+
+  onMounted(() => {});
+</script>

src/views/mallResourceDevelopment/dataFile/moveFile.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { MoveFormSchema } from './data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { TreeData } from './dataFileData';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const rowData = ref([]);
+  let isMove = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { updateSchema, resetFields }] = useForm({
+    baseColProps: { span: 24 },
+    schemas: MoveFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    console.log('data', data);
+    // //每次点击弹窗 需要清空存储的数据
+    rowData.value = [];
+    isMove.value = data.isMove;
+    // //重置表单数据
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    updateSchema([
+      {
+        field: 'taskId',
+        componentProps: {
+          treeData: treeList,
+        },
+      },
+    ]);
+    console.log('treeList:', treeList);
+  });
+
+  const getTitle = computed(() => '移动');
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    // console.log('isMove.value', isMove.value);
+    if (isMove.value === 1) {
+      createMessage.success('移动成功！');
+    } else {
+      createMessage.success('复制成功！');
+    }
+
+    closeModal();
+  }
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+</script>

src/views/mallResourceDevelopment/dataFile/newFolder.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchemaNewFolder } from './data';
+  import { TreeData } from './dataFileData';
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: formSchemaNewFolder,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 通过id获取行详情信息
+      // 塞值
+      setFieldsValue({
+        ...data.record,
+      });
+    }
+
+    const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    updateSchema([
+      {
+        field: 'path',
+        componentProps: {
+          treeData: treeList,
+        },
+      },
+    ]);
+  });
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新建主体' : '编辑主体'));
+
+  async function handleSubmit() {
+    try {
+      const values = await validate();
+      setModalProps({ confirmLoading: true });
+      // TODO custom api
+      closeModal();
+      emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .modalRow {
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .clearAll {
+      padding-right: 10px;
+      font-size: 16px;
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+  .addDialogBG {
+    margin: 10px;
+    border-radius: 10px;
+    padding: 20px;
+    background-color: #e8ecf7;
+    width: 98%;
+    height: 400px;
+  }
+</style>

src/views/scriptDevelopment/sqlDevelopment/index.vue

@@ -64,6 +64,11 @@
 
   /** 部门树的select*/
   function handleSelect(workSpaceName = '') {
+    if (workSpaceName.businessId > 300) {
+      router.push({
+        path: '/scriptDevelopment/sqlDevelopment/sqlExecute/sqlExecute',
+      });
+    }
     searchInfo.res = workSpaceName;
     reload();
   }

src/views/scriptDevelopment/sqlDevelopment/sqlExecute/sqlExecute.vue

@@ -11,42 +11,78 @@
     <div class="w-3/4 xl:w-4/5" style="padding-top: 20px">
       <BasicForm @register="registerForm">
         <template #formFooter>
-          <!--          新窗口运行-->
+          <!-- 新窗口运行 -->
           <a-button
             type="primary"
             style="margin-right: 10px; margin-left: 500px"
             @click="handleExecute"
+            title="新窗口运行"
           >
-            <Icon icon="si:play-forward-duotone" :size="20"
-          /></a-button>
-          <!--          运行-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleExecute"
-            ><Icon icon="si:play-line" :size="20"
-          /></a-button>
-          <!--          执行记录-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleRecord"
-            ><Icon icon="si:clock-alt-line" :size="20"
-          /></a-button>
-          <!--          提交版本-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
-            ><Icon icon="majesticons:file-plus-line" :size="20"
-          /></a-button>
-          <!--          版本管理-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
-            ><Icon icon="majesticons:file-line" :size="20"
-          /></a-button>
-          <!--          参数配置-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleOptions"
-            ><Icon icon="majesticons:link-circle-line" :size="20"
-          /></a-button>
-          <!--          格式化-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleChange"
-            ><Icon icon="gg:align-left" :size="20"
-          /></a-button>
-          <!--          保存-->
-          <a-button type="primary" style="margin-right: 10px" @click="handleSubmit"
-            ><Icon icon="majesticons:save-line" :size="20"
-          /></a-button>
+            <Icon icon="si:play-forward-duotone" :size="20" />
+          </a-button>
+          <!-- 运行 -->
+          <a-button
+            type="primary"
+            style="margin-right: 10px"
+            @click="handleExecute"
+            title="运行"
+          >
+            <Icon icon="si:play-line" :size="20" />
+          </a-button>
+          <!-- 执行记录 -->
+          <a-button
+            type="primary"
+            style="margin-right: 10px"
+            @click="handleRecord"
+            title="执行记录"
+          >
+            <Icon icon="si:clock-alt-line" :size="20" />
+          </a-button>
+          <!-- 提交版本 -->
+          <a-button
+            type="primary"
+            style="margin-right: 10px"
+            @click="handleSubmit"
+            title="提交版本"
+          >
+            <Icon icon="majesticons:file-plus-line" :size="20" />
+          </a-button>
+          <!-- 版本管理 -->
+          <a-button
+            type="primary"
+            style="margin-right: 10px"
+            @click="handleVersionManage"
+            title="版本管理"
+          >
+            <Icon icon="majesticons:file-line" :size="20" />
+          </a-button>
+          <!-- 参数配置 -->
+          <a-button
+            type="primary"
+            style="margin-right: 10px"
+            @click="handleOptions"
+            title="参数配置"
+          >
+            <Icon icon="majesticons:link-circle-line" :size="20" />
+          </a-button>
+          <!-- 格式化 -->
+          <a-button
+            type="primary"
+            style="margin-right: 10px"
+            @click="handleChange"
+            title="格式化"
+          >
+            <Icon icon="gg:align-left" :size="20" />
+          </a-button>
+          <!-- 保存 -->
+          <a-button
+            type="primary"
+            style="margin-right: 10px"
+            @click="handleSubmit"
+            title="保存"
+          >
+            <Icon icon="majesticons:save-line" :size="20" />
+          </a-button>
         </template>
       </BasicForm>
       <CodeEditor v-model:value="jsonData" :mode="MODE.JSON" />