details.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. <template>
  2. <div class="main">
  3. <div class="top-title">
  4. <h1>房屋号:{{ detailsData.roomNumber }}<span class="titleType">商铺</span></h1>
  5. <el-button class="right" type="primary" @click="close()">返回</el-button>
  6. <div class="text">
  7. <span>所属社区: {{ detailsData.communityId | matchingVal($store.getters['getCommunityArray']) }}</span>
  8. <span>楼栋:{{ detailsData.communityName }}</span>
  9. </div>
  10. </div>
  11. <div class="content">
  12. <div class="tages">
  13. <div v-for="(item, index) in tabs" :key="index" class="tages-list" :class="tabsIndex === index ? 'active' : ''">
  14. <span @click="toggleTab(index)">{{ item.lable }}</span>
  15. </div>
  16. </div>
  17. <div class="content-item" v-show="tabsIndex === 0">
  18. <div class="widthFlex">
  19. <household-table :tableName="houseTable.left" :tabData="detailsData"></household-table>
  20. <household-table :tableName="houseTable.right" :tabData="detailsData"></household-table>
  21. </div>
  22. </div>
  23. <div class="content-item" v-show="tabsIndex === 1">
  24. <div class="formContent-item_title">基础信息</div>
  25. <div class="widthFlex">
  26. <household-table :tableName="householdTable.left" :tabData="houseData"></household-table>
  27. <household-table :tableName="householdTable.right" :tabData="houseData"></household-table>
  28. </div>
  29. </div>
  30. <div class="content-item" v-show="tabsIndex === 2">
  31. <zz-table :cols="cols" :data="memberData" :settings="{ stripe: true }">
  32. <template slot="opt" slot-scope="scope">
  33. <el-tooltip class="item" effect="light" placement="bottom" content="查看">
  34. <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
  35. </el-tooltip>
  36. </template>
  37. </zz-table>
  38. </div>
  39. <div class="content-item" v-show="tabsIndex === 3">
  40. <zz-table :cols="cols1" :data="mixins_list" :pageset="mixins_pageset" :settings="{ stripe: true }"> </zz-table>
  41. </div>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. import list from '@utils/list.js';
  47. import householdTable from '../stepPage/householdTable.vue';
  48. export default {
  49. components: { householdTable },
  50. mixins: [list],
  51. name: 'shopManagementDetails',
  52. data() {
  53. let _this = this;
  54. return {
  55. tabsIndex: 0,
  56. id: null,
  57. detailsData: {},
  58. memberData: [],
  59. houseData: [],
  60. tabs: [
  61. {
  62. lable: '商铺信息'
  63. },
  64. {
  65. lable: '单位信息'
  66. },
  67. {
  68. lable: '成员信息'
  69. },
  70. {
  71. lable: '合同信息'
  72. }
  73. ],
  74. houseTable: {
  75. left: [
  76. {
  77. lable: '所属社区',
  78. prop: 'communityId'
  79. },
  80. {
  81. lable: '单元',
  82. prop: 'unitName'
  83. },
  84. {
  85. lable: '商铺号',
  86. prop: 'roomNumber'
  87. },
  88. {
  89. lable: '建筑面积',
  90. prop: 'buildingArea'
  91. },
  92. {
  93. lable: '公摊面积',
  94. prop: 'publicArea'
  95. }
  96. // {
  97. // lable: '装修性质',
  98. // prop: 'decorateProperties',
  99. // typeArray: [
  100. // { type: 1, lable: '毛胚' },
  101. // { type: 2, lable: '简单装修' },
  102. // { type: 3, lable: '中等装修' },
  103. // { type: 4, lable: '精装修' },
  104. // { type: 5, lable: '豪华装修' }
  105. // ]
  106. // },
  107. // {
  108. // lable: '房屋编号',
  109. // prop: 'assetNumber'
  110. // }
  111. ],
  112. right: [
  113. {
  114. lable: '楼栋名称',
  115. prop: 'buildingName'
  116. },
  117. {
  118. lable: '楼层',
  119. prop: 'floorNumber'
  120. },
  121. {
  122. lable: '房屋类型',
  123. prop: 'buildingType',
  124. typeArray: [
  125. { type: 1, lable: '住宅' },
  126. { type: 2, lable: '商用' }
  127. ]
  128. },
  129. {
  130. lable: '使用面积 ',
  131. prop: 'useArea'
  132. },
  133. {
  134. lable: '商铺编号',
  135. prop: 'assetNumber'
  136. }
  137. // {
  138. // lable: '房屋户型',
  139. // prop: 'housingType',
  140. // typeArray: [
  141. // { type: 1, lable: '室' },
  142. // { type: 2, lable: '厅' },
  143. // { type: 3, lable: '卫' }
  144. // ]
  145. // },
  146. // {
  147. // lable: '房屋朝向',
  148. // prop: 'orientationOfRoom',
  149. // typeArray: [
  150. // { type: 1, lable: '东' },
  151. // { type: 2, lable: '南' },
  152. // { type: 3, lable: '西' },
  153. // { type: 4, lable: '北' },
  154. // { type: 5, lable: '东南' },
  155. // { type: 6, lable: '西南' },
  156. // { type: 7, lable: '西北' },
  157. // { type: 8, lable: '东北' }
  158. // ]
  159. // },
  160. ]
  161. },
  162. householdTable: {
  163. left: [
  164. {
  165. lable: '姓名',
  166. prop: 'name'
  167. },
  168. {
  169. lable: '手机号',
  170. prop: 'phone'
  171. },
  172. {
  173. lable: '身份证号',
  174. prop: 'idNumber'
  175. },
  176. {
  177. lable: '出生日期',
  178. prop: 'birthDate'
  179. },
  180. {
  181. lable: '民族',
  182. prop: 'nation'
  183. }
  184. // {
  185. // lable: '入住时间',
  186. // prop: 'checkInDate'
  187. // }
  188. ],
  189. right: [
  190. {
  191. lable: '类型',
  192. prop: 'householdType',
  193. const: true,
  194. format(val) {
  195. return '业主';
  196. }
  197. },
  198. {
  199. lable: '人员编号',
  200. prop: 'personnelNumber'
  201. },
  202. {
  203. lable: '性别',
  204. prop: 'sex',
  205. typeArray: [
  206. { type: 0, lable: '未知' },
  207. { type: 1, lable: '男' },
  208. { type: 2, lable: '女' }
  209. ]
  210. },
  211. {
  212. lable: '国籍',
  213. prop: 'nationality',
  214. typeArray: [
  215. { type: 1, lable: '中国' },
  216. { type: 2, lable: '其他' }
  217. ]
  218. },
  219. {
  220. lable: '户籍地址',
  221. prop: 'permanentAddress'
  222. }
  223. ]
  224. },
  225. parkingLotTable: {
  226. left: [
  227. {
  228. lable: '所属社区',
  229. prop: 'communityName'
  230. },
  231. {
  232. lable: '车库区域',
  233. prop: 'garageAreaName'
  234. },
  235. {
  236. lable: '车位类型',
  237. prop: 'parkingType',
  238. typeArray: [
  239. { type: 1, lable: '公共车位' },
  240. { type: 2, lable: '私人车位' }
  241. ]
  242. }
  243. ],
  244. right: [
  245. {
  246. lable: '车库名称',
  247. prop: 'garageName'
  248. },
  249. {
  250. lable: '车位编号',
  251. prop: 'parkingNumber'
  252. },
  253. {
  254. lable: '车位面积',
  255. prop: 'parkingArea'
  256. }
  257. ]
  258. },
  259. cols: [
  260. {
  261. label: '姓名',
  262. prop: 'name'
  263. },
  264. {
  265. label: '手机号',
  266. prop: 'phone'
  267. },
  268. {
  269. label: '身份证号',
  270. prop: 'idNumber'
  271. },
  272. {
  273. label: '关系',
  274. prop: 'householdType',
  275. format(val) {
  276. switch (val) {
  277. case 1:
  278. return '业主';
  279. case 2:
  280. return '亲属';
  281. case 3:
  282. return '租客';
  283. }
  284. }
  285. },
  286. {
  287. label: '操作',
  288. slot: 'opt',
  289. width: 150
  290. }
  291. ],
  292. cols1: [
  293. {
  294. label: '合同名称',
  295. prop: 'communityName'
  296. },
  297. {
  298. label: '合同类型',
  299. prop: 'buildingName'
  300. },
  301. {
  302. label: '签订时间',
  303. prop: 'buildingName'
  304. },
  305. {
  306. label: '到期时间',
  307. prop: 'buildingName'
  308. },
  309. {
  310. label: '租赁方',
  311. prop: 'buildingName'
  312. },
  313. {
  314. label: '备注',
  315. prop: 'buildingName'
  316. },
  317. {
  318. label: '操作',
  319. slot: 'opt',
  320. width: 150
  321. }
  322. ]
  323. };
  324. },
  325. filters: {
  326. matchingVal(val, arr) {
  327. let v = '--';
  328. if (!!val) {
  329. arr.forEach((item) => {
  330. if (!!item.code && item.code === val) {
  331. v = item.name;
  332. } else if (item.type === val) {
  333. v = item.lable;
  334. } else if (!!item.communityName && item.id === val) {
  335. v = item.communityName;
  336. }
  337. });
  338. }
  339. return v;
  340. }
  341. },
  342. created() {
  343. this.id = this.$route.query.id;
  344. this.getDetails();
  345. this.getMember();
  346. },
  347. methods: {
  348. toggleTab(index) {
  349. this.tabsIndex = index;
  350. },
  351. close() {
  352. // let activeRout = this.$route;
  353. // let tagsList = this.$store.getters['getTagsList'];
  354. // tagsList.forEach((item, index) => {
  355. // if (item.title == activeRout.meta.title || item.path == activeRout.path) {
  356. // tagsList.splice(index, 1);
  357. // history.go(-1);
  358. // return true;
  359. // }
  360. // });
  361. let tagsList = this.$store.getters['getTagsList'];
  362. let activeRout = this.$route;
  363. if (tagsList.length > 1) {
  364. tagsList.forEach((item, index) => {
  365. if (item.title == activeRout.meta.title || item.path == activeRout.path) {
  366. tagsList.splice(index, 1);
  367. this.$router.push({
  368. path: tagsList[index - 1].path
  369. });
  370. }
  371. });
  372. } else {
  373. this.$router.push({
  374. path: '/'
  375. });
  376. }
  377. },
  378. getDetails() {
  379. this.$http
  380. .get('/sc-community/assets/house/find/house?houseId=' + this.id)
  381. .then((res) => {
  382. if (!!res) {
  383. this.detailsData = res;
  384. if (!!res.residentId) {
  385. this.getHouse(res.residentId);
  386. }
  387. } else {
  388. this.$message.error('系统繁忙,请稍后重试');
  389. }
  390. })
  391. .catch(() => {});
  392. },
  393. getMember() {
  394. this.$http
  395. .get('/sc-community/assets/house/list?id=' + this.id)
  396. .then(({ data, status, msg }) => {
  397. if (0 === status) {
  398. this.memberData = data;
  399. } else {
  400. this.$message.error(msg);
  401. }
  402. })
  403. .catch(() => {});
  404. },
  405. getHouse(id) {
  406. this.$http
  407. .get('/sc-community/scResident/find/' + id)
  408. .then(({ data, status, msg }) => {
  409. if (0 === status) {
  410. this.houseData = data;
  411. } else {
  412. this.$message.error(msg);
  413. }
  414. })
  415. .catch(() => {});
  416. },
  417. lookPage(row) {
  418. this.$store.dispatch('addPopup', {
  419. url: '/assetManagement/stepPage/houseDataPop.vue',
  420. width: '1044px',
  421. height: '600px',
  422. props: {
  423. data: row
  424. },
  425. notip: true,
  426. showCancelButton: true,
  427. showConfirmButton: true,
  428. title: '成员信息'
  429. });
  430. }
  431. }
  432. };
  433. </script>
  434. <style lang="scss" scoped>
  435. @import '../style.scss';
  436. .detailImg {
  437. width: 200px;
  438. height: 280px;
  439. background: #f8fcff;
  440. border-radius: 4px;
  441. border: 1px solid #e0e1e3;
  442. color: #424656;
  443. text-align: center;
  444. .clickUpText {
  445. position: inherit;
  446. img.bg-img {
  447. width: 100px;
  448. }
  449. }
  450. }
  451. </style>