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

<template>
  <div>
    <div class="custom-tree-container">
      <div class="block-l">
        <el-card shadow="hover">
          <el-tag class="full space-vertical">当前所选：{{ selectDeptNode.name }}</el-tag>
          <!-- @node-click="handleDeptNodeClick" -->
          <el-tree
            ref="selectTree"
            default-expand-all
            :data="DeptTree"
            node-key="id"
            :indent="deptTreeIndent"
            accordion
            :expand-on-click-node="expandDeptClick"
            :default-expanded-keys="expandedDeptKey"
          >
            <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" style="float: right; margin-right: 10px; margin-top: 4px" @click="handleAddWY()"><i class="el-icon-menu" />&nbsp;物业团队绑定</el-button>
            <el-button size="small" class="ch-button" style="float: right; margin-right: 10px; margin-top: 4px" @click="handleAddYY()"><i class="el-icon-menu" />&nbsp;运营团队绑定</el-button>
            <el-button size="small" class="ch-button-add" style="float: right; margin-top: 4px" @click="handleAddLP()"><i class="el-icon-menu" />&nbsp;新增楼盘</el-button>
            <el-button size="small" class="ch-button-add" style="float: right; 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">
            <el-table ref="singleTable" v-loading="loading" :data="AllData" highlight-current-row @current-change="handleRowSelectChange">
              <el-table-column label="编号" type="index" width="60" />
              <el-table-column label="园区名称" prop="groupName" />
              <!-- <el-table-column label="类型" prop="parkType" /> -->
              <el-table-column label="类型">
                <template scope="scope">
                  {{ scope.row.parkType == 1 ? "商铺": scope.row.parkType == 2 ? "写字楼":"场地" }}
                </template>
              </el-table-column>
              <el-table-column label="面积(㎡)" prop="size" />
              <!-- <el-table-column label="楼盘" prop="discName" /> -->
              <el-table-column label="楼盘" header-align="center" width="160">
                <template scope="scope">
                  {{ tableLouDetial(scope.row.id) }}
                </template>
              </el-table-column>
<!--              <el-table-column label="对应运营人员" prop="size" header-align="center" align="center" width="80" />-->
<!--              <el-table-column label="对应物业人员" prop="size" header-align="center" align="center" width="80" />-->
              <el-table-column label="操作" header-align="center" width="160">
                <template scope="scope">
                  <el-button size="mini" type="primary" @click="handleEdit(scope.row)" class="editButton">编辑</el-button>
                  <el-button v-if="scope.row.id != '1'" size="mini" type="info" @click="handleDel(scope.row)" class="deleButton">删除</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" :model="groupfrom" width="950px" top="50px">
      <el-form ref="commitForm" 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-input v-model="groupfrom.groupName" style="width: 95%;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" class="col-txt"><span>面积(㎡)</span></el-col>
                <el-col :span="7" class="col-input">
                  <el-form-item prop="size">
                    <el-input v-model="groupfrom.size" />
                  </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="groupfrom.parkType" placeholder="" filterable>
                      <el-option
                        v-for="item in dc_data.parkType"
                        :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="20" class="col-input">
                  <el-form-item>
                    <el-input v-model="groupfrom.address" style="width: 95%;" 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="dialogVisibleLP" width="950px" 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" style="width: 95%;" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisibleLP = false">取 消</el-button>
        <el-button type="primary" @click="confirmLPSubmit()">确 定</el-button>
      </div>
    </el-dialog>

  </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 common from '@/static/utils/common'
