Skip to content

X
xform
Commit 089e498d authored by 田翔's avatar 田翔
Browse files
Options

增加台账选择器

parent e6b42cb3
Show whitespace changes
Inline Side-by-side
Showing with 760 additions and 86 deletions
examples/server.js
View file @ 089e498d
......@@ -27,9 +27,9 @@ admin.get('/', function (req, res) {
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://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.167:8088/', 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`);
......
package.json
View file @ 089e498d
{
"name": "panda-xform",
"version": "1.4.5",
"description": "1.4.5: 拆分下拉框，单选框，复选框形态",
"version": "1.4.6",
"description": "1.4.6: 增加台账选择器",
"keywords": [
"panda-xform"
],
......
src/core/FormDesigner/config/settings.js
View file @ 089e498d
......@@ -806,15 +806,6 @@ const selectWidgets = [
type: 'object',
properties: {}
},
// showType: {
// title: '显示方式',
// type: 'string',
// enum: ['下拉', '平铺'],
// default: '下拉',
// enumNames: ['下拉', '平铺'],
// displayType: 'row',
// labelWidth: 80,
// },
width: {
title: '元素宽度',
type: 'string',
......@@ -1323,12 +1314,97 @@ const selectWidgets = [
title: '人员选择器',
name: '人员选择器',
type: 'string',
widget: 'PersonSelect',
widget: 'PersonSelector',
require: true,
},
setting: {
}
},
{
text: '台账选择器',
name: '台账选择器',
schema: {
title: '台账选择器',
name: '台账选择器',
type: 'string',
widget: 'AccountSelector',
require: true,
},
setting: {
groupBase: {
title: '基础信息',
type: 'object',
collapsed: true,
properties: {}
},
$id: {
title: '字段名称',
type: 'string',
widget: 'FieldNames',
required: true,
displayType: 'row',
labelWidth: 80,
},
title: {
title: '标题',
required: true,
type: 'string',
widget: 'htmlInput',
displayType: 'row',
labelWidth: 80,
},
placeholder: {
title: '提示语',
type: 'string',
// widget: 'Placeholder',
displayType: 'row',
labelWidth: 80,
},
presetValue: {
title: '默认值',
type: 'string',
displayType: 'row',
labelWidth: 80,
},
gorupSoruce: {
title: '数据来源',
type: 'object',
collapsed: true,
properties: {}
},
accountName: {
title: '台账名称',
name: '台账名称',
type: 'string',
widget: 'AccountName',
displayType: 'row',
labelWidth: 80,
required: true,
},
fieldshine: {
title: '映射字段',
name: '映射字段',
type: 'array',
widget: 'Fieldshine',
displayType: 'row',
labelWidth: 80,
required: true,
dependencies: ['accountName'],
default: []
},
sql: {
title: 'SQL过滤',
name: 'SQL过滤',
type: 'string',
widget: 'textarea',
props: {
placeholder: '示例：部门="XX部门"'
}
}
}
}
]
const dateWidgets = [
......@@ -1742,6 +1818,180 @@ const mapWidgets = [
},
},
},
{
text: '设备选择',
name: '设备选择',
schema: {
title: '设备选择',
type: 'string',
widget: 'Device',
},
setting: {
groupBase: {
title: '基础信息',
type: 'object',
collapsed: true,
properties: {}
},
$id: {
title: '字段名称',
type: 'string',
widget: 'FieldNames',
required: true,
displayType: 'row',
labelWidth: 80,
},
title: {
title: '标题',
required: true,
type: 'string',
widget: 'htmlInput',
displayType: 'row',
labelWidth: 80,
},
placeholder: {
title: '提示语',
type: 'string',
displayType: 'row',
labelWidth: 80,
default: '请选择设备'
},
groupSetting: {
title: '控件设置',
type: 'object',
properties: {}
},
disabled: {
title: '只读',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
hidden: {
title: '隐藏',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
emphasis: {
title: '强调',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
groupStyle: {
title: '控件样式',
type: 'object',
properties: {}
},
width: {
title: '元素宽度',
type: 'string',
widget: 'percentSlider',
},
labelWidth: {
title: '标签宽度',
description: '默认值110',
default: 110,
type: 'number',
widget: 'slider',
max: 400,
props: {
hideNumber: true,
},
},
},
},
{
text: '位置坐标',
name: '位置坐标',
schema: {
title: '位置坐标',
type: 'string',
// widget: 'SearchLocation',
},
setting: {
groupBase: {
title: '基础信息',
type: 'object',
collapsed: true,
properties: {}
},
$id: {
title: '字段名称',
type: 'string',
widget: 'FieldNames',
required: true,
displayType: 'row',
labelWidth: 80,
},
title: {
title: '标题',
required: true,
type: 'string',
widget: 'htmlInput',
displayType: 'row',
labelWidth: 80,
},
placeholder: {
title: '提示语',
type: 'string',
displayType: 'row',
labelWidth: 80,
default: '请选择设备'
},
groupSetting: {
title: '控件设置',
type: 'object',
properties: {}
},
disabled: {
title: '只读',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
hidden: {
title: '隐藏',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
emphasis: {
title: '强调',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
groupStyle: {
title: '控件样式',
type: 'object',
properties: {}
},
width: {
title: '元素宽度',
type: 'string',
widget: 'percentSlider',
},
labelWidth: {
title: '标签宽度',
description: '默认值110',
default: 110,
type: 'number',
widget: 'slider',
max: 400,
props: {
hideNumber: true,
},
},
},
},
]
const advancedWidgets = [
......
src/core/FormDesigner/index.js
View file @ 089e498d
......@@ -78,7 +78,8 @@ const FormDesigner = (props) => {
return (
<GlobalStore.Provider
value={{
tableName: '123'
extraData: 123,
setExtraData: '123'
}}
>
<div className={prefixCls} style={{ height: '750px' }}>
......
src/core/widgets/coord/SearchLocation/index.js
View file @ 089e498d
import React, { useState, useEffect, useContext } from 'react'
import { Input, message } from 'antd';
import { GlobalStore } from '../../../FormRender'
// import { GlobalStore } from '../../../FormDesigner'
import { AMap } from '@wisdom-map/amap'
const SearchLocation = ({ value, onChange, name, schema }) => {
const { disabled, placeholder } = schema
const { extraData, setExtraData } = useContext(GlobalStore);
const [extraData, setExtraData] = useState(null);
const [address, setAddress] = useState('');
const [pos, setPos] = useState('');
const renderSearch = async () => {
......
src/core/widgets/file/FileUpload/index.js
View file @ 089e498d
......@@ -4,7 +4,7 @@ import { Upload, Button, message, Modal } from 'antd'
import { UploadOutlined, FileOutlined, ArrowDownOutlined } from '@ant-design/icons'
import FileViewer from 'react-file-viewer'
import { uploadFileUrl, downloadFileUrl, downloadFile } from '../../../../apis/process'
import { downloadFunc, filenameVerification } from '../../../../utils/utils'
import { filenameVerification } from '../../../../utils'
const accepts = {
'全部': [],
......
src/core/widgets/select/AccountSelector/index.js 0 → 100644
View file @ 089e498d
import React, { useState, useMemo, useEffect } from 'react'
import { Modal, Input, Table, Tooltip, message } from 'antd'
import { SnippetsOutlined } from '@ant-design/icons'
import { GetAccountConfigInfo, GetAccountPageList, getStationListByUserID } from '../../../../apis/process'
import styles from './index.less'
import { isJson } from '../../../../utils'
const AccountSelector = (props) => {
const userID = window?.globalConfig?.userInfo?.OID
const { value, onChange, schema, addons } = props
const { disabled, config, fieldName, accountName, fieldshine, siteJurisdiction, sql, isMultiple } = schema
// const { form } = useContext(GlobalStore)
console.log('props', props)
const [params, setParams] = useState({ info: '', total: 0, pageIndex: 1, pageSize: 20 })
const [loading, setLoading] = useState(false)
const [dataSource, setDataSource] = useState([])
const [pageConfig, setPageConfig] = useState({ webShowFieldGroup: '' })
const [visible, setVisible] = useState(false)
const [keys, setKeys] = useState([])
const columns = useMemo(() => {
const { webShowFieldGroup } = pageConfig
let fields = webShowFieldGroup.split(',')
let array = []
if (fields.length) {
fields.forEach(v => {
if (v) {
array.push({
key: new Date().getTime(),
title: v,
dataIndex: v,
width: 120,
ellipsis: true,
render: (value, r) => <Tooltip placement="top" title={value}>{value}</Tooltip>
})
}
})
}
return array
}, [pageConfig])
const onSearch = (value) => {
getPageList({ info: value })
}
const iconClick = () => {
if (!accountName) {
return message.info('请配置台账名称！')
}
if (!fieldshine.length) {
return message.info('请配置映射字段！')
}
setVisible(true)
if (!pageConfig.webShowFieldGroup) {
getPageConfig()
}
getPageList()
}
const getPageConfig = async () => {
const { code, data } = await GetAccountConfigInfo(accountName)
if (code == 0) {
setPageConfig(data)
}
}
const getPageList = async (outParams = {}) => {
let queryWheres = []
if (siteJurisdiction) {
const { code, data } = await getStationListByUserID(...[userID, window.globalConfig.client, false])
if (code === 0) {
queryWheres = [
{
field: '所属站点',
type: '包括',
value: data.join(',')
}
]
}
}
setLoading(true)
let param = {
accountName: accountName,
condition: sql,
sortFields: '录入时间',
queryWheres: queryWheres,
...params,
...outParams,
}
const { data, code, msg } = await GetAccountPageList(param)
if (code === 0) {
if (data.jsonData) {
let dataSource = JSON.parse(data.jsonData)
setDataSource(dataSource)
let valueArr = value ? value.split(',') : []
let rows = dataSource.filter(v => valueArr.includes(v[fieldshine[0].fromField]))
setKeys(rows.map(v => v.ID))
setParams({ ...params, ...outParams, total: data.totalCount })
}
} else {
onChange(`出错了！${msg}`)
}
setLoading(false)
}
const tableChange = ({ current, pageSize }) => {
getPageList({ pageIndex: current, pageSize })
}
const rowChange = (keys, rows) => {
setKeys(keys)
}
const onOk = () => {
if (fieldshine.length > 1) {
let row = dataSource.find(v => v.ID === keys[0]) || {}
Object.keys(addons.formData).forEach(child => {
Object.keys(addons.formData[child]).forEach(sun => {
fieldshine.forEach(v => {
if (sun === v.toField) {
console.log()
const schema = form.getSchemaByPath(`${child}.${sun}`)
if (schema.widget === 'fileUpload') {
form.setSchemaByPath(`${child}.${sun}`, { ...schema, otherFile: row[v.fromField] })
} else {
addons.setValue(`${child}.${sun}`, row[v.fromField] || '')
}
}
})
})
})
} else {
let array = dataSource.filter(v => keys.includes(v.ID))
if (array.length) {
let rowValues = array.map(v => v[fieldshine[0].fromField]).join(',')
onChange(rowValues)
}
}
setVisible(false)
}
useEffect(() => {
onChange(schema.default)
}, [schema.default])
const addonAfter = <SnippetsOutlined onClick={() => iconClick()} style={{ color: 'rgba(0, 0, 0, 0.25)' }} />
return (
<div className={styles.AccountSelector}>
<Input
value={value}
onClick={() => iconClick()}
addonAfter={!disabled ? addonAfter : null}
/>
<Modal
onCancel={() => setVisible(false)}
onOk={onOk}
width='60%'
title={accountName}
visible={visible}
getContainer={false}
bodyStyle={{ height: 570, overflowY: 'auto' }}
>
<Input.Search
value={params.info}
placeholder="请输入检索内容"
allowClear
onChange={(e) => setParams({ ...params, info: e.target.value })}
onSearch={onSearch}
enterButton
size={'middle'}
style={{ width: '400px', marginBottom: '10px' }}
/>
<Table
rowKey={r => r.ID}
loading={loading}
bordered
size="small"
scroll={{ x: 1500, y: 400 }}
rowSelection={{
type: isMultiple ? 'checkbox' : 'radio',
selectedRowKeys: keys,
fixed: 'left',
onChange: rowChange
}}
pagination={{
total: params.total,
current: params.pageIndex,
pageSize: params.pageSize,
showTotal: (total) => `共 ${total} 条`
}}
onChange={tableChange}
dataSource={dataSource}
columns={columns}
/>
</Modal>
</div>
)
}
export default AccountSelector
\ No newline at end of file
src/core/widgets/select/AccountSelector/index.less 0 → 100644
View file @ 089e498d
@import '~antd/es/style/themes/default.less';
.AccountSelector {
.@{ant-prefix}-table-thead {
.@{ant-prefix}-table-cell {
background: white;
}
th {
border-bottom: 2px solid #DBE7FB;
text-align: center;
}
}
.@{ant-prefix}-table-body {
tr {
td {
border-bottom: 1px solid #DBE7FB;
border-right: 1px solid #DBE7FB;
}
}
.@{ant-prefix}-table-row {
padding: 4px !important;
}
tr:nth-child(even) {
background: #F6F9FE;
.panda-civ-workflow-table-cell-fix-right {
background-color: #F6F9FEed;
}
}
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background: #c8c8c8;
}
&::-webkit-scrollbar-track {
background: #f7f4f5;
padding: 0 3px;
}
}
}
\ No newline at end of file
src/core/widgets/select/ComboBox/index.js
View file @ 089e498d
......@@ -9,8 +9,6 @@ const ComboBox = ({ value, onChange, schema }) => {
const { placeholder, disabled, soruceType, options, dictionary, presetValue, isMultiple, isEdit } = schema
console.log('schema', schema)
const [dictionaryList, setDictionaryList] = useState()
const valueShow = useMemo(() => {
......
src/core/widgets/select/PersonSelector/index.js 0 → 100644
View file @ 089e498d
import React from 'react'
const PersonSelector = (props) => {
const { value, onChange, schema } = props
return (
<div>人员选择器</div>
)
}
export default PersonSelector
\ No newline at end of file
src/core/widgets/select/index.js
View file @ 089e498d
......@@ -3,19 +3,7 @@ import RadioButton from './RadioButton'
import CheckBox from './CheckBox'
import CascadeSelector from './CascadeSelector'
import CitySelect from './CitySelect'
import EditSelect from './EditSelect'
import MultiSelect from './MultiSelect'
import SearchSelect from './SearchSelect'
import SelectDept from './SelectDept'
import SelectTree from './SelectTree'
import ServiceSelect from './ServiceSelect'
import SiteSelect from './SiteSelect'
import PersonSelect from './PersonSelect'
import MultipleStaffSelect from './PersonSelect/multipleStaffSelect'
import PullStaff from './PersonSelect/pullStaff'
import StaffSelect from './PersonSelect/staffSelect'
import TableAccount from './TableAccount'
import TileSelect from './TileSelect'
import AccountSelector from './AccountSelector'
const select = {
ComboBox,
......@@ -23,19 +11,7 @@ const select = {
CheckBox,
CascadeSelector,
CitySelect,
EditSelect,
MultiSelect,
SearchSelect,
SelectDept,
SelectTree,
ServiceSelect,
SiteSelect,
PersonSelect,
MultipleStaffSelect,
PullStaff,
StaffSelect,
TableAccount,
TileSelect,
AccountSelector,
}
export default select
\ No newline at end of file
src/core/widgets/settings/groupSource/AccountName/index.js 0 → 100644
View file @ 089e498d
import React, { useState } from 'react'
import { Select, message } from 'antd'
import { LoadLedgers } from '../../../../../apis/process'
const AccountName = (props) => {
const { value, onChange } = props
const [options, setOptions] = useState([])
const onFocus = async () => {
const { code, data, msg } = await LoadLedgers()
if (code === 0) {
if (Array.isArray(data.root)) {
setOptions(data.root)
} else {
setOptions([])
}
} else {
message.error(msg)
}
}
return (
<Select
value={value}
onFocus={onFocus}
showSearch
onChange={value => onChange(value)}
>
{
options.map(v => {
return (
<Select.Option key={v.name} value={v.name}>{v.name}</Select.Option>
)
})
}
</Select>
)
}
export default AccountName
\ No newline at end of file
src/core/widgets/settings/groupSource/Fieldshine/index.js 0 → 100644
View file @ 089e498d
import React, { useState } from 'react'
import { Form, Space, TreeSelect, Button, Input, Modal, message } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import styles from './index.less'
import { ReloadTableFields } from '../../../../../apis/process'
const { TreeNode } = TreeSelect
const Fieldshine = (props) => {
const { addons, onChange, value } = props
const { accountName } = addons.formData
const [form] = Form.useForm()
const [visible, setVisible] = useState(false)
const [fromField, setFromField] = useState([])
const [toField, setToField] = useState([])
const onOk = () => {
const { field } = form.getFieldsValue()
onChange(field)
setVisible(false)
}
const inputClick = async () => {
if (!accountName) {
return message.info('请选择台账名称')
}
const req1 = ReloadTableFields({ tableName: '设备_台账_户表' })
const req2 = ReloadTableFields({ tableName: '事件_测试02' })
const [res1, res2] = await Promise.all([req1, req2])
if (res1.code === 0) {
if (Array.isArray(res1.data.root)) {
setFromField(res1.data.root)
}
} else {
message.error(res1.msg)
}
if (res2.code === 0) {
if (Array.isArray(res2.data.root)) {
setToField(res2.data.root)
}
} else {
message.error(res2.msg)
}
setVisible(true)
}
return (
<div className={styles.fieldshine}>
<Input
value={value.length ? JSON.stringify(value) : null}
onClick={inputClick}
/>
<Modal
getContainer={false}
width='500px'
title='字段映射'
visible={visible}
onCancel={() => setVisible(false)}
onOk={onOk}
>
<Form name="dynamic_form_nest_item" form={form} autoComplete="off">
<Form.List name="field">
{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }) => (
<Space
key={key}
style={{
display: 'flex',
marginBottom: '5px ',
justifyContent: 'center',
}}
align="baseline"
>
<Form.Item
{...restField}
name={[name, 'fromField']}
rules={[
{
required: true,
message: 'Missing first name',
},
]}
>
<TreeSelect
showSearch
style={{ width: '180px' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择字段名 "
allowClear
treeDefaultExpandAll
showCheckedStrategy
>
<TreeNode value='设备_台账_户表' title='设备_台账_户表' disabled>
{fromField.map(s => <TreeNode value={s.alias} title={s.name} key={s.name} />)}
</TreeNode>
</TreeSelect>
</Form.Item>
<div className={styles.centerImg}></div>
<Form.Item
{...restField}
name={[name, 'toField']}
rules={[
{
required: true,
message: 'Missing last name',
},
]}
>
<TreeSelect
showSearch
style={{ width: '180px' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择字段名 "
allowClear
treeDefaultExpandAll
showCheckedStrategy
>
<TreeNode value='事件_测试02' title='事件_测试02' disabled>
{toField.map(s => <TreeNode value={s.alias} title={s.name} key={s.name} />)}
</TreeNode>
</TreeSelect>
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item style={{ padding: '0 10px' }}>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
添加映射
</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
</Modal>
</div>
)
}
export default Fieldshine
\ No newline at end of file
src/core/widgets/settings/groupSource/Fieldshine/index.less 0 → 100644
View file @ 089e498d
@imgSrc: '../../../../../assets/images/settting';
.fieldshine {
.centerImg {
width: 24px;
height: 24px;
background: url('@{imgSrc}/值映射.png');
background-size: 100% 100%;
position: relative;
top: 7px;
}
}
\ No newline at end of file
src/core/widgets/settings/groupSource/index.js
View file @ 089e498d
import Dictionary from './Dictionary'
import TableName from './TableName'
import AccountName from './AccountName'
import Fieldshine from './Fieldshine'
const groupSource = {
Dictionary,
TableName,
AccountName,
Fieldshine,
}
export default groupSource
\ No newline at end of file
src/main.less
View file @ 089e498d
......@@ -20,6 +20,11 @@ body #app {
}
}
.@{ant-prefix}-tabs-content-holder {
height: 664px;
overflow: auto;
}
.fr-generator-container .right-layout {
width: 21rem;
}
......
src/utils/utils.js → src/utils/index.js
View file @ 089e498d
/**
* @Description: 下载文件函数
* @Params: {String} url 下载的链接；{String} name 下载的文件名； {String} target = _top | _self | _blank | _parent
* @Date: 2021/12/2
* @Author: ChenLong
* */
import { message } from 'antd';
export function downloadFunc(url, name, target = '_self') {
const a = document.createElement('a');
a.href = url;
......@@ -49,38 +41,6 @@ export function returnDataType(data) {
return Object.prototype.toString.call(data);
}
/** @Tips: SQL语句的解析，暂时未确定方案 */
/** @Tips: 前端解释现实难度大，该方案废弃 */
/**
* @Description: 台账选择器中，兼容老的解析SQL
* @Params: SQL语句字符串
* @Date: 2021/12/22
* @Author: ChenLong
* */
/** @Tip: 资产台账.编码 ? 使用状态 = '库存' and 资产状态 in ('正常','租入') */
/** @Tip: 水源井台账.编码 */
/** @Tip: 水源井台账.编码.n */
/** @Tip: 资产台账.编码?资产状态='库存' */
function returnKeyword(str) {
let flags = ['in', 'like', 'or', '>', '<', '=', '!='];
let queryStr = ['包括', '模糊查询', '或', '大于', '小于', '等于', '不等于'];
let _final = {};
flags.forEach((keyword, index) => {
if (str.includes(keyword)) {
let _temp = str.split(keyword).map(_str => _str.trim());
_final = {
field: _temp[0],
type: queryStr[index],
value: _temp[1],
};
}
});
}
export function parseSQL2JSON(str) {
let finalArray = [];
// 1.支持以下字符， > < 都包含等于
......@@ -120,3 +80,18 @@ export function parseSQL2JSON(str) {
queryWheres: [],
};
}
//判断是否为JSON字符串
export const isJson = (json) => {
if (typeof json === 'string') {
try {
let obj = JSON.parse(json)
if (typeof obj === 'object' && obj) {
return true
}
} catch (e) {
return false
}
}
return false
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment