质量模板

src/views/dataQuality/dataSheet/template/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
     <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
-    <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
-      <template #toolbar>
-        <a-button
-          :disabled="getRowSelection().selectedRowKeys <= 0"
-          type="primary"
-          @click="handleMove(0)"
-          >复制到</a-button
-        >
-        <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="handleImport">导入</a-button>
-        <a-button :disabled="getRowSelection().selectedRowKeys <= 0" type="primary">导出</a-button>
-        <a-button type="primary" @click="handleAddTemplate">新建文件</a-button>
-        <a-button type="primary" @click="handleNewFolder">新建文件夹</a-button>
+    <BasicTable
+      style="margin: 8px; padding-right: 10px"
+      @register="registerTable"
+      class="w-3/4 xl:w-4/5"
+      :searchInfo="searchInfo"
+    >
+      <template #headerTop>
+        <div class="header-top">
+          <div class="header">
+            <div class="header-left">
+              <PicLeftOutlined class="icon" />
+              <div class="title">
+                <div class="name"> 内置模板 </div>
+                <div class="path"> 质量模板／数据中台工作区01／内置模板 </div>
+              </div>
+            </div>
+            <div class="bt-group">
+              <a-button
+                :disabled="getRowSelection().selectedRowKeys <= 0"
+                type="primary"
+                @click="handleMove(0)"
+                >复制到</a-button
+              >
+              <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="handleImport">导入</a-button>
+              <a-button :disabled="getRowSelection().selectedRowKeys <= 0" type="primary"
+                >导出</a-button
+              >
+              <a-button type="primary" @click="handleAddTemplate">新建文件</a-button>
+              <a-button type="primary" @click="handleNewFolder">新建文件夹</a-button>
+            </div>
+          </div>
+          <div class="search">
+            <Input class="input" v-model:value="searchKey" placeholder="输入关键字搜索">
+              <template #suffix>
+                <SearchOutlined />
+              </template>
+            </Input>
+          </div>
+        </div>
       </template>
+      <template #toolbar></template>
       <template #name="{ text, record }">
         <a @click="handleEdit(record, 0)"> {{ text }}</a>
       </template>
@@ -69,11 +97,13 @@
     <MoveFile @register="registerMoveFile" @success="handleMoveSuccess" />
     <importModal @register="registerImport" @success="handleImportSuccess" />
     <TemplateModal @register="registerTemplate" />
-    <NewFolder @register="registerNewFolder"></NewFolder>
+    <NewFolder @register="registerNewFolder" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { reactive, unref, onDeactivated, onMounted } from 'vue';
+  import { Input } from 'ant-design-vue';
+  import { PicLeftOutlined, SearchOutlined } from '@ant-design/icons-vue';
+  import { reactive, unref, onDeactivated, onMounted, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import MoveFile from './moveFile.vue';
   import { PageWrapper } from '@/components/Page';
@@ -102,6 +132,7 @@
   const [registerTemplate, { openModal: openTemplateModal }] = useModal();
   const [registerNewFolder, { openModal: openNewFolderModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
+  const searchKey = ref();
   const [
     registerTable,
     { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
@@ -123,15 +154,15 @@
     rowKey: 'businessId',
     rowSelection: true,
     columns,
-    formConfig: {
-      labelWidth: 10,
-      schemas: searchFormSchema,
-      autoSubmitOnEnter: true,
-      resetFunc: () => {
-        searchInfo.deptId = '';
-      },
-    },
-    useSearchForm: true,
+    // formConfig: {
+    //   labelWidth: 10,
+    //   schemas: searchFormSchema,
+    //   autoSubmitOnEnter: true,
+    //   resetFunc: () => {
+    //     searchInfo.deptId = '';
+    //   },
+    // },
+    // useSearchForm: true,
     showTableSetting: false,
     bordered: true,
     handleSearchInfoFn(info) {
@@ -276,3 +307,42 @@
     next(); // 允许导航
   });
 </script>
+<style scoped>
+  .header-top {
+    margin: 0 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    .header {
+      display: flex;
+      justify-content: space-between;
+      .header-left {
+        display: flex;
+        gap: 10px;
+        .icon {
+          font-size: 30px;
+          color: #29ba4e;
+        }
+        .title {
+          .name {
+            font-size: 16px;
+            font-weight: bolder;
+          }
+          .path {
+            font-size: 12px;
+            color: #bfc3cd;
+          }
+        }
+      }
+      .bt-group {
+        display: flex;
+        gap: 10px;
+      }
+    }
+    .search {
+      .input {
+        width: 220px;
+      }
+    }
+  }
+</style>

src/views/dataQuality/dataSheet/template/tempalte.data.ts

@@ -37,7 +37,7 @@ export const columns: BasicColumn[] = [
   {
     title: '权属工作组',
     dataIndex: 'workgroup',
-    width: 120,
+    width: 110,
   },
 ];