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

<template>
  <div>
    <div class="custom-tree-container">
      <div class="block-l">
        <el-card shadow="hover">
          <el-tag class="full space-vertical">当前所选：载体结构</el-tag>
          <!-- @node-click="handleDeptNodeClick" -->
          <div style="height: 74vh;overflow-y: auto;">
            <el-tree
              ref="selectTree"
              :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>
          </div>
        </el-card>
      </div>
      <div class="block-r">
        <el-row class="handle-box" style="margin-bottom: 10px">
          <el-col :span="3">
            单元/楼栋号
          </el-col>
          <el-col :span="20">
            <el-input v-model="queryParam.buildNum" 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" @click="handleExcel()"><i class="el-icon-menu" />&nbsp;导出Excel</el-button>
            <el-button size="small" class="ch-button-export" style="float: right;margin-top: 4px" @click="batchImport()"><i class="el-icon-menu" />&nbsp;批量导入</el-button>
            <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>
            <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">
            <!-- @current-change="handleRowSelectChange" -->
            <el-table ref="singleTable" v-loading="loading" :data="AllData" highlight-current-row>
              <el-table-column label="编号" type="index" width="60" />
              <el-table-column label="楼盘/小区名称" prop="groupName" />
              <el-table-column label="分期名称" prop="discName" />
              <el-table-column label="单元/楼栋号" prop="buildNum" />
              <el-table-column label="总面积（㎡）" prop="area" />
              <el-table-column label="套数" prop="numberInfo" />
              <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"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
      @close="dlgClose"
    >
      <el-form ref="buildForm" :model="buildForm" 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>
                    <!-- @change="handleChange" -->
                    <el-cascader
                      ref="findids"
                      v-model="buildForm.findids"
                      class="full"
                      :append-to-body="false"
                      :options="options"
                      clearable
                      @change="handleChange"
                    />
                  </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="buildNum">
                    <el-input v-model="buildForm.buildNum" />
                  </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="constructionNum">
                    <el-input v-model="buildForm.constructionNum" />
                  </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="area">
                    <el-input v-model="buildForm.area" />
                  </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="residentialArea">
                    <el-input v-model="buildForm.residentialArea" />
                  </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="unResidentialArea">
                    <el-input v-model="buildForm.unResidentialArea" />
                  </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="coverAnArea">
                    <el-input v-model="buildForm.coverAnArea" />
                  </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="undergroundArea">
                    <el-input v-model="buildForm.undergroundArea" />
                  </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="roomNum">
                    <el-input v-model="buildForm.roomNum" />
                  </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="numberInfo">
                    <el-input v-model="buildForm.numberInfo" />
                  </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="floors">
                    <el-input v-model="buildForm.floors" />
                  </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="overgroundFloors">
                    <el-input v-model="buildForm.overgroundFloors" />
                  </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="undergroundFloors">
                    <el-input v-model="buildForm.undergroundFloors" />
                  </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="structure">
                    <el-select
                      v-model="buildForm.structure"
                      :popper-append-to-body="false"
                      popper-class="statistic_base"
                      placeholder=""
                      filterable
                      clearable
                      :disabled="isView"
                    >
                      <el-option
                        v-for="item in dc_data.BUILD_STRUCTURE"
                        :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="4" class="col-txt"><span>*行政区划</span></el-col>
                <el-col :span="8" class="col-input">
                  <el-form-item prop="regionalismCode">
                    <el-input v-model="buildForm.regionalismCode" />
                  </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="landCode">
                    <el-input v-model="buildForm.landCode" />
                  </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="buildForm.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 100}" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7" class="col-txt"><span>标准价格参考层及差价系数备注说明</span></el-col>
                <el-col :span="17" class="col-input">
                  <el-form-item>
                    <el-input v-model="buildForm.priceRemark" 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
      :visible.sync="dialogViewVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="950px"
      top="50px"
      append-to-body
    >
      <build-view ref="buildView" @cancel="cancel" />
    </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 constant from '../../../static/utils/constant'
