270 lines
9.1 KiB
Vue
270 lines
9.1 KiB
Vue
<template>
|
|
<div class="box">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item v-for="(item,index) in breadcrumbItem" :key="index">{{item}}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<el-table :span-method="objectSpanMethod" :data="tableData1" border>
|
|
<!-- 所属分类 -->
|
|
<el-table-column :label="$t('message.projectInfo.theCategory')">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.className}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 功能间名称 -->
|
|
<el-table-column :label="$t('message.projectInfo.functionRoomName')">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.functionRoomName}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="功能间代号" >
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.id}}</span>
|
|
</template>
|
|
</el-table-column> -->
|
|
<!-- 操作 -->
|
|
<el-table-column :label="$t('message.projectInfo.operation')">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click.native="deleteRow(scope.row)"><!-- 删除 -->{{$t('message.energyManage.material.delete')}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="padding:20px 5px">
|
|
<el-button type="primary" @click="addFunctionRoom">
|
|
<!-- 新增功能间 -->
|
|
{{$t('message.projectInfo.operation')}}
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-dialog :title="$t('message.projectInfo.operation')" :visible.sync='addFunctionRoomDialog' width="33%" :append-to-body='false' show-close :modal-append-to-body='false'>
|
|
<el-form :model="addForm" ref="functionRoom">
|
|
<el-form-item :label="$t('message.projectInfo.functionRoomName')" label-width="100px" prop="name">
|
|
<el-input v-model="addForm.name"></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="功能间代号" label-width="100px" prop="code">
|
|
<el-input v-model="addForm.code"></el-input>
|
|
</el-form-item> -->
|
|
<el-form-item :label="$t('message.projectInfo.theCategory')" label-width="100px" prop="className">
|
|
<!-- 请选择 -->
|
|
<el-select v-model="addForm.className" :placeholder="$t('message.projectInfo.pleaseChoose')">
|
|
<el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<div style="float:right">
|
|
<el-button type="primary" @click="confirm('confirm')">
|
|
{{$t('message.energyManage.material.confirm')}}
|
|
<!-- 确定 -->
|
|
</el-button>
|
|
<el-button @click="confirm('cancel')">
|
|
<!-- 取消 -->
|
|
{{$t('message.energyManage.material.cancel')}}
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
:page-size="pageSize"
|
|
@current-change='handleChange'
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getFunctionRoomList,addFunctionRoom ,deleteFunctionRoom,getPageList} from "@/assets/js/api/project.js";
|
|
export default {
|
|
data(){
|
|
return {
|
|
projectSn:'',
|
|
options:/* ['卧室','客厅','餐厅','卫生间','厨房','其他'], */this.$t('message.projectInfo.functionRoomOptions'),
|
|
breadcrumbItem:/* ['功能间命名'], */this.$t('message.projectInfo.functionRoomBreadcrumbItem'),
|
|
tableData1:[
|
|
|
|
],
|
|
addForm:{
|
|
name:'',
|
|
// code:'',
|
|
className:''
|
|
},
|
|
addFunctionRoomDialog:false,
|
|
type:'',
|
|
spanArr:[],
|
|
position:0,
|
|
currentPage:1,
|
|
total:0,
|
|
pageSize:10
|
|
}
|
|
},
|
|
created(){
|
|
this.projectSn = this.$store.state.projectSn
|
|
this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
|
|
},
|
|
mounted(){
|
|
this.rowSpan()
|
|
},
|
|
methods:{
|
|
handleChange(current){
|
|
this.currentPage = current
|
|
console.log(this.currentPage)
|
|
this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
|
|
},
|
|
rowSpan(){
|
|
this.spanArr = []
|
|
this.position = 0
|
|
this.tableData1.forEach((item,index)=>{
|
|
if(index === 0){
|
|
this.spanArr.push(1)
|
|
this.position = 0
|
|
}else{
|
|
console.log('1')
|
|
if(this.tableData1[index].className === this.tableData1[index-1].className){
|
|
this.spanArr[this.position]+=1;
|
|
this.spanArr.push(0)
|
|
}else{
|
|
this.spanArr.push(1)
|
|
this.position = index
|
|
}
|
|
}
|
|
})
|
|
console.log(this.spanArr)
|
|
},
|
|
confirm(type){
|
|
if(type === 'confirm'){
|
|
console.log(this.addForm)
|
|
if(this.addForm.className === ''){
|
|
this.$message({
|
|
type:'warning',
|
|
message:this.$t('message.projectInfo.theCategory')+this.$t('message.projectInfo.cannotEmpty')})
|
|
}else{
|
|
let data = {
|
|
className:this.addForm.className,
|
|
functionRoomName:this.addForm.name,
|
|
projectSn:this.projectSn
|
|
}
|
|
addFunctionRoom(data).then(res=>{
|
|
if(res.code === 200){
|
|
|
|
this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
|
|
this.$refs.functionRoom.resetFields()
|
|
this.addFunctionRoomDialog = false
|
|
}
|
|
})
|
|
}
|
|
|
|
// this.$refs.functionRoom.resetFields()
|
|
|
|
}else if(type === 'cancel'){
|
|
this.addFunctionRoomDialog = false
|
|
}
|
|
},
|
|
async getFunctionRoomListApi(sn,page){
|
|
let res = await getFunctionRoomList({projectSn:sn})
|
|
// console.log(res2)
|
|
if(res.code === 200){
|
|
this.tableData1 = []
|
|
let sleepRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[0])
|
|
let bathRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[3])
|
|
let cookRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[4])
|
|
let dinnerRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[2])
|
|
let livingRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[1])
|
|
let elseRoom = res.result.filter(x=>x.className === this.$t('message.projectInfo.functionRoomOptions')[5])
|
|
this.tableData1.push(...sleepRoom,...bathRoom,...cookRoom,...dinnerRoom,...livingRoom,...elseRoom)
|
|
this.total = this.tableData1.length
|
|
if(page===0){
|
|
this.tableData1 = this.tableData1.slice(0,10)
|
|
console.log(this.tableData1)
|
|
}else{
|
|
this.tableData1 = this.tableData1.slice(page*10,10*page+10)
|
|
console.log(this.tableData1)
|
|
}
|
|
|
|
}
|
|
this.rowSpan()
|
|
},
|
|
// breadcrumbClick(index){
|
|
// console.log(index)
|
|
// if(this.tableType !== 0 && index === 0){
|
|
// this.breadcrumbItem.splice(1,this.tableType)
|
|
// this.tableType = 0
|
|
// }
|
|
|
|
// },
|
|
objectSpanMethod({row,column,rowIndex,columnIndex}){
|
|
if(columnIndex===0){
|
|
const _row = this.spanArr[rowIndex]
|
|
const _col = _row>0?1:0
|
|
return {
|
|
rowspan:_row,
|
|
colspan:_col
|
|
}
|
|
}
|
|
},
|
|
deleteRow(data){
|
|
|
|
this.$confirm(this.$t('message.projectInfo.functionRoomConfirmTetx')+'?', this.$t('message.projectInfo.tip'), {confirmButtonText: this.$t('message.energyManage.material.confirm'),cancelButtonText: this.$t('message.energyManage.material.cancel'),type: 'warning'}).then(() => {
|
|
|
|
deleteFunctionRoom({id:data.id}).then(res=>{
|
|
if(res.code === 200){
|
|
this.$message({
|
|
type: 'success',
|
|
message: this.$t('message.projectInfo.deleteSuccess')+'!'
|
|
})
|
|
this.getFunctionRoomListApi(this.projectSn,this.currentPage-1)
|
|
}
|
|
})
|
|
// this.getHouseTypeListApi(this.projectSn)
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: this.$t('message.projectInfo.cancelDelete')+'!'
|
|
})
|
|
})
|
|
|
|
|
|
},
|
|
addFunctionRoom(){
|
|
this.addFunctionRoomDialog = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.box{
|
|
background-color: rgb(251, 253, 255);
|
|
width: calc(100% - 40px);
|
|
height: calc(100% - 40px);
|
|
padding: 20px 20px;
|
|
overflow: auto;
|
|
}
|
|
/deep/ .el-breadcrumb{
|
|
line-height: 30px;
|
|
padding: 10px 25px;
|
|
font-size: 18px;
|
|
background-color: rgb(235, 236, 241);
|
|
border-radius: 10px;
|
|
}
|
|
/deep/ .el-table{
|
|
margin-top: 20px;
|
|
// border-radius: 10px;
|
|
}
|
|
/deep/ .el-form{
|
|
padding: 0 10px 0 30px;
|
|
}
|
|
/deep/ .el-pagination{
|
|
text-align: center;
|
|
}
|
|
/deep/ .el-table .cell{
|
|
line-height: none;
|
|
}
|
|
/deep/ .el-table td{
|
|
padding: 7px 0;
|
|
}
|
|
/deep/ .el-input{
|
|
width: 300px;
|
|
}
|
|
</style> |