|
|
@@ -0,0 +1,248 @@
|
|
|
+import React from 'react'
|
|
|
+import { connect } from 'dva'
|
|
|
+import { Divider, message, Popconfirm } from 'antd'
|
|
|
+import { FilterTable } from 'wptpc-design'
|
|
|
+import s from './data.less'
|
|
|
+import Edit from './components/Edit'
|
|
|
+import { dc } from '@/conf/config'
|
|
|
+
|
|
|
+const apiUrl = `${dc}/dc/web/get-sub-rule-list`
|
|
|
+
|
|
|
+@connect(({ loading }) => ({
|
|
|
+ // 添加或者编辑接口触发的loading属性，可以用于控制接口请求阶段让对话框的”确定“按钮不可点击
|
|
|
+ actionLoading: loading.effects['template/_addItem'] || loading.effects['ugc/_editItem']
|
|
|
+}))
|
|
|
+class Index extends React.PureComponent {
|
|
|
+ state = {
|
|
|
+ // 这两个state字段用来进行表单显示、隐藏控制以及表单里面的数据
|
|
|
+ showModal: false,
|
|
|
+ params: {}
|
|
|
+ }
|
|
|
+
|
|
|
+ // filtertable的搜索项配置
|
|
|
+ filterSetting = {
|
|
|
+ isClearSearch: true,
|
|
|
+ // 这个数组里面的每一个元素就是一个搜索项
|
|
|
+ formFields: [
|
|
|
+ // { label: '账户ID:', type: 'input', key: 'developerId', placeholder: '请输入账户ID' },
|
|
|
+ // {
|
|
|
+ // label: '性别:',
|
|
|
+ // type: 'select',
|
|
|
+ // option: [
|
|
|
+ // { value: '0', label: '不限' },
|
|
|
+ // { value: '1', label: '男' },
|
|
|
+ // { value: '2', label: '女' }
|
|
|
+ // ],
|
|
|
+ // key: 'sex'
|
|
|
+ // },
|
|
|
+ // { label: '出生日期:', type: 'datePicker', key: 'date' }
|
|
|
+ ],
|
|
|
+ // 在接口请求前，可以修改给接口的入参
|
|
|
+ beforeSearchFunc: params => {
|
|
|
+ params.pageSize = params.pageNum
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // filtertable的列表配置
|
|
|
+ tableSetting = {
|
|
|
+ rowKey: 'id',
|
|
|
+ pagination: {
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ columnConfig: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '订阅描述',
|
|
|
+ dataIndex: 'description'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '订阅主题',
|
|
|
+ dataIndex: 'topic'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '回调地址',
|
|
|
+ dataIndex: 'url'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'订阅数据库',
|
|
|
+ dataIndex:'subDb'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'订阅数据表',
|
|
|
+ dataIndex:'subTable'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'订阅事件',
|
|
|
+ dataIndex:'subEvent'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'订阅字段',
|
|
|
+ dataIndex:'subFields'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'过滤条件',
|
|
|
+ dataIndex:'subFilter'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'回调参数',
|
|
|
+ dataIndex:'params'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'actions',
|
|
|
+ // 所有需要弹窗操作的都可以用编辑的逻辑；所有不需要弹窗的操作，比如上架、发布等，都可以用”删除“的逻辑
|
|
|
+ render: (text, record) => <span><a onClick={() => this.editItem(record)}>编辑</a>
|
|
|
+ <Divider type="vertical"/><a onClick={()=> this.editJob(record)}>新增统计任务</a><Divider
|
|
|
+ type="vertical"/><Popconfirm
|
|
|
+ title="确定删除"
|
|
|
+ onConfirm={() => this.delItem(record)}>
|
|
|
+ <a>删除</a>
|
|
|
+ </Popconfirm><Divider type="vertical"/><Popconfirm
|
|
|
+ title="确定执行"
|
|
|
+ onConfirm={() => this.execItem(record)}>
|
|
|
+ <a>执行</a>
|
|
|
+ </Popconfirm></span>
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 通过这个函数可以获取列表的刷新的函数，编辑、删除后可以用它来刷新列表
|
|
|
+ getRefresh: refresh => {
|
|
|
+ this.refresh = refresh
|
|
|
+ },
|
|
|
+ // 筛选和列表的中间位置如果有批量操作按钮，可以放在这个位置
|
|
|
+ batchBtns: [
|
|
|
+ {
|
|
|
+ label: '创建',
|
|
|
+ type: 'primary',
|
|
|
+ onClick: () => this.editItem({ fieldsJson: '{}' })
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击编辑数据统计处理
|
|
|
+ editJob (record) {
|
|
|
+ const fields = JSON.parse(record.fieldsJson)
|
|
|
+ const fieldsJson = Object.keys(fields).map(f => ({
|
|
|
+ key: f,
|
|
|
+ description: fields[f].description,
|
|
|
+ name: fields[f].name,
|
|
|
+ uniqueId: fields[f].uniqueId,
|
|
|
+ fields:fields[f].fields,
|
|
|
+ type:fields[f].type,
|
|
|
+ cacheDay:fields[f].cacheDay,
|
|
|
+ cacheHour:fields[f].cacheHour
|
|
|
+ }))
|
|
|
+ this.setState({
|
|
|
+ showModal: true,
|
|
|
+ params: {
|
|
|
+ ...record,
|
|
|
+ fieldsJson
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 点击编辑按钮时的事件处理函数
|
|
|
+ editItem (record) {
|
|
|
+ const fields = JSON.parse(record.fieldsJson)
|
|
|
+ const fieldsJson = Object.keys(fields).map(f => ({
|
|
|
+ key: f,
|
|
|
+ desc: fields[f].desc,
|
|
|
+ column: fields[f].column
|
|
|
+ }))
|
|
|
+ this.setState({
|
|
|
+ showModal: true,
|
|
|
+ params: {
|
|
|
+ ...record,
|
|
|
+ fieldsJson
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击删除按钮时的事件处理函数
|
|
|
+ delItem ({ id }) {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'template/_delItem',
|
|
|
+ payload: { id },
|
|
|
+ callback: res => {
|
|
|
+ const { code } = res || {}
|
|
|
+ if (code === 0) {
|
|
|
+ message.success('删除成功')
|
|
|
+ this.refresh()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ execItem ({ id }) {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'template/_execItem',
|
|
|
+ payload: { id },
|
|
|
+ callback: res => {
|
|
|
+ const { code } = res || {}
|
|
|
+ if (code === 0) {
|
|
|
+ message.success('执行成功')
|
|
|
+ this.refresh()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击新建、编辑对话框的取消按钮的事件处理函数
|
|
|
+ onModalCancel = () => {
|
|
|
+ this.setState({ showModal: false })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击新建、编辑对话框的确定按钮的事件处理函数
|
|
|
+ onModalOk = (params) => {
|
|
|
+ // 在触发action调用接口前，可以做一些前端校验工作，比如下面的：
|
|
|
+ // if (!params.developerName) {
|
|
|
+ // // 如果developerName不存在或者为空字符，那么给用户一个warning提示，同时return阻止后面的接口调用
|
|
|
+ // message.warning('公司名称必填')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+
|
|
|
+ const fieldsJson = params.fieldsJson.reduce((t, { key, desc, column }) => {
|
|
|
+ t[key] = {
|
|
|
+ desc,
|
|
|
+ column
|
|
|
+ }
|
|
|
+ return t
|
|
|
+ }, {})
|
|
|
+ console.log(fieldsJson, 1)
|
|
|
+ params.fieldsJson = JSON.stringify(fieldsJson)
|
|
|
+ console.log(params, 2)
|
|
|
+ const type = !params.id ? 'template/_addItem' : 'template/_editItem'
|
|
|
+ this.props.dispatch({
|
|
|
+ type,
|
|
|
+ payload: params,
|
|
|
+ callback: res => {
|
|
|
+ const { code } = res || {}
|
|
|
+ if (code === 0) {
|
|
|
+ const msg = params.id ? '编辑成功' : '添加成功'
|
|
|
+ message.success(msg)
|
|
|
+ this.setState({ showModal: false })
|
|
|
+ this.refresh()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ render () {
|
|
|
+ const { showModal, params } = this.state
|
|
|
+ const { actionLoading } = this.props
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={s.templatePage}>
|
|
|
+ <FilterTable filterSetting={this.filterSetting} tableSetting={this.tableSetting} apiUrl={apiUrl}
|
|
|
+ isPage={false}/>
|
|
|
+ {showModal && <Edit showModal={showModal} params={params} onCancel={this.onModalCancel} onOk={this.onModalOk}
|
|
|
+ loading={actionLoading}/>}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default Index
|
王文博