index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695
  1. <!-- 租户账单 -->
  2. <template>
  3. <div class="content main">
  4. <organ-tree @organId="currentOrganId"></organ-tree>
  5. <div class="content-right">
  6. <div class="search">
  7. <el-radio-group
  8. v-model="chargeStatus"
  9. @change="changeRadio"
  10. class="zz-tab-button"
  11. >
  12. <el-radio-button label="1">未交账单</el-radio-button>
  13. <el-radio-button label="2">已交账单</el-radio-button>
  14. </el-radio-group>
  15. <el-input
  16. clearable
  17. placeholder="输入费用名称"
  18. class="search-input"
  19. v-trim
  20. v-model.trim="mixins_query.chargeName"
  21. ></el-input>
  22. <el-select
  23. v-model="mixins_querys.chargeType"
  24. placeholder="费用类型"
  25. clearable
  26. class="width120"
  27. >
  28. <el-option
  29. label="物业费"
  30. :value="1"
  31. ></el-option>
  32. <el-option
  33. label="水费"
  34. :value="2"
  35. ></el-option>
  36. <el-option
  37. label="电费"
  38. :value="3"
  39. ></el-option>
  40. <el-option
  41. label="卫生费"
  42. :value="6"
  43. ></el-option>
  44. <el-option
  45. label="车位管理费"
  46. :value="4"
  47. ></el-option>
  48. <el-option
  49. label="其他费用"
  50. :value="7"
  51. ></el-option>
  52. </el-select>
  53. <!-- 已交 -->
  54. <template v-if="chargeStatus == 2">
  55. <el-select
  56. v-model="mixins_query.payType"
  57. class="width120"
  58. placeholder="缴费方式"
  59. clearable
  60. >
  61. <el-option
  62. label="微信"
  63. :value="7"
  64. ></el-option>
  65. <el-option
  66. label="支付宝"
  67. :value="2"
  68. ></el-option>
  69. <el-option
  70. label="现金"
  71. :value="3"
  72. ></el-option>
  73. <el-option
  74. label="刷卡"
  75. :value="6"
  76. ></el-option>
  77. <el-option
  78. label="其他"
  79. :value="5"
  80. ></el-option>
  81. </el-select>
  82. <el-date-picker
  83. v-model="times"
  84. value-format="yyyy-MM-dd"
  85. type="daterange"
  86. range-separator="至"
  87. start-placeholder="选择开始日期"
  88. end-placeholder="选择结束日期"
  89. @change="effectiveDateToggle"
  90. ></el-date-picker>
  91. </template>
  92. <el-date-picker
  93. v-else
  94. v-model="times"
  95. value-format="yyyy-MM"
  96. type="monthrange"
  97. range-separator="至"
  98. start-placeholder="选择开始月"
  99. end-placeholder="选择结束月"
  100. @change="effectiveDateToggle"
  101. ></el-date-picker>
  102. <el-button
  103. class="search-btn"
  104. type="primary"
  105. @click="mixins_search()"
  106. icon="el-icon-search"
  107. >搜索</el-button>
  108. <div class="search-icon">
  109. <!-- v-show="chargeStatus == 1 && chiData.type === 'room'" -->
  110. <el-tooltip
  111. class="item"
  112. effect="light"
  113. placement="bottom"
  114. content="临时收款"
  115. >
  116. <i
  117. v-show="temporaryCollection == '1' ? true : false"
  118. class="zoniot_font zoniot-icon-linshishoukuan"
  119. @click="collections('temporary')"
  120. ></i>
  121. </el-tooltip>
  122. <el-dropdown
  123. type="primary"
  124. @command="addCommand"
  125. >
  126. <span class="zoniot_font zoniot-icon-tianjia2"></span>
  127. <el-dropdown-menu
  128. slot="dropdown"
  129. hide-on-click="false"
  130. class="device-search-dropdown"
  131. >
  132. <el-dropdown-item command="batchAdd">
  133. <div class="upload_div">
  134. <xk-upload
  135. class="upload_class"
  136. @callback="mixins_search"
  137. :params="{ importType: 'BILL' }"
  138. >
  139. <span slot="content">批量导入</span>
  140. </xk-upload>
  141. </div>
  142. </el-dropdown-item>
  143. <el-dropdown-item command="template">下载模板</el-dropdown-item>
  144. </el-dropdown-menu>
  145. </el-dropdown>
  146. <el-tooltip
  147. v-show="chargeStatus == 1"
  148. class="item"
  149. effect="light"
  150. placement="bottom"
  151. content="批量收款"
  152. >
  153. <i
  154. class="zoniot_font zoniot-icon-piliangshoukuan"
  155. @click="collections('bulk')"
  156. ></i>
  157. </el-tooltip>
  158. <el-tooltip
  159. class="item"
  160. effect="light"
  161. placement="bottom"
  162. content="导出"
  163. >
  164. <i
  165. class="zoniot_font zoniot-icon-daochu2"
  166. @click="exportExcel"
  167. ></i>
  168. </el-tooltip>
  169. </div>
  170. </div>
  171. <zz-table
  172. v-if="statusTable"
  173. :settings="{ showCheckbox: chargeStatus == 1, showIndex: chargeStatus == 2, stripe: true }"
  174. :cols="chargeStatus == 1 ? cols : statusCols"
  175. :data="mixins_list"
  176. :pageset="mixins_pageset"
  177. @page-change="pageChange"
  178. :selectable="selectable"
  179. @selection-change="selectionChange"
  180. >
  181. <template
  182. slot-scope="scope"
  183. slot="payBeginTime"
  184. >
  185. {{ typeTimeTransition(scope.row.payBeginTime, scope.row.payEndTime) }}
  186. </template>
  187. <template
  188. slot-scope="scope"
  189. slot="opt"
  190. >
  191. <div class="opt">
  192. <el-tooltip
  193. v-show="chargeStatus == 1"
  194. class="item"
  195. effect="light"
  196. placement="bottom"
  197. content="收款"
  198. >
  199. <i
  200. v-if="$collectiontenant"
  201. class="zoniot_font zoniot-icon-shoukuan"
  202. @click="collections('single', scope.row)"
  203. style="margin: 0"
  204. ></i>
  205. </el-tooltip>
  206. <el-tooltip
  207. v-show="chargeStatus == 1"
  208. class="item"
  209. effect="light"
  210. placement="bottom"
  211. content="修改账单金额"
  212. >
  213. <img
  214. v-if="$billAmounttenant"
  215. src="../../../assets/img/icon_xiugaizhangdanjine.png"
  216. alt=""
  217. @click="editAmount(scope.row)"
  218. style="margin: 0 10px;"
  219. >
  220. </el-tooltip>
  221. <el-tooltip
  222. v-show="chargeStatus == 1"
  223. class="item"
  224. effect="light"
  225. placement="bottom"
  226. content="修改应收金额"
  227. >
  228. <img
  229. v-if="$receivableAmounttenant"
  230. src="../../../assets/img/icon_xiugaiyingshoujine.png"
  231. alt=""
  232. @click="receivableAmount(scope.row)"
  233. style="margin-right: 10px;"
  234. >
  235. </el-tooltip>
  236. <el-tooltip
  237. v-show="chargeStatus == 1"
  238. class="item"
  239. effect="light"
  240. placement="bottom"
  241. content="删除"
  242. >
  243. <i
  244. v-if="$editAmounttenant"
  245. class="zoniot_font zoniot-icon-shanchu redText"
  246. @click="deluserbyidFn(scope.row.id)"
  247. style="margin: 0"
  248. ></i>
  249. </el-tooltip>
  250. <el-tooltip
  251. v-show="chargeStatus == 2"
  252. class="item"
  253. effect="light"
  254. placement="bottom"
  255. content="详情"
  256. >
  257. <i
  258. class="zoniot_font zoniot-icon-xiangqing"
  259. @click="lookDetails(scope.row)"
  260. ></i>
  261. </el-tooltip>
  262. </div>
  263. </template>
  264. </zz-table>
  265. </div>
  266. </div>
  267. </template>
  268. <script>
  269. import list from '@/utils/list.js';
  270. export default {
  271. mixins: [list],
  272. name: 'propertyFee',
  273. data () {
  274. return {
  275. mix_path: 'payService/propertyFee/index',
  276. temporaryCollection: '2',
  277. mixins_querys: {
  278. chargeType: ''
  279. },
  280. currentId: '',
  281. cols: [
  282. {
  283. label: '订单号',
  284. prop: 'billNumber'
  285. },
  286. {
  287. label: '地址',
  288. prop: 'assets'
  289. },
  290. {
  291. label: '业主',
  292. prop: 'residentName',
  293. width: '100'
  294. },
  295. {
  296. label: '费用名称',
  297. prop: 'chargeName',
  298. width: '200'
  299. },
  300. {
  301. label: '计费日期',
  302. prop: 'payBeginTime',
  303. slot: 'payBeginTime',
  304. width: '150'
  305. },
  306. {
  307. label: '费用金额(元)',
  308. prop: 'amount'
  309. },
  310. {
  311. label: '滞纳金(元)',
  312. prop: 'lateFee'
  313. },
  314. {
  315. label: '账单金额(元)',
  316. prop: 'amount'
  317. },
  318. {
  319. label: '应收金额(元)',
  320. prop: 'discountAmount'
  321. },
  322. {
  323. label: '缴费状态',
  324. prop: 'chargeStatusDict'
  325. },
  326. {
  327. label: '操作',
  328. prop: 'id',
  329. slot: 'opt'
  330. }
  331. ],
  332. statusCols: [
  333. {
  334. label: '订单号',
  335. prop: 'billNumber'
  336. },
  337. {
  338. label: '地址',
  339. prop: 'assets'
  340. },
  341. {
  342. label: '住户',
  343. prop: 'residentName'
  344. },
  345. {
  346. label: '费用名称',
  347. prop: 'chargeName'
  348. },
  349. {
  350. label: '计费日期',
  351. prop: 'payBeginTime',
  352. slot: 'payBeginTime',
  353. width: '150'
  354. },
  355. {
  356. label: '账单金额(元)',
  357. prop: 'amount'
  358. },
  359. {
  360. label: '应收金额(元)',
  361. prop: 'discountAmount'
  362. },
  363. {
  364. label: '付款方式',
  365. prop: 'payTypeDict'
  366. },
  367. {
  368. label: '缴费状态',
  369. prop: 'chargeStatusDict'
  370. },
  371. {
  372. label: '缴费时间',
  373. prop: 'chargeDate',
  374. width: '150'
  375. },
  376. {
  377. label: '操作',
  378. prop: 'id',
  379. slot: 'opt'
  380. }
  381. ],
  382. chargeStatus: 1,
  383. chiData: {
  384. type: '',
  385. value: '',
  386. address: ''
  387. },
  388. mixins_post: 'post',
  389. selectRow: [],
  390. statusTable: true,
  391. times: []
  392. };
  393. },
  394. methods: {
  395. mixins_search () {
  396. this.mixins_pageset.pageNum = 1;
  397. if (!!this.mixins_querys.chargeType) {
  398. this.mixins_query.chargeType = this.mixins_querys.chargeType;
  399. } else {
  400. this.mixins_query.chargeType = '1,2,3,4,5,6,7';
  401. }
  402. if (this.chargeStatus == 1) {
  403. this.mixins_query.payType = '';
  404. }
  405. this.getList();
  406. },
  407. editAmount (row) {
  408. new Promise((resolve) => {
  409. this.$store.dispatch('addPopup', {
  410. url: '/payService/propertyFee/stepPage/editAmount.vue',
  411. width: '550px',
  412. height: '180px',
  413. props: {
  414. data: row,
  415. callback: resolve
  416. },
  417. title: '修改应收金额'
  418. });
  419. }).then(() => {
  420. this.mixins_search();
  421. });
  422. },
  423. collections (todo, row) {
  424. new Promise((resolve) => {
  425. let title = '',
  426. hideStar,
  427. height = '230px',
  428. width = '900px';
  429. if (todo == 'temporary') {
  430. title = '临时收费';
  431. hideStar = false;
  432. height = '270px';
  433. width = '550px';
  434. } else if (todo == 'bulk') {
  435. if (!this.selectRow.length) {
  436. this.$message.error('您尚未选择要收款项,请选择后再操作批量');
  437. return;
  438. }
  439. let tag = false;
  440. this.selectRow.map((item) => {
  441. if (this.selectRow[0].houseId == item.houseId) {
  442. tag = true;
  443. } else {
  444. tag = false;
  445. }
  446. });
  447. if (!tag) {
  448. this.$message.error('选择同一房间后再操作批量');
  449. return;
  450. }
  451. title = '批量收款';
  452. hideStar = true;
  453. height = '528px';
  454. width = '900px';
  455. } else if (todo == 'single') {
  456. title = '收款';
  457. hideStar = true;
  458. height = '614px';
  459. width = '614px';
  460. }
  461. this.$store.dispatch('addPopup', {
  462. url: '/payService/propertyFee/stepPage/' + todo + '.vue',
  463. // url: '/payService/propertyFee/stepPage/single.vue',
  464. width: width,
  465. height: height,
  466. props: {
  467. data: row,
  468. selectRow: this.selectRow,
  469. chiData: this.chiData,
  470. tabList: todo,
  471. communityId: this.mixins_query.communityId,
  472. callback: resolve
  473. },
  474. hideStar: hideStar,
  475. title: title
  476. });
  477. }).then(() => {
  478. this.mixins_search();
  479. });
  480. },
  481. effectiveDateToggle (va) {
  482. let arr = va;
  483. if (!arr) {
  484. arr = ['', ''];
  485. }
  486. this.mixins_query.startTime = arr[0];
  487. this.mixins_query.endTime = arr[1];
  488. },
  489. lookDetails (row) {
  490. new Promise((resolve) => {
  491. this.$store.dispatch('addPopup', {
  492. url: '/payService/propertyFee/stepPage/details.vue',
  493. width: '615px',
  494. height: '581px',
  495. props: {
  496. id: row.id,
  497. callback: resolve
  498. },
  499. showConfirmButton: true,
  500. showCancelButton: true,
  501. hideStar: true,
  502. title: '账单详情'
  503. });
  504. }).then(() => {
  505. this.mixins_search();
  506. });
  507. },
  508. deluserbyidFn (id) {
  509. const h = this.$createElement;
  510. this.$msgBox(`删除账单`, '删除后将无法恢复,请问是否继续?')
  511. .then(() => {
  512. this.$http.get('/czc-charge/charge/bill/delete', { billId: id }).then(({ status, data, msg }) => {
  513. if (0 === status) {
  514. this.$message({
  515. type: 'success',
  516. message: '删除成功!'
  517. });
  518. this.mixins_search();
  519. } else {
  520. this.$message.error(msg);
  521. }
  522. });
  523. })
  524. .catch(() => { });
  525. },
  526. selectionChange (val) {
  527. this.selectRow = val;
  528. },
  529. currentOrganId (data) {
  530. this.currentId = data || '';
  531. if (data.type == "room") {
  532. this.temporaryCollection = '1'
  533. } else {
  534. this.temporaryCollection = '2'
  535. }
  536. },
  537. changeRadio () {
  538. this.statusTable = false;
  539. this.$nextTick(() => {
  540. this.statusTable = true;
  541. });
  542. this.times = [];
  543. this.Object_Set(['startTime', 'endTime', 'chargeStatus'], ['', '', this.chargeStatus]);
  544. this.mixins_search();
  545. },
  546. addCommand (command) {
  547. if (command === 'template') {
  548. this.__exportExcel('/sc-community/excel/download/template', { importType: 'BILL' });
  549. return;
  550. }
  551. },
  552. exportExcel () {
  553. this.__exportExcel('/czc-charge/charge/bill/export/excel', this.mixins_query);
  554. },
  555. typeTimeTransition (start, end) {
  556. let text = '';
  557. if (!!end) {
  558. let f = new Date(start).getMonth(),
  559. l = new Date(end).getMonth();
  560. if (f == l) {
  561. text = `${this.$moment(new Date(start)).format('YYYY年M月')}`;
  562. } else {
  563. text = `${this.$moment(new Date(start)).format('YYYY年M月')}-${this.$moment(new Date(end)).format('YYYY年M月')}`;
  564. }
  565. }
  566. return text;
  567. },
  568. selectable (row, index) {
  569. return true;
  570. },
  571. Object_Set (thisObj, val, editThisObj) {
  572. if (thisObj instanceof Array && val instanceof Array) {
  573. if (!!editThisObj) {
  574. thisObj.map((item, index) => {
  575. this[editThisObj][item] = val[index];
  576. });
  577. } else {
  578. thisObj.map((item, index) => {
  579. this['mixins_query'][item] = val[index];
  580. });
  581. }
  582. } else {
  583. if (!!editThisObj) {
  584. this[editThisObj][thisObj] = val;
  585. } else {
  586. this['mixins_query'][thisObj] = val;
  587. }
  588. }
  589. },
  590. // 修改应收金额
  591. receivableAmount (row) {
  592. new Promise((resolve) => {
  593. this.$store.dispatch('addPopup', {
  594. url: '/payService/propertyFee/stepPage/receivable.vue',
  595. width: '830px',
  596. height: '500px',
  597. props: {
  598. id: row.id,
  599. communityName: row.communityName,
  600. assets: row.assets,
  601. residentName: row.residentName,
  602. paymentDaysDict: row.paymentDaysDict,
  603. amount: row.amount,
  604. discountAmount: row.discountAmount,
  605. callback: resolve,
  606. },
  607. showConfirmButton: true,
  608. showCancelButton: true,
  609. hideStar: true,
  610. title: '修改应收金额'
  611. });
  612. }).then(() => {
  613. this.mixins_search();
  614. });
  615. },
  616. },
  617. watch: {
  618. currentId (newValue, oldValue) {
  619. this.Object_Set(['communityId', 'buildingId', 'unitName', 'houseId'], ['', '', '', '']);
  620. if (newValue.type) {
  621. this.chiData.type = newValue.type;
  622. if (newValue.type === 'community') {
  623. this.Object_Set(['communityId'], [newValue.communityId]);
  624. this.Object_Set(['value', 'address'], [newValue.communityId, newValue.communityName], 'chiData');
  625. } else if (newValue.type === 'building') {
  626. this.Object_Set(['communityId', 'buildingId'], [newValue.communityId, newValue.buildingId]);
  627. this.Object_Set(
  628. ['value', 'address'],
  629. [newValue.buildingId, newValue.communityName + ' ' + newValue.buildingName],
  630. 'chiData'
  631. );
  632. } else if (newValue.type === 'unit') {
  633. this.Object_Set(
  634. ['communityId', 'buildingId', 'unitName'],
  635. [newValue.communityId, newValue.buildingId, newValue.unitId]
  636. );
  637. this.Object_Set(
  638. ['value', 'address'],
  639. [
  640. newValue.buildingId + ':' + newValue.unitId,
  641. newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName
  642. ],
  643. 'chiData'
  644. );
  645. } else if (newValue.type === 'room') {
  646. this.Object_Set(
  647. ['communityId', 'buildingId', 'unitName', 'houseId'],
  648. [newValue.communityId, newValue.buildingId, newValue.unitId, newValue.houseId]
  649. );
  650. this.Object_Set(
  651. ['value', 'address'],
  652. [
  653. newValue.houseId,
  654. newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName + ' ' + newValue.houseName
  655. ],
  656. 'chiData'
  657. );
  658. }
  659. }
  660. this.mixins_search();
  661. }
  662. },
  663. created () {
  664. this.mixins_dataUrl = '/czc-charge/charge/bill/page'; // 分页查询接口
  665. this.mixins_query = {
  666. chargeStatus: this.chargeStatus,
  667. chargeType: '1,2,3,4,5,6,7',
  668. payType: '',
  669. customerType: '2,3'
  670. };
  671. }
  672. };
  673. </script>
  674. <style lang='scss' scoped >
  675. @import '@assets/css/public-style.scss';
  676. .search {
  677. .zz-tab-button {
  678. margin-right: 20px;
  679. }
  680. .width120 {
  681. width: rem(120);
  682. }
  683. }
  684. </style>