Bi data

src/conf/config.js

@@ -1,4 +1,4 @@
-let dc = 'http://localhost:8080';
+let dc = 'http://back-apit.weipaitang.com';
 let tc = 'http://localhost:8080';
 let apiCdn = 'http://cdn01t.weipaitang.com/img/';
 let auth = 'https://back-autht.weipaitang.com';
@@ -11,6 +11,7 @@ if (document.domain === 'localhost') {
   // dc = 'http://localhost:8000/api'
   // dc = 'http://backend.wpt.local:8087'
   dc = 'http://back-apit.weipaitang.com';
+
 } else if (document.domain === 'back-admint.wpt.la') {
   dc = 'http://back-apit.weipaitang.com';
   us = 'http://back-apit.weipaitang.com';

src/pages/dc/bi/components/Edit/index.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import { Modal } from 'antd'
+import { FormItem } from 'wptpc-design'
+
+export default class Index extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      params: {}
+    }
+    this.formSetting = [{
+      label: '数据表名',
+      type: 'input',
+      key: 'tableName',
+      isRequired: true,
+      placeholder: '请输入'
+    }, {
+      label: '描述',
+      type: 'input',
+      key: 'description',
+      isRequired: true,
+      placeholder: '请输入'
+    },
+    {
+      label: '数据保留时间(天）',
+      type: 'input',
+      key: 'expireDays',
+      isRequired: true,
+      placeholder: '请输入'
+    },
+    {
+      label: '新增数据的写入时间(每天）',
+      type: 'input',
+      key: 'appendTime',
+      isRequired: true,
+      placeholder: '请输入'
+    },
+    {
+      label: '获取数据的时间',
+      type: 'select',
+      key: 'startDate',
+      options: [
+        { value: "lastDay", label: '取昨天（t+1)' },
+        { value: "all", label: '全部' }
+      ],
+      style: { width: '100%' },
+      isRequired: true,
+      placeholder: '请输入'
+    }
+  ]
+  }
+
+  // 组件挂在的时候调用的生命周期函数
+  componentDidMount () {
+    const params = { ...this.props.params }
+    this.setState({ params })
+  }
+
+  onOk = () => {
+    const params = { ...this.state.params }
+    this.props.onOk(params)
+  }
+
+  // 表单里面的控件修改的时候出发onchange事件
+  onParamsChange = (key, value) => {
+    const params = { ...this.state.params }
+    params[key] = value
+    this.setState({ params })
+  }
+
+  render () {
+    const { showModal, onCancel, loading } = this.props
+    const { params } = this.state
+
+    return (
+      <Modal
+        title={params.id ? '编辑数据表' : '添加数据表'}
+        visible={showModal}
+        onOk={this.onOk}
+        onCancel={onCancel}
+        // 确认按钮点击后，发起接口会处罚loading值的变化，从而控制确认按钮的状态（disable or enable）
+        okButtonProps={{ disabled: loading }}
+        width={1200}
+      >
+        <FormItem formSetting={this.formSetting} params={params} onChange={this.onParamsChange} />
+      </Modal>
+    )
+  }
+}

src/pages/dc/bi/components/Fields/index.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react'
+import { Modal } from 'antd'
+import { FormItem } from 'wptpc-design'
+import { parseAsync } from '@babel/core'
+
+export default class Index extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      params: {}
+    }
+    this.formSetting = [{
+        label: '数据表名',
+        type: 'input',
+        key: 'targetTable',
+        isRquired: true,
+      },
+      { 
+        label: '映射字段别名', 
+        type: 'input',
+        key: 'aliasField',
+        isRquired:true,
+      },
+      { 
+        label: '原始字段名', 
+        type: 'input',
+        key: 'originField',
+        isRquired:true,
+      },
+      {
+        label: '字段描述',
+        type:'input',
+        key:'description',
+        isRquired:true
+      },
+      {
+          label: '字段类型',
+          type:'input',
+          key:'fieldType',
+          isRquired:true
+      },
+      {
+          label: '字段特殊处理规则',
+          type:'input',
+          key:'customRule',
+          isRquired:true
+      }
+  ]
+  }
+
+  // 组件挂在的时候调用的生命周期函数
+  componentDidMount () {
+    const params = { ...this.props.params }
+    this.setState({ params })
+  }
+
+  onOk = () => {
+    const params = { ...this.state.params }
+    this.props.onOk(params)
+  }
+
+  // 表单里面的控件修改的时候出发onchange事件
+  onParamsChange = (key, value) => {
+    const params = { ...this.state.params }
+    params[key] = value
+    this.setState({ params })
+  }
+
+  render () {
+    const { showModal, onCancel, loading } = this.props
+    const { params } = this.state
+    console.log(params)
+    return (
+      <Modal
+        title={params.id ? '编辑指标字段' : '添加指标字段'}
+        visible={showModal}
+        onOk={this.onOk}
+        onCancel={onCancel}
+        // 确认按钮点击后，发起接口会处罚loading值的变化，从而控制确认按钮的状态（disable or enable）
+        okButtonProps={{ disabled: loading }}
+        width={1200}
+      >
+        <FormItem formSetting={this.formSetting} params={params} onChange={this.onParamsChange} />
+      </Modal>
+    )
+  }
+}

src/pages/dc/bi/fields.js

@@ -0,0 +1,156 @@
+import React from 'react'
+import { connect } from 'dva'
+import { message, Divider, Popconfirm } from 'antd'
+import { FilterTable } from 'wptpc-design'
+import s from './fields.less'
+import Fields from './components/Fields'
+import get from 'lodash/get';
+
+import { dc } from '@/conf/config'
+
+const apiUrl = `${dc}/dc/web/big-data-mapping-fields-by-table`
+
+@connect(({ loading }) => ({
+  // 添加或者编辑接口触发的loading属性，可以用于控制接口请求阶段让对话框的”确定“按钮不可点击
+  actionLoading: loading.effects['template/_addItem'] || loading.effects['ugc/_editItem']
+}))
+class Index extends React.PureComponent {
+
+  constructor(props){
+    super(props);
+    this.table = get(props, 'location.query.table');  
+  }
+
+  state = {
+    // 这两个state字段用来进行表单显示、隐藏控制以及表单里面的数据
+    showModal: false,
+    params: {}
+  }
+
+  // filtertable的搜索项配置
+  filterSetting = {
+    isClearSearch: true,
+    // 这个数组里面的每一个元素就是一个搜索项
+    formFields: [
+     
+    ],
+    // 在接口请求前，可以修改给接口的入参
+    beforeSearchFunc: params => {
+      params.pageSize = params.pageNum
+      params.table = this.table
+    }
+  }
+
+  // filtertable的列表配置
+  tableSetting = {
+    // rowKey: 'id', // 如果使用rowKey，需要每行的数据rowKey对应的值都是唯一的
+    columnConfig: [
+      {
+        title: '数据表名',
+        dataIndex: 'targetTable'
+      },
+      { 
+        title: '映射字段别名', 
+        dataIndex: 'aliasField' 
+      },
+      { 
+        title: '原始字段名', 
+        dataIndex: 'originField' 
+      },
+      {
+        title: '字段描述',
+        dataIndex: 'description'
+      },
+      {
+        title: '字段类型',
+        dataIndex: 'fieldType'
+      },
+      {
+        title: '字段特殊处理规则',
+        dataIndex: 'customRule'
+      },
+      {
+        title: '操作',
+        dataIndex: 'actions',
+        // 所有需要弹窗操作的都可以用编辑的逻辑；所有不需要弹窗的操作，比如上架、发布等，都可以用”删除“的逻辑
+        render: (text, record) => <span><a onClick={() => this.editItem(record)}>编辑</a><Divider type="vertical" /><Popconfirm
+          title="确定删除"
+          onConfirm={() => this.delItem(record)}
+        >
+          <a>删除</a>
+        </Popconfirm></span>
+      }
+    ],
+    // 通过这个函数可以获取列表的刷新的函数，编辑、删除后可以用它来刷新列表
+    getRefresh: refresh => {
+      this.refresh = refresh
+    },
+    // 筛选和列表的中间位置如果有批量操作按钮，可以放在这个位置
+    batchBtns: [{ label: '创建', type: 'primary', onClick: () => this.createItem(this.table) }]
+  }
+
+  // 点击编辑按钮时的事件处理函数
+  editItem (record) {
+    this.setState({ showModal: true, params: { ...record } })
+  }
+  createItem(table) {
+    this.setState({ showModal: true, params: {
+       "targetTable":table
+    } 
+  })
+  }
+
+  // 点击删除按钮时的事件处理函数
+  delItem ({ id }) {
+    this.props.dispatch({
+      type: 'template/_delFieldsItem',
+      payload: { id },
+      callback: res => {
+        const { code } = res || {}
+        if (code === 0) {
+          message.success('删除成功')
+          this.refresh()
+        }
+      }
+    })
+  }
+
+  // 点击新建、编辑对话框的取消按钮的事件处理函数
+  onModalCancel = () => {
+    this.setState({ showModal: false })
+  }
+
+  // 点击新建、编辑对话框的确定按钮的事件处理函数
+  onModalOk = (params) => {
+    // 在触发action调用接口前，可以做一些前端校验工作，比如下面的：
+   
+    const type = params.id ? 'template/_addFieldsItem' : 'template/_editFieldsItem'
+    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} />
+        { showModal && <Fields showModal={showModal} params={params} onCancel={this.onModalCancel} onOk={this.onModalOk} loading={actionLoading} /> }
+      </div>
+    )
+  }
+}
+
+export default Index

src/pages/dc/bi/list.js

@@ -0,0 +1,148 @@
+import React from 'react'
+import { connect } from 'dva'
+import { message, Divider, Popconfirm } from 'antd'
+import { FilterTable } from 'wptpc-design'
+import s from './list.less'
+import Edit from './components/Edit'
+import { dc } from '@/conf/config'
+
+const apiUrl = `${dc}/dc/web/big-data-mapping-table-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: '数据表名:', type: 'input', key: 'tableName', placeholder: '请输入表名' },
+    ],
+    // 在接口请求前，可以修改给接口的入参
+    beforeSearchFunc: params => {
+      params.pageSize = params.pageNum
+    }
+  }
+
+  // filtertable的列表配置
+  tableSetting = {
+    // rowKey: 'id', // 如果使用rowKey，需要每行的数据rowKey对应的值都是唯一的
+    columnConfig: [
+      {
+        title: '序号',
+        dataIndex: 'id'
+      },
+      { title: '数据表名', 
+        dataIndex: 'tableName' 
+      },
+      { 
+        title: '描述', 
+        dataIndex: 'description' 
+      },
+      {
+        title: '数据保留时间(天)',
+        dataIndex: 'expireDays'
+      },
+      {
+        title: '新增数据的写入时间',
+        dataIndex: 'appendTime'
+      },
+      {
+        title: '获取数据的时间',
+        dataIndex: 'startDate'
+      },
+      {
+        title: '操作',
+        dataIndex: 'actions',
+        // 所有需要弹窗操作的都可以用编辑的逻辑；所有不需要弹窗的操作，比如上架、发布等，都可以用”删除“的逻辑
+        render: (text, record) => <span><a onClick={() => this.editItem(record)}>编辑</a><Divider type="vertical" />
+        <Divider type="vertical" />
+            <a href={'/dc/bi/fields?table='+record.tableName}>指标列表</a>
+            <Divider type="vertical" />
+        <Popconfirm
+          title="确定删除"
+          onConfirm={() => this.delItem(record)}
+        >
+          <a>删除</a>
+        </Popconfirm></span>
+      }
+    ],
+    // 通过这个函数可以获取列表的刷新的函数，编辑、删除后可以用它来刷新列表
+    getRefresh: refresh => {
+      this.refresh = refresh
+    },
+    // 筛选和列表的中间位置如果有批量操作按钮，可以放在这个位置
+    batchBtns: [{ label: '创建', type: 'primary', onClick: () => this.editItem({}) }]
+  }
+
+  // 点击编辑按钮时的事件处理函数
+  editItem (record) {
+    this.setState({ showModal: true, params: { ...record } })
+  }
+
+  // 点击删除按钮时的事件处理函数
+  delItem ({ id }) {
+    this.props.dispatch({
+      type: 'template/_delItem',
+      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 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} />
+        { showModal && <Edit showModal={showModal} params={params} onCancel={this.onModalCancel} onOk={this.onModalOk} loading={actionLoading} /> }
+      </div>
+    )
+  }
+}
+
+export default Index

src/pages/dc/bi/list.less

@@ -0,0 +1,2 @@
+.templatePage {
+}

src/pages/dc/bi/model.js

@@ -0,0 +1,47 @@
+import {
+  addItem,editItem,delItem,editFieldsItem,delFieldsItem
+} from './service'
+
+export default {
+  namespace: 'template',
+  state: {},
+  effects: {
+    * _addItem({ payload, callback }, { call }) {
+      const res = yield call(addItem, payload)
+      if (res) {
+        if (callback) callback(res)
+      }
+    },
+    * _editItem({ payload, callback }, { call }) {
+      const res = yield call(editItem, payload)
+      if (res) {
+        if (callback) callback(res)
+      }
+    },
+    * _delItem({ payload, callback }, { call }) {
+      const res = yield call(delItem, payload)
+      if (res) {
+        if (callback) callback(res)
+      }
+    },
+    *_addFieldsItem({ payload, callback }, { call }) {
+      const res = yield call(editFieldsItem, payload)
+      if (res) {
+        if (callback) callback(res)
+      }
+    },
+    *_editFieldsItem({ payload, callback}, { call }) {
+      const res = yield call(editFieldsItem, payload)
+      if (res) {
+        if (callback) callback(res)
+      }
+    },
+    *_delFieldsItem( {payload, callback}, { call }) {
+      const res = yield call(delFieldsItem, payload)
+      if (res) {
+        if (callback) callback(res)
+      }
+    }
+  },
+  reducers: {}
+}

src/pages/dc/bi/service.js

@@ -0,0 +1,29 @@
+import { fetchApi } from '@/apis/'
+import { dc } from '@/conf/config'
+import { parseAsync } from '@babel/core'
+
+
+export async function addItem (params) {
+  const url = `${dc}/dc/web/edit-big-data-mapping-table`
+  return fetchApi(url, params)
+}
+
+export async function editItem (params) {
+  const url = `${dc}/dc/web/edit-big-data-mapping-table`
+  return fetchApi(url, params)
+}
+
+export async function delItem(params) {
+  const url = `${dc}/dc/web/delete-big-data-mapping-table`
+  return fetchApi(url, params)
+}
+
+export async function editFieldsItem(params) {
+  const url = `${dc}/dc/web/edit-big-data-mapping-fields`
+  return fetchApi(url, params)
+}
+
+export async function delFieldsItem(params) {
+  const url = `${dc}/dc/web/delete-big-data-mapping-fields`
+  return fetchApi(url, params)
+}