cmdb数据同步树结构资源接口调用，表格组件增加展开功能

@@ -7,6 +7,8 @@
 @import "../css/alarmsClear.css";
 /*日志详情*/
 @import "../css/esData.css";
+/*cmdb数据同步*/
+@import "../css/cmdbdatasync.css";
 
 .d-flex {
     display: flex;

+.protocol-btn{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.icon-add{
+    margin-left:10px;
+    width:20px;
+    height:20px;
+    background: #1e9fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+.protocol-btn i{
+    color:#ffffff;
+}
\ No newline at end of file

 <div >
     <!--  表格-->
     <el-table :border="showBorder" v-loading="loading" :size="size" ref="multipleTable"  @selection-change="handleSelectionChange"  :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
-              style="width: 100%;margin: 0px 0px; font-size:13.5px;">
+              style="width: 100%;margin: 0px 0px; font-size:13.5px;" :row-key="getRowKeys" :expand-row-keys="expands">
+
+        <el-table-column type="expand" v-if="showExpand">
+            <template #default="scope">
+                <slot name="expand"  :scope="scope" >
+
+                </slot>
+            </template>
+        </el-table-column>
         <el-table-column v-if="showSelection && columns.length > 0" align="center"  type="selection" width="55" />
         <el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
 

@@ -87,6 +87,21 @@ export default {
         multipleSelection:{
             type:Array,
             default:[]
+        },
+        //展开行
+        showExpand:{
+            type: Boolean,
+            default: false
+        },
+        //行数据的key
+        getRowKeys:{
+            type: String,
+            default: 'id'
+        },
+        //是否默认展开所有行
+        expands:{
+            type: Array,
+            default: []
         }
     },
     data() {

 <div class="cmdbdatasyncEdit-container" style="min-height: 500px;">
+
     <div class="search-table">
-        <cm-table-page :columns="columns" :dataList="editTbaleData"
+        <cm-table-page :columns="tableData.columns" :dataList="editTbaleData"
                        :showIndex="true"
                        @loaddata = "loaddata"
                        :showSelection="false"
@@ -8,8 +9,14 @@
                        :loading="false"
                        :pageSize="pageSize"
                        :showPage="false"
-                       :showTools="false"
+                       :showTools="true"
+                       :showExpand="true"
+                       :getRowKeys="tableData.getRowKeys"
+                       :expands="tableData.expands"
                        :height="height - 110">
+            <template #expand="{scope}">
+                aaa{{scope.row.expand}}
+            </template>
             <template #default="{row,prop,column}">
                 <div>
                     <el-input v-model="row[prop]" placeholder="Please input" />
@@ -22,6 +29,11 @@
                     </el-select>-->
                 </div>
             </template>
+            <template #tools="{scope}">
+                <div class="protocol-btn">
+                    <span class="icon-add" @click="addProtocol" title="协议参数"><i class="el-icon-plus"></i></span>
+                </div>
+            </template>
         </cm-table-page>
     </div>
     <div class="save-button" style="text-align:right;">

@@ -14,7 +14,9 @@ export default {
         const {proxy} = Vue.getCurrentInstance();
         let height = Vue.ref(window.innerHeight);
         let editTbaleData=Vue.ref(props.tableData.dataList);
-        let columns=Vue.ref(props.tableData.columns)
+        // let columns=Vue.ref(props.tableData.columns);
+        // let getRowKeys=Vue.ref(props.tableData.getRowKeys);
+        // let expands=Vue.ref(props.tableData.expands);
         //保存编辑
         let saveEdit=()=>{
             //保存接口 todo
@@ -24,6 +26,33 @@ export default {
             }
             emit("callbackedit",param)
         }
+        //添加协议
+        let addProtocol=()=>{
+            proxy.$global.layer.open({
+                title:'资源协议',
+                id:'resManageChooseProtocolHtml',
+                type:1,
+                area: ['80%', '90%'],
+                btn:['确定','取消'],
+                scrollbar:true,
+                success: function(){
+                    proxy.$global.layui.view('resManageChooseProtocolHtml').render('/baseconfig/protocol/index',{'hasParam':'1'});
+                },
+                yes:function (index,layero) {
+                    var data = proxy.$global.layui.table.checkStatus('protocol_table').data;
+                    formData.ip = $('#resManageAddForm').find('input[name="ip"]').val();
+                    formData.port = $('#resManageAddForm').find('input[name="port"]').val();
+                    if(data.length>0){
+                        createProtocolDom(data,false);
+                        form.render()
+                        layer.close(index);
+                    }else{
+                        layer.msg("无选中的数据或当",{ offset: '15px' , icon: 7 , time: 2000 })
+                        return false;
+                    }
+                }
+            })
+        }
         // 挂载完
         Vue.onMounted(() => {
         })
@@ -32,8 +61,11 @@ export default {
         return {
             height,
             editTbaleData,
-            columns,
-            saveEdit
+            // columns,
+            saveEdit,
+            addProtocol,
+            // getRowKeys,
+            // expands
         }
     }
 

@@ -10,56 +10,19 @@ export default {
     setup(props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
         let height = Vue.ref(window.innerHeight);
-        let treeData=Vue.ref([
-            {
-                label: '计算机设备计算机设备计算机设备计算机设备计算机设备',
-                id:1,
-                children: [
-                    {
-                        label: '小型机分区',
-                        id:"1-1",
-                    },
-                    {
-                        label: 'PC服务器',
-                        id:'1-2',
-                        children:[]
-                    },
-                ],
-            },
-            {
-                label: '虚拟化',
-                id:2,
-                children: [
-                    {
-                        label: 'VMWARE',
-                        id:'2-1',
-                        children: [
-                            {
-                                label: 'vm资源池',
-                                id:"2-1-1",
-                                children: []
-                            },
-                        ],
-                    },
-                    {
-                        label: '虚拟机',
-                        id:"2-2",
-                    },
-                ],
-            },
-            {
-                label: '存储设备',
-                id:'3',
-                children: [
-                    {
-                        label: '共享存储',
-                        id:'3-1',
-                    },
-
-                ],
-            }]) // 所有的树结点
+        let defaultProps=Vue.ref({
+            children: 'children',
+            label: 'title'
+        })
+        let treeData=Vue.ref([]) // 所有的树结点
+        let defaultNode=Vue.ref(true);//默认节点
+        let resType=Vue.ref('');//选中的树节点值
         let handleNodeClick=(data,node)=>{
             //点击树节点，根据某个字段获取列表 todo
+            console.log("*(*(*(*",data,node)
+            proxy.$global.showMsg(data.id,'warning')
+            resType.value=data.value;
+            defaultNode.value=false;
             getDataList();
         }
 
@@ -72,8 +35,10 @@ export default {
         let tableData = Vue.ref({
             count:0,
             dataList: [{
+                id:1,
                 resName:'资源一'
             },{
+                id:2,
                 resName:'资源34'
             }],
             columns: [
@@ -140,6 +105,14 @@ export default {
             hideDialog(true);
             dialog.value.tableData.dataList= row;
             dialog.value.tableData.columns=tableData.value.columns;
+            dialog.value.tableData.getRowKeys= 'id';
+            let arr=[];
+            row.map(item=>{
+                arr.push(item.id)
+            })
+            //默认展开第一行
+            dialog.value.tableData.expands= [arr[0]];
+
         }
         //编辑
         let handleEdit = (flag,row) =>{
@@ -179,9 +152,9 @@ export default {
             proxy.$global.openDetail(resId, resType, proxy);
 
         }
-        //获取资源树数据 todo
+        //获取资源树数据
         let getResData=()=>{
-            proxy.$http.post(`/api-web/`, {}, function (res) {
+            proxy.$http.post(`/api-web/attribute/getTree`, {}, function (res) {
                 if (res && res.data) {
                     treeData.value = res.data;
                 }
@@ -189,7 +162,11 @@ export default {
         }
         // 获取列表 todo
         let getDataList = () => {
+            if(defaultNode.value){
+                resType.value=treeData.value[0].children[0].value;
+            }
             let params={
+                resType:resType.value,
                 pageNum: search.value.pageNum,
                 pageSize: search.value.pageSize,
                 keyword:search.value.keyword
@@ -208,12 +185,14 @@ export default {
         // 挂载完
         Vue.onMounted(() => {
             // getDataList();//获取列表数据
-            // getResData();//获取资源树数据
+            getResData();//获取资源树数据
         })
 
 
         return {
+            defaultProps,
             treeData,
+            defaultNode,
             handleNodeClick,
             getResData,
             height,
@@ -230,6 +209,7 @@ export default {
             handleRefresh,
             callbackedit,
             goResDetail,
+            resType
         }
     }