well selector complete

src/api/publicUrl.js

@@ -226,5 +226,9 @@ let publicUrl = {
 	downLoadMeterExample:'/centralbase/CbPcProWellMeterTeam/downLoadMeterExample',//下载示例
 	uploadMeter:'/centralbase/CbPcProWellMeterTeam/uploadMeter',//下载示例
 
+
+	//一次性获取所有井选择信息
+	wellsTree:'data-authorize/refactor/well/navigate/auth',
+
 }
-export default publicUrl
+export default publicUrl

src/components/NewWorkPage/DvhCompareDialog.vue

@@ -1,7 +1,7 @@
 <script>
 import mockData from "@/components/NewWorkPage/data";
-import "./css/Layout.css"
-import "./css/DvhCheck.css"
+import "./css/layout.css"
+import "./css/dvh-check.css"
 
 export default {
   name: "DvhCompareDialog",

src/components/NewWorkPage/MainLayout.vue

@@ -1,5 +1,5 @@
 <script>
-import "./css/NewWorkPage.css"
+import "./css/new-work-page.css"
 import mockData from "@/components/NewWorkPage/data";
 import DvhCompareDialog from "@/components/NewWorkPage/DvhCompareDialog.vue";
 import WellSelector from "@/components/NewWorkPage/WellSelector.vue";
@@ -11,7 +11,7 @@ export default {
     return {
       //井选择器
       wellSelector: {
-        options: mockData.wellSelectorData
+        selected:''
       },
       //功图校核页面
       dvhCardCheck: {
@@ -28,7 +28,7 @@ export default {
 <template>
   <div class="main">
     <div class="header">
-     <WellSelector></WellSelector>
+     <WellSelector :selected.sync="wellSelector.selected"></WellSelector>
       <el-button type="primary" size="small">查询</el-button>
 
 

src/components/NewWorkPage/WellSelector.vue

@@ -1,12 +1,17 @@
 <script>
 import mockData from "@/components/NewWorkPage/data";
+import {postAction} from "@/api/manage";
+import publicUrl from "@/api/publicUrl";
+import "./css/custom-selector.css"
 
 export default {
   name: "WellSelector",
+  props: ['selected'],
+  emits: ["update:selected"],
   data() {
     return {
       wellSelector: {
-        selected: '',
+        selected: [],
         options: mockData.wellSelectorData
       },
     }
@@ -14,6 +19,71 @@ export default {
   methods: {
     changeSelected(node) {
       console.log(node);
+      this.$emit("update:selected", node[node.length - 1]);
+    },
+    transSelectorOptions(d, node) {
+      if (!node) node = []
+      d.forEach(item => {
+        let m = {
+          value: item.wellId ? item.wellId : item.orgId,
+          label: item.orgName ? item.orgName : item.wellCommonName,
+        }
+
+        if (item.children && item.children.length > 0) {
+          m.children = []
+          this.transSelectorOptions(item.children, m.children)
+        }
+        node.push(m)
+      })
+      return node
+    },
+    async getWellsTree() {
+      let _this = this
+      await postAction(publicUrl.wellsTree).then((res) => {
+        if (res.data.status !== 1 || res.data.data.length <= 0) {
+          console.log('没有井信息')
+          return
+        }
+        let d = res.data.data
+        _this.wellSelector.options = _this.transSelectorOptions(d, [])
+      }).catch(reason => {
+        console.log(reason);
+      })
+    },
+    searchCheckNode(wellId, node, find) {
+      if (!wellId || !node || !find) return false
+      for (let i = 0; i < node.length; i++) {
+        if (node[i].value === wellId) {
+          find.unshift(node[i].value)
+          return true
+        }
+        if (node[i].children && node[i].children.length > 0) {
+          if (this.searchCheckNode(wellId, node[i].children, find)) {
+            find.unshift(node[i].value)
+            return true
+          }
+        }
+      }
+      return false
+    },
+    manualSelectWell(wellId) {
+      let find = []
+      this.searchCheckNode(wellId, this.wellSelector.options, find, 0);
+      this.wellSelector.selected = find
+    }
+  },
+  async mounted() {
+    await this.getWellsTree()
+    this.manualSelectWell('WELLTL100000864')
+  },
+  watch: {
+    selected: {
+      handler(newVal, oldVal) {
+        let cur = ''
+        if (this.wellSelector.selected.length > 0) cur = this.wellSelector.selected[this.wellSelector.selected.length - 1]
+        if (newVal !== cur)
+          this.wellSelector.selected = this.searchCheckNode(newVal, this.wellSelector.options, [])
+      }
     }
   }
 }
@@ -22,9 +92,12 @@ export default {
 <template>
   <el-cascader
       v-model="wellSelector.selected"
-      placeholder="选择一口井"
+      class="custom-el-selector"
+      popper-class="custom-el-popper"
+      placeholder="手动选择一口井"
       separator=' > '
       clearable
+      :show-all-levels="false"
       filterable
       :options="wellSelector.options"
       :props="{ expandTrigger: 'hover' }"

src/components/NewWorkPage/css/custom-selector.css

@@ -0,0 +1,12 @@
+.custom-el-selector {
+    width: 150px;
+}
+
+.custom-el-popper .el-cascader-panel {
+    background-color: rgb(246, 244, 244);
+}
+
+.custom-el-popper .el-cascader-panel .el-cascader-node{
+    height: 26px;
+    font-size: 14px;
+}