whychw
2020-06-17 00ae7750a310ec6e2175bc5bfd35150272f35e97
Merge branch 'dev_lj' of http://118.89.139.230:10101/r/~whyclj/zijing into dev
6个文件已添加
1个文件已修改
838 ■■■■■ 已修改文件
zijing/WebRoot/components/index.css 20 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zijing/WebRoot/components/index.js 35 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zijing/WebRoot/elegroup-v.jsp 683 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zijing/WebRoot/element-ui/css/common.css 34 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zijing/WebRoot/element-ui/css/components.css 补丁 | 查看 | 原始文档 | blame | 历史
zijing/WebRoot/element-ui/css/my-element-ui.css 47 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zijing/WebRoot/element-ui/js/axios.config.js 19 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
zijing/WebRoot/components/index.css
New file
@@ -0,0 +1,20 @@
/* baoji-group-list */
.baoji-group-list ul {
    border-top: 1px solid #ccc;
}
.baoji-group-list a{
    display: block;
    padding: 6px 8px;
    text-indent: 1rem;
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
}
.baoji-group-list a:hover {
    background-color: rgb(198, 226, 255);
}
.baoji-group-list a.active-item {
    background-color: #409EFF;
    color: #FFFFFF;
}
zijing/WebRoot/components/index.js
New file
@@ -0,0 +1,35 @@
Vue.component('baoji-group-list', {
    template: `
        <div class="baoji-group-list">
            <ul>
                <li v-for="item in list" :key="item.key">
                    <a href="javascript:;"
                    :class="{'active-item': item.key == activeKey}"
                    @click="handleClick(item)">{{item.txt}}</a>
                </li>
            </ul>
        </div>
    `,
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            activeKey: '',
        }
    },
    methods: {
        handleClick(item) {
            if(this.activeKey != item.key) {
                this.activeKey = item.key;
                this.$emit('handle-click', item)
            }
        }
    }
});
zijing/WebRoot/elegroup-v.jsp
New file
@@ -0,0 +1,683 @@
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE HTML>
<html>
    <head>
        <!-- 默认使用最高内核 -->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
        <base href="<%=basePath%>">
        <title>包机组管理</title>
        <link rel="stylesheet" href="css/basic.css">
        <link rel="stylesheet" type="text/css" href="css/query.css">
        <link rel="stylesheet" type="text/css" href="css/nocontent.css">
        <link rel="stylesheet" type="text/css" href="css/loading.css">
        <link rel="stylesheet" href="element-ui/theme-chalk/index.css">
        <link rel="stylesheet" href="element-ui/css/common.css">
        <link rel="stylesheet" href="element-ui/css/my-element-ui.css">
        <link rel="stylesheet" href="layer/theme/default/layer.css">
        <link rel="stylesheet" href="components/index.css">
        <style>
            .card-tools {
                float: right;
                margin-left: 8px;
            }
            .flex-layout-container {
                display: flex;
            }
            .flex-layout-container.flex-col {
                flex-direction: column;
            }
            .flex-layout-body {
                flex: 1;
                overflow-y: auto;
            }
            .baoji-group-home {
                margin-bottom: 8px;
            }
        </style>
    </head>
    <body>
        <!--头部内容开始-->
        <jsp:include page="Top.jsp" flush="true"/>
        <!--头部内容结束-->
        <!--导航开始-->
        <jsp:include page="nav.jsp" flush="true"/>
        <!--导航结束-->
        <div id="elementApp" class="ele-app">
            <div class="baoji-group">
                <div class="flex-layout-container">
                    <div class="flex-layout-header w300 mr8">
                        <el-card
                        v-cloak
                        :body-style="{height: '725px','overflowY': 'auto','padding':'0'}">
                            <div slot="header" class="clearfix">
                                <span>包机组列表</span>
                                <el-button class="card-tools" size="mini" type="danger"
                                icon="el-icon-delete" circle
                                :disabled="getToolsState"
                                @click="confirmDelBaojiGroup"></el-button>
                                <el-button class="card-tools" size="mini" type="primary"
                                icon="el-icon-edit" circle
                                :disabled="getToolsState"
                                @click="editBaojiGroup.show=true"></el-button>
                                <el-button class="card-tools" size="mini" type="primary"
                                icon="el-icon-plus" circle
                                @click="addBaojiGroup.show=true"></el-button>
                            </div>
                            <baoji-group-list
                            v-cloak
                            ref="groupList"
                            :list="baojigrouplist"
                            @handle-click="groupListClick"></baoji-group-list>
                        </el-card>
                    </div>
                    <div class="flex-layout-body">
                        <el-tabs v-model="activeName" type="border-card">
                            <el-tab-pane label="包机组用户" name="baoji-group-user">
                                <el-transfer
                                class="el-transfer-w320 el-transfer-h700"
                                v-model="user.value"
                                :titles="['未添加用户', '已添加用户']"
                                :button-texts="['移除', '添加']"
                                :data="user.data"
                                :filterable="true"
                                @change="userChange">
                                </el-transfer>
                            </el-tab-pane>
                            <el-tab-pane label="包机机房" name="baoji-home">
                                <el-transfer
                                class="el-transfer-w-percent el-transfer-h700"
                                v-model="baoji.value"
                                :titles="['未添加机房', '已添加机房']"
                                :button-texts="['移除', '添加']"
                                :data="baoji.data"
                                :filterable="true"
                                @change="baojiChange">
                                </el-transfer>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
            <!-- 添加包机组 -->
            <el-dialog
            v-cloak
            top="calc(50vh - 100px)"
            title='添加包机组'
            :visible.sync="addBaojiGroup.show"
            width="400px">
                <el-form size="small">
                    <el-form-item label="包机组名称">
                        <el-input
                        v-model.trim="addBaojiGroup.value"
                        placeholder="请输入内容"
                        :clearable="true"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: right;">
                    <el-button
                    type="primary"
                    size="mini"
                    @click="addBaojiGroupOk">确定</el-button>
                    <el-button
                    size="mini"
                    @click="addBaojiGroup.show = false">取消</el-button>
                </div>
            </el-dialog>
            <!-- 编辑包机组 -->
            <el-dialog
            v-cloak
            top="calc(50vh - 100px)"
            title='编辑包机组'
            :visible.sync="editBaojiGroup.show"
            width="400px">
                <el-form size="small">
                    <el-form-item label="包机组名称">
                        <el-input
                        v-model.trim="editBaojiGroup.value"
                        placeholder="请输入内容"
                        :clearable="true"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: right;">
                    <el-button
                    type="primary"
                    size="mini"
                    @click="eidtBaojiGroupOk">确定</el-button>
                    <el-button
                    size="mini"
                    @click="editBaojiGroup.show = false">取消</el-button>
                </div>
            </el-dialog>
        </div>
        <script type="text/javascript" src="element-ui/vue.min.js"></script>
        <script src="components/index.js"></script>
        <script type="text/javascript" src="element-ui/js/axios.min.js"></script>
        <script type="text/javascript" src="element-ui/js/axios.config.js"></script>
        <script type="text/javascript" src="element-ui/index.js"></script>
        <script type="text/javascript" src="pages/js/base.js"></script>
        <script type="text/javascript" src="pages/js/common.js"></script>
        <script type="text/javascript" src="element-ui/js/const.js"></script>
        <script type="text/javascript" src="element-ui/js/rules.js"></script>
        <script type="text/javascript" src="element-ui/js/common.js"></script>
        <script src="layer/layer.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#elementApp',
                data: {
                    loading: '',
                    activeName: 'baoji-group-user',
                    user: {
                        data: [],
                        value: []
                    },
                    baoji: {
                        data: [],
                        value: [],
                    },
                    baojigrouplist: [],
                    addBaojiGroup: {
                        show: false,
                        value: ''
                    },
                    editBaojiGroup: {
                        show: false,
                        value: ''
                    },
                    searchParams: {
                        baoji_group_id: '',
                        baoji_group_name: '',
                    }
                },
                methods: {
                    // 初始化数据
                    initData: function() {
                        // 初始化用户列表
                        this.user = {
                            data: [],
                            value: []
                        };
                        // 初始化包机组机房列表
                        this.baoji = {
                            data: [],
                            value: [],
                        };
                        // 初始化查询条件
                        this.searchParams = {
                            baoji_group_id: '',
                            baoji_group_name: '',
                        };
                        // 列表的激活状态修改
                        this.$refs.groupList.activeKey = "";
                    },
                    searchBaojiGroupList: function() {
                        var self = this;
                        // 初始化数据
                        this.initData();
                        // 开启等待框
                        this.loading = layer.load(1);
                        // 查询后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroupAction!searchAll',
                            data: null
                        }).then(function(res) {
                            var data = [];
                            if(res.code == 1) {
                                data = res.data;
                                // 遍历数据,添加必要属性
                                for(var i=0; i<data.length; i++) {
                                    data[i].txt = data[i].baoji_group_name;
                                    data[i].key = data[i].baoji_group_id;
                                }
                            }
                            self.baojigrouplist = data;
                            // 关闭等待框
                            layer.close(self.loading);
                        });
                    },
                    groupListClick: function(item) {
                        // 设置查询的值
                        this.searchParams.baoji_group_id = item.baoji_group_id;
                        this.searchParams.baoji_group_name = item.baoji_group_name;
                        this.editBaojiGroup.value = item.baoji_group_name;
                        // 查询所有的用户
                        this.searchUserListAll();
                        // 查询已添加到包机组的用户
                        this.searchUserList();
                        // 查询所有的机房
                        this.searchHomeAll();
                        // 查询已添加到包机组的包机机房
                        this.searchHome();
                    },
                    addBaojiGroupOk: function() {
                        // 包机组信息
                        var value = this.addBaojiGroup.value;
                        // 检测包机组用户的合法性
                        var checkResult = this.checkBaojiGroup(value);
                        if(checkResult.code == 0) {
                            // 提示信息
                            this.$message({
                                type: 'warning',
                                message: checkResult.message,
                            });
                            return;
                        }
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroupAction!add',
                            data: "us.baoji_group_name="+value
                        }).then(function(res) {
                            if(res.code == 1) {
                                // 提示信息
                                self.$message({
                                    type: 'success',
                                    message: res.msg,
                                });
                                // 关闭弹出框
                                self.addBaojiGroup = false;
                                // 查询包机组
                                self.searchBaojiGroupList();
                            }else {
                                // 提示信息
                                self.$message({
                                    type: 'danger',
                                    message: res.msg,
                                });
                            }
                        });
                    },
                    eidtBaojiGroupOk: function() {
                        // 包机组信息
                        var value = this.editBaojiGroup.value;
                        var id = this.searchParams.baoji_group_id;
                        // 检测包机组用户的合法性
                        var checkResult = this.checkBaojiGroup(value);
                        if(checkResult.code == 0) {
                            // 提示信息
                            this.$message({
                                type: 'warning',
                                message: checkResult.message,
                            });
                            return;
                        }
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroupAction!update',
                            data: 'us.baoji_group_id='+id+'&us.baoji_group_name='+value
                        }).then(function(res) {
                            if(res.code == 1) {
                                // 提示信息
                                self.$message({
                                    type: 'success',
                                    message: res.msg,
                                });
                                // 关闭弹出框
                                self.editBaojiGroup.show = false;
                                // 查询包机组
                                self.searchBaojiGroupList();
                            }else {
                                // 提示信息
                                self.$message({
                                    type: 'danger',
                                    message: res.msg,
                                });
                            }
                        });
                    },
                    checkBaojiGroup: function(value) {
                        var rs = {
                            code: 1,
                            message: '',
                        };
                        // 为空检测
                        if(value == '') {
                            rs.code = 0;
                            rs.message = "包机组名称不能为空";
                            return rs;
                        }
                        // 遍历包机组列表获取是否重名
                        for(var i=0; i<this.baojigrouplist.length; i++) {
                            var _data = this.baojigrouplist[i];
                            if(value == _data.txt) {
                                rs.code = 0;
                                rs.message = value+"已存在";
                                break;
                            }
                        }
                        return rs;
                    },
                    confirmDelBaojiGroup: function() {
                        var self = this;
                        // 弹出确认框
                        layer.confirm('确定删除'+this.searchParams.baoji_group_name,
                                {icon:3}, function(index) {
                                    self.delBaojiGroupOk();
                                    // 关闭弹出框
                                    layer.close(index);
                                });
                    },
                    delBaojiGroupOk: function() {
                        var name = this.searchParams.baoji_group_name;
                        var id = this.searchParams.baoji_group_id;
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroupAction!delete',
                            data: 'us.baoji_group_id='+id+'&us.baoji_group_name='+name
                        }).then(function(res) {
                            if(res.code == 1) {
                                // 提示信息
                                self.$message({
                                    type: 'success',
                                    message: res.msg,
                                });
                                // 查询包机组
                                self.searchBaojiGroupList();
                            }else {
                                // 提示信息
                                self.$message({
                                    type: 'danger',
                                    message: res.msg,
                                });
                            }
                        });
                    },
                    searchUserListAll: function() {
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_infAction!searchCS_All',
                            data: null
                        }).then(function(res) {
                            var data = [];
                            if(res.code == 1) {
                                data = res.data;
                                // 格式化数据
                                for(var i=0; i<data.length; i++) {
                                    data[i].key = data[i].UId;
                                    data[i].label = data[i].UName;
                                }
                            }
                            // 设置用户名
                            self.user.data = data;
                        });
                    },
                    searchUserList: function() {
                        // 请求后台查询
                        var self = this;
                        var id = this.searchParams.baoji_group_id;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroupAction!serchByCondition',
                            data: "us.baoji_group_id="+id
                        }).then(function(res) {
                            var data = [];
                            if(res.code == 1) {
                                // 格式化数据
                                for(var i=0; i<res.data.length; i++) {
                                    var _data = res.data[i];
                                    data.push(_data.UId);
                                }
                            }
                            // 设置用户名
                            self.user.value = data;
                        });
                    },
                    userChange: function(list, type, values) {
                        var userList = this.getUserListByUIds(values);
                        // 根据类型确定事件
                        switch(type) {
                            case 'left':
                                this.removeUser(userList);
                            break;
                            case 'right':
                                this.addUser(userList);
                            break;
                        }
                    },
                    addUser: function(list) {
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroup_usrAction!add',
                            data: 'json='+JSON.stringify(list)
                        }).then(function(res) {
                            if(res.code == 1) {
                                // 提示信息
                                self.$message({
                                    type: 'success',
                                    message: res.msg,
                                });
                            }else {
                                // 提示信息
                                self.$message({
                                    type: 'danger',
                                    message: res.msg,
                                });
                            }
                            // 查询已经添加的用户
                            self.searchUserList();
                        });
                    },
                    removeUser: function(list) {
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroup_usrAction!delPro',
                            data: 'json='+JSON.stringify(list)
                        }).then(function(res) {
                            if(res.code == 1) {
                                // 提示信息
                                self.$message({
                                    type: 'success',
                                    message: res.msg,
                                });
                            }else {
                                // 提示信息
                                self.$message({
                                    type: 'danger',
                                    message: res.msg,
                                });
                            }
                            // 查询已经添加的用户
                            self.searchUserList();
                        });
                    },
                    getUserListByUIds: function(UIds) {
                        var userList = this.user.data;
                        var searchParams = this.searchParams;
                        var result = [];
                        for(var i=0; i<UIds.length; i++) {
                            var UId = UIds[i];
                            for(var k=0; k<userList.length; k++) {
                                var user = userList[k];
                                if(user.UId == UId) {
                                    result.push({
                                        baoji_group_id: searchParams.baoji_group_id,
                                        baoji_group_name: searchParams.baoji_group_name,
                                        uId: user.UId,
                                        uname: user.UName,
                                    });
                                    break;
                                }
                            }
                        }
                        return result;
                    },
                    searchHomeAll: function() {
                        // 构造查询条件
                        var StationName1 = "";
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'BattInfAction_serchByStationName',
                            data: 'bif.StationName1='+StationName1,
                        }).then(function(res) {
                            var data = [];
                            if(res.code == 1) {
                                data = res.data;
                                // 格式化数据
                                for(var i=0; i<data.length; i++) {
                                    data[i].key = data[i].StationId;
                                    data[i].label = data[i].StationName;
                                }
                            }
                            // 设置机房
                            self.baoji.data = data;
                        });
                    },
                    searchHome: function() {
                        // 请求后台查询
                        var self = this;
                        var id = this.searchParams.baoji_group_id;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroupAction!serchByInfo',
                            data: "us.baoji_group_id="+id
                        }).then(function(res) {
                            var data = [];
                            console.log(res);
                            if(res.code == 1) {
                                for(var i=0; i<res.data.length; i++) {
                                    var _data = res.data[i];
                                    data.push(_data.StationId);
                                }
                            }
                            // 设置已包机组已包机机房
                            self.baoji.value = data;
                        });
                    },
                    baojiChange: function(list, type, values) {
                        var baojiList = this.getUserListByKeys(values);
                        console.log(baojiList);
                        // 根据类型确定事件
                        switch(type) {
                            case 'left':
                                this.removeBaoji(baojiList);
                            break;
                            case 'right':
                                this.addBaoji(baojiList);
                            break;
                        }
                    },
                    addBaoji: function(list) {
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroup_battgroupAction!addPro_CS',
                            data: 'result='+JSON.stringify(list)
                        }).then(function(res) {
                            if(res.code == 1) {
                                // 提示信息
                                self.$message({
                                    type: 'success',
                                    message: res.msg,
                                });
                            }else {
                                // 提示信息
                                self.$message({
                                    type: 'danger',
                                    message: res.msg,
                                });
                            }
                            // 查询已经添加包机机房
                            self.searchHome();
                        });
                    },
                    removeBaoji: function(list) {
                        var self = this;
                        // 请求后台
                        axios({
                            method: 'post',
                            url: 'User_battgroup_baojigroup_battgroupAction!delPro_CS',
                            data: 'result='+JSON.stringify(list)
                        }).then(function(res) {
                            if(res.code == 1) {
                                // 提示信息
                                self.$message({
                                    type: 'success',
                                    message: res.msg,
                                });
                            }else {
                                // 提示信息
                                self.$message({
                                    type: 'danger',
                                    message: res.msg,
                                });
                            }
                            // 查询已经添加包机机房
                            self.searchHome();
                        });
                    },
                    getUserListByKeys: function(keys) {
                        var baojiList = this.baoji.data;
                        var searchParams = this.searchParams;
                        var result = [];
                        for(var i=0; i<keys.length; i++) {
                            var key = keys[i];
                            for(var k=0; k<baojiList.length; k++) {
                                var baoji = baojiList[k];
                                if(baoji.key == key) {
                                    result.push({
                                        baoji_group_id: searchParams.baoji_group_id,
                                        baoji_group_name: searchParams.baoji_group_name,
                                        StationId: baoji.key,
                                        note: baoji.label
                                    });
                                    break;
                                }
                            }
                        }
                        return result;
                    },
                },
                computed: {
                    getToolsState: function() {    // 根据选中的状态确定包机组列表工具栏的状态
                        return this.searchParams.baoji_group_id == ""?true:false;
                    },
                },
                mounted: function() {
                    // 查询包机组列表
                    this.searchBaojiGroupList();
                }
            });
        </script>
  </body>