import BuildView from './buildView'
import uploadCost from '@/views/parkAssets/component/uploadCost.vue'
// import textEdit from '../../textEdit/index'
export default {
    name: 'User',
    components: { uploadCost, BuildView },
    mixins: [Base, BaseData, BaseDept],
    data() {
        return {
            dc_key: ['BUILD_STRUCTURE'],
            // 查询参数
            queryParam: {
                ldmc: ''
            },
            buildForm: {

            },
            DeptTree: [],
            options: [],

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

            AllData: [],
            loading: false,

            dialogVisible: false,
            dialogTitle: '新增用户',
            isAdd: true,
            LeaderData: [],
            commitRules: {
                buildNum: [{ required: true, trigger: 'blur', message: '请输入单元/楼栋号' }],
                constructionNum: [{ required: true, trigger: 'blur', message: '请输入施工号' }],
                area: [{ required: true, trigger: 'blur', message: '请输入总面积' }],
                residentialArea: [{ required: true, trigger: 'blur', message: '请输入住宅面积' }],
                unResidentialArea: [{ required: true, trigger: 'blur', message: '请输入非面积' }],
                coverAnArea: [{ required: true, trigger: 'blur', message: '请输入占地面积' }],
                undergroundArea: [{ required: true, trigger: 'blur', message: '请输入地下面积' }],
                roomNum: [{ required: true, trigger: 'blur', message: '请输入房号' }],
                numberInfo: [{ required: true, trigger: 'blur', message: '请输入套数' }],
                floors: [{ required: true, trigger: 'blur', message: '请输入总层数' }],
                overgroundFloors: [{ required: true, trigger: 'blur', message: '请输入地上层数' }],
                undergroundFloors: [{ required: true, trigger: 'blur', message: '请输入地下层数' }],
                structure: [{ required: true, trigger: 'blur', message: '请输入结构' }],
                regionalismCode: [{ required: true, trigger: 'blur', message: '请输入行政区划' }],
                landCode: [{ required: true, trigger: 'blur', message: '请输入地号' }]
            },

            nodeId: '',
            level: '',
            dialogViewVisible: false,
            // 批量导入
            importVisible: false,
            importType: '',
            importTitle: '',
            uploadTitle: [],
            isView: false

        }
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
            this.getData()
        })
        this.getTreeData()
        this.getTreeSelectData()
    },
    methods: {
        handleChange(value) {

        },

        handleSearch: function() {
            this.getData()
        },

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

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

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

        getData: function() {
            const _this = this
            _this.loading = true
            _this.AllData = []
            this.queryParam.pageNum = this.currentPage
            this.queryParam.pageSize = this.pageSize
            this.baseRequest('list', this.queryParam).then((res) => {
                _this.AllData = res.data.rows
                _this.allpage = res.data.total
                _this.loading = false
            }).catch(() => {
            })
        },
        handleAdd: function() {
            this.dialogVisible = true
            this.dialogTitle = '新增楼栋'
        },
        // 导入
        batchImport() {
            this.importVisible = true
            this.importType = 'buildInsert'
            this.importTitle = '楼栋批量导入'
        },
        // 导出
        handleExcel: function() {
            const _this = this
            this.OutData = []
            const title = ['楼盘/小区名称', '分期名称', '单元号/楼栋号', '总面积（㎡）', '套数']
            this.OutData.push(title)
            const temp = []
            this.baseRequest('excelListAll', _this.queryParam).then(res => {
                const data = res.data
                data.forEach(function(item) {
                    const json = _this.getItemJson(item)
                    temp.push(json)
                })
                temp.forEach(function(item) {
                    const jsonArray = []
                    jsonArray.push(item.groupName)
                    jsonArray.push(item.discName)
                    jsonArray.push(item.buildNum)
                    jsonArray.push(item.area)
                    jsonArray.push(item.numberInfo)
                    _this.OutData.push(jsonArray)
                })
                const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }]
                const fileName = '楼栋管理导出 ' + new Date().Format('yyyyMMddhhmm')
                _this.$outputXlsxFile(this.OutData, OutSize, fileName)
            })
        },

        handleEdit: function(val) {
            this.buildForm = val
            this.buildForm.findids = []
            if (this.buildForm.groupId != null &&
                    this.buildForm.groupId !== '') {
                this.buildForm.findids[0] = this.buildForm.groupId
                if (this.buildForm.discId != null &&
                        this.buildForm.discId !== '') {
                    this.buildForm.findids[1] = this.buildForm.discId
                }
            }
            this.dialogVisible = true
            this.dialogTitle = '编辑楼栋'
        },
        confirmSubmit: function() {
            this.$refs.buildForm.validate(valid => {
                if (valid) {
                    const _this = this
                    const extraData = {}
                    const postData = Object.assign({}, _this.buildForm, extraData)
                    // 父级
                    const ids = this.buildForm.findids
                    const arr = this.$refs['findids'].getCheckedNodes()[0].pathLabels
                    if (ids != null && ids != [] && ids != '') {
                        postData.groupId = ids[0]
                        postData.discId = ids[1]
                    }
                    if (arr != null && arr != [] && arr != '') {
                        postData.groupName = arr[0]
                        postData.discName = arr[1]
                    }
                    let urlAdd = 'add'
                    if (undefined != this.buildForm.id && this.buildForm.id != null && this.buildForm.id != '') {
                        urlAdd = 'edit'
                    }
                    if (!postData.groupId) {
                        this.$message({
                            message: '请选择小区',
                            type: 'warning'
                        })
                        return
                    }
                    if (!postData.discId) {
                        this.$message({
                            message: '请选择至分期',
                            type: 'warning'
                        })
                        return
                    }
                    this.baseRequest(urlAdd, postData).then((res) => {
                        if (res.data.code == 200) {
                            // this.buildForm = {}
                            this.dialogVisible = false
                            // this.getData()
                            this.getTreeData()
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            })
                        }
                    }).catch((err) => {
                        this.$message({
                            message: err,
                            type: 'error'
                        })
                    })
                }
            })
        },
        getCheckedNodes(data, node, item) {
            const _this = this
            console.log('节点====', node)
            console.log('节点id====', node.data.id)
            console.log('层级====', node.level)
            _this.queryParam.nodeId = node.data.id
            _this.queryParam.level = node.level
            _this.getData()
        },
        getItemJson: function(item) {
            return item
        },
        dlgOpen: function() {
        },
        dlgClose: function() {
            const _this = this
            _this.buildForm = {}
            _this.getData()
        },

        cancel() {
            this.dialogViewVisible = false
        },
        test(val) {
            // this.$set(this.buildForm, 'introduction', val)
        },
        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.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('MnpBuildingController', opUrl, postData, 'User')
        },
        baseInfoRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
        },
        postRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('PostController', opUrl, postData, 'Post')
        }
    }
}
</script>

<style scoped>

    .el-cascader-menu{
        max-width:250px;
    }
    .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>
    /*.ch-input .el-input__inner {*/
        /*border-radius: 0px;*/
        /*border-color: #32323A;*/
    /*}*/

    /*.ch-input-size {*/
        /*width: 200px;*/
        /*margin-right: 10px;*/
    /*}*/

    /*.ch-button {*/
        /*border-radius: 0px;*/
        /*border-color: #32323A;*/
        /*background-color: #32323A;*/
        /*color: #fff;*/
    /*}*/

    .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;
    }
    /deep/ .el-card{
        max-height: 952px;
        overflow: hidden;
        overflow-y: scroll;
    }
</style>