index.vue 20 KB

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