mirror of https://github.com/openspug/spug
improve code
vapao
parent
27868ac32e
commit
3feaf6bb91
|
|
@ -12,20 +12,8 @@ import { Action, AuthButton, TableCard } from 'components';
|
|||
import styles from './index.module.less';
|
||||
import store from './store';
|
||||
|
||||
@observer
|
||||
class ComTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
store.fetchRecords()
|
||||
}
|
||||
|
||||
columns = [{
|
||||
function ComTable() {
|
||||
const columns = [{
|
||||
title: '申请标题',
|
||||
render: info => (
|
||||
<div>
|
||||
|
|
@ -98,14 +86,13 @@ class ComTable extends React.Component {
|
|||
case '-3':
|
||||
return <Action>
|
||||
<Action.Button auth="deploy.request.do" onClick={() => store.readConsole(info)}>查看</Action.Button>
|
||||
<Popconfirm title="确认要执行该发布申请？" onConfirm={e => this.handleCCC(e, info)}>
|
||||
<Popconfirm title="确认要执行该发布申请？" onConfirm={e => handleDeploy(e, info)}>
|
||||
<Action.Button auth="deploy.request.do">发布</Action.Button>
|
||||
</Popconfirm>
|
||||
<Action.Button
|
||||
auth="deploy.request.do"
|
||||
disabled={info.type === '2'}
|
||||
loading={this.state.loading}
|
||||
onClick={() => this.handleRollback(info)}>回滚</Action.Button>
|
||||
onClick={() => handleRollback(info)}>回滚</Action.Button>
|
||||
</Action>;
|
||||
case '3':
|
||||
return <Action>
|
||||
|
|
@ -115,30 +102,27 @@ class ComTable extends React.Component {
|
|||
<Action.Button
|
||||
auth="deploy.request.do"
|
||||
disabled={info.type === '2'}
|
||||
loading={this.state.loading}
|
||||
onClick={() => this.handleRollback(info)}>回滚</Action.Button>
|
||||
onClick={() => handleRollback(info)}>回滚</Action.Button>
|
||||
</Action>;
|
||||
case '-1':
|
||||
return <Action>
|
||||
<Action.Button auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
|
||||
<Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
|
||||
<Action.Button auth="deploy.request.del" onClick={() => handleDelete(info)}>删除</Action.Button>
|
||||
</Action>;
|
||||
case '0':
|
||||
return <Action>
|
||||
<Action.Button auth="deploy.request.approve" onClick={() => store.showApprove(info)}>审核</Action.Button>
|
||||
<Action.Button auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
|
||||
<Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
|
||||
<Action.Button auth="deploy.request.del" onClick={() => handleDelete(info)}>删除</Action.Button>
|
||||
</Action>;
|
||||
case '1':
|
||||
return <Action>
|
||||
<Action.Button auth="deploy.request.do" onClick={() => store.showConsole(info)}>发布</Action.Button>
|
||||
<Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
|
||||
<Action.Button auth="deploy.request.del" onClick={() => handleDelete(info)}>删除</Action.Button>
|
||||
</Action>;
|
||||
case '2':
|
||||
return <Action>
|
||||
<Action.Link
|
||||
auth="deploy.request.do"
|
||||
to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</Action.Link>
|
||||
<Action.Button auth="deploy.request.do" onClick={() => store.readConsole(info)}>查看</Action.Button>
|
||||
</Action>;
|
||||
default:
|
||||
return null
|
||||
|
|
@ -146,8 +130,7 @@ class ComTable extends React.Component {
|
|||
}
|
||||
}];
|
||||
|
||||
handleRollback = (info) => {
|
||||
this.setState({loading: true});
|
||||
function handleRollback(info) {
|
||||
http.put('/api/deploy/request/', {id: info.id, action: 'check'})
|
||||
.then(res => {
|
||||
Modal.confirm({
|
||||
|
|
@ -162,10 +145,9 @@ class ComTable extends React.Component {
|
|||
}
|
||||
})
|
||||
})
|
||||
.finally(() => this.setState({loading: false}))
|
||||
};
|
||||
}
|
||||
|
||||
handleDelete = (info) => {
|
||||
function handleDelete(info) {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
content: `确定要删除【${info['name']}】?`,
|
||||
|
|
@ -177,9 +159,9 @@ class ComTable extends React.Component {
|
|||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
handleCCC = (e, info) => {
|
||||
function handleDeploy(e, info) {
|
||||
const right = document.body.clientWidth - 25 - e.target.getBoundingClientRect().x;
|
||||
const bottom = document.body.clientHeight - 40 - e.target.getBoundingClientRect().y;
|
||||
store.box.setAttribute('style', `display: block; bottom: ${bottom}px; right: ${right}px;`);
|
||||
|
|
@ -194,59 +176,37 @@ class ComTable extends React.Component {
|
|||
|
||||
}
|
||||
|
||||
render() {
|
||||
let data = store.records;
|
||||
if (store.f_app_id) {
|
||||
data = data.filter(item => item['app_id'] === store.f_app_id)
|
||||
}
|
||||
if (store.f_env_id) {
|
||||
data = data.filter(item => item['env_id'] === store.f_env_id)
|
||||
}
|
||||
if (store.f_s_date) {
|
||||
data = data.filter(item => {
|
||||
const date = item['created_at'].substr(0, 10);
|
||||
return date >= store.f_s_date && date <= store.f_e_date
|
||||
})
|
||||
}
|
||||
if (store.f_status !== 'all') {
|
||||
if (store.f_status === '99') {
|
||||
data = data.filter(item => ['-1', '2'].includes(item['status']))
|
||||
} else {
|
||||
data = data.filter(item => item['status'] === store.f_status)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<TableCard
|
||||
rowKey="id"
|
||||
title="申请列表"
|
||||
loading={store.isFetching}
|
||||
dataSource={data}
|
||||
onReload={store.fetchRecords}
|
||||
actions={[
|
||||
<AuthButton
|
||||
auth="deploy.request.add"
|
||||
type="primary"
|
||||
icon={<PlusOutlined/>}
|
||||
onClick={() => store.addVisible = true}>新建申请</AuthButton>,
|
||||
<Radio.Group value={store.f_status} onChange={e => store.f_status = e.target.value}>
|
||||
<Radio.Button value="all">全部({store.counter['all'] || 0})</Radio.Button>
|
||||
<Radio.Button value="0">待审核({store.counter['0'] || 0})</Radio.Button>
|
||||
<Radio.Button value="1">待发布({store.counter['1'] || 0})</Radio.Button>
|
||||
<Radio.Button value="3">发布成功({store.counter['3'] || 0})</Radio.Button>
|
||||
<Radio.Button value="-3">发布异常({store.counter['-3'] || 0})</Radio.Button>
|
||||
<Radio.Button value="99">其他({store.counter['99'] || 0})</Radio.Button>
|
||||
</Radio.Group>
|
||||
]}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showLessItems: true,
|
||||
hideOnSinglePage: true,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10', '20', '50', '100']
|
||||
}}
|
||||
columns={this.columns}/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<TableCard
|
||||
rowKey="id"
|
||||
title="申请列表"
|
||||
columns={columns}
|
||||
loading={store.isFetching}
|
||||
dataSource={store.dataSource}
|
||||
onReload={store.fetchRecords}
|
||||
actions={[
|
||||
<AuthButton
|
||||
auth="deploy.request.add"
|
||||
type="primary"
|
||||
icon={<PlusOutlined/>}
|
||||
onClick={() => store.addVisible = true}>新建申请</AuthButton>,
|
||||
<Radio.Group value={store.f_status} onChange={e => store.f_status = e.target.value}>
|
||||
<Radio.Button value="all">全部({store.counter['all'] || 0})</Radio.Button>
|
||||
<Radio.Button value="0">待审核({store.counter['0'] || 0})</Radio.Button>
|
||||
<Radio.Button value="1">待发布({store.counter['1'] || 0})</Radio.Button>
|
||||
<Radio.Button value="3">发布成功({store.counter['3'] || 0})</Radio.Button>
|
||||
<Radio.Button value="-3">发布异常({store.counter['-3'] || 0})</Radio.Button>
|
||||
<Radio.Button value="99">其他({store.counter['99'] || 0})</Radio.Button>
|
||||
</Radio.Group>
|
||||
]}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
showLessItems: true,
|
||||
hideOnSinglePage: true,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
pageSizeOptions: ['10', '20', '50', '100']
|
||||
}}/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ComTable
|
||||
export default observer(ComTable)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* Copyright (c) <spug.dev@gmail.com>
|
||||
* Released under the AGPL-3.0 License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { Form, Select, DatePicker, Modal, Input, Row, Col, message } from 'antd';
|
||||
|
|
@ -20,26 +20,17 @@ import store from './store';
|
|||
import moment from 'moment';
|
||||
import styles from './index.module.less';
|
||||
|
||||
@observer
|
||||
class Index extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expire: undefined,
|
||||
count: ''
|
||||
}
|
||||
}
|
||||
function Index() {
|
||||
const [expire, setExpire] = useState();
|
||||
const [count, setCount] = useState();
|
||||
|
||||
componentDidMount() {
|
||||
if (envStore.records.length === 0) {
|
||||
envStore.fetchRecords()
|
||||
}
|
||||
if (appStore.records.length === 0) {
|
||||
appStore.fetchRecords()
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
store.fetchRecords()
|
||||
if (envStore.records.length === 0) envStore.fetchRecords()
|
||||
if (appStore.records.length === 0) appStore.fetchRecords()
|
||||
}, [])
|
||||
|
||||
handleBatchDel = () => {
|
||||
function handleBatchDel() {
|
||||
Modal.confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
title: '批量删除发布申请',
|
||||
|
|
@ -47,16 +38,15 @@ class Index extends React.Component {
|
|||
<Form layout="vertical" style={{marginTop: 24}}>
|
||||
<Form.Item label="截止日期 :" help={<div>将删除截止日期<span style={{color: 'red'}}>之前</span>的所有发布申请记录。</div>}>
|
||||
<DatePicker style={{width: 200}} placeholder="请输入"
|
||||
onChange={val => this.setState({expire: val.format('YYYY-MM-DD')})}/>
|
||||
onChange={val => setExpire(val.format('YYYY-MM-DD'))}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="保留记录 :" help="每个应用每个环境仅保留最新的N条发布申请，优先级高于截止日期">
|
||||
<Input allowClear style={{width: 200}} placeholder="请输入保留个数"
|
||||
onChange={e => this.setState({count: e.target.value})}/>
|
||||
onChange={e => setCount(e.target.value)}/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
),
|
||||
onOk: () => {
|
||||
const {expire, count} = this.state;
|
||||
return http.delete('/api/deploy/request/', {params: {expire, count}})
|
||||
.then(res => {
|
||||
message.success(`成功删除${res}条记录`);
|
||||
|
|
@ -64,77 +54,75 @@ class Index extends React.Component {
|
|||
})
|
||||
},
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<AuthDiv auth="deploy.request.view">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用发布</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>发布申请</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<SearchForm>
|
||||
<SearchForm.Item span={6} title="发布环境">
|
||||
<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
|
||||
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>
|
||||
))}
|
||||
</Select>
|
||||
</SearchForm.Item>
|
||||
<SearchForm.Item span={8} title="申请时间">
|
||||
<DatePicker.RangePicker
|
||||
value={store.f_s_date ? [moment(store.f_s_date), moment(store.f_e_date)] : undefined}
|
||||
onChange={store.updateDate}/>
|
||||
</SearchForm.Item>
|
||||
<SearchForm.Item span={4} style={{textAlign: 'right'}}>
|
||||
<AuthButton
|
||||
auth="deploy.request.del"
|
||||
type="danger"
|
||||
icon={<DeleteOutlined/>}
|
||||
onClick={this.handleBatchDel}>批量删除</AuthButton>
|
||||
</SearchForm.Item>
|
||||
</SearchForm>
|
||||
<ComTable/>
|
||||
<AppSelector
|
||||
visible={store.addVisible}
|
||||
onCancel={() => store.addVisible = false}
|
||||
onSelect={store.confirmAdd}/>
|
||||
{store.ext1Visible && <Ext1Form/>}
|
||||
{store.ext2Visible && <Ext2Form/>}
|
||||
{store.approveVisible && <Approve/>}
|
||||
{store.tabs.length > 0 && (
|
||||
<Row gutter={12} className={styles.miniConsole}>
|
||||
{store.tabs.map(item => (
|
||||
<Col key={item.id}>
|
||||
<Ext1Console request={item}/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
<div ref={el => store.box = el} id='floatBox' className={styles.floatBox}/>
|
||||
</AuthDiv>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthDiv auth="deploy.request.view">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>首页</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>应用发布</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>发布申请</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<SearchForm>
|
||||
<SearchForm.Item span={6} title="发布环境">
|
||||
<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
|
||||
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>
|
||||
))}
|
||||
</Select>
|
||||
</SearchForm.Item>
|
||||
<SearchForm.Item span={8} title="申请时间">
|
||||
<DatePicker.RangePicker
|
||||
value={store.f_s_date ? [moment(store.f_s_date), moment(store.f_e_date)] : undefined}
|
||||
onChange={store.updateDate}/>
|
||||
</SearchForm.Item>
|
||||
<SearchForm.Item span={4} style={{textAlign: 'right'}}>
|
||||
<AuthButton
|
||||
auth="deploy.request.del"
|
||||
type="danger"
|
||||
icon={<DeleteOutlined/>}
|
||||
onClick={handleBatchDel}>批量删除</AuthButton>
|
||||
</SearchForm.Item>
|
||||
</SearchForm>
|
||||
<ComTable/>
|
||||
<AppSelector
|
||||
visible={store.addVisible}
|
||||
onCancel={() => store.addVisible = false}
|
||||
onSelect={store.confirmAdd}/>
|
||||
{store.ext1Visible && <Ext1Form/>}
|
||||
{store.ext2Visible && <Ext2Form/>}
|
||||
{store.approveVisible && <Approve/>}
|
||||
{store.tabs.length > 0 && (
|
||||
<Row gutter={12} className={styles.miniConsole}>
|
||||
{store.tabs.map(item => (
|
||||
<Col key={item.id}>
|
||||
<Ext1Console request={item}/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
<div ref={el => store.box = el} id='floatBox' className={styles.floatBox}/>
|
||||
</AuthDiv>
|
||||
)
|
||||
}
|
||||
|
||||
export default Index
|
||||
export default observer(Index)
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
* Copyright (c) <spug.dev@gmail.com>
|
||||
* Released under the AGPL-3.0 License.
|
||||
*/
|
||||
import { observable } from "mobx";
|
||||
import { observable, computed } from "mobx";
|
||||
import http from 'libs/http';
|
||||
import lds from 'lodash';
|
||||
|
||||
|
|
@ -19,6 +19,7 @@ class Store {
|
|||
@observable ext1Visible = false;
|
||||
@observable ext2Visible = false;
|
||||
@observable approveVisible = false;
|
||||
@observable rbVisible = false;
|
||||
|
||||
@observable f_status = 'all';
|
||||
@observable f_app_id;
|
||||
|
|
@ -26,6 +27,24 @@ class Store {
|
|||
@observable f_s_date;
|
||||
@observable f_e_date;
|
||||
|
||||
@computed get dataSource() {
|
||||
let data = this.records;
|
||||
if (this.f_app_id) data = data.filter(x => x.app_id === this.f_app_id)
|
||||
if (this.f_env_id) data = data.filter(x => x.env_id === this.f_env_id)
|
||||
if (this.f_s_date) data = data.filter(x => {
|
||||
const date = x.created_at.substr(0, 10);
|
||||
return date >= this.f_s_date && date <= this.f_e_date
|
||||
})
|
||||
if (this.f_status !== 'all') {
|
||||
if (this.f_status === '99') {
|
||||
data = data.filter(x => ['-1', '2'].includes(x.status))
|
||||
} else {
|
||||
data = data.filter(x => x.status === this.f_status)
|
||||
}
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
fetchRecords = () => {
|
||||
this.isFetching = true;
|
||||
http.get('/api/deploy/request/')
|
||||
|
|
|
|||
Loading…
Reference in New Issue