/
classification-list.jsx
135 lines (121 loc) · 4.67 KB
/
classification-list.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/*
Copyright (c) REBUILD <https://getrebuild.com/> and its owners. All rights reserved.
rebuild is dual-licensed under commercial and open source licenses (GPLv3).
See LICENSE and COMMERCIAL in the project root for license information.
*/
$(document).ready(function () {
$('.J_add').click(() => renderRbcomp(<DlgEdit />))
renderRbcomp(<GridList />, 'list')
})
class GridList extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div className="card-list row">
{(this.state.list || []).map((item) => {
return (
<div key={'item-' + item[0]} className="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div className="card">
<div className="card-body">
<a className="text-truncate" href={'classification/' + item[0]}>{item[1]}</a>
<p className="text-muted text-truncate">{item[3]}级分类</p>
</div>
<div className="card-footer card-footer-contrast">
<div className="float-left">
<a onClick={() => this._handleEdit(item)}><i className="zmdi zmdi-edit"></i></a>
<a onClick={() => this._handleDelete(item[0])} className="danger"><i className="zmdi zmdi-delete"></i></a>
</div>
{item[2] && <div className="badge badge-warning">已禁用</div>}
<div className="clearfix"></div>
</div>
</div>
</div>
)
})}
{(!this.state.list || this.state.list.length === 0) && <div className="text-muted">尚未配置分类数据</div>}
</div>
)
}
componentDidMount() {
$.get('/admin/entityhub/classification/list', (res) => this.setState({ list: res.data }))
}
_handleEdit(item) {
renderRbcomp(<DlgEdit id={item[0]} name={item[1]} isDisabled={item[2]} />)
}
_handleDelete(dataId) {
RbAlert.create('删除前请确认此分类数据未被使用。确认删除吗?', {
type: 'danger',
confirmText: '删除',
confirm: function () {
this.disabled(true)
$.post(`/app/entity/record-delete?id=${dataId}`, (res) => {
if (res.error_code === 0) {
RbHighbar.success('分类数据已删除')
setTimeout(() => location.reload(), 500)
} else {
this.disabled(false)
RbHighbar.error(res.error_msg)
}
})
}
})
}
}
class DlgEdit extends RbFormHandler {
constructor(props) {
super(props)
this.state = { ...props }
}
render() {
return (
<RbModal title={(this.props.id ? '修改' : '添加') + '分类'} ref={(c) => this._dlg = c} disposeOnHide={true}>
<div className="form">
<div className="form-group row">
<label className="col-sm-3 col-form-label text-sm-right">分类名称</label>
<div className="col-sm-7">
<input className="form-control form-control-sm" value={this.state.name || ''} data-id="name" onChange={this.handleChange} maxLength="40" />
</div>
</div>
{this.props.id &&
<div className="form-group row">
<div className="col-sm-7 offset-sm-3">
<label className="custom-control custom-control-sm custom-checkbox custom-control-inline mb-0">
<input className="custom-control-input" type="checkbox" checked={this.state.isDisabled === true} data-id="isDisabled" onChange={this.handleChange} />
<span className="custom-control-label">是否禁用 (禁用不影响已有数据)</span>
</label>
</div>
</div>
}
<div className="form-group row footer">
<div className="col-sm-7 offset-sm-3" ref={(c) => this._btns = c}>
<button className="btn btn-primary" type="button" onClick={this.save}>确定</button>
<a className="btn btn-link" onClick={this.hide}>取消</a>
</div>
</div>
</div>
</RbModal>
)
}
save = (e) => {
e.preventDefault()
if (!this.state.name) return RbHighbar.create('请输入名称')
const _data = {
name: this.state.name,
isDisabled: this.state.isDisabled === true
}
_data.metadata = { entity: 'Classification', id: this.props.id || null }
this.disabled(true)
$.post('/app/entity/record-save', JSON.stringify(_data), (res) => {
if (res.error_code === 0) {
if (this.props.id) location.reload()
else location.href = 'classification/' + res.data.id
} else {
RbHighbar.error(res.error_msg)
this.disabled(false)
}
})
}
}