引导页提交

+import request from '@/plugin/axios'
+/**
+ * 查询所有行政区
+ */
+export function getAllList() {
+    return request({
+        url: 'system/xzq/getAllList',
+        method: 'get',
+    })
+}
+/**
+ * 跟据行政区标识码查地籍区
+ */
+export function getListByXzqbsm (xzqbsm) {
+    return request({
+        url: 'system/djq/getListByXzqbsm',
+        method: 'get',
+        params: {
+            xzqbsm
+        }
+    })
+}
+/**
+ * 跟据地籍区标识码查地籍子区
+ */
+export function getListByPbsm (pbsm) {
+    return request({
+        url: 'system/djq/getListByPbsm',
+        method: 'get',
+        params: {
+            pbsm
+        }
+    })
+}
+/**
+ * 新增宗地基本信息
+ */
+export function insertQjZdjbxx (data) {
+    return request({
+        url: 'zd/qjZdjbxx/insertQjZdjbxx',
+        method: 'post',
+        data: data,
+    })
+}
+/**
+ * 新增自然幢基本信息
+ */
+export function insertZrzjbxx (data) {
+    return request({
+        url: 'fw/qjZrz/insert',
+        method: 'post',
+        data: data,
+    })
+}
+/**
+ * 通过名称获取字典
+ */
+export function getDdicByMC (mc) {
+    return request({
+        url: 'system/dictionary/getDdicByMC',
+        method: 'get',
+        params: {
+            mc
+        }
+    })
+}
\ No newline at end of file

 <template>
-  <div class=""></div>
-</template>
+  <div>
+    <el-tabs :tab-position="tabPosition"  v-model="activeName" id="tabs" type="card" class="eltabs" @tab-click="handleClick">
+      <el-tab-pane class="eltabspane" label="宗地" name="zd" >
+
+        <el-form :inline="true" class="demo-form-inline">
+          <el-form-item label="行政区">
+            <el-select v-model="xzqValue" value-key="xzqbsm" placeholder="行政区"  @change="changeXzq(xzqValue)" style="width:130px;">
+              <el-option v-for="item in xzq"
+                         :key="item.xzqbsm"
+                         :label="item.xzqmc"
+                         :value="item.xzqbsm">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="地籍区">
+            <el-select v-model="djqValue" placeholder="地籍区" @change="changeDjq(djqValue)" style="width:130px;">
+              <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 label="地籍子区">
+            <el-select v-model="djzqValue" placeholder="地籍子区"  style="width:130px;">
+              <el-option v-for="item in djzq"
+                         :key="item.bsm"
+                         :label="item.mc"
+                         :value="item.bsm">
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+
+
+          <el-form-item label="项目名称" >
+            <el-input v-model="zdProjectName" placeholder="项目名称" style="width:400px;"></el-input>
+          </el-form-item>
+          <el-form-item label="所有权类型">
+            <el-select v-model="syqlx.value" placeholder="所有权类型" @change="changeSyqlx(syqlx.value)" style="width:400px;">
+              <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="特征码">
+            <el-select v-model="tzmCode" placeholder="地籍子区"  style="width:200px;">
+              <el-option v-for="item in zdtzm"
+                         :key="item.bsm"
+                         :label="item.mc"
+                         :value="item.bsm">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <div>
+            <el-form-item style="margin-left:300px;">
+              <el-button type="primary" >导入图形</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="newZd">创建</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary">取消</el-button>
+            </el-form-item>
+          </div>
+
+        </el-form>
+
+
+      </el-tab-pane>
+      <el-tab-pane class="eltabspane" label="宗海" name="zh">宗海</el-tab-pane>
+      <el-tab-pane class="eltabspane" label="自然幢" name="zrz">
+        <el-form :inline="true"  class="zrzProject">
+          <el-form-item label="项目名称">
+            <el-input v-model="zrzProjectName" placeholder="项目名称" style="width:400px;"></el-input>
+          </el-form-item>
 
+          <div>
+            <el-form-item style="margin-left:300px;">
+              <el-button type="primary" >导入图形</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="newZrz">创建</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane class="eltabspane" label="多幢" name="dz">多幢</el-tab-pane>
+      <el-tab-pane class="eltabspane" label="林权" name="lq">林权</el-tab-pane>
+      <el-tab-pane class="eltabspane" label="构筑物" name="gzw">构筑物</el-tab-pane>
+    </el-tabs>
+  </div>
+
+</template>
 <script>
