index.vue 8.64 KB
<template>
    <div>
        <el-tabs v-model="tabName" @tab-click="handleClick">
            <el-tab-pane label="宗地合并" name="zd">
                <div class="main">
                    <div class="header">
                        <span>合并后项目名称:</span>
                        <el-input></el-input>

                        <el-button type="primary" @click="newAdd">新增</el-button>

                        <el-button type="primary">保存</el-button>
                    </div>

                    <table border="1">
                        <tr>
                            <td>序号</td>
                            <td>宗地代码</td>
                            <td>不动产单元号</td>
                            <td>项目名称</td>
                            <td>不动产权证号</td>
                            <td>权利人</td>
                            <td>坐落</td>
                        </tr>
                        <tr v-if="bgqData.length==0">
                            <td colspan="7">
                                <span class="noData">暂无数据</span>
                            </td>
                        </tr>
                        <tr v-else v-for="(item,index) in bgqData" :key="index">
                            <td>{{index+1}}</td>
                            <td><input type="text" class="formInput" v-model="item.zddm" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.bdcdyh" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.xmmc" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.bdcqzh" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.qlr" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.zl" readonly="readonly"/></td>
                        </tr>
                    </table>
                    <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible"
                                @close="close"></query-data>
                </div>
            </el-tab-pane>
            <el-tab-pane label="多幢合并" name="dz">
                <div class="main">
                    <div class="header">
                        <span>合并后项目名称:</span>
                        <el-input></el-input>

                        <el-button type="primary" @click="newAdd">新增</el-button>

                        <el-button type="primary">保存</el-button>
                    </div>

                    <table border="1">
                        <tr>
                            <td>序号</td>
                            <td>宗地代码</td>
                            <td>不动产单元号</td>
                            <td>项目名称</td>
                            <td>不动产权证号</td>
                            <td>权利人</td>
                            <td>坐落</td>
                        </tr>
                        <tr v-if="bgqData.length==0">
                            <td colspan="7">
                                <span class="noData">暂无数据</span>
                            </td>
                        </tr>
                        <tr v-else v-for="(item,index) in bgqData" :key="index">
                            <td>{{index+1}}</td>
                            <td><input type="text" class="formInput" v-model="item.zddm" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.bdcdyh" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.xmmc" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.bdcqzh" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.qlr" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.zl" readonly="readonly"/></td>
                        </tr>
                    </table>
                    <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible"
                                @close="close"></query-data>
                </div>
            </el-tab-pane>
            <el-tab-pane label="户合并" name="h">
                <div class="main">
                    <div class="header">
                        <span>合并后项目名称:</span>
                        <el-input></el-input>

                        <el-button type="primary" @click="newAdd">新增</el-button>

                        <el-button type="primary">保存</el-button>
                    </div>

                    <table border="1">
                        <tr>
                            <td>序号</td>
                            <td>宗地代码</td>
                            <td>不动产单元号</td>
                            <td>项目名称</td>
                            <td>不动产权证号</td>
                            <td>权利人</td>
                            <td>坐落</td>
                        </tr>
                        <tr v-if="bgqData.length==0">
                            <td colspan="7">
                                <span class="noData">暂无数据</span>
                            </td>
                        </tr>
                        <tr v-else v-for="(item,index) in bgqData" :key="index">
                            <td>{{index+1}}</td>
                            <td><input type="text" class="formInput" v-model="item.zddm" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.bdcdyh" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.xmmc" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.bdcqzh" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.qlr" readonly="readonly"/></td>
                            <td><input type="text" class="formInput" v-model="item.zl" readonly="readonly"/></td>
                        </tr>
                    </table>
                    <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible"
                                @close="close"></query-data>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import QueryData from './../../../../components/queryData/queryData'

    export default {
        name: "",
        components: {QueryData},
        props: {},
        data() {
            return {
                tabName: 'zd',
                centerDialogVisible: false,
                bgqData: []
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            close: function () {
                this.centerDialogVisible = false;
            },
            newAdd: function () {
                this.centerDialogVisible = true;
            },
            addData: function (val) {
                this.centerDialogVisible = false;
                this.bgqData.push(val)
            },
            getData: function (data) {
                this.bgqData.push(data)
            },
        },
        computed: {},
        watch: {},
    }
</script>
<style scoped lang="less">
    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 80%;
        .header {
            display: flex;
            justify-items: left;
            span {
                width: 130px;
                line-height: 40px;
            }
            .el-input {
                width: 200px;
                margin-right: 20px;
            }
        }

        table {
            margin-top: 10px;
            background-color: #fff;
            font-size: 14px;
            width: 100%;

            .formInput {
                margin: 0;
                height: 36px;
                outline: none;
                border: none;
                color: #606764;
                overflow: visible;
                text-align: center;
                cursor: text;
            }
        }

        td {
            text-align: center;
            height: 36px;
            min-width: 50px;
        }

        table:hover {
            cursor: pointer;
        }

        .noData {
            color: #b2b2b2;
        }
    }
</style>