</html>
zijing/WebRoot/element-ui/css/common.css
@@ -7,8 +7,20 @@
    padding: 0;
}
/* width */
.w300 {
    width: 360px;
}
.w360 {
    width: 360px;
}
.w500 {
    width: 500px;
}
.w900 {
    width: 900px;
}
.w1200 {
    width: 1200px;
}
/* height */
.h300 {
@@ -25,6 +37,10 @@
}
.h500 {
    height: 500px;
}
.mr8 {
    margin-right: 8px;
}
/* element filter title */
.ele-filter-container {
@@ -119,4 +135,22 @@
}
.el-dialog__body {
    padding: 16px 8px;
}
div::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 10px;
    height: 10px;
}
div::-webkit-scrollbar-thumb {
    /* 滚动条里面小方块 */
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
    background: #535353;
}
div::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    -webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #c9c7c7;
}
zijing/WebRoot/element-ui/css/components.css
zijing/WebRoot/element-ui/css/my-element-ui.css
New file
@@ -0,0 +1,47 @@
.el-card__header {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
    background-color: #F5F7FA;
}
.el-transfer-panel {
    height: 100%;
    border: 1px solid #ccc;
}
.el-transfer-panel__header {
    text-align: left;
}
.el-transfer-w250 .el-transfer-panel {
    width: 250px;
}
.el-transfer-w300 .el-transfer-panel {
    width: 300px;
}
.el-transfer-w320 .el-transfer-panel {
    width: 320px;
}
.el-transfer-w360 {
    min-width: 1000px;
}
.el-transfer-w360 .el-transfer-panel {
    width: 360px;
}
.el-transfer-w400 .el-transfer-panel {
    width: 400px;
}
.el-transfer-w-percent .el-transfer-panel {
    width: calc(50% - 100px);
}
.el-transfer-h700 {
    height: 700px; text-align: center;
}
.el-transfer-h700 .el-transfer-panel__list.is-filterable {
    height: 595px;
}
.el-transfer-panel__list {
    text-align: left;
}
.el-transfer .el-transfer__buttons {
    padding: 0 4px;
}
zijing/WebRoot/element-ui/js/axios.config.js
New file
@@ -0,0 +1,19 @@
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对数据进行处理直接返回解析后的数据
    response = JSON.parse(response.data.result);
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});