settle_down_web/src/views/customerManagement/roomChose/roomIndex.vue

<template>
  <div>
    <div class="custom-tree-container">
      <div class="block-l">
        <el-card shadow="hover" style="background: white">
          <el-tag class="full space-vertical">当前所选：载体结构</el-tag>
          <!-- @node-click="handleDeptNodeClick" -->
          <el-tree
            ref="selectTree"
            :default-expand-all="false"
            :data="DeptTree"
            node-key="id"
            :indent="deptTreeIndent"
            accordion
            :expand-on-click-node="expandDeptClick"
            :default-expanded-keys="expandedDeptKey"
            node-click="(data, node, item) => nodeClick(data, node, item)"
            @node-click="getCheckedNodes"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <i v-if="data.level == 0" class="el-icon-s-home" />
                <i v-else-if="data.level == 1" class="el-icon-menu" />
                <i v-else class="el-icon-link" />
                {{ node.label }}
              </span>
              <span v-if="data.level == 0">
                <el-link class="space" type="primary" @click="() => unFoldAll()">展开</el-link>
                <el-link class="space" type="primary" @click="() => collapseAll()">折叠</el-link>
              </span>
            </span>
          </el-tree>
        </el-card>
      </div>
      <div class="block-r">
        <div style="width: 100%;padding: 10px;background: white;margin-bottom: 10px;">
          <el-row class="lineheight20">
            <el-col :span="2">
              用途：
            </el-col>
            <el-col :span="22">
              <el-checkbox-group
                v-model="roomUse"
              >
                <el-checkbox
                  v-for="item in dc_data.HOUSE_USAGE"
                  :key="item.value"
                  :label="item.value"
                >{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
          <el-row class="lineheight20">
            <el-col :span="2">
              装修情况：
            </el-col>
            <el-col :span="22">
              <el-checkbox-group
                v-model="decorationSituation"
              >
                <el-checkbox
                  v-for="item in dc_data.DECORATION_SITUATION"
                  :key="item.value"
                  :label="item.value"
                >{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
          <el-row class="lineheight20">
            <el-col :span="2">
              可售状态：
            </el-col>
            <el-col :span="22">
              <el-checkbox-group
                v-model="saleStatus"
              >
                <el-checkbox
                  v-for="item in dc_data.SALE_STATUS"
                  :key="item.value"
                  :label="item.value"
                >{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
          <el-row class="lineheight20">
            <el-col :span="2">
              已售状态：
            </el-col>
            <el-col :span="22">
              <el-checkbox-group
                v-model="soldStatus"
              >
                <el-checkbox
                  v-for="item in dc_data.SOLD_STATUS"
                  :key="item.value"
                  :label="item.value"
                >{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
          <el-row class="lineheight20">
            <el-col :span="4">
              <div style="margin-top: 6px">套内面积（㎡）：</div>
            </el-col>
            <el-col :span="4">
              <el-input v-model="queryParam.actualInternalArea" size="small" placeholder="请输入面积" class="ch-input-size" @keyup.enter.native="handleSearch()" />
            </el-col>
            <el-col :span="4">
              <div style="margin-top: 6px">建筑面积（㎡）：</div>
            </el-col>
            <el-col :span="4">
              <el-input v-model="queryParam.actualBuildArea" size="small" placeholder="请输入面积" class="ch-input-size" @keyup.enter.native="handleSearch()" />
            </el-col>
          </el-row>
          <el-row class="lineheight20">
            <el-col :span="2">
              <div style="margin-top: 6px">关键字：</div>
            </el-col>
            <el-col :span="4">
              <el-input v-model="queryParam.roomNo" size="small" placeholder="请输入房号" class="ch-input-size" @keyup.enter.native="handleSearch()" />
            </el-col>
          </el-row>
          <el-row class="lineheight20">

            <el-col :span="24">
              <el-button size="small" class="ch-button" style="float: right;margin-top: 4px" @click="handleSearch()"><i class="el-icon-menu" />&nbsp;查询</el-button>
              <el-button size="small" class="ch-button-warning" style="float: right;margin-top: 4px" @click="handleReset()"><i class="el-icon-menu" />&nbsp;重置</el-button>
            </el-col>
          </el-row>
        </div>
        <el-row class="lineheight20">
          <el-col :span="24">
            <el-table
              ref="singleTable"
              v-loading="loading"
              :data="AllData"
              highlight-current-row
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                :selectable="selectable"
              />
              <el-table-column label="编号" type="index" width="60" />
              <el-table-column label="单元/楼栋号" prop="buildName" />
              <el-table-column label="所在层" prop="floor" />
              <el-table-column label="户室号" prop="roomNo" />
              <el-table-column label="套内面积（㎡）" prop="actualInternalArea" />
              <el-table-column label="建筑面积(㎡)" prop="actualBuildArea" />
              <el-table-column label="用途" prop="roomUseStr" />
              <el-table-column label="装修情况" prop="decorationSituationStr" />
              <el-table-column label="可售状态" prop="saleStatusStr" />
              <el-table-column label="已售状态" prop="soldStatusStr" />
              <el-table-column label="操作" header-align="center" width="250">
                <template scope="scope">
                  <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
                  <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-page">
              <el-pagination
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="allpage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-col>
        </el-row>
        <el-row style="float: right">
          <el-button @click="handleConnectCancel">取 消</el-button>
          <el-button type="primary" @click="handleConnect()">确 定</el-button>
        </el-row>
      </div>

    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="dialogChose"
      width="75%"
      top="50px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
      @open="dlgOpen"
    >
      <el-form ref="houseForm" :model="houseForm" style="width: 100%;padding: 5px" :rules="commitRules">
        <el-row>
          <el-col style="padding-bottom: 10px">
            <!--            <span class="card_title">基本信息</span>-->
            <el-card shadow="always" style="padding-top: 10px">
              <el-row>
                <el-col :span="2" class="col-txt"><span>*父级</span></el-col>
                <el-col :span="22" class="col-input">
                  <el-form-item prop="findids">
                    <el-cascader
                      v-model="houseForm.findids"
                      :append-to-body="false"
                      :disabled="isView"
                      style="width: 100%;"
                      :options="options"
                      @change="buildChange"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt"><span>*户室号</span></el-col>
                <el-col :span="10" class="col-input">
                  <el-form-item prop="roomNo">
                    <el-input v-model="houseForm.roomNo" :disabled="isView" />
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="col-txt"><span>*所在层</span></el-col>
                <el-col :span="10" class="col-input">
                  <el-form-item prop="floor">
                    <el-input v-model="houseForm.floor" :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="col-txt"><span>*预测套内面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="roomNo">
                    <el-input v-model="houseForm.predictionInternalArea" :disabled="isView" />
                  </el-form-item>
                </el-col>

                <el-col :span="3" class="col-txt"><span>*预测分摊面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="roomNo">
                    <el-input v-model="houseForm.predictionShareArea" :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="col-txt"><span>*预测建筑面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="roomNo">
                    <el-input v-model="houseForm.predictionBuildArea" :disabled="isView" />
                  </el-form-item>
                </el-col>
                <el-col :span="3" class="col-txt"><span>*预测土地面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="roomNo">
                    <el-input v-model="houseForm.predictionLandArea" :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="col-txt"><span>*实测套内面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="actualInternalArea">
                    <el-input v-model="houseForm.actualInternalArea" :disabled="isView" />
                  </el-form-item>
                </el-col>
                <el-col :span="3" class="col-txt"><span>*实测分摊面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="actualShareArea">
                    <el-input v-model="houseForm.actualShareArea" :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" class="col-txt"><span>*实测建筑面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="actualBuildArea">
                    <el-input v-model="houseForm.actualBuildArea" :disabled="isView" />
                  </el-form-item>
                </el-col>
                <el-col :span="3" class="col-txt"><span>*实测土地面积(㎡)</span></el-col>
                <el-col :span="9" class="col-input">
                  <el-form-item prop="actualLandArea">
                    <el-input v-model="houseForm.actualLandArea" :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt"><span>*用途:</span></el-col>
                <el-col :span="10" class="col-input">
                  <el-form-item prop="roomUse">
                    <el-select
                      v-model="houseForm.roomUse"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                      placeholder=""
                      filterable
                      :disabled="isView"
                    >
                      <el-option
                        v-for="item in dc_data.HOUSE_USAGE"
                        :key="item.value"
                        popper-class="statistic_base"
                        :popper-append-to-body="false"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="col-txt"><span>*户编号</span></el-col>
                <el-col :span="10" class="col-input">
                  <el-form-item prop="roomNumber">
                    <el-input v-model="houseForm.roomNumber" :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt"><span>装修情况:</span></el-col>
                <el-col :span="10" class="col-input">
                  <el-form-item>
                    <el-select
                      v-model="houseForm.decorationSituation"
                      placeholder=""
                      filterable
                      :disabled="isView"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                    >
                      <el-option
                        v-for="item in dc_data.DECORATION_SITUATION"
                        :key="item.value"
                        :popper-append-to-body="false"
                        popper-class="statistic_base"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="col-txt"><span>2.2M以</span></el-col>
                <el-col :span="10" class="col-input">
                  <el-form-item>
                    <el-input v-model="houseForm.twoPointTwo" :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt"><span>户型</span></el-col>
                <el-col :span="10" class="col-input">
                  <el-form-item :disabled="isView">
                    <el-select
                      v-model="houseForm.houseTypeId"
                      placeholder=""
                      filterable
                      :disabled="isView"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                      @change="houseTypeChange"
                    >
                      <el-option
                        v-for="item in houseTypeOption"
                        :key="item.value"
                        :popper-append-to-body="false"
                        popper-class="statistic_base"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt"><span>户型图:</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-upload
                      ref="upload"
                      action
                      accept="image/png,image/gif,image/jpg,image/jpeg"
                      list-type="picture-card"
                      :file-list="fileList"
                      :limit="9"
                      :http-request="uploadHouseTypePicture"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-exceed="handleExceed"
                      disabled
                    >
                      <i class="el-icon-plus" />
                      <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件，限制上传9张
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt"><span>备注:</span></el-col>
                <el-col :span="22" class="col-input">
                  <el-form-item>
                    <el-input v-model="houseForm.remark" type="textarea" maxlength="2000" show-word-limit :disabled="isView" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt"><span>可售状态:</span></el-col>
                <el-col :span="22" class="col-input">
                  <el-form-item>
                    <el-select
                      v-model="houseForm.saleStatus"
                      placeholder="请选择"
                      size="small"
                      :disabled="isView"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                    >
                      <el-option
                        v-for="item in dc_data.SALE_STATUS"
                        :key="item.value"
                        :popper-append-to-body="false"
                        popper-class="statistic_base"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogChose">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogImageVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <!-- 批量导入 -->
    <upload-cost
      v-if="importVisible"
      :dialog-visible="importVisible"
      :import-type="importType"
      :upload-title="uploadTitle"
      :import-title="importTitle"
      @cancelUpload="cancelImport"
    />

  </div>
</template>

<script>
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'
import BaseDept from '@/views/base/baseDept.vue'
import { upload } from '@/static/utils/channel'
import uploadCost from '@/views/parkAssets/component/uploadCost.vue'
import constant from '@/static/utils/constant'

export default {
    name: 'User',
    components: { uploadCost },
    mixins: [Base, BaseData, BaseDept],
    data() {
        return {
            dc_key: ['HOUSE_USAGE', 'DECORATION_SITUATION', 'SALE_STATUS', 'SOLD_STATUS'],
            // 查询参数
            queryParam: {
                nodeId: '',
                level: ''
            },
            options: [],
            houseForm: {
            },
            DeptTree: [],
            urlStr: 'add',
            AllData: [],
            loading: false,
            dialogVisible: false,
            dialogTitle: '',
            isAdd: true,
            commitRules: {
                findids: [{ required: true, trigger: 'blur', message: '请选择父级' }],
                roomNo: [{ required: true, trigger: 'blur', message: '请输入户室号' }],
                floor: [{ required: true, trigger: 'blur', message: '请输入所在层' }],
                predictionInternalArea: [{ required: true, trigger: 'blur', message: '请输入预测套内面积' }],
                predictionShareArea: [{ required: true, trigger: 'blur', message: '请输入预测分摊面积' }],
                predictionBuildArea: [{ required: true, trigger: 'blur', message: '请输入预测建筑面积' }],
                predictionLandArea: [{ required: true, trigger: 'blur', message: '请输入预测土地面积' }],
                actualInternalArea: [{ required: true, trigger: 'blur', message: '请输入实测分摊面积' }],
                actualShareArea: [{ required: true, trigger: 'blur', message: '请输入实测分摊面积' }],
                actualBuildArea: [{ required: true, trigger: 'blur', message: '请输入实测建筑面积' }],
                actualLandArea: [{ required: true, trigger: 'blur', message: '请输入实测土地面积' }],
                roomUse: [{ required: true, trigger: 'blur', message: '请输入用途' }],
                roomNumber: [{ required: true, trigger: 'blur', message: '请输入户编号' }]
            },

            roomId: '',
            roomUse: [],
            saleStatus: [],
            soldStatus: [],
            decorationSituation: [],
            isView: false,
            fileList: [],
            houseTypeOption: [],
            // 图片预览及其他
            dialogImageUrl: '',
            dialogImageVisible: false,
            // 批量导入
            importVisible: false,
            importType: '',
            importTitle: '',
            uploadTitle: [],
            loadingFlag: false,
            selectList: []
        }
    },
    mounted() {

    },
    methods: {
        initData(data) {
            this.roomUse = ['1']
            this.saleStatus = ['1']
            this.soldStatus = ['1']
            this.initDict(this.dc_key).then((res) => {
                this.getData()
            })
            this.getTreeData()
            this.getTreeSelectData()
        },
        handleSearch: function() {
            this.getData()
        },

        // 导出
        handleExcel: function() {
            const _this = this
            _this.AllData = []
            _this.queryParam.pageNum = _this.currentPage
            _this.queryParam.pageSize = _this.pageSize
            _this.queryParam.roomUse = _this.roomUse.join(',')
            _this.queryParam.saleStatus = _this.saleStatus.join(',')
            _this.queryParam.soldStatus = _this.soldStatus.join(',')
            _this.queryParam.decorationSituation = _this.decorationSituation.join(',')
            this.OutData = []
            const title = ['单元/楼栋号', '所在层', '户室号', '套内面积', '建筑面积', '用途', '装修情况',
                '可售状态', '已售状态']
            this.OutData.push(title)
            const temp = []
            this.baseRequest('excelList', _this.queryParam).then(res => {
                const data = res.data
                data.data.forEach(function(item) {
                    const json = _this.getItemJson(item)
                    temp.push(json)
                })
                temp.forEach(function(item) {
                    const jsonArray = []
                    jsonArray.push(item.buildName)
                    jsonArray.push(item.floor)
                    jsonArray.push(item.roomNo)
                    jsonArray.push(item.actualInternalArea)
                    jsonArray.push(item.actualBuildArea)
                    jsonArray.push(item.roomUse)
                    jsonArray.push(item.decorationSituationStr)
                    jsonArray.push(item.saleStatusStr)
                    jsonArray.push(item.soldStatusStr)
                    _this.OutData.push(jsonArray)
                })
                const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 },
                    { wch: 15 }, { wch: 15 }]
                const fileName = '房间导出 ' + new Date().Format('yyyyMMddhhmm')
                this.$outputXlsxFile(this.OutData, OutSize, fileName)
            })
        },

        handleReset: function() {
            this.queryParam = {}
            this.roomUse = []
            this.saleStatus = []
            this.soldStatus = []
            this.decorationSituation = []
            this.getData()
        },

        getTreeData: function() {
            this.baseInfoRequest('getTreeData1', {}).then((res) => {
                this.DeptTree = res.data.data
            }).catch(() => {
            })
        },

        getTreeSelectData: function() {
            this.baseInfoRequest('getTreeData2', {}).then((res) => {
                this.options = res.data.data
            }).catch(() => {
            })
        },

        getData: function() {
            const _this = this
            _this.loading = true
            _this.AllData = []
            _this.queryParam.pageNum = _this.currentPage
            _this.queryParam.pageSize = _this.pageSize
            _this.queryParam.roomUse = _this.roomUse.join(',')
            _this.queryParam.saleStatus = _this.saleStatus.join(',')
            _this.queryParam.soldStatus = _this.soldStatus.join(',')
            _this.queryParam.decorationSituation = _this.decorationSituation.join(',')

            _this.baseRequest('listByModel', _this.queryParam).then((res) => {
                if (res.data.rows) {
                    res.data.rows.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.AllData.push(json)
                    })
                    _this.allpage = res.data.total
                }
                _this.loading = false
            }).catch(() => {
            })
        },

        handleAdd: function() {
            this.isView = false
            this.urlStr = 'add'
            this.dialogVisible = true
            this.dialogTitle = '新增房间'
        },
        handleEdit: function(val) {
            this.isView = false
            this.urlStr = 'edit'
            this.houseForm = val
            this.fileList = []
            this.dialogVisible = true
            this.dialogTitle = '编辑房间'
            this.loadingFlag = true
        },
        handleView: function(val) {
            this.isView = true
            this.houseForm.id = val.id
            this.dialogVisible = true
            this.dialogTitle = '查看房间'
        },
        getCheckedNodes(data, node, item) {
            console.log('节点====', node)
            console.log('节点id====', node.data.id)
            console.log('层级====', node.level)
            const _this = this
            _this.queryParam.nodeId = node.data.id
            _this.queryParam.level = node.level
            this.getData()
        },
        dialogChose() {
            this.houseForm = {}
            this.dialogVisible = false
        },

        confirmSubmit: function() {
            this.$refs.houseForm.validate(valid => {
                if (valid) {
                    const ids = this.houseForm.findids
                    if (ids != null && ids != [] && ids != '') {
                        this.houseForm.groupId = ids[0]
                        this.houseForm.discId = ids[1]
                        this.houseForm.buildId = ids[2]
                    }
                    const extraData = {
                    }
                    const postData = Object.assign({}, this.houseForm, extraData)
                    this.baseRequest(this.urlStr, postData).then((res) => {
                        this.houseForm = {}
                        this.dialogVisible = false
                        this.getData()
                        this.getTreeData()
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        })
                    }).catch(() => {
                    })
                }
            })
        },

        getItemJson: function(item) {
            // 用途
            item.roomUseStr = this.dc_map.HOUSE_USAGE[item.roomUse]
            // 装修情况
            item.decorationSituationStr = this.dc_map.DECORATION_SITUATION[item.decorationSituation]
            // 可售状态
            item.saleStatusStr = this.dc_map.SALE_STATUS[item.saleStatus]
            // 可售状态
            item.soldStatusStr = this.dc_map.SOLD_STATUS[item.soldStatus]
            return item
        },

        dlgOpen: function() {
            const _this = this
            if (_this.houseForm.id) {
                const postData = {
                    id: _this.houseForm.id
                }
                this.baseRequest('getById', postData)
                    .then(res => {
                        if (res.data) {
                            _this.houseForm = Object.assign({}, _this.houseForm, res.data)
                            if (res.data.roomUse) {
                                _this.houseForm.roomUse = res.data.roomUse + ''
                            }
                            if (res.data.decorationSituation) {
                                _this.houseForm.decorationSituation = res.data.decorationSituation + ''
                            }
                            if (res.data.houseTypeId) {
                                _this.houseForm.houseTypeId = res.data.houseTypeId + ''
                            }
                            if (res.data.saleStatus) {
                                _this.houseForm.saleStatus = res.data.saleStatus + ''
                            }

                            // 回显户型
                            _this.houseTypeOption = []
                            _this.baseHouseTypeRequest('listAll', { discId: _this.houseForm.discId }).then(res => {
                                if (res.data) {
                                    res.data.forEach(item => {
                                        _this.houseTypeOption.push({
                                            label: item.name + ',建筑面积' + item.buildArea + ',使用面积' + item.useArea,
                                            value: item.id,
                                            files: item.fileList
                                        })
                                    })
                                    // 回显户型图片
                                    const obj = _this.houseTypeOption.find(item =>
                                        item.value === _this.houseForm.houseTypeId
                                    )
                                    if (obj !== undefined) {
                                        this.fileList = []
                                        const files = JSON.parse(obj.files)
                                        files.forEach(v => {
                                            if (v) {
                                                this.fileList.push({
                                                    url: constant.BASE_URI + '/FileController/download/' + v.data,
                                                    id: v.data
                                                })
                                            }
                                        })
                                    } else {
                                        _this.houseForm.houseTypeId = ''
                                    }
                                }
                            })
                            // 填充父级
                            this.houseForm.findids = []
                            if (undefined != this.houseForm.groupId && this.houseForm.groupId != null &&
                                this.houseForm.groupId != '') {
                                this.houseForm.findids[0] = this.houseForm.groupId
                                if (undefined != this.houseForm.discId && this.houseForm.discId != null &&
                                    this.houseForm.discId != '') {
                                    this.houseForm.findids[1] = this.houseForm.discId
                                    if (undefined != this.houseForm.buildId && this.houseForm.buildId != null &&
                                        this.houseForm.buildId != '') {
                                        this.houseForm.findids[2] = this.houseForm.buildId
                                    }
                                }
                            }
                        }
                        _this.loadingFlag = false
                    })
                    .catch(() => {})
            }
        },
        // 上传相关，包括图片、文件
        handlePictureCardPreview: function(file) {
            this.handlePicturePreview(file.url)
        },
        handlePicturePreview: function(url) {
            this.dialogImageUrl = url
            this.dialogImageVisible = true
        },
        uploadHouseTypePicture: function(param) {
            upload(param, true).then((res) => {
                this.fileList.push(res)
            })
        },
        buildChange(val) {
            const postData = {
                discId: val[1]
            }
            this.getHouseTypeList(postData)
        },
        getHouseTypeList(val) {
            const _this = this
            _this.houseTypeOption = []
            _this.baseHouseTypeRequest('listAll', val).then(res => {
                if (res.data) {
                    res.data.forEach(item => {
                        _this.houseTypeOption.push({
                            label: item.name + ',建筑面积' + item.buildArea + ',使用面积' + item.useArea,
                            value: item.id,
                            files: item.fileList
                        })
                    })
                }
            })
        },
        // 导入
        batchImport() {
            this.importVisible = true
            this.importType = 'roomInsert'
            this.importTitle = '房间批量导入'
        },
        cancelImport(refresh) {
            this.importVisible = false
            this.importType = ''
            this.getTreeData()
            this.getData()
        },
        handleDelete(val) {
            this.$confirm('确认删除该数据，删除后将无法恢复，确认删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.baseRequest('delete', { id: val }).then(res => {
                    if (res.data.code == 200) {
                        this.getData()
                        this.getTreeData()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                }).catch((err) => {
                    this.$message({
                        type: 'error',
                        message: err
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        houseTypeChange(val) {
            const obj = this.houseTypeOption.find(item =>
                item.value === val
            )
            if (obj !== undefined) {
                this.fileList = []
                const files = JSON.parse(obj.files)
                files.forEach(v => {
                    if (v) {
                        this.fileList.push({
                            url: constant.BASE_URI + '/FileController/download/' + v.data,
                            id: v.data
                        })
                    }
                })
            }
        },
        handleExceed: function() {
            this.$message.info('超过文件个数限制')
        },
        handleRemove: function(item) {
            const id = item.id
            const idx = this.fileList.findIndex(item => item.id === id)
            this.fileList.splice(idx, 1)
        },
        handleConnect() {
            this.$emit('getChildrenData', this.selectList)
        },
        handleConnectCancel() {
            this.$emit('getChildrenData')
        },
        // 我的选择
        selectable(row, index) {
            return true
        },
        // 选中数据
        handleSelectionChange(val) {
            this.selectList = this.selectList.filter(item => {
                for (let i = 0; i < this.AllData.length; i++) {
                    if (this.AllData[i].id === item.id) {
                        return false
                    }
                }
                return true
            })
            val.forEach(element => {
                this.selectList.push(element)
            })
            console.log('共有:', this.selectList)
        },
        // 请求封装，继承类中调用，必须存在
        baseRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkRoomController', opUrl, postData, 'User')
        },
        baseInfoRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
        },
        baseHouseTypeRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('HouseTypeController', opUrl, postData, 'Post')
        }

    }
}
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding-right: 8px;
    }
    .custom-tree-container{
        display: flex;
    }
    .custom-tree-container .block-l {
        /*flex-grow: 2 ;*/
        //float: left;
        width: 20%;
        padding: 0 8px 0 0;
    }
    .custom-tree-container .block-r {
        /*flex-grow: 10;*/
        //float: left;
        width: 80%;
        /*padding: 0 0 0 8px;*/
    }
</style>

<style scoped>

    .lineheight20{
        padding: 7px;
        background-color: white;
        line-height: 15rpx;
    }

    .ch-input .el-input__inner {
        border-color: #32323A;
    }
    .ch-input-size {
        width: 150px;
    }
    .ch-button {
        border-color: #32323A;
        background-color: #32323A;
        color: #fff;
    }
    .ch-button-warning {
        margin-left: 10px;
        border-color: #E6A23C;
        background-color: #E6A23C;
        color: #fff;
    }
    .ch-button-export {
        margin-left: 10px;
        border-color: #98CC1F;
        background-color: #98CC1F;
        color: #fff;
    }
    .listBox{
        display: flex;
        flex-wrap: wrap;
    }
    .list {
        border: 1px solid #BEC3CB;
        padding: 0px 40px;
        border-radius: 10px;
        margin-right: 20px;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        background: #F2F2F2;
        color: #333333;
    }
    .checked {
        color: #FFFFFF;
        background: #6600FF;
        border: 1px solid #3377FF;
    }
</style>