app-base-web
Version:
web development common base package.
305 lines (300 loc) • 11.1 kB
JavaScript
import React, { Suspense, lazy } from 'react';
import { Table, Row, Col, Button, Input, message } from 'antd';
import UtilString from '../../../library/util-string';
import UtilModal from '../../../library/util-modal';
import api from '../../../library/util-axios';
// 系统配置-数字字典
const title = "数字字典";
const url = "CfgDictionary/";
const FormView = lazy(() => import('./CfgDictionaryView'));
const FormEdit = lazy(() => import('./CfgDictionaryEdit'));
const FormEditBatch = lazy(() => import('./CfgDictionaryEditBatch'));
export default class CfgDictionaryList extends React.Component {
constructor(props) {
super(props);
this.state = {
params: {
app: "",
type: ""
},
data: [],
pagination: {},
loading: false,
selected: [],//Table checked
//显藏控制
showView: false,
showEdit: false,
showEditBatch: false,
//values
values: {},
};
this.columns = [{
title: "序号",
width: 50,
fixed: "left",
render: (text, record, index) => { return index + 1 }
}, {
title: "所属应用",
dataIndex: "app",
width: 100,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "字典分类",
dataIndex: "type",
width: 100,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "二级分类",
dataIndex: "subType",
width: 100
},
{
title: "字典值",
dataIndex: "value",
width: 80
},
{
title: "中文字典",
dataIndex: "zh_CN",
width: 120
},
{
title: "英文字典",
dataIndex: "en_US",
width: 120
},
// {
// title: "繁体字典",
// dataIndex: "tw_CN",
// width: 100
// },
// {
// title: "希伯来字典",
// dataIndex: "iw_IL",
// width: 100
// },
{
title: "排序号",
dataIndex: "ord",
align: "right",
width: 70
}];
}
componentDidMount() {
this.onLoad(this.state.params);
}
/*** Table ***/
onLoad(params) {
let me = this;
me.setState({ loading: true });
api.get(url + "getList", params, function (rs) {
me.setState({
loading: false,
showEdit: false,
showEditBatch: false,
params,
data: rs.data,
pagination: {
pageSizeOptions: ["20", "100", "200", "500", "1000"],
pageSize: params.pageSize || 20,
defaultPageSize: params.pageSize || 20,
showSizeChanger: true,
showQuickJumper: true,
total: rs.total,
showTotal: (total) => { return `总记录 ${total} ` }
}
});
});
}
onChange = (pagination, filters, sorter) => {
let params = this.state.params;
params.pageSize = pagination.pageSize;
params.pageIndex = pagination.current;
this.onLoad(params);
}
onSearch = (value) => {
let params = this.state.params;
params.zh_CN = value;
this.onLoad(params);
}
onAdd = () => {
let values = {};
Object.keys(this.state.values).forEach(key => values[key] = undefined);
values.app = this.state.params.app
values.type = this.state.params.type
values.subType = this.state.params.subType
this.setState({
showView: false,
showEdit: true,
showEditBatch: false,
values
});
}
onAddBatch = () => {
let values = {};
Object.keys(this.state.values).forEach(key => values[key] = undefined);
values.app = this.state.params.app
values.type = this.state.params.type
values.subType = this.state.params.subType
this.setState({
showView: false,
showEdit: false,
showEditBatch: true,
values
});
}
onCopy = () => {
let me = this;
if (me.state.selected.length == 0) {
message.error('请选择记录！');
return;
}
api.post(url + "copy", me.state.selected).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.onLoad(me.state.params || {});
} else { message.error(rs.msg); }
});
}
onView = (values) => {
this.setState({
showView: true,
loading: false,
values
});
}
onEdit = (values) => {
let me = this;
api.get(url + "getModel?id=" + values.id, {}, function (rs) {
me.setState({
showEdit: true,
showView: false,
showEditBatch: false,
values: rs.data
});
});
}
onSave = (values) => {
this.onLoad(this.state.params);
}
onDel = () => {
let me = this;
if (me.state.selected.length == 0) {
message.error('请选择记录！');
return;
}
UtilModal.confirm({
content: '确定删除？',
onOk: function () {
api.delete(url + "delete?id=" + me.state.selected).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.onLoad(me.state.params || {});
} else { message.error(rs.msg); }
});
}
})
}
onExport = () => {
let me = this;
let result = [];
let titleArr = [];
this.columns.map(function (model) {
titleArr.push(model.title);
});
result.push(titleArr);
this.state.data.map(function (rec, index) {
let record = [];
me.columns.map(function (model) {
let text = rec[model.dataIndex];
if (model.render) {
record.push(UtilString.delTag(model.render(text, rec, index)));
} else {
record.push(text)
}
});
result.push(record);
});
// UtilXlsx.write(result, title + UtilDate.getDateTime() + '.xlsx');
}
render() {
var tableCfg = {
scroll: { y: this.props.height - 210 },
size: "middle",
rowKey: "id",
columns: this.columns,
rowSelection: {
selectedRowKeys: this.state.selected,
onChange: (selectedRowKeys, selectedRows) => {
this.setState({
selected: selectedRowKeys
});
}
},
rowClassName: (record) => { return record.id === this.state.selectedRowId ? 'row-selected' : ''; },
onRow: (record) => {
return {
onClick: event => {
this.setState({ selectedRowId: record.id });
}
}
},
dataSource: this.state.data,
pagination: this.state.pagination,
loading: this.state.loading,
onChange: this.onChange
}
return <div className="app-admin">
<div className={this.state.showView || this.state.showEdit || this.state.showEditBatch ? "hide" : ""}>
<Row>
<Col className="main-title" ><i className="iconfont icon-title"></i>{title}</Col>
</Row>
<Row className="main-toolbar">
<Col xs={8}>
<Button className="btn-add" onClick={this.onAdd}><i className="iconfont icon-add"></i>录入</Button>
<Button className="btn-add" onClick={this.onAddBatch}><i className="iconfont icon-add"></i>批量录入</Button>
<Button className="btn-del" onClick={this.onDel}><i className="iconfont icon-del"></i>删除</Button>
<Button className="btn-copy" onClick={this.onCopy}><i className="iconfont icon-copy"></i>拷贝</Button>
<Button className="btn-export" onClick={this.onExport}><i className="iconfont icon-export"></i>导出</Button>
</Col>
<Col className="query-filed" xs={4}>
<Input placeholder="请输入应用名称" onChange={event => { let params = this.state.params; params.app = event.target.value.trim(); this.setState({ params }); }} />
</Col>
<Col className="query-filed" xs={4}>
<Input placeholder="请输入字典分类" onChange={event => { let params = this.state.params; params.type = event.target.value.trim(); this.setState({ params }); }} />
</Col>
<Col className="query-filed" xs={4}>
<Input placeholder="请输入二级分类" onChange={event => { let params = this.state.params; params.subType = event.target.value.trim(); this.setState({ params }); }} />
</Col>
<Col className="query-filed" xs={4}>
<Input.Search placeholder="中文字典" onSearch={value => this.onSearch(value.trim())} enterButton />
</Col>
</Row>
<Table {...tableCfg} />
</div>
<Suspense fallback={<div></div>}>
{this.state.showView ? <FormView
height={this.props.height - 140}
values={this.state.values}
onEdit={this.onEdit}
onReturn={() => { this.setState({ showView: false }) }}
/> : ""}
{this.state.showEdit ? <FormEdit
height={this.props.height - 140}
values={this.state.values}
onSave={this.onSave}
onCancel={() => { this.setState({ showEdit: false }) }}
onEditReturn={() => { this.setState({ showEdit: false, showView: true }) }}
/> : ""}
{this.state.showEditBatch ? <FormEditBatch
height={this.props.height - 140}
values={this.state.values}
onSave={this.onSave}
onCancel={() => { this.setState({ showEditBatch: false }) }}
/> : ""}
</Suspense>
</div>;
}
}