index.vue 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994
  1. <template>
  2. <div>
  3. <div class="custom-tree-container">
  4. <div class="block-l">
  5. <el-card shadow="hover" style="background: white">
  6. <el-tag class="full space-vertical">当前所选:载体结构</el-tag>
  7. <!-- @node-click="handleDeptNodeClick" -->
  8. <el-tree
  9. ref="selectTree"
  10. :default-expand-all="false"
  11. :data="DeptTree"
  12. node-key="id"
  13. :indent="deptTreeIndent"
  14. accordion
  15. :expand-on-click-node="expandDeptClick"
  16. :default-expanded-keys="expandedDeptKey"
  17. node-click="(data, node, item) => nodeClick(data, node, item)"
  18. @node-click="getCheckedNodes"
  19. >
  20. <span slot-scope="{ node, data }" class="custom-tree-node">
  21. <span>
  22. <i v-if="data.level == 0" class="el-icon-s-home" />
  23. <i v-else-if="data.level == 1" class="el-icon-menu" />
  24. <i v-else class="el-icon-link" />
  25. {{ node.label }}
  26. </span>
  27. <span v-if="data.level == 0">
  28. <el-link class="space" type="primary" @click="() => unFoldAll()">展开</el-link>
  29. <el-link class="space" type="primary" @click="() => collapseAll()">折叠</el-link>
  30. </span>
  31. </span>
  32. </el-tree>
  33. </el-card>
  34. </div>
  35. <div class="block-r">
  36. <div style="width: 100%;padding: 10px;background: white;margin-bottom: 10px;">
  37. <el-row class="lineheight20">
  38. <el-col :span="2">
  39. 用途:
  40. </el-col>
  41. <el-col :span="22">
  42. <el-checkbox-group
  43. v-model="roomUse"
  44. >
  45. <el-checkbox
  46. v-for="item in dc_data.HOUSE_USAGE"
  47. :key="item.value"
  48. :label="item.value"
  49. >{{ item.label }}</el-checkbox>
  50. </el-checkbox-group>
  51. </el-col>
  52. </el-row>
  53. <el-row class="lineheight20">
  54. <el-col :span="2">
  55. 装修情况:
  56. </el-col>
  57. <el-col :span="22">
  58. <el-checkbox-group
  59. v-model="decorationSituation"
  60. >
  61. <el-checkbox
  62. v-for="item in dc_data.DECORATION_SITUATION"
  63. :key="item.value"
  64. :label="item.value"
  65. >{{ item.label }}</el-checkbox>
  66. </el-checkbox-group>
  67. </el-col>
  68. </el-row>
  69. <el-row class="lineheight20">
  70. <el-col :span="2">
  71. 可售状态:
  72. </el-col>
  73. <el-col :span="22">
  74. <el-checkbox-group
  75. v-model="saleStatus"
  76. >
  77. <el-checkbox
  78. v-for="item in dc_data.SALE_STATUS"
  79. :key="item.value"
  80. :label="item.value"
  81. >{{ item.label }}</el-checkbox>
  82. </el-checkbox-group>
  83. </el-col>
  84. </el-row>
  85. <el-row class="lineheight20">
  86. <el-col :span="2">
  87. 已售状态:
  88. </el-col>
  89. <el-col :span="22">
  90. <el-checkbox-group
  91. v-model="soldStatus"
  92. >
  93. <el-checkbox
  94. v-for="item in dc_data.SOLD_STATUS"
  95. :key="item.value"
  96. :label="item.value"
  97. >{{ item.label }}</el-checkbox>
  98. </el-checkbox-group>
  99. </el-col>
  100. </el-row>
  101. <el-row class="lineheight20">
  102. <el-col :span="4">
  103. <div style="margin-top: 6px">套内面积(㎡):</div>
  104. </el-col>
  105. <el-col :span="4">
  106. <el-input v-model="queryParam.actualInternalArea" size="small" placeholder="请输入面积" class="ch-input-size" @keyup.enter.native="handleSearch()" />
  107. </el-col>
  108. <!-- <el-col :span="1" style="text-align:center">-->
  109. <!-- <div style="margin-top: 6px">至</div>-->
  110. <!-- </el-col>-->
  111. <!-- <el-col :span="4">-->
  112. <!-- <el-input v-model="queryParam.sizeEnd" size="small" placeholder="请输入面积" class="ch-input-size" @keyup.enter.native="handleSearch()" />-->
  113. <!-- </el-col>-->
  114. <el-col :span="4">
  115. <div style="margin-top: 6px">建筑面积(㎡):</div>
  116. </el-col>
  117. <el-col :span="4">
  118. <el-input v-model="queryParam.actualBuildArea" size="small" placeholder="请输入面积" class="ch-input-size" @keyup.enter.native="handleSearch()" />
  119. </el-col>
  120. </el-row>
  121. <el-row class="lineheight20">
  122. <el-col :span="2">
  123. <div style="margin-top: 6px">关键字:</div>
  124. </el-col>
  125. <el-col :span="4">
  126. <el-input v-model="queryParam.roomNo" size="small" placeholder="请输入房号" class="ch-input-size" @keyup.enter.native="handleSearch()" />
  127. </el-col>
  128. </el-row>
  129. <el-row class="lineheight20">
  130. <el-col :span="24">
  131. <el-button size="small" class="ch-button-export" style="float: right; margin-top: 4px" @click="handleExcel"><i class="el-icon-menu" />&nbsp;导出EXCEL</el-button>
  132. <el-button size="small" class="ch-button-export" style="float: right;margin-top: 4px" @click="batchImport()"><i class="el-icon-menu" />&nbsp;批量导入</el-button>
  133. <el-button size="small" class="ch-button" style="float: right; margin-right: 10px; margin-top: 4px" @click="handleAdd()"><i class="el-icon-menu" />&nbsp;新增房间</el-button>
  134. <el-button size="small" class="ch-button" style="float: right;margin-top: 4px" @click="handleSearch()"><i class="el-icon-menu" />&nbsp;查询</el-button>
  135. <el-button size="small" class="ch-button-warning" style="float: right;margin-top: 4px" @click="handleReset()"><i class="el-icon-menu" />&nbsp;重置</el-button>
  136. </el-col>
  137. </el-row>
  138. </div>
  139. <el-row class="lineheight20">
  140. <el-col :span="24">
  141. <el-table ref="singleTable" v-loading="loading" :data="AllData" highlight-current-row @current-change="handleRowSelectChange">
  142. <el-table-column label="编号" type="index" width="60" />
  143. <el-table-column label="单元/楼栋号" prop="buildName" />
  144. <el-table-column label="所在层" prop="floor" />
  145. <el-table-column label="户室号" prop="roomNo" />
  146. <el-table-column label="套内面积(㎡)" prop="actualInternalArea" />
  147. <el-table-column label="建筑面积(㎡)" prop="actualBuildArea" />
  148. <el-table-column label="用途" prop="roomUseStr" />
  149. <el-table-column label="装修情况" prop="decorationSituationStr" />
  150. <el-table-column label="可售状态" prop="saleStatusStr" />
  151. <el-table-column label="已售状态" prop="soldStatusStr" />
  152. <el-table-column label="操作" header-align="center" width="250">
  153. <template scope="scope">
  154. <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
  155. <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
  156. <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
  157. </template>
  158. </el-table-column>
  159. </el-table>
  160. <div class="table-page">
  161. <el-pagination
  162. :current-page.sync="currentPage"
  163. :page-sizes="[10, 20, 50, 100]"
  164. :page-size="pageSize"
  165. background
  166. layout="total, sizes, prev, pager, next, jumper"
  167. :total="allpage"
  168. @size-change="handleSizeChange"
  169. @current-change="handleCurrentChange"
  170. />
  171. </div>
  172. </el-col>
  173. </el-row>
  174. </div>
  175. </div>
  176. <el-dialog
  177. :title="dialogTitle"
  178. :visible.sync="dialogVisible"
  179. :before-close="dialogChose"
  180. width="75%"
  181. top="50px"
  182. class="statistic_base"
  183. :append-to-body="true"
  184. :modal-append-to-body="true"
  185. custom-class="tagdialog"
  186. @open="dlgOpen"
  187. >
  188. <el-form ref="houseForm" :model="houseForm" style="width: 100%;padding: 5px" :rules="commitRules">
  189. <el-row>
  190. <el-col style="padding-bottom: 10px">
  191. <!-- <span class="card_title">基本信息</span>-->
  192. <el-card shadow="always" style="padding-top: 10px">
  193. <el-row>
  194. <el-col :span="2" class="col-txt"><span>*父级</span></el-col>
  195. <el-col :span="22" class="col-input">
  196. <el-form-item prop="findids">
  197. <el-cascader
  198. v-model="houseForm.findids"
  199. :append-to-body="false"
  200. :disabled="isView"
  201. style="width: 100%;"
  202. :options="options"
  203. clearable
  204. @change="buildChange"
  205. />
  206. </el-form-item>
  207. </el-col>
  208. </el-row>
  209. <el-row>
  210. <el-col :span="2" class="col-txt"><span>*户室号</span></el-col>
  211. <el-col :span="10" class="col-input">
  212. <el-form-item prop="roomNo">
  213. <el-input v-model="houseForm.roomNo" :disabled="isView" />
  214. </el-form-item>
  215. </el-col>
  216. <el-col :span="2" class="col-txt"><span>*所在层</span></el-col>
  217. <el-col :span="10" class="col-input">
  218. <el-form-item prop="floor">
  219. <el-input v-model="houseForm.floor" :disabled="isView" />
  220. </el-form-item>
  221. </el-col>
  222. </el-row>
  223. <el-row>
  224. <el-col :span="3" class="col-txt"><span>*预测套内面积(㎡)</span></el-col>
  225. <el-col :span="9" class="col-input">
  226. <el-form-item prop="roomNo">
  227. <el-input v-model="houseForm.predictionInternalArea" :disabled="isView" />
  228. </el-form-item>
  229. </el-col>
  230. <el-col :span="3" class="col-txt"><span>*预测分摊面积(㎡)</span></el-col>
  231. <el-col :span="9" class="col-input">
  232. <el-form-item prop="roomNo">
  233. <el-input v-model="houseForm.predictionShareArea" :disabled="isView" />
  234. </el-form-item>
  235. </el-col>
  236. </el-row>
  237. <el-row>
  238. <el-col :span="3" class="col-txt"><span>*预测建筑面积(㎡)</span></el-col>
  239. <el-col :span="9" class="col-input">
  240. <el-form-item prop="roomNo">
  241. <el-input v-model="houseForm.predictionBuildArea" :disabled="isView" />
  242. </el-form-item>
  243. </el-col>
  244. <el-col :span="3" class="col-txt"><span>*预测土地面积(㎡)</span></el-col>
  245. <el-col :span="9" class="col-input">
  246. <el-form-item prop="roomNo">
  247. <el-input v-model="houseForm.predictionLandArea" :disabled="isView" />
  248. </el-form-item>
  249. </el-col>
  250. </el-row>
  251. <el-row>
  252. <el-col :span="3" class="col-txt"><span>*实测套内面积(㎡)</span></el-col>
  253. <el-col :span="9" class="col-input">
  254. <el-form-item prop="actualInternalArea">
  255. <el-input v-model="houseForm.actualInternalArea" :disabled="isView" />
  256. </el-form-item>
  257. </el-col>
  258. <el-col :span="3" class="col-txt"><span>*实测分摊面积(㎡)</span></el-col>
  259. <el-col :span="9" class="col-input">
  260. <el-form-item prop="actualShareArea">
  261. <el-input v-model="houseForm.actualShareArea" :disabled="isView" />
  262. </el-form-item>
  263. </el-col>
  264. </el-row>
  265. <el-row>
  266. <el-col :span="3" class="col-txt"><span>*实测建筑面积(㎡)</span></el-col>
  267. <el-col :span="9" class="col-input">
  268. <el-form-item prop="actualBuildArea">
  269. <el-input v-model="houseForm.actualBuildArea" :disabled="isView" />
  270. </el-form-item>
  271. </el-col>
  272. <el-col :span="3" class="col-txt"><span>*实测土地面积(㎡)</span></el-col>
  273. <el-col :span="9" class="col-input">
  274. <el-form-item prop="actualLandArea">
  275. <el-input v-model="houseForm.actualLandArea" :disabled="isView" />
  276. </el-form-item>
  277. </el-col>
  278. </el-row>
  279. <el-row>
  280. <el-col :span="2" class="col-txt"><span>*用途:</span></el-col>
  281. <el-col :span="10" class="col-input">
  282. <el-form-item prop="roomUse">
  283. <el-select
  284. v-model="houseForm.roomUse"
  285. :popper-append-to-body="false"
  286. popper-class="statistic_base"
  287. placeholder=""
  288. filterable
  289. clearable
  290. :disabled="isView"
  291. >
  292. <el-option
  293. v-for="item in dc_data.HOUSE_USAGE"
  294. :key="item.value"
  295. popper-class="statistic_base"
  296. :popper-append-to-body="false"
  297. :label="item.label"
  298. :value="item.value"
  299. />
  300. </el-select>
  301. </el-form-item>
  302. </el-col>
  303. <el-col :span="2" class="col-txt"><span>*户编号</span></el-col>
  304. <el-col :span="10" class="col-input">
  305. <el-form-item prop="roomNumber">
  306. <el-input v-model="houseForm.roomNumber" :disabled="isView" />
  307. </el-form-item>
  308. </el-col>
  309. </el-row>
  310. <el-row>
  311. <el-col :span="2" class="col-txt"><span>装修情况:</span></el-col>
  312. <el-col :span="10" class="col-input">
  313. <el-form-item>
  314. <el-select
  315. v-model="houseForm.decorationSituation"
  316. placeholder=""
  317. filterable
  318. clearable
  319. :disabled="isView"
  320. :popper-append-to-body="false"
  321. popper-class="statistic_base"
  322. >
  323. <el-option
  324. v-for="item in dc_data.DECORATION_SITUATION"
  325. :key="item.value"
  326. :popper-append-to-body="false"
  327. popper-class="statistic_base"
  328. :label="item.label"
  329. :value="item.value"
  330. />
  331. </el-select>
  332. </el-form-item>
  333. </el-col>
  334. <el-col :span="2" class="col-txt"><span>2.2M以</span></el-col>
  335. <el-col :span="10" class="col-input">
  336. <el-form-item>
  337. <el-input v-model="houseForm.twoPointTwo" :disabled="isView" />
  338. </el-form-item>
  339. </el-col>
  340. </el-row>
  341. <el-row>
  342. <el-col :span="2" class="col-txt"><span>户型</span></el-col>
  343. <el-col :span="10" class="col-input">
  344. <el-form-item>
  345. <el-select
  346. v-model="houseForm.houseTypeId"
  347. placeholder=""
  348. filterable
  349. clearable
  350. :popper-append-to-body="false"
  351. popper-class="statistic_base"
  352. @change="houseTypeChange"
  353. >
  354. <el-option
  355. v-for="item in houseTypeOption"
  356. :key="item.value"
  357. :popper-append-to-body="false"
  358. popper-class="statistic_base"
  359. :label="item.label"
  360. :value="item.value"
  361. />
  362. </el-select>
  363. </el-form-item>
  364. </el-col>
  365. </el-row>
  366. <el-row>
  367. <el-col :span="2" class="col-txt"><span>户型图:</span></el-col>
  368. <el-col v-if="fileList.length>0" :span="20" class="col-input">
  369. <el-form-item>
  370. <el-upload
  371. ref="upload"
  372. action
  373. accept="image/png,image/gif,image/jpg,image/jpeg"
  374. list-type="picture-card"
  375. :file-list="fileList"
  376. :limit="9"
  377. :http-request="uploadHouseTypePicture"
  378. :on-preview="handlePictureCardPreview"
  379. :on-remove="handleRemove"
  380. :on-exceed="handleExceed"
  381. disabled
  382. >
  383. <!-- <i class="el-icon-plus" />-->
  384. <div slot="tip" class="el-upload__tip">
  385. 只能上传jpg/png文件,限制上传9张
  386. </div>
  387. </el-upload>
  388. </el-form-item>
  389. </el-col>
  390. <el-col v-else :span="20" class="col-input">
  391. <span>未上传</span>
  392. </el-col>
  393. </el-row>
  394. <el-row>
  395. <el-col :span="2" class="col-txt"><span>备注:</span></el-col>
  396. <el-col :span="22" class="col-input">
  397. <el-form-item>
  398. <el-input v-model="houseForm.remark" type="textarea" maxlength="2000" show-word-limit :disabled="isView" />
  399. </el-form-item>
  400. </el-col>
  401. </el-row>
  402. <el-row>
  403. <el-col :span="2" class="col-txt"><span>可售状态:</span></el-col>
  404. <el-col :span="22" class="col-input">
  405. <el-form-item>
  406. <el-select
  407. v-model="houseForm.saleStatus"
  408. placeholder="请选择"
  409. size="small"
  410. :disabled="isView"
  411. clearable
  412. :popper-append-to-body="false"
  413. popper-class="statistic_base"
  414. >
  415. <el-option
  416. v-for="item in dc_data.SALE_STATUS"
  417. :key="item.value"
  418. :popper-append-to-body="false"
  419. popper-class="statistic_base"
  420. :label="item.label"
  421. :value="item.value"
  422. />
  423. </el-select>
  424. </el-form-item>
  425. </el-col>
  426. </el-row>
  427. </el-card>
  428. </el-col>
  429. </el-row>
  430. </el-form>
  431. <div slot="footer">
  432. <el-button @click="dialogChose">取 消</el-button>
  433. <el-button type="primary" @click="confirmSubmit()">确 定</el-button>
  434. </div>
  435. </el-dialog>
  436. <el-dialog
  437. :visible.sync="dialogImageVisible"
  438. :close-on-click-modal="false"
  439. :close-on-press-escape="false"
  440. append-to-body
  441. >
  442. <img width="100%" :src="dialogImageUrl" alt="">
  443. </el-dialog>
  444. <!-- 批量导入 -->
  445. <upload-cost
  446. v-if="importVisible"
  447. :dialog-visible="importVisible"
  448. :import-type="importType"
  449. :upload-title="uploadTitle"
  450. :import-title="importTitle"
  451. @cancelUpload="cancelImport"
  452. />
  453. </div>
  454. </template>
  455. <script>
  456. import Base from '@/views/base/base'
  457. import BaseData from '@/views/base/baseData'
  458. import BaseDept from '@/views/base/baseDept'
  459. import { upload } from '@/static/utils/channel'
  460. import uploadCost from '@/views/parkAssets/component/uploadCost.vue'
  461. import constant from '@/static/utils/constant'
  462. export default {
  463. name: 'User',
  464. components: { uploadCost },
  465. mixins: [Base, BaseData, BaseDept],
  466. data() {
  467. return {
  468. dc_key: ['HOUSE_USAGE', 'DECORATION_SITUATION', 'SALE_STATUS', 'SOLD_STATUS'],
  469. // 查询参数
  470. queryParam: {
  471. nodeId: '',
  472. level: ''
  473. },
  474. options: [],
  475. houseForm: {
  476. houseTypeId: null
  477. },
  478. DeptTree: [],
  479. urlStr: 'add',
  480. AllData: [],
  481. loading: false,
  482. dialogVisible: false,
  483. dialogTitle: '',
  484. isAdd: true,
  485. commitRules: {
  486. findids: [{ required: true, trigger: 'blur', message: '请选择父级' }],
  487. roomNo: [{ required: true, trigger: 'blur', message: '请输入户室号' }],
  488. floor: [{ required: true, trigger: 'blur', message: '请输入所在层' }],
  489. predictionInternalArea: [{ required: true, trigger: 'blur', message: '请输入预测套内面积' }],
  490. predictionShareArea: [{ required: true, trigger: 'blur', message: '请输入预测分摊面积' }],
  491. predictionBuildArea: [{ required: true, trigger: 'blur', message: '请输入预测建筑面积' }],
  492. predictionLandArea: [{ required: true, trigger: 'blur', message: '请输入预测土地面积' }],
  493. actualInternalArea: [{ required: true, trigger: 'blur', message: '请输入实测分摊面积' }],
  494. actualShareArea: [{ required: true, trigger: 'blur', message: '请输入实测分摊面积' }],
  495. actualBuildArea: [{ required: true, trigger: 'blur', message: '请输入实测建筑面积' }],
  496. actualLandArea: [{ required: true, trigger: 'blur', message: '请输入实测土地面积' }],
  497. roomUse: [{ required: true, trigger: 'blur', message: '请输入用途' }],
  498. roomNumber: [{ required: true, trigger: 'blur', message: '请输入户编号' }]
  499. },
  500. roomId: '',
  501. roomUse: [],
  502. saleStatus: [],
  503. soldStatus: [],
  504. decorationSituation: [],
  505. isView: false,
  506. fileList: [],
  507. houseTypeOption: [],
  508. // 图片预览及其他
  509. dialogImageUrl: '',
  510. dialogImageVisible: false,
  511. // 批量导入
  512. importVisible: false,
  513. importType: '',
  514. importTitle: '',
  515. uploadTitle: [],
  516. loadingFlag: false
  517. }
  518. },
  519. mounted() {
  520. this.initDict(this.dc_key).then((res) => {
  521. this.getData()
  522. })
  523. this.getTreeData()
  524. this.getTreeSelectData()
  525. },
  526. methods: {
  527. handleSearch: function() {
  528. this.getData()
  529. },
  530. // 导出
  531. handleExcel: function() {
  532. const _this = this
  533. _this.AllData = []
  534. _this.queryParam.pageNum = _this.currentPage
  535. _this.queryParam.pageSize = _this.pageSize
  536. _this.queryParam.roomUse = _this.roomUse.join(',')
  537. _this.queryParam.saleStatus = _this.saleStatus.join(',')
  538. _this.queryParam.soldStatus = _this.soldStatus.join(',')
  539. _this.queryParam.decorationSituation = _this.decorationSituation.join(',')
  540. this.OutData = []
  541. const title = ['单元/楼栋号', '所在层', '户室号', '套内面积', '建筑面积', '用途', '装修情况',
  542. '可售状态', '已售状态']
  543. this.OutData.push(title)
  544. const temp = []
  545. this.baseRequest('excelList', _this.queryParam).then(res => {
  546. const data = res.data
  547. data.data.forEach(function(item) {
  548. const json = _this.getItemJson(item)
  549. temp.push(json)
  550. })
  551. temp.forEach(function(item) {
  552. const jsonArray = []
  553. jsonArray.push(item.buildName)
  554. jsonArray.push(item.floor)
  555. jsonArray.push(item.roomNo)
  556. jsonArray.push(item.actualInternalArea)
  557. jsonArray.push(item.actualBuildArea)
  558. jsonArray.push(item.roomUse)
  559. jsonArray.push(item.decorationSituationStr)
  560. jsonArray.push(item.saleStatusStr)
  561. jsonArray.push(item.soldStatusStr)
  562. _this.OutData.push(jsonArray)
  563. })
  564. const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 },
  565. { wch: 15 }, { wch: 15 }]
  566. const fileName = '房间导出 ' + new Date().Format('yyyyMMddhhmm')
  567. this.$outputXlsxFile(this.OutData, OutSize, fileName)
  568. })
  569. },
  570. handleReset: function() {
  571. this.queryParam = {}
  572. this.roomUse = []
  573. this.saleStatus = []
  574. this.soldStatus = []
  575. this.decorationSituation = []
  576. this.getData()
  577. },
  578. getTreeData: function() {
  579. this.baseInfoRequest('getTreeData1', {}).then((res) => {
  580. this.DeptTree = res.data.data
  581. }).catch(() => {
  582. })
  583. },
  584. getTreeSelectData: function() {
  585. this.baseInfoRequest('getTreeData2', {}).then((res) => {
  586. this.options = res.data.data
  587. }).catch(() => {
  588. })
  589. },
  590. getData: function() {
  591. const _this = this
  592. _this.loading = true
  593. _this.AllData = []
  594. _this.queryParam.pageNum = _this.currentPage
  595. _this.queryParam.pageSize = _this.pageSize
  596. _this.queryParam.roomUse = _this.roomUse.join(',')
  597. _this.queryParam.saleStatus = _this.saleStatus.join(',')
  598. _this.queryParam.soldStatus = _this.soldStatus.join(',')
  599. _this.queryParam.decorationSituation = _this.decorationSituation.join(',')
  600. _this.baseRequest('listByModel', _this.queryParam).then((res) => {
  601. if (res.data.rows) {
  602. res.data.rows.forEach(function(item) {
  603. const json = _this.getItemJson(item)
  604. _this.AllData.push(json)
  605. })
  606. _this.allpage = res.data.total
  607. }
  608. _this.loading = false
  609. }).catch(() => {
  610. })
  611. },
  612. handleAdd: function() {
  613. this.isView = false
  614. this.urlStr = 'add'
  615. this.dialogVisible = true
  616. this.fileList = []
  617. this.houseTypeOption = []
  618. this.dialogTitle = '新增房间'
  619. },
  620. handleEdit: function(val) {
  621. this.isView = false
  622. this.urlStr = 'edit'
  623. this.houseForm = val
  624. this.fileList = []
  625. this.houseTypeOption = []
  626. this.dialogVisible = true
  627. this.dialogTitle = '编辑房间'
  628. this.loadingFlag = true
  629. },
  630. handleView: function(val) {
  631. this.isView = true
  632. this.houseForm.id = val.id
  633. this.dialogVisible = true
  634. this.dialogTitle = '查看房间'
  635. },
  636. getCheckedNodes(data, node, item) {
  637. console.log('节点====', node)
  638. console.log('节点id====', node.data.id)
  639. console.log('层级====', node.level)
  640. const _this = this
  641. _this.queryParam.nodeId = node.data.id
  642. _this.queryParam.level = node.level
  643. this.getData()
  644. },
  645. dialogChose() {
  646. this.houseForm = {}
  647. this.dialogVisible = false
  648. },
  649. confirmSubmit: function() {
  650. this.$refs.houseForm.validate(valid => {
  651. if (valid) {
  652. const ids = this.houseForm.findids
  653. if (ids != null && ids != [] && ids != '') {
  654. this.houseForm.groupId = ids[0]
  655. this.houseForm.discId = ids[1]
  656. this.houseForm.buildId = ids[2]
  657. }
  658. // let houseTypePicture = ''
  659. // this.fileList.forEach(v => {
  660. // if (houseTypePicture) {
  661. // houseTypePicture = houseTypePicture + ',' + v.id
  662. // } else {
  663. // houseTypePicture = v.id
  664. // }
  665. // })
  666. const extraData = {
  667. // houseTypePicture: houseTypePicture
  668. }
  669. const postData = Object.assign({}, this.houseForm, extraData)
  670. this.baseRequest(this.urlStr, postData).then((res) => {
  671. this.houseForm = {}
  672. this.dialogVisible = false
  673. this.getData()
  674. this.getTreeData()
  675. this.$message({
  676. message: '提交成功',
  677. type: 'success'
  678. })
  679. }).catch(() => {
  680. })
  681. }
  682. })
  683. },
  684. getItemJson: function(item) {
  685. // 用途
  686. item.roomUseStr = this.dc_map.HOUSE_USAGE[item.roomUse]
  687. // 装修情况
  688. item.decorationSituationStr = this.dc_map.DECORATION_SITUATION[item.decorationSituation]
  689. // 可售状态
  690. item.saleStatusStr = this.dc_map.SALE_STATUS[item.saleStatus]
  691. // 可售状态
  692. item.soldStatusStr = this.dc_map.SOLD_STATUS[item.soldStatus]
  693. return item
  694. },
  695. handleRowSelectChange(val) {
  696. this.currentRow = val
  697. if (this.currentRow) {
  698. if (this.currentRow.id === '1') {
  699. this.isAdminSelect = true
  700. } else {
  701. this.isAdminSelect = false
  702. }
  703. }
  704. },
  705. dlgOpen: function() {
  706. const _this = this
  707. if (_this.houseForm.id) {
  708. const postData = {
  709. id: _this.houseForm.id
  710. }
  711. this.baseRequest('getById', postData)
  712. .then(res => {
  713. if (res.data) {
  714. _this.houseForm = Object.assign({}, _this.houseForm, res.data)
  715. if (res.data.roomUse) {
  716. _this.houseForm.roomUse = res.data.roomUse + ''
  717. }
  718. if (res.data.decorationSituation) {
  719. _this.houseForm.decorationSituation = res.data.decorationSituation + ''
  720. }
  721. if (res.data.houseTypeId) {
  722. _this.houseForm.houseTypeId = res.data.houseTypeId + ''
  723. }
  724. if (res.data.saleStatus) {
  725. _this.houseForm.saleStatus = res.data.saleStatus + ''
  726. }
  727. // 回显户型
  728. _this.houseTypeOption = []
  729. _this.baseHouseTypeRequest('listAll', { discId: _this.houseForm.discId }).then(res => {
  730. if (res.data) {
  731. res.data.forEach(item => {
  732. _this.houseTypeOption.push({
  733. label: item.name + ',建筑面积' + item.buildArea + ',使用面积' + item.useArea,
  734. value: item.id,
  735. files: item.fileList
  736. })
  737. })
  738. // 回显户型图片
  739. const obj = _this.houseTypeOption.find(item =>
  740. item.value === _this.houseForm.houseTypeId
  741. )
  742. if (obj !== undefined) {
  743. this.fileList = []
  744. const files = JSON.parse(obj.files)
  745. files.forEach(v => {
  746. if (v) {
  747. this.fileList.push({
  748. url: constant.BASE_URI + '/FileController/download/' + v.data,
  749. id: v.data
  750. })
  751. }
  752. })
  753. } else {
  754. _this.houseForm.houseTypeId = ''
  755. }
  756. }
  757. })
  758. // 填充父级
  759. this.houseForm.findids = []
  760. if (undefined != this.houseForm.groupId && this.houseForm.groupId != null &&
  761. this.houseForm.groupId != '') {
  762. this.houseForm.findids[0] = this.houseForm.groupId
  763. if (undefined != this.houseForm.discId && this.houseForm.discId != null &&
  764. this.houseForm.discId != '') {
  765. this.houseForm.findids[1] = this.houseForm.discId
  766. if (undefined != this.houseForm.buildId && this.houseForm.buildId != null &&
  767. this.houseForm.buildId != '') {
  768. this.houseForm.findids[2] = this.houseForm.buildId
  769. }
  770. }
  771. }
  772. }
  773. _this.loadingFlag = false
  774. })
  775. .catch(() => {})
  776. }
  777. },
  778. // 上传相关,包括图片、文件
  779. handlePictureCardPreview: function(file) {
  780. this.handlePicturePreview(file.url)
  781. },
  782. handlePicturePreview: function(url) {
  783. this.dialogImageUrl = url
  784. this.dialogImageVisible = true
  785. },
  786. uploadHouseTypePicture: function(param) {
  787. upload(param, true).then((res) => {
  788. this.fileList.push(res)
  789. })
  790. },
  791. buildChange(val) {
  792. const postData = {
  793. discId: val[1]
  794. }
  795. this.getHouseTypeList(postData)
  796. this.houseForm.houseTypeId = ''
  797. this.fileList = []
  798. },
  799. getHouseTypeList(val) {
  800. const _this = this
  801. _this.houseTypeOption = []
  802. _this.baseHouseTypeRequest('listAll', val).then(res => {
  803. if (res.data) {
  804. res.data.forEach(item => {
  805. _this.houseTypeOption.push({
  806. label: item.name + ',建筑面积' + item.buildArea + ',使用面积' + item.useArea,
  807. value: item.id,
  808. files: item.fileList
  809. })
  810. })
  811. }
  812. })
  813. },
  814. // 导入
  815. batchImport() {
  816. this.importVisible = true
  817. this.importType = 'roomInsert'
  818. this.importTitle = '房间批量导入'
  819. },
  820. cancelImport(refresh) {
  821. this.importVisible = false
  822. this.importType = ''
  823. this.getTreeData()
  824. this.getData()
  825. },
  826. handleDelete(val) {
  827. this.$confirm('确认删除该数据,删除后将无法恢复,确认删除吗?', '提示', {
  828. confirmButtonText: '确定',
  829. cancelButtonText: '取消',
  830. type: 'warning'
  831. }).then(() => {
  832. this.baseRequest('delete', { id: val }).then(res => {
  833. if (res.data.code == 200) {
  834. this.getData()
  835. this.getTreeData()
  836. this.$message({
  837. type: 'success',
  838. message: '删除成功!'
  839. })
  840. }
  841. }).catch((err) => {
  842. this.$message({
  843. type: 'error',
  844. message: err
  845. })
  846. })
  847. }).catch(() => {
  848. this.$message({
  849. type: 'info',
  850. message: '已取消删除'
  851. })
  852. })
  853. },
  854. houseTypeChange(val) {
  855. this.fileList = []
  856. const obj = this.houseTypeOption.find(item =>
  857. item.value === val
  858. )
  859. if (obj !== undefined) {
  860. const files = JSON.parse(obj.files)
  861. files.forEach(v => {
  862. if (v) {
  863. this.fileList.push({
  864. url: constant.BASE_URI + '/FileController/download/' + v.data,
  865. id: v.data
  866. })
  867. }
  868. })
  869. }
  870. },
  871. handleExceed: function() {
  872. this.$message.info('超过文件个数限制')
  873. },
  874. handleRemove: function(item) {
  875. const id = item.id
  876. const idx = this.fileList.findIndex(item => item.id === id)
  877. this.fileList.splice(idx, 1)
  878. },
  879. // 请求封装,继承类中调用,必须存在
  880. baseRequest: function(opUrl, postData) {
  881. return this.$channel.baseRequest('ParkRoomController', opUrl, postData, 'User')
  882. },
  883. baseInfoRequest: function(opUrl, postData) {
  884. return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
  885. },
  886. baseHouseTypeRequest: function(opUrl, postData) {
  887. return this.$channel.baseRequest('HouseTypeController', opUrl, postData, 'Post')
  888. }
  889. }
  890. }
  891. </script>
  892. <style scoped>
  893. .custom-tree-node {
  894. flex: 1;
  895. display: flex;
  896. align-items: center;
  897. justify-content: space-between;
  898. font-size: 16px;
  899. padding-right: 8px;
  900. }
  901. .custom-tree-container{
  902. display: flex;
  903. }
  904. .custom-tree-container .block-l {
  905. /*flex-grow: 2 ;*/
  906. //float: left;
  907. width: 20%;
  908. padding: 0 8px 0 0;
  909. }
  910. .custom-tree-container .block-r {
  911. /*flex-grow: 10;*/
  912. //float: left;
  913. width: 80%;
  914. /*padding: 0 0 0 8px;*/
  915. }
  916. </style>
  917. <style scoped>
  918. .lineheight20{
  919. padding: 7px;
  920. background-color: white;
  921. line-height: 15rpx;
  922. }
  923. .ch-input .el-input__inner {
  924. border-color: #32323A;
  925. }
  926. .ch-input-size {
  927. width: 150px;
  928. }
  929. .ch-button {
  930. border-color: #32323A;
  931. background-color: #32323A;
  932. color: #fff;
  933. }
  934. .ch-button-warning {
  935. margin-left: 10px;
  936. border-color: #E6A23C;
  937. background-color: #E6A23C;
  938. color: #fff;
  939. }
  940. .ch-button-export {
  941. margin-left: 10px;
  942. border-color: #98CC1F;
  943. background-color: #98CC1F;
  944. color: #fff;
  945. }
  946. .listBox{
  947. display: flex;
  948. flex-wrap: wrap;
  949. }
  950. .list {
  951. border: 1px solid #BEC3CB;
  952. padding: 0px 40px;
  953. border-radius: 10px;
  954. margin-right: 20px;
  955. cursor: pointer;
  956. height: 30px;
  957. line-height: 30px;
  958. background: #F2F2F2;
  959. color: #333333;
  960. }
  961. .checked {
  962. color: #FFFFFF;
  963. background: #6600FF;
  964. border: 1px solid #3377FF;
  965. }
  966. </style>