index.vue 43 KB

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