修改sql开发

src/views/scriptDevelopment/sqlDevelopment/index.vue

@@ -5,7 +5,7 @@
         <DataTree @select="handleSelect" style="height: 50%" />
         <GroupTree @select="handleGroupSelect" style="height: 50%" />
       </div>
-      <div class="m-4 mr-0 w-3/4 xl:w-4/5">
+      <div class="m-4 mr-0 w-3/4 xl:w-4/5" style="background-color: white">
         <div>
           <BasicTable @register="registerTable" :searchInfo="searchInfo">
             <template #headerTop>
@@ -26,12 +26,13 @@
             >
           </BasicTable>
         </div>
-        <div v-if="showTable === 'true'">
+        <div v-if="showTable === 'true'" style="margin-top: 100px">
           <BasicTable @register="registerDataPreviewTable">
             <template #headerTop>
+              <span style="font-weight: bold; font-size: 16px">数据预览</span>
               <Dropdown :trigger="['click']">
-                <span type="primary" @click.prevent style="margin-left: 1180px"
-                  >字段选择<Icon
+                <span type="primary" @click.prevent style="margin-left: 1120px"
+                >字段选择<Icon
                     icon="ant-design:caret-down-filled"
                     style="font-size: 12px; margin-left: 2px"
                 /></span>
@@ -50,8 +51,8 @@
                 </template>
               </Dropdown>
               <Icon
-                icon="bxs:download"
-                style="margin-left: 20px"
+                icon="material-symbols-light:download-sharp"
+                style="margin-left: 10px"
                 :size="25"
                 @click="handleDownload"
               />
@@ -140,7 +141,7 @@
   });
 
   const [registerDataPreviewTable] = useTable({
-    title: '数据预览',
+    title: ' ',
     api: async () => {
       const response = {
         pageNu: '1',

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

@@ -10,7 +10,15 @@
       <a-button type="primary" @click="handleSubmit">关闭</a-button>
     </template>
     <BasicTable @register="registerTable">
-      <template #bodyCell="{ column }">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'result'">
+          <template v-if="record.result === '成功'">
+            <Icon icon="grommet-icons:status-good" color="green" /><span>成功</span>
+          </template>
+          <template v-if="record.result === '失败'">
+            <Icon icon="carbon:error-outline" color="red" /><span>失败</span>
+          </template>
+        </template>
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[

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

@@ -21,9 +21,15 @@
         <div class="charts-container1">
           <div class="chart" id="chart"></div>
         </div>
-        <a-button type="primary" @click="handleDownload" style="margin-left: 100px"
-          >下载图表</a-button
-        >
+        <div>
+          <Icon
+            icon="material-symbols-light:download-sharp"
+            style="margin-left: 90px"
+            :size="25"
+            @click="handleDownload"
+          />
+          <span style="font-size: 14px" @click="handleDownload">下载图表</span>
+        </div>
       </div>
     </div>
   </BasicModal>
@@ -82,8 +88,8 @@
       },
       legend: {
         orient: 'horizontal', // 图例项水平排列
-        left: 'left', // 图例放置于底部中心位置
-        top: 'center', // 图例放置于图表的底部
+        left: '6%', // 图例放置于底部中心位置
+        top: '5%', // 图例放置于图表的底部
       },
       yAxis: {
         type: 'value',

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

 <template>
-  <PageWrapper
-    title="SQL执行"
-    dense
-    contentFullHeight
-    fixedHeight
-
-    @back="goBack"
-  >
-    <div style="padding-top: 20px">
+  <PageWrapper title="SQL执行" dense contentFullHeight fixedHeight @back="goBack">
+    <div style="padding-top: 20px; background-color: white">
       <BasicForm @register="registerForm">
         <template #formFooter>
           <div style="display: flex; justify-content: space-between">
@@ -38,7 +31,7 @@
 
             <!--          提交版本-->
             <Tooltip placement="top" title="提交版本">
-              <a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
+              <a-button type="primary" style="margin-right: 10px" @click="handleSubmitVersion">
                 <Icon icon="majesticons:file-plus-line" :size="20" />
               </a-button>
             </Tooltip>
@@ -78,6 +71,7 @@
     <resultModal @register="registerResultModal" />
     <RecordModal @register="registerRecordModal" />
     <versionManagementModal @register="registerVersionManagementModal" />
+    <SubmitVersionModal @register="registerSubmitVersionModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -96,6 +90,7 @@
   import Icon from '@/components/Icon/Icon.vue';
   import RecordModal from './executeRecordModal.vue';
   import versionManagementModal from './versionManagementModal.vue';
+  import SubmitVersionModal from './submitVersionModal.vue';
 
   defineOptions({ name: 'AccountManagement' });
 
@@ -105,6 +100,7 @@
   const [registerResultModal, { openModal: openResultModal }] = useModal();
   const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
   const [registerRecordModal, { openModal: openRecordModal }] = useModal();
+  const [registerSubmitVersionModal, { openModal: openSubmitVersionModal }] = useModal();
   const [registerForm] = useForm({
     labelWidth: 100,
     baseColProps: { lg: 6, md: 4 },
@@ -131,8 +127,10 @@
       title: '版本管理',
     });
   }
-  function handleSubmit() {
-    createMessage.success('保存成功');
+  function handleSubmitVersion() {
+    openSubmitVersionModal(true, {
+      title: '提交版本',
+    });
   }
   function handleChange() {
     createMessage.success('格式化成功');

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

+<template>
+  <BasicModal
+    width="30%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { submitVersionSchema } from '@/views/scriptDevelopment/sqlDevelopment/sqlExecute/version.data';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 100,
+    labelAlign: 'left',
+    schemas: submitVersionSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+    resetFields();
+  }
+  onMounted(() => {});
+</script>

src/views/scriptDevelopment/sqlDevelopment/sqlExecute/version.data.ts

@@ -30,3 +30,12 @@ export const versionSchema = [
     subTitle: 'v22',
   },
 ];
+export const submitVersionSchema: FormSchema[] = [
+  {
+    field: 'remark',
+    label: '版本描述',
+    component: 'InputTextArea',
+    required: true,
+    colProps: { lg: 24, md: 24 },
+  },
+];