index.vue 12.2 KB
<template>
    <div class="main">
        <el-form :inline="true" :model="ruleForm" ref="ruleForm" class="demo-form-inline">
            <el-form-item  prop="xzqbsm" label="行政区划">
                <el-select v-model="ruleForm.xzqbsm"  value-key="xzqbsm" placeholder="行政区" @change="changeXzq(ruleForm.xzqbsm)">
                    <el-option
                        v-for="item in xzq"
                        :key="item.bsm"
                        :label="item.mc"
                        :value="item.bsm">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="djqbsm" label="地籍区">
                <el-select v-model="ruleForm.djqbsm"  placeholder="地籍区" @change="changeDjq(ruleForm.djqbsm)">
                    <el-option
                        v-for="item in djq"
                        :key="item.bsm"
                        :label="item.mc"
                        :value="item.bsm">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="djzqbsm"  label="地籍子区">
                <el-select v-model="ruleForm.djzqbsm"  placeholder="地籍子区">
                    <el-option
                        v-for="item in djzq"
                        :key="item.bsm"
                        :label="item.mc"
                        :value="item.bsm">
                    </el-option>
                </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="所有权类型" class="w100"  prop="syqlx">
                <el-select
                    v-model="ruleForm.syqlx"
                    placeholder="所有权类型"
                >
                    <el-option
                        v-for="item in syqlx"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="特征码" class="w100"  prop="zdtzm">
                <el-select
                    v-model="ruleForm.tzm"
                    placeholder="宗地特征码"
                >
                    <el-option
                        v-for="item in $store.state.zdtzmList"
                        :key="item.bsm"
                        :label="item.mc"
                        :value="item.dm"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="ml85">
                <el-button type="primary" @click="getData" icon="el-icon-search">查询</el-button>
                <el-button type="warning" style="margin-left:50px" @click="reset" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="edit">
            <el-button type="success" @click="egitJzdm">修改</el-button>
        </div>
        <div class="log-table">
            <el-table :data="tableData" :height="tableHeight"  :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column type="index" width="80" align="center" label="序号">
                </el-table-column>
                <el-table-column prop="xzq" align="center" label="行政区">
                </el-table-column>
                <el-table-column prop="djq" align="center" label="地籍区">
                </el-table-column>
                <el-table-column prop="djzq" align="center" label="地籍子区">
                </el-table-column>
                <el-table-column prop="syqlx" align="center" label="所有权类型">
                </el-table-column>
                <el-table-column prop="tzm" align="center" label="特征码">
                </el-table-column>
                <el-table-column prop="dpdm" align="center" label="底盘代码">
                </el-table-column>
                <el-table-column prop="maxsxh" align="center" label="基准代码">
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next,total" :total="total"
                           :current-page="pageNo"       :page-size="pageSize"    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
		<el-dialog v-dialogDrag :close-on-click-modal="false" title="修改基准代码" :visible.sync="editVisible" width="30%" >
            <el-input placeholder="请输入基准代码" class="newJzdm" v-model="newJzdm"></el-input>
			<div class="btnGroup">
				<el-button type="primary" @click="saveInfo">确定</el-button>
				<el-button type="primary" @click="editVisible = false"
					>取消</el-button
				>
			</div>
		</el-dialog>
    </div>
</template>

