From f2aa6b6a973e9b2f541bba7fc23e71d7791311f8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 24 二月 2022 22:12:47 +0800
Subject: [PATCH] 2022-02-24
---
src/tabviews/custom/components/module/voucher/voucherTable/index.jsx | 306 ++++++++++++++++++++++++++++++--------------------
src/tabviews/custom/components/module/voucher/index.jsx | 36 ++++-
2 files changed, 210 insertions(+), 132 deletions(-)
diff --git a/src/tabviews/custom/components/module/voucher/index.jsx b/src/tabviews/custom/components/module/voucher/index.jsx
index f5a95a1..b36187e 100644
--- a/src/tabviews/custom/components/module/voucher/index.jsx
+++ b/src/tabviews/custom/components/module/voucher/index.jsx
@@ -17,11 +17,12 @@
}
state = {
- BID: '', // 涓昏〃ID
- config: null, // 鍥捐〃閰嶇疆淇℃伅
- loading: false, // 鏁版嵁鍔犺浇鐘舵��
- data: null, // 鏁版嵁
- searchkey: null, // 杩囨护鏉′欢
+ BID: '',
+ type: '',
+ config: null,
+ loading: false,
+ data: null,
+ searchkey: null,
disableAdd: true,
disableSave: true,
typeOptions: []
@@ -33,6 +34,7 @@
this.setState({
config: fromJS(config).toJS(),
BID: BID || '',
+ type: config.wrap.type
}, () => {
this.loadData()
})
@@ -72,7 +74,7 @@
}
render() {
- const { config, disableSave, disableAdd, typeOptions, data } = this.state
+ const { config, disableSave, disableAdd, typeOptions, data, type } = this.state
return (
<div className="menu-voucher-wrap" style={config.style}>
@@ -80,8 +82,10 @@
<Button className="system-background header-btn" disabled={disableAdd} onClick={this.triggeradd}>鏂板</Button>
<Button className="system-background header-btn" disabled={disableSave} onClick={this.triggersave}>淇濆瓨</Button>
<Button className="system-background header-btn" disabled={disableSave} onClick={this.triggerprint}>鎵撳嵃</Button>
+ <Button className="system-background header-btn" disabled={disableSave} onClick={this.triggerprint}>瀵煎叆</Button>
+ <Button className="system-background header-btn" disabled={disableSave} onClick={this.triggerprint}>瀵煎嚭</Button>
</div>
- <div className="voucher-body">
+ {type === 'edit' ? <div className="voucher-body">
<div className="pre-wrap">
<div className="voucher-code">
<Select>
@@ -101,7 +105,23 @@
</div>
</div>
<VoucherTable config={config} data={data}/>
- </div>
+ </div> : null}
+ {type === 'check' ? <div className="voucher-body">
+ <div className="pre-wrap">
+ <div className="voucher-code">
+ 璁� 1 鍙�
+ </div>
+ <div className="voucher-date">
+ 鏃ユ湡锛�2022-02-24
+ </div>
+ <div className="voucher-affix">
+ 闄勫崟鎹� 2 寮�
+ <Button type="link" className="" onClick={this.triggerprint}>闄勪欢</Button>
+ <Button type="link" className="" onClick={this.triggerprint}>澶囨敞</Button>
+ </div>
+ </div>
+ <VoucherTable config={config} data={data}/>
+ </div> : null}
</div>
)
}
diff --git a/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx b/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx
index 10c587a..d4bb231 100644
--- a/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx
+++ b/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx
@@ -5,6 +5,7 @@
// import { EditOutlined } from '@ant-design/icons'
import Api from '@/api'
+import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
@@ -62,17 +63,27 @@
const { value } = this.state
this.setState({editing: false})
- setTimeout(() => {
- if (col.enter === '$next') {
- MKEmitter.emit('nextLine', col, record.uuid)
- } else {
- MKEmitter.emit('tdFocus', col.enter + record.uuid)
- }
- }, 50)
if (value !== record[col.field]) {
- MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value})
+ let line = {...record, [col.field]: value}
+
+ if (col.field === 'debtor') {
+ line.creditor = ''
+ } else {
+ line.debtor = ''
+ }
+
+ MKEmitter.emit('changeRecord', col.tableId, line)
}
+
+ setTimeout(() => {
+ if (col.field === 'creditor') {
+ MKEmitter.emit('nextLine', col, record)
+ } else {
+ let cl = {remark: 'subject', subject: 'debtor', debtor: 'creditor'}
+ MKEmitter.emit('tdFocus', cl[col.uuid] + record.uuid)
+ }
+ }, 50)
}
focus = () => {
@@ -80,9 +91,7 @@
if (record.type === 'total') return
- let val = record[col.field] !== undefined ? record[col.field] : ''
-
- this.setState({editing: true, value: val}, () => {
+ this.setState({editing: true, value: record[col.field]}, () => {
let node = document.getElementById(col.uuid + record.uuid)
node && node.select()
})
@@ -95,7 +104,15 @@
this.setState({editing: false})
if (value !== record[col.field]) {
- MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value})
+ let line = {...record, [col.field]: value}
+
+ if (col.field === 'debtor') {
+ line.creditor = ''
+ } else {
+ line.debtor = ''
+ }
+
+ MKEmitter.emit('changeRecord', col.tableId, line)
}
}
@@ -111,12 +128,12 @@
let colSpan = 1
if (col.field === 'remark') {
+ let val = record.remark || ''
+
if (record.type === 'total') {
- children = <div className="content-wrap" style={{lineHeight: '60px'}}>鍚堣: {record.total}</div>
+ children = <div className="content-wrap" style={{lineHeight: '60px'}}>鍚堣: {val}</div>
colSpan = 2
} else {
- let val = record.remark || ''
-
if (editing) {
children = <Input.TextArea id={col.uuid + record.uuid} autoSize={false} defaultValue={val} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/>
} else {
@@ -205,78 +222,78 @@
}
UNSAFE_componentWillMount () {
- let tableId = (() => {
- let uuid = []
- let _options = 'abcdefghigklmnopqrstuv'
- for (let i = 0; i < 19; i++) {
- uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
+ const { config } = this.props
+
+ let data = [
+ {remark: '鎻愮幇', subject: '1001 搴撳瓨鐜伴噾', debtor: 124, creditor: ''},
+ {remark: '璐叆鍥哄畾璧勪骇', subject: '1001 搴撳瓨鐜伴噾', debtor: '', creditor: 124},
+ {remark: '杞粨閿�鍞垚鏈�', subject: '1001 搴撳瓨鐜伴噾', debtor: -524, creditor: ''},
+ {remark: '鎻愮幇', subject: '1001 搴撳瓨鐜伴噾', debtor: 34, creditor: ''},
+ ]
+
+ data = this.initData(data)
+ data.push(this.getTotalLine(data))
+
+ let columns = [
+ {
+ title: '鎽樿',
+ dataIndex: 'remark',
+ key: 'remark',
+ width: '22%',
+ onCell: record => ({
+ record,
+ col: {uuid: 'remark', field: 'remark', tableId: config.uuid},
+ })
+ },
+ {
+ title: '浼氳绉戠洰',
+ dataIndex: 'subject',
+ key: 'subject',
+ width: '34%',
+ onCell: record => ({
+ record,
+ col: {uuid: 'subject', field: 'subject', tableId: config.uuid},
+ })
+ },
+ {
+ title: () => (<>
+ <div className="money-title">鍊熸柟閲戦</div>
+ <div className="money-uint">
+ <span>浜�</span> <span>鍗�</span> <span>鐧�</span> <span>鍗�</span> <span>涓�</span> <span>鍗�</span>
+ <span>鐧�</span> <span>鍗�</span> <span>鍏�</span> <span>瑙�</span> <span className="last">鍒�</span>
+ </div>
+ </>),
+ dataIndex: 'debtor',
+ key: 'debtor',
+ width: '22%',
+ onCell: record => ({
+ record,
+ col: {uuid: 'debtor', field: 'debtor', tableId: config.uuid},
+ })
+ },
+ {
+ title: () => (<>
+ <div className="money-title">璐锋柟閲戦</div>
+ <div className="money-uint">
+ <span>浜�</span> <span>鍗�</span> <span>鐧�</span> <span>鍗�</span> <span>涓�</span> <span>鍗�</span>
+ <span>鐧�</span> <span>鍗�</span> <span>鍏�</span> <span>瑙�</span> <span className="last">鍒�</span>
+ </div>
+ </>),
+ dataIndex: 'creditor',
+ key: 'creditor',
+ width: '22%',
+ onCell: record => ({
+ record,
+ col: {uuid: 'creditor', field: 'creditor', tableId: config.uuid},
+ })
}
- return uuid.join('')
- }) ()
+ ]
this.setState({
- data: [
- {uuid: 'dsfdsfdsfs', remark: '鎻愮幇', subject: '1001 搴撳瓨鐜伴噾', debtor: 124, creditor: ''},
- {uuid: 'dsfdsfsdfdsfs', remark: '璐叆鍥哄畾璧勪骇', subject: '1001 搴撳瓨鐜伴噾', debtor: '', creditor: 124},
- {uuid: 'dsfdsfsdgdrsfs', remark: '杞粨閿�鍞垚鏈�', subject: '1001 搴撳瓨鐜伴噾', debtor: -524, creditor: ''},
- {uuid: 'dsfdsfsdgfdsgdsfs', remark: '鎻愮幇', subject: '1001 搴撳瓨鐜伴噾', debtor: 34, creditor: ''},
- {uuid: 'dsfdsfsdgfdsswgdsfs', type: 'total', total: this.changeMoneyToChinese(354.24), debtor: 354.24, creditor: ''},
- ],
- columns: [
- {
- title: '鎽樿',
- dataIndex: 'remark',
- key: 'remark',
- width: '22%',
- onCell: record => ({
- record,
- col: {uuid: 'remark', field: 'remark', tableId: tableId},
- })
- },
- {
- title: '浼氳绉戠洰',
- dataIndex: 'subject',
- key: 'subject',
- width: '34%',
- onCell: record => ({
- record,
- col: {uuid: 'subject', field: 'subject', tableId: tableId},
- })
- },
- {
- title: () => (<>
- <div className="money-title">鍊熸柟閲戦</div>
- <div className="money-uint">
- <span>浜�</span> <span>鍗�</span> <span>鐧�</span> <span>鍗�</span> <span>涓�</span> <span>鍗�</span>
- <span>鐧�</span> <span>鍗�</span> <span>鍏�</span> <span>瑙�</span> <span className="last">鍒�</span>
- </div>
- </>),
- dataIndex: 'debtor',
- key: 'debtor',
- width: '22%',
- onCell: record => ({
- record,
- col: {uuid: 'debtor', field: 'debtor', tableId: tableId},
- })
- },
- {
- title: () => (<>
- <div className="money-title">璐锋柟閲戦</div>
- <div className="money-uint">
- <span>浜�</span> <span>鍗�</span> <span>鐧�</span> <span>鍗�</span> <span>涓�</span> <span>鍗�</span>
- <span>鐧�</span> <span>鍗�</span> <span>鍏�</span> <span>瑙�</span> <span className="last">鍒�</span>
- </div>
- </>),
- dataIndex: 'creditor',
- key: 'creditor',
- width: '22%',
- onCell: record => ({
- record,
- col: {uuid: 'creditor', field: 'creditor', tableId: tableId},
- })
- }
- ],
- tableId
+ data: data,
+ edData: fromJS(data).toJS(),
+ columns,
+ tableId: config.uuid
})
}
@@ -306,6 +323,53 @@
if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
this.setState({data: nextProps.data || []})
}
+ }
+
+ initData = (data) => {
+ let _data = data.map((item, i) => {
+ item.uuid = Utils.getuuid()
+ item.index = i
+
+ return item
+ })
+
+ if (_data.length < 4) {
+ for (let i = _data.length - 1; i < 4; i++) {
+ _data.push({uuid: Utils.getuuid(), index: i + 1, remark: '', subject: '', debtor: '', creditor: ''})
+ }
+ }
+ return _data
+ }
+
+ getTotalLine = (data) => {
+ let totalLine = {uuid: Utils.getuuid(), type: 'total'}
+ let debtor = ''
+ let creditor = ''
+
+ data.forEach(item => {
+ if (typeof(item.debtor) === 'number') {
+ if (debtor === '') {
+ debtor = 0
+ }
+
+ debtor += item.debtor
+ } else if (typeof(item.creditor) === 'number') {
+ if (debtor === '') {
+ debtor = 0
+ }
+ if (creditor === '') {
+ creditor = 0
+ }
+ creditor += item.creditor
+ }
+ })
+
+ totalLine.debtor = debtor
+ totalLine.creditor = creditor
+
+ totalLine.remark = this.changeMoneyToChinese(debtor)
+
+ return totalLine
}
changeMoneyToChinese = (money) => {
@@ -391,24 +455,22 @@
return ChineseStr
}
- nextLine = (col, index) => {
- const { setting } = this.props
- const { edData, initEditLine, tableId } = this.state
+ nextLine = (col, record) => {
+ const { edData, tableId } = this.state
if (col.tableId !== tableId) return
- index = +index
+ if (record.index < edData.length - 2) {
+ MKEmitter.emit('tdFocus', 'remark' + edData[record.index + 1].uuid)
+ } else {
+ let _data = fromJS(edData).toJS()
+ let line = {uuid: Utils.getuuid(), index: _data.length - 1, remark: record.remark || '', subject: '', debtor: '', creditor: ''}
- if (index < edData.length && initEditLine) {
- MKEmitter.emit('tdFocus', initEditLine.uuid + (index + 1))
- } else if (col.footEnter === 'add' && setting.addable === 'true') {
- setTimeout(() => {
- this.plusLine(initEditLine)
- }, 10)
- } else if (col.footEnter === 'sub') {
- setTimeout(() => {
- this.checkData()
- }, 10)
+ _data.splice(_data.length - 1, 0, line)
+
+ this.setState({edData: _data}, () => {
+ MKEmitter.emit('tdFocus', 'remark' + line.uuid)
+ })
}
}
@@ -430,32 +492,23 @@
if (id !== tableId) return
- let _data = []
+ let _data = edData.filter(item => item.uuid !== record.uuid)
- if (record.$$uuid === '$new') {
- _data = edData.filter(item => item.uuid !== record.uuid)
- _data = _data.map((item, index) => {
- item.key = index
- return item
- })
- } else {
- _data = edData.map(item => {
- if (item.uuid === record.uuid) {
- record.$deleted = true
- return record
- } else {
- return item
- }
- })
+ _data.pop()
+
+ if (_data.length < 4) {
+ for (let i = _data.length - 1; i < 4; i++) {
+ _data.push({uuid: Utils.getuuid(), index: i + 1, remark: '', subject: '', debtor: '', creditor: ''})
+ }
}
+
+ _data.push(this.getTotalLine(_data))
this.setState({edData: _data})
}
- changeRecord = (id, record) => {
- const { tableId } = this.state
-
- if (id !== tableId) return
+ changeRecord = (tableId, record) => {
+ if (tableId !== this.state.tableId) return
let _data = this.state.edData.map(item => {
if (item.uuid === record.uuid) {
@@ -464,6 +517,14 @@
return item
}
})
+
+ _data.pop()
+
+ if (record.index === _data.length - 1) {
+ _data.push({uuid: Utils.getuuid(), index: record.index + 1, remark: '', subject: '', debtor: '', creditor: ''})
+ }
+
+ _data.push(this.getTotalLine(_data))
this.setState({edData: _data})
}
@@ -644,7 +705,7 @@
}
render() {
- const { tableId, data, columns} = this.state
+ const { edData, columns} = this.state
const components = {
body: {
@@ -653,16 +714,13 @@
}
}
- // 鏁版嵁鏀惰捣鏃讹紝杩囨护宸查�夋暟鎹�
- let _data = data
-
return (
- <div className="voucher-table-wrap" id={tableId}>
+ <div className="voucher-table-wrap">
<Table
rowKey="uuid"
components={components}
columns={columns}
- dataSource={_data}
+ dataSource={edData}
bordered={true}
// loading={this.props.loading}
onRow={(record, index) => {
--
Gitblit v1.8.0