issueInvoice.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <template>
  2. <view>
  3. <ujp-navbar title="开具发票">
  4. <text class="explain" @click="gotoUrl('pagesFinance/news/index?code=KPSM')">开票说明</text>
  5. </ujp-navbar>
  6. <view class="invioice-info">
  7. <p class="title">发票信息</p>
  8. <u-cell-group>
  9. <u-cell-item title="发票金额" :arrow="false"> <text style="color:#ff3d00;">{{obj.totalPrice}}元</text></u-cell-item>
  10. <u-cell-item title="抬头类型" :arrow="false">
  11. <view v-if="!selectObj.title">请选择发票</view>
  12. <view v-else-if="selectObj.headerType==1">企业单位</view>
  13. <view v-else-if="selectObj.headerType==2">个人/非企业单位</view>
  14. </u-cell-item>
  15. <u-cell-item title="发票抬头" @click="gotoUrl('pagesFinance/MyInvoice/invoiceTitleManagement?invoice=1&uuid='+uuid)" :value="selectObj.title?selectObj.title:'请选择发票抬头'"></u-cell-item>
  16. <u-cell-item title="公司税号" :value="selectObj.title?(selectObj.companyTaxNo?selectObj.companyTaxNo:'--'):'自动读取对应抬头的公司税号'" :arrow="false"></u-cell-item>
  17. </u-cell-group>
  18. </view>
  19. <!-- 弹窗 -->
  20. <view class="modal">
  21. <u-modal v-model="show" :show-title="false" @confirm="confirm"
  22. :show-cancel-button="true" confirm-text="确认开具" cancel-text="返回修改">
  23. <view class="title">
  24. 发票开具成功后不可撤销
  25. 请您仔细核对开票信息
  26. </view>
  27. <view class="infos">
  28. <view class="item">
  29. <view class="name">
  30. 发票项目
  31. </view>
  32. <view class="content">
  33. 充电费发票
  34. </view>
  35. </view>
  36. <view class="item">
  37. <view class="name">
  38. 发票抬头
  39. </view>
  40. <view class="content">
  41. {{selectObj.title}}
  42. </view>
  43. </view>
  44. <view class="item">
  45. <view class="name">
  46. 公司税号
  47. </view>
  48. <view class="content">
  49. {{selectObj.companyTaxNo}}
  50. </view>
  51. </view>
  52. <view class="item">
  53. <view class="name">
  54. 发票金额
  55. </view>
  56. <view class="content">
  57. {{obj.totalPrice}}元
  58. </view>
  59. </view>
  60. <view class="hint">
  61. 发票开具后,可开票额度将按照实际开票金额相应扣减
  62. </view>
  63. </view>
  64. </u-modal>
  65. </view>
  66. <u-button class="submit" type="success" @click="open" shape="circle">提交</u-button>
  67. </view>
  68. </template>
  69. <script>
  70. import * as API from '@/apis/invoiceApi.js'
  71. export default {
  72. data() {
  73. return {
  74. ids:"",
  75. uuid:"",
  76. list: [{
  77. name: '企业单位',
  78. disabled: false
  79. },
  80. {
  81. name: '个人/非企业单位',
  82. disabled: false
  83. },
  84. ],
  85. value: '企业单位',
  86. show: false,
  87. selectObj:{},
  88. obj:{},
  89. id:"",
  90. saveAll:"",
  91. startDate:"",
  92. endDate:"",
  93. eventChannel:null,
  94. };
  95. },
  96. onShow() {
  97. this.getInfo()
  98. },
  99. onLoad(op) {
  100. if(op.id){
  101. this.id=op.id;
  102. }
  103. if(op.ids){
  104. this.ids=op.ids;
  105. }
  106. if(op.saveAll){
  107. this.saveAll=op.saveAll;
  108. }
  109. if(op.startDate){
  110. this.saveAll=1;
  111. this.startDate=op.startDate;
  112. this.endDate=op.endDate;
  113. }
  114. this.getInfo()
  115. },
  116. methods: {
  117. confirm(){
  118. uni.showLoading({
  119. title: "加载中",
  120. mask: true,
  121. })
  122. API.saveInvoice({
  123. entAccountId:this.id,
  124. recordIds:this.ids,
  125. saveAll:this.saveAll,
  126. invoiceTypeId:this.selectObj.id,
  127. startDate:this.startDate,
  128. endDate:this.endDate,
  129. }).then((res) => {
  130. try{
  131. var eventChannel = this.getOpenerEventChannel();
  132. eventChannel.emit('refreshData');
  133. }catch(e){
  134. //TODO handle the exception
  135. }
  136. uni.hideLoading()
  137. uni.redirectTo({
  138. url:"/pagesFinance/MyInvoice/invioceResult"
  139. })
  140. }).catch(error => {
  141. uni.showToast({
  142. title: error,
  143. icon: "none"
  144. })
  145. })
  146. },
  147. getInfo(){
  148. uni.showLoading({
  149. title: "加载中",
  150. mask: true,
  151. })
  152. API.invoiceTypeDefalut({
  153. entAccountId:this.id,
  154. recordIds:this.ids,
  155. saveAll:this.saveAll,
  156. startDate:this.startDate,
  157. endDate:this.endDate,
  158. }).then((res) => {
  159. eventChannel.emit('refreshData');
  160. uni.hideLoading()
  161. this.selectObj=res.data.invoiceType
  162. if(!res.data.invoiceType){
  163. this.selectObj={}
  164. this.uuid=new Date().getTime();
  165. }else{
  166. var obj=this.carhelp.get("issueInvoice");
  167. if(obj){
  168. if(obj.uuid==this.uuid){
  169. if(obj.selectObj.id){
  170. this.selectObj=obj.selectObj;
  171. }
  172. }
  173. }
  174. }
  175. this.selectObj.totalPrice=res.data.totalPrice;
  176. this.obj=res.data
  177. this.uuid=new Date().getTime();
  178. this.carhelp.set("issueInvoice",{
  179. uuid:this.uuid,
  180. selectObj:this.selectObj
  181. })
  182. }).catch(error => {
  183. uni.showToast({
  184. title: error,
  185. icon: "none"
  186. })
  187. })
  188. },
  189. // 选中某个单选框时,由radio时触发
  190. radioChange(e) {
  191. // console.log(e);
  192. },
  193. // 选中任一radio时,由radio-group触发
  194. radioGroupChange(e) {
  195. // console.log(e);
  196. },
  197. open() {
  198. if(this.selectObj.id){
  199. this.show = true;
  200. }
  201. else{
  202. uni.showToast({
  203. title:"请选择发票"
  204. })
  205. }
  206. }
  207. }
  208. };
  209. </script>
  210. <style lang="scss">
  211. page {
  212. background-color: #fff;
  213. }
  214. .explain {
  215. position: absolute;
  216. right: 16px;
  217. color: rgba(51, 51, 51, 100);
  218. font-size: 12px
  219. }
  220. .invioice-info {
  221. padding: 20px 16px;
  222. .title {
  223. font-size: 16px;
  224. color: #101010;
  225. margin-bottom: 16px;
  226. }
  227. }
  228. /deep/.u-cell__value {
  229. text-align: left;
  230. margin-left: 41px;
  231. font-size: 16px
  232. }
  233. /deep/.u-cell {
  234. padding: 16px 0;
  235. }
  236. .submit {
  237. width: 91.4%;
  238. margin: 12px auto;
  239. position: fixed;
  240. bottom: 0;
  241. left: 0;
  242. right: 0;
  243. }
  244. // 弹窗
  245. .modal {
  246. background-color: #101010;
  247. .title {
  248. line-height: 20px;
  249. padding: 18px 52px;
  250. background-image: linear-gradient(rgb(0, 217, 115), #00A457);
  251. color: #fff;
  252. text-align: center;
  253. }
  254. .infos {
  255. padding: 20px 14px;
  256. .item {
  257. line-height: 28px;
  258. display: flex;
  259. justify-content: space-between;
  260. color: #666666;
  261. font-size: 16px
  262. }
  263. .hint {
  264. color: rgba(238, 49, 56, 100);
  265. margin-top: 16px;
  266. font-size: 14px
  267. }
  268. }
  269. }
  270. </style>