From f069dc81971279d411a33aba9d02b957aa4c5372 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E8=90=BD=28YangLei=29?= <lzi.love@icloud.com>
Date: Fri, 9 Jul 2021 20:06:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/more_item.vue            | 20 +++++++++++++--
 src/components/table/table.vue                | 20 +++------------
 src/pages/frame/layouts/PageLayout.vue        |  6 ++---
 .../xunjian/task_managment/center/detail.vue  | 10 ++++----
 .../xunjian/task_managment/center/index.vue   | 25 +++++++++++++------
 5 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/components/table/more_item.vue b/src/components/table/more_item.vue
index b471524..fdcb984 100644
--- a/src/components/table/more_item.vue
+++ b/src/components/table/more_item.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <label>{{ label }}</label>
+    <div class="tw-flex tw-items-center tw-flex-1 tw-pr-3" :class="$style.container">
+        <label :class="$style.label">{{ label }}</label>
         <slot />
     </div>
 </template>
@@ -12,3 +12,19 @@ export default {
     },
 };
 </script>
+
+<style module lang="less">
+.container:last-child {
+    min-width: 250px;
+}
+.label {
+    color: rgba(0, 0, 0, 0.85);
+    width: 6em;
+    text-align: right;
+    margin-right: 1em;
+
+    &::after {
+        content: ':';
+    }
+}
+</style>
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 456ac1f..1d3f085 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -1,9 +1,9 @@
 <template>
-    <div>
+    <div :style="`min-width: ${width}px`" class="tw-overflow-x-auto">
         <my-card v-if="$scopedSlots.search" class="tw-mb-2.5">
-            <a-form-model :model="queryForm" layout="inline">
+            <div class="tw-flex">
                 <slot name="search" :query="queryForm" />
-            </a-form-model>
+            </div>
 
             <div class="tw-text-right tw-mt-2">
                 <a-space>
@@ -97,6 +97,7 @@ export default {
         },
         noPadding: Boolean,
         scroll: Object,
+        width: { type: Number, default: 900 },
     },
 
     data() {
@@ -228,20 +229,7 @@ export default {
     padding: 15px 0 0 0;
 
     > div {
-        display: flex;
-        align-items: center;
         @apply tw-mb-3;
-
-        > label {
-            color: rgba(0, 0, 0, 0.85);
-            width: 6em;
-            text-align: right;
-            margin-right: 1em;
-
-            &::after {
-                content: ':';
-            }
-        }
     }
 }
 </style>
diff --git a/src/pages/frame/layouts/PageLayout.vue b/src/pages/frame/layouts/PageLayout.vue
index 3a39e94..68cc572 100644
--- a/src/pages/frame/layouts/PageLayout.vue
+++ b/src/pages/frame/layouts/PageLayout.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="page-layout">
+    <div class="page-layout tw-overflow-x-auto">
         <page-header
             ref="pageHeader"
             :style="`margin-top: ${multiPage ? 0 : -24}px`"
@@ -79,11 +79,11 @@ export default {
         ...mapMutations('settingModule', ['correctPageMinHeight']),
         getRouteBreadcrumb() {
             const path = this.$route.path;
-            const currentMenu = this.menuList.find(m => m.menuUrl === path);
+            const currentMenu = this.menuList.find((m) => m.menuUrl === path);
             let parentMenuId = currentMenu.parentMenuId;
             const breadcrumb = [currentMenu.menuName];
             while (parentMenuId !== 0) {
-                const parentMenu = this.menuList.find(m => m.menuId === parentMenuId);
+                const parentMenu = this.menuList.find((m) => m.menuId === parentMenuId);
                 breadcrumb.unshift(parentMenu.menuName);
                 parentMenuId = parentMenu.parentMenuId;
             }
diff --git a/src/pages/xunjian/task_managment/center/detail.vue b/src/pages/xunjian/task_managment/center/detail.vue
index 99a4737..5291c08 100644
--- a/src/pages/xunjian/task_managment/center/detail.vue
+++ b/src/pages/xunjian/task_managment/center/detail.vue
@@ -1,23 +1,23 @@
 <template>
     <Wraper :hidden="hidden" noFooter>
-        <Table :url="tableUrl" rowKey="taskId" noPadding :buttons="buttons" :scroll="scroll">
+        <Table :url="tableUrl" rowKey="taskId" noPadding :buttons="buttons" :scroll="scroll" :width="600">
             <template #search="{ query }">
-                <a-form-model-item label="开始时间">
+                <MoreItem label="开始时间">
                     <a-date-picker
                         class="tw-w-full"
                         show-time
                         v-model="query.startTime"
                         valueFormat="YYYY-MM-DD HH:mm:ss"
                     />
-                </a-form-model-item>
-                <a-form-model-item label="结束时间">
+                </MoreItem>
+                <MoreItem label="结束时间">
                     <a-date-picker
                         class="tw-w-full"
                         show-time
                         v-model="query.endTime"
                         valueFormat="YYYY-MM-DD HH:mm:ss"
                     />
-                </a-form-model-item>
+                </MoreItem>
             </template>
 
             <template #moreSearch="{ query }">
diff --git a/src/pages/xunjian/task_managment/center/index.vue b/src/pages/xunjian/task_managment/center/index.vue
index c722128..d9cb0a3 100644
--- a/src/pages/xunjian/task_managment/center/index.vue
+++ b/src/pages/xunjian/task_managment/center/index.vue
@@ -9,31 +9,31 @@
         :drawerWidth="800"
     >
         <template #search="{ query }">
-            <a-form-model-item label="开始时间">
+            <MoreItem label="开始时间">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.startTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </a-form-model-item>
-            <a-form-model-item label="结束时间">
+            </MoreItem>
+
+            <MoreItem label="结束时间">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.endTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </a-form-model-item>
-            <a-form-model-item label="地区">
+            </MoreItem>
+            <MoreItem label="地区">
                 <RequestSelect
-                    style="width: 220px"
                     :request="getAreaListDataApi"
                     v-model="query.regionId"
                     labelFiled="regionName"
                     valueFiled="regionId"
                 />
-            </a-form-model-item>
+            </MoreItem>
         </template>
 
         <template #moreSearch="{ query }">
@@ -157,7 +157,16 @@ import Detail from './detail.vue';
 import MoreItem from '@/components/table/more_item.vue';
 
 export default {
-    components: { Table, Form, RequestSelect, UrlSelect, SearchSelect, Progress, Detail, MoreItem },
+    components: {
+        Table,
+        Form,
+        RequestSelect,
+        UrlSelect,
+        SearchSelect,
+        Progress,
+        Detail,
+        MoreItem,
+    },
     data() {
         return {
             getAreaListDataApi,
-- 
GitLab