thanos-v0.2

src/pages/fengkong/flows/add/index.js

@@ -0,0 +1,164 @@
+import React from 'react'
+import { Form, Input, Row, Col, Switch, Button, Modal, message } from 'antd'
+import AceEditor from 'react-ace'
+import { create, test } from '../service'
+
+import 'ace-builds/src-noconflict/mode-java'
+import 'ace-builds/src-noconflict/theme-monokai'
+import { connect } from 'dva'
+
+const formItemLayout = {
+  layout: 'vertical'
+}
+
+@connect(({ user }) => ({
+  currentUser: user.currentUser
+}))
+
+@Form.create()
+class Add extends React.PureComponent {
+  state = {
+    content: '',
+    enabled: false,
+    showTest: false, // 是否展示测试内容
+    testContent: '', // 测试数据
+    testResult: '' // 测试结果
+  }
+
+  create = () => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        create({
+          ...values,
+          createUser: this.props.currentUser.name, // 创建人
+          updateUser: this.props.currentUser.name // 最后修改人
+        }).then(res => {
+          if (res.code === 0) {
+            this.setState({ ...values })
+            Modal.success({
+              title: '提交成功',
+              content: '流程代码编译正常，点击“测试按钮”可以继续测试流程逻辑'
+            })
+          }
+        })
+      }
+    })
+  }
+
+  test =() => {
+    if (!this.state.name) {
+      message.warn('请先填写流程名称!')
+      return false
+    }
+    test({
+      name: this.state.name,
+      input: JSON.parse(this.state.testContent)
+    }).then(res => {
+      if (res.code === 0) {
+        this.setState({ testResult: JSON.stringify(res) })
+      }
+    })
+  }
+
+  render () {
+    const { getFieldDecorator } = this.props.form
+
+    return (
+      <div>
+        <h1>新增流程</h1>
+        <Row>
+          <Col span={12}>
+            <Form {...formItemLayout}>
+              <Form.Item label="流程名称">
+                {getFieldDecorator('name')(<Input placeholder="全英文或英文带下划线" />)}
+              </Form.Item>
+              <Form.Item label="流程描述">
+                {getFieldDecorator('description')(<Input.TextArea placeholder="多行输入" />)}
+              </Form.Item>
+              <Form.Item label="是否启用">
+                {getFieldDecorator('enabled', {
+                  initialValue: this.state.enabled
+                })(<Switch checked={this.state.enabled} onChange={checked => this.setState({ enabled: checked })} />)}
+              </Form.Item>
+              <Form.Item label="流程逻辑开发">
+                {getFieldDecorator('content')(
+                  <AceEditor
+                    style={{ width: this.state.showTest ? '100%' : '200%' }}
+                    mode="java"
+                    theme="monokai"
+                    name="content"
+                    onChange={(value) => this.setState({ content: value })}
+                    fontSize={14}
+                    showPrintMargin={true}
+                    showGutter={true}
+                    highlightActiveLine={true}
+                    value={''}
+                    setOptions={{
+                      enableBasicAutocompletion: true,
+                      enableLiveAutocompletion: true,
+                      enableSnippets: true,
+                      showLineNumbers: true,
+                      tabSize: 2
+                    }}
+                  />
+                )}
+              </Form.Item>
+              <Form.Item>
+                <Button type="primary" onClick={this.create}>提交</Button>&emsp;
+                <Button onClick={() => this.setState({ showTest: true })}>测试</Button>
+              </Form.Item>
+            </Form>
+          </Col>
+          <Col span={12}>
+            <div style={{ paddingLeft: '20px', display: this.state.showTest ? 'block' : 'none' }}>
+              <Form.Item label="输入数据">
+                <AceEditor
+                  mode="json"
+                  theme="monokai"
+                  onChange={(value) => this.setState({ testContent: value })}
+                  fontSize={14}
+                  showPrintMargin={true}
+                  showGutter={true}
+                  highlightActiveLine={true}
+                  value={this.state.testContent}
+                  height="300px"
+                  setOptions={{
+                    enableBasicAutocompletion: true,
+                    enableLiveAutocompletion: true,
+                    enableSnippets: true,
+                    showLineNumbers: true,
+                    tabSize: 2
+                  }}
+                />
+              </Form.Item>
+
+              <Button type="primary" onClick={this.test}>执行测试</Button>&emsp;
+              <Form.Item label="输出结果">
+                <AceEditor
+                  mode="json"
+                  theme="monokai"
+                  fontSize={14}
+                  showPrintMargin={true}
+                  showGutter={true}
+                  highlightActiveLine={true}
+                  value={this.state.testResult}
+                  setOptions={{
+                    enableBasicAutocompletion: true,
+                    enableLiveAutocompletion: true,
+                    enableSnippets: true,
+                    showLineNumbers: true,
+                    tabSize: 2
+                  }}
+                />
+              </Form.Item>
+            </div>
+
+          </Col>
+        </Row>
+
+      </div>
+    )
+  }
+}
+
+export default Add