export default {
    name: 'User',
    mixins: [Base, BaseData, BaseDept],
    data() {
        return {
            dc_key: ['parkType'],
            // 查询参数
            queryParam: {
                groupName: ''
            },
            louDetial: {},
            formLP: {},
            groupfrom: {},
            groupList: [],
            DeptTree: [],
            typeList: [
                {
                    lable: '商铺',
                    value: 1
                },
                {
                    lable: '写字楼',
                    value: 2
                },
                {
                    lable: '场地',
                    value: 3
                }
            ],

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

            // 列表相关
            username: '',
            truename: '',
            dataRoleId: '',
            postId: '',
            AllData: [],
            loading: false,
            currentRow: null,
            isAdminSelect: false,
            isGroupUser: false,

            // 用户维护相关
            dialogVisible: false,
            dialogVisibleLP: false,
            dialogTitle: '新增用户',
            isAdd: true,
            selectDepartment: [],
            form: this.getBaseForm(),
            LeaderData: [],
            commitRules: {
                size: [{ required: true, trigger: 'change', message: '请输入面积' }]

            },

            // 角色维护相关
            dialogRoleVisible: false,
            dialogRoleTitle: '角色选择',
            selectUserId: '',
            selectUserName: '',
            SelectMenuRole: [],
            SelectDataRoleId: '',
            MenuRole: [],

            RawUserData: [],
            selectedIds: [],
        }
    },
    mounted() {
        this.getTreeData()
        this.getGroupList()
        this.initDict(this.dc_key).then((res) => {
            this.getList()
        })
    },
    methods: {
        handleSearch: function() {
            this.getList()
        },

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

        getGroupList: function() {
            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(() => {
            })
        },

        getList: function() {
            const _this = this
            _this.queryParam.pageNum = _this.currentPage
            _this.queryParam.pageSize = _this.pageSize
            _this.baseRequest('list', _this.queryParam).then((res) => {
                // console.log("列表——：", res)
                if (res.data.rows) {
                    _this.AllData = []
                    _this.AllData = res.data.rows
                    // res.data.rows.forEach(function(item) {
                    //     console.log("~~~~~~~~~~~~:", item);
                    //     _this.$set(item, "discName" , _this.getlouDetial(item.id))
                    //     console.log("~~~~~~~~~~~~:", item);
                    //     _this.AllData.push(item)
                    // })
                    _this.allpage = res.data.total
                    this.getlouDetial()
                }
                _this.loading = false
            }).catch(() => {
            })
        },

        handleAdd: function() {
            this.dialogVisible = true
            this.dialogTitle = '新增园区'
        },

        handleEdit: function(val) {
            this.groupfrom = val
            this.dialogVisible = true
            this.dialogTitle = '编辑园区'
        },

        handleAddLP: function() {
            this.dialogVisibleLP = true
            this.dialogTitle = '新增楼盘'
        },

        confirmSubmit: function() {
            this.$refs.groupfrom.validate(valid => {
                if (valid) {
                    this.baseRequest('addModel', this.groupfrom).then((res) => {
                        if (res.data.code == 200) {
                            this.dialogVisible = false
                            this.groupfrom = {}
                            this.getList()
                            this.getTreeData()
                            alert('提交成功')
                        }
                    }).catch(() => {
                    })
                }else {
                    return false
                }
            })
        },

        confirmLPSubmit: function() {
            this.baseLPRequest('add', this.formLP).then((res) => {
                if (res.data.code == 200) {
                    this.dialogVisibleLP = false
                    this.getList()
                    this.getTreeData()
                    alert('提交成功')
                }
            }).catch(() => {
            })
        },

        // 获取楼盘信息
        getlouDetial: function() {
            let ids = ''
            this.AllData.forEach(element => {
                ids += element.id + ','
            })
            if (ids != '') {
                ids = ids.substr(0, ids.length - 1)
            }
            const reqData = {
                ids: ids
            }
            this.baseRequest('getlouDetial', reqData).then((res) => {
                // this.loading = true;
                this.louDetial = res.data.data
                // this.loading = false;
            }).catch(() => {
            })
        },

        tableLouDetial(id) {
            return this.louDetial[id]
        },


        getItemJson: function(item) {
            const posts = item.posts ? item.posts.split(',') : []
            if (posts.length > 0) {
                const postStr = []
                posts.forEach(post => {
                    postStr.push(this.PostMap[post])
                })
                item.postStr = postStr.join(',')
            }
            item.dataRoleStr = this.DataRoleMap[item.dataRole]
            item.statusStr = item.status === '0' ? '禁用' : '启用'
            item.department = item.department ? this.DeptMap[item.department] : ''
            item.loginAt = common.transDate(item.loginAt, Constant.DATE_PATTERN.DATE_TIME_s_h)

            return item
        },

        handleRowSelectChange(val) {
            this.currentRow = val
            if (this.currentRow) {
                if (this.currentRow.id === '1') {
                    this.isAdminSelect = true
                } else {
                    this.isAdminSelect = false
                }
            }
        },

        getBaseForm: function() {
            const baseForm = {
                id: '',
                groupId: '',
                username: '',
                password: null,
                truename: '',
                leader: '',
                department: [],
                posts: [],
                gender: '',
                phone: '',
                sequenceNo: '',
                secretKey: '',
                comment: ''
            }

            if (this.$common.currUser().groupId) {
                baseForm.groupId = this.$common.currUser().groupId
            }

            return baseForm
        },

        // 字典项
        generateDcMap: function() {
            this.dc_map['dc_gender'] = this.$common.transDcMap(this.dc_gender)
        },
        // 请求封装，继承类中调用，必须存在
        baseRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
        },
        baseLPRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('ParkFloorDiscController', opUrl, postData, 'User')
        },
        postRequest: function(opUrl, postData) {
            return this.$channel.baseRequest('PostController', opUrl, postData, 'Post')
        },
        handleDeptNodeClick(data) {
            // console.log("@@@@@@@@@@@@@@@@@@", data);
        }
    }
}
</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>

    .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>