<script>
    import { getCodeSection,batchUpdateSectionCode } from "@api/manage";
    import {
        getAllList,
        getListByXzqbsm,
        getListByPbsm,
    } from "@api/common";
    export default {
        name: "index",
        data(){
            return{
                tableData:[
                    {
                        xzq:'灞桥区',
                        djq:'灞地籍',
                        djzq:'灞地籍2',
                        syqlx:'国家所有',
                        tzm:'集体土地所有权宗地',
                        dpdm:'23131',
                        maxsxh:'1231111',
                    }
                ],
                total: 0,
                pageNo: 1,
                pageSize: 15,
                tableHeight: 0,
                xzq: [],
                djq: [],
                djzq: [],
                ruleForm:{
                    xzqbsm: "",
                    djqbsm: "",
                    djzqbsm: "",
                    syqlx: "G",
                    tzm: "",
                },
                syqlx: [
                    {
                        label: "国家所有",
                        value: "G",
                    },
                    {
                        label: "集体所有",
                        value: "J",
                    },
                    {
                        label: "土地所有权未确定或有争议",
                        value: "Z",
                    },
                ],
                editVisible:false,
                newJzdm:'',
                multipleSelection:[]
            }
        },
        methods:{
            //数据查询
            getData(){
                getCodeSection(this.ruleForm).then((res)=>{
                    if(res.code === 200){
                        this.tableData = res.result;
                    }
                })
            },
            //条件重置
            reset(){
                this.ruleFor = {
                    xzqbsm: "",
                    djqbsm: "",
                    djzqbsm: "",
                    syqlx: "G",
                    tzm: "",
                }
            },
            //获取行政区划数据
            getXzqList() {
                getAllList()
                    .then((res) => {
                        console.log(res.result);
                        this.xzq = res.result;
                        this.$store.state.xzqList = res.result;
                        this.ruleForm.xzqbsm = res.result[0].bsm;
                    })
                    .catch((error) => {});
            },
            //分页按钮
            handleCurrentChange(val) {
                this.pageNo = val;
                this.getData();
            },
            //选择行政区
            changeXzq(id) {
                this.djq = [];
                this.djzq = [];
                this.ruleForm.djqbsm = "";
                this.ruleForm.djzqbsm = "";
                getListByXzqbsm(id)
                    .then((res) => {
                        if (res.result == null) {
                            this.djq = null;
                        } else {
                            this.djq = res.result;
                            this.$store.state.djqList = res.result;
                        }
                    })
                    .catch((error) => {});
            },
            //选择地籍区
            changeDjq(item) {
                this.djzq = [];
                this.ruleForm.djzqbsm = "";
                if (item == null) {
                    console.log("llllllllllasdas");
                } else {
                    console.log(item);
                    getListByPbsm(item)
                        .then((res) => {
                            console.log(res.result);
                            if (res.result == null) {
                                this.djzq = null;
                            } else {
                                this.djzq = res.result;
                                this.$store.state.djzqList = res.result;
                            }
                        })
                        .catch((error) => {});
                }
            },
            //表格单双行
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex % 2 !== 0) {
                    return "even-row";
                } else {
                    return "";
                }
            },
            //修改基准代码
            egitJzdm(){
                if (this.multipleSelection.length > 0) {
                    this.editVisible =  true;
                }else{
					this.$message({
						message: "请至少选择一条记录后重试",
						type: "warning",
					});
                }
            },
            //确定修改
            saveInfo(){
                let bsms = [];
                for(let i = 0;i<this.multipleSelection.length;i++){
                    bsms.push(this.multipleSelection[i].bsm);
                }
                let data = {
                    bsms:bsms,
                    newJzdm:this.newJzdm
                };
                batchUpdateSectionCode(data).then((res)=>{
                    if(res.code === 200){
                        this.$message.success("修改完成")
                    }else {
                        this.$message.warning(res.message);
                    }
                })
            },
            //多选
            handleSelectionChange(val){
                this.multipleSelection = val;
            }
        },
        mounted() {
		    this.getXzqList();
            this.getData();
		    this.$nextTick(() => {
                this.ruleForm.tzm = this.$store.state.zdtzmList[0].dm;
			    this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 382;
            })
        }
    }
</script>

<style scoped  lang="less">
    .el-form{
        width: 100%;
        border: 1px solid #E6E6E6;
        background-color: white;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px 15px;
        /deep/.el-form-item__label{
            width: 100px;
        }
        /deep/ .el-form-item__content{
            width: 300px;
            .el-select{
                width: 100%;
            }
        }
    }
    .edit{
        margin-top: 10px;
        overflow: hidden;
        .el-button{
            float: right;
        }
    }
    .log-content{
        width: 100%;
        /*border: 1px solid red;*/
    }
    .log-search{
        width: 100%;
        border: 1px solid #E6E6E6;
        height: 80px;
        background-color: white;
        box-sizing: border-box;
        padding: 20px 15px;
    }
    .log-table{
        margin-top: 10px;
        width: 100%;
        box-shadow: 0 2px 15px 1px rgba(49, 132, 245, 0.1);
    }
    .el-button {
        width: 100px;
        margin-left: 15px;
    }

    ul{
        list-style-type: circle;
    }
    li{
        display:block;
        margin:10px;
    }

    .pagination {
        padding: 18px 0;
    }
    .ml85{
        margin-left: 86px;
    }
    .newJzdm{
        display: block;
        width: 300px;
        margin: 50px auto ;
    }
    .btnGroup{
        margin: 20px auto 0;
        width: 230px;
    }
    .el-button {
        margin-left: 12px;
    }

</style>