src/pages/fengkong/flows/edit/$name.js

@@ -0,0 +1,182 @@
+import React from 'react'
+import { Form, Input, Row, Col, Switch, Button, Modal, message } from 'antd'
+import { connect } from 'dva'
+import AceEditor from 'react-ace'
+import { detail, test, update } from '../service'
+import { isJSON } from '@/utils/utils'
+
+import 'ace-builds/src-noconflict/mode-java'
+import 'ace-builds/src-noconflict/theme-monokai'
+
+const formItemLayout = {
+  layout: 'vertical'
+}
+
+@connect(({ user }) => ({
+  currentUser: user.currentUser
+}))
+@Form.create()
+class Add extends React.PureComponent {
+  state = {
+    content: '',
+    showTest: false, // 是否展示测试内容
+    testContent: '', // 测试数据
+    testResult: '' // 测试结果
+  }
+
+  componentDidMount () {
+    detail({
+      name: this.props.match.params.name
+    }).then(res => {
+      if (res.code === 0) {
+        this.setState({ ...res.data })
+      }
+    })
+  }
+
+  create = () => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        update({
+          ...values,
+          content: this.state.content,
+          createUser: this.state.createUser || this.props.currentUser.name, // 创建人
+          updateUser: this.props.currentUser.name // 最后修改人
+        }).then(res => {
+          if (res.code === 0) {
+            this.setState({ ...values })
+            Modal.success({
+              title: '提交成功',
+              content: '流程代码编译正常，点击“测试按钮”可以继续测试流程逻辑'
+            })
+          }
+        })
+      }
+    })
+  }
+
+  test =(id) => {
+    if (!this.state.name) {
+      message.warn('请先填写流程名称!')
+      return false
+    }
+    if (!isJSON(this.state.testContent)) {
+      message.warn('输入数据格式错误!')
+      return false
+    }
+    test({
+      name: this.state.name,
+      input: JSON.parse(this.state.testContent)
+    }).then(res => {
+      if (res.code === 0) {
+        console.log(res)
+        this.setState({ testResult: JSON.stringify(res) })
+      }
+    })
+  }
+
+  render () {
+    const { getFieldDecorator } = this.props.form
+    const { name, description, enabled, content } = this.state
+    return (
+      <div>
+        <h1>编辑流程</h1>
+        <Row>
+          <Col span={12}>
+            <Form {...formItemLayout}>
+              <Form.Item label="流程名称">
+                {getFieldDecorator('name', {
+                  initialValue: name
+                })(<Input placeholder="全英文或英文带下划线" />)}
+              </Form.Item>
+              <Form.Item label="流程描述">
+                {getFieldDecorator('description', {
+                  initialValue: description
+                })(<Input.TextArea placeholder="多行输入" />)}
+              </Form.Item>
+              <Form.Item label="是否启用">
+                {getFieldDecorator('enabled', {
+                  initialValue: enabled
+                })(<Switch checked={enabled} onChange={checked => this.setState({ enabled: checked })} />)}
+              </Form.Item>
+              <Form.Item label="流程逻辑开发">
+
+                <AceEditor
+                  style={{ width: this.state.showTest ? '100%' : '200%' }}
+                  mode="java"
+                  theme="monokai"
+                  name="content"
+                  onChange={(value) => this.setState({ content: value })}
+                  fontSize={14}
+                  showPrintMargin={true}
+                  showGutter={true}
+                  highlightActiveLine={true}
+                  value={content}
+                  setOptions={{
+                    enableBasicAutocompletion: true,
+                    enableLiveAutocompletion: true,
+                    enableSnippets: true,
+                    showLineNumbers: true,
+                    tabSize: 2
+                  }}
+                />
+              </Form.Item>
+              <Form.Item>
+                <Button type="primary" onClick={this.create}>提交</Button>&emsp;
+                <Button onClick={() => this.setState({ showTest: true })}>测试</Button>
+              </Form.Item>
+            </Form>
+          </Col>
+          <Col span={12}>
+            <div style={{ paddingLeft: '20px', display: this.state.showTest ? 'block' : 'none' }}>
+              <Form.Item label="输入数据">
+                <AceEditor
+                  mode="json"
+                  theme="monokai"
+                  onChange={(value) => this.setState({ testContent: value })}
+                  fontSize={14}
+                  showPrintMargin={true}
+                  showGutter={true}
+                  highlightActiveLine={true}
+                  value={this.state.testContent}
+                  height="300px"
+                  setOptions={{
+                    enableBasicAutocompletion: true,
+                    enableLiveAutocompletion: true,
+                    enableSnippets: true,
+                    showLineNumbers: true,
+                    tabSize: 2
+                  }}
+                />
+              </Form.Item>
+
+              <Button type="primary" onClick={this.test}>执行测试</Button>&emsp;
+              <Form.Item label="输出结果">
+                <AceEditor
+                  mode="json"
+                  theme="monokai"
+                  fontSize={14}
+                  showPrintMargin={true}
+                  showGutter={true}
+                  highlightActiveLine={true}
+                  value={this.state.testResult}
+                  setOptions={{
+                    enableBasicAutocompletion: true,
+                    enableLiveAutocompletion: true,
+                    enableSnippets: true,
+                    showLineNumbers: true,
+                    tabSize: 2
+                  }}
+                />
+              </Form.Item>
+            </div>
+
+          </Col>
+        </Row>
+
+      </div>
+    )
+  }
+}
+
+export default Add

