settle_down_web/src/views/parkAssets/parkFloorDisc/index.vue

<template>
  <div class="parkFloor">
    <div class="custom-tree-container">
      <div class="block-l">
        <el-card shadow="hover">
          <el-tag class="full space-vertical">当前所选：载体结构</el-tag>
          <!-- @node-click="handleDeptNodeClick" -->
          <el-tree
            ref="selectTree"
            :render-content="renderContent"
            default-expand-all
            :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">
        <el-row class="handle-box" style="margin-bottom: 10px">
          <el-col :span="24">
            <el-input v-model="queryParam.groupName" size="small" placeholder="楼盘名称" class="ch-input-size" @keyup.enter.native="handleSearch()" />
            <el-button size="small" class="ch-button-export" style="float: right; margin-top: 4px; margin-right: 10px;" @click="batchFQImport()"><i class="el-icon-menu" />&nbsp;楼盘分期导入</el-button>
            <el-button size="small" class="ch-button-export" style="float: right; margin-top: 4px; margin-right: 10px;" @click="batchImport()"><i class="el-icon-menu" />&nbsp;楼盘导入</el-button>
            <el-button size="small" class="ch-button-add" style="float: right; margin-top: 4px; margin-right: 10px;" @click="handleAddFQ()"><i class="el-icon-menu" />&nbsp;新增分期</el-button>
            <el-button size="small" class="ch-button-add" style="float: right; margin-top: 4px; margin-right: 10px;" @click="handleAdd()"><i class="el-icon-menu" />&nbsp;新增楼盘</el-button>
            <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>
        <el-row class="handle-box">
          <el-col :span="24">
            <el-table
              ref="singleTable"
              v-loading="loading"
              :data="AllData"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="编号" type="index" width="60" />
              <el-table-column label="楼盘/小区名称" prop="groupName" />
              <el-table-column label="性质" prop="natureStr" />
              <el-table-column label="预售许可证编号" prop="preSalesLicenseNumber" />
              <el-table-column label="分期名称" prop="name" />
              <el-table-column label="操作" header-align="center" width="160">
                <template scope="scope">
                  <el-button size="mini" type="text" class="editButton" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" class="deleButton" @click="handleDelete(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>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="950px" top="50px" append-to-body @close="dialogClose">
      <el-form ref="groupForm" :model="groupForm" style="width: 100%;padding: 5px" :rules="groupFormRules">
        <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="4" class="col-txt"><span>*楼盘/小区名称</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="groupName">
                    <el-input v-model="groupForm.groupName" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>*性质</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="nature">
                    <el-select v-model="groupForm.nature" placeholder="" filterable :disabled="isView">
                      <el-option
                        v-for="item in dc_data.GROUP_NATURE"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>*预销售许可证编号:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="preSalesLicenseNumber">
                    <el-input v-model="groupForm.preSalesLicenseNumber" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>开发公司</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item>
                    <el-select v-model="groupForm.companyId" placeholder="" filterable :disabled="isView">
                      <el-option
                        v-for="item in dc_data.COMPANY_NAME"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>总建筑面积（㎡）:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.buildArea" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>总用地面积（㎡）:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.landArea" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>立项批文:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.projectApprovalDocument" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>工程规划许可证:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.engineeringPlanningPermit" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>施工许可证:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.construction_permit" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>土地证号:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.land_certificate_number" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>用地许可证号:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.landUsePermitNumber" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>容积率%:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.volumeRatio" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>绿化率%:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.greenRatio" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>标准单价:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.price" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>超标单价:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-input v-model="groupForm.exceededPrice" />
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>楼盘面积测绘状态:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-select v-model="groupForm.areaStatus" placeholder="" filterable>
                      <el-option
                        v-for="item in dc_data.MAPPING_STATUS"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>楼盘销售状态:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-select v-model="groupForm.saleStatus" placeholder="" filterable>
                      <el-option
                        v-for="item in dc_data.SALE_STATUS"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4" class="col-txt"><span>行政区划:</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="">
                    <el-select v-model="groupForm.regionalismCode" placeholder="" filterable>
                      <el-option
                        v-for="item in dc_data.REGIONALISM_CODE"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>详细地址</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item prop="address">
                    <el-input v-model="groupForm.address" type="textarea" :autosize="{ minRows: 2, maxRows: 100}" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>备注</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item prop="address">
                    <el-input v-model="groupForm.introduction" type="textarea" :autosize="{ minRows: 2, maxRows: 100}" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="confirmSubmit()">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFQVisible" width="1350px" top="50px" append-to-body>
      <el-form ref="commitForm" :model="formLP" 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="4" class="col-txt"><span>楼盘/小区名称</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-select v-model="formLP.groupId" placeholder="" filterable>
                      <el-option
                        v-for="item in groupList"
                        :key="item.id"
                        :label="item.groupName"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>分期名称</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-input v-model="formLP.name" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>房屋买卖单价（元/㎡）</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-input v-model="formLP.unitPrice" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>物业费单价（元/㎡）</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-input v-model="formLP.propertyUnitPrice" oninput="value=value.replace(/[^\d.]/g,'')" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5" class="col-txt"><span>住宅专项维修资金（元/㎡）</span></el-col>
                <el-col :span="19" class="col-input">
                  <el-form-item>
                    <el-input v-model="formLP.maintenanceFunds" oninput="value=value.replace(/[^\d.]/g,'')" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>认购金（元）</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-input v-model="formLP.subscriptionFunds" oninput="value=value.replace(/[^\d.]/g,'')" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>共持比例</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-input v-model="formLP.proportion" oninput="value=value.replace(/[^\d.]/g,'')" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>支付方式</span></el-col>
                <el-col :span="20" class="col-input">
                  <el-form-item>
                    <el-select v-model="formLP.paymentMethods" placeholder="" filterable>
                      <el-option
                        v-for="item in dc_data.PAYMENT_METHODS"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>户型库</span></el-col>
              </el-row>
              <el-row>
                <!-- 特殊表单 -->
                <div v-for="(item, index) in formLP.dynamicItem" :key="index" style="border:1px solid #000;">
                  <el-row style="margin-top: 10px">
                    <el-col :span="2" class="col-txt"><span>户型</span></el-col>
                    <el-col :span="4" class="col-input">
                      <el-form-item :prop="'dynamicItem.' + index + '.name'">
                        <el-input
                          v-model="item.name"

                          placeholder="请填写X室X厅"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" class="col-input">
                      <el-form-item :prop="'dynamicItem.' + index + '.area'">
                        <el-input
                          v-model="item.buildArea"

                          placeholder="请填写建筑面积"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" class="col-input">
                      <el-form-item :prop="'dynamicItem.' + index + '.area'">
                        <el-input
                          v-model="item.useArea"

                          placeholder="请填写使用面积"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2" class="col-txt"><span>户型图</span></el-col>
                    <el-col :span="6" class="col-input">
                      <el-form-item :prop="'dynamicItem.' + index + '.fileList'">
                        <el-upload
                          class="upload-demo"
                          action="/server/wx/fileController/upload"
                          :http-request="(params)=>{uploadHouseTypeList(params,index)}"
                          :before-remove="beforeRemove"
                          multiple
                          :file-list="item.fileList"
                        >
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="file" slot-scope="{file}" class="file-row">
                            <a :href="file.url">{{ file.name }}</a>
                            <span class="el-upload-list__item-actions">
                              <i class="el-icon-delete" @click="handlePictureRemove(file,item.fileList)" />
                            </span>
                          </div>
                        </el-upload>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2" class="col-input">
                      <el-button v-if="index !== 0" type="danger" size="mini" @click="deleteItem(item, index)">-</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-row>
              <el-row>
                <el-col :span="2" class="col-txt">
                  <el-button size="small" type="text" @click="addItem">+继续添加</el-button>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelFQ">取 消</el-button>
        <el-button type="primary" @click="confirmFQSubmit()">确 定</el-button>
      </div>
    </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'
import BaseData from '@/views/base/baseData'
import BaseDept from '@/views/base/baseDept'
import { upload } from '@/static/utils/channel'
import uploadCost from '@/views/parkAssets/component/uploadCost.vue'

import Constant from '@/static/utils/constant'
import common from '@/static/utils/common'
// import textEdit from '../../textEdit/index'
export default {
    name: 'User',
    components: { uploadCost },
    mixins: [Base, BaseData, BaseDept],
    data() {
        return {
            dc_key: ['GROUP_NATURE', 'MAPPING_STATUS', 'SALE_STATUS', 'REGIONALISM_CODE', 'PAYMENT_METHODS', 'COMPANY_NAME'],
            // 查询参数
            queryParam: {
                groupName: '',
                name: ''
            },
            formLP: this.getBaseForm(),
            groupForm: {},
            groupList: [],
            DeptTree: [],
            typeList: [
            ],

            // 字典项
            dc_gender: [],
            dc_map: {},

            AllData: [],
            loading: false,
            currentRow: null,
            dialogTitle: '新增用户',
            isAdd: true,
            LeaderData: [],
            groupFormRules: {
                groupName: [{ required: true, trigger: 'blur', message: '请输入楼盘/小区名称' }],
                nature: [{ required: true, trigger: 'change', message: '请选择性质' }],
                preSalesLicenseNumber: [{ required: true, trigger: 'blur', message: '请输入预销售许可证编号' }]
            },
            commitRules: {
                size: [{ required: true, trigger: 'blur', message: '请输入面积' }],
                address: [{ required: true, trigger: 'blur', message: '请输入地址' }]
            },
            companyOptions: [],
            dialogVisible: false,
            dialogFQVisible: false,
            isView: false,
            // 批量导入
            importVisible: false,
            importType: '',
            importTitle: '',
            uploadTitle: []
        }
    },
    mounted() {
        this.getTreeData()
        this.getGroupList()
        this.initDict(this.dc_key).then((res) => {
            this.getData()
        })
    },
    methods: {
        handleSearch: function() {
            this.getData()
        },

        handleReset: function() {
            this.queryParam = {}
            this.getData()
        },

        getGroupList: function() {
            const _this = this
            this.baseRequest('listAll', {}).then((res) => {
                if (res.data) {
                    this.groupList = res.data
                }
                _this.loading = false
            }).catch(() => {
            })
        },

        getTreeData: function() {
            this.baseRequest('getTreeData3', {}).then((res) => {
                this.DeptTree = 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.baseFQRequest('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(() => {
            })
        },
        getCheckedNodes(data, node, item) {
            const _this = this
            _this.queryParam.nodeId = node.data.id
            _this.queryParam.level = node.level
            this.getData()
        },
        handleAdd: function() {
            this.dialogVisible = true
            this.dialogTitle = '新增楼盘'
        },
        groupEdit: function(val) {
            this.baseRequest('/getById', { id: val.id }).then((res) => {
                console.log('获取详情——：', res)
                if (res.status == 200) {
                    this.dialogTitle = '修改园区'
                    this.groupForm = res.data
                    if (res.data.areaStatus) {
                        this.groupForm.areaStatus = res.data.areaStatus + ''
                    }
                    if (res.data.saleStatus) {
                        this.groupForm.saleStatus = res.data.saleStatus + ''
                    }
                    this.dialogVisible = true
                }
            })
        },

        groupRemove: function(val) {
            console.log('删除阐述——：', val)
            this.$confirm('此操作将删除园区, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.baseRequest('delete', { id: val.data.id }).then((res) => {
                    console.log('获取详情——：', res)
                    if (res.data.code == 200) {
                        this.getTreeData()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        })
                    }
                }).catch((err) => {
                    this.$message({
                        type: 'error',
                        message: err
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        handleEdit: function(val) {
            this.getFQById(val)
            this.dialogFQVisible = true
            this.dialogTitle = '编辑楼盘'
        },

        handleAddFQ: function() {
            this.formLP = this.getBaseForm()
            this.dialogFQVisible = true
            this.dialogTitle = '新增楼盘'
        },

        confirmSubmit: function() {
            this.$refs.groupForm.validate(valid => {
                if (valid) {
                    this.baseRequest('addModel', this.groupForm).then((res) => {
                        if (res.data.code == 200) {
                            this.dialogVisible = false
                            this.groupForm = {}
                            this.getData()
                            this.getGroupList()
                            this.getTreeData()
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            })
                        }
                    }).catch(() => {
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        cancelFQ() {
            this.dialogFQVisible = false
            this.getData()
        },
        confirmFQSubmit: function() {
            const _this = this
            const extraData = {
                houseTypeStr: JSON.stringify(_this.formLP.dynamicItem)
            }
            const postData = Object.assign({}, _this.formLP, extraData)
            let url
            if (_this.formLP.id) {
                url = 'edit'
            } else {
                url = 'add'
            }
            this.baseFQRequest(url, postData).then((res) => {
                if (res.data.code == 200) {
                    this.dialogFQVisible = false
                    this.getData()
                    this.getTreeData()
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                }
            }).catch(() => {
            })
        },

        handleSelectionChange(val) {
            this.selectId = ''
            val.forEach(element => {
                this.selectId += element.id + ','
            })
            this.selectId = this.selectId.substring(0, this.selectId.length - 1)
        },
        getItemJson: function(item) {
            item.natureStr = this.dc_map.GROUP_NATURE[item.nature]
            return item
        },
        getBaseForm: function() {
            const baseForm = {
                id: '',
                houseTypeStr: '',
                maintenanceFunds: '',
                name: '',
                paymentMethods: '',
                propertyUnitPrice: '',
                proportion: '',
                subscriptionFunds: '',
                unitPrice: '',
                dynamicItem: [
                    {
                        id: '',
                        discId: '',
                        fileList: [],
                        name: '',
                        buildArea: '',
                        useArea: ''
                    }
                ]
            }
            return baseForm
        },

        renderContent(h, { node, data, store }) {
            if (node.level != 1) {
                return (
                    <span class='custom-tree-node'>
                        <span>{node.label}</span>
                    </span>)
            } else {
                return (
                    <span class='custom-tree-node' style='width: 100%;'>
                        <span>{node.label}</span>
                        <span style='float: right;'>
                            <el-button size='mini' type='text' on-click={ () => this.groupEdit(data) }>修改</el-button>
                            <el-button size='mini' type='text' on-click={ () => this.groupRemove(node, data) } style='color:#EE3535'>删除</el-button>
                        </span>
                    </span>)
            }
        },
        test(val) {
            this.$set(this.groupForm, 'introduction', val)
        },
        dialogClose() {
            this.groupForm = {}
        },
        addItem(length) {
            this.formLP.dynamicItem.push({
                fileList: [],
                name: '',
                buildArea: '',
                useArea: ''
            })
        },
        // 删除方法
        deleteItem(item, index) {
            this.formLP.dynamicItem.splice(index, 1)
        },
        uploadHouseTypeList: function(param, index) {
            upload(param, true).then((res) => {
                this.formLP.dynamicItem[index].fileList.push(res)
            })
        },
        handlePictureRemove: function(file, fileList) {
            const index = fileList.indexOf(file)
            fileList.splice(index, 1)
        },
        // 获取分期详情
        getFQById(val) {
            const _this = this
            _this.baseFQRequest('getById', { id: val.id }).then((res) => {
                _this.formLP = res.data
                _this.formLP.paymentMethods = res.data.paymentMethods == null ? '' : res.data.paymentMethods + ''
                _this.$set(_this.formLP, 'dynamicItem', [])
                _this.baseHouseTypeRequest('listAll', { discId: val.id }).then((res) => {
                    if (res.data) {
                        res.data.forEach(item => {
                            const data = {
                                name: item.name,
                                buildArea: item.buildArea,
                                useArea: item.useArea,
                                fileList: Object.values(JSON.parse(item.fileList))
                            }
                            _this.formLP.dynamicItem.push(data)
                        })
                    }
                })
            })
        },
        batchImport() {
            this.importVisible = true
            this.importType = 'groupInsert'
            this.importTitle = '小区批量导入'
        },
        batchFQImport() {
            this.importVisible = true
            this.importType = 'FQInsert'
            this.importTitle = '分期批量导入'
        },
        cancelImport(refresh) {
            this.importVisible = false
            this.importType = ''
            this.getTreeData()
            this.getData()
        },
        handleDelete(val) {
            this.$confirm('确认删除该数据，删除后将无法恢复，确认删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.baseFQRequest('delete', { id: val.id }).then(res => {
                    if (res.data.code == 200) {
                        this.getData()
                        this.getTreeData()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        })
                    }
                }).catch((err) => {
                    this.$message({
                        type: 'error',
                        message: err
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 请求封装，继承类中调用，必须存在
        baseRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
        },
        baseFQRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkFloorDiscController', opUrl, postData, 'User')
        },
        baseHouseTypeRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('HouseTypeController', opUrl, postData, 'User')
        }
    }
}
</script>

<style lang="scss">
//.upload-demo{
//    display: flex;
//
//}
//.file-row{
//    display: flex;
//    justify-content: space-between;
//}
.parkFloor{

    .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        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>

    .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;
    }
</style>