<template>
|
<GlobalWindow title="楼层管理" @close="close" :showConfirm="false" :visible.sync="visible" width="800px">
|
<div class="head">
|
<div class="title">楼层列表</div>
|
<el-button type="primary" @click="editClick()">新建楼层</el-button>
|
</div>
|
<el-table :data="list" stripe>
|
<el-table-column prop="code" label="楼层编码" min-width="100px"></el-table-column>
|
<el-table-column prop="name" label="楼层名称" min-width="100px"></el-table-column>
|
<el-table-column label="操作" min-width="100px">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="editClick(row)" icon="el-icon-edit"
|
v-permissions="['business:ywbuilding:update']">编辑</el-button>
|
<el-button type="text" @click="handleDel(row)" icon="el-icon-delete"
|
v-permissions="['business:ywbuilding:delete']">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="mt20">
|
<Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" />
|
</div>
|
|
<!-- -->
|
<el-dialog :title="title" :visible.sync="showModal" :append-to-body="true" width="500px">
|
<el-form :model="param" ref="form" :rules="rules">
|
<el-form-item label="楼层编码" prop="code">
|
<el-input v-model="param.code" placeholder="请输入楼层编码" v-trim />
|
</el-form-item>
|
<el-form-item label="楼层名称" prop="name">
|
<el-input v-model="param.name" placeholder="请输入楼层名称" v-trim />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="showModal = false">取 消</el-button>
|
<el-button type="primary" :loading="subLoading" @click="onSubmit">确 定</el-button>
|
</span>
|
</el-dialog>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { fetchList, detailById, deleteById, create, updateById } from '@/api/project/yeFloor'
|
import Pagination from '@/components/common/Pagination'
|
import { Message } from 'element-ui'
|
export default {
|
extends: BaseOpera,
|
components: { GlobalWindow, Pagination },
|
data() {
|
return {
|
// 表单数据
|
info: {},
|
id: '',
|
visible: false,
|
showModal: false,
|
subLoading: false,
|
list: [],
|
pagination: {
|
pageSize: 10,
|
page: 1,
|
total: 0
|
},
|
|
title: '新建楼层',
|
param: {},
|
rules: {
|
name: [{ required: true, message: '请输入楼层名称' }],
|
code: [{ required: true, message: '请输入楼层编码' }],
|
},
|
}
|
},
|
created() {
|
},
|
methods: {
|
onSubmit() {
|
this.$refs['form'].validate((valid) => {
|
if (valid) {
|
const { param, id } = this
|
this.subLoading = true
|
let fn = param.id ? updateById : create
|
fn({ ...param, buildingId: id }).then(res => {
|
this.showModal = false
|
this.subLoading = false
|
Message.success('提交成功')
|
this.getList()
|
}, () => {
|
this.subLoading = false
|
})
|
}
|
})
|
},
|
getList(page) {
|
const { pagination, id } = this
|
// this.buildingId =
|
let capacity = pagination.pageSize
|
let paget = page || pagination.page
|
fetchList({ capacity, page: paget, model: { buildingId: id } }).then(res => {
|
this.list = res.records
|
this.pagination.total = res.total
|
})
|
},
|
editClick(row) {
|
if (row && row.id) {
|
this.title = '编辑楼层'
|
this.param = { ...row }
|
} else {
|
this.title = '新建楼层'
|
this.param = {}
|
}
|
this.showModal = true
|
},
|
handleDel(row) {
|
this.$confirm('确定删除该楼层, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteById(row.id).then(res => {
|
Message.success('删除成功')
|
this.getList()
|
})
|
})
|
},
|
close() {
|
this.$emit('success')
|
},
|
handleSizeChange(capacity) {
|
this.pagination.pageSize = capacity
|
this.getList()
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.head {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 12px;
|
|
.title {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
}
|
</style>
|
