增加单选多选框，去掉显示方式概念

12f95d8d · 田翔 · 185c28c1 · 12f95d8d · 12f95d8d · 12f95d8d
Commit 12f95d8d authored Dec 08, 2022 by 田翔
13 changed files
--- a/examples/base/index.html
+++ b/examples/base/index.html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Base example</title>
-    <link rel="stylesheet" href="./index.css" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script src="/__build__/base.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>panda-xform</title>
+  <link rel="stylesheet" href="./index.css" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="/__build__/base.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/examples/server.js
+++ b/examples/server.js
@@ -28,7 +28,8 @@ app.use(['/admin', '/manager'], admin);
 app.use(webpackHotMiddleware(compiler));
 app.use(express.static(__dirname));
 // app.use('/', createProxyMiddleware('/', { target: 'http://127.0.0.1:8880', changeOrigin: true }));
-app.use('/', createProxyMiddleware('/', { target: 'http://192.168.10.178:8082', changeOrigin: true }));
+// app.use('/', createProxyMiddleware('/', { target: 'http://192.168.10.178:8082', changeOrigin: true }));
+app.use('/', createProxyMiddleware('/', { target: 'http://192.168.10.167:8088/', changeOrigin: true }));
 const port = process.env.PORT || 8888;
 module.exports = app.listen(port, () => {
  console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`);

--- a/src/apis/process.js
+++ b/src/apis/process.js
@@ -187,9 +187,17 @@ export function DeleteTableDataInfo(data) {
 }

 //获取数据字典
-export function GetDataDictionaryList() {
+export function GetDataDictionaryList(params) {
  return request({
-    url: `/PandaOMS/OMS/DataManger/GetDataDictionaryList`,
+    url: `/PandaOMS/OMS/DataManger/GetDataDictionaryList${params.nodeID ? `?nodeID=${params.nodeID}` : ''}`,
+    method: 'get',
+  })
+}
+
+//获取数据字典子项
+export function GetSelectItemList({ nodeName }) {
+  return request({
+    url: `PandaWorkFlow/WorkFlow/AccountManage/GetSelectItemList${nodeName ? `?nodeName=${nodeName}` : ''}`,
    method: 'get',
  })
 }

--- a/src/core/FormDesigner/config/settings.js
+++ b/src/core/FormDesigner/config/settings.js
--- a/src/core/widgets/select/CheckBox/index.js
+++ b/src/core/widgets/select/CheckBox/index.js
+import React, { useState, useEffect, useMemo } from 'react'
+import { Checkbox } from 'antd'
+import { GetSelectItemList } from '../../../../apis/process'
+
+const CheckBox = (props) => {
+
+  const { value, onChange, schema } = props
+  const { presetValue, disabled, soruceType, options, dictionary } = schema
+
+  const [dictionaryList, setDictionaryList] = useState([])
+
+  const enums = useMemo(() => {
+    switch (soruceType) {
+      case '手动输入':
+        return Array.isArray(options) ? options.map(v => v.value) : []
+      case '数据字典':
+        return Array.isArray(dictionaryList) ? Array.from([...new Set(dictionaryList.map(v => v.nodeName))]) : []
+      default:
+        return []
+    }
+  }, [soruceType, options, dictionaryList])
+
+  useEffect(() => {
+    onChange(presetValue ? presetValue.split(',') : [])
+  }, [presetValue])
+
+  const onFocus = async () => {
+    const { data } = await GetSelectItemList({ nodeName: dictionary })
+    if (Array.isArray(data)) {
+      setDictionaryList(data)
+    }
+  }
+
+  useEffect(() => {
+    if (soruceType === '数据字典' && dictionary) {
+      onFocus()
+    }
+  }, [soruceType, dictionary])
+
+  return (
+    <Checkbox.Group
+      disabled={disabled}
+      onChange={value => onChange(value.join(','))}
+      value={value}
+    >
+      {enums.map(v => <Checkbox key={v} value={v}>{v}</Checkbox>)}
+    </Checkbox.Group>
+  )
+}
+
+export default CheckBox
\ No newline at end of file
--- a/src/core/widgets/select/ValueSelect/index.js
+++ b/src/core/widgets/select/ValueSelect/index.js
 // 选择器，值选择器
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import { Select, Checkbox, Radio } from 'antd'
 import styels from './index.less'
+import { GetSelectItemList } from '../../../../apis/process'

 const { Option } = Select

-const ValueSelect = ({ value, onChange, schema }) => {
+const ComboBox = ({ value, onChange, schema }) => {

-  const { placeholder, disabled, options, presetValue, showType, isMultiple, isEdit } = schema
+  const { placeholder, disabled, soruceType, options, dictionary, presetValue, showType, isMultiple, isEdit } = schema

-  console.log('options', options)
+  console.log('schema', schema)
+
+  const [dictionaryList, setDictionaryList] = useState()

  const valueShow = useMemo(() => {
    if (isMultiple) {
@@ -20,12 +23,15 @@ const ValueSelect = ({ value, onChange, schema }) => {
  }, [presetValue, value])

  const enums = useMemo(() => {
-
-    return Array.isArray(options) ? options.map(v => v.value) : []
-    // if (options) {
-    //   return options.split(',')
-    // }
-  }, [options])
+    switch (soruceType) {
+      case '手动输入':
+        return Array.isArray(options) ? options.map(v => v.value) : []
+      case '数据字典':
+        return Array.isArray(dictionaryList) ? dictionaryList.map(v => v.nodeName) : []
+      default:
+        return []
+    }
+  }, [soruceType, options, dictionaryList])

  const handleChange = value => {
    if (isEdit) {
@@ -39,16 +45,21 @@ const ValueSelect = ({ value, onChange, schema }) => {
    }
  }

-  // console.log('valueShow', valueShow, disabled)
+  const onFocus = async () => {
+    const { data } = await GetSelectItemList({ nodeName: dictionary })
+    if (Array.isArray(data)) {
+      setDictionaryList(data)
+    }
+  }

  if (showType === '下拉') {
    return (
      <Select
+        onFocus={onFocus}
        style={{ width: '100%' }}
        mode={isMultiple ? 'multiple' : ''}
        disabled={disabled}
        showArrow={!disabled}
-        // optionFilterProp="children"
        value={valueShow}
        placeholder={placeholder}
        onChange={handleChange}
@@ -83,4 +94,4 @@ const ValueSelect = ({ value, onChange, schema }) => {

 }

-export default ValueSelect
+export default ComboBox
--- a/src/core/widgets/select/ValueSelect/index.less
+++ b/src/core/widgets/select/ValueSelect/index.less
--- a/src/core/widgets/select/RadioButton/index.js
+++ b/src/core/widgets/select/RadioButton/index.js
+import React, { useState, useEffect, useMemo } from 'react'
+import { Radio } from 'antd'
+import { GetSelectItemList } from '../../../../apis/process'
+
+const RadioButton = (props) => {
+
+  const { value, onChange, schema } = props
+  const { presetValue, disabled, soruceType, options, dictionary } = schema
+
+  const [dictionaryList, setDictionaryList] = useState([])
+
+  useEffect(() => {
+    onChange(presetValue)
+  }, [presetValue])
+
+  const onFocus = async () => {
+
+    const { data } = await GetSelectItemList({ nodeName: dictionary })
+    if (Array.isArray(data)) {
+      setDictionaryList(data)
+    }
+  }
+
+  useEffect(() => {
+    if (soruceType === '数据字典' && dictionary) {
+      onFocus()
+    }
+  }, [soruceType, dictionary])
+
+  const enums = useMemo(() => {
+    switch (soruceType) {
+      case '手动输入':
+        return Array.isArray(options) ? options.map(v => v.value) : []
+      case '数据字典':
+        return Array.isArray(dictionaryList) ? dictionaryList.map(v => v.nodeName) : []
+      default:
+        return []
+    }
+  }, [soruceType, options, dictionaryList])
+
+  return (
+    <Radio.Group onChange={e => onChange(e.target.value)} value={value} disabled={disabled}>
+      {enums.map(v => <Radio key={v} value={v}>{v}</Radio>)}
+    </Radio.Group>
+  )
+
+}
+
+export default RadioButton
\ No newline at end of file
--- a/src/core/widgets/select/index.js
+++ b/src/core/widgets/select/index.js
+import ComboBox from './ComboBox'
+import RadioButton from './RadioButton'
+import CheckBox from './CheckBox'
 import CitySelect from './CitySelect'
 import EditSelect from './EditSelect'
 import MultiSelect from './MultiSelect'
@@ -12,9 +15,11 @@ import PullStaff from './PersonSelect/pullStaff'
 import StaffSelect from './PersonSelect/staffSelect'
 import TableAccount from './TableAccount'
 import TileSelect from './TileSelect'
-import ValueSelect from './ValueSelect'

 const select = {
+  ComboBox,
+  RadioButton,
+  CheckBox,
  CitySelect,
  EditSelect,
  MultiSelect,
@@ -29,7 +34,6 @@ const select = {
  StaffSelect,
  TableAccount,
  TileSelect,
-  ValueSelect,
 }

 export default select
\ No newline at end of file
--- a/src/core/widgets/settings/groupSource/Dictionary/index.js
+++ b/src/core/widgets/settings/groupSource/Dictionary/index.js
 import React, { useState } from 'react'
-import { Input, Modal } from 'antd'
-import { GetDataDictionaryList } from '../../../../../apis/process'
+import { Input, Modal, Select, Button, Table } from 'antd'
+import { EyeOutlined } from '@ant-design/icons'
+import './index.less'
+import { GetDataDictionaryList, GetSelectItemList } from '../../../../../apis/process'
+
+const columns = [
+  {
+    title: '序号',
+    render: (t, r, i) => i + 1,
+    width: 60
+  },
+  {
+    title: '名称',
+    dataIndex: 'nodeName',
+  },
+  {
+    title: '值',
+    dataIndex: 'nodeValue',
+  }
+]

 const Dictionary = (props) => {

  const { value, shame, onChange } = props

+  const [options, setOptions] = useState([])
  const [visible, setVisible] = useState(false)
+  const [dataSource, setDataSource] = useState([])

-  const onClick = () => {
+  const iconClick = () => {
    setVisible(true)
-    getDictionary()
+    getDataSource()
+  }
+
+  const getDataSource = async () => {
+    // let option = options.find(v => v.nodeName === value)
+    // console.log('option', options, option, value)
+    // if (!option) return
+    const { data } = await GetSelectItemList({ nodeName: value })
+    if (Array.isArray(data)) {
+      setDataSource(data)
+    }
  }

  const getDictionary = async () => {
-    const res = await GetDataDictionaryList()
-    console.log('res', res)
+    const { data } = await GetDataDictionaryList({})
+    if (Array.isArray(data)) {
+      setOptions(data)
+      return data
+    }
+    return []
+  }
+
+  const selectChange = (value) => {
+    onChange(value)
  }

  return (
    <div className='dictionary'>
-      <Input onClick={onClick} value={value} />
+      <Select
+        value={value}
+        style={{ maxWidth: '208px', width: '100%' }}
+        onChange={selectChange}
+        onFocus={() => getDictionary()}
+        showSearch
+        allowClear
+      >
+        {
+          options.map(v => {
+            return (
+              <Select.Option key={v.nodeName} value={v.nodeName} >
+                {v.nodeName}
+              </Select.Option>
+            )
+          })
+        }
+      </Select>
+      <div className='dictionary-icons' style={{ display: value ? 'block' : 'none' }}><EyeOutlined onClick={iconClick} /></div>
      <Modal
+        width={'50%'}
        onCancel={() => setVisible(false)}
-        onOk={() => setVisible(true)}
-        title='数据字典'
+        onOk={() => setVisible(false)}
+        title={'数据字典' + `【${value}】`}
        visible={visible}
+        getContainer={false}
      >
-
+        <Table
+          size='small'
+          bordered
+          dataSource={dataSource}
+          columns={columns}
+        />
      </Modal>
    </div>
  )

--- a/src/core/widgets/settings/groupSource/Dictionary/index.less
+++ b/src/core/widgets/settings/groupSource/Dictionary/index.less
+.dictionary {
+  display: flex;
+  .dictionary-icons {
+    width: 37px;
+    height: 32px;
+    line-height: 32px;
+    color: rgba(0, 0, 0, 0.85);
+    background: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-left: none;
+    text-align: center;
+  }
+}
\ No newline at end of file
--- a/src/core/widgets/settings/groupSource/TableName/index.js
+++ b/src/core/widgets/settings/groupSource/TableName/index.js
+import React from 'react'
+import { Cascader } from 'antd'
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+            code: 752100,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+            code: 453400,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const TableName = (props) => {
+
+  const { value, onChange } = props
+
+  const selectChange = (value) => {
+    onChange(value.join(','))
+  }
+
+  return (
+    <Cascader
+      onChange={selectChange}
+      style={{ width: '208px' }}
+      options={options}
+    />
+  )
+
+}
+
+export default TableName
\ No newline at end of file
--- a/src/core/widgets/settings/groupSource/index.js
+++ b/src/core/widgets/settings/groupSource/index.js
 import Dictionary from './Dictionary'
+import TableName from './TableName'

 const groupSource = {
  Dictionary,
+  TableName,
 }

 export default groupSource
\ No newline at end of file