123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812 |
- import React, {Component} from 'react';
- import {
- View,
- Text,
- TouchableOpacity,
- StyleSheet,
- Dimensions,
- FlatList,
- PixelRatio,
- DeviceEventEmitter,
- Image,
- TextInput,
- SafeAreaView,
- ScrollView,
- } from 'react-native';
- import {
- List,
- SwipeAction,
- Radio,
- Picker,
- Provider,
- InputItem,
- WhiteSpace,
- WingBlank,
- } from '@ant-design/react-native';
- import public_css from '../../source/css/public_css';
- import { NumberTwoDecimal, RoundingData } from "../../source/inspect/inspect";
- import wait_invoice_css from './wait_invoice_css';
- import {SvgXml} from 'react-native-svg';
- import {ToastShow} from '../../components/toast/toast';
- import {
- downArrowIcon,
- plusIcon,
- enterpriseIcon,
- upArrowIcon,
- } from '../../source/icon/icon';
- import {RetrieveData} from '../../data/storage';
- import {RequestNetwork} from '../../data/encryption';
- export default class wait_invoice extends Component {
- constructor(props) {
- super(props);
- this.props.navigation.dangerouslyGetParent().setOptions({
- tabBarVisible: false,
- });
- this.state = {
- listData: [],
- productNumberTotal: 0,
- amountTotal: 0.0,
- taxRateTotal: 0.0,
- productAmountTotal: 0.0,
- companyTypes: [
- {
- label: '个人',
- value: '1',
- },
- {
- label: '企业',
- value: '2',
- },
- ],
- companyType: '1',
- invoiceTypes: [
- {
- label: '增值税普通电子发票',
- value: '1',
- },
- {
- label: '增值税电子专用发票',
- value: '2',
- },
- ],
- invoiceType: '1',
- product_name: '',
- customerName: '',
- taxNumber: '',
- contactNumber: '',
- address: '',
- bank: '',
- bankAccount: '',
- payee: '',
- reviewer: '',
- drawer: '',
- remark: '',
- hideStatusText: '更多',
- hideStatus: false,
- email: '',
- };
- }
- render() {
- return (
- <Provider>
- <SafeAreaView style={public_css.body}>
- <ScrollView>
- <View>
- <Picker
- data={this.state.companyTypes}
- cols={1}
- value={this.state.companyType}
- onChange={(value) => {
- this.setState({
- companyType: value,
- });
- }}>
- <List.Item arrow="horizontal" onPress={this.onPress}>
- 客户抬头类型:
- </List.Item>
- </Picker>
- <Picker
- data={this.state.invoiceTypes}
- cols={1}
- value={this.state.invoiceType}
- onChange={(value) => {
- this.setState({
- invoiceType: value,
- });
- }}>
- <List.Item arrow="horizontal" onPress={this.onPress}>
- 发票类型:
- </List.Item>
- </Picker>
- <List>
- <View style={[public_css.view, {position: 'relative'}]}>
- <View style={[public_css.view, {flex: 1}]}>
- <Text style={public_css.text}>
- <Text style={{color: 'red'}}>*</Text>企业名称:
- </Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入客户名称"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- onChangeText={(text) => {
- // this.searchCustomer(text);
- this.setState({
- customerName: text,
- });
- }}
- value={this.state.customerName}
- // onBlur={() => {
- // this.searchCustomerName();
- // }}
- />
- </View>
- <View style={{}}>
- <TouchableOpacity
- onPress={() =>
- this.props.navigation.navigate(
- 'invoice_select_customer',
- {
- customer: this,
- selectCustomer: (data) => {
- this.selectCustomer(data);
- },
- },
- )
- }
- style={{width: 30, alignItems: 'center'}}>
- <Text style={public_css.arrow}>{'>'}</Text>
- </TouchableOpacity>
- </View>
- </View>
- <View style={[public_css.view, public_css.lineTopBottom]}>
- <Text style={public_css.text}>
- <Text style={{color: 'red'}}>*</Text>企业税号:
- </Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入客户企业税号"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- onChangeText={(text) => {
- this.setState({
- taxNumber: text,
- });
- }}
- value={this.state.taxNumber}
- />
- </View>
- {this.state.hideStatus === true ? (
- <View style={[public_css.view, public_css.lineTopBottom]}>
- <Text style={public_css.text}> 地址:</Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入地址"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- onChangeText={(text) => {
- this.setState({
- address: text,
- });
- }}
- value={this.state.address}
- />
- </View>
- ) : (
- <View />
- )}
- {this.state.hideStatus === true ? (
- <View style={[public_css.view, public_css.lineTopBottom]}>
- <Text style={public_css.text}> 联系电话:</Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入联系电话"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- onChangeText={(text) => {
- this.setState({
- contactNumber: text,
- });
- }}
- value={this.state.contactNumber}
- />
- </View>
- ) : (
- <View />
- )}
- {this.state.hideStatus === true ? (
- <View style={[public_css.view, public_css.lineTopBottom]}>
- <Text style={public_css.text}> 开户银行:</Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入开户银行"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- onChangeText={(text) => {
- this.setState({
- bank: text,
- });
- }}
- value={this.state.bank}
- />
- </View>
- ) : (
- <View />
- )}
- {this.state.hideStatus === true ? (
- <View style={[public_css.view, public_css.lineTopBottom]}>
- <Text style={public_css.text}> 银行账号:</Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入银行账号"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- onChangeText={(text) => {
- this.setState({
- bankAccount: text,
- });
- }}
- value={this.state.bankAccount}
- />
- </View>
- ) : (
- <View />
- )}
- <View
- style={[
- public_css.view,
- public_css.lineTopBottom,
- {alignItems: 'center'},
- ]}>
- <Text style={public_css.text}>
- <Text style={{color: 'red'}}>*</Text>收款人:
- </Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入收款人"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- value={this.state.payee}
- editable={false}
- />
- <View style={{marginRight: 20}}>
- <TouchableOpacity
- onPress={() => {
- this.props.navigation.navigate('select_user', {
- type: 1,
- getUserInfo: (type, name) => {
- this.getUserInfo(type, name);
- },
- });
- }}>
- <Image
- source={require('../../source/img/productImg/addIcon.png')}
- style={{height: 16, width: 16}}
- />
- </TouchableOpacity>
- </View>
- </View>
- <View
- style={[
- public_css.view,
- public_css.lineTopBottom,
- {alignItems: 'center'},
- ]}>
- <Text style={public_css.text}>
- <Text style={{color: 'red'}}>*</Text>审核人:
- </Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入审核人"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- value={this.state.reviewer}
- editable={false}
- />
- <View style={{marginRight: 20}}>
- <TouchableOpacity
- onPress={() => {
- this.props.navigation.navigate('select_user', {
- type: 2,
- getUserInfo: (type, name) => {
- this.getUserInfo(type, name);
- },
- });
- }}>
- <Image
- source={require('../../source/img/productImg/addIcon.png')}
- style={{height: 16, width: 16}}
- />
- </TouchableOpacity>
- </View>
- </View>
- <View
- style={[
- public_css.view,
- public_css.lineTopBottom,
- {alignItems: 'center'},
- ]}>
- <Text style={public_css.text}>
- <Text style={{color: 'red'}}>*</Text>开票人:
- </Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入开票人"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- value={this.state.drawer}
- editable={false}
- />
- <View style={{marginRight: 20}}>
- <TouchableOpacity
- onPress={() => {
- this.props.navigation.navigate('select_user', {
- type: 3,
- getUserInfo: (type, name) => {
- this.getUserInfo(type, name);
- },
- });
- }}>
- <Image
- source={require('../../source/img/productImg/addIcon.png')}
- style={{height: 16, width: 16}}
- />
- </TouchableOpacity>
- </View>
- </View>
- {this.state.hideStatus === true ? (
- <View style={[public_css.view, public_css.lineTopBottom]}>
- <Text style={public_css.text}> 备注:</Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入备注信息"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- onChangeText={(text) => {
- this.setState({
- remark: text,
- });
- }}
- />
- </View>
- ) : (
- <View />
- )}
- <View
- style={[
- public_css.view,
- public_css.lineTopBottom,
- {alignItems: 'center'},
- ]}>
- <Text style={public_css.text}>
- <Text style={{color: 'red'}}>*</Text>邮箱:
- </Text>
- <TextInput
- style={public_css.textInputStyle}
- placeholder="请输入邮箱"
- clearButtonMode="while-editing"
- secureTextEntry={false}
- value={this.state.email}
- onChangeText={(text) => {
- this.setState({
- email: text,
- });
- }}
- />
- </View>
- <View style={[public_css.view, {justifyContent: 'center'}]}>
- <TouchableOpacity
- style={{
- width: 120,
- height: 30,
- backgroundColor: '#F8F8F8',
- opacity: 1,
- borderRadius: 99,
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- }}
- onPress={() => this.hideChange()}>
- <View style={{flexDirection: 'row', alignItems: 'center'}}>
- <Text style={{color: '#B6B6BA', fontSize: 16}}>
- {this.state.hideStatusText}
- </Text>
- <SvgXml xml={downArrowIcon()} />
- </View>
- </TouchableOpacity>
- </View>
- </List>
- <View style={wait_invoice_css.list_view}>
- <Text style={wait_invoice_css.list_title_text}>名称</Text>
- <Text style={wait_invoice_css.list_title_text}>单价</Text>
- {/*<Text style={wait_invoice_css.list_title_text}>数量</Text>*/}
- <Text style={wait_invoice_css.list_title_text}>税率(%)</Text>
- <Text style={wait_invoice_css.list_title_text}>税额</Text>
- </View>
- <FlatList
- data={this.state.listData}
- renderItem={(item) => this.renderItem(item)}
- />
- <View>
- <WhiteSpace />
- <WingBlank>
- <TouchableOpacity
- style={{
- // width: Dimensions.get('window').width,
- height: 52,
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- border: 2,
- borderStyle: 'dotted',
- borderColor: '#2A67FE',
- borderWidth: 2,
- borderRadius: 8,
- opacity: 1,
- }}
- onPress={() => {
- this.props.navigation.navigate('invoice_product_list');
- }}>
- <SvgXml xml={plusIcon()} />
- <Text style={{}}>添加商品信息</Text>
- </TouchableOpacity>
- </WingBlank>
- <WhiteSpace />
- </View>
- </View>
- </ScrollView>
- <View>
- <View
- style={{
- flexDirection: 'row',
- justifyContent: 'space-around',
- alignItems: 'center',
- width: Dimensions.get('window').width,
- }}>
- <Text>共{this.state.productNumberTotal}个产品</Text>
- <Text>
- 开票金额:
- {RoundingData(parseFloat(this.state.amountTotal)).replace(
- /(\d)(?=(\d{3})+(?:\.\d+)?$)/g,
- '$1,',
- )}
- 元
- </Text>
- <Text>
- 税额:{RoundingData(parseFloat(this.state.taxRateTotal))}
- </Text>
- </View>
- <View style={[public_css.bottomStatus]}>
- <TouchableOpacity
- style={[public_css.statusBtn, public_css.statusRBtn]}
- onPress={() => this.submitData()}>
- <Image
- source={require('../../source/img/productImg/confirm.png')}
- style={{width: 32, height: 32}}
- />
- <Text style={{color: '#fff'}}>提交</Text>
- </TouchableOpacity>
- </View>
- </View>
- </SafeAreaView>
- </Provider>
- );
- }
- async componentDidMount(): void {
- console.log(this.props.route.params);
- let company = JSON.parse(await RetrieveData('company'));
- let userName = await RetrieveData('userName');
- let payee = '';
- let reviewer = '';
- if (company.payees.length > 0) {
- payee = company.payees.split(',')[0];
- }
- if (company.reviewers.length > 0) {
- reviewer = company.reviewers.split(',')[0];
- }
- this.setState({
- company: company,
- payee: payee,
- reviewer: reviewer,
- drawer: userName,
- });
- //收到监听
- this.listener = DeviceEventEmitter.addListener('productInfo', (data) => {
- //收到监听后想做的事情
- this.setList(data);
- });
- }
- componentWillUnmount() {
- //移除监听
- if (this.listener) {
- this.listener.remove();
- }
- }
- // 获取收款人、审核人、开票人信息
- getUserInfo = (type, name) => {
- if (type === 1) {
- this.setState({
- payee: name,
- });
- }
- if (type === 2) {
- this.setState({
- reviewer: name,
- });
- }
- if (type === 3) {
- this.setState({
- drawer: name,
- });
- }
- };
- selectProduct = () => {
- this.setState({
- productVisible: !this.state.productVisible,
- });
- };
- // 开票企业类型选择
- companyTypeChange = (value) => {
- this.setState({
- companyType: value,
- });
- };
- //提交开票信息
- submitData = async () => {
- if (this.state.customerName === '') {
- ToastShow(1, '企业名称不能为空!');
- return;
- }
- if (this.state.taxNumber === '') {
- ToastShow(1, '企业税号不能为空!');
- return;
- }
- if (this.state.payee === '') {
- ToastShow(1, '收款人不能为空!');
- return;
- }
- if (this.state.reviewer === '') {
- ToastShow(1, '审核人不能为空!');
- return;
- }
- if (this.state.drawer === '') {
- ToastShow(1, '开票人不能为空!');
- return;
- }
- if (this.state.email === '') {
- ToastShow(1, '邮箱地址不能为空!');
- return;
- }
- if (this.state.listData <= 0) {
- ToastShow(1, '商品信息不能为空!');
- return;
- }
- const account = await RetrieveData('account');
- let token = await RetrieveData('token');
- if (token) {
- const url = '/sys/invoice/save';
- let response = await RequestNetwork(
- url,
- token,
- {
- interactType: 1,
- interactTypeDetail: this.state.email,
- invoiceWay: 1,
- invoiceCategory: 1,
- cmdParam: {
- REQUEST_COMMON_FPKJ: {
- SBLX: this.state.company.defaultDeviceInfo.deviceType, //设备类型
- SBBH: this.state.company.defaultDeviceInfo.taxDiscId, //设备编号
- KPLX: 0, //开票类型 0-蓝字发票;1-红字发票
- FPZL: this.state.invoiceType, //发票种类 1.增值税普通电子发票 2.增值税电子专用发票 3.增值税普通纸质发票 4 增值税专用纸质发票
- TTLX: this.state.companyType, //收票客户抬头类型 1:个人 2:企业
- KPF_NSRSBH: this.state.company.entTaxId, //开票方纳税人识别号
- KPF_MC: this.state.company.entName, //开票方名称
- KPF_DZ: this.state.company.entAddress, //开票方地址
- KPF_DH: this.state.company.entPhone, //开票方电话
- KPF_YHZH: this.state.company.bankAccountNumber, //开票方银行账号
- KPF_KHHMC: this.state.company.bankName, //开票方开户行名称
- SPF_NSRSBH: this.state.taxNumber, //收票方纳税人识别号
- SPF_MC: this.state.customerName, //收票方名称
- SPF_DH: this.state.contactNumber, //收票方电话
- SPF_DZ: this.state.address, //收票方地址
- SPF_YHZH: this.state.bank, //收票方银行账号
- SPF_KHHMC: this.state.bank, //收票方开户行名称
- KPR: this.state.drawer, //开票人
- SKR: this.state.payee, //收款人
- FHR: this.state.reviewer, //复核人
- YFP_DM: '', //原发票代码
- YFP_HM: '', //原发票号码
- JSHJ: NumberTwoDecimal(parseFloat(this.state.amountTotal)), //价税合计
- HJJE: NumberTwoDecimal(parseFloat(this.state.productAmountTotal)), //合计金额
- HJSE: NumberTwoDecimal(this.state.taxRateTotal), //合计税额
- BZ: this.state.remark, //备注
- HYLX: 0, //发票行性质 0 正常行、1 折扣行、2 被折扣行
- TSPZ: '00', //特殊票种标识 “00”不是 “01”农产品销售“02”农产品收购“06”抵扣通行费“07”其它通行费“08”成品油销售说明:如果非特殊票种此节点可以没有。
- COMMON_FPKJ_XMXXS: {
- COMMON_FPKJ_XMXX: this.state.listData,
- }, // 产品列表
- },
- },
- mobile: account,
- reqChannel: 3,
- },
- false,
- 1,
- );
- if (response) {
- if (response.code == 0) {
- ToastShow(1, '开票成功!');
- }
- } else {
- ToastShow(1, response.msg);
- }
- }
- };
- //加载list列表
- setList = (data) => {
- console.log(data);
- let numberTotal =
- parseInt(this.state.productNumberTotal) + parseInt(data.XMSL);
- let taxRateTotal =
- parseFloat(this.state.taxRateTotal) + parseFloat(data.SE);
- let amountTotal =
- parseFloat(this.state.amountTotal) + parseFloat(data.amount);
- let productAmountTotal = parseFloat(this.state.productAmountTotal) + parseFloat(data.XMJE)
- let list = this.state.listData.concat(data);
- this.setState({
- listData: list,
- amountTotal: amountTotal,
- taxRateTotal: taxRateTotal,
- productNumberTotal: numberTotal,
- productAmountTotal: productAmountTotal,
- });
- };
- //加载items
- renderItem = (data) => (
- <SwipeAction
- autoClose
- style={{backgroundColor: 'transparent'}}
- right={this.right(data)}>
- <List.Item>
- <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
- <View style={{width: 70, alignItems: 'center'}}>
- <Text>{data.item.XMMC} </Text>
- </View>
- <View
- style={{width: 70, alignItems: 'center'}}>
- <Text>{data.item.price}</Text>
- </View>
- {/*<View>*/}
- {/* <Text>{data.item.XMSL} </Text>*/}
- {/*</View>*/}
- <View style={{width: 70, alignItems: 'center'}}>
- <Text>{data.item.SL * 100}</Text>
- </View>
- <View style={{width: 70, alignItems: 'center'}}>
- <Text>{data.item.taxAmount}</Text>
- </View>
- </View>
- </List.Item>
- </SwipeAction>
- );
- //左滑删除
- right = (data) => [
- {
- text: '删除',
- onPress: () => {
- this.deleteData(data.item);
- },
- style: {backgroundColor: 'red', color: 'white'},
- },
- ];
- //删除产品信息
- deleteData = (data) => {
- let listData = this.state.listData;
- let numberTotal =
- parseInt(this.state.productNumberTotal) - parseInt(data.XMSL);
- let taxRateTotal =
- parseFloat(this.state.taxRateTotal) - parseFloat(data.SE);
- let amountTotal =
- parseFloat(this.state.amountTotal) - parseFloat(data.amount);
- let productAmountTotal =
- parseFloat(this.state.productAmountTotal) - parseFloat(data.XMJE);
- const prevIndex = listData.findIndex((item) => item.key === data.SPBM);
- listData.splice(prevIndex, 1);
- this.setState({
- listData: listData,
- amountTotal: amountTotal,
- taxRateTotal: taxRateTotal,
- productNumberTotal: numberTotal,
- productAmountTotal: productAmountTotal,
- });
- };
- // 字段隐藏切换
- hideChange = () => {
- this.setState({
- hideStatus: !this.state.hideStatus,
- hideStatusText: '收起',
- });
- };
- // 获取选择企业信息
- selectCustomer = (data) => {
- this.setState({
- customerName: data.customerName,
- taxNumber: data.entTaxId,
- contactNumber: data.contactPhone,
- address: data.address,
- bank: data.bankName,
- bankAccount: data.bankAccount,
- });
- };
- }
- const styles = StyleSheet.create({
- buttonView: {
- alignItems: 'center',
- backgroundColor: '#ffffff',
- },
- //通用按钮样式
- button: {
- marginTop: 5,
- width: Dimensions.get('window').width * 0.8,
- height: 34,
- borderRadius: 10,
- backgroundColor: '#1874CD',
- justifyContent: 'center',
- alignItems: 'center',
- },
- //通用按钮样式
- buttonText: {
- textAlign: 'center',
- color: 'white',
- },
- inputView: {
- padding: 5,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- display: 'flex',
- },
- view: {
- flexDirection: 'row',
- height: 34,
- width: Dimensions.get('window').width * 0.8,
- },
- //通用textInput样式
- text: {
- lineHeight: 34,
- fontSize: 14,
- },
- //通用textInput样式
- lineTopBottom: {
- borderBottomWidth: 3 / PixelRatio.get(),
- borderColor: 'rgb(208,208,208)',
- },
- textInputStyle: {
- marginRight: 10,
- marginLeft: 20,
- fontSize: 14,
- marginTop: 4,
- },
- });
|