feat: 2768 端口侦测选择资源弹出优化

@@ -85,8 +85,8 @@
                 <el-step title="配置端口" description="" />
             </el-steps>
 
-            <div  v-if="stepActive == 1" style="display: flex;justify-content: space-around;padding: 0px 25%;">
-                <el-tree-select
+            <div  v-if="stepActive == 1">
+                <!--<el-tree-select
                         v-model="portSenseConfigData"
                         :data="resTreeArr"
                         filterable
@@ -95,7 +95,48 @@
                         :render-after-expand="false"
                         :size="$global.elementConfig.size.input"
                         show-checkbox
-                        :props="typeProps"/>
+                        :props="typeProps"/>-->
+                <el-row style="margin-bottom: 5px;margin-top: 5px">
+                    <el-col :span="24">
+                        <div class="flex-div-start margin-top-bottom-10">
+                            <el-tooltip>
+                                <template #content>关键字检索包含<br/>资源名称<br/>IP地址</template>
+                                <el-input :size="$global.elementConfig.size.input"  clearable
+                                          placeholder="输入关键字"
+                                          style="width:160px;margin-left: 10px;float: left;margin-right:6px;"
+                                          v-model="uncheckedParams.keyWords"/>
+                                </el-input>
+                            </el-tooltip>
+                            <div style="margin-right:6px;">
+                                <cm-biz-type-tree-input @callback="getUncheckedBizType" clearable collapseTags multiple/>
+                            </div>
+                            <div style="margin-right:6px;">
+                                <cm-res-type-tree-input @callback="getUncheckedResType" clearable collapseTags multiple/>
+                            </div>
+                            <div class="flex-div-start" style="float: left;">
+                                <!--                                <el-button type="primary" @click="onReset()">重置</el-button>-->
+                                <el-button :size="$global.elementConfig.size.button" @click="loadResTree()" style="margin-left: 6px" type="primary">搜索
+                                </el-button>
+                            </div>
+
+                        </div>
+                    </el-col>
+                </el-row>
+                <cm-table-page :columns="uncheckedResColumns"
+                               :dataList="uncheckedResData"
+                               :height="(height - 190)"
+                               :pageSize="uncheckedParams.limit"
+                               :showBorder="true"
+                               :showIndex="true"
+                               :showPage="true"
+                               :showSelection="true"
+                               :showTools="false"
+                               :total="uncheckedResTotal"
+                               @loaddata="loadUncheckedTable"
+                               @selectionChange="uncheckedResChange">
+                    <template #default="{row,prop,column}">
+                    </template>
+                </cm-table-page>
                 <el-button style="margin-top: 12px" @click="next">下一步</el-button>
             </div>
 

@@ -247,13 +247,96 @@ export default {
             getListData({page: 1, limit: pageSize.value});
         }
 
+        let uncheckedResColumns = Vue.ref([
+            {
+                prop: 'resName',
+                label: '资源名称',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'ip',
+                label: 'ip地址',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'resTypeName',
+                label: '资源类型',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'healthDesc',
+                label: '资源状态',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'linkState',
+                label: '连接状态',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'adminName',
+                label: '负责人',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'phone',
+                label: '负责人电话',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'lastCollTime',
+                label: '最近采集时间',
+                sortable: true,
+                align: 'center',
+            }
+        ])
+        let uncheckedResData = Vue.ref([]);
+        let uncheckedResTotal = Vue.ref(0);
+        let uncheckedResChange = (val)=>{
+            portSenseConfigData.value = val.map(item=>item.resId);
+        }
+        let uncheckedParams = Vue.ref({
+            keyWords:'',
+            resTypes:[],
+            busIds:[],
+            page:1,
+            limit:20,
+        })
         const loadResTree = () => {
-            proxy.$http.get('/mj/user/selectResTreeAndSelectRes', {userId: proxy.$global.common.getUserId()}, function (res) {
+            let params = {
+                keyWords:uncheckedParams.value.keyWords,
+                resTypes:uncheckedParams.value.resTypes.join(','),
+                busIds:uncheckedParams.value.busIds.join(','),
+                page:uncheckedParams.value.page,
+                limit:uncheckedParams.value.limit,
+            }
+            proxy.$http.get('/api-web/bResourceExtendParam/addPage', params, function (res) {
                 if (res && res.success && res.data) {
-                    resTreeArr.value = res.data.options;
+                    uncheckedResData.value = res.data;
+                    uncheckedResTotal.value = res.count;
                 }
             })
         }
+        const loadUncheckedTable = ({page, limit})=>{
+            uncheckedParams.value.page = page;
+            uncheckedParams.value.limit = limit;
+            loadResTree();
+        }
+        const getUncheckedResType = (arr)=>{
+            uncheckedParams.value.resTypes = arr.map(item=>item.id)
+            loadResTree();
+        }
+        const getUncheckedBizType = (arr)=>{
+            uncheckedParams.value.busIds = arr.map(item=>item.busId)
+            loadResTree();
+        }
 
         // 挂载完
         Vue.onMounted(() => {
@@ -302,6 +385,16 @@ export default {
             title,
             portSenseConfigData,
             showPortSenseDialog,
+
+            loadResTree,
+            uncheckedParams,
+            uncheckedResColumns,
+            uncheckedResData,
+            uncheckedResTotal,
+            uncheckedResChange,
+            loadUncheckedTable,
+            getUncheckedBizType,
+            getUncheckedResType,
         }
     }
 }