epmet-apartment-pc/src/views/records/roomselection/index.vue

<template>
  <div class="app-container">
    <!--入住记录数据-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
      <el-form-item label="所在区域" prop="deptId">
        <treeselect 
          v-model="queryParams.deptId" 
          :options="deptOptions"  
          :show-count="true" 
          :normalizer="normalizer"
          placeholder="请选择所在区域"  
          style="width: 220px" 
          @select="handleTreeSelect"
          :disable-branch-nodes="true"
        />
      </el-form-item>
      <!-- 公寓 -->
      <el-form-item label="小区公寓" prop="apartmentId">
        <el-select v-model="queryParams.apartmentId" placeholder="请选择小区" @change="handleChangeapartment">
          <el-option v-for="item in apartmentOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋" prop="building">
        <el-select v-model="queryParams.buildingId" placeholder="请选择楼栋" @change="handleChangeBuildingId">
          <el-option v-for="item in buildingOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 单元 -->
      <el-form-item label="单元" prop="unit">
        <el-select v-model="queryParams.unitId" placeholder="请选择单元" @change="handleChangeUnitId">
          <el-option v-for="item in unitOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 门牌号 -->
      <el-form-item label="房屋" prop="house">
        <el-select v-model="queryParams.houseId" placeholder="请选择房屋" @change="handleChangeHouseId">
          <el-option v-for="item in houseOptions" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 房间 -->
      <el-form-item label="房间" prop="houseName">
        <el-input v-model="queryParams.houseName" placeholder="请输入房间名称" clearable style="width: 220px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="姓名" prop="graduateName">
        <el-input v-model="queryParams.graduateName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="手机号" prop="graduateTelephone">
        <el-input v-model="queryParams.graduateTelephone" placeholder="请输入手机号码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 身份证 -->
      <el-form-item label="身份证" prop="graduateIdCard">
        <el-input v-model="queryParams.graduateIdCard" placeholder="请输入身份证号码" clearable style="width: 220px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list">
      <!-- <el-table-column type="selection" width="50" align="center" /> -->
      <el-table-column label="序号" align="center" key="buildId" type="index" />
      <!-- 所在区域 -->
      <el-table-column label="所在区域" align="center" prop="deptName" :show-overflow-tooltip="true" />
      <el-table-column label="小区/公寓" align="center" prop="apartmentName" :show-overflow-tooltip="true" />
      <!-- 楼号 -->
      <el-table-column label="楼号" align="center" prop="buildingName" />
      <!-- 单元 -->
      <el-table-column label="单元" align="center" prop="unitName" />
      <!-- 门牌号 -->
      <el-table-column label="房屋" align="center" prop="houseName" />
      <!-- 房间 -->
      <el-table-column label="房间" align="center" prop="roomName" />
      <!-- 入住人 -->
      <el-table-column label="选房人" align="center" prop="graduateName" />
      <!-- 性别 -->
      <el-table-column label="性别" align="center" prop="genderName" />
      <el-table-column label="手机号" align="center" prop="telephone" width="160" />
      <!-- 入住时间 -->
      <el-table-column label="入住日期" align="center" prop="checkInDate"  width="160" />
      <el-table-column label="计划退房日期" align="center" prop="checkOutDate" width="160" />
      <el-table-column label="办理入住时间" align="center" prop="handleCheckInDate" width="160" />
      <!-- 居住状态 -->
      <!-- <el-table-column label="当前状态" prop="state">
        <template slot-scope="scope">
          <span :style="{ 'color': scope.row.state === 0 ? '#08b3b3' : scope.row.state === 6 ? '#fa9e0a' : '#c5cbda' }">{{ stateComp(scope.row.state) }}</span>
        </template>
      </el-table-column> -->
      <!-- 入住评价 -->
      <el-table-column label="原因说明" align="center" prop="evaluation" />

      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <el-dialog title="详情" :visible.sync="open" width="50%">
      <el-row :gutter="60">
        <el-col :span="8" class="mb-10">所在区域：{{ info.deptName }}</el-col>
        <el-col :span="8" class="mb-10">小区/公寓：{{ info.apartmentName }}</el-col>
        <el-col :span="8" class="mb-10">楼号：{{ info.buildingName }}</el-col>

        <el-col :span="8" class="mb-10">单元：{{ info.unitName }}</el-col>
        <el-col :span="8" class="mb-10">房屋：{{ info.houseName }}</el-col>
        <el-col :span="8" class="mb-10">房间：{{ info.roomName }}</el-col>
        <el-col :span="24">
          <div class="line"></div>
        </el-col>
        <el-col :span="8" class="mb-10">居住人：{{ info.graduateName }}</el-col>
        <el-col :span="8" class="mb-10">性别：{{ info.genderName }}</el-col>
        <el-col :span="8" class="mb-10">手机号：{{ info.telephone }}</el-col>

        <el-col :span="8" class="mb-10">身份证号：{{ info.idCard }}</el-col>
        <el-col :span="8" class="mb-10">入住日期：{{ info.checkInDate }}</el-col>
        <el-col :span="8" class="mb-10">退房日期：{{ info.checkOutDate }}</el-col>

        <el-col :span="24" class="mb-10">入住办理时间：{{ info.handleCheckInDate }}</el-col>
        <!-- <el-col :span="8" class="mb-10">当前状态：{{ stateComp(info.state) }}</el-col>
        <el-col :span="8" class="mb-10"></el-col> -->
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRecselect,
  getRecSelectInfo,
  queryDeptDropdownList
} from "@/api/mz/rec";
import { listDept } from "@/api/system/dept";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "RoomSelection",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 公寓表格数据
      list: null,
     
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId:null,
        apartmentId: null,
        houseId: null,
        houseName: null,
        graduateName: null,
        graduateTelephone: null,
        graduateIdCard: null,
        status: null,
        buildingId: null,
        unitId: null,
      },
      info: {},
      deptOptions: [],
      apartmentOptions: [],
      buildingOptions: [],
      unitOptions: [],
      houseOptions: [],
      open: false,
    };
  },
  watch: {
    'queryParams.deptId': {
      handler(newVal, oldVal) {
        console.log('newVal',newVal);
        if(!newVal)
        this.queryParams.apartmentId = null;
        this.queryParams.buildingId = null;
        this.queryParams.unitId = null; 
        this.queryParams.houseId = null;
        this.apartmentOptions = [];
        this.buildingOptions = [];
        this.unitOptions = [];
        this.houseOptions = [];
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getList();
    this.getDeptTree();

  },
  computed: {
    
  },
  methods: {
    async handleTreeSelect(value){
      this.queryParams.deptId = value.deptId;
      this.queryParams.apartmentId = '';
      this.queryParams.buildingId = '';
      this.queryParams.unitId = '';
      this.queryParams.houseId = '';
      this.buildingOptions = [];
      this.unitOptions = [];
      this.houseOptions = [];
      this.apartmentOptions = await this.getListByParentId('1',value.deptId)
    },
    async handleChangeapartment(val) {
      this.queryParams.apartmentId = val;
      this.queryParams.buildingId = null;
      this.queryParams.unitId = null;
      this.queryParams.houseId = null;
      this.houseOptions = [];
      this.buildingOptions = await this.getListByParentId('2',val);
    },
    // 三级联动
   async handleChangeBuildingId(val) {
      this.queryParams.buildingId = val;
      this.queryParams.unitId = null;
      this.queryParams.houseId = null;
      this.houseOptions = [];
      this.unitOptions = await this.getListByParentId('3',val);
    },
   async handleChangeUnitId(val) {
      this.queryParams.unitId = val;
      this.queryParams.houseId = null;
      this.houseOptions = await this.getListByParentId('4',val);
    },
    handleChangeHouseId(val) {
      this.queryParams.houseId = val;
    },
    // 三级联动通用接口
     getListByParentId(type,id) {
      return new Promise((resolve, reject) => {
        queryDeptDropdownList({type,id}).then((res) => {
          resolve(res.data);
        });
      }); 
    },
    // stateComp(val) {
    //     return this.statusOptions.find((item) => item.value == val)?.label;
    // },
    /** 转换公寓数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
    /** 查询公寓列表 */
    getList() {
      this.loading = true;
      listRecselect(this.queryParams).then(
        (response) => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      ).catch(err => {
        this.loading = false;
      });
    },
    /** 查询公寓下拉树结构 */
    getDeptTree() {
      listDept().then((response) => {
        this.deptOptions = this.handleTree(response.data, "deptId", 'parentId', 'children', 2);
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    handleView(row) {
      getRecSelectInfo(row.chooseRecId).then((response) => {
        this.info = response.data;
        this.open = true;
      }).catch(err => {
        this.$message.error(err.msg);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.line {
  margin: 30px 0;
  height: 2px;
  border-top: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
} 
</style>