elink-star
/
epmet-apartment-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

wyx
mk 3 months ago
parent
215bfeb917
commit
64651b0c75
3 changed files with 387 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/api/mz/contract.js
  2. 364
      src/views/mz/contract/index.vue
  3. 10
      src/views/mz/housetype/index.vue

18
src/api/mz/contract.js
View File

@ -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
})
}

364
src/views/mz/contract/index.vue
View File

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

10
src/views/mz/housetype/index.vue
View File

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

Write Preview
Loading…
Cancel
Save