同步合同管理页面 房屋类型权限

src/api/mz/contract.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+// 合同列表
+export function list(data) {
+    return request({
+      url: '/apartment/manager/selectContractList',
+      method: 'post',
+      data
+    })
+  }
+  
+// 合同详情
+export function detail(query) {
+  return request({
+    url: '/apartment/manager/selectContractDetail',
+    method: 'get',
+    params: query
+  })
+}

src/views/mz/contract/index.vue

@@ -0,0 +1,364 @@
+<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 label="合同类型" prop="contractType">
+                <el-select v-model="queryParams.contractType" placeholder="请选择合同类型" style="width: 220px"
+                    @keyup.enter.native="handleQuery" clearable>
+                    <el-option v-for="item in contractTypeOptions" :key="item.value" :label="item.label"
+                        :value="item.value" />
+                </el-select>
+            </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="contractType">
+                <template slot-scope="scope">
+                    {{ scope.row.contractType === 1 ? '续租合同' : '入住合同' }}
+                </template>
+            </el-table-column>
+            <!-- 签订人 -->
+            <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" width="170" prop="idCard" />
+            <!-- 所在区域 -->
+            <el-table-column label="小区/公寓" align="center" prop="apartmentName" :show-overflow-tooltip="true" />
+            <!-- 楼号 -->
+            <el-table-column label="楼号" align="center" prop="buildingName" width="170" :show-overflow-tooltip="true" />
+            <!-- 单元 -->
+            <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" width="160" prop="contractTime" />
+            <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>
+                    <el-button size="mini" type="text" icon="el-icon-download"
+                        @click="handledownLoad(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="8" class="mb-10">入住办理时间：{{ info.handleCheckInDate }}</el-col>
+                <el-col :span="8" class="mb-10">合同：{{ info.contract }} <el-button @click="handleDownload" type="text"><i
+                            class="el-icon-download"></i>下载</el-button></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 {
+    list,
+    detail
+} from "@/api/mz/contract";
+import {
+    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: "Contract",
+    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,
+                contractType: null,
+            },
+            info: {},
+            apartmentOptions: [],
+            deptOptions: [],
+            buildingOptions: [],
+            unitOptions: [],
+            houseOptions: [],
+            open: false,
+            contractTypeOptions: [
+                { label: '入住合同', value: 0 },
+                { label: '续租合同', value: 1 },
+            ],
+        };
+    },
+    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: {
+        // 下载文件
+        handledownLoad(row) {
+            this.info.contract = row.contract;
+            if (this.info.contract) {
+                fetch(this.info.contract)
+                   .then(response => {
+                        if (!response.ok) {
+                            throw new Error('网络响应异常');
+                        }
+                        return response.blob();
+                    })
+                   .then(blob => {
+                        // 创建一个隐藏的 <a> 标签
+                        const link = document.createElement('a');
+                        link.href = URL.createObjectURL(blob);
+                        // 设置下载的文件名，这里假设文件名可以从 URL 中获取
+                        const fileName = this.info.contract.split('/').pop(); 
+                        link.setAttribute('download', fileName);
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        // 释放 URL 对象
+                        URL.revokeObjectURL(link.href);
+                    })
+                   .catch(error => {
+                        console.error('下载失败:', error);
+                        this.$message.warning('文件下载失败，请稍后重试');
+                    });
+            } else {
+                this.$message.warning('没有可下载的文件地址');
+            }
+        },
+        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);
+                });
+            });
+        },
+        
+
+        /** 转换公寓数据结构 */
+        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;
+            list(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) {
+            detail({contractId:row.contractId}).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/mz/housetype/index.vue

@@ -8,15 +8,15 @@
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-              v-hasPermi="['mz:housetype:add']">新增</el-button>
+              v-hasPermi="['mz:type:add']">新增</el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-              v-hasPermi="['mz:housetype:remove']">删除</el-button>
+              v-hasPermi="['mz:type:remove']">删除</el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-              v-hasPermi="['mz:housetype:export']">导出</el-button>
+              v-hasPermi="['mz:type:export']">导出</el-button>
           </el-col>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
@@ -38,9 +38,9 @@
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                v-hasPermi="['mz:housetype:edit']">修改</el-button>
+                v-hasPermi="['mz:type:edit']">修改</el-button>
               <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                v-hasPermi="['mz:housetype:remove']">删除</el-button>
+                v-hasPermi="['mz:type:remove']">删除</el-button>
             </template>
           </el-table-column>
         </el-table>