Browse Source

Merge branch 'test' of http://106.55.241.82:3000/lzf/zhbsq-vue-web into test

gks 1 year ago
parent
commit
9e85ba0b33
2 changed files with 96 additions and 19 deletions
  1. 86 0
      src/components/selectTree/index.vue
  2. 10 19
      src/views/GARDENBASEDATA/index.vue

+ 86 - 0
src/components/selectTree/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <el-select
+        filterable
+        v-model="modelValue"
+        :placeholder="placeholder"
+        ref="selectUpResId"
+      >
+      <el-option
+        :value="modelValue" 
+        style="overflow: auto; height: 100%"
+        hidden
+        />
+      <el-tree
+        :data="dataList"
+        :props="defaultProps"
+        :node-key="nodeKey"
+        :expand-on-click-node="expandNode" 
+        :check-on-click-node="checkNode" 
+        check-strictly
+        @node-click="handleNodeClick"
+      />
+    </el-select>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            form: {
+               label: '',
+               id: ''
+             },
+             dataList:[]
+        }
+      
+    },
+    props: {
+        param: {
+          type: Array,
+          required: true
+        },
+        placeholder: {
+            type: String,
+            default: '请选择'
+        },
+        formatId: {
+            type: String,
+            default: 'deptId'
+        },
+        defaultProps: {
+            type: Object,
+            default: () => {
+                return {
+                    children: "children",
+                    label: "deptName"
+                }
+             }
+        },
+        nodeKey: {
+            type: String,
+            default: 'deptId'
+        },
+        expandNode: {
+            type: Boolean,
+            default: false
+        },
+        checkNode: {
+            type: Boolean,
+            default: true
+        },
+        modelValue: {
+            type: String,
+            default: ''
+        }
+    },
+    created() {
+        this.dataList = this.handleTree(this.param, this.formatId);
+    },
+    methods: {
+        handleNodeClick(data) {
+          this.$emit('setNodeValue', data)
+          this.$refs.selectUpResId.blur()
+        }
+    }
+}
+</script>

+ 10 - 19
src/views/GARDENBASEDATA/index.vue

@@ -217,20 +217,8 @@
               </el-col>
               <el-col :span="12">
                 <el-form-item label="部门" prop="deptName">
-                  <el-select
-                    filterable
-                    v-model="form.deptName"
-                    @change="deptSelect"
-                    placeholder="请选择部门"
-                  >
-                    <el-option
-                      v-for="(item, index) in detpList"
-                      :key="index"
-                      :label="item.deptName"
-                      :value="index"
-                    >
-                    </el-option>
-                  </el-select>
+                  <!-- 树状结构组件引用 -->
+                  <select-tree :param="detpList" :placeholder="'请选择部门'" :modelValue="form.deptName" @setNodeValue="handleNodeClick" />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -498,16 +486,18 @@ import {
   updateGARDENBASEDATA,
   getEnterprise,
 } from "@/api/portal/GARDENBASEDATA/GARDENBASEDATA";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import selectTree from '@/components/selectTree'
 
 export default {
   name: "GARDENBASEDATA",
+  components: { selectTree },
   data() {
     return {
       // 新增标签索引
       tabMsg: "basicMsg",
       // 部门列表
       detpList: [],
-
       // 根路径
       baseURL: process.env.VUE_APP_BASE_API,
       // 遮罩层
@@ -690,16 +680,17 @@ export default {
   created() {
     this.getList();
     getEnterprise().then((res) => {
-      this.detpList = res.data;
+      this.detpList = res.data
+      
     });
   },
   methods: {
     changeIsShowStatus(val) {
       this.isShowStatus = val;
     },
-    deptSelect(val) {
-      this.form.deptId = this.detpList[val].deptId;
-      this.form.deptName = this.detpList[val].deptName;
+    handleNodeClick(data) {
+      this.$set(this.form, 'deptId', data.deptId)
+      this.$set(this.form, 'deptName', data.deptName)
     },
     setUpTimeSelect(val) {
       this.form.clrq = val;