ttk-app-core/src/apps/app-demo/invoice-manage/e-invoice-normal/components/InvoiceForm.js

@ttk/recat enterprise develop framework

import React, { useEffect, useState, useCallback } from "react";
import { Menu, Dropdown, Message, Switch, Icon, Layout, Card, Input, Row,Col,Form,Button,Modal,AntdSelect as Select, Checkbox} from "@ttk/component";
import { Spin, AutoComplete } from "antd"
import Box from '@/components/floatbox'
import { useData, useActions, useCommit } from "@ttk/app-loader"
import { money, moneySpe } from "@/utils/pattern"
import { toFixed, toRMB, minusSign, toFixedForce } from "@/utils/number"
import { isNotEmpty, transformSlv } from "@/utils"
import { slFloat, jeFloat, djFloat } from "@/apps/app-demo/invoice-manage/constant"
import { useHistory } from "@ttk/router"
import { calcPutongPrice, calcJiananPrice, calcChaePrice } from "../../invoice-calc"


const { TextArea } = Input;
const { Option } = Select
let timer = null
let limits = 2000 // 开票限制
let fplxdm = "026"
export default function ModalForm(props) {
  const commit = useCommit()
  const actions = useActions(props);
  const formObj = useData([props, 'formObj']).toJS()
  const validateState = useData([props, 'validateState']).toJS()
  const { rateList, myInitData, searchCustomerList } = useData([props, 'tempState']).toJS()
  // 内部管理loading状态
  const [loading, setLoading] = useState(false)
  let kplx = props.location.params.kplx // url携带的开具类型 0:正常发票  1:红冲发票
  let hc = false
  if (kplx == 1) {
    hc = true
  }
  const [isHc, setIsHc] = useState(hc)
  
  const plainOptions = [
    { label: '邮箱', value: '1' },
    { label: '手机', value: '2' },
  ];
  // fphxz: 发票行性质, 0 正常行、1 折扣行、2 被折扣行
  // hsslbs: 含税税率标识 0：普通征税, 1：减按征税, 2：差额征税
  // hsbz: 含税标志0 不含税 1 含税
  useEffect(() => {
    async function init () {
      let id = props.location.params.id // 发票id
      let fpdm = props.location.params.fpdm // 发票代码
      let fphm = props.location.params.fphm // 发票号码
      let kplx = props.location.params.kplx // url携带的开具类型 0:正常发票  1:红冲发票
      setLoading(true)
      if (kplx == 1 && fpdm) {
        // 红冲发票
        await actions.hcDetail({ fpdm, fphm }) // 发票红冲详情
      } else if (kplx == 0 && id) {
        let data = await actions.ckDetail({ kpsqFpxxId: id })
        if (data) {
          let rateList = await actions.rateListData({ fplxdm: data.fplxdm, hsslbs: data.hsslbs }) // 需要等待税率列表返回结果
          data.fymxList = data.fymxList.map((item) =>{
            let tmpRateList = [...rateList]
            let hasGoodsRate = rateList.find((rate) => {
              return item.slv == rate.taxRate
            })
            if (!hasGoodsRate) {
              tmpRateList.push({ taxRate: item.sl, taxRateLabel: (item.sl * 100) + "%" })
            }
            tmpRateList = tmpRateList.sort((a, b) => {
              return a.taxRate - Number(b.taxRate)
            })
            item = {
              ...item,
              tmpRateList
            }
            return item
          })
          commit([props, 'formObj'], { type: 'update', data: { fymxList: data.fymxList } })
          await actions.myInitData({fplxdm: data.fplxdm})
          // actions.goodsTableData({hsslbs: data.fplxdm})
        }
      } else {
        await actions.rateListData({ fplxdm, hsslbs: 0 }) // 需要等待税率列表返回结果
        actions.updateKjmxlist()
        await actions.myInitData({fplxdm})
        // actions.goodsTableData({hsslbs: 0})
        // actions.searchCustomerList()
      }
      setLoading(false)
    }
    if (!formObj.fymxList || formObj.fymxList.length == 0) {
      init()
    }
  }, [])

  const onClickBuyerName = useCallback(() => {
    if (formObj.kplx != 1) { // 红冲状态下不能选择客户
      commit([props, 'tempState'], { type: "setCustomModal", data: true})
    }
  }, [formObj])

  const onClickGoodsName = useCallback((row, index) => {
    if (row.fphxz == 0 && formObj.kplx != 1) { // 红冲状态或者非正常行都不能选择商品
      commit([props, 'tempState'], { type: "setGoodsModal", data: true})
      commit([props, 'tempState'], { type: "setEditIndex", data: index})  
    }
  }, [formObj])

  const onClickAdd = useCallback(() => {
    if (formObj.hsslbs == 2 && formObj.fymxList.length >= 1) {
      let tmp = formObj.fymxList[0]
      if (!tmp.tmpIsDefault) {
        Message.info("差额征税只能有一条明细！")
        return
      }
    }
    // 明细数量限制只统计正常行和被折扣行
    let normalLists = formObj.fymxList.filter((item) => {
      return item.fphxz != 1
    })
    if (normalLists.length >= limits) {
      Message.warning("发票明细数量超出限制！")
      return
    }
    commit([props, 'tempState'], { type: "setGoodsModal", data: true})
  }, [formObj])

  const onClickDelete = useCallback((row, index) => {
    let fymxList = formObj.fymxList
    if (row.fphxz == 0) {
      // 正常行，正常删除
      fymxList.splice(index, 1)
      validateState.fymxList.splice(index, 1)
    } else if (row.fphxz == 1) {
      // 折扣行，删除折扣行，被折扣行恢复正常
      let tmp = fymxList[index - 1]
      if (tmp.fphxz == 2) {
        tmp.fphxz = 0
        tmp.zk = ""
        fymxList.splice(index - 1, 1, tmp)
        validateState.fymxList.splice(index - 1, 1, tmp)
      }
      fymxList.splice(index, 1)
      validateState.fymxList.splice(index, 1)
    } else if (row.fphxz == 2) {
      // 被折扣行，删除被折扣行和折扣行
      let tmp = fymxList[index + 1]
      if (tmp.fphxz == 1) {
        tmp.fphxz = 0
        fymxList.splice(index + 1, 1)
        validateState.fymxList.splice(index + 1, 1)
      }
      fymxList.splice(index, 1)
      validateState.fymxList.splice(index, 1)
    }
    actions.updateKjmxlist(fymxList)
    commit([props, 'validateState'], { type: 'update', data: { fymxList: validateState.fymxList }})
    
  }, [formObj, validateState])

  async function updateForm(e) {
    actions.updateForm(e);
  }

  async function updateGoodsForm(fields, index) {
    await actions.updateGoodsForm(fields, index);
  }

  const onChangePrice = useCallback(async (value, row, type, index) => {
    // if (!moneySpe.test(value)) {
      // 输入不符合格式，不进行计算，并提示错误
      let result = await actions.updateGoodsForm({ [type]: value }, index)
      if (!result) {
        return
      }
    // }
    let { spsl, dj, je, sl, se, tmpJe, tmpHsje, tmpDj, tmpHsdj } = row  // sl数量  dj单价  je金额 sl税率 se税额 tmpJe不含税金额
    if (formObj.hsslbs == 0) {
      // putongPrice(formObj, value, row, type, index)
      let result = calcPutongPrice({ type, value, index, hsbz: formObj.hsbz, spsl, dj, je, sl, se, tmpJe, tmpHsje, tmpDj, tmpHsdj, updateGoodsForm })
      updateGoodsForm({ 
        je: result.je, 
        spsl: result.spsl,  
        dj: result.dj, 
        se: result.se, 
        tmpJe: result.tmpJe, 
        tmpHsje: result.tmpHsje, 
        tmpDj: result.tmpDj,
        tmpHsdj: result.tmpHsdj,
      }, index);
    } else if (formObj.hsslbs == 1) {
      // jiananPrice(formObj, value, row, type, index)
      let result = calcJiananPrice({type, index, value, spsl, dj, je, sl, se, tmpJe, tmpDj, updateGoodsForm})
      updateGoodsForm({ je: result.je, spsl: result.spsl, dj: result.dj, se: result.se, tmpJe: result.tmpJe,  tmpDj: result.tmpDj }, index);
    } else if (formObj.hsslbs == 2) {
      // chaePrice(formObj, value, row, type, index)
      let result = calcChaePrice({type, value, spsl, dj, je, tmpJe, tmpDj})
      updateGoodsForm({ spsl: result.spsl, dj: result.dj, tmpDj: result.tmpDj }, index);
    }
  }, [formObj])

  const onChangeHsbz = useCallback((checked) => {
    // 只有普通征税才支持含税不含税开关
    let list = formObj.fymxList.map((item, index) => {
      let sl = Number(item.sl)
      item.hsbz = checked ? 1 : 0
      if (!checked) {
        item.je = item.tmpJe
        item.dj = item.tmpDj
      } else {
        // 切换为含税，单价和金额需切换为含税的 含税金额=不含税金额 *（1+税率）
        item.je = item.tmpHsje
        item.dj = item.tmpHsdj
      }
      return item
    })

    commit([props, 'formObj'], { type: 'update', data: { hsbz: checked, fymxList: list }})
  }, [formObj])


  const onChangeSlv = useCallback((value, row, index) => {
    if (row.tmpIsDefault) {
      // 默认行选中税率不进行任何操作
      return 
    }
    let { kce, tmpSalePrice, hsslbs } = formObj
    let { se, tmpJe, tmpHsje, tmpDj, tmpHsdj, je, hsbz, dj, spsl } = row
    let sl = Number(value)
    se = se ? Number(se) : ""
    
    if (hsslbs == 2) {
      tmpSalePrice = Number(tmpSalePrice)
      kce = Number(kce)
      if (tmpSalePrice > kce) {
        se = (tmpSalePrice - kce) * sl / (1 + sl)
      } else {
        se = 0
      }
    } else {
      // let hsje // 含税金额
      if (isNotEmpty(tmpHsje)) {
        se = tmpHsje * sl / ( 1 + sl)
        tmpJe = tmpHsje - se
      }
      if (isNotEmpty(tmpHsdj)) {
        tmpDj = tmpHsdj / ( 1 + sl )
      }
      if (hsbz) {
      } else {
        je = toFixedForce(tmpJe, jeFloat) // 当含税标志为不含税时，金额输入框为不含税金额
        dj = toFixed(tmpDj, djFloat) // 当含税标志为不含税时，单价输入框为不含税单价
      }
    }
    tmpDj = toFixed(tmpDj, djFloat)
    tmpJe = toFixedForce(tmpJe, jeFloat)
    se = toFixedForce(se, jeFloat)
    actions.updateGoodsForm({ sl, se, je, dj, tmpJe, tmpDj }, index);
  }, [formObj])
  
  const onChangeZsfs = useCallback((value) => {
    async function asyncFunc() {
      let hsbz = true
      if (value == 2) {
        hsbz = false
      }
      let hasGoods = false
      if (formObj.fymxList.length == 1 && !formObj.fymxList[0].tmpIsDefault) {
          hasGoods = true
      } else if (formObj.fymxList.length > 1) {
        hasGoods = true
      }
      // 切换征税方式时，扣除额和销售额清空，避免对提交接口造成影响
      commit([props, 'formObj'], { type: 'update', data: { kce: "", tmpSalePrice: "" }})
      if (!hasGoods) {
        commit([props, 'formObj'], { type: 'update', data: { hsbz, hsslbs: value }})
        // actions.goodsTableData({hsslbs: value})
        await actions.rateListData({ fplxdm, hsslbs: value })
        actions.updateKjmxlist()
        return
      }
      Modal.confirm({
        title: '确定要切换征税方式',
        content: '切换后会清空当前的商品信息',
        okText: '确认',
        cancelText: '取消',
        onOk: async function() {
          commit([props, 'formObj'], { type: 'update', data: { hsbz, hsslbs: value }})
          // 从新获取商品
          // actions.goodsTableData({hsslbs: value})
          // 重新获取税率
          await actions.rateListData({ fplxdm, hsslbs: value })
          actions.updateKjmxlist()
          commit([props, 'validateState'], { type: 'update', data: { fymxList: [] }})
        }
      });
    } 
    asyncFunc()
  }, [formObj])

  const onClickJe = useCallback((row) => {
    if (formObj.hsslbs == 2) {
      commit([props, "tempState"], { type: "setEditId", data: true})
      commit([props, "tempState"], { type: "setEditInfo", data: row})
      commit([props, "tempState"], { type: "setBalanceModal", data: true})
    }
  }, [formObj])

  // 变更折扣，生成折扣行
  const onChangeZk = useCallback((value, row, index) => {
    async function asyncFunc() { 
      if (value.zk) {
        if (row.zkType == 1) {
          value.zk = toFixed(value.zk, 1) // 按比例则保留1位小数
        } else {
          // 按金额则保留2位小数
          value.zk = toFixed(value.zk, 2)
        }
      }
      
      let fymxList = formObj.fymxList
      fymxList[index] = { ...fymxList[index], ...value}
      row = { ...row, ...value }
      if (fymxList[index + 1] && fymxList[index + 1].fphxz == 1) {
        // 做一层保护，避免折扣输入和下拉框相互操作时，引起问题。只要下一行是折扣行，则不做任何操作
        return
      }
      if (value.zkType) {
        // 如果是变更折扣类型，则先同步更新zkType字段，因为接下来对zk校验需要用到zkType这个字段的真实值
        commit([props, "formObj"], { type: "update_goods", data: value, index })
      }    
      let valid = await actions.updateGoodsForm(row, index)
      let validatelist = validateState.fymxList

      if (!valid) {
        // 本行校验不过，不生成折扣行
        clearTimeout(timer)
        timer = null
        
        // 本行校验不过，删除旧折扣行以及折扣行校验状态
        let tmp = fymxList[index + 1]
        if (tmp && tmp.fphxz == 1) {
          fymxList.splice(index + 1, 1)
          validatelist.splice(validatelist + 1, 1)
          commit([props, "formObj"], { type: "update", data: { fymxList }})
          commit([props, "validateState"], { type: "update", data: { validatelist }})
        }
        return
      }
      // 对输入节流处理
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(() => {
        let tmp = fymxList[index + 1]
        if (tmp && tmp.fphxz == 1) {
          // 先删除旧折扣行以及折扣行校验状态， 及时提交状态管理
          fymxList.splice(index + 1, 1)
          validatelist.splice(validatelist + 1, 1)
          commit([props, "formObj"], { type: "update", data: { fymxList }})
          commit([props, "validateState"], { type: "update", data: { validatelist }})
        }

        if (row.zk && row.zk > 0 && row.je > 0) {
          // 添加一行折扣行
          actions.updateGoodsForm({ fphxz: 2 }, index) // 变为被折扣行
          let { je, sl, tmpJe, tmpHsje }= row
          sl = Number(sl)
          let se = 0
          if (row.zkType == 1) {
            je = je * row.zk / 100
          } else {
            je = row.zk // 元为单位的折扣，输入值就是折扣金额
          }
          // se = je * sl
          
          // 计算折扣行不含税金额  含税金额
          if (formObj.hsbz) {
            tmpJe = je / (1 + sl)
            tmpHsje = je
          } else {
            tmpJe = je
            tmpHsje = je * (1 + sl)
          }

          // 税额=不含税金额*税率
          if (tmpJe > 0) {
            se = tmpJe * sl
          }

          // 保留2位小数
          je = toFixedForce(je, jeFloat)
          tmpJe = toFixedForce(tmpJe, jeFloat)
          tmpHsje = toFixedForce(tmpHsje, jeFloat)
          se = toFixedForce(se, jeFloat)
          let { id, hsbz, spbm, zxbm, yhzclx, yhzcbs, tmpRateList } = row
          // 插入折扣行
          fymxList.splice(index + 1, 0, {
            spId: id,
            spbm,
            zxbm,
            yhzcbs,
            hsbz,
            spmc: row.spmc,
            fphxz: 1,
            je: "-" + je,
            tmpJe: "-" + tmpJe,
            tmpHsje: "-" + tmpHsje,
            tmpRateList,
            sl: sl + "",
            lslbs: row.lslbs,
            zzstsgl: row.zzstsgl,
            se: minusSign(se), // 税额为0，不用加减号
          }) 
          validatelist.splice(index + 1, 0, {})
        } else {
          actions.updateGoodsForm({ fphxz: 0 }, index) // 输入折扣为空，变为正常行
        }
        commit([props, "formObj"], { type: "update", data: { fymxList }})
        commit([props, "validateState"], { type: "update", data: { validatelist }})
        timer = null
      }, 0)
    }
    asyncFunc()
  }, [formObj])

  const onChangeClientName = useCallback((e) => {
    actions.updateForm({ghdwmc: e})
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    // 节流
    timer = setTimeout(() =>{
      actions.searchCustomerList({keyword: e})
    }, 300)
  })

  const onSelectClientName = useCallback((value, row) => {
    let custom = {
      ghdwmc: row.qyMc,
      ghdwsbh: row.qyNsrsbh,
      ghdwdzdh: (row.dz || "") + " " + (row.dh || ""),
      ghdwyhzh: (row.yh || "") + " " + (row.yh_zh || "")
    }
    actions.updateForm(custom)
  })

  const onSubmit = useCallback(async (e) => {
    // 避免未填写明细即提交
    // let list = formObj.fymxList.filter((item) =>{
    //   return !item.tmpIsDefault
    // })
    if (formObj.je >= Number(myInitData.fpDzxe) ) {
      Message.info("单张开票金额不能超过最大限额")
      return 
    }
    setLoading(true)
    const result = await actions.submitForm()
    setLoading(false)
    if (result) {
      Message.success("开票成功！您可以在发票查询页面查看，推送和红冲。")
      actions.resetForm()
    } else {
      // Message.warning("请按照红框提示完善信息！")
    }
  }, [formObj, myInitData])
  const onSubmitHc = useCallback(async (e) => {
    setLoading(true)
    const result = await actions.submitFormHc()
    setLoading(false)
    if (result) {
      Message.success("红冲开票成功！")
      setTimeout(() => {
        // 因为红冲是iframe打开的，通过postMessage通知父级窗口关闭弹窗，再刷新列表
        // 通知父级关闭弹窗
        window.top.postMessage("closeHcModal", "*")
      }, 1000)
    }
  }, [formObj, myInitData])

  return (
    <div className={`drag_main ${isHc?'disabled':''}`}>
      <div className="invoice_box">
      <Spin spinning={loading}>
        { !isHc && <Box className="invoice_top" width="100%" height="60">
          <div className="tools_group">
            <Form layout="inline">
              <Form.Item
                required={true}
                validateStatus={validateState.hsslbs?.state}
                help={validateState.hsslbs?.message}
                label="征税方式">
                <Select value={formObj.hsslbs} onChange={(e) => onChangeZsfs(e)} size="small">
                  <Option value="0">普通征税</Option>
                  <Option value="1">减按征税</Option>
                  <Option value="2">差额征税</Option>
                </Select>
              </Form.Item>
              <Form.Item
                required={true}
                validateStatus={validateState.hsbz?.state}
                help={validateState.hsbz?.message}
                label="是否含税">
                <Switch disabled={formObj.hsslbs!=0} checked={formObj.hsbz} size="small" onChange={(checked, e) => onChangeHsbz(checked)}/>
              </Form.Item>
              
              <Form.Item
                style={{marginRight: "16px"}}
                validateStatus={validateState.gmfEmail?.state}
                help={validateState.gmfEmail?.message}
                label="收票方式">
                <Checkbox size="small" checked={formObj.isEmail} onChange={(e) => updateForm({isEmail: e.target.checked})}>邮箱</Checkbox>
                { formObj.isEmail && <Input value={formObj.gmfEmail} style={{width: "180px", marginRight: "20px"}} size="small" onBlur={(e) => updateForm({gmfEmail: e.target.value})}/> }
              </Form.Item>
              <Form.Item
                validateStatus={validateState.gmfMobile?.state}
                help={validateState.gmfMobile?.message}
                label="">
                <Checkbox size="small" checked={formObj.isPhone} onChange={(e) => updateForm({isPhone: e.target.checked})}>手机</Checkbox> 
                { formObj.isPhone && <Input style={{width: "180px"}} size="small" value={formObj.gmfMobile} onBlur={(e) => updateForm({gmfMobile: e.target.value})}/> }
              </Form.Item>
            </Form>
          </div>
          { formObj.fpdm && <div className="top_left">发票代码：<span className="i_value">{formObj.fpdm}</span></div>}
          {/* <div  className="top_middle">
              <h1 className="i_title">增值税电子普通发票</h1>
              <div>
                    <p className="un_line"></p>
                    <p style={{opacity: 0}}>——————————————————————</p>
              </div>                         
          </div> */}
          { formObj.fphm && <div  className="top_right">发票号码：<span className="i_value">{formObj.fphm}</span></div>}
              {/* <p>发票代码：<span className="i_value"> </span></p>
              <p>发票号码：<span className="i_value"> </span></p>
              <p>开票日期：<span className="i_value"> </span>&nbsp;年&nbsp;<span className="i_value"> </span>&nbsp;月&nbsp;<span  className="i_value"> </span>&nbsp;日</p>
              <p>校&nbsp;验 &nbsp;码：<span className="i_value"> </span></p>
          </div> */}
        </Box> }
        
        <Box className="invoice_center" /*height="calc(100% - 140px)"*/ style={{minHeight: "calc(100% - 160px)"}}>
          <Box height="164px">
            <Form className="header-form">
              <table className="itable" cellSpacing="0" cellPadding="0">
                <tbody>
                  <tr>
                      <td width="25px" style={{paddingLeft:"3px"}}>购买方</td>
                      <td>
                        <Form.Item 
                          required={true}
                          validateStatus={validateState.ghdwmc?.state}
                          help={validateState.ghdwmc?.message}
                          label="名&emsp;&emsp;&emsp;&emsp;称">
                          <Dropdown
                            trigger={["click"]}
                            overlay={searchCustomerList.length ? <Menu className="dropdown-search-client">
                              {searchCustomerList.map((item) => {
                                return <Menu.Item 
                                  key={item.id}
                                  onClick={(e) => onSelectClientName(e, item)}>
                                      {item.qyMc}
                                </Menu.Item>
                              })}
                            </Menu> : <span></span>}
                          >
                            <Input style={{paddingRight: "70px"}} placeholder="" onChange={(e) => onChangeClientName(e.target.value)} className="i_input" value={formObj.ghdwmc} />
                          </Dropdown>
                          {!isHc && <Button onClick={onClickBuyerName} style={{height: "26px", lineHeight: "1", position: "absolute", right: "-8px",zIndex: "10"}} title="选择客户" type="primary">
                            选择客户
                          </Button>}
                        </Form.Item>
                        <Form.Item 
                          validateStatus={validateState.ghdwsbh?.state}
                          help={validateState.ghdwsbh?.message}
                          label="&emsp;纳税人识别号">
                          <Input className="i_input" value={formObj.ghdwsbh} onBlur={(e) => updateForm({ghdwsbh: e.target.value})}/>
                        </Form.Item>
                        <Form.Item 
                          label="&emsp;地址&ensp;、&ensp;电话"
                          // required={true}
                          validateStatus={validateState.ghdwdzdh?.state}
                          help={validateState.ghdwdzdh?.message}
                          >
                          <Input className="i_input" value={formObj.ghdwdzdh} onBlur={(e) => updateForm({ghdwdzdh: e.target.value})}/>
                        </Form.Item>
                        <Form.Item 
                          label="&emsp;开户行及账号"
                          // required={true}
                          validateStatus={validateState.ghdwyhzh?.state}
                          help={validateState.ghdwyhzh?.message}
                          >
                          <Input className="i_input" value={formObj.ghdwyhzh} onBlur={(e) => updateForm({ghdwyhzh: e.target.value})}/>
                        </Form.Item>
                      </td>
                      {/* <td width="20px" style={{padding:"0 3px"}}>
                          密码区
                      </td>
                      <td width="300px" valign="top" style={{paddingLeft:"3px"}}>
                        
                      </td> */}
                  </tr>
                </tbody>
              </table>
            </Form>
          </Box> 
          <Box height="100% - 354px">
            <Form>
              <table className="itable" cellSpacing="0" cellPadding="0">
                <tbody>
                  <tr style={{height:"24px"}} valign="top" align="center">
                  { formObj.kplx == 0 && <td width="40px" ></td> }
                    <td >货物或应税劳务、服务名称</td>                               
                    <td width="100px" >规格型号</td>
                    <td width="60px" >单位</td>
                    <td width="60px" >数量</td>
                    <td width="120px">单价（{!formObj.hsbz && "不"}含税）</td>
                    <td width="120px">金额（{!formObj.hsbz && "不"}含税）</td>
                    <td width="90px" >税率</td>
                    <td width="100px">税额</td>
                    {formObj.hsslbs == 0 && <td width="140px">折扣</td>}
                  </tr>
                  {
                    formObj.fymxList.map((item, index) => {
                      return (
                        <tr key={item.spmc + index} className={`invoice-content ${item.fphxz == 1 ? "zhekouhang" : ""}`} valign="top" align="center">
                        { formObj.kplx == 0 && <td className="td-operation" width="40px">
                            { !item.tmpIsDefault && <Icon type="delete" className="delete" onClick={() => onClickDelete(item, index)} title="删除行"/>}
                          </td> 
                        } 
                          <td className="text_left td-goods-name" title="点击选择商品" onClick={() => onClickGoodsName(item, index)}>
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.spmc?.state}
                              help={validateState.fymxList[index]?.spmc?.message}
                              label="">
                                <span title={item.spmc || '点击选择商品'}>{item.spmc || <Input readOnly={true} style={{cursor: "pointer", color: "#ccc"}} value="点击选择商品"/>}</span>
                                {/* <span title={item.spmc || '点击选择商品'}>{item.spmc || <span style={{color: "#ccc"}}>点击选择商品</span>}</span> */}
                            </Form.Item>
                          </td>                             
                          <td className="text_left" title={item.ggxh}>
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.ggxh?.state}
                              help={validateState.fymxList[index]?.ggxh?.message}
                              label="">
                              <Input disabled={ item.tmpIsDefault || item.fphxz != 0 } className="ggxh" onBlur={(e) => updateGoodsForm( {ggxh: e.target.value}, index)} value={item.ggxh} />
                            </Form.Item>
                          </td>
                          <td title={item.dw}>
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.dw?.state}
                              help={validateState.fymxList[index]?.dw?.message}
                              label="">
                              <Input disabled={ item.tmpIsDefault || item.fphxz != 0 } className="dw" onBlur={(e) => updateGoodsForm( {dw: e.target.value}, index)} value={item.dw}/>
                            </Form.Item>
                          </td>
                          <td className="text_right" title={item.spsl}>
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.spsl?.state}
                              help={validateState.fymxList[index]?.spsl?.message}
                              label="">
                              <Input disabled={ item.tmpIsDefault || item.fphxz != 0 } className="num" onBlur={(e) => onChangePrice( e.target.value, item, "spsl", index )} value={item.spsl} />
                            </Form.Item>
                          </td>
                          <td className="text_right" title={item.dj}>
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.dj?.state}
                              help={validateState.fymxList[index]?.dj?.message}
                              label="">
                              <Input disabled={ item.tmpIsDefault || item.fphxz != 0 } className="dj" onBlur={(e) => onChangePrice( e.target.value, item, "dj", index)} value={item.dj} />
                            </Form.Item>
                          </td>
                          <td className="text_right" title={item.je}>
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.je?.state}
                              help={validateState.fymxList[index]?.je?.message}
                              label="">
                              <Input disabled={ item.tmpIsDefault || item.fphxz != 0 } readOnly={formObj.hsslbs == 2} onClick={(e) => onClickJe(item)} className="je" onBlur={(e) => onChangePrice( e.target.value, item, "je", index )} value={item.je} />
                            </Form.Item>
                          </td>
                          <td className="text_right">
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.sl?.state}
                              help={validateState.fymxList[index]?.sl?.message}
                              label="">
                              <Select disabled={ item.fphxz != 0 } value={item.sl} onChange={(e) => onChangeSlv(e, item, index)} size="small" title={item.sl}>
                                {item.tmpRateList && item.tmpRateList.map((rItem, rIndex) => {
                                  return (
                                    <Option value={rItem.taxRate + ''} key={rItem.taxRate + rIndex}>{rItem.taxRateLabel}</Option>
                                  )
                                })}
                              </Select>
                            </Form.Item>
                          </td>
                          <td className="text_right" title={item.se}>
                            <Form.Item
                              validateStatus={validateState.fymxList[index]?.se?.state}
                              help={validateState.fymxList[index]?.se?.message}
                              label="">
                              <Input disabled value={item.se} title={item.se}/>
                            </Form.Item>
                          </td>
                          {formObj.hsslbs == 0 && <td className="text_right td-discount">
                            { <Form.Item
                              validateStatus={validateState.fymxList[index]?.zk?.state}
                              help={validateState.fymxList[index]?.zk?.message}
                              label="">
                              <Input disabled={ item.tmpIsDefault || item.fphxz != 0 } value={item.zk} title={item.zk} onBlur={(e) => {onChangeZk({ zk: e.target.value }, item, index)}}/>
                              <Select disabled={ item.tmpIsDefault || item.fphxz != 0 } size="small" value={item.zkType} onChange={(e) => {onChangeZk({ zkType: e }, item, index)}}>
                                  <Option value={"1"} key={"1"}>%</Option>
                                  <Option value={"2"} key={"2"}>元</Option>
                              </Select>
                            </Form.Item> }
                          </td> }
                        </tr>
                      )
                    })
                  }
                  <tr className="invoice-content" valign="top" align="center">
                    {formObj.kplx == 0 && <td className="td-operation" onClick={onClickAdd}>
                      <Icon type="plus-circle" className="add" title="添加行"/>
                    </td>}
                    <td  className="text_left"></td>                               
                    <td  className="text_left" ></td>
                    <td  ></td>
                    <td className="text_right" ></td>
                    <td  className="text_right"></td>
                    <td  className="text_right"></td>
                    <td  className="text_right"></td>
                    <td className="text_right"></td>
                    {formObj.hsslbs == 0 && <td className="text_right"></td>}
                  </tr>
                </tbody>
              </table>
            </Form>
          </Box> 
          <Box height="30px">
            <table  className="itable" cellSpacing="0" cellPadding="0">
              <tbody>
                <tr align="center">
                  <td align="center">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计</td>
                  <td width="330px" className="i_value" align="left" style={{padding: "0 10px", borderRight:"none"}}><span>金额：￥{formObj.hjje}</span></td>
                  {formObj.hsslbs == 0 && <td width="140px" style={{borderLeft:"none",  borderRight:"none"}}></td> }
                  <td width="320px" className="i_value" align="right" style={{padding: "0 10px", borderLeft:"none"}}><span>税额：￥{formObj.hjse}</span></td>
                </tr>
              </tbody>
            </table>
          </Box>
          <Box height="30px">
            <table className="itable" cellSpacing="0" cellPadding="0">
              <tbody>
                <tr>
                  <td align="center">&nbsp;价税合计(大写)</td>
                  <td width="330px" className="i_value" align="left" style={{padding: "0 10px", borderRight:"none"}}><span>{formObj.tmpJshj}</span></td>
                  {formObj.hsslbs == 0 && <td width="140px" style={{borderLeft:"none",  borderRight:"none"}}></td> }
                  <td width="320px" className="i_value" align="right" style={{padding: "0 10px", borderLeft:"none"}}>小写：<span>￥{formObj.jshj}</span></td>
                </tr>
              </tbody>
            </table>
          </Box>
          <Box height="130px">
            <Form layout="vetical"  className="footer-form">
              <table className="itable" cellSpacing="0" cellPadding="0" style={{borderBottom:"2px solid #b88787"}}>
                <tbody>
                  <tr>
                      <td width="25px" style={{paddingLeft:"3px"}}>销售方</td>
                      <td width="60%">
                        <Form.Item 
                          className="form-item-text"
                          required={true}
                          validateStatus={validateState.xhdwmc?.state}
                          help={validateState.xhdwmc?.message}
                          label="名&emsp;&emsp;&emsp;&emsp;称">
                          <span title={formObj.xhdwmc} className="i_value" >{formObj.xhdwmc}</span>
                        </Form.Item>
                        <Form.Item 
                          className="form-item-text"
                          required={true}
                          validateStatus={validateState.xhdwsbh?.state}
                          help={validateState.xhdwsbh?.message}
                          label="纳税人识别号">
                          <span title={formObj.xhdwsbh} className="i_value" >{formObj.xhdwsbh}</span>
                        </Form.Item>
                        <Form.Item 
                          className="form-item-text"
                          required={true}
                          validateStatus={validateState.xhdwdzdh?.state}
                          help={validateState.xhdwdzdh?.message}
                          label="地址&ensp;、&ensp;电话">
                          <span title={formObj.xhdwdzdh} className="i_value" >{formObj.xhdwdzdh}</span>
                        </Form.Item>
                        <Form.Item 
                          // required={true}
                          validateStatus={validateState.xhdwyhzh?.state}
                          help={validateState.xhdwyhzh?.message}
                          label="&emsp;开户行及账号">
                          <Select style={{width: "100%"}} value={formObj.xhdwyhzh} onChange={(e) => updateForm({xhdwyhzh: e})} size="small">
                            {myInitData.xhdwyhzhList && myInitData.xhdwyhzhList.map((rItem, rIndex) => {
                              return (
                                <Option value={rItem} key={rItem + rIndex}>{rItem}</Option>
                              )
                            })}
                          </Select>
                        </Form.Item>
                      </td>
                      <td width="20px" style={{padding:"0 3px"}}>
                          备注
                      </td>
                      <td valign="top" style={{paddingLeft:"3px"}}>
                        <Form.Item 
                          className="bz-textarea-item"
                          required={true}
                          validateStatus={validateState.bz?.state}
                          help={validateState.bz?.message}>
                            <TextArea autoSize={{ minRows: 5, maxRows: 5 }} className="i_input i_textarea"  value={formObj.bz} onChange={(e) => updateForm({bz: e.target.value})}/>
                        </Form.Item>
                      </td>
                  </tr>
                </tbody>
              </table>
            
            </Form>
          </Box>
        </Box>
        <Box className="invoice_bottom" height="40">
          <Form>
            <Row>
              <Col span={6}>
                <Form.Item
                  // required={true}
                  validateStatus={validateState.skr?.state}
                  help={validateState.skr?.message}
                  label="收款人">
                  <Input className="i_input" style={{width: "120px"}} onBlur={(e) => updateForm( {skr: e.target.value})} value={formObj.skr} title={formObj.skr}/>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  // required={true}
                  validateStatus={validateState.fhr?.state}
                  help={validateState.fhr?.message}
                  label="复核">
                  <Input className="i_input" style={{width: "120px"}} onBlur={(e) => updateForm( {fhr: e.target.value})} value={formObj.fhr} title={formObj.fhr}/>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="开票人">
                  <span className="i_value">{formObj.kpr}</span>
                </Form.Item>
              </Col>
              {/* <Col span={6}>
                <Form.Item
                  label="销售单位">
                  <span className="i_value">（章）</span>
                </Form.Item>
              </Col> */}
            </Row>
          </Form>
        </Box>
        
        <Box height="70">
          {isHc && <Button style={{height: "40px", padding: "10px 50px", margin: "20px 0 0 0"}} type="primary" onClick={onSubmitHc}>开票</Button>}
          {!isHc && <Button style={{height: "40px", padding: "10px 50px", margin: "20px 0 0 0"}} type="primary" onClick={onSubmit}>开票</Button>}
        </Box>
      </Spin>
    </div>
  </div> 
  );
}