Skip to content

X
xform
Commit 3b2245b9 authored by 田翔's avatar 田翔
Browse files
Options

支持附件各种形态

parent 3b85970e
Show whitespace changes
Inline Side-by-side
Showing with 608 additions and 95 deletions
package.json
View file @ 3b2245b9
{
"name": "panda-xform",
"version": "1.2.0",
"description": "1.2.0: 增加渲染表单组件",
"version": "1.3.0",
"description": "1.3.0: 支持附件各种形态",
"keywords": [
"panda-xform"
],
......
src/apis/process.js
View file @ 3b2245b9
......@@ -14,15 +14,6 @@ const url = (REACT_APP_ENV || 'dev') !== 'dev' ? `${YOURSELFER_SERVER}/${BASEURL
const NOTHING = [undefined, '', null, void 0]; // void 0 === void 1
/** @End */
// 选择器选项的值查询
/** @Tips: web4版本接口 */
/*export function getSelectName(nodeName) {
return request({
url: `${requestIP}/WorkFlow`,
method: 'get',
});
}*/
// 获取字典的接口
export function getSelectName(nodeName) {
return request({
......@@ -32,14 +23,6 @@ export function getSelectName(nodeName) {
}
// 选择器选项的子节点查询
/** @Tips: web4版本接口 */
/* export function getSelectChildName(nodeName) {
return request({
url: `${requestIP}/WorkChildFlow`,
method: 'get',
});
} */
export function getSelectChildName(nodeName) {
return request({
url: `${BASEURL}/WorkChildFlow`,
......@@ -48,14 +31,6 @@ export function getSelectChildName(nodeName) {
}
// 站点选择器查询
/** @Tips: web4版本接口 */
/*export function getStationListByUserID(name) {
return request({
url: `${requestIP}/GetStationListByUserID`,
method: 'get',
});
}*/
export function getStationListByUserID(id, sysType, isAll) {
return request({
url: `/PandaWorkFlow/WorkFlow/WorkFlow/GetStationListByUserID?userID=${id}${!NOTHING.includes(sysType) ? '&sysType=' + sysType : ''}${!NOTHING.includes(sysType) ? '&isAll=' + isAll : ''}`,
......@@ -64,14 +39,6 @@ export function getStationListByUserID(id, sysType, isAll) {
}
// 人员选择器查询
/** @Tips: web4版本接口 */
/* export function getUserListForRole() {
return request({
url: `${requestIP}/GetUserListForRole`,
method: 'get',
});
} */
export function getUserListForRole() {
return request({
url: `${BASEURL}/GetUserListForRole`,
......@@ -97,12 +64,6 @@ export const getDeptList = (params) => {
}
// 台账的配置查询
/*export function GetAccountConfigInfo(accountName) {
return request({
url: `${requestIP}/GetAccountConfigInfo`,
method: 'get',
});
}*/
export function GetAccountConfigInfo(accountName) {
return request({
url: `${BASEURL}/GetAccountConfigInfo?accountName=${accountName}`,
......@@ -111,12 +72,6 @@ export function GetAccountConfigInfo(accountName) {
}
// 台账的表查询
/*export function GetAccountPageList(pageIndex, pageSize, accountName, info) {
return request({
url: `${requestIP}/GetAccountPageList`,
method: 'get',
});
}*/
export function GetAccountPageList(data) {
return request({
url: `${BASEURL}/GetAccountPageList`,
......@@ -132,14 +87,6 @@ export function GetTableGroupMeta(accountName) {
});
}
// 业务选择器查询
/*export function GetFieldValueFromTable(pageIndex, pageSize, accountName, info) {
return request({
url: `${requestIP}/GetFieldValueFromTable`,
method: 'get',
});
}*/
// NEXT需要增加分页
export function GetFieldValueFromTable(accountName, fieldName, filter) {
return request({
......@@ -149,13 +96,6 @@ export function GetFieldValueFromTable(accountName, fieldName, filter) {
}
// 台账表单的提交
/*export function SubmitAccountData(tableName, key, value, data) {
return request({
url: `${requestIP}/EditTableData?tableName=${tableName}&key=${key}&id=${value}`,
method: 'post',
data: data,
});
}*/
export function SubmitAccountData(tableName, key, value, data) {
return request({
url: `${BASEURL}/EditTableData?tableName=${tableName}&key=${key}&id=${value}`,
......@@ -165,13 +105,6 @@ export function SubmitAccountData(tableName, key, value, data) {
}
// 台账的新增
/*export function AddNewAccountData(data) {
return request({
url: `${requestIP}/`,
method: 'post',
data,
});
}*/
export function AddNewAccountData(data) {
return request({
url: `${BASEURL}/`,
......@@ -245,6 +178,13 @@ export function EditTableDataInfo(data) {
});
}
export function LoadLedgers() {
return request({
url: `PandaOMS/OMS/WorkOrderCenter/GetCM_Ledger_LoadLedgers`,
method: 'get'
})
}
export function DeleteTableDataInfo(data) {
return request({
url: `${BASEURL}/DeleteTableDataInfo`,
......
src/core/FormDesigner/config/settings.js
View file @ 3b2245b9
......@@ -8,7 +8,7 @@ const allSetting = {
const settings = [
{
title: '布局类',
title: '布局控件',
widgets: [
{
text: '分组名称',
......@@ -23,7 +23,7 @@ const settings = [
],
},
{
title: '文本类',
title: '文本控件',
widgets: [
{
text: '文本',
......@@ -127,7 +127,7 @@ const settings = [
],
},
{
title: '选择器类',
title: '选择器控件',
widgets: [
{
text: '值选择器',
......@@ -284,7 +284,7 @@ const settings = [
],
},
{
title: '时间类',
title: '时间控件',
show: true,
useCommon: true,
widgets: [
......@@ -346,7 +346,7 @@ const settings = [
],
},
{
title: '附件类',
title: '附件控件',
show: true,
useCommon: true,
widgets: [
......@@ -388,7 +388,7 @@ const settings = [
],
},
{
title: '地图类',
title: '地图控件',
show: true,
useCommon: true,
widgets: [
......@@ -403,6 +403,55 @@ const settings = [
},
],
},
{
title: '高级控件',
widgets: [
{
text: '关联表单',
name: '关联表单',
schema: {
title: '关联表单',
name: '关联表单',
type: 'string',
widget: 'RelationForm',
},
setting: {
$id: {
title: '字段名称',
type: 'string',
widget: 'FieldNames',
required: true,
displayType: 'row',
labelWidth: 80,
},
title: {
title: '标题',
type: 'string',
widget: 'htmlInput',
displayType: 'row',
labelWidth: 80,
},
source: {
title: '数据来源',
type: 'string',
displayType: 'row',
default: '{}',
widget: 'DataSource',
labelWidth: 80,
},
disabled: {
title: '只读',
type: 'boolean',
widget: 'BooleanSwitch',
displayType: 'row',
labelWidth: 80,
default: false
},
...elementSettings,
},
},
],
},
]
export default settings
\ No newline at end of file
src/core/FormRender/index.js
View file @ 3b2245b9
......@@ -4,8 +4,6 @@ import { ConfigProvider } from 'antd'
import widgets from '../widgets'
// import schema from './data'
// console.log('FormRender', widgets)
export const GlobalStore = createContext(null)
const XRender = (props, ref) => {
......@@ -23,13 +21,19 @@ const XRender = (props, ref) => {
const prefixClsWithoutParseForm = getPrefixCls()
const [extraData, setExtraData] = useState({})
const [parseFormData, setParseFormData] = useState({})
const [listData, setListData] = useState([])
const form = useForm()
return (
<GlobalStore.Provider
value={{
extraData,
setExtraData
setExtraData,
parseFormData,
setParseFormData,
listData,
setParseFormData,
}}>
<div className={prefixCls}>
<FormRender
......
src/core/widgets/advanced/RelationForm/index.js 0 → 100644
View file @ 3b2245b9
import React, { useEffect, useMemo, useState, useRef, useContext } from 'react'
import styles from './index.less'
import {
GetAccountPageList,
GetAccountConfigInfo,
GetTableGroupMeta,
GetTableDataInfo,
SaveTableDataInfo,
EditTableDataInfo,
DeleteTableDataInfo
} from '../../../../apis/process'
import { Table, Button, Modal, message, Popconfirm } from 'antd'
import { SnippetsOutlined, PlusOutlined, FormOutlined, DeleteOutlined, } from '@ant-design/icons'
import { GlobalStore } from '../../../FormRender'
const icons = {
'详情': <SnippetsOutlined />,
'编辑': <FormOutlined />,
'删除': <DeleteOutlined />,
}
let formStateStr = '添加'
const RelationForm = ({ value, onChange, schema }) => {
const fieldNames = ['事件编号', '工单编号']
const { disabled, source } = schema
const configInfo = source ? { ...JSON.parse(source) } : {}
// const { listData, setListData, parent } = useContext(GlobalStore)
// console.log(parseFormData, setParseFormData)
const [listData, setListData] = useState([])
const { codes } = parent
const [config, setConfig] = useState({ webShowFieldGroup: '', fieldGroup: '' })
const [dataSource, setDataSource] = useState([])
const [groupMeta, setGroupMeta] = useState([])
const [formData, setFormData] = useState([])
const [visible, setVisible] = useState(false)
const [formState, setFormState] = useState('详情')
const [row, setRow] = useState({})
const parseFormRef = useRef(null)
// const getMsg = () => {
// let fields = configInfo['映射字段'].map(v => v.toField)
// return `台账【${configInfo['台账名称']}】缺少${fields.join('、')}字段`
// }
// const show = useMemo(() => {
// let str = configInfo['控制规则']
// try {
// let matchArr = str ? str.match(/\{(.+?)\}/g) : []
// matchArr?.forEach(v => {
// let value = v.replace(/{/g, '').replace(/}/g, '')
// let valueArr = value ? value.split('.') : []
// let fieldValue = parseFormData[valueArr[1]]
// str = str.replace(v, `'${fieldValue}'`)
// })
// str = str.replace(/=/g, '==')
// str = str.replace(/and/g, '&&')
// str = str.replace(/or/, '||')
// if (str && eval(str)) {
// return !configInfo['默认显示']
// }
// return configInfo['默认显示']
// } catch {
// message.error('字符串规则解析失败')
// return configInfo['默认显示']
// }
// }, [parseFormData, configInfo])
// const localForm = useMemo(() => {
// const { addFieldGroup } = config
// let array = []
// let field = addFieldGroup ? addFieldGroup.split(',') : []
// const getFieldValue = (s, parseFormData, codes) => {
// return codes ? (codes[s.fromField] || parseFormData[s.fromField]) : parseFormData[s.fromField]
// }
// field.forEach(v => {
// configInfo['映射字段'].forEach(s => {
// if (s.toField === v) {
// array.push({ fieldName: s.toField, fieldValue: getFieldValue(s, parseFormData, codes) })
// }
// })
// })
// return array
// }, [parseFormData, config, configInfo, codes, dataSource])
const localForm = []
const tablesSchema = useMemo(() => {
const { fieldGroup, editFieldGroup, addFieldGroup } = config
let field = []
if (formState === '详情') {
field = fieldGroup ? fieldGroup.split(',') : []
} else if (formState === '添加') {
field = addFieldGroup ? addFieldGroup.split(',') : []
} else if (formState === '编辑') {
field = editFieldGroup ? editFieldGroup.split(',') : []
}
let groups = []
groupMeta.forEach(v => {
let schema = []
v.schema.forEach(s => {
if (field.includes(s.fieldName)) {
schema.push({ ...s, readOnly: fieldNames.includes(s.fieldName) ? 1 : s.readOnly })
}
})
if (schema.length > 0) {
groups.push({ ...v, schema, })
}
})
return {
groups,
values: formState === '添加' ? localForm : formData
}
}, [formState, localForm, groupMeta, formData, config])
const groupMetaInfo = useMemo(() => {
let array = []
const { webShowFieldGroup } = config
let field = webShowFieldGroup ? webShowFieldGroup.split(',') : []
let groupArr = groupMeta.length ? groupMeta.reduce((f, n) => f.concat(n.schema), []) : []
if (field.length > 0) {
field.forEach(v => {
groupArr.forEach(s => {
if (s.fieldName === v) {
array.push(s)
}
})
})
}
return array
}, [groupMeta, config])
const columns = useMemo(() => {
let btn = ['详情']
if (!disabled) {
btn = ['详情', '编辑', '删除']
}
let array = []
if (groupMetaInfo.length > 0) {
array.push({ title: '序号', width: 50, align: 'center', render: (_, r, i) => i + 1 })
groupMetaInfo.forEach(v => {
array.push({
title: v.alias,
dataIndex: v.fieldName,
key: v.fieldName,
ellipsis: {
visibleTitle: false,
},
// width: 120
})
})
array.push({
title: '操作',
dataIndex: '',
key: 'action',
width: btn.length === 1 ? 80 : btn.length * 40,
fixed: 'right',
render: (t, r) => {
return (
<div style={{ display: 'flex', justifyContent: 'center' }}>
{
btn.map(v => {
if (v === '删除') {
return (
<Popconfirm
// disabled={selectedRowKeys.length}
title='确定要删除数据吗？'
onConfirm={() => rowClick(v, r)}
onCancel={() => { }}
okText='确定'
cancelText='取消'
>
<Button type='link' icon={icons[v]} title={v} />
</Popconfirm>
)
}
return (
<Button
type='link'
icon={icons[v]}
title={v}
onClick={() => rowClick(v, r)}
/>
)
})
}
</div>
)
}
})
}
return array
}, [disabled, groupMetaInfo, dataSource, formState])
const isReadOnly = useMemo(() => {
if (formState === '编辑' || formState == '添加') {
return false
}
return true
}, [formState])
const rowClick = async (v, r) => {
setRow(r)
if (v === '详情') {
setFormData(getItem(r))
setVisible(true)
} else if (v === '编辑') {
setFormData(getItem(r))
setVisible(true)
} else if (v === '删除') {
deleteTableInfo(r)
}
formStateStr = v
setFormState(v)
}
const getItem = (data, max) => {
if (Array.isArray(data)) {
let obj = { ...row, ID: row.ID }
data.forEach(v => {
obj[v.fieldName] = v.fieldValue
})
return obj
} else {
let values = []
for (let key in data) {
if (max) {
values.push({ FieldName: key, FieldValue: data[key] })
} else {
values.push({ fieldName: key, fieldValue: data[key] })
}
}
return values
}
}
const deleteTableInfo = (r) => {
let listItem = { type: 'delete', accountTable: configInfo['台账名称'], id: r.ID, values: getItem('delete', r) }
if (r.ID.includes('前端ID')) {
let list = listData.filter(v => v.id !== r.ID)
setListData(list)
} else {
setListData([...listData, listItem])
}
let tableData = dataSource.filter(v => v.ID !== r.ID)
setDataSource(tableData)
onChange(`${tableData.length}`)
}
const getTableInfo = async (r) => {
const { code, data } = await GetTableDataInfo({ accountName: configInfo['台账名称'], id: Number(r.ID) })
if (code === 0) {
setFormData(data)
setVisible(true)
} else {
message.error('数据请求失败！')
}
}
const getConfig = async () => {
let { code, data, msg } = await GetAccountConfigInfo(configInfo['台账名称'])
if (code === 0) {
setConfig(data)
getTableData(data.addFieldGroup ? data.addFieldGroup.split(',') : [])
} else {
message.error(msg)
}
}
const getGroupMeta = async () => {
const { code, data, msg } = await GetTableGroupMeta(configInfo['台账名称'])
if (code === 0) {
setGroupMeta(data)
} else {
message.error(msg)
}
}
const getQueryWheres = (addFieldGroup) => {
let queryWheres = []
addFieldGroup.forEach(v => {
configInfo['映射字段'].forEach(s => {
if (s.toField === v) {
queryWheres.push({ field: s.toField, type: '等于', value: codes ? (codes[s.fromField] || parseFormData[s.fromField]) : parseFormData[s.fromField] })
}
})
})
return queryWheres
}
const getTableData = async (addFieldGroup) => {
// let queryWheres = getQueryWheres(addFieldGroup)
// if (!queryWheres.length) {
// onChange(`出错了,${getMsg()}`)
// }
let params = {
accountName: configInfo['台账名称'],
direction: 'desc',
timeField: '录入时间',
pageIndex: 0,
pageSize: 0,
// queryWheres
}
// if (queryWheres.every(v => !v.value)) return
const { code, data, msg } = await GetAccountPageList(params)
if (code === 0) {
let tableData = JSON.parse(data.jsonData)
if (Array.isArray(tableData)) {
setDataSource(tableData)
onChange(`${tableData.length}`)
} else {
setDataSource([])
onChange(`${0}`)
}
} else {
message.error(msg)
}
}
const getData = () => {
getConfig()
getGroupMeta()
}
const onOk = async () => {
let formData = parseFormRef.current.getFormValues()
let type = row.ID.includes('前端ID') ? 'add' : 'edit'
let itemData = { type, accountTable: configInfo['台账名称'], id: row.ID, values: formData }
if (formStateStr !== '添加') {
let array = []
dataSource.forEach(v => {
if (v.ID === row.ID) {
array.push({ ...v, ...getItem(formData) })
} else {
array.push({ ...v })
}
})
setDataSource(array)
onChange(`${array.length}`)
} else if (formStateStr === '添加') {
let array = [getItem(formData), ...dataSource]
setDataSource(array)
onChange(`${array.length}`)
}
let listArray = listData.filter(v => v.id !== itemData.id)
listArray.push({ ...itemData })
setListData(listArray)
setVisible(false)
}
const addClick = () => {
// if (!localForm.length) {
// return message.error(getMsg())
// }
setRow({ ID: `前端ID${new Date().getTime()}` })
setFormState('添加')
formStateStr = '添加'
setVisible(true)
}
useEffect(() => {
console.log('configInfo', configInfo)
if (configInfo['台账名称']) {
getData()
}
}, [configInfo['台账名称']])
return (
<div className={styles.relationForm}>
<div className={styles.header}>
{disabled ? null : <Button className={styles.headerBtn} type='primary' size='middle' icon={<PlusOutlined />} onClick={addClick}>添加</Button>}
</div>
<Table
rowKey={r => JSON.stringify(r)}
size='small'
bordered
columns={columns}
dataSource={dataSource}
pagination={{ total: dataSource.length, showTotal: (value) => `总计 ${value} 条` }}
/>
<Modal
title={schema.name}
width='90%'
visible={visible}
onOk={onOk}
onCancel={() => setVisible(false)}
bodyStyle={{ height: 700 }}
destroyOnClose
>
{/* <JsonToHtml
isReadOnly={isReadOnly}
tablesSchema={tablesSchema}
ref={parseFormRef}
noButtons
/> */}
</Modal>
</div>
)
}
export default RelationForm
\ No newline at end of file
src/core/widgets/advanced/RelationForm/index.less 0 → 100644
View file @ 3b2245b9
@import '~antd/es/style/themes/default.less';
.relationForm {
padding: 10px;
background: white;
.header {
height: 45px;
line-height: 45px;
position: relative;
// .account-header-title {
// width: 100%;
// text-align: center;
// font-weight: bold;
// font-size: 16px;
// }
.headerBtn {
position: absolute;
right: 0;
top: 7px;
}
}
.@{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;
}
}
}
.@{ant-prefix}-table-content {
overflow: auto;
}
}
\ No newline at end of file
src/core/widgets/advanced/index.js 0 → 100644
View file @ 3b2245b9
import RelationForm from './RelationForm'
const advanced = {
RelationForm
}
export default advanced
\ No newline at end of file
src/core/widgets/index.js
View file @ 3b2245b9
......@@ -5,6 +5,7 @@ import date from './date'
import select from './select'
import file from './file'
import coord from './coord'
import advanced from './advanced'
const widgets = {
Header,
......@@ -14,6 +15,7 @@ const widgets = {
...select,
...file,
...coord,
...advanced,
}
export default widgets
\ No newline at end of file
src/core/widgets/settings/DataSource/index.js
View file @ 3b2245b9
import React, { useState } from 'react'
import React, { useMemo, useState } from 'react'
import { Button, Form, Input, Select, Space, Modal } from 'antd'
import style from '../../style'
const options = [
{ label: '手动输入', value: '手动输入' },
{ label: '数据字典', value: '数据字典' },
]
import { LoadLedgers } from '../../../../apis/process'
const DataSource = (props) => {
console.log('props', props)
const { value, onChange } = props
const { formData } = props.addons
const { widget } = formData
const [visible, setVisible] = useState(false)
const [options, setOptions] = useState({ accountName: [] })
const [form] = Form.useForm()
const formItems = useMemo(() => {
switch (widget) {
case 'RelationForm':
return [
{
name: '台账名称',
label: '台账名称',
rules: [
{
required: true,
message: '请选择台账名称',
}
],
options: options.accountName,
onFocus: () => {
getAccountName()
}
},
]
case '':
return [
]
default: []
}
return []
}, [widget, options])
const valueShow = useMemo(() => {
return value
}, [value])
const getAccountName = async () => {
const { code, data } = await LoadLedgers()
if (code === 0) {
let accountName = data.root.map(v => {
return {
label: v.name,
value: v.name,
}
})
setOptions({ ...options, accountName })
}
}
const onFocus = () => {
setVisible(true)
......@@ -26,30 +67,37 @@ const DataSource = (props) => {
console.log('e', e)
}
const onOk = () => {
onChange(JSON.stringify(form.getFieldsValue()))
setVisible(false)
}
return (
<>
<Modal
title={`【${formData.$id}】数据来源`}
width='500px'
visible={visible}
onOk={() => setVisible(false)}
onOk={onOk}
onCancel={() => setVisible(false)}
>
<Form
form={form}
>
<Form.Item
name="area"
label="数据来源"
rules={[
{
required: true,
message: 'Missing area',
},
]}
formItems.map((v, i) => {
return (
<Form.Item
name={v.name}
label={v.label}
rules={v.rules}
key={i}
>
<Select options={options} />
<Select onFocus={v.onFocus} options={v.options} />
</Form.Item>
)
})
}
</Form>
</Modal>
<Input value={valueShow} onChange={inputChange} style={style} onClick={onFocus} />
......
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