同步选房 入住 退房记录

src/views/records/checkout/index.vue

@@ -0,0 +1,336 @@
+<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="id" type="index" />
+      <!-- 所在区域 -->
+      <el-table-column label="所在区域" align="center" prop="parentName" :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="roomTypeName" />
+      <!-- 入住人 -->
+      <el-table-column label="居主人" align="center" prop="graduateName" />
+      <!-- 性别 -->
+      <el-table-column label="性别" align="center" prop="genderName">
+        <template slot-scope="scope">
+          {{ scope.row.gender == '1'? '男' : '女' }}
+        </template>
+        </el-table-column> 
+      <el-table-column label="手机号" align="center" prop="telephone" width="160" />
+      <!-- 入住时间 -->
+      <el-table-column label="办理退房日期" align="center" prop="handleCheckOutDate" width="160" />
+
+      <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" v-if="info.contract">交割单：{{ info.contract }} <el-button  @click="handleDownload" type="text" ><i class="el-icon-download"></i>下载</el-button></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 {
+  listCheckOutRec,
+  getRecCheckOutInfo,
+  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,
+        buildingId: null,
+        unitId: null,
+        houseId: 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 = null;
+      this.queryParams.buildingId = null;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      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);
+        });
+      }); 
+    },
+    // 下载合同
+    handleDownload(){
+      this.info.contract = 'http://192.168.1.144:9000/mzjzf/%E6%88%BF%E5%B1%8B%E7%A7%9F%E8%B5%81%E5%90%88%E5%90%8C%E6%9B%B4%E6%94%B9%E5%90%8E.pdf'
+      if (this.info.contract) {
+        // 创建一个隐藏的 <a> 标签
+        const link = document.createElement('a');
+        link.href = this.info.contract;
+        // 设置下载的文件名，这里假设文件名可以从 URL 中获取
+        // 例如：https://example.com/files/example.pdf，获取到的文件名就是 example.pdf
+        const fileName = this.info.contract.split('/').pop(); 
+        link.setAttribute('download', fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } else {
+        this.$message.warning('没有可下载的文件地址');
+      }
+    },
+    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;
+      listCheckOutRec(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) {
+      getRecCheckOutInfo(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>

src/views/records/roomselection/index.vue

@@ -1,24 +1,324 @@
 <template>
-  <div class="container">
+  <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',
+  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">
-<style scoped>
+.line {
-.container {
+  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>