基本信息组件拆分

src/views/farmlandProtection/components/jbxx.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="ServiceCon">
+      <div class="detailList">
+        <el-descriptions :column="1" border>
+          <el-descriptions-item
+            label="图斑编号"
+            label-class-name="my-label"
+            content-class-name="my-content"
+            >{{ detailObj.tbbh }}</el-descriptions-item
+          >
+          <el-descriptions-item
+            label="行政名称"
+            content-class-name="my-content"
+            :span="3"
+            >{{ detailObj.xzmc }}</el-descriptions-item
+          >
+          <el-descriptions-item label="前时相">{{
+            detailObj.qsx
+          }}</el-descriptions-item>
+          <el-descriptions-item label="后时项">{{
+            detailObj.hsx
+          }}</el-descriptions-item>
+          <el-descriptions-item label="前类型">{{
+            detailObj.qxl
+          }}</el-descriptions-item>
+          <el-descriptions-item label="后类型">{{
+            detailObj.hlx
+          }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+    detailObj: {
+      type: Object,
+    },
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+  },
+  watch: {},
+  watch: {},
+  beforeDestroy() {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-descriptions-item__label.is-bordered-label {
+  color: #fff;
+  background-color: transparent;
+}
+/deep/ .el-descriptions__body {
+  color: #fff;
+  background-color: transparent;
+}
+
+</style>

src/views/farmlandProtection/components/tbDetails.vue

@@ -8,36 +8,7 @@
       <div class="ServiceCon">
         <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
           <el-tab-pane label="基本信息" name="jbxx">
-            <div class="ServiceCon">
-              <div class="detailList">
-                <el-descriptions :column="1" border>
-                  <el-descriptions-item
-                    label="图斑编号"
-                    label-class-name="my-label"
-                    content-class-name="my-content"
-                    >{{ detailObj.tbbh }}</el-descriptions-item
-                  >
-                  <el-descriptions-item
-                    label="行政名称"
-                    content-class-name="my-content"
-                    :span="3"
-                    >{{ detailObj.xzmc }}</el-descriptions-item
-                  >
-                  <el-descriptions-item label="前时相">{{
-                    detailObj.qsx
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="后时项">{{
-                    detailObj.hsx
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="前类型">{{
-                    detailObj.qxl
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="后类型">{{
-                    detailObj.hlx
-                  }}</el-descriptions-item>
-                </el-descriptions>
-              </div>
-            </div>
+            <Jbxx :detailObj="detailObj"  @updateParent="changeData"></Jbxx>
           </el-tab-pane>
           <el-tab-pane label="核查信息" name="hcxx"> 核查信息 </el-tab-pane>
         </el-tabs>
@@ -47,6 +18,7 @@
 </template>
 
 <script>
+import Jbxx from "./jbxx.vue";
 export default {
   props: {
     detailObj: {
@@ -54,10 +26,11 @@ export default {
     },
   },
   components: {
-    activeTabs: "jbxx",
+    Jbxx,
   },
   data() {
     return {
+      activeTabs: "jbxx",
       templateList: [
         {
           图斑编号: 6401812024070108270002,
@@ -89,12 +62,23 @@ export default {
   //   background-color: aliceblue;
   cursor: auto;
 }
-/deep/ .el-descriptions-item__label.is-bordered-label {
-  color: #fff;
-  background-color: transparent;
+/deep/ .el-icon-close:before {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: larger;
+  font-weight: bold;
+
+  &:hover {
+    color: aqua;
+  }
+}
+
+.sm-function-module-query {
+  max-height: 800px !important;
 }
-/deep/ .el-descriptions__body {
-  color: #fff;
-  background-color: transparent;
+
+.sm-panel {
+  top: 38px;
 }
 </style>

src/views/farmlandProtection/components/tbqd.vue

@@ -104,9 +104,6 @@ export default {
   computed: {},
   mounted() {},
   methods: {
-    changeData(name, updata) {
-      this[name] = updata;
-    },
     handleClick(row) {
       console.log(row, "---");
     },

src/views/farmlandProtection/jctb/index.vue

@@ -17,12 +17,12 @@
             <Jclxqk></Jclxqk>
           </el-tab-pane>
           <el-tab-pane label="图斑清单" name="tbqd">
-            <Tbqd></Tbqd>
+            <Tbqd @updateParent="changeData"></Tbqd>
           </el-tab-pane>
         </el-tabs>
       </div>
     </div>
-    <tbDetails @updateParent="changeData" :detailObj="detailObj"></tbDetails>
+    <tbDetails @updateParent="changeData" :detailObj="detailObj" v-show="isShowTb"></tbDetails>
   </div>
 </template>