+import{getAllList,getListByXzqbsm,getListByPbsm,insertQjZdjbxx,getDdicByMC,insertZrzjbxx} from "../../../api/panel"
 export default {
   name:"",
   components:{},
   props:{},
   data(){
     return {
+      tabPosition: 'left',
+      //默认第一个选项卡
+      activeName: "zd",
+      zdProjectName:'',
+      zrzProjectName:'',
+      tzmCode:'',
+      syqlxCode:'',
+      xzqValue:'',
+      djqValue:'',
+      djzqValue:'',
+      xzq:[],
+      djq:[],
+      djzq:[],
+      syqlx:[
+        {
+          label:"国家所有",
+          value:"G"
+        },{
+          label:"集体所有",
+          value:"J"
+        },{
+          label:"土地所有权未确定或有争议",
+          value:"Z"
+        },
+      ],
+      zdtzm:[]
     }
   },
-  created(){},
+  created(){
+    this.getXzqList();
+    this.getDdicByMC();
+  },
   mounted(){},
-  methods:{},
+  methods:{
+    handleClick(tab, event) {
+      console.log(tab, event);
+      console.log(tab.name);
+    },
+    newZd(){
+      var data = {
+        xzqbsm:this.xzqValue,
+        djqbsm:this.djqValue,
+        djzqbsm:this.djzqValue,
+        syqlxbsm:this.syqlxCode,
+        xmmc:this.zdProjectName,
+        zdtzmbsm:this.tzmCode
+      }
+      console.log(data);
+      insertQjZdjbxx(data).then((res) => {
+        console.log(res.result)
+        if(res.code=="200"){
+          this.$message({
+            message: '创建成功！',
+            type: 'success'
+          });
+          //todo 跳转到宗地基本信息内容表页面  (预留)
+
+        }else{
+          this.$message.error('创建失败！');
+        }
+      })
+      .catch((error) => {
+
+      });
+    },
+    newZrz(){
+      //todo 在新增时，如果是点击顶部新建里面的自然幢则不传zdbsm 如果是点击右键里面的添加定着物则传zdbsm
+      var data = {
+        userbsm:'',
+        xmmc:this.zrzProjectName,
+        zdbsm:''
+      }
+      console.log(data);
+      insertZrzjbxx(data).then((res) => {
+        console.log(res.result)
+        if(res.code=="200"){
+          this.$message({
+            message: '创建成功！',
+            type: 'success'
+          });
+          //todo 跳转到自然幢基本信息内容表页面  (预留)
+
+        }else{
+          this.$message.error('创建失败！');
+        }
+      })
+      .catch((error) => {
+
+      });
+    },
+    getXzqList(){
+      getAllList().then((res) => {
+        console.log(res.result)
+        this.xzq = res.result;
+      })
+          .catch((error) => {
+
+          });
+    },
+    getDdicByMC(){
+      getDdicByMC("宗地（宗海）特征码").then((res) => {
+        console.log(res.result)
+        this.zdtzm = res.result;
+
+      })
+      .catch((error) => {
+
+      });
+    },
+    changeXzq(id){
+      this.djq = [];
+      this.djzq = [];
+      this.djqValue = '';
+      this.djzqValue = '';
+      getListByXzqbsm(id).then((res) => {
+        if(res.result==null){
+          this.djq = null;
+        }else{
+          this.djq = res.result;
+
+        }
+      })
+      .catch((error) => {
+
+      });
+    },
+    changeDjq(item){
+      this.djzq = [];
+      this.djzqValue = '';
+      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;
+
+          }
+        })
+        .catch((error) => {
+
+        });
+      }
+    },
+    changeSyqlx(id){
+      this.syqlxCode = id;
+      console.log(this.syqlxCode);
+    },
+  },
   computed: {},
   watch: {},
 }
 </script>
-<style scoped  lang="less">
+<style >
+.eltabs{
+  height: 600px;width:800px;margin:80px auto;border:1px solid #666
+}
+.eltabspane{
+  height: 500px;width:660px;padding:20px;
+}
+
+#tabs .el-tabs__item {
+  font-size:18px!important;
+  color:#333;
+  width:100px;
+  height:60px;
+  line-height: 80px;
+}
+.zrzProject{
+  margin-top:80px;
+}
+
 </style>
\ No newline at end of file