|
|
@@ -0,0 +1,411 @@
|
|
|
+<template>
|
|
|
+ <div class="demolitContainer">
|
|
|
+ <!-- 房屋拆迁管理 -->
|
|
|
+ <header class="queryContainer">
|
|
|
+ <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
|
|
|
+ <el-form-item label="坐落：">
|
|
|
+ <el-select v-model="form.region" placeholder="阳华河" size="medium">
|
|
|
+ <el-option label="光华公园" value="shanghai"></el-option>
|
|
|
+ <el-option label="西河" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="my-table">
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData"
|
|
|
+ :header-cell-style="{fontSize: '14px', fontWeight:'600',background:'#dfeffe',color:'#333333'}"
|
|
|
+ style="width: 100%;font-size: 14px"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="65" align="center"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item,i) in columnList"
|
|
|
+ :key="i"
|
|
|
+ :property="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="120">
|
|
|
+ <template slot-scope='scope'>
|
|
|
+ <el-button type="text" size="mini" @click="viewData(scope)">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页器 -->
|
|
|
+ <div class="pagination" style="box-sizing: border-box;float:right;padding-right:10px">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="1"
|
|
|
+ :page-sizes="[50, 100, 150, 200]"
|
|
|
+ :page-size="50"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="totalCount"
|
|
|
+ background
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看信息对话框 -->
|
|
|
+ <el-dialog title="详情页面" width="50%" :visible.sync="lookVisible" @close="closeDialog">
|
|
|
+ <el-form label-width="120px" label-position="right" class="demo-form-inline">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="幢号：">
|
|
|
+ <el-input v-model="vData.buildNumber"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="单元号：">
|
|
|
+ <el-input v-model="vData.unitNumber"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="坐落：">
|
|
|
+ <el-input v-model="vData.houseLocate"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="层数：">
|
|
|
+ <el-input v-model="vData.storeyCount"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="房号：">
|
|
|
+ <el-input v-model="vData.roomNumber"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="房屋面积：">
|
|
|
+ <el-input v-model="vData.roomArea"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="产权人名称：">
|
|
|
+ <el-input v-model="vData.householder"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="事件状态：">
|
|
|
+ <span v-if="vData.bankCondition=='已处理'" style="font-weight:600;color:#95d2b4;font-size:20px">已处理</span>
|
|
|
+ <span v-else-if="vData.bankCondition=='待处理'" style="font-weight:600;color:#fe1018;font-size:20px">待处理</span>
|
|
|
+ <span v-else style="font-weight:600;color:#a19796;font-size:20px">不处理</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="房屋设计图纸：">
|
|
|
+ <div style="height:200px;border:1px solid #DCDFE6; border-radius:4px;">
|
|
|
+ <pdf src="/static/pdf/PDFTEST.pdf"></pdf>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="分层分户图：">
|
|
|
+ <div style="height:200px;border:1px solid #DCDFE6; border-radius:4px;"></div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="分幅平面图：">
|
|
|
+ <div style="height:200px;border:1px solid #DCDFE6; border-radius:4px;"></div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import pdf from 'vue-pdf'
|
|
|
+export default {
|
|
|
+ components: { pdf },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ region: ''
|
|
|
+ },
|
|
|
+ columnList: [
|
|
|
+ {
|
|
|
+ prop: 'houseLocate',
|
|
|
+ label: '房屋坐落'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'buildNumber',
|
|
|
+ label: '幢号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'unitNumber',
|
|
|
+ label: '单元号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'storeyCount',
|
|
|
+ label: '层数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'roomNumber',
|
|
|
+ label: '房号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'roomArea',
|
|
|
+ label: '房屋面积'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'householder',
|
|
|
+ label: '产权人名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'registeredPermanent',
|
|
|
+ label: '户籍所在地'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ buildNumber: 'BD',
|
|
|
+ unitNumber: '一单元',
|
|
|
+ houseLocate: '光华北三路',
|
|
|
+ storeyCount: '6',
|
|
|
+ roomNumber: '603',
|
|
|
+ roomArea: '120',
|
|
|
+ householder: '司马南',
|
|
|
+ registeredPermanent: '北京',
|
|
|
+ bankCondition: '已处理'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ buildNumber: 'BD',
|
|
|
+ unitNumber: '二单元',
|
|
|
+ houseLocate: '光华北三路',
|
|
|
+ storeyCount: '8',
|
|
|
+ roomNumber: '802',
|
|
|
+ roomArea: '112',
|
|
|
+ householder: '张文献',
|
|
|
+ registeredPermanent: '南京',
|
|
|
+ bankCondition: '待处理'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ buildNumber: 'BD',
|
|
|
+ unitNumber: '一单元',
|
|
|
+ houseLocate: '光华北三路',
|
|
|
+ storeyCount: '9',
|
|
|
+ roomNumber: '904',
|
|
|
+ roomArea: '109',
|
|
|
+ householder: '郑和',
|
|
|
+ registeredPermanent: '天津',
|
|
|
+ bankCondition: '已处理'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ buildNumber: 'BD',
|
|
|
+ unitNumber: '三单元',
|
|
|
+ houseLocate: '光华北三路',
|
|
|
+ storeyCount: '12',
|
|
|
+ roomNumber: '1201',
|
|
|
+ roomArea: '129',
|
|
|
+ householder: '文书',
|
|
|
+ registeredPermanent: '东京',
|
|
|
+ bankCondition: '已处理'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ totalCount:0,
|
|
|
+ lookVisible: false,
|
|
|
+ dialogTitle: '',
|
|
|
+ // 查看具体数据
|
|
|
+ vData: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.totalCount = this.tableData.length;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * @description 添加数据
|
|
|
+ */
|
|
|
+ addData() {
|
|
|
+ console.log('添加数据');
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 编辑
|
|
|
+ */
|
|
|
+ editor(scope) {
|
|
|
+ this.dilogTitle = '编辑数据';
|
|
|
+ this.lookVisible = true;
|
|
|
+ this.vData = scope.row;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 删除
|
|
|
+ */
|
|
|
+ _delete(scope) {
|
|
|
+ let rowData = scope.row; //获取该条数据
|
|
|
+ this.$confirm('确认删除该条数据?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.tableData.splice(this.tableData.indexOf(rowData), 1);
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 导出数据
|
|
|
+ */
|
|
|
+ exportData() {
|
|
|
+ console.log('导出数据');
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 导入数据
|
|
|
+ */
|
|
|
+ importData() {
|
|
|
+ console.log('导入数据');
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 分页每页条数
|
|
|
+ */
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 改变当前页
|
|
|
+ */
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 查看数据
|
|
|
+ */
|
|
|
+ viewData(scope) {
|
|
|
+ this.dilogTitle = '查看页面';
|
|
|
+ console.log(scope);
|
|
|
+ this.lookVisible = true;
|
|
|
+ this.vData = scope.row;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 关闭数据弹窗
|
|
|
+ */
|
|
|
+ closeDialog() {
|
|
|
+ this.vData = {}; //清空数据
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.demolitContainer {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 43px;
|
|
|
+ bottom: 0;
|
|
|
+ .queryContainer {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 60px;
|
|
|
+ padding: 0 30px;
|
|
|
+ .el-form {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ >>> .el-form--inline .el-form-item__content {
|
|
|
+ // display: inline-block;
|
|
|
+ vertical-align: middle !important;
|
|
|
+ }
|
|
|
+ .op-button {
|
|
|
+ float: right;
|
|
|
+ height: 100%;
|
|
|
+ .el-button {
|
|
|
+ display: inline-block;
|
|
|
+ width: 52px;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding-right: 4px;
|
|
|
+ }
|
|
|
+ .el-button--primary:focus {
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #2d74e7;
|
|
|
+ border-color: #2d74e7;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ display: inline-block;
|
|
|
+ width: 260px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .my-table {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #ccc !important;
|
|
|
+ margin: 10px 30px;
|
|
|
+ padding-bottom: 42px;
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 70px);
|
|
|
+ max-height: calc(100% - 70px);
|
|
|
+ margin-bottom: 50px;
|
|
|
+ overflow-y: hidden;
|
|
|
+ >>> .el-table__header tr,
|
|
|
+ >>> .el-table__header th {
|
|
|
+ padding: 0;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ >>> .el-table__body tr,
|
|
|
+ >>> .el-table__body td {
|
|
|
+ padding: 0;
|
|
|
+ height: 30px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ >>> .el-table__body tr {
|
|
|
+ cursor: pointer;
|
|
|
+ &:nth-child(2n) {
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >>> .el-table th.is-leaf,
|
|
|
+ >>> .el-table td {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__wrapper {
|
|
|
+ >>> .el-form-item__content {
|
|
|
+ // width: 400px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ z-index: 99;
|
|
|
+ padding: 5px 0;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
tengmingxue