U 优化发布申请筛选条件

spug_api/apps/deploy/views.py

@@ -24,13 +24,17 @@ class RequestView(View):
             query['deploy__app_id__in'] = perms['apps']
             query['deploy__env_id__in'] = perms['envs']
         for item in DeployRequest.objects.filter(**query).annotate(
+                env_id=F('deploy__env_id'),
                 env_name=F('deploy__env__name'),
+                app_id=F('deploy__app_id'),
                 app_name=F('deploy__app__name'),
                 app_host_ids=F('deploy__host_ids'),
                 app_extend=F('deploy__extend'),
                 created_by_user=F('created_by__nickname')):
             tmp = item.to_dict()
+            tmp['env_id'] = item.env_id
             tmp['env_name'] = item.env_name
+            tmp['app_id'] = item.app_id
             tmp['app_name'] = item.app_name
             tmp['app_extend'] = item.app_extend
             tmp['extra'] = json.loads(item.extra)

spug_web/src/pages/deploy/request/Table.js

@@ -170,11 +170,18 @@ class ComTable extends React.Component {
 
   render() {
     let data = store.records;
-    if (store.f_name) {
-      data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
+    if (store.f_app_id) {
+      data = data.filter(item => item['app_id'] === store.f_app_id)
     }
-    if (store.f_app_name) {
-      data = data.filter(item => item['app_name'].toLowerCase().includes(store.f_app_name.toLowerCase()))
+    if (store.f_env_id) {
+      data = data.filter(item => item['env_id'] === store.f_env_id)
+    }
+    if (store.f_s_date) {
+      console.log(store.f_s_date, store.f_e_date);
+      data = data.filter(item => {
+        const date = item['created_at'].substr(0, 10);
+        return date >= store.f_s_date && date <= store.f_e_date
+      })
     }
     return (
       <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>

spug_web/src/pages/deploy/request/index.js

@@ -5,37 +5,64 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Input, Button } from 'antd';
+import { Button, Select, DatePicker } from 'antd';
 import { SearchForm, AuthDiv, AuthCard } from 'components';
 import SelectApp from './SelectApp';
 import Ext1Form from './Ext1Form';
 import Ext2Form from './Ext2Form';
 import Approve from './Approve';
 import ComTable from './Table';
+import envStore from 'pages/config/environment/store';
+import appStore from 'pages/config/app/store'
 import store from './store';
 
-export default observer(function () {
-  return (
-    <AuthCard auth="deploy.request.view">
-      <SearchForm>
-        <SearchForm.Item span={8} title="应用名称">
-          <Input allowClear onChange={e => store.f_app_name = e.target.value} placeholder="请输入"/>
-        </SearchForm.Item>
-        <SearchForm.Item span={8} title="申请标题">
-          <Input allowClear onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
-        </SearchForm.Item>
-        <SearchForm.Item span={8}>
-          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
-        </SearchForm.Item>
-      </SearchForm>
-      <AuthDiv auth="deploy.request.add" style={{marginBottom: 16}}>
-        <Button type="primary" icon="plus" onClick={() => store.addVisible = true}>新建发布申请</Button>
-      </AuthDiv>
-      <ComTable/>
-      {store.addVisible && <SelectApp/>}
-      {store.ext1Visible && <Ext1Form/>}
-      {store.ext2Visible && <Ext2Form/>}
-      {store.approveVisible && <Approve/>}
-    </AuthCard>
-  )
-})
+@observer
+class Index extends React.Component {
+  componentDidMount() {
+    if (envStore.records.length === 0) {
+      envStore.fetchRecords()
+    }
+    if (appStore.records.length === 0) {
+      appStore.fetchRecords()
+    }
+  }
+
+  render() {
+    return (
+      <AuthCard auth="deploy.request.view">
+        <SearchForm>
+          <SearchForm.Item span={6} title="发布环境">
+            <Select allowClear 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 onChange={v => store.f_app_id = v} placeholder="请选择">
+              {appStore.records.map(item => (
+                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
+              ))}
+            </Select>
+          </SearchForm.Item>
+          <SearchForm.Item span={8} title="申请时间">
+            <DatePicker.RangePicker onChange={store.updateDate} />
+          </SearchForm.Item>
+          <SearchForm.Item span={4}>
+            <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
+          </SearchForm.Item>
+        </SearchForm>
+        <AuthDiv auth="deploy.request.add" style={{marginBottom: 16}}>
+          <Button type="primary" icon="plus" onClick={() => store.addVisible = true}>新建发布申请</Button>
+        </AuthDiv>
+        <ComTable/>
+        {store.addVisible && <SelectApp/>}
+        {store.ext1Visible && <Ext1Form/>}
+        {store.ext2Visible && <Ext2Form/>}
+        {store.approveVisible && <Approve/>}
+      </AuthCard>
+    )
+  }
+}
+
+export default Index

spug_web/src/pages/deploy/request/store.js

@@ -19,8 +19,10 @@ class Store {
   @observable ext2Visible = false;
   @observable approveVisible = false;
 
-  @observable f_name;
-  @observable f_app_name;
+  @observable f_app_id;
+  @observable f_env_id;
+  @observable f_s_date;
+  @observable f_e_date;
 
   fetchRecords = () => {
     this.isFetching = true;
@@ -36,6 +38,16 @@ class Store {
       .finally(() => this.isLoading = false)
   };
 
+  updateDate = (data) => {
+    if (data.length === 2) {
+      this.f_s_date = data[0].format('YYYY-MM-DD');
+      this.f_e_date = data[1].format('YYYY-MM-DD')
+    } else {
+      this.f_s_date = null;
+      this.f_e_date = null
+    }
+  };
+
   showForm = (info) => {
     this.record = info;
     if (info['app_extend'] === '1') {