From da64ab0923bf8817fc8599a6e37b953ce38f64c8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 27 八月 2023 18:37:36 +0800
Subject: [PATCH] 2023-08-27
---
src/templates/zshare/modalform/datatable/index.jsx | 207 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 140 insertions(+), 67 deletions(-)
diff --git a/src/templates/zshare/modalform/datatable/index.jsx b/src/templates/zshare/modalform/datatable/index.jsx
index 50e0cc6..8f3e62b 100644
--- a/src/templates/zshare/modalform/datatable/index.jsx
+++ b/src/templates/zshare/modalform/datatable/index.jsx
@@ -2,12 +2,15 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
-import { Table, Input, Popconfirm, Form, Icon, notification } from 'antd'
+import { Table, Input, Popconfirm, Form, notification, message } from 'antd'
+import { PlusOutlined, EditOutlined, DeleteOutlined, SwapOutlined } from '@ant-design/icons'
import Utils from '@/utils/utils.js'
-import FileUpload from '@/tabviews/zshare/fileupload'
+import asyncComponent from '@/utils/asyncComponent'
+// import FileUpload from '@/tabviews/zshare/fileupload'
import './index.scss'
+const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const EditableContext = React.createContext()
let dragingIndex = -1
@@ -70,9 +73,15 @@
class EditableCell extends Component {
getInput = (form) => {
- const { inputType } = this.props
+ const { inputType, record } = this.props
if (inputType === 'file') {
- return <FileUpload maxFile={1} fileType="picture-card"/>
+ return <SourceComponent initialValue={record ? (record.$url || '') : ''} type="" placement="right"/>
+ // return <FileUpload config={{
+ // initval: record ? (record.$url || '') : '',
+ // suffix: '',
+ // maxfile: 1,
+ // fileType: 'picture-card'
+ // }}/>
} else {
return <Input onPressEnter={() => this.getValue(form)} />
}
@@ -85,15 +94,6 @@
return
}
- if (row.$url && Array.isArray(row.$url)) {
- if (!row.$url[0]) {
- row.$url = ''
- } else if (row.$url[0].origin) {
- row.$url = row.$url[0].url || ''
- } else if (!row.$url[0].origin && row.$url[0].status === 'done' && row.$url[0].response) {
- row.$url = row.$url[0].response
- }
- }
this.props.onSave({...record, ...row})
})
}
@@ -118,29 +118,17 @@
_val = record[dataIndex]
}
- if (dataIndex === '$url' && _val) {
- _val = [{
- uid: `10086`,
- name: _val.slice(_val.lastIndexOf('/') + 1),
- status: 'done',
- url: _val,
- origin: true
- }]
- } else if (dataIndex === '$url') {
- _val = []
- }
-
return (
<td {...restProps}>
{editing ? (
- <Form.Item style={{ margin: 0 }}>
+ <Form.Item style={{ margin: '0 -5px 0 -5px' }}>
{getFieldDecorator(dataIndex, {
- rules: [
- {
- required: dataIndex === '$value',
- message: `Please Input ${title}!`,
- },
- ],
+ // rules: [
+ // {
+ // required: dataIndex === '$value',
+ // message: `Please Input ${title}!`,
+ // },
+ // ],
initialValue: _val,
})(this.getInput(form))}
</Form.Item>
@@ -158,9 +146,11 @@
class EdiDataTable extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
- type: PropTypes.object, // 鏁版嵁绫诲瀷锛屾枃鏈�佸浘鐗�
+ transfield: PropTypes.object, // 瀛楁鍚嶇О
+ type: PropTypes.string, // 鏄惁涓哄叧鑱旇〃鍗�
+ display: PropTypes.string, // 鏁版嵁绫诲瀷锛屾枃鏈�佸浘鐗�
fields: PropTypes.array, // 瀛楁闆�
+ linkSubFields: PropTypes.array, // 濉厖瀛楁
onChange: PropTypes.func // 鏁版嵁鍙樺寲
}
@@ -180,7 +170,13 @@
}
UNSAFE_componentWillReceiveProps (nextProps) {
- if (!is(fromJS(this.props.fields), fromJS(nextProps.fields)) || !is(fromJS(this.props.type), fromJS(nextProps.type))) {
+ if (
+ !is(fromJS(this.props.fields), fromJS(nextProps.fields)) ||
+ !is(fromJS(this.props.linkSubFields), fromJS(nextProps.linkSubFields)) ||
+ this.props.display !== nextProps.display ||
+ (nextProps.multiple && this.props.multiple !== nextProps.multiple) ||
+ this.props.type !== nextProps.type
+ ) {
this.setState({editingKey: ''}, () => {
this.setState({
columns: this.getCloumns()
@@ -190,27 +186,54 @@
}
getCloumns = () => {
- const { type, fields } = this.props
+ const { display, fields, linkSubFields, transfield, type, multiple } = this.props
let columns = []
+ let keys = ['ParentID', 'pid']
- if (type === 'picture') {
+ if (display === 'picture') {
columns.push({
title: 'url',
dataIndex: '$url',
inputType: 'file',
- width: '40%',
+ // width: '40%',
editable: true,
render: (text) => {
if (!text) return ''
return <span style={{display: 'block', width: '70px', height: '70px'}}><img style={{width: '100%', height: '100%'}} src={text} alt="" /></span>
}
})
- } else {
- columns = fields.map(item => ({
+ } else if (display === 'color') {
+ columns.push({
+ title: 'Color',
+ dataIndex: '$color',
+ inputType: 'text',
+ editable: true,
+ render: (text) => {
+ if (!text) return ''
+ return <div style={{height: '20px', background: text}}></div>
+ }
+ })
+ }
+
+ fields.forEach(item => {
+ keys.push(item.field)
+ columns.push({
title: item.field,
dataIndex: item.field,
editable: true,
- }))
+ })
+ })
+
+ if (linkSubFields.length > 0) {
+ linkSubFields.forEach(m => {
+ if (keys.includes(m)) return
+
+ columns.push({
+ title: transfield[m] || m,
+ dataIndex: m,
+ editable: true,
+ })
+ })
}
columns.unshift({
@@ -218,6 +241,22 @@
dataIndex: '$value',
editable: true,
})
+
+ if (multiple === 'dropdown' && display === 'text') {
+ columns.unshift({
+ title: 'pid',
+ dataIndex: 'pid',
+ editable: true,
+ })
+ }
+
+ if (type === 'link') {
+ columns.unshift({
+ title: 'ParentID',
+ dataIndex: 'ParentID',
+ editable: true,
+ })
+ }
columns.push({
title: '鎿嶄綔',
@@ -240,15 +279,16 @@
</span>
) : (
<div className={'operation-btn' + (editingKey !== '' ? ' disabled' : '')}>
- <span className="primary" onClick={() => {editingKey === '' && this.edit(record.key)}}><Icon type="edit" /></span>
+ <span className="primary" onClick={() => {editingKey === '' && this.edit(record.key)}}><EditOutlined /></span>
+ <span className="hide-control" title="鏄剧ず/闅愯棌" onClick={() => {editingKey === '' && this.handleHide(record.key)}}><SwapOutlined /></span>
{editingKey === '' ? <Popconfirm
overlayClassName="popover-confirm"
- title={this.props.dict['model.query.delete']}
+ title="纭畾鍒犻櫎鍚�?"
onConfirm={() => this.handleDelete(record.key)
}>
- <span className="danger"><Icon type="delete" /></span>
+ <span className="danger"><DeleteOutlined /></span>
</Popconfirm> : null}
- {editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null}
+ {editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null}
</div>
)
}
@@ -264,8 +304,20 @@
}
onSave = (record) => {
+ const { type } = this.props
const newData = [...this.state.data]
const index = newData.findIndex(item => record.key === item.key)
+
+ if (type === 'link') {
+ if (newData.filter(m => record.key !== m.key && record.$value === m.$value && record.ParentID === m.ParentID).length > 0) {
+ message.warning('鐩稿悓ParentID涓嬶紝姝alue鍊煎凡瀛樺湪锛�')
+ }
+ } else {
+ if (newData.filter(m => record.key !== m.key && record.$value === m.$value).length > 0) {
+ message.warning('姝alue鍊煎凡瀛樺湪锛�')
+ }
+ }
+
if (index > -1) {
newData.splice(index, 1, record)
this.setState({ data: newData, editingKey: '' }, () => {
@@ -286,23 +338,26 @@
}
save(form, key) {
+ const { type } = this.props
+
form.validateFields((error, row) => {
if (error) {
return;
}
- if (row.$url && Array.isArray(row.$url)) {
- if (!row.$url[0]) {
- row.$url = ''
- } else if (row.$url[0].origin) {
- row.$url = row.$url[0].url || ''
- } else if (!row.$url[0].origin && row.$url[0].status === 'done' && row.$url[0].response) {
- row.$url = row.$url[0].response
+ const newData = [...this.state.data]
+ const index = newData.findIndex(item => key === item.key)
+
+ if (type === 'link') {
+ if (newData.filter(m => key !== m.key && row.$value === m.$value && row.ParentID === m.ParentID).length > 0) {
+ message.warning('鐩稿悓ParentID涓嬶紝姝alue鍊煎凡瀛樺湪锛�')
+ }
+ } else {
+ if (newData.filter(m => key !== m.key && row.$value === m.$value).length > 0) {
+ message.warning('姝alue鍊煎凡瀛樺湪锛�')
}
}
- const newData = [...this.state.data]
- const index = newData.findIndex(item => key === item.key)
if (index > -1) {
const item = newData[index]
newData.splice(index, 1, {
@@ -322,25 +377,27 @@
}
handleAdd = () => {
- const { fields, type } = this.props
- if (this.state.data.length >= 20) {
+ const { fields, display } = this.props
+ if (this.state.data.length >= 100) {
notification.warning({
top: 92,
- message: '鏈�澶氬彲娣诲姞20椤癸紒',
+ message: '鏈�澶氬彲娣诲姞100椤癸紒',
duration: 5
})
return
}
- let item = { key: Utils.getuuid(), $value: `${this.state.data.length + 1}` }
+ let item = { key: Utils.getuuid(), $value: `${this.state.data.length + 1}`, ParentID: '' }
- if (type === 'picture') {
+ if (display === 'picture') {
item.$url = ''
- } else {
- fields.forEach(f => {
- item[f.field] = `${this.state.data.length + 1}`
- })
+ } else if (display === 'color') {
+ item.$color = ''
}
+
+ fields.forEach(f => {
+ item[f.field] = `${this.state.data.length + 1}`
+ })
let data = [...this.state.data, item]
@@ -351,6 +408,20 @@
edit(key) {
this.setState({ editingKey: key })
+ }
+
+ handleHide = (key) => {
+ let _data = this.state.data.map(item => {
+ if (item.key === key) {
+ item.Hide = !item.Hide
+ }
+ return item
+ })
+ this.setState({
+ data: _data
+ }, () => {
+ this.props.onChange(_data)
+ })
}
moveRow = (dragIndex, hoverIndex) => {
@@ -369,6 +440,8 @@
}
render() {
+ const { display, fields } = this.props
+
const components = {
body: {
row: DragableBodyRow,
@@ -394,16 +467,16 @@
})
let addable = false
- if (this.props.type === 'picture') {
+ if (display === 'picture' || display === 'color') {
addable = true
- } else if (this.props.fields && this.props.fields.length > 0) {
+ } else if (fields && fields.length > 0) {
addable = true
}
return (
<EditableContext.Provider value={this.props.form}>
<div className="modal-card-data-table">
- {addable ? <Icon className="add-row" type="plus" onClick={this.handleAdd} /> : null}
+ {addable ? <PlusOutlined className="add-row" onClick={this.handleAdd} /> : null}
<DndProvider>
<Table
components={components}
@@ -411,7 +484,7 @@
rowKey="key"
dataSource={this.state.data}
columns={columns}
- rowClassName="editable-row"
+ rowClassName={(record) => record.Hide ? 'editable-row hide' : 'editable-row'}
onRow={(record, index) => ({
index,
moveAble: !this.state.editingKey,
--
Gitblit v1.8.0