【无】 【组件】Vue组件开发：文本框下拉树展示菜单--对比分析保存选择菜单\设计器新增选择菜单

+<el-tree-select
+        :filterable="filterable"
+        :size="$global.elementConfig.size.input"
+        node-key="nodeKey"
+        :placeholder="placeholderText"
+        :props="defaultProps"
+        v-model="value"
+        :data="data"
+        @change="change"
+        check-strictly
+        :render-after-expand="false"
+>
+    <template #default="{ node, data }">
+<!--        //lsq 菜单类型，1：监控菜单，2：巡检菜单，3：个人工作台，4：系统菜单，5：跳转菜单，6：报表菜单 可以删除和编辑 2022-08-26-->
+        <el-tag v-if="isTag" style="height: 18px;margin-right:6px;">
+            {{getTypeName(data.type)}}</el-tag>
+        <span>{{ node.label }}</span>
+    </template>
+</el-tree-select>

+/**
+ * 下拉树组件
+ */
+export default {
+    name: 'treeSelect',
+    template: '',
+    components: {},
+    props: {
+
+        // 选中的值
+        value: {
+            type: String,
+            default: ''
+        },
+        // 数据
+        data: {
+            type: Array,
+            default: []
+        },
+        //显示的提示语
+        placeholderText:{
+            type: String,
+            default: '请选择'
+        },
+        //指定标签，子树节点
+        defaultProps:{
+            type:Object,
+            default:{
+                children: 'subMenus',
+                label: 'name',
+                value: 'id'
+            }
+        },
+        //唯一标识
+        nodeKey:{
+            type: String,
+            default: 'id'
+        },
+        //是否有标签
+        isTag:{
+            type:Boolean,
+            default:false
+        },
+        //是否可搜索
+        filterable:{
+            type:Boolean,
+            default:false
+        }
+
+    },
+    data() {
+        return {}
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        let data=Vue.ref([]);
+        let change=(val)=>{
+            emit("changeSelect",val)
+        }
+        //获取菜单类型
+        let getTypeName=(type)=>{
+            switch (type) {
+                case 1:
+                    return '监控菜单';
+                case 2:
+                    return '巡检菜单';
+                case 3:
+                    return '个人工作台';
+                case 4:
+                    return '系统菜单';
+                case 5:
+                    return '跳转菜单';
+                case 6:
+                    return '报表菜单';
+                case 7:
+                    return '资产菜单';
+                default:
+                    return '';
+            }
+        }
+        let init=()=>{
+            //lsq 菜单树数据 2022-09-05
+            proxy.$http.get(`/api-user/menus/current`, {type: 1}, function (res) {
+                if(res && res.data){
+                    data.value = res.data;
+                }
+            })
+        }
+        // 监听编辑状态
+        Vue.watch(() => props.value, (newValue, oldVlaue) => {
+            // 编辑
+        });
+        // 挂载完
+        Vue.onMounted(() => {
+            init()
+        })
+        return {
+            data,
+            change,
+            getTypeName,
+            init
+        }
+    }
+}

@@ -103,21 +103,10 @@
 
 
             <el-form-item label="父菜单" prop="menuPid" v-if="ajConfigFrom.type==0">
-                <el-select :reserve-keyword="false"
-                           :size="$global.elementConfig.size.input"
-                           allow-create
-                           default-first-option
-                           filterable
-                           placeholder="请选择"
-                           style="width: 100%;" v-model="ajConfigFrom.menuPid">
-                    <el-option
-                            :disabled="item.disabled"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                            v-for="item in menuOptions">
-                    </el-option>
-                </el-select>
+                <!--lsq 引入菜单树公共组件 2022-09-05-->
+                <cm-tree-select-menu style="width: 80%"  @changeSelect="dataFilter" :filterable="true"
+                                :value="ajConfigFrom.menuPid" :placeholderText="'请选择菜单'"  :isTag="true"></cm-tree-select-menu>
+
             </el-form-item>
 
             <el-form-item label="菜单名称" prop="menuName" v-if="ajConfigFrom.type==0">

@@ -206,8 +206,6 @@ export default {
         let radio = Vue.ref(0);
         //下拉框
         let options = Vue.ref([]);
-        //菜单下拉框
-        let menuOptions = Vue.ref([]);
         let search = Vue.ref({
             keyword: '',
             type: '',
@@ -250,7 +248,6 @@ export default {
             clearForm();
             cacheVisible.value = true;
             pageList();
-            menuList();
 
         }
         //新增或修改aj配置信息
@@ -329,7 +326,6 @@ export default {
             cacheVisible.value = true;
             disabled.value = true;
             pageList();
-            menuList();
         }
 
         //预览
@@ -357,21 +353,6 @@ export default {
             })
         }
 
-        //菜单
-        let menuList = () => {
-            proxy.$http.get(`/api-user/menus/findAlls`, null, function (res) {
-                if (res && res.count > 0) {
-                    let params = res.data;
-                    params.forEach(function (e) {
-                        let menu = {}
-                        menu.label = e.name;
-                        menu.value = e.id;
-                        menuOptions.value.push(menu)
-                    });
-                }
-            })
-
-        }
         //AJ设计登录
         let handleView = () => {
             window.open(sessionStorage.getItem("ajWeb") + '/#/login?access_token=' + localStorage.getItem("access_token"));
@@ -456,7 +437,10 @@ export default {
                 ddicOS.value = res.data;
             }
         });
-
+        //lsq 菜单树change事件
+        let dataFilter = (val) => {
+            ajConfigFrom.value.menuPid = val;
+        }
         return {
             ddicProvider,
             ddicOS,
@@ -484,8 +468,6 @@ export default {
             pageList,
             radio,
             options,
-            menuList,
-            menuOptions,
             getResType,
             configs,
             typeOptions,
@@ -494,7 +476,8 @@ export default {
             butColumns,
             detailColumns,
             couponSelected,
-            disabled
+            disabled,
+            dataFilter
         }
     }
 

@@ -152,10 +152,12 @@
             </div>
             <div style="padding: 3px 10px 3px 39px" v-if="!isAdd ">
                 <span class="saab"> 菜单：</span>
-                <el-select :size="$global.elementConfig.size.input" @change="dataFilter" filterable
+               <!-- <el-select :size="$global.elementConfig.size.input" @change="dataFilter" filterable
                            placeholder="请选择菜单" style="width: 80%" v-model="form.addFirstPId">
                     <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in firstMenu"/>
-                </el-select>
+                </el-select>-->
+                <cm-tree-select-menu style="width: 80%" :size="$global.elementConfig.size.input"  @changeSelect="dataFilter"
+                                :value="form.addFirstPId" :placeholderText="'请选择菜单'"  :isTag="true"></cm-tree-select-menu>
             </div>
             <div style="padding: 3px 10px;" v-if="!isAdd ">
                 <span class="saab"> 场景分类：</span>

@@ -159,7 +159,7 @@ export default {
         let countFirst = Vue.ref(0);
 
         let form = Vue.ref({
-            addFirstPId: '',
+            addFirstPId: '100130900',
             parentId: '',
             parentName: '',
             desc: '',
@@ -305,14 +305,15 @@ export default {
 
         //根菜单选择事件
         let dataFilter = (val) => {
+            form.value.addFirstPId=val;
             if (val) { //val存在
-                this.options = this.firstMenu.filter((item) => {
-                    if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
+                firstMenu.value.filter((item) => {
+                    if (!!~item.id.indexOf(val) || !!~item.id.toUpperCase().indexOf(val.toUpperCase())) {
                         return true
                     }
                 })
             } else { //val为空时，还原数组
-                this.options = this.firstMenu;
+                // this.options = firstMenu.value;
             }
         }
 
@@ -552,6 +553,7 @@ export default {
         let resTypeList = Vue.ref([]);
         let kpiList = Vue.ref([]);
         let busTypeList = Vue.ref([]);
+
         let init = () => {
             /*
             proxy.$http.get("/api-web/home/resType/getTree?typeParentFlag=1", {}, function(res) {
@@ -586,7 +588,7 @@ export default {
 
 
             //LH 加载新增树菜单
-            proxy.$http.get(`/api-web/ContrastAnalysis/getRootMenu`, {menuName: ''}, function (res) {
+            /*proxy.$http.get(`/api-web/ContrastAnalysis/getRootMenu`, {menuName: ''}, function (res) {
                 if (res.length > 0) {
                     firstMenu.value = res;
                     firstMenu.value.forEach(function (item, index) {
@@ -596,8 +598,8 @@ export default {
                         }
                     });
                 }
-            });
-            //LH
+            });*/
+                //LH
             setTimeout(function () {
                 let arrs = timeRangeArr.value
                 timeRangeChange(arrs[0]);
@@ -693,7 +695,7 @@ export default {
             firstMenu,//菜单
             getChartData,
             count,
-            countFirst
+            countFirst,
         }
     }
 }