improve app list

pull/289/head
vapao 2021-03-08 12:46:58 +08:00
parent 807f870fb2
commit 633cd9c498
3 changed files with 80 additions and 84 deletions

View File

@ -15,46 +15,33 @@ import {
} from '@ant-design/icons';
import { Table, Modal, Tag, Divider, message } from 'antd';
import { http, hasPermission } from 'libs';
import store from './store';
import { Action, TableCard, AuthButton } from "components";
import CloneConfirm from './CloneConfirm';
import store from './store';
import envStore from 'pages/config/environment/store';
import lds from 'lodash';
@observer
class ComTable extends React.Component {
constructor(props) {
super(props);
this.cloneObj = null;
}
componentDidMount() {
store.fetchRecords();
if (envStore.records.length === 0) {
envStore.fetchRecords()
}
}
handleClone = (e, id) => {
function ComTable() {
function handleClone(e, id) {
e.stopPropagation();
this.cloneObj = null;
let cloneObj = null;
Modal.confirm({
icon: <ExclamationCircleOutlined/>,
title: '选择克隆对象',
content: <CloneConfirm onChange={v => this.cloneObj = v[1]}/>,
content: <CloneConfirm onChange={v => cloneObj = v[1]}/>,
onOk: () => {
if (!this.cloneObj) {
if (!cloneObj) {
message.error('请选择目标应用及环境')
return Promise.reject()
}
const info = JSON.parse(this.cloneObj);
const info = JSON.parse(cloneObj);
info.env_id = undefined;
store.showExtForm(null, id, info, true)
},
})
};
}
handleDelete = (e, text) => {
function handleDelete(e, text) {
e.stopPropagation();
Modal.confirm({
title: '删除确认',
@ -67,9 +54,9 @@ class ComTable extends React.Component {
})
}
})
};
}
handleDeployDelete = (text) => {
function handleDeployDelete(text) {
Modal.confirm({
title: '删除确认',
content: `删除发布配置将会影响基于该配置所创建发布申请的发布和回滚功能,确定要删除【${lds.get(envStore.idMap, `${text.env_id}.name`)}】的发布配置?`,
@ -81,20 +68,22 @@ class ComTable extends React.Component {
})
}
})
};
}
handleSort = (e, info, sort) => {
function handleSort(e, info, sort) {
e.stopPropagation();
store.fetching = true;
http.patch('/api/app/', {id: info.id, sort})
.then(store.fetchRecords, () => store.fetching = false)
};
}
expandedRowRender = (record) => {
if (!record.isLoaded) {
store.loadDeploys(record.id)
function handleExpand(expanded, row) {
if (expanded && !row.isLoaded) {
store.loadDeploys(row.id)
}
}
function expandedRowRender(record) {
return (
<Table
rowKey="id"
@ -116,64 +105,62 @@ class ComTable extends React.Component {
onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</Action.Button>
<Action.Button auth="deploy.app.edit"
onClick={e => store.showExtForm(e, record.id, info)}>编辑</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={() => handleDeployDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
)
};
render() {
return (
<TableCard
title="应用列表"
rowKey="id"
loading={store.isFetching}
dataSource={store.dataSource}
expandable={{expandRowByClick: true, expandedRowRender: this.expandedRowRender}}
onReload={store.fetchRecords}
actions={[
<AuthButton
auth="deploy.app.add"
type="primary"
icon={<PlusOutlined/>}
onClick={() => store.showForm()}>新建</AuthButton>
]}
pagination={{
showSizeChanger: true,
showLessItems: true,
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}>
<Table.Column width={80} title="排序" key="series" render={(info) => (
<div>
<UpSquareOutlined
onClick={e => this.handleSort(e, info, 'up')}
style={{cursor: 'pointer', color: '#1890ff'}}/>
<Divider type="vertical"/>
<DownSquareOutlined
onClick={e => this.handleSort(e, info, 'down')}
style={{cursor: 'pointer', color: '#1890ff'}}/>
</div>
)}/>
<Table.Column title="应用名称" dataIndex="name"/>
<Table.Column title="标识符" dataIndex="key"/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('deploy.app.edit|deploy.app.del') && (
<Table.Column width={260} title="操作" render={info => (
<Action>
<Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
<Action.Button auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</Action.Button>
</Action>
)}/>
)}
</TableCard>
)
}
return (
<TableCard
title="应用列表"
rowKey="id"
loading={store.isFetching}
dataSource={store.dataSource}
expandable={{expandedRowRender, expandRowByClick: true, onExpand: handleExpand}}
onReload={store.fetchRecords}
actions={[
<AuthButton
auth="deploy.app.add"
type="primary"
icon={<PlusOutlined/>}
onClick={() => store.showForm()}>新建</AuthButton>
]}
pagination={{
showSizeChanger: true,
showLessItems: true,
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}>
<Table.Column width={80} title="排序" key="series" render={(info) => (
<div>
<UpSquareOutlined
onClick={e => handleSort(e, info, 'up')}
style={{cursor: 'pointer', color: '#1890ff'}}/>
<Divider type="vertical"/>
<DownSquareOutlined
onClick={e => handleSort(e, info, 'down')}
style={{cursor: 'pointer', color: '#1890ff'}}/>
</div>
)}/>
<Table.Column title="应用名称" dataIndex="name"/>
<Table.Column title="标识符" dataIndex="key"/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('deploy.app.edit|deploy.app.del') && (
<Table.Column width={260} title="操作" render={info => (
<Action>
<Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => handleClone(e, info.id)}>克隆发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
<Action.Button auth="deploy.app.del" onClick={e => handleDelete(e, info)}>删除</Action.Button>
</Action>
)}/>
)}
</TableCard>
)
}
export default ComTable
export default observer(ComTable)

View File

@ -3,7 +3,7 @@
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import React, { useEffect } from 'react';
import { observer } from 'mobx-react';
import { Input } from 'antd';
import { SearchForm, AuthDiv, Breadcrumb } from 'components';
@ -13,8 +13,15 @@ import Ext1Form from './Ext1Form';
import Ext2Form from './Ext2Form';
import AddSelect from './AddSelect';
import store from './store';
import envStore from 'pages/config/environment/store';
export default observer(function () {
useEffect(() => {
store.fetchRecords();
if (envStore.records.length === 0) {
envStore.fetchRecords()
}
}, [])
return (
<AuthDiv auth="deploy.app.view">
<Breadcrumb>

View File

@ -5,6 +5,7 @@
*/
import { observable, computed, toJS } from 'mobx';
import http from 'libs/http';
import lds from 'lodash';
class Store {
@observable records = {};
@ -40,6 +41,7 @@ class Store {
.then(res => {
const tmp = {};
for (let item of res) {
Object.assign(item, lds.pick(this.records[`a${item.id}`], ['isLoaded', 'deploys']));
tmp[`a${item.id}`] = item
}
this.records = tmp