index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579
  1. <template>
  2. <div class="maintenance">
  3. <div class="selectBody">
  4. <div class="selectRow">
  5. <span class="rowTitle">项目</span>
  6. <div class="selectItemBox">
  7. <span
  8. class="unSelectItem"
  9. :class="item.select ? 'selectItem' : ''"
  10. v-for="item in xiangmu"
  11. @click="clickGroupItem(item)"
  12. >
  13. {{ item.name }}
  14. </span>
  15. </div>
  16. </div>
  17. <div class="selectRow" v-if="form.groupIds != null">
  18. <span class="rowTitle">分期</span>
  19. <div class="selectItemBox fenqiBox">
  20. <span
  21. class="unSelectItem"
  22. v-for="item in fenqi_loacldata"
  23. :class="item.select ? 'selectItem' : ''"
  24. @click="clickItem(item)"
  25. >{{ item.name }}</span
  26. >
  27. </div>
  28. </div>
  29. <!-- <div class="selectRow">
  30. <span class="rowTitle">购房状态</span>
  31. <div class="selectItemBox">
  32. <van-checkbox-group
  33. :value="saleStatusStr"
  34. @change="saleStatusStrChange"
  35. >
  36. <van-checkbox
  37. :name="item.value"
  38. shape="square"
  39. v-for="item in DEPOSIT_STATUS"
  40. :key="item.id"
  41. >{{ item.label }}</van-checkbox
  42. >
  43. </van-checkbox-group>
  44. </div>
  45. </div> -->
  46. <div class="selectRow">
  47. <span class="rowTitle">姓名</span>
  48. <div class="selectItemBox">
  49. <input
  50. placeholder="请输入房号"
  51. class="myIpt"
  52. v-model="form.buyerName"
  53. />
  54. </div>
  55. </div>
  56. <div class="btnBox">
  57. <button class="czBtn" @tap="reset">重置</button>
  58. <button class="ssBtn" @tap="newSearch()">搜索</button>
  59. </div>
  60. <!-- <van-icon
  61. name="arrow-up"
  62. style="font-size: 40rpx; margin-top: 40rpx; font-weight: 600"
  63. @tap="closeSelectBody"
  64. /> -->
  65. </div>
  66. <div class="bottomBody">
  67. <div class="listBody">
  68. <div class="listItem" v-for="item in roomList">
  69. <div class="firstRow">
  70. <span class="itemTitle">
  71. {{ item.serialNumber ? item.serialNumber : "暂无数据" }}
  72. </span>
  73. <div class="tag" style="margin-left: auto; margin-right: 20rpx">
  74. {{ DEPOSIT_STATUS[item.status - 1].label }}
  75. </div>
  76. </div>
  77. <div class="midRow">
  78. <div style="width: 300rpx">经办人:{{ item.createdName }}</div>
  79. <div style="width: 300rpx">
  80. 选房日期:{{ item.roomSelectionDate }}
  81. </div>
  82. </div>
  83. <div class="midRow">
  84. <span style="width: 300rpx"
  85. >定金金额:{{
  86. item.receivableMoney ? item.receivableMoney : "暂无数据"
  87. }}</span
  88. >
  89. <span>买受人:{{ item.buyerName }}</span>
  90. </div>
  91. <div class="midRow" style="justify-content: flex-end">
  92. <van-button
  93. style="margin-left: 20rpx"
  94. type="info"
  95. size="mini"
  96. v-if="item.status == 1"
  97. @click="toIntentionAdd(item)"
  98. >去登记</van-button
  99. >
  100. <van-button
  101. style="margin-left: 20rpx"
  102. type="info"
  103. size="mini"
  104. v-if="item.status == 2 || item.status == 3"
  105. @click="toIntentionAdd(item)"
  106. >去修改</van-button
  107. >
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </template>
  114. <script>
  115. import {
  116. findXiangMuList,
  117. findFenQiList,
  118. findRoomByCondition,
  119. getDjList,
  120. getByCodes,
  121. } from "@/js_sdk/http";
  122. export default {
  123. name: "maintenance",
  124. data() {
  125. return {
  126. dic_key: ["DEPOSIT_STATUS", "INTENTIONAL_DEPOSIT_STATUS"],
  127. SOLD_STATUS: [],
  128. DECORATION_SITUATION: [],
  129. INTENTIONAL_DEPOSIT_STATUS: [],
  130. SALE_STATUS: [],
  131. DEPOSIT_STATUS: [],
  132. BIZ_OA: [],
  133. mnpList: [],
  134. usageList: [],
  135. natureList: [],
  136. value1: "",
  137. parkSelect: true,
  138. properties: [
  139. // {name:'一期', select:true},
  140. // {name:'二期', select:false},
  141. // {name:'三期', select:false},
  142. // {name:'四期', select:false},
  143. ],
  144. saleStatusStr: [],
  145. toward: [],
  146. avaStatus: [],
  147. soldStatusStr: [],
  148. decorationSituation: [],
  149. roomUseStr: [],
  150. propertyNature: [],
  151. height: 1036,
  152. active: 0,
  153. groupIds: [],
  154. xiangmu: [],
  155. fenqi_loacldata: [],
  156. loudongList: [],
  157. form: {
  158. pageNum: 1,
  159. pageSize: 10,
  160. roomUseStr: "",
  161. },
  162. decorationSituationStr: [],
  163. total: 0,
  164. roomList: [],
  165. discIds: [],
  166. HOUSE_USAGE: [],
  167. timeout: null,
  168. };
  169. },
  170. onShow() {
  171. this.findXiangMuList();
  172. this.getByCodes();
  173. },
  174. onReachBottom() {
  175. this.form.pageNum += 1;
  176. this.search();
  177. },
  178. methods: {
  179. reset() {
  180. this.roomUseStr = [];
  181. this.discIds = [];
  182. this.toward = [];
  183. this.avaStatus = [];
  184. this.rentalStatus = [];
  185. this.roomUseStr = [];
  186. this.loudongList = [];
  187. this.roomList = [];
  188. this.form = {
  189. pageNum: 1,
  190. pageSize: 10,
  191. };
  192. this.findXiangMuList();
  193. this.getByCodes();
  194. },
  195. newSearch() {
  196. this.roomList = [];
  197. this.search.pageNum = 1;
  198. this.search();
  199. },
  200. clickGroupItem(item) {
  201. item.select = !item.select;
  202. if (this.groupIds.includes(item.value)) {
  203. this.groupIds = this.groupIds.filter(function (ele) {
  204. return ele !== item.value;
  205. });
  206. } else {
  207. this.groupIds.push(item.value);
  208. }
  209. this.form.groupIds = this.groupIds.join(",");
  210. if (this.form.groupIds) {
  211. this.yuanQuChange();
  212. this.roomList = [];
  213. this.search.pageNum = 1;
  214. this.search();
  215. }
  216. },
  217. async yuanQuChange() {
  218. let data = await findFenQiList(this.form.groupIds);
  219. this.roomList = [];
  220. this.loudongList = [];
  221. if (data.length > 0) {
  222. this.fenqi_loacldata = data.map((e) => {
  223. return {
  224. value: e.id,
  225. name: e.name,
  226. select: false,
  227. };
  228. });
  229. } else {
  230. this.fenqi_loacldata = [{ value: null, name: "暂无", select: false }];
  231. }
  232. },
  233. findXiangMuList() {
  234. findXiangMuList().then((data) => {
  235. let yuanqu_list = [...data];
  236. let xiangmu = yuanqu_list.map((e) => {
  237. return {
  238. value: e.groupId,
  239. name: e.name,
  240. select: false,
  241. };
  242. });
  243. this.xiangmu = [{ value: "", name: "全部", select: true }, ...xiangmu];
  244. this.form.pageNum = 1;
  245. this.discIds = [];
  246. this.roomList = [];
  247. this.search();
  248. });
  249. },
  250. clickItem(item) {
  251. item.select = !item.select;
  252. if (this.discIds.includes(item.value)) {
  253. // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
  254. // filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
  255. this.discIds = this.discIds.filter(function (ele) {
  256. return ele !== item.value;
  257. });
  258. } else {
  259. this.discIds.push(item.value);
  260. }
  261. this.form.discIds = this.discIds.join(",");
  262. this.form.pageNum = 1;
  263. this.roomList = [];
  264. this.search();
  265. },
  266. async fenQiChange() {
  267. try {
  268. let data = await findFenQiList(this.form.discIds);
  269. if (data.length == 0) {
  270. this.loudongList = [];
  271. this.roomList = [];
  272. return;
  273. } else {
  274. this.loudongList = [...data];
  275. this.form.mnpBuildingIds = data[0].id;
  276. this.roomList = [];
  277. }
  278. let row = await getDjList(this.form);
  279. this.roomList = row;
  280. this.form.total = row.length;
  281. this.vamTabStatus = true;
  282. } catch (e) {}
  283. },
  284. async buildChange(e) {
  285. this.form.mnpBuildingIds = e.detail.name;
  286. let data = await getDjList(this.form);
  287. this.roomList = data;
  288. this.form.total = data.length;
  289. },
  290. async search() {
  291. let data = await getDjList(this.form);
  292. if (data.total == this.roomList.length) {
  293. return false;
  294. } else {
  295. this.roomList.push(...data.rows);
  296. }
  297. },
  298. getDicType(type, value) {
  299. if (!value) return;
  300. if (type == "zaiti") {
  301. let PROPERTY_NATURE = this.dic_SelectList.PROPERTY_NATURE;
  302. let index = PROPERTY_NATURE.findIndex((e) => e.value == value);
  303. return PROPERTY_NATURE[index].label;
  304. }
  305. },
  306. onChange(e) {
  307. // console.log(e)
  308. this.toward = e.detail;
  309. this.form.roomDirection = this.toward.join(",");
  310. },
  311. saleStatusStrChange(e) {
  312. this.saleStatusStr = e.detail;
  313. this.form.saleStatusStr = this.saleStatusStr.join(",");
  314. },
  315. soldStatusStrChange(e) {
  316. this.soldStatusStr = e.detail;
  317. this.form.soldStatusStr = this.soldStatusStr.join(",");
  318. },
  319. decorationSituationStrChange(e) {
  320. this.decorationSituationStr = e.detail;
  321. this.form.decorationSituationStr = this.decorationSituationStr.join(",");
  322. },
  323. roomUseStrChange(e) {
  324. console.log(e.detail);
  325. this.roomUseStr = e.detail;
  326. this.form.roomUseStr = this.roomUseStr.join(",");
  327. },
  328. natureChange(e) {
  329. this.propertyNature = e.detail;
  330. this.form.propertyNature = this.propertyNature.join(",");
  331. },
  332. closeSelectBody() {
  333. if (this.height > 1000) {
  334. this.height = 130;
  335. } else {
  336. this.height = 1036;
  337. }
  338. },
  339. async getByCodes() {
  340. let data = await getByCodes(JSON.stringify(this.dic_key));
  341. this.dic_SelectList = this.$common.handleDicList(data);
  342. this.DEPOSIT_STATUS = this.dic_SelectList.DEPOSIT_STATUS;
  343. this.INTENTIONAL_DEPOSIT_STATUS =
  344. this.dic_SelectList.INTENTIONAL_DEPOSIT_STATUS;
  345. },
  346. toIntentionAdd(item) {
  347. console.log(
  348. `/pages/subPackages/djlist/add?id=${item.customerManagementId}&rowId=${item.id}&&buyerName=${item.buyerName}&roomSelectionDate=${item.roomSelectionDate}&batchNumber=${item.batchNumber}&roomSelectionNumber=${item.roomSelectionNumber}`
  349. );
  350. uni.navigateTo({
  351. url: `/pages/subPackages/djlist/add?status=${item.status}&receivableMoney=${item.receivableMoney}&rowId=${item.id}&houseId=${item.houseId}&customerManagementId=${item.customerManagementId}&roomeName=${item.buildName}-${item.roomNo}`,
  352. });
  353. },
  354. toChoose(item) {
  355. uni.navigateTo({
  356. url: `/pages/subPackages/chooseHouse/selectedHouseList?id=${item.id} &buyerName=${item.buyerName}&roomSelectionDate=${item.roomSelectionDate}&batchNumber=${item.batchNumber}&roomSelectionNumber=${item.roomSelectionNumber}`,
  357. });
  358. },
  359. },
  360. };
  361. </script>
  362. <style lang="scss">
  363. .maintenance {
  364. padding-bottom: 150rpx;
  365. .topSearchBox {
  366. background: white;
  367. padding: 16rpx 32rpx;
  368. .van-cell {
  369. background: rgba(245, 247, 250, 1);
  370. width: 686rpx;
  371. border: 1px solid rgba(234, 237, 242, 1);
  372. border-radius: 8rpx;
  373. box-sizing: border-box;
  374. padding: 12rpx 32rpx;
  375. }
  376. .van-icon {
  377. color: rgba(3, 101, 249, 1);
  378. font-size: 40rpx;
  379. }
  380. }
  381. .selectBody {
  382. background: white;
  383. display: flex;
  384. flex-direction: column;
  385. margin: 24rpx 0;
  386. padding: 12rpx 32rpx 36rpx 32rpx;
  387. box-sizing: border-box;
  388. overflow: hidden;
  389. position: relative;
  390. .selectRow {
  391. display: flex;
  392. align-items: center;
  393. margin-top: 18rpx;
  394. .rowTitle {
  395. min-width: 120rpx;
  396. color: rgba(51, 51, 51, 1);
  397. font-size: 30rpx;
  398. text-align: right;
  399. }
  400. .selectItemBox {
  401. display: flex;
  402. align-items: center;
  403. margin-left: 24rpx;
  404. white-space: nowrap;
  405. flex-wrap: wrap;
  406. .unSelectItem {
  407. display: flex;
  408. align-items: center;
  409. justify-content: center;
  410. font-size: 28rpx;
  411. color: rgba(102, 102, 102, 1);
  412. padding: 8rpx 18rpx;
  413. background: rgba(245, 247, 250, 1);
  414. border-radius: 8rpx;
  415. margin-right: 24rpx;
  416. margin-top: 5rpx;
  417. }
  418. .selectItem {
  419. display: flex;
  420. align-items: center;
  421. justify-content: center;
  422. font-size: 28rpx;
  423. color: rgba(3, 101, 249, 1);
  424. padding: 8rpx 18rpx;
  425. background: rgba(3, 101, 249, 0.1);
  426. border-radius: 8rpx;
  427. margin-right: 24rpx;
  428. }
  429. .van-checkbox-group {
  430. display: flex;
  431. flex-wrap: wrap;
  432. .van-checkbox {
  433. margin-right: 24rpx;
  434. }
  435. .van-checkbox__label {
  436. padding-left: 6rpx;
  437. font-size: 28rpx;
  438. color: rgba(102, 102, 102, 1);
  439. }
  440. .van-checkbox__icon {
  441. width: 30rpx;
  442. height: 30rpx;
  443. }
  444. .van-icon,
  445. .van-icon:before {
  446. font-size: 24rpx;
  447. }
  448. .van-checkbox__icon--checked {
  449. background: rgba(3, 101, 249, 1);
  450. }
  451. }
  452. .myIpt {
  453. width: 540rpx;
  454. height: 64rpx;
  455. text-align: center;
  456. background: rgba(245, 247, 250, 1);
  457. box-sizing: border-box;
  458. font-size: 26rpx;
  459. }
  460. }
  461. .fenqiBox {
  462. overflow-x: scroll;
  463. }
  464. .selectItemBoxMoreItem {
  465. .van-checkbox {
  466. margin: 0 24rpx 24rpx 0;
  467. }
  468. }
  469. }
  470. .btnBox {
  471. display: flex;
  472. align-items: center;
  473. justify-content: center;
  474. margin-top: 48rpx;
  475. .czBtn {
  476. background: rgba(3, 101, 249, 0.1);
  477. border-radius: 8rpx;
  478. width: 240rpx;
  479. height: 80rpx;
  480. display: flex;
  481. align-items: center;
  482. justify-content: center;
  483. color: rgba(3, 101, 249, 1);
  484. font-size: 34rpx;
  485. letter-spacing: 2rpx;
  486. }
  487. .ssBtn {
  488. background: rgba(3, 101, 249, 1);
  489. border-radius: 8rpx;
  490. width: 300rpx;
  491. height: 80rpx;
  492. display: flex;
  493. align-items: center;
  494. justify-content: center;
  495. color: white;
  496. font-size: 34rpx;
  497. letter-spacing: 2rpx;
  498. margin-left: 32rpx;
  499. }
  500. }
  501. .arrowDown {
  502. position: absolute;
  503. left: 50%;
  504. margin-left: -20rpx;
  505. top: 50rpx;
  506. }
  507. }
  508. .bottomBody {
  509. padding: 32rpx;
  510. background: white;
  511. width: 100%;
  512. box-sizing: border-box;
  513. .sumBox {
  514. color: rgba(51, 51, 51, 1);
  515. font-size: 28rpx;
  516. margin: 24rpx 0;
  517. }
  518. .listBody {
  519. display: flex;
  520. flex-direction: column;
  521. :last-child {
  522. border-bottom: none !important;
  523. }
  524. .listItem {
  525. padding: 24rpx 0;
  526. border-bottom: 1px solid rgba(230, 230, 230, 1);
  527. .firstRow {
  528. display: flex;
  529. align-items: center;
  530. justify-content: space-between;
  531. .itemTitle {
  532. font-size: 32rpx;
  533. color: rgba(51, 51, 51, 1);
  534. font-weight: 600;
  535. }
  536. .tag {
  537. padding: 12rpx 24rpx;
  538. display: flex;
  539. align-items: center;
  540. justify-content: center;
  541. font-size: 26rpx;
  542. color: rgba(3, 101, 249, 1);
  543. background: linear-gradient(316deg, #d1e4ff 0%, #adceff 100%);
  544. border-radius: 8rpx;
  545. }
  546. }
  547. .midRow {
  548. display: flex;
  549. align-items: center;
  550. color: rgba(136, 136, 136, 1);
  551. font-size: 28rpx;
  552. margin: 12rpx 0;
  553. }
  554. .bottomRow {
  555. display: flex;
  556. align-items: center;
  557. color: rgba(51, 51, 51, 1);
  558. font-size: 28rpx;
  559. margin-top: 8rpx;
  560. .money {
  561. color: rgba(226, 81, 0, 1);
  562. font-size: 40rpx;
  563. }
  564. }
  565. }
  566. }
  567. }
  568. }
  569. </style>