【无】机构用户树组件 #1

+<el-tree-select
+        :filterable="filterable"
+        :size="$global.elementConfig.size.input"
+        node-key="nodeKey"
+        :placeholder="placeholderText"
+        :props="defaultProps"
+        v-model="value"
+        :data="data"
+        @change="change"
+        lazy
+        :load="load"
+        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: 'children',
+                label: 'name',
+                value: 'value'
+            }
+        },
+        //唯一标识
+        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 'org':
+                    return '部门';
+                case 'user':
+                    return '用户';
+                default:
+                    return '';
+            }
+        }
+        let init=()=>{
+            //lsq 部门数据 2022-09-05
+            proxy.$http.get(`/api-user/org/queryOrgs`, {}, function (res) {
+                if(res && res.data){
+                    data.value = res.data;
+                    data.value.map(item=>{
+                        item.type='org'
+                    })
+                }
+            })
+        }
+        let id = 0
+
+        const load = (node, resolve) => {
+            if (node.isLeaf) return resolve([])
+
+            setTimeout(() => {
+
+                proxy.$http.get(`/api-user/users/getAll`, {}, function (res) {
+                    let arr=[];
+                    if(res && res.data){
+                        arr= res.data;
+                    }
+                    if(arr.length>0){
+                        arr.map(item=>{
+                            item.name=item.nickName;
+                            item.type='user'
+                        })
+                    }
+                    resolve(arr)
+                })
+                /*resolve([
+                    {
+                        value: ++id,
+                        label: `lazy load node${id}`,
+                    },
+                    {
+                        value: ++id,
+                        label: `lazy load node${id}`,
+                        isLeaf: true,
+                    },
+                ])*/
+            }, 400)
+        }
+        // 监听编辑状态
+        Vue.watch(() => props.value, (newValue, oldVlaue) => {
+            // 编辑
+        });
+        // 挂载完
+        Vue.onMounted(() => {
+            init()
+        })
+        return {
+            data,
+            change,
+            getTypeName,
+            init,
+            load
+        }
+    }
+}

@@ -53,7 +53,9 @@ Promise.all([
         //告警通知统计信息
         .component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index')))
         //菜单下拉树
-        .component('cm-tree-select-menu', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectMenu/index')));
+        .component('cm-tree-select-menu', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectMenu/index')))
+        //机构用户下拉树
+        .component('cm-tree-select-org-user', Vue.defineAsyncComponent(() => myImport('components/common/treeSelectOrgUser/index')));
 
     // 自定义指令 授权按钮
     app.directive('permissions', {