app-base-web
Version:
web development common base package.
387 lines (375 loc) • 11 kB
JavaScript
import React from 'react';
import { Table, Form, Row, Col, Button, Input, message } from 'antd';
import UtilModal from '../../../library/util-modal';
import api from '../../../library/util-axios';
// 系统配置-国际化
const title = "国际化"
const url = "CfgInternationalization/"
export default class CfgInternationalizationList extends React.Component {
constructor(props) {
super(props)
this.state = {
params: {},
data: [],
pagination: {},
loading: false,
selected: [],//Table checked
//显藏控制
showView: false,
showEdit: 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: "keyword",
width: 150,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "中文标签",
dataIndex: "zh_CN",
width: 200
},
{
title: "英文标签",
dataIndex: "en_US",
width: 200
// },
// {
// title: "繁体标签",
// dataIndex: "zh_TW",
// width: 100,
// "render": "edit",
// render: (text, record) => {
// return <a onClick={() => this.onView(record)}>{text}</a>
// }
// },
// {
// title: "以色列标签",
// dataIndex: "iw_IL",
// width: 100,
// "render": "edit",
// render: (text, record) => {
// return <a onClick={() => this.onView(record)}>{text}</a>
// }
}]
}
componentDidMount() {
this.onLoad(this.state.params)
}
/*** Table ***/
async onLoad(params) {
this.setState({loading: true})
let rs = await api.get(url + "getList", params)
let 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} `
}
}
this.setState({
loading: false,
showEdit: false,
params,
data: rs.data,
pagination
})
}
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.key = value
this.onLoad(params)
}
onAdd = () => {
let values = {}
Object.keys(this.state.values).forEach(key => values[key] = undefined)
this.setState({
showView: false,
showEdit: true,
values
})
}
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,
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)
}
})
}
})
}
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 ? "hide" : ""}>
<Row>
<Col className="main-title"><i className="iconfont icon-title"></i>{title}</Col>
</Row>
<Row className="main-toolbar">
<Col className="text-left" xs={12}>
<Button className="btn-add" onClick={this.onAdd}><i className="iconfont icon-add"></i>录入</Button>
<Button className="btn-del" onClick={this.onDel}><i className="iconfont icon-del"></i>删除</Button>
</Col>
<Col className="text-right" style={{paddingRight: "8px"}} xs={6}>
<Input placeholder="请输入应用名称" onChange={event => {
let params = this.state.params
params.app = event.target.value
this.setState({params})
}}/>
</Col>
<Col className="text-right" xs={6}>
<Input.Search placeholder="请输入关键字" onSearch={value => this.onSearch(value)} enterButton/>
</Col>
</Row>
<Table {...tableCfg} />
</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})
}}
/> : ""}
</div>
}
}
class FormView extends React.Component {
constructor(props) {
super(props)
this.state = {
...props.values
}
}
componentDidMount() {
let me = this
api.get(url + "getModel?id=" + this.state.id, {}, function (rs) {
me.setState({
...rs.data
})
})
}
render() {
return (
<Form className="form-view">
<div className="form-title">
<i>{title} - 详情</i>
<span><Button className="btn-edit" onClick={(e) => {
this.props.onEdit(this.state)
}}><i className="iconfont icon-edit"></i>编辑</Button></span>
</div>
<div className="form-content" style={{height: this.props.height}}>
<Row>
<Col xs={24}><label>所属应用</label><span>{this.state.app}</span></Col>
</Row>
<Row>
<Col xs={24}><label>关键字</label><span>{this.state.keyword}</span></Col>
</Row>
<Row>
<Col xs={24}><label>中文标签</label><span>{this.state.zh_CN}</span></Col>
</Row>
<Row>
<Col xs={24}><label>英文标签</label><span>{this.state.en_US}</span></Col>
</Row>
<Row>
<Col xs={24}><label>繁体标签</label><span>{this.state.zh_TW}</span></Col>
</Row>
<Row>
<Col xs={24}><label>以色列标签</label><span>{this.state.iw_IL}</span></Col>
</Row>
</div>
<div className="form-toolbar">
<Button className="btn-return" onClick={this.props.onReturn}><i
className="iconfont icon-return"></i>返回</Button>
</div>
</Form>
)
}
}
class FormEdit extends React.Component {
constructor(props) {
super(props)
this.state = {
...props.values
}
this.formRef = React.createRef()
}
onSave = (values) => {
let me = this
values.id = this.state.id
api.post(url + "save", values).then(function (rs) {
if (rs.success) {
message.info(rs.msg)
me.props.onSave(values)
} else {
message.error(rs.msg)
}
})
}
render() {
return (
<Form ref={this.formRef} className="form-edit" layout="vertical" onFinish={this.onSave}>
<div className="form-title">
<i> {title} - {this.state.id ? "编辑" : "录入"}</i>
{this.state.id ? <span><Button className="btn-return" onClick={this.props.onEditReturn}><i
className="iconfont icon-return"></i>返回</Button></span> : ""}
</div>
<div className="form-content" style={{height: this.props.height}}>
<Form.Item
name="app"
label="所属应用"
initialValue={this.state.app || "app"}
rules={[{
required: true,
message: '请输入所属应用'
}]}
>
<Input/>
</Form.Item>
<Form.Item
name="keyword"
label="关键字"
initialValue={this.state.keyword}
rules={[{
required: true,
message: '请输入关键字'
}]}
>
<Input/>
</Form.Item>
<Form.Item
name="zh_CN"
label="中文标签"
initialValue={this.state.zh_CN}
rules={[{
required: true,
message: '请输入中文标签'
}]}
>
<Input/>
</Form.Item>
<Form.Item
name="en_US"
label="中文标签"
initialValue={this.state.en_US}
>
<Input/>
</Form.Item>
<Form.Item
name="zh_TW"
label="繁体标签"
initialValue={this.state.zh_TW}
>
<Input/>
</Form.Item>
<Form.Item
name="iw_IL"
label="以色列标签"
initialValue={this.state.iw_IL}
>
<Input/>
</Form.Item>
</div>
<div className="form-toolbar">
<Button className="btn-cancel" onClick={this.props.onCancel}><i
className="iconfont icon-cancel"></i>取消</Button>
<Button className="btn-submit" htmlType="submit"><i className="iconfont icon-submit"></i>提交</Button>
</div>
</Form>
)
}
}