基于 react class component 编写和使用了 ant design UI 库，通过配置的形式直接实现一个管理页面的增删改查以及分页功能，能够减少大量的逻辑代码，不由得感慨面向对象编程的伟大，以及 django 这个框架设计的精妙。
一个页面的实现大致如下所示：
import { RegisterRoute } from '@src/components/router'
import { ModelForm } from '@src/core/model/form'
import { RemoteDataChoiceWidget } from '@src/core/model/widget'
import { Display, ModelAdmin } from '@src/core/template/model-admin'
import { TemplateTablePagination } from '@src/core/template/template-table'
import { UploadWidget } from '@src/core/widgets/upload-widget'
import { $fetch } from '@src/utils/network'
import { Switch } from 'antd'
class SouceChoiceWidget extends RemoteDataChoiceWidget {
type = 1
async getRemoteData(): Promise {
const result = await $fetch.post('investment/lead/way/list', {
type: this.type
})
return result.map(val => {
return {
label: val.name,
value: val.id
}
})
}
}
class ClueSourceChoiceWidget extends SouceChoiceWidget {
type = 0
}
class Form extends ModelForm {
name = ModelForm.InputField({
verboseName: '线索名称',
})
contactPerson = ModelForm.InputField({
verboseName: '联系人',
})
contactTel = ModelForm.PhoneNumberField({
verboseName: '联系电话',
})
fromType = ModelForm.InputField({
verboseName: '线索来源',
widget: ClueSourceChoiceWidget
})
wayType = ModelForm.InputField({
verboseName: '渠道类型',
widget: SouceChoiceWidget
})
file = ModelForm.InputField({
verboseName: '附件',
widget: UploadWidget
})
}
interface AppInfo {
id: number;
parkId: number;
appName: string;
appCate: number;
appUrl: string;
isDisabled: number;
createAt: string;
createBy: string;
}
@RegisterRoute('clue/list')
export default class App extends ModelAdmin {
filters: string[] = ['name']
listDisplay: string[] = [
'name',
'type',
'disabled',
'action',
]
getModel(): new () => ModelForm {
return Form
}
async getTableDataSource(pagination: TemplateTablePagination, filters?: any) {
const data = Object.assign({}, filters || {}, {
pageSize: pagination.pageSize,
pageNo: pagination.current,
})
const result = await $fetch.post>(
'/smart-park-invest/investmentLead/page',
data
)
return result
}
async onFormAddSubmit(
composeValues: any,
formValues: any
) {
await $fetch.post('/smart-park-invest/investment/lead/way/add', {
...formValues
})
}
async onFormUpdateSubmit(
composeValues: any,
formValues: any,
initialValues: any
) {
await $fetch.post('/smart-park-invest/investment/lead/way/update', {
...formValues,
id: initialValues.id,
})
}
getaddFormInitialValues() {
return null
}
async getUpdateFormInitialValues(record: any) {
return record
}
async onConfirmDeleteRow(record: any) {
await $fetch.post(`/smart-park-invest/investment/lead/way/delete/${record.id}`)
}
@Display({
name: 'disabled',
title: '启用',
})
displayDisabled(_: any, record: any) {
return (
this.setAppEnabel(record, val)}
/>
)
}
@Display({
name: 'action',
title: '操作',
})
displayAction(_: any, record: any) {
return (
this.modifyRowData(record)}>
编辑
this.deleteRowData(record)}>
删除
)
}
async setAppEnabel(record: any, bool: boolean) {
await $fetch.post('/smart-park-invest/investment/lead/way/update', {
id: record.id,
enable: bool
})
this.notifyDataChange()
}
}
虽然 react 现在都在推崇 hooks 编程，甚至官方文档都不再教学 class 组件，但 class component 在有些场景还是很好用的。
Any, modelform, record, string
