import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Popover, Button, Modal } from 'antd'
|
import { EditOutlined, ToolOutlined, DeleteOutlined, LeftOutlined, FontColorsOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Utils from '@/utils/utils.js'
|
import asyncIconComponent from '@/utils/asyncIconComponent'
|
import { getTables, checkComponent } from '@/utils/utils-custom.js'
|
import MKEmitter from '@/utils/events.js'
|
import VerifyCard from './verifycard'
|
import getWrapForm from './options'
|
|
import './index.scss'
|
|
const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
|
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
|
|
class Invoice extends Component {
|
static propTpyes = {
|
card: PropTypes.object,
|
deletecomponent: PropTypes.func,
|
updateConfig: PropTypes.func,
|
}
|
|
state = {
|
card: null,
|
date: moment().format('YYYY年MM月'),
|
btn: null
|
}
|
|
UNSAFE_componentWillMount () {
|
const { card } = this.props
|
|
if (card.isNew) {
|
let _card = {
|
uuid: card.uuid,
|
type: card.type,
|
format: 'array', // 组件属性 - 数据格式
|
pageable: false, // 组件属性 - 是否可分页
|
switchable: false, // 组件属性 - 数据是否可切换
|
width: card.width || 24,
|
name: '发票',
|
subtype: card.subtype,
|
fixedCol: true,
|
wrap: { name: '发票', width: card.width || 24, datatype: 'static' },
|
style: { paddingLeft: '20px', paddingRight: '20px', paddingTop: '10px', paddingBottom: '10px' },
|
setting: { interType: 'system', primaryKey: 'ID' },
|
columns: [],
|
scripts: [],
|
buyer: {
|
pageable: true,
|
format: 'array',
|
fixedCol: true,
|
subtype: 'invTable',
|
setting: { interType: 'system' },
|
columns: [],
|
scripts: [],
|
search: [
|
{field: 'from_to_name', label: '企业名称', initval: '', type: 'text', match: 'like', uuid: Utils.getuuid()},
|
{field: 'from_to_tax_no', label: '企业税号', initval: '', type: 'text', match: 'like', uuid: Utils.getuuid()},
|
],
|
},
|
detail: {
|
pageable: true,
|
format: 'array',
|
fixedCol: true,
|
subtype: 'invTable',
|
setting: { interType: 'system' },
|
columns: [],
|
scripts: [],
|
search: [
|
{field: 'productname', label: '商品名称', initval: '', type: 'text', match: 'like', uuid: Utils.getuuid()},
|
{field: 'productcode', label: '商品编码', initval: '', type: 'text', match: 'like', uuid: Utils.getuuid()},
|
],
|
},
|
billSaveBtn: {type: 'billsave', parId: card.uuid, intertype: 'system', label: '保存单据'},
|
billOutBtn: {type: 'billout', parId: card.uuid, intertype: 'custom', label: '提交开票', procMode: 'system'},
|
}
|
|
let buys = [
|
['企业名称', 'from_to_name'],
|
['企业税号', 'from_to_tax_no'],
|
['地址', 'from_to_addr', 'Nvarchar(100)'],
|
['电话', 'from_to_tel'],
|
['开户行', 'from_to_bank_name'],
|
['银行账号', 'from_to_account_no'],
|
['手机号', 'from_to_mob'],
|
['邮箱', 'from_to_email'],
|
['企业编码', 'from_to_code']
|
]
|
|
buys.forEach((cell, index) => {
|
_card.buyer.columns.push({$index: index + 1, datatype: 'Nvarchar(50)', field: cell[1], label: cell[0], uuid: Utils.getuuid()})
|
})
|
|
let details = [
|
['id', 'id'],
|
['商品编码', 'productcode'],
|
['商品名称', 'productname'],
|
['规格型号', 'spec'],
|
['描述', 'Description'],
|
['计量单位', 'unit'],
|
['单价', 'unitprice', 'Decimal(18,10)'],
|
['税务分类编码', 'tax_classify_code'],
|
['税务分类名称', 'tax_classify_name'],
|
['一般纳税人税率', 'general_tax_rate', 'Decimal(18,2)'],
|
['小规模纳税人征收率', 'small_tax_rate', 'Decimal(18,2)'],
|
['是否享受优惠政策', 'free_tax_mark'],
|
['优惠政策类型', 'vat_special_management'],
|
['tax_item', 'tax_item'],
|
['tax_method', 'tax_method'],
|
]
|
|
details.forEach((cell, index) => {
|
_card.detail.columns.push({$index: index + 1, datatype: cell[2] || 'Nvarchar(50)', field: cell[1], label: cell[0], uuid: Utils.getuuid()})
|
})
|
|
let cols = [
|
['ID', 'ID'],
|
['开票申请单号', 'io'],
|
['发票种类', 'invoice_type'],
|
['开票类型', 'business_type', 'Nvarchar(20)'],
|
['购买方名称', 'from_to_name'],
|
['购买方税号', 'from_to_tax_no'],
|
['购买方地址', 'from_to_addr', 'Nvarchar(100)'],
|
['购买方电话', 'from_to_tel'],
|
['购买方开户行', 'from_to_bank_name'],
|
['购买方银行账号', 'from_to_account_no'],
|
['购买方手机号', 'from_to_mob'],
|
['购买方邮箱', 'from_to_email'],
|
['购买方编码', 'from_to_code'],
|
['销售方名称', 'orgname'],
|
['销售方税号', 'tax_no'],
|
['销售方地址', 'addr', 'Nvarchar(100)'],
|
['销售方电话', 'tel'],
|
['销售方开户行', 'bank_name'],
|
['销售方银行账号', 'account_no'],
|
['备注', 'remark', 'Nvarchar(512)'],
|
['收款人', 'payee'],
|
['复核人', 'reviewer'],
|
['开票人', 'drawer'],
|
['jskey', 'jskey'],
|
['行号', 'invoice_lp'],
|
['商品编码', 'productcode'],
|
['商品名称', 'productname'],
|
['规格型号', 'spec'],
|
['计量单位', 'unit'],
|
['数量', 'bill_count', 'Decimal(18,10)'],
|
['单价', 'unitprice', 'Decimal(18,10)'],
|
['金额', 'amount_line', 'Decimal(18,2)'],
|
['税务分类编码', 'tax_classify_code'],
|
['税务分类名称', 'tax_classify_name'],
|
['税率', 'tax_rate', 'Decimal(18,2)'],
|
['税额', 'tax_amount', 'Decimal(18,2)'],
|
['是否享受优惠政策', 'free_tax_mark'],
|
['优惠政策类型', 'vat_special_management'],
|
['tax_item', 'tax_item'],
|
['tax_method', 'tax_method'],
|
]
|
|
cols.forEach((cell, index) => {
|
_card.columns.push({$index: index + 1, datatype: cell[2] || 'Nvarchar(50)', field: cell[1], label: cell[0], uuid: Utils.getuuid()})
|
})
|
|
this.updateComponent(_card)
|
} else {
|
let _card = fromJS(card).toJS()
|
|
this.setState({
|
card: _card
|
})
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
/**
|
* @description 卡片行外层信息更新（数据源，样式等）
|
*/
|
updateComponent = (card) => {
|
card.width = card.wrap.width
|
card.name = card.wrap.name
|
|
if (window.GLOB.styling && card.errors) { // 样式修改时不做筛查
|
this.setState({
|
card: card
|
})
|
|
this.props.updateConfig(card)
|
return
|
}
|
|
card.$c_ds = card.wrap.datatype === 'dynamic'
|
card.errors = checkComponent(card)
|
|
if (card.errors.length === 0) {
|
if (card.buyer.setting.interType === 'system' && card.buyer.setting.execute !== 'false' && !card.buyer.setting.dataresource) {
|
card.errors.push({ level: 0, detail: '-购买方 未设置数据源！'})
|
} else if (card.buyer.setting.interType === 'system' && card.buyer.setting.execute === 'false' && card.buyer.scripts.filter(script => script.status !== 'false').length === 0) {
|
card.errors.push({ level: 0, detail: '-购买方 数据源中无可用脚本！'})
|
}
|
}
|
if (card.errors.length === 0) {
|
if (card.detail.setting.interType === 'system' && card.detail.setting.execute !== 'false' && !card.detail.setting.dataresource) {
|
card.errors.push({ level: 0, detail: '-明细 未设置数据源！'})
|
} else if (card.detail.setting.interType === 'system' && card.detail.setting.execute === 'false' && card.detail.scripts.filter(script => script.status !== 'false').length === 0) {
|
card.errors.push({ level: 0, detail: '-明细 数据源中无可用脚本！'})
|
}
|
}
|
|
if (!card.billSaveBtn.scripts || card.billSaveBtn.scripts.length === 0) {
|
card.errors.push({ level: 0, detail: '未添加单据保存脚本！'})
|
// } else if (!card.billOutBtn.scripts || card.billOutBtn.scripts.length === 0) {
|
// card.errors.push({ level: 0, detail: '未添加提交开票前置脚本！'})
|
// } else if (card.billSaveBtn.cbScripts.length === 0) {
|
// card.errors.push({ level: 0, detail: '未添加提交开票回调脚本！'})
|
}
|
|
if (card.errors.length === 0) {
|
card.$tables = getTables(card)
|
card.$tables = [...card.$tables, ...getTables(card.buyer)]
|
card.$tables = [...card.$tables, ...getTables(card.detail)]
|
}
|
|
this.setState({
|
card: card
|
})
|
|
this.props.updateConfig(card)
|
}
|
|
changeStyle = () => {
|
const { card } = this.state
|
|
MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow', 'clear'], card.style, this.getStyle)
|
}
|
|
getStyle = (style) => {
|
let _card = {...this.state.card, style}
|
|
this.updateComponent(_card)
|
}
|
|
getWrapForms = () => {
|
const { card } = this.state
|
|
return getWrapForm(card.wrap)
|
}
|
|
updateWrap = (res) => {
|
this.updateComponent({...this.state.card, wrap: res})
|
}
|
|
verifySubmit = () => {
|
this.verifyRef.handleConfirm().then(res => {
|
if (res.type === 'billout') {
|
this.updateComponent({...this.state.card, billOutBtn: res})
|
} else {
|
this.updateComponent({...this.state.card, billSaveBtn: res})
|
}
|
|
this.setState({ btn: null })
|
})
|
}
|
|
render() {
|
const { card, date, btn } = this.state
|
|
let style = {...card.style}
|
if (card.wrap.invColor) {
|
style['--inv-color'] = card.wrap.invColor
|
}
|
|
return (
|
<div className="menu-invoice-box" style={style} id={card.uuid}>
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<NormalForm title="基本设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
|
<EditOutlined style={{color: '#1890ff'}} title="编辑"/>
|
</NormalForm>
|
<FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
|
<DeleteOutlined className="close" title="删除组件" onClick={() => this.props.deletecomponent(card.uuid)} />
|
{card.wrap.datatype === 'dynamic' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/>}
|
</div>
|
} trigger="hover">
|
<ToolOutlined />
|
</Popover>
|
<div className="inv-action">
|
{card.wrap.backBtn === 'show' ? <Button className="mk-back"><LeftOutlined />返回</Button> : null}
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined style={{color: '#1890ff'}} onClick={() => this.setState({btn: card.billSaveBtn})} title="编辑"/>
|
</div>
|
} trigger="hover">
|
<Button className="mk-bill">保存单据</Button>
|
</Popover>
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<EditOutlined style={{color: '#1890ff'}} onClick={() => this.setState({btn: card.billOutBtn})} title="编辑"/>
|
</div>
|
} trigger="hover">
|
<Button className="mk-submit">提交开票</Button>
|
</Popover>
|
</div>
|
<div className="inv-header">
|
<div className="mk-select">请选择发票种类</div>
|
<div className="date">开票日期：{date}</div>
|
</div>
|
<div className="inv-body">
|
<div className="inv-main-content">
|
<div className="inv-buyer">
|
<div className="inv-label">购买方</div>
|
<div className="inv-content">
|
<div className="mk-input">
|
<label>名称：</label>
|
<span className="content">请输入购买方名称</span>
|
<span className="extra">
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<SettingComponent config={card.buyer} updateConfig={(res) => this.updateComponent({...card, buyer: res})} />
|
</div>
|
} trigger="hover">
|
<EllipsisOutlined />
|
</Popover>
|
</span>
|
</div>
|
<div className="mk-input">
|
<label>纳税人识别号：</label>
|
<span className="content">请输入购买方纳税人识别号</span>
|
</div>
|
<div className="mk-input">
|
<label>地址、电话：</label>
|
<span className="content">请输入购买方地址</span>
|
<span className="content">请输入购买方电话</span>
|
</div>
|
<div className="mk-input">
|
<label>开户行及账号：</label>
|
<span className="content">请输入购买方开户行</span>
|
<span className="content">请输入购买方账号</span>
|
</div>
|
</div>
|
</div>
|
<div className="inv-notice">
|
<div className="inv-label">通知到</div>
|
<div className="inv-content">
|
<div className="mk-input">
|
<label>手机号：</label>
|
<span className="content">请输入购买方手机号</span>
|
</div>
|
<div className="mk-input">
|
<label>邮箱：</label>
|
<span className="content">请输入购买方邮箱</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className="inv-details">
|
<div className="detail-wrap">
|
<div className="mk-th">
|
<div className="mk-td">货物或应税劳务、服务名称</div>
|
<div className="mk-td">规格型号</div>
|
<div className="mk-td">单位</div>
|
<div className="mk-td">数量</div>
|
<div className="mk-td">单价（含税）</div>
|
<div className="mk-td">金额（含税）</div>
|
<div className="mk-td">税率</div>
|
<div className="mk-td">税额</div>
|
</div>
|
<div className="mk-tr">
|
<div className="mk-td mk-left">
|
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<SettingComponent config={card.detail} updateConfig={(res) => this.updateComponent({...card, detail: res})} />
|
</div>
|
} trigger="hover">
|
<EllipsisOutlined />
|
</Popover>
|
</div>
|
<div className="mk-td mk-left"></div>
|
<div className="mk-td mk-left"></div>
|
<div className="mk-td mk-right"></div>
|
<div className="mk-td mk-right"></div>
|
<div className="mk-td mk-right"></div>
|
<div className="mk-td mk-right"></div>
|
<div className="mk-td mk-right"></div>
|
</div>
|
<div className="mk-total">
|
<div className="mk-td">合计</div>
|
<div className="mk-td"></div>
|
<div className="mk-td"></div>
|
<div className="mk-td"></div>
|
<div className="mk-td"></div>
|
<div className="mk-td">￥12</div>
|
<div className="mk-td"></div>
|
<div className="mk-td">￥1</div>
|
</div>
|
<div className="mk-upcase">
|
<div className="mk-td">价税合计（大写）</div>
|
<div className="mk-td"></div>
|
<div className="mk-td">（小写）￥12</div>
|
</div>
|
</div>
|
</div>
|
<div className="inv-main-content">
|
<div className="inv-buyer">
|
<div className="inv-label">销售方</div>
|
<div className="inv-content">
|
<div className="mk-input">
|
<label>名称：</label>
|
<span className="content">请输入销售方名称</span>
|
</div>
|
<div className="mk-input">
|
<label>纳税人识别号：</label>
|
<span className="content">请输入销售方纳税人识别号</span>
|
</div>
|
<div className="mk-input">
|
<label>地址、电话：</label>
|
<span className="content">请输入销售方地址</span>
|
<span className="content">请输入销售方电话</span>
|
</div>
|
<div className="mk-input">
|
<label>开户行及账号：</label>
|
<span className="content">请输入销售方开户行</span>
|
<span className="content">请输入销售方账号</span>
|
</div>
|
</div>
|
</div>
|
<div className="inv-notice">
|
<div className="inv-label">备注</div>
|
<div className="inv-content" style={{paddingTop: '30px'}}>
|
<div className="mk-input">
|
<span className="content" style={{height: '80px'}}>请输入备注</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className="inv-tail">
|
<div className="mk-input">
|
<label>收款人：</label>
|
<span className="content">收款人</span>
|
</div>
|
<div className="mk-input">
|
<label>复核人：</label>
|
<span className="content">复核人</span>
|
</div>
|
<div className="mk-input">
|
<label>开票人：</label>
|
<span className="content">开票人</span>
|
</div>
|
</div>
|
<Modal
|
wrapClassName="mk-pop-modal"
|
visible={btn !== null}
|
width={'90vw'}
|
maskClosable={false}
|
okText="提交"
|
onOk={this.verifySubmit}
|
onCancel={() => {
|
if (this.verifyRef.handleCancel) {
|
this.verifyRef.handleCancel().then(() => {
|
this.setState({ btn: null })
|
})
|
} else {
|
this.setState({ btn: null })
|
}
|
}}
|
destroyOnClose
|
>
|
<VerifyCard card={btn} wrappedComponentRef={(inst) => this.verifyRef = inst}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default Invoice
|
