index.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  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.applicant" 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-date-picker
  41. v-model="search.refundDateFrom"
  42. value-format="yyyy-MM-dd"
  43. format="yyyy-MM-dd"
  44. size="small"
  45. type="date"
  46. placeholder="开始日期"
  47. />
  48. <div class="zhi">至</div>
  49. <el-date-picker
  50. v-model="search.refundDateTo"
  51. value-format="yyyy-MM-dd"
  52. format="yyyy-MM-dd"
  53. size="small"
  54. type="date"
  55. placeholder="终止日期"
  56. />
  57. </div>
  58. </div>
  59. </el-col>
  60. </el-row>
  61. <el-row class="handle-box" style="margin-bottom: 10px">
  62. <el-col :span="24" style="margin-top: 20px">
  63. <el-button class="ch-button-warning" size="small" style="float: right" @click="handleReset()"><i class="el-icon-search" />&nbsp;重置</el-button>
  64. <el-button class="ch-button" size="small" style="float: right" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
  65. <el-button class="ch-button-add" size="small" style="float: right;" @click="handleAdd()"><i class="el-icon-menu" />&nbsp;新增</el-button>
  66. </el-col>
  67. </el-row>
  68. <el-row class="handle-box">
  69. <el-col :span="24">
  70. <el-table
  71. v-loading="loading"
  72. :data="AllData"
  73. row-class-name="g_table_row"
  74. border
  75. :header-cell-style="{background:'#f2f2f2'}"
  76. >
  77. <el-table-column type="index" width="60" />
  78. <el-table-column label="合同编号" prop="contractNumber" />
  79. <el-table-column label="申请人" prop="applicant" width="200" />
  80. <el-table-column label="买受人" prop="buyerName" width="200" />
  81. <el-table-column label="房屋" prop="houseName" width="200" />
  82. <el-table-column label="退房原因" prop="reasonStr" width="110" />
  83. <el-table-column label="应退(元)" prop="refundAmount" />
  84. <el-table-column label="实退(元)" prop="actualRefundAmount" />
  85. <el-table-column label="扣除" prop="deductible" />
  86. <el-table-column label="关联审批单号" prop="approvalNumber" />
  87. <el-table-column header-align="center" label="操作" width="200">
  88. <template scope="scope">
  89. <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
  90. <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
  91. </template>
  92. </el-table-column>
  93. </el-table>
  94. <div class="table-page">
  95. <el-pagination
  96. :current-page.sync="currentPage"
  97. :page-sizes="[10, 20, 50, 100]"
  98. :page-size="pageSize"
  99. background
  100. layout="total, sizes, prev, pager, next, jumper"
  101. :total="allpage"
  102. @size-change="handleSizeChange"
  103. @current-change="handleCurrentChange"
  104. />
  105. </div>
  106. </el-col>
  107. </el-row>
  108. <!-- 预收款登记 -->
  109. <el-dialog
  110. :visible.sync="dialogVisible"
  111. :close-on-click-modal="false"
  112. :close-on-press-escape="false"
  113. title=""
  114. width="90%"
  115. top="20px"
  116. class="statistic_base"
  117. :append-to-body="true"
  118. :modal-append-to-body="true"
  119. custom-class="tagdialog"
  120. @close="getData"
  121. >
  122. <add-refund v-if="dialogVisible" ref="addRefund" @cancel="cancel" />
  123. </el-dialog>
  124. </div>
  125. </template>
  126. <script>
  127. import Base from '@/views/base/base'
  128. import BaseData from '@/views/base/baseData'
  129. import AddRefund from '@/views/receiveRefundsManagement/refundManagement/addRefund.vue'
  130. export default {
  131. name: 'RefundManagementIndex',
  132. components: { AddRefund },
  133. mixins: [Base, BaseData],
  134. data() {
  135. return {
  136. dc_key: ['CHECK_OUT_REASON'],
  137. // 列表相关
  138. search: {
  139. },
  140. AllData: [],
  141. loading: false,
  142. // 弹框相关
  143. dialogVisible: false,
  144. dialogTitle: '新增'
  145. }
  146. },
  147. mounted() {
  148. this.initDict(this.dc_key).then((res) => {
  149. this.getData()
  150. })
  151. },
  152. methods: {
  153. getData: function() {
  154. const _this = this
  155. _this.loading = true
  156. _this.AllData = []
  157. this.search.pageNum = this.currentPage
  158. this.search.pageSize = this.pageSize
  159. this.search.payType = 1
  160. this.baseRequest('list', this.search).then((res) => {
  161. if (res.data.rows) {
  162. res.data.rows.forEach(function(item) {
  163. const json = _this.getItemJson(item)
  164. _this.AllData.push(json)
  165. })
  166. _this.allpage = res.data.total
  167. }
  168. _this.loading = false
  169. }).catch((e) => {
  170. })
  171. },
  172. handleSearch: function() {
  173. this.getData()
  174. },
  175. handleReset: function() {
  176. for (const i in this.search) {
  177. if (i !== 'pageNum' && i !== 'pageSize') {
  178. this.search[i] = ''
  179. }
  180. }
  181. this.handleSearch()
  182. },
  183. getItemJson: function(item) {
  184. item.reasonStr = this.dc_map.CHECK_OUT_REASON[item.reason]
  185. return item
  186. },
  187. handleAdd: function() {
  188. this.dialogVisible = true
  189. const val = {
  190. isView: false
  191. }
  192. // 新vue时调用的方法
  193. this.$nextTick(() => {
  194. this.$refs.addRefund.initData(val)
  195. })
  196. },
  197. /* 编辑*/
  198. handleEdit: function(val) {
  199. this.dialogVisible = true
  200. val.isView = false
  201. // 新vue时调用的方法
  202. this.$nextTick(() => {
  203. this.$refs.addRefund.initData(val)
  204. })
  205. },
  206. handleView(val) {
  207. this.dialogVisible = true
  208. val.isView = true
  209. // 新vue时调用的方法
  210. this.$nextTick(() => {
  211. this.$refs.addRefund.initData(val)
  212. })
  213. },
  214. cancel: function() {
  215. this.dialogVisible = false
  216. },
  217. baseRequest(opUrl, postData) {
  218. return this.$channel.globeRequest('RefundManageController', opUrl, postData, 'project')
  219. }
  220. }
  221. }
  222. </script>
  223. <style scoped>
  224. .ch-input .el-input__inner {
  225. border-color: #32323A;
  226. }
  227. .ch-input-size {
  228. width: 150px;
  229. }
  230. .ch-button {
  231. border-color: #32323A;
  232. background-color: #32323A;
  233. color: #fff;
  234. }
  235. .ch-button-warning {
  236. margin-left: 10px;
  237. border-color: #E6A23C;
  238. background-color: #E6A23C;
  239. color: #fff;
  240. }
  241. .ch-button-export {
  242. margin-left: 10px;
  243. border-color: #98CC1F;
  244. background-color: #98CC1F;
  245. color: #fff;
  246. }
  247. /deep/.el-dialog__header {
  248. padding: 10px 20px;
  249. }
  250. /deep/.el-dialog__body {
  251. padding: 10px 20px;
  252. }
  253. </style>