invoiceManage.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. <template>
  2. <div>
  3. <el-row class="handle-box" style="margin-bottom: 10px">
  4. <el-col :span="8">
  5. <div class="Pageform">
  6. <div class="formlabel">买受人</div>
  7. <div class="formvalue">
  8. <el-input v-model="search.buyerName" class="ch-input ch-input-size" placeholder="买受人" size="small" @keyup.enter.native="handleSearch()" />
  9. </div>
  10. </div>
  11. </el-col>
  12. <el-col :span="8">
  13. <div class="Pageform">
  14. <div class="formlabel">房屋</div>
  15. <div class="formvalue">
  16. <el-input v-model="search.houseName" class="ch-input ch-input-size" placeholder="房号" size="small" @keyup.enter.native="handleSearch()" />
  17. </div>
  18. </div>
  19. </el-col>
  20. <el-col :span="8">
  21. <div class="Pageform">
  22. <div class="formlabel">身份证</div>
  23. <div class="formvalue">
  24. <el-input v-model="search.buyerIdentityCard" class="ch-input ch-input-size" placeholder="身份证" size="small" @keyup.enter.native="handleSearch()" />
  25. </div>
  26. </div>
  27. </el-col>
  28. <el-col :span="8">
  29. <div class="Pageform">
  30. <div class="formlabel">批次号</div>
  31. <div class="formvalue">
  32. <el-input v-model="search.batchNumber" class="ch-input ch-input-size" placeholder="批次号" size="small" @keyup.enter.native="handleSearch()" />
  33. </div>
  34. </div>
  35. </el-col>
  36. <el-col :span="8">
  37. <div class="Pageform">
  38. <div class="formlabel">推送状态</div>
  39. <div class="formvalue">
  40. <el-select v-model="search.sendStatus" style="width: 100%" placeholder="请选择">
  41. <el-option
  42. v-for="item in dc_data.SEND_STATUS"
  43. :key="item.value"
  44. :label="item.label"
  45. :value="item.value"
  46. />
  47. </el-select>
  48. </div>
  49. </div>
  50. </el-col>
  51. <el-col :span="8">
  52. <div class="Pageform">
  53. <div class="formlabel">开票状态</div>
  54. <div class="formvalue">
  55. <el-select
  56. v-model="search.invoiceStatus"
  57. style="width: 100%"
  58. filterable
  59. >
  60. <el-option
  61. v-for="item in dc_data.INVOICE_STATUS"
  62. :key="item.value"
  63. :label="item.label"
  64. :value="item.value"
  65. />
  66. </el-select>
  67. </div>
  68. </div>
  69. </el-col>
  70. <el-col :span="8">
  71. <div class="Pageform">
  72. <div class="formlabel">推送日期</div>
  73. <div class="formvalue">
  74. <el-date-picker
  75. v-model="search.sendDateFrom"
  76. value-format="yyyy-MM-dd"
  77. format="yyyy-MM-dd"
  78. size="small"
  79. type="date"
  80. placeholder="开始日期"
  81. />
  82. <div class="zhi">至</div>
  83. <el-date-picker
  84. v-model="search.sendDateTo"
  85. value-format="yyyy-MM-dd"
  86. format="yyyy-MM-dd"
  87. size="small"
  88. type="date"
  89. placeholder="终止日期"
  90. />
  91. </div>
  92. </div>
  93. </el-col>
  94. <el-col :span="8">
  95. <div class="Pageform">
  96. <div class="formlabel">开票日期</div>
  97. <div class="formvalue">
  98. <el-date-picker
  99. v-model="search.invoiceDateFrom"
  100. value-format="yyyy-MM-dd"
  101. format="yyyy-MM-dd"
  102. size="small"
  103. type="date"
  104. placeholder="开始日期"
  105. />
  106. <div class="zhi">至</div>
  107. <el-date-picker
  108. v-model="search.invoiceDateTo"
  109. value-format="yyyy-MM-dd"
  110. format="yyyy-MM-dd"
  111. size="small"
  112. type="date"
  113. placeholder="终止日期"
  114. />
  115. </div>
  116. </div>
  117. </el-col>
  118. </el-row>
  119. <el-row class="handle-box" style="margin-bottom: 10px;text-align: right">
  120. <el-col :span="24" style="margin-top: 20px">
  121. <el-button class="ch-button" size="small" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
  122. <el-button class="ch-button-warning" size="small" @click="handleReset()"><i class="el-icon-search" />&nbsp;重置</el-button>
  123. <el-button class="ch-button-add" size="small" @click="handleAdd()"><i class="el-icon-menu" />&nbsp;新增</el-button>
  124. </el-col>
  125. </el-row>
  126. <el-row class="handle-box">
  127. <el-col :span="24">
  128. <el-table
  129. v-loading="loading"
  130. :data="AllData"
  131. row-class-name="g_table_row"
  132. border
  133. :header-cell-style="{background:'#f2f2f2'}"
  134. >
  135. <el-table-column type="index" width="60" />
  136. <el-table-column label="合同编号" prop="contractNumber" />
  137. <el-table-column label="网签备案号" prop="recordNumber" />
  138. <el-table-column label="买受人" prop="buyerName" width="200" />
  139. <el-table-column label="房屋" prop="houseName" width="200" />
  140. <el-table-column label="应收(元)" prop="receivableMoney" width="120" />
  141. <el-table-column label="已收(元)" prop="receivedMoney" width="120" />
  142. <el-table-column label="收款状态" prop="collectionStatusStr" width="110">
  143. <template scope="scope">
  144. <span
  145. :style="{'color':scope.row.collectionStatusStr==='已退款'?'red':scope.row.collectionStatusStr==='完全收款'?'green':'gray'}"
  146. >
  147. {{ scope.row.collectionStatusStr }}
  148. </span>
  149. </template>
  150. </el-table-column>
  151. <el-table-column label="推送状态" prop="sendStatusStr">
  152. <template scope="scope">
  153. <span
  154. style="color: green"
  155. >
  156. {{ scope.row.sendStatusStr }}
  157. </span>
  158. </template>
  159. </el-table-column>
  160. <el-table-column label="开票状态" prop="invoiceStatusStr">
  161. <template scope="scope">
  162. <span
  163. :style="{'color':scope.row.invoiceStatusStr==='已红冲'?'red':scope.row.invoiceStatusStr==='待开票'?'green':'gray'}"
  164. >
  165. {{ scope.row.invoiceStatusStr }}
  166. </span>
  167. </template>
  168. </el-table-column>
  169. <el-table-column label="结转状态" prop="carryOverStatusStr">
  170. <template scope="scope">
  171. <span
  172. :style="{'color':scope.row.invoiceStatusStr==='已红冲'?'red':scope.row.invoiceStatusStr==='待开票'?'green':'gray'}"
  173. >
  174. {{ scope.row.invoiceStatusStr }}
  175. </span>
  176. </template>
  177. </el-table-column>
  178. <el-table-column header-align="center" label="操作" width="180">
  179. <template scope="scope">
  180. <el-button v-if="scope.row.sendStatus === '0'" type="text" size="mini" @click="handleInvoice(scope.row)">推送</el-button>
  181. <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
  182. </template>
  183. </el-table-column>
  184. </el-table>
  185. <div class="table-page">
  186. <el-pagination
  187. :current-page.sync="currentPage"
  188. :page-sizes="[10, 20, 50, 100]"
  189. :page-size="pageSize"
  190. background
  191. layout="total, sizes, prev, pager, next, jumper"
  192. :total="allpage"
  193. @size-change="handleSizeChange"
  194. @current-change="handleCurrentChange"
  195. />
  196. </div>
  197. </el-col>
  198. </el-row>
  199. <!--新增预收款发票-->
  200. <el-dialog
  201. :visible.sync="dialogVisible"
  202. :close-on-click-modal="false"
  203. :close-on-press-escape="false"
  204. :title="dialogTitle"
  205. width="90%"
  206. top="20px"
  207. class="statistic_base"
  208. :append-to-body="true"
  209. :modal-append-to-body="true"
  210. custom-class="tagdialog"
  211. @close="getData"
  212. >
  213. <add-invoice v-if="dialogVisible" ref="addInvoice" @cancel="cancel" />
  214. </el-dialog>
  215. </div>
  216. </template>
  217. <script>
  218. import Base from '@/views/base/base'
  219. import BaseData from '@/views/base/baseData'
  220. import AddInvoice from '@/views/invoice/components/addInvoice.vue'
  221. import constant from '@/static/utils/constant'
  222. export default {
  223. name: 'InvoiceManage',
  224. components: { AddInvoice },
  225. mixins: [Base, BaseData],
  226. data() {
  227. return {
  228. dc_key: ['INVOICE_STATUS', 'SEND_STATUS', 'HOUSE_PAYMENT_STATUS', 'CARRY_OVER_STATUS'],
  229. // 列表相关
  230. search: {
  231. sendStatus: ''
  232. },
  233. AllData: [],
  234. loading: false,
  235. // 弹框相关
  236. dialogVisible: false,
  237. dialogTitle: '新增'
  238. }
  239. },
  240. mounted() {
  241. this.initDict(this.dc_key).then((res) => {
  242. this.getData()
  243. })
  244. },
  245. methods: {
  246. getData: function() {
  247. const _this = this
  248. _this.loading = true
  249. _this.AllData = []
  250. this.search.pageNum = this.currentPage
  251. this.search.pageSize = this.pageSize
  252. this.baseRequest('advancePaymentInvoiceList', this.search).then((res) => {
  253. if (res.data.rows) {
  254. res.data.rows.forEach(function(item) {
  255. const json = _this.getItemJson(item)
  256. _this.AllData.push(json)
  257. })
  258. _this.allpage = res.data.total
  259. }
  260. _this.loading = false
  261. }).catch((e) => {
  262. // console.log(e)
  263. })
  264. // this.initOutData()
  265. },
  266. handleSearch: function() {
  267. this.getData()
  268. },
  269. handleReset: function() {
  270. for (const i in this.search) {
  271. if (i !== 'pageNum' && i !== 'pageSize') {
  272. this.search[i] = ''
  273. }
  274. }
  275. this.handleSearch()
  276. },
  277. getItemJson: function(item) {
  278. item.invoiceStatusStr = this.dc_map.INVOICE_STATUS[item.invoiceStatus]
  279. item.sendStatusStr = this.dc_map.SEND_STATUS[item.sendStatus]
  280. item.collectionStatusStr = this.dc_map.HOUSE_PAYMENT_STATUS[item.collectionStatus]
  281. item.carryOverStatusStr = this.dc_map.CARRY_OVER_STATUS[item.carryOverStatus]
  282. return item
  283. },
  284. handleAdd() {
  285. this.dialogVisible = true
  286. this.dialogTitle = ''
  287. const val = {
  288. isView: false
  289. }
  290. // 新vue时调用的方法
  291. this.$nextTick(() => {
  292. this.$refs.addInvoice.initData(val)
  293. })
  294. },
  295. handleInvoice(row) {
  296. this.dialogVisible = true
  297. this.dialogTitle = ''
  298. row.isView = false
  299. // 新vue时调用的方法
  300. this.$nextTick(() => {
  301. this.$refs.addInvoice.initData(row)
  302. })
  303. },
  304. handleView(val) {
  305. this.dialogVisible = true
  306. this.dialogTitle = ''
  307. val.isView = true
  308. // 新vue时调用的方法
  309. this.$nextTick(() => {
  310. this.$refs.addInvoice.initData(val)
  311. })
  312. },
  313. cancel: function() {
  314. this.dialogVisible = false
  315. },
  316. baseRequest(opUrl, postData) {
  317. return this.$channel.globeRequest('InvoiceManageController', opUrl, postData, 'project')
  318. }
  319. }
  320. }
  321. </script>
  322. <style lang="scss">
  323. .Pageform{
  324. display: flex;
  325. align-items: center;
  326. .formlabel{
  327. width: 15%;
  328. text-align: right;
  329. font-size:14px ;
  330. }
  331. .formvalue{
  332. width: 75%;
  333. display: flex;
  334. margin-left: 2%;
  335. .ch-input{
  336. width: 100%;
  337. }
  338. .zhi{
  339. width: 60px;
  340. text-align: center;
  341. }
  342. }
  343. }
  344. </style>
  345. <style scoped>
  346. .ch-input .el-input__inner {
  347. border-color: #32323A;
  348. }
  349. .ch-input-size {
  350. width: 150px;
  351. }
  352. .ch-button {
  353. border-color: #32323A;
  354. background-color: #32323A;
  355. color: #fff;
  356. }
  357. .ch-button-warning {
  358. margin-left: 10px;
  359. border-color: #E6A23C;
  360. background-color: #E6A23C;
  361. color: #fff;
  362. }
  363. .ch-button-export {
  364. margin-left: 10px;
  365. border-color: #98CC1F;
  366. background-color: #98CC1F;
  367. color: #fff;
  368. }
  369. /deep/.el-dialog__header {
  370. padding: 10px 20px;
  371. }
  372. /deep/.el-dialog__body {
  373. padding: 10px 20px;
  374. }
  375. </style>