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

【#1162】 变更负责人相关业务-表格树结构更改，资源类型权限页面 #5



See merge request !624

@@ -158,4 +158,11 @@ custom-class="config-dialog"
         box-shadow: 0 0 20px red, inset 0 0 10px red, 0 0px 5px red;
         box-shadow: 0 0 20px red, inset 0 0 10px red, 0 0px 5px red;
     }
     }
 }
 }
+.tree-table .el-table td.el-table__cell div{
+    display: flex;
+    align-items: center;
+}
+.tree-table .el-table .el-table__cell.is-center div{
+    justify-content: center;
+}
 
 

 <div >
 <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"
     <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;" :row-key="getRowKeys" :expand-row-keys="expands">
+              style="width: 100%;margin: 0px 0px; font-size:13.5px;" :row-key="getRowKeys" :expand-row-keys="expands" :default-expand-all="defaultExpand">
 
 
         <el-table-column type="expand" v-if="showExpand">
         <el-table-column type="expand" v-if="showExpand">
             <template #default="scope">
             <template #default="scope">

@@ -98,10 +98,15 @@ export default {
             type: String,
             type: String,
             default: 'id'
             default: 'id'
         },
         },
-        //是否默认展开所有行
+        //默认展开哪行
         expands:{
         expands:{
             type: Array,
             type: Array,
             default: []
             default: []
+        },
+        //是否默认展开所有行
+        defaultExpand:{
+            type:Boolean,
+            default:false
         }
         }
     },
     },
     data() {
     data() {

+<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 tree-table">
+        <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"
+                       :getRowKeys="'resTypeId'"
+                       :defaultExpand="true"
+                       :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="isTwoGroup" :isMulti="isMulti" @hideDialog="hideDialog" @savebtn="savebtn"></ChangeUsersList>

@@ -12,11 +12,325 @@ export default {
     },
     },
     setup: function (props, {attrs, slots, emit}) {
     setup: function (props, {attrs, slots, emit}) {
         const {proxy} = Vue.getCurrentInstance();
         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 ddicCollType = Vue.ref([]);
 
 
+        let search = Vue.ref({
+            resType: '',
+            keyword: '',
+            page: 1,
+            limit: 20,
+        });
+        let resTypeOptions=Vue.ref([])
+        const columns = [
+            {
+                prop: 'resTypeName',
+                label: '资源类型名称',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'resTypeCode',
+                label: '编码',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'resTypeDesc',
+                label: '类别',
+                sortable: true,
+                align: 'center',
+            },
+            {
+                prop: 'collType',
+                label: '采集类型',
+                sortable: true,
+                align: 'center',
+                 render: function (row) {
+                    let collType='';
+                     ddicCollType.value.map(item=>{
+                        if(row.collType==item.value){
+                            collType=item.name
+                        }
+                    })
+                    return collType;
+                 }
+            },
+            {
+                prop: 'forbidden',
+                label: '是否启用',
+                sortable: true,
+                align: 'center',
+                 render: function (row) {
+                    let str='';
+                    if(row.forbidden==0){
+                        str='启用';
+                    }else{
+                        str='禁用';
+                    }
+                    return str;
+                }
+            },
+            {
+                prop: 'showType',
+                label: '展示类型',
+                sortable: true,
+                align: 'center',
+                /* render: function (row) {
+
+                 }*/
+            },
+            {
+                prop: 'createTime',
+                label: '创建时间',
+                align: 'center'
+            },
+
+        ];
+
+        //列表数据
+        let resourceData = Vue.ref([]);
+        //获取列表数据
+        const getListData = () => {
+            let username=proxy.$route.query.username;
+            let resTypeName=proxy.$route.query.resTypeName;
+            //定义列表参数
+            let getParams = {
+                resType:search.value.resType,
+                keyword:search.value.keyword,
+                resTypeName: resTypeName,
+                userAccount: username,
+                // page: search.value.page,
+                // limit: search.value.limit
+            };
+            proxy.$http.get("/api-web/manage/restype/listAll", getParams, function (res) {
+                if (res && res.data) {
+                    resourceData.value  = handleTree(res.data, 'resTypeCode', 'parentId')
+
+                    console.log("(()",resourceData.value)
+                    count.value = res.count;
+                    loading.value = false;
+                }else{
+                    resourceData.value=[];
+                }
+            })
+        }
+        //组装树结构
+        let handleTree=(data, id, parentId, children)=> {
+            let config = {
+                id: id || 'id',
+                parentId: parentId || 'parentId',
+                childrenList: children || 'children'
+            };
+
+            var childrenListMap = {};
+            var nodeIds = {};
+            var tree = [];
+
+            for (let d of data) {
+                let parentId = d[config.parentId];
+                if (childrenListMap[parentId] == null) {
+                    childrenListMap[parentId] = [];
+                }
+                nodeIds[d[config.id]] = d;
+                childrenListMap[parentId].push(d);
+            }
+
+            for (let d of data) {
+                let parentId = d[config.parentId];
+                if (nodeIds[parentId] == null) {
+                    tree.push(d);
+                }
+            }
+
+            for (let t of tree) {
+                adaptToChildrenList(t);
+            }
+
+            function adaptToChildrenList(o) {
+                if (childrenListMap[o[config.id]] !== null) {
+                    o[config.childrenList] = childrenListMap[o[config.id]];
+                }
+                if (o[config.childrenList]) {
+                    for (let c of o[config.childrenList]) {
+                        adaptToChildrenList(c);
+                    }
+                }
+            }
+            return tree;
+        }
+        //重新加载表格数据
+        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 initCollType=()=>{
+            proxy.$http.post("/api-web/manage/ddic/findSucDdics/collType", {}, function (res) {
+                if (res && res.data) {
+                    let arr=res.data;
+                    if(arr && arr.length>0){
+                        arr.map(v=>{
+                            ddicCollType.value.push({
+                                name: v.ddicName
+                                ,value: v.ddicCode
+                            });
+                        })
+                    }
+
+                }
+            })
+        }
+        //批量取消负责的相关资源
+        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(() => {
         Vue.onMounted(() => {
+            initShowType();
+            initCollType();
+            getResourceTypoe();
+            getListData();
         })
         })
         return {
         return {
+            isMulti,
+            isTwoGroup,
+            show,
+            initShowType,
+            initCollType,
+            showTypeList,
+            ddicCollType,
+            search,
+            resTypeOptions,
+            changeCancel,
+            count,
+            hideDialog,
+            savebtn,
+            changeAdmin,
+            getResourceTypoe,
+
+            resourceData,
+            columns,
+            height,
+            loading,
+
+            selectionChange,
+
+            getListData,
+            loadTableDataList,
 
 
         }
         }
     }
     }