<template>
|
<div class="main floor_main">
|
<div class="main_header">
|
<div class="header_item">
|
<span style="color: #fff">楼号：</span>
|
<el-select v-model="buildId" :size="size" clearable placeholder="请选择楼号" @change="changeBuildData">
|
<el-option
|
v-for="item in buildingData"
|
:key="item.buildId"
|
:label="item.buildNum"
|
:value="item.buildId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<span style="color: #fff">楼层：</span>
|
<el-select v-model="floorId" :size="size" clearable placeholder="请选择楼层">
|
<el-option
|
v-for="item in floorData"
|
:key="item.floorNum"
|
:label="item.floorNum"
|
:value="item.floorNum">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<el-button v-if="showButton('search')" icon="el-icon-search" @click="searchFloorList(true)">查询</el-button>
|
<el-button class="search_btn" v-if="showButton('insert')" icon="el-icon-plus" @click="propInsert()">新增</el-button>
|
</div>
|
</div>
|
<div class="card_main">
|
<div class="card_item" v-for="item in floolList" :key="item.id">
|
<div class="card_item_header">
|
<div>
|
楼号：<span class="item_header_value">{{item.buildNum}}</span>
|
</div>
|
<div>
|
楼层：<span class="item_header_value">{{item.floorNum}}</span>
|
</div>
|
</div>
|
<div class="card_item_content">
|
<div>房间号：</div>
|
<div class="card_item_content--list">
|
<div class="list_item" v-for="item in item.dormNums.split(',')" :key="item.id">
|
{{item}}
|
</div>
|
</div>
|
</div>
|
<div class="card_item_footer">
|
<el-button type="text" size="mini" icon="el-icon-edit-outline" v-if="showButton('update')" @click="propUpdate(item)">修改</el-button>
|
<el-button type="text" class="delete" icon="el-icon-delete" v-if="showButton('delete')" @click="deleteInfo(item)">删除</el-button>
|
</div>
|
</div>
|
</div>
|
<!-- 增加楼层房间号 修改楼层房间号 -->
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle ? '新增楼层房间号' : '修改楼层房间号信息'"
|
:visible.sync="asyncFloor"
|
width="35%">
|
<el-form ref="form" :model="formFloor" :rules="rulesFloor" label-width="auto" class="rule_form">
|
<el-form-item label="楼号：" prop="buildId">
|
<el-select v-model="formFloor.buildId" :size="size" clearable placeholder="请选择楼号" @change="changeBuildData">
|
<el-option
|
v-for="item in buildingData"
|
:key="item.buildId"
|
:label="item.buildNum"
|
:value="item.buildId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="楼层：" prop="floorNum">
|
<el-input-number
|
v-model="formFloor.floorNum"
|
:size="size"
|
:min="1"
|
:controls="false"
|
placeholder="请输入楼层"
|
@change="changeFloorData">
|
</el-input-number>
|
</el-form-item>
|
<div class="room_table">
|
<div class="room_table_header">
|
<div>房间号</div>
|
<el-button class="search_btn" v-if="showButton('insert')" icon="el-icon-plus" @click="addRoomInfo()">新增</el-button>
|
</div>
|
<div class="room_table_content">
|
<el-table
|
:data="roomDataList"
|
height="100%">
|
<el-table-column label="序号" width="100" align="center">
|
<template #default="scope">
|
<span>{{scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="房间号" align="center">
|
<template #default="{ row }">
|
<el-input
|
v-model="row.dormNum"
|
:size="size"
|
placeholder="请输入房间号">
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="200">
|
<template #default="scope">
|
<el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteRoomInfo(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncFloor = false">取 消</el-button>
|
<el-button class="submit_btn" @click="asyncTitle ? submitInsertForm() : submitUpdateForm()">提 交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from "../../../../pinia/index";
|
import { changeSize, throttle } from "../../../../plugins/public";
|
export default {
|
name: 'FloornoIndex',
|
data() {
|
return {
|
buildId: '',
|
buildingData: [],
|
floorId: '',
|
floorData: [],
|
size: changeSize(),
|
floolList: [], // 列表信息
|
asyncTitle: true, // true 添加楼层房间号信息 false 修改楼层房间号信息
|
asyncFloor: false, // 弹窗
|
formFloor: {}, // 表单信息
|
rulesFloor: {
|
buildId: [{
|
required: true,
|
message: '请选择楼号',
|
trigger: ['blur', 'change']
|
}],
|
floorNum: [{
|
required: true,
|
message: '请输入楼层号',
|
trigger: 'blur'
|
}]
|
}, // 表单校验规则
|
roomDataList: [], //
|
roomList: [], // 新增的房间号信息
|
deleteList: [], // 删除的房间号信息
|
}
|
},
|
mounted() {
|
const that = this;
|
// 根据窗口大小动态修改组件尺寸
|
window.onresize = () => {
|
that.size = changeSize();
|
}
|
that.getAllBuildData();
|
that.searchFloorList();
|
},
|
methods: {
|
// 获取全部楼号信息
|
async getAllBuildData() {
|
const { data } = await this.$api.Basics.GETALLBUILDDATA();
|
this.buildingData = data;
|
},
|
// 查询楼层信息
|
searchFloorList() {
|
this.floolList = [];
|
this.$api.Basics.SEARCHFLOORLIST({
|
buildId: this.buildId,
|
floorNum: this.floorId
|
}).then((res) => {
|
if(res.success) {
|
this.floolList = res.data.list;
|
}
|
})
|
},
|
// 打开添加信息
|
propInsert() {
|
this.asyncTitle = true;
|
this.asyncFloor = true;
|
},
|
// 打开修改信息
|
propUpdate(row) {
|
this.asyncTitle = false;
|
this.asyncFloor = true;
|
this.$set(this.formFloor, 'buildId', row.buildId);
|
this.$set(this.formFloor, 'floorNum', row.floorNum);
|
this.searchFloorRoomList();
|
},
|
// 删除楼层房间号信息
|
deleteInfo(row) {
|
this.$confirm("该操作将删除该楼层与房间号信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$api.Basics.DELETELOORANDROOMINFO({
|
buildId: row.buildId,
|
floorNum: row.floorNum
|
}).then(res => {
|
if(res.success) {
|
this.searchFloorList(true);
|
this.getAllBuildData();
|
this.$message.success("删除成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
})
|
.catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
// 提交添加信息
|
submitInsertForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formFloor);
|
params.roomList = this.roomDataList.map(item => {
|
return {
|
roomId: item.roomId,
|
dormNum: item.dormNum
|
}
|
});
|
params.deleteList = this.deleteList;
|
this.$api.Basics.INSERTFLOORANDROOMINFO(params).then((res) => {
|
if(res.success) {
|
this.asyncFloor = false;
|
this.$message.success('添加成功！');
|
this.searchFloorList();
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改信息
|
submitUpdateForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formFloor);
|
params.roomList = this.roomDataList.map(item => {
|
return {
|
roomId: item.roomId,
|
dormNum: item.dormNum
|
}
|
});
|
params.deleteList = this.deleteList;
|
this.$api.Basics.UPDATEFLOORANDROOMINFO(params).then((res) => {
|
if(res.success) {
|
this.asyncFloor = false;
|
this.$message.success('修改成功！');
|
this.searchFloorList();
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 删除房间号信息
|
deleteRoomInfo(index) {
|
this.$nextTick(() => {
|
this.roomDataList.splice(index, 1)
|
this.$message.success('删除成功！');
|
})
|
if(this.roomDataList[index].roomId) {
|
this.deleteList.push({
|
roomId: this.roomDataList[index].roomId,
|
dormNum: this.roomDataList[index].dormNum
|
})
|
}
|
},
|
// 选择楼号
|
changeBuildData(value) {
|
this.floorData = [];
|
if(value) {
|
const data = this.buildingData.find(item => item.buildId === value);
|
this.floorData = data.floors;
|
}
|
if(value && this.formFloor.floorNum) {
|
this.searchFloorRoomList();
|
}
|
},
|
// 输入楼层失焦 查询楼层房间号信息
|
changeFloorData(value) {
|
if(value && this.formFloor.buildId) {
|
this.searchFloorRoomList();
|
}
|
},
|
// 查询房间号信息
|
async searchFloorRoomList() {
|
this.roomDataList = [];
|
this.deleteList = [];
|
await this.$api.Basics.SEARCHROOMINFOLIST({
|
buildId: this.formFloor.buildId,
|
floorNum: this.formFloor.floorNum
|
}).then((res) => {
|
if(res.success && res.data.list.length > 0) {
|
this.roomDataList = res.data.list;
|
}
|
})
|
},
|
// 新增房间号信息
|
addRoomInfo() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const data = {
|
roomId: '',
|
dormNum: ''
|
};
|
this.roomDataList.push(data);
|
this.$message.success('增加成功，请输入房间号！');
|
}
|
})
|
},
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
}
|
},
|
watch: {
|
asyncFloor(bol) {
|
if(!bol) {
|
this.formFloor = {};
|
this.deleteList = [];
|
this.roomList = [];
|
this.roomDataList = [];
|
this.$refs.form.resetFields();
|
this.getAllBuildData();
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../../../style/layout-main.scss';
|
|
.floor_main {
|
padding: 0 10px 10px;
|
margin: 0 !important;
|
width: 100% !important;
|
height: 100% !important;
|
}
|
|
::v-deep .main_header {
|
margin: 10px !important;
|
}
|
|
.card_main {
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
background: transparent;
|
overflow: auto;
|
flex: 1;
|
|
.card_item {
|
display: flex;
|
flex-direction: column;
|
margin: 10px 10px 10px 0;
|
width: calc(100% / 4);
|
height: 240px;
|
max-width: 390px;
|
color: #0F9CAF;
|
background: #031A46;
|
border-radius: 4px;
|
|
.card_item_header {
|
padding: 10px 20px 20px;
|
display: flex;
|
justify-content: space-between;
|
|
.item_header_value {
|
color: #18F5F7;
|
}
|
}
|
|
.card_item_content {
|
position: relative;
|
height: 60%;
|
padding: 0 20px;
|
|
.card_item_content--list {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 10px;
|
height: 70%;
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px transparent;
|
background: rgba(8, 81, 114, .8);
|
}
|
|
&::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 10px;
|
background: rgba(8, 81, 114, .4) 5%,;
|
}
|
|
.list_item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 5px 0;
|
margin: 4px;
|
width: calc((100% / 7) - 8px);
|
color: #18F5F7;
|
background: #073C62;
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.card_item_footer {
|
position: relative;
|
padding: 10px 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
height: 51px;
|
font-size: 18px;
|
border-top: 1px solid #0F9CAF;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
width: 1px;
|
height: 60%;
|
background: #0F9CAF;
|
}
|
}
|
}
|
}
|
|
.room_table {
|
|
.room_table_header {
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-left: 10px;
|
color: #fff;
|
font-size: 18px;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 3px;
|
height: 60%;
|
background: #18F5F7;
|
}
|
}
|
|
.room_table_content {
|
padding: 15px 0;
|
height: 300px;
|
}
|
}
|
|
.delete {
|
color: #F94550;
|
&:hover {
|
color: rgba($color: #F94550, $alpha: .7);
|
}
|
}
|
</style>
|
