修改SQL开发

src/views/scriptDevelopment/sqlDevelopment/DataTree.vue

 <template>
-  <div class="m-5 mr-0 overflow-hidden bg-white">
+  <div class="overflow-hidden bg-white">
     <BasicTree
       title=""
       ref="treeRef"

src/views/scriptDevelopment/sqlDevelopment/GroupTree.vue

 <template>
-  <div class="m-5 mr-0 overflow-hidden bg-white">
+  <div class="overflow-hidden bg-white">
     <BasicTree
       title=""
       ref="treeRef"

src/views/scriptDevelopment/sqlDevelopment/index.vue

 <template>
-  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <div class="w-1/4 xl:w-1/5">
-      <DataTree @select="handleSelect" style="height: 50%" />
-      <GroupTree @select="handleGroupSelect" style="height: 50%" />
+  <PageWrapper dense contentFullHeight fixedHeight>
+    <div class="flex">
+      <div class="w-1/4 xl:w-1/5">
+        <DataTree @select="handleSelect" style="height: 50%" />
+        <GroupTree @select="handleGroupSelect" style="height: 50%" />
+      </div>
+      <div class="w-3/4 xl:w-4/5">
+        <div>
+          <BasicTable @register="registerTable" :searchInfo="searchInfo">
+            <template #headerTop>
+              <a-input-search
+                v-model:value="form.value"
+                placeholder="输入关键字搜索"
+                style="width: 200px"
+              />
+            </template>
+            <template #toolbar>
+              <a-button
+                :disabled="getRowSelection().selectedRowKeys <= 0"
+                type="primary"
+                @click="handleExport"
+                >导出</a-button
+              >
+              <a-button type="primary" @click="handleImport">导入</a-button></template
+            >
+          </BasicTable>
+        </div>
+        <div v-if="showTable === 'true'">
+          <BasicTable @register="registerDataPreviewTable">
+            <template #headerTop>
+              <Dropdown :trigger="['click']">
+                <span type="primary" @click.prevent style="margin-left: 1180px"
+                  >字段选择<Icon
+                    icon="ant-design:caret-down-filled"
+                    style="font-size: 12px; margin-left: 2px"
+                /></span>
+                <template #overlay>
+                  <Checkbox.Group v-model:value="selectedTasks">
+                    <Menu>
+                      <MenuItem
+                        v-for="task in fieldData"
+                        :key="task.value"
+                        @click.stop="handleTaskModel(item)"
+                      >
+                        <Checkbox :value="task.value">{{ task.label }}</Checkbox>
+                      </MenuItem>
+                    </Menu>
+                  </Checkbox.Group>
+                </template>
+              </Dropdown>
+              <Icon
+                icon="bxs:download"
+                style="margin-left: 20px"
+                :size="25"
+                @click="handleDownload"
+              />
+            </template>
+          </BasicTable>
+        </div>
+      </div>
     </div>
-    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
-      <template #toolbar>
-        <a-button
-          :disabled="getRowSelection().selectedRowKeys <= 0"
-          type="primary"
-          @click="handleExport"
-          >导出</a-button
-        >
-        <a-button type="primary" @click="handleImport">导入</a-button></template
-      >
-    </BasicTable>
     <importModal @register="registerImport" @success="handleImportSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted } from 'vue';
+  import { reactive, onMounted, ref } from 'vue';
   import { BasicTable, useTable } from '@/components/Table';
-  import { getRoleListByPage, deleteById, exportRoleList } from '@/api/system/role/role';
+  import { exportRoleList } from '@/api/system/role/role';
   import { PageWrapper } from '@/components/Page';
   import { useModal } from '@/components/Modal';
   import DataTree from './DataTree.vue';
   import GroupTree from './GroupTree.vue';
-  import { DataTreeData } from './sqlDevelopmentData';
-  import { columns, searchFormSchema } from './data';
+  import { DataTreeData, previewData } from './sqlDevelopmentData';
+  import { columns, previewColumns } from './data';
   import importModal from './importModal/importModal.vue';
   import { router } from '@/router';
   import { downloadByData } from '@/utils/file/download';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Dropdown, Menu, MenuItem, Checkbox } from 'ant-design-vue';
 
   defineOptions({ name: 'AccountManagement' });
   const [registerImport, { openModal: openImportModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
+  const { createMessage } = useMessage();
+  const showTable = ref('false');
+  const selectedTasks = ref([]);
+  const fieldData = [
+    { value: 'script', label: '脚本' },
+    { value: 'java', label: 'Java' },
+    { value: 'python', label: 'Python' },
+    { value: 'rTask', label: 'R任务' },
+    { value: 'scala', label: 'Scala' },
+    { value: 'sql', label: 'SQL' },
+    { value: 'dataLoad', label: '数据加载' },
+    { value: 'dataSync', label: '数据同步' },
+    { value: 'dataQuality', label: '数据质量' },
+    { value: 'dataMetrics', label: '数据指标' },
+    { value: 'nestedWorkflow', label: '嵌套任务流' },
+    { value: 'delay', label: '延时器' },
+  ];
+
+  const form = reactive({
+    value: '',
+  });
   const [
     registerTable,
     { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
@@ -67,21 +136,44 @@
     rowSelection: {
       type: 'checkbox',
     },
-    formConfig: {
-      labelWidth: 10,
-      schemas: searchFormSchema,
-      autoSubmitOnEnter: true,
-      resetFunc: () => {
-        searchInfo.res = '';
-      },
+    scroll: { y: 400 },
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  const [registerDataPreviewTable] = useTable({
+    title: '数据预览',
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        total: previewData.length,
+        data: previewData,
+      };
+      return { ...response };
     },
-    useSearchForm: true,
+    rowKey: 'id',
+    rowSelection: true,
+    columns: previewColumns,
+    showIndexColumn: false,
+    pagination: true,
+    scroll: { y: 400 },
+    useSearchForm: false,
     showTableSetting: false,
     bordered: true,
     handleSearchInfoFn(info) {
       return info;
     },
   });
+
+  function handleDownload() {
+    selectedTasks.value = [];
+    createMessage.success('下载成功');
+  }
   /** 导出按钮*/
   async function handleExport() {
     console.log('导出----');
@@ -111,9 +203,7 @@
   }
 
   function handleGroupSelect() {
-    router.push({
-      path: '/scriptDevelopment/sqlDevelopment/sqlExecute/sqlExecute',
-    });
+    showTable.value = 'true';
   }
   onMounted(() => {});
 </script>

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

-<template>
-  <BasicModal
-    width="55%"
-    v-bind="$attrs"
-    @register="registerModal"
-    :title="title"
-    @ok="handleSubmit"
-  >
-    <template #footer>
-      <a-button type="primary" @click="handleSubmit">关闭</a-button>
-    </template>
-    <BasicTable @register="registerTable" :searchInfo="searchInfo">
-      <template #toolbar>
-        <!--          下载-->
-        <a-button type="primary" @click="handleDownload"
-          ><Icon icon="bxs:download" :size="20"
-        /></a-button>
-      </template>
-    </BasicTable>
-  </BasicModal>
-</template>
-<script lang="ts" setup>
-  import { onMounted, reactive, ref } from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { BasicTable, useTable } from '@/components/Table';
-  import Icon from '@/components/Icon/Icon.vue';
-  import { previewData } from '../sqlDevelopmentData';
-  import { previewColumns } from '../data';
-
-  defineOptions({ name: 'KnowledgeModal' });
-
-  const emit = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
-  const title = ref();
-  const searchInfo = reactive<Recordable>({});
-  const tableData = ref([]);
-
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    tableData.value = [];
-    await reload();
-    setModalProps({ confirmLoading: false });
-    title.value = data.title;
-  });
-
-  const [registerTable, { reload }] = useTable({
-    api: async () => {
-      const response = {
-        pageNu: '1',
-        pageSize: '10',
-        total: previewData.length,
-        data: previewData,
-      };
-      return { ...response };
-    },
-    rowKey: 'id',
-    rowSelection: true,
-    columns: previewColumns,
-    showIndexColumn: false,
-    pagination: false,
-    formConfig: {
-      labelWidth: 10,
-      autoSubmitOnEnter: true,
-      resetFunc: () => {
-        searchInfo.res = '';
-      },
-    },
-    useSearchForm: false,
-    showTableSetting: false,
-    bordered: true,
-    handleSearchInfoFn(info) {
-      return info;
-    },
-  });
-
-  function handleDownload() {
-    createMessage.success('下载成功');
-  }
-  async function handleSubmit() {
-    closeModal();
-  }
-  onMounted(() => {});
-</script>

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

@@ -4,11 +4,10 @@
     dense
     contentFullHeight
     fixedHeight
-    contentClass="flex"
+
     @back="goBack"
   >
-    <GroupTree @select="handleSelect" class="w-1/4 xl:w-1/5" />
-    <div class="w-3/4 xl:w-4/5" style="padding-top: 20px">
+    <div style="padding-top: 20px">
       <BasicForm @register="registerForm">
         <template #formFooter>
           <div style="display: flex; justify-content: space-between">
@@ -16,7 +15,7 @@
             <Tooltip placement="top" title="新窗口运行">
               <a-button
                 type="primary"
-                style="margin-right: 10px; margin-left: 500px"
+                style="margin-right: 10px; margin-left: 700px"
                 @click="handleExecute"
               >
                 <Icon icon="si:play-forward-duotone" :size="20" />
@@ -77,7 +76,6 @@
     </div>
     <optionsModal @register="registerModal" />
     <resultModal @register="registerResultModal" />
-    <PreviewModal @register="registerPreviewModal" />
     <RecordModal @register="registerRecordModal" />
     <versionManagementModal @register="registerVersionManagementModal" />
   </PageWrapper>
@@ -86,7 +84,6 @@
   import { Tooltip } from 'ant-design-vue';
   import { ref, nextTick, watch, onMounted } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import GroupTree from '../GroupTree.vue';
   import { jsonData } from '../sqlDevelopmentData';
   import { formSchema } from '../data';
   import { useGo } from '@/hooks/web/usePage';
@@ -95,7 +92,6 @@
   import optionsModal from './optionsModal.vue';
   import { useModal } from '@/components/Modal';
   import resultModal from './resultModal.vue';
-  import PreviewModal from './dataPreviewModal.vue';
   import { useMessage } from '@/hooks/web/useMessage';
   import Icon from '@/components/Icon/Icon.vue';
   import RecordModal from './executeRecordModal.vue';
@@ -107,7 +103,6 @@
   const go = useGo();
   const [registerModal, { openModal }] = useModal();
   const [registerResultModal, { openModal: openResultModal }] = useModal();
-  const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
   const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
   const [registerRecordModal, { openModal: openRecordModal }] = useModal();
   const [registerForm] = useForm({
@@ -116,12 +111,6 @@
     schemas: formSchema,
     showActionButtonGroup: false,
   });
-  /** 部门树的select*/
-  function handleSelect() {
-    openPreviewModal(true, {
-      title: '数据预览',
-    });
-  }
   function handleOptions() {
     openModal(true, {
       title: '参数配置',