修改表头按钮为 button + icon 控件

src/window1/tabGridView/NewTabButton.vue

@@ -3,36 +3,66 @@
     <div v-if="leftTabButton.length === 0" />
     <a-breadcrumb v-if="leftTabButton && leftTabButton.length" separator="|">
       <a-breadcrumb-item v-for="(item, index) in leftTabButton" :key="index">
-        <PlusSquareTwoTone v-if="item.action === 'CREATE'" />
-        <EditTwoTone v-if="item.action === 'EDIT'" />
-        <DeleteTwoTone v-if="item.action === 'DELETE'" />
-        <ControlTwoTone v-if="item.action === 'RUN_PROCESS_REPORT'" />
-        <BookTwoTone v-if="item.action === 'OPEN_CUSTOMER_WINDOW'" />
-        <ContainerTwoTone v-if="item.action === 'OPEN_HTML_WINDOW'" />
-        <FileTextTwoTone v-if="item.action === 'EXPORT'" />
-        <ReloadOutlined v-if="item.action === 'REFRESH'" />
-        <BellTwoTone v-if="item.action === 'NOTICE'" />
-        <HddOutlined
-          v-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'"
-        />
-
-        <span v-if="item.action === 'CREATE'" @click="create">{{
-          item.name
-        }}</span>
-        <span v-else-if="item.action === 'DELETE'" @click="deleteData">{{
-          item.name
-        }}</span>
-        <span v-else-if="item.action === 'EXPORT'" @click="exportConfirm">{{
-          item.name
-        }}</span>
-        <span v-else-if="item.action === 'REFRESH'" @click="refresh">{{
-          item.name
-        }}</span>
-        <span
+        <a-button
+          v-if="item.action === 'CREATE'"
+          :icon="h(PlusSquareTwoTone)"
+          @click="create"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else-if="item.action === 'EDIT'" :icon="h(EditTwoTone)">
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'DELETE'"
+          :icon="h(DeleteTwoTone)"
+          @click="deleteData"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'RUN_PROCESS_REPORT'"
+          :icon="h(ControlTwoTone)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'OPEN_CUSTOMER_WINDOW'"
+          :icon="h(BookTwoTone)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'OPEN_HTML_WINDOW'"
+          :icon="h(ContainerTwoTone)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'EXPORT'"
+          :icon="h(FileTextTwoTone)"
+          @click="exportConfirm"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'REFRESH'"
+          :icon="h(ReloadOutlined)"
+          @click="refresh"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else-if="item.action === 'NOTICE'" :icon="h(BellTwoTone)">
+          {{ item.name }}
+        </a-button>
+        <a-button
           v-else-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'"
+          :icon="h(HddOutlined)"
           @click="openRemoteComponentModule(item)"
-        >{{ item.name }}</span>
-        <span v-else>{{ item.name }}</span>
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else :icon="h(LayoutTwoTone)">{{ item.name }}</a-button>
       </a-breadcrumb-item>
 
       <!-- <a-breadcrumb-item>
@@ -46,39 +76,66 @@
     </a-breadcrumb>
     <a-breadcrumb separator="|">
       <a-breadcrumb-item v-for="(item, index) in rightTabButton" :key="index">
-        <PlusSquareTwoTone v-if="item.action === 'CREATE'" />
-        <EditTwoTone v-if="item.action === 'EDIT'" />
-        <DeleteTwoTone v-if="item.action === 'DELETE'" />
-        <ControlTwoTone v-if="item.action === 'RUN_PROCESS_REPORT'" />
-        <BookTwoTone v-if="item.action === 'OPEN_CUSTOMER_WINDOW'" />
-        <ContainerTwoTone v-if="item.action === 'OPEN_HTML_WINDOW'" />
-        <FileTextTwoTone v-if="item.action === 'EXPORT'" />
-        <BellTwoTone v-if="item.action === 'NOTICE'" />
-        <ReloadOutlined v-if="item.action === 'REFRESH'" />
-        <HddOutlined
-          v-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'"
-        />
-        <span v-if="item.action === 'CREATE'" @click="create">{{
-          item.name
-        }}</span>
-        <span v-else-if="item.action === 'DELETE'" @click="deleteData">{{
-          item.name
-        }}</span>
-        <span v-else-if="item.action === 'EXPORT'" @click="exportConfirm">{{
-          item.name
-        }}</span>
-        <span v-else-if="item.action === 'REFRESH'" @click="refresh">{{
-          item.name
-        }}</span>
-        <span
+        <a-button
+          v-if="item.action === 'CREATE'"
+          :icon="h(PlusSquareTwoTone)"
+          @click="create"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else-if="item.action === 'EDIT'" :icon="h(EditTwoTone)">
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'DELETE'"
+          :icon="h(DeleteTwoTone)"
+          @click="deleteData"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'RUN_PROCESS_REPORT'"
+          :icon="h(ControlTwoTone)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'OPEN_CUSTOMER_WINDOW'"
+          :icon="h(BookTwoTone)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'OPEN_HTML_WINDOW'"
+          :icon="h(ContainerTwoTone)"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'EXPORT'"
+          :icon="h(FileTextTwoTone)"
+          @click="exportConfirm"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button
+          v-else-if="item.action === 'REFRESH'"
+          :icon="h(ReloadOutlined)"
+          @click="refresh"
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else-if="item.action === 'NOTICE'" :icon="h(BellTwoTone)">
+          {{ item.name }}
+        </a-button>
+        <a-button
           v-else-if="item.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'"
+          :icon="h(HddOutlined)"
           @click="openRemoteComponentModule(item)"
-        >{{ item.name }}</span>
-        <span
-          v-else-if="item.action === 'NOTICE'"
-          @click="notificationModal = true"
-        >{{ item.name }}</span>
-        <span v-else>{{ item.name }}</span>
+        >
+          {{ item.name }}
+        </a-button>
+        <a-button v-else :icon="h(LayoutTwoTone)">{{ item.name }}</a-button>
       </a-breadcrumb-item>
     </a-breadcrumb>
   </div>
@@ -102,9 +159,9 @@
     </template>
   </Modal>
 
-  <a-modal v-model:open="modal1Open">
-    <component :is="modal1Component" v-model:open="modal1Open" />
-  </a-modal>
+  <!-- <a-modal v-model:open="modal1Open"> -->
+  <component :is="modal1Component" v-model:open="modal1Open" />
+  <!-- </a-modal> -->
 </template>
 
 <script setup>
@@ -115,6 +172,7 @@ import {
   watch,
   getCurrentInstance,
   defineAsyncComponent,
+  h,
 } from 'vue';
 import Common from '../../common/Common';
 import DownloadService from '../../resource/file/DownloadService.js';
@@ -137,6 +195,7 @@ import {
   ContainerTwoTone,
   ControlTwoTone,
   ReloadOutlined,
+  LayoutTwoTone,
 } from '@ant-design/icons-vue';
 const props = defineProps({
   window: {
@@ -215,7 +274,9 @@ const deleteData = () => {
 const refresh = () => {
   emit('refreshDatas', false);
 };
-
+const closeModal = () => {
+  modal1Open.value = false;
+};
 /**
  * 导出确认
  */
@@ -495,6 +556,7 @@ const openRemoteComponentModule = async function (tabButton) {
 
     modal1Component.value = testAsyncRemoteComponent;
     modal1Open.value = true;
+    console.log(modal1Component.value);
   }
 };
 </script>
@@ -504,5 +566,9 @@ const openRemoteComponentModule = async function (tabButton) {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-right: 6px;
+}
+.ant-btn {
+  padding: 4px 10px;
 }
 </style>

src/window1/tabGridView/TabGridEdit.vue

@@ -1822,7 +1822,7 @@ export default {
 }
 
 .tableFixHead {
-  margin-top: -16px;
+  margin-top: -6px;
 }
 
 :deep( :where(.css-dev-only-do-not-override-16pw25h).ant-breadcrumb .ant-breadcrumb-link > .anticon + span,