分支机构排版调整

yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/index.vue

@@ -5,6 +5,7 @@ import DrawerFilter from './src/DrawerFilter.vue'
 import { ref, h } from 'vue'
 import { EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined, UndoOutlined, FilterOutlined } from '@ant-design/icons-vue';
 
+const headStyleV: any = { color: '#262626', 'background-color': '#F7F8FA', 'border-radius': '3px' }
 const activeKey = ref('1');
 const columns: any = [
   {
@@ -149,26 +150,37 @@ const doShowDrawerFilter = (isshow: boolean) => {
 <template>
   <a-row :wrap="false" class="y1-enterprise-centre-branch">
     <a-col flex="1 1 auto">
+      <a-card title="分支机构" :bordered="false" style="border-radius: 3px;" :headStyle="headStyleV">
         <a-row :wrap="false" class="y1y1">
           <a-col flex="1 1 auto">
             <a-row :wrap="false">
-            <a-col flex="1 1 300px" class="y1y1x1">
+              <a-col flex="1 1 auto" class="y1y1x1">
                 <a-space>
                   <a-input placeholder="部门名称" />
                   <a-button type="primary" :icon="h(SearchOutlined)">查询</a-button>
                   <a-button :icon="h(UndoOutlined)">重置</a-button>
+                  <a-button type="link" :icon="h(FilterOutlined)" @click="doShowDrawerFilter(true)">高级筛选</a-button>
                 </a-space>
               </a-col>
-            <a-col flex="0 0 250px" class="y1y1x2">
+            </a-row>
+          </a-col>
+        </a-row>
+        <a-row :wrap="false" class="y1y2">
+          <a-col flex="1 1 auto">
+            <a-row :wrap="false">
+              <a-col flex="1 1 300px" class="y1y1x1">
                 <a-space>
                   <a-button type="primary" :icon="h(PlusOutlined)" @click="doShowModalAdd(true)">新建机构</a-button>
-                <a-button type="link" :icon="h(FilterOutlined)" @click="doShowDrawerFilter(true)">高级筛选</a-button>
+                </a-space>
+              </a-col>
+              <a-col flex="0 0 250px" class="y1y1x2">
+                <a-space>
                 </a-space>
               </a-col>
             </a-row>
           </a-col>
         </a-row>
-      <a-row :wrap="false" class="y1y2">
+        <a-row :wrap="false" class="y1y3">
           <a-col flex="1 1 auto">
             <a-table class="ant-table-striped" :dataSource="dataSource" :columns="columns"
               :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-tr-b' : 'table-tr-a')">
@@ -221,9 +233,11 @@ const doShowDrawerFilter = (isshow: boolean) => {
             </a-table>
           </a-col>
         </a-row>
+      </a-card>
       <ModalAdd :isShow="isShowModalAdd" @do-cancel="doShowModalAdd"></ModalAdd>
       <ModalEdit :isShow="isShowModalEdit" :record="record" @do-cancel="doShowModalEdit"></ModalEdit>
-      <DrawerFilter :isShow="isShowDrawerFilter"></DrawerFilter>
+      <DrawerFilter :isShow="isShowDrawerFilter" @do-cancel="doCancelA"></DrawerFilter>
+
     </a-col>
   </a-row>
 </template>
@@ -241,5 +255,8 @@ const doShowDrawerFilter = (isshow: boolean) => {
   .y1y2 {
     margin: 24px;
   }
+  .y1y3 {
+    margin: 24px;
+  }
 }
 </style>

yunxi-ui-admin-vben/src/views/stpagea/enterpriseCentre/branch/src/DrawerFilter.vue

@@ -4,12 +4,18 @@
 const props = defineProps({
     isShow: Boolean
 })
+const emit = defineEmits(['doClose'])
+
+// 取消
+const doClose = () => {
+    console.log('关闭')
+}
 
 </script>
 
 <template>
     <template v-if="props.isShow">
-        <a-drawer :open=true title="高级搜索" placement="right">
+        <a-drawer :open=true title="高级搜索" placement="right" @close="doClose">
             <template #title>
                 <p>Some contents...</p>
             </template>