src/pages/fengkong/flows/flows.js

@@ -0,0 +1,136 @@
+import React from 'react'
+import { FilterTable } from 'wptpc-design'
+import { Link } from 'dva/router'
+import { thanos } from '@/conf/config'
+import { Divider, message, Popconfirm, Button } from 'antd'
+import { delItem } from './service.js'
+
+const apiUrl = `${thanos}/thanos-admin/api/v1/flow/list`
+
+class GroupList extends React.PureComponent {
+  state = {
+    showModal: false,
+    params: {}
+  }
+
+  filterSetting = {
+    rfBtnsJsx: <Link
+      to={{
+        pathname: './add'
+      }}
+    ><Button>新增流程</Button></Link>,
+    isClearSearch: true,
+    formFields: [
+      {
+        label: '描述：',
+        type: 'input',
+        key: 'queryName',
+        placeholder: '分组名称'
+      }
+    ]
+    // 在接口请求前，可以修改给接口的入参
+    // beforeSearchFunc: params => {
+    //   params.pageNum = params.pageNum
+    // }
+  }
+
+  // filtertable的列表配置
+  tableSetting = {
+    rowKey: 'id',
+    // isFrontPagination: true,
+    pagination: {
+      pageSize: 10
+    },
+    columnConfig: [
+      {
+        title: 'ID',
+        dataIndex: 'id'
+      },
+      {
+        title: '分组名称',
+        dataIndex: 'name'
+      },
+      {
+        title: '描述',
+        dataIndex: 'description'
+      },
+      {
+        title: '流程是否启用',
+        dataIndex: 'enabled',
+        render: (text) => text === true ? '是' : '否'
+      },
+      {
+        title: '创建人',
+        dataIndex: 'createUser'
+      },
+      {
+        title: '修改人',
+        dataIndex: 'updateUser'
+      },
+      {
+        title: '操作',
+        dataIndex: 'actions',
+        // 所有需要弹窗操作的都可以用编辑的逻辑；所有不需要弹窗的操作，比如上架、发布等，都可以用”删除“的逻辑
+        render: (text, record) => (
+          <span>
+            <Link
+              to={{
+                pathname: './edit/' + record.name,
+                state: record
+              }}
+            >编辑</Link>
+            <Divider type="vertical"/>
+            <Popconfirm
+              title="确定删除"
+              onConfirm={() => this.delItem(record)}>
+              <a>删除</a>
+            </Popconfirm>
+          </span>)
+      }
+    ],
+    getRefresh: refresh => {
+      this.refresh = refresh
+    }
+  }
+
+  // 点击编辑按钮时的事件处理函数
+  editItem (record) {
+    console.log('11111111=')
+    // const fields = JSON.parse(record.fieldsJson)
+    // console.log('=====', fields)
+    const { fields } = record
+    const fieldsJson = Object.keys(fields).map(f => ({
+      key: f,
+      desc: fields[f].desc,
+      column: fields[f].column
+    }))
+    console.log(fieldsJson)
+    this.setState({
+      showModal: true,
+      params: {
+        ...record,
+        fieldsJson
+      }
+    })
+  }
+  // 点击删除按钮时的事件处理函数
+  delItem = (record) => {
+    delItem({ id: record.id, name: record.name }).then(res => {
+      if (res.code === 0) {
+        message.success('删除成功')
+        this.refresh()
+      }
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <FilterTable filterSetting={this.filterSetting} tableSetting={this.tableSetting} apiUrl={apiUrl}
+        />
+      </div>
+    )
+  }
+}
+
+export default GroupList

src/pages/fengkong/flows/service.js

@@ -0,0 +1,31 @@
+import { fetchApi, fetchApi_get as fetchApiGet } from '@/apis/'
+import { thanos } from '@/conf/config'
+
+// 新增流程
+export async function create (params) {
+  const url = `${thanos}/thanos-admin/api/v1/dsl/create`
+  return fetchApi(url, params)
+}
+
+// 测试流程
+export async function test (params) {
+  const url = `${thanos}/thanos-admin//api/v1/dsl/test`
+  return fetchApi(url, params)
+}
+
+// 获取流程详情
+export async function detail (params) {
+  const url = `${thanos}/thanos-admin/api/v1/dsl/query`
+  return fetchApiGet(url, params)
+}
+
+// 更新
+export async function update (params) {
+  const url = `${thanos}/thanos-admin/api/v1/dsl/update`
+  return fetchApi(url, params)
+}
+
+export async function delItem (params) {
+  const url = `${thanos}/thanos-admin/api/v1/dsl/delete`
+  return fetchApi(url, params)
+}