From 73d859aadb3a44edef571e205d6b316d33706ebf Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Mon, 8 Mar 2021 11:29:11 +0800
Subject: [PATCH] improve component SearchForm

---
 spug_web/src/components/index.module.less  | 60 ++++++++++++----------
 spug_web/src/libs/functools.js             |  6 ++-
 spug_web/src/pages/deploy/request/index.js | 20 ++++++--
 3 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/spug_web/src/components/index.module.less b/spug_web/src/components/index.module.less
index 8a98153..1543071 100644
--- a/spug_web/src/components/index.module.less
+++ b/spug_web/src/components/index.module.less
@@ -3,45 +3,49 @@
   background-color: #fff;
   border-radius: 2px;
   margin-bottom: 16px;
-}
 
-.searchForm :global(.ant-form-item) {
-  display: flex;
-}
+  :global(.ant-form-item) {
+    display: flex;
+  }
 
-.searchForm :global(.ant-form-item-control-wrapper) {
-  flex: 1;
-}
+  :global(.ant-form-item-control-wrapper) {
+    flex: 1;
+  }
 
-.searchForm :global(.ant-form-item-label) {
-  padding-right: 8px;
+  :global(.ant-form-item-label) {
+    padding-right: 8px;
+  }
+
+  :global(.ant-form-item-control) {
+    overflow: hidden;
+  }
 }
 
 .statisticsCard {
   position: relative;
   text-align: center;
-}
 
-.statisticsCard span {
-  color: rgba(0, 0, 0, .45);
-  display: inline-block;
-  line-height: 22px;
-  margin-bottom: 4px;
-}
+  span {
+    color: rgba(0, 0, 0, .45);
+    display: inline-block;
+    line-height: 22px;
+    margin-bottom: 4px;
+  }
 
-.statisticsCard p {
-  font-size: 32px;
-  line-height: 32px;
-  margin: 0;
-}
+  p {
+    font-size: 32px;
+    line-height: 32px;
+    margin: 0;
+  }
 
-.statisticsCard em {
-  background-color: #e8e8e8;
-  position: absolute;
-  height: 56px;
-  width: 1px;
-  top: 0;
-  right: 0;
+  em {
+    background-color: #e8e8e8;
+    position: absolute;
+    height: 56px;
+    width: 1px;
+    top: 0;
+    right: 0;
+  }
 }
 
 .tableCard {
diff --git a/spug_web/src/libs/functools.js b/spug_web/src/libs/functools.js
index fd01bea..ebf5bbf 100644
--- a/spug_web/src/libs/functools.js
+++ b/spug_web/src/libs/functools.js
@@ -79,7 +79,11 @@ export function human_time(date) {
   const hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
   const minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
   const second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
-  return `${human_date()} ${hour}:${minute}:${second}`
+  return `${hour}:${minute}:${second}`
+}
+
+export function human_datetime(date) {
+  return `${human_date(date)} ${human_time(date)}`
 }
 
 // 生成唯一id
diff --git a/spug_web/src/pages/deploy/request/index.js b/spug_web/src/pages/deploy/request/index.js
index 4137f3d..dedb87c 100644
--- a/spug_web/src/pages/deploy/request/index.js
+++ b/spug_web/src/pages/deploy/request/index.js
@@ -12,9 +12,9 @@ import Ext1Form from './Ext1Form';
 import Ext2Form from './Ext2Form';
 import Approve from './Approve';
 import ComTable from './Table';
-import http from 'libs/http';
+import { http, includes } from 'libs';
 import envStore from 'pages/config/environment/store';
-import appStore from 'pages/config/app/store'
+import appStore from 'pages/config/app/store';
 import store from './store';
 import moment from 'moment';
 
@@ -74,14 +74,26 @@ class Index extends React.Component {
         </Breadcrumb>
         <SearchForm>
           <SearchForm.Item span={6} title="发布环境">
-            <Select allowClear value={store.f_env_id} onChange={v => store.f_env_id = v} placeholder="请选择">
+            <Select
+              allowClear
+              showSearch
+              value={store.f_env_id}
+              filterOption={(i, o) => includes(o.children, i)}
+              onChange={v => store.f_env_id = v}
+              placeholder="请选择">
               {envStore.records.map(item => (
                 <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
               ))}
             </Select>
           </SearchForm.Item>
           <SearchForm.Item span={6} title="应用名称">
-            <Select allowClear value={store.f_app_id} onChange={v => store.f_app_id = v} placeholder="请选择">
+            <Select
+              allowClear
+              showSearch
+              value={store.f_app_id}
+              filterOption={(i, o) => includes(o.children, i)}
+              onChange={v => store.f_app_id = v}
+              placeholder="请选择">
               {appStore.records.map(item => (
                 <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
               ))}