Merge branch 'master-v32-lushangqing' into 'master'

【#1162】 变更负责人相关业务-主页更改为component，表格组件增加树结构配置 #4



See merge request !623

 <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() {

@@ -4,7 +4,8 @@
             <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                 <el-tab-pane v-for="(item,index) in tabData" :key="index" :label="item.ddicName" :name="item.ddicCode">
 
-                    <div class="table-container" v-if="item.ddicCode=='resourcePer'">
+                    <!--<div class="table-container" v-if="item.ddicCode=='resourcePer'">
+
                         <ResourcePer></ResourcePer>
                     </div>
                     <div class="table-container" v-else-if="item.ddicCode=='resourceLeader'">
@@ -34,8 +35,10 @@
                     <div class="table-container" v-else-if="item.ddicCode=='fileManagePer'">
                         <FileManagePer></FileManagePer>
                     </div>
-                    <div class="table-container" v-else>暂无数据</div>
+                    <div class="table-container" v-else>暂无数据</div>-->
                 </el-tab-pane>
+                <component  :is="activeName"  ref="roomDetail"  />
+
             </el-tabs>
 
         </el-col>

@@ -3,34 +3,34 @@ export default {
     template: '',
     components: {
         //选项卡组件
-        'ResourcePer': Vue.defineAsyncComponent(
+        'resourcePer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/resourcePer/index')
         ),
-        'ResourceLeader': Vue.defineAsyncComponent(
+        'resourceLeader': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/resourceLeader/index')
         ),
-        'ResourceTypePer': Vue.defineAsyncComponent(
+        'resourceTypePer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/resourceTypePer/index')
         ),
-        'BizPer': Vue.defineAsyncComponent(
+        'bizPer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/bizPer/index')
         ),
-        'BizLeader': Vue.defineAsyncComponent(
+        'bizLeader': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/bizLeader/index')
         ),
-        'BlarmSubPer': Vue.defineAsyncComponent(
+        'alarmSubPer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/alarmSubPer/index')
         ),
-        'BolePer': Vue.defineAsyncComponent(
+        'rolePer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/rolePer/index')
         ),
-        'TopoPer': Vue.defineAsyncComponent(
+        'topoPer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/topoPer/index')
         ),
-        'AutoPatrolPortPer': Vue.defineAsyncComponent(
+        'autoPatrolPortPer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/autoPatrolPortPer/index')
         ),
-        'FileManagePer': Vue.defineAsyncComponent(
+        'fileManagePer': Vue.defineAsyncComponent(
             () => myImport('views/batchChangeLeaders/fileManagePer/index')
         ),
     },
@@ -49,7 +49,7 @@ export default {
         //获取需变更的选项卡数据
         let getBatchChangeData=()=>{
             proxy.$http.post("/api-web/manage/ddic/findSucDdics/batch_change_leaders", {}, function (res) {
-                if (res && res.data) {
+                if (res && res.data && res.data.length>0) {
                     tabData.value = res.data.sort((a,b)=>a.ddicSort-b.ddicSort);
                     activeName.value=tabData.value[0].ddicCode;
                 }

+<el-row>
+    <el-col :span="24" class="search">
+        <div class="condition" >
+            <el-form ref=“form” style="display: flex;">
+                <el-form-item style="margin-right: 6px;margin-bottom: 10px;">
+                    <el-input  v-model="search.keyword" placeholder="请输入关键字"></el-input>
+                </el-form-item>
+                <el-form-item style="margin-right: 6px;margin-bottom: 10px;">
+                    <el-select filterable clearable  v-model="search.resType" placeholder="请选择资源类型">
+                        <el-option
+                                v-for="item in resTypeOptions"
+                                :key="item.resTypeCode"
+                                :label="item.resTypeName"
+                                :value="item.resTypeCode">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item style="margin-right: 6px;margin-bottom: 10px;">
+                    <el-button @click="getListData" type="primary">查询</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </el-col>
+</el-row>
+<el-row style="margin-bottom: 10px;">
+    <div class="flex-div-start">
+        <el-button type="primary" @click="changeCancel()" size="small">取消</el-button>
+        <el-button type="primary" @click="changeAdmin()" size="small" style="margin-left: 6px">变更</el-button>
+    </div>
+</el-row>
+<el-row class="margin-bottom-50" style="margin-top: 3px">
+    <el-col :span="24" class="table-height">
+        <cm-table-page :columns="columns"
+                       :dataList="resourceData"
+                       :total="count"
+                       :layout="'total, prev,pager,next,sizes, jumper'"
+                       :pageSize="pageSize"
+                       @loaddata="loadTableDataList"
+                       @selectionChange="selectionChange"
+                       :showIndex="true"
+                       :showSelection="true"
+                       :showBorder="true"
+                       :loading="loading"
+                       :showPage="true"
+                       :showTools="false"
+                       :height="(height - 200)">
+            <template #default="{row,prop,column}">
+                <div v-if="prop == 'paramDesc'">
+                    <el-select v-if="row.resType == 'HOST_X86SERVER'" v-model="row.showType" placeholder="">
+                        <el-option
+                                v-for="item in showTypeList"
+                                :key="item.value"
+                                :label="item.name"
+                                :value="item.value"
+                        >
+                        </el-option>
+                    </el-select>
+                </div>
+            </template>
+        </cm-table-page>
+    </el-col>
+</el-row>
+
+<ChangeUsersList :show="show" :isTwoGroup="true" :isMulti="isMulti" @hideDialog="hideDialog" @savebtn="savebtn"></ChangeUsersList>

 export default {
-    name: 'resourceTypePer',
+    name: 'resourceLeader',
     template: '',
     components: {
-
+        'ChangeUsersList': Vue.defineAsyncComponent(
+            () => myImport('views/batchChangeLeaders/changeUsersList/index')
+        ),
     },
     data() {
     },
@@ -10,11 +12,247 @@ export default {
     },
     setup: function (props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
+        //变更人员弹框
+        let show=Vue.ref(false);
+        //变更人员列表是否多选
+        let isMulti=Vue.ref(false);
+        //变更人员列表是否是两组
+        let isTwoGroup=Vue.ref(false);
+        //配置列表总数
+        let count = Vue.ref(0);
+        //列表高度
+        let height = Vue.ref(window.innerHeight);
+        //列表分页
+        let limit = Vue.ref(400);
+        //加载
+        let loading = Vue.ref(true);
+        //选中数据
+        let pitch = Vue.ref([]);
+        let showTypeList=Vue.ref([]);
+        let search = Vue.ref({
+            resType: '',
+            keyword: '',
+            page: 1,
+            limit: 20,
+        });
+        let resTypeOptions=Vue.ref([])
+        const columns = [
+            {
+                prop: 'resName',
+                label: '资源名称',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'ip',
+                label: 'IP地址',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'port',
+                label: '端口号',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'admin',
+                label: '负责人',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'resTypeName',
+                label: '资源类型',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'state',
+                label: '资源状态',
+                sortable: true,
+                align: 'center',
+                render: function (row) {
+                    switch (row.state) {
+                        case "new" :
+                            return '<span style="background-color: #eee;color:#666;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">未监控</span>'
+                        case "monitor" :
+                            return '<span style="background-color: #0BAC33;color:#fff;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">监控中</span>'
+                        case "stop" :
+                            return '<span style="background-color: #d81e06;color:#fff;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">暂停</span>'
+                        default :
+                            return '<span style="background-color: #eee;color:#666;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">未监控</span>'
+                    }
+                }
+            },
+            {
+                prop: 'paramDesc',
+                label: '展示类型',
+                sortable: true,
+                align: 'center',
+                /* render: function (row) {
+
+                 }*/
+            }
+        ];
 
+        //列表数据
+        let resourceData = Vue.ref([]);
+        //获取列表数据
+        const getListData = () => {
+            let username=proxy.$route.query.username;
+            let resName=proxy.$route.query.resName;
+            //定义列表参数
+            let getParams = {
+                resType:search.value.resType,
+                keyword:search.value.keyword,
+                resName: resName,
+                userId: username,
+                page: search.value.page,
+                limit: search.value.limit
+            };
+            proxy.$http.get("/api-web/manage/resource/getAllResByUser", getParams, function (res) {
+                if (res && res.data) {
+                    resourceData.value = res.data ? res.data : [];
+                    count.value = res.count;
+                    loading.value = false;
+                }
+            })
+        }
+        //重新加载表格数据
+        let loadTableDataList = ({page, limit}) => {
+            search.value.page=page;
+            search.value.limit=limit;
+            getListData();
+        }
+        let resIds=Vue.ref('');//选中的ids
+        //表格全选事件
+        let selectionChange = (val) => {
+            pitch.value = val;
+            let arr=[];
+            pitch.value.map(item=>{
+                arr.push(item.resId)
+            })
+            resIds.value=arr.join(",");//选中的值
+            proxy.resourceData.map((v, i) => {
+                v.checked = false;
+            });
+            let selectData = val;
+            if (selectData.length > 0) {
+                selectData.map((item, index) => {
+                    proxy.resourceData.map((v, i) => {
+                        if (item.id == v.id) {
+                            v.checked = true;
+                        }
+                    })
+                })
+            } else {
+                proxy.resourceData.map((v, i) => {
+                    v.checked = false;
+                })
+            }
+        }
+        //获取资源类型数据
+        let getResourceTypoe=()=>{
+            proxy.$http.get(`/api-web/manage/restype/list`, {}, function (res) {
+                if (res && res.data) {
+                    resTypeOptions.value=res.data
+                }
+            })
+        }
+        //获取展示类型的字典数据
+        let initShowType=()=>{
+            proxy.$http.post("/api-web/manage/ddic/findSucDdics/DETAILS_POWER", {}, function (res) {
+                if (res && res.data) {
+                    let arr=res.data;
+                    if(arr && arr.length>0){
+                        arr.map(v=>{
+                            showTypeList.value.push({
+                                name: v.ddicName
+                                ,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
+                            });
+                        })
+                    }
+
+                }
+            })
+        }
+        //批量取消负责的相关资源
+        let changeCancel = () => {
+            if(pitch.value.length<1){
+                proxy.$global.showMsg('请至少选择一项','warning');
+            }else{
+                proxy.$global.confirm("确定取消负责的相关资源？", function () {
+                    proxy.$global.showMsg('取消成功！');
+                    // proxy.$http.get(`/api-web/`, {resIds:resIds.value}, function (res) {
+                    //     if (res && res.data) {
+                    //         proxy.$global.showMsg('取消成功！');
+                    //         getListData()
+                    //     }
+                    // })
+                });
+            }
+        }
+        //变更负责人
+        let changeAdmin = () => {
+            if(pitch.value.length<1){
+                proxy.$global.showMsg('请至少选择一项','warning');
+
+            }else{
+                show.value=true;
+            }
+
+        }
+        //变更人员的弹框关闭后
+        let hideDialog =(flag)=>{
+            show.value=flag;
+            // getListData();
+        }
+        //变更人员的弹框保存后
+        let savebtn =(obj)=>{
+            show.value=false;
+            //obj.selectModel 选中的用户组（一个/主负责人) obj.selectModelSecond 辅负责人，都是数组
+            let params={
+                resIds:resIds.value,
+                selectModel:obj.selectModel,
+            }
+            // proxy.$http.get(`/api-web/`, {}, function (res) {
+            //     if (res && res.data) {
+            //         proxy.$global.showMsg('变更成功！');
+            //         getListData()
+            //     }
+            // })
+        }
         // 挂载完
         Vue.onMounted(() => {
+            initShowType();
+            getResourceTypoe();
+            getListData();
         })
         return {
+            isMulti,
+            isTwoGroup,
+            show,
+            initShowType,
+            showTypeList,
+            search,
+            resTypeOptions,
+            changeCancel,
+            count,
+            hideDialog,
+            savebtn,
+            changeAdmin,
+            getResourceTypoe,
+
+            resourceData,
+            columns,
+            height,
+            loading,
+
+            selectionChange,
+
+            getListData,
+            loadTableDataList,
 
         }
     }

 <el-row>
     <el-col :span="24" class="search">
-        <div class="condition" style="display: flex;">
+        <div class="condition" >
+            <el-form ref=“form” style="display: flex;">
                 <el-form-item style="margin-right: 6px;margin-bottom: 10px;">
                     <el-input  v-model="search.keyword" placeholder="请输入关键字"></el-input>
                 </el-form-item>
@@ -15,8 +16,9 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item style="margin-right: 6px;margin-bottom: 10px;">
-                <el-button @click="getListData">查询</el-button>
+                    <el-button @click="getListData" type="primary">查询</el-button>
                 </el-form-item>
+            </el-form>
         </div>
     </el-col>
 </el-row>

@@ -9,10 +9,6 @@ export default {
     data() {
     },
     props: {
-        parameter: {
-            type: Array,
-            default: []
-        }
     },
     setup: function (props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
@@ -94,21 +90,9 @@ export default {
                 label: '展示类型',
                 sortable: true,
                 align: 'center',
-                render: function (row) {
-                    if(row.resType == 'HOST_X86SERVER'){
-                        let span='<span>';
-                        showTypeList.value.map((v,i)=>{
-                            if(row.showType == v.value){
-                                span +=  v.name
-                            }
-                        })
-                        span+='</span>';
-                        return span;
+               /* render: function (row) {
 
-                    }else{
-                        return '';
-                    }
-                }
+                }*/
             }
         ];
 
@@ -128,7 +112,7 @@ export default {
                 limit: search.value.limit
             };
             proxy.$http.get("/api-web/manage/resource/getAllResByUser", getParams, function (res) {
-                if (res && res.success) {
+                if (res && res.data) {
                     resourceData.value = res.data ? res.data : [];
                     count.value = res.count;
                     loading.value = false;
@@ -179,7 +163,7 @@ export default {
         //获取展示类型的字典数据
         let initShowType=()=>{
             proxy.$http.post("/api-web/manage/ddic/findSucDdics/DETAILS_POWER", {}, function (res) {
-                if (res && res.success) {
+                if (res && res.data) {
                     let arr=res.data;
                     if(arr && arr.length>0){
                         arr.map(v=>{
@@ -201,7 +185,7 @@ export default {
                 proxy.$global.confirm("确定取消相关资源？", function () {
                     proxy.$global.showMsg('取消成功！');
                     // proxy.$http.get(`/api-web/`, {resIds:resIds.value}, function (res) {
-                    //     if (res && res.success) {
+                    //     if (res && res.data) {
                     //         proxy.$global.showMsg('取消成功！');
                     //         getListData()
                     //     }
@@ -233,7 +217,7 @@ export default {
                 selectModel:obj.selectModel,
             }
             // proxy.$http.get(`/api-web/`, {}, function (res) {
-            //     if (res && res.success) {
+            //     if (res && res.data) {
             //         proxy.$global.showMsg('变更成功！');
             //         getListData()
             //     }