project/assets/js/main/components/WHeader.vue

<template>
    <div class="w-header">
        <div v-if="tabActive" class="w-header-row">
            <div class="w-header-row-left">
                <Dropdown class="m768-show" @on-click="tabPage" trigger="click" transfer>
                    <Icon type="md-menu" class="dropdown-menu"/>
                    <DropdownMenu slot="list">
                        <DropdownItem name="todo">{{$L('待办')}}</DropdownItem>
                        <DropdownItem name="project">{{$L('项目')}}</DropdownItem>
                        <DropdownItem name="docs">{{$L('知识库')}}</DropdownItem>
                        <DropdownItem name="team">{{$L('团队')}}</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <ul class="m768-hide">
                    <li :class="tabActive==='todo'?'active':''">
                        <a href="javascript:void(0)" @click="tabPage('todo')"><i class="ft icon">&#xe89e;</i>{{$L('待办')}}</a>
                    </li><li :class="tabActive==='project'?'active':''">
                        <a href="javascript:void(0)" @click="tabPage('project')"><i class="ft icon">&#xe6b8;</i>{{$L('项目')}}</a>
                    </li><li :class="tabActive==='docs'?'active':''">
                        <a href="javascript:void(0)" @click="tabPage('docs')"><i class="ft icon">&#xe915;</i>{{$L('知识库')}}</a>
                    </li><li :class="tabActive==='team'?'active':''">
                        <a href="javascript:void(0)" @click="tabPage('team')"><i class="ft icon">&#xe90d;</i>{{$L('团队')}}</a>
                    </li>
                </ul>
            </div>
            <div class="w-header-row-right">
                <Dropdown class="right-info" trigger="click" @on-click="setRightSelect" placement="bottom-end" transfer>
                   <div>
                       <UserImg class="userimg" :info="usrInfo"/>
                       <span class="username">{{$L('欢迎您')}}, {{(usrInfo.nickname || usrInfo.username) || $L('尊敬的会员')}}</span>
                       <Icon type="md-arrow-dropdown"/>
                   </div>
                    <Dropdown-menu slot="list">
                        <Dropdown-item v-if="isAdmin" name="system">{{$L('系统设置')}}</Dropdown-item>
                        <Dropdown-item name="user">{{$L('个人中心')}}</Dropdown-item>
                        <Dropdown-item name="out">{{$L('退出登录')}}</Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
                <div class="right-info" @click="chatDrawerShow=true">
                    <Icon class="right-mticon-9" type="md-text" size="24"/>
                    <em v-if="chatUnreadTotal > 0" class="right-info-num">{{chatUnreadTotal > 99 ? '99+' : chatUnreadTotal}}</em>
                </div>
                <Dropdown class="right-info" trigger="click" @on-click="setLanguage" transfer>
                    <div>
                        <Icon class="right-mticon" type="md-globe" size="24"/>
                        <Icon type="md-arrow-dropdown"/>
                    </div>
                    <Dropdown-menu slot="list">
                        <Dropdown-item name="zh" :selected="getLanguage() === 'zh'">中文</Dropdown-item>
                        <Dropdown-item name="en" :selected="getLanguage() === 'en'">English</Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
            </div>
        </div>
        <WDrawer v-model="systemDrawerShow" maxWidth="640" :title="$L('系统设置')">
            <Form ref="formSystem" :model="formSystem" :label-width="150" @submit.native.prevent>
                <FormItem :label="$L('首页Logo')">
                    <ImgUpload v-model="formSystem.logo" :num="1"></ImgUpload>
                    <span style="color:#777">{{$L('建议尺寸：%', '300x52')}}</span>
                </FormItem>
                <FormItem :label="$L('Github/Gitee图标')">
                    <RadioGroup v-model="formSystem.github">
                        <Radio label="show">{{$L('显示')}}</Radio>
                        <Radio label="hidden">{{$L('隐藏')}}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem :label="$L('允许注册')">
                    <RadioGroup v-model="formSystem.reg">
                        <Radio label="open">{{$L('允许')}}</Radio>
                        <Radio label="close">{{$L('禁止')}}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem :label="$L('音视频通话')">
                    <RadioGroup v-model="formSystem.callav">
                        <Radio label="open">{{$L('开启')}}</Radio>
                        <Radio label="close">{{$L('关闭')}}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem :label="$L('完成自动归档')">
                    <RadioGroup :value="formSystem.autoArchived" @on-change="formArchived">
                        <Radio label="open">{{$L('开启')}}</Radio>
                        <Radio label="close">{{$L('关闭')}}</Radio>
                    </RadioGroup>
                    <Tooltip v-if="formSystem.autoArchived=='open'" class="setting-auto-day" placement="right">
                        <Input v-model="formSystem.archivedDay" type="number">
                            <span slot="append">{{$L('天')}}</span>
                        </Input>
                        <div slot="content">{{$L('任务完成 % 天后自动归档。', formSystem.archivedDay)}}</div>
                    </Tooltip>
                </FormItem>
                <FormItem>
                    <Button :loading="loadIng > 0" type="primary" @click="handleSubmit('formSystem')">{{$L('提交')}}</Button>
                    <Button :loading="loadIng > 0" @click="handleReset('formSystem')" style="margin-left: 8px">{{$L('重置')}}</Button>
                </FormItem>
            </Form>
        </WDrawer>
        <WDrawer v-model="userDrawerShow" maxWidth="1000">
            <Tabs v-model="userDrawerTab">
                <TabPane :label="$L('个人资料')" name="personal">
                    <Form ref="formDatum" :model="formDatum" :rules="ruleDatum" :label-width="80" @submit.native.prevent>
                        <FormItem :label="$L('头像')" prop="userimg">
                            <ImgUpload v-model="formDatum.userimg" :num="1"></ImgUpload>
                            <span style="color:#777">{{$L('建议尺寸：%', '200x200')}}</span>
                        </FormItem>
                        <FormItem :label="$L('账号')">
                            <Input v-model="usrInfo.username" :disabled="true"></Input>
                        </FormItem>
                        <FormItem :label="$L('昵称')" prop="nickname">
                            <Input v-model="formDatum.nickname"></Input>
                        </FormItem>
                        <FormItem :label="$L('职位/职称')" prop="profession">
                            <Input v-model="formDatum.profession"></Input>
                        </FormItem>
                        <FormItem>
                            <Button :loading="loadIng > 0" type="primary" @click="handleSubmit('formDatum')">{{$L('提交')}}</Button>
                            <Button :loading="loadIng > 0" @click="handleReset('formDatum')" style="margin-left: 8px">{{$L('重置')}}</Button>
                        </FormItem>
                    </Form>
                </TabPane>
                <TabPane :label="$L('偏好设置')" name="setting">
                    <Form ref="formSetting" :model="formSetting" :label-width="100" @submit.native.prevent>
                        <FormItem :label="$L('系统皮肤')" prop="bgid">
                            <ul class="setting-bg">
                                <li v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12]"
                                    :key="i"
                                    :style="`background-image:${getBgUrl(i, true)}`"
                                    :class="{active:formSetting.bgid==i}"
                                    @click="formSetting.bgid=i"></li>
                            </ul>
                        </FormItem>
                        <FormItem>
                            <Button :loading="loadIng > 0" type="primary" @click="handleSubmit('formSetting')">{{$L('提交')}}</Button>
                            <Button :loading="loadIng > 0" @click="handleReset('formSetting')" style="margin-left: 8px">{{$L('重置')}}</Button>
                        </FormItem>
                    </Form>
                </TabPane>
                <TabPane :label="$L('账号密码')" name="account">
                    <Alert v-if="usrInfo.changepass" type="warning" showIcon>{{$L('请先修改登录密码！')}}</Alert>
                    <Form ref="formPass" :model="formPass" :rules="rulePass" :label-width="100" @submit.native.prevent>
                        <FormItem :label="$L('旧密码')" prop="oldpass">
                            <Input v-model="formPass.oldpass" type="password"></Input>
                        </FormItem>
                        <FormItem :label="$L('新密码')" prop="newpass">
                            <Input v-model="formPass.newpass" type="password"></Input>
                        </FormItem>
                        <FormItem :label="$L('确认新密码')" prop="checkpass">
                            <Input v-model="formPass.checkpass" type="password"></Input>
                        </FormItem>
                        <FormItem>
                            <Button :loading="loadIng > 0" type="primary" @click="handleSubmit('formPass')">{{$L('提交')}}</Button>
                            <Button :loading="loadIng > 0" @click="handleReset('formPass')" style="margin-left: 8px">{{$L('重置')}}</Button>
                        </FormItem>
                    </Form>
                </TabPane>
                <TabPane :label="$L('我创建的任务')" name="createtask">
                    <header-create :canload="userDrawerShow && userDrawerTab == 'createtask'"></header-create>
                </TabPane>
                <TabPane :label="$L('我归档的任务')" name="archivedtask">
                    <header-archived :canload="userDrawerShow && userDrawerTab == 'archivedtask'"></header-archived>
                </TabPane>
            </Tabs>
        </WDrawer>
        <WDrawer v-model="chatDrawerShow" :closable="false" maxWidth="1080" class="w-header-chat-draver">
            <chat-index v-model="chatUnreadTotal" :openWindow="chatDrawerShow" @on-open-notice="chatDrawerShow=true"></chat-index>
            <div class="w-header-chat-close" @click="chatDrawerShow=false"><Icon type="ios-close" /></div>
        </WDrawer>
    </div>
</template>

<style lang="scss">
    .w-header-chat-draver {
        .ivu-drawer-wrap,
        .ivu-drawer-mask {
            z-index: 1001;
        }
        .w-header-chat-close {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            color: #ffffff;
            font-size: 32px;
            width: 68px;
            height: 58px;
            line-height: 58px;
            text-align: center;
            cursor: pointer;
            @media (max-width: 768px) {
                width: 50px;
                height: 50px;
                line-height: 50px;
            }
            > i {
                transition: all 0.2s;
            }
            &:hover {
                > i {
                    transform: scale(1.12) rotate(90deg);
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
    .w-header {
        z-index: 15;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        font-size: 14px;
        background: #0396f2 linear-gradient(45deg, #0396f2 0%, #0285d7 100%);
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);

        .icon {
            font-size: 16px;
            margin-right: 3px;
        }

        .w-header-row {
            display: flex;
            color: #fff;
            height: 40px;
            position: relative;
            z-index: 10;
            margin: 0 32px;
            .w-header-row-left {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                overflow-x: auto;
                -webkit-backface-visibility: hidden;
                -webkit-overflow-scrolling: touch;
                li {
                    line-height: 40px;
                    color: #fff;
                    display: inline-block;
                    a {
                        color: #fff;
                        display: block;
                        min-width: 116px;
                        text-align: center;
                        &:visited {
                            color: #fff;
                        }
                        &:hover {
                            color: #f2f2f2;
                        }
                    }
                }
                li:hover, li.active {
                    background: #0277c0;
                }
            }
            .w-header-row-right {
                white-space: nowrap;
                text-align: right;
                line-height: 40px;
                margin-right: -5px;
                .right-info {
                    display: inline-block;
                    position: relative;
                    padding-left: 10px;
                    padding-right: 10px;
                    margin-right: -5px;
                    cursor: pointer;
                    &:hover {
                        background: #0277c0;
                    }
                    .right-mticon {
                        vertical-align: top;
                        margin-top: 8px;
                    }
                    .right-mticon-9 {
                        vertical-align: top;
                        margin-top: 9px;
                    }
                    .right-info-num {
                        position: absolute;
                        top: 2px;
                        left: 22px;
                        height: auto;
                        line-height: normal;
                        color: #ffffff;
                        background-color: #ff0000;
                        text-align: center;
                        border-radius: 10px;
                        padding: 1px 5px;
                        font-size: 12px;
                        transform: scale(0.9);
                        z-index: 1;
                    }
                    .userimg {
                        display: none;
                        width: 26px;
                        height: 26px;
                        margin-top: 7px;
                        vertical-align: top;
                        border-radius: 50%;
                    }
                    .username {
                        display: inline-block;
                    }
                }
            }
            @media (max-width: 768px) {
                margin: 0 16px;
                .w-header-row-left {
                    .dropdown-menu {
                        font-size: 28px;
                        vertical-align: top;
                        margin-top: 6px;
                    }
                }
                .w-header-row-right {
                    .right-info {
                        padding-left: 8px;
                        padding-right: 8px;
                        .userimg {
                            display: inline-block;
                        }
                        .username {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .setting-auto-day {
        display: block;
        width: 110px;
        margin-top: 12px;
        line-height: 32px;
        margin-bottom: -10px;
    }
    .setting-bg {
        margin-top: 6px;
        margin-bottom: -24px;
        &:after,
        &:before {
            display: table;
            content: "";
        }
        li {
            margin: 0 16px 16px 0;
            width: 160px;
            height: 124px;
            display: inline-block;
            cursor: pointer;
            border: solid 2px #fff;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            transition: all 0.2s;
            &.active,
            &:hover {
                border-color: #0396f2;
                transform: scale(1.02);
            }
        }
    }
</style>
<script>
    import ImgUpload from "./ImgUpload";
    import HeaderCreate from "./project/header/create";
    import HeaderArchived from "./project/header/archived";
    import ChatIndex from "./chat/Index";
    import WDrawer from "./iview/WDrawer";

    export default {
        name: 'WHeader',
        components: {WDrawer, ChatIndex, HeaderArchived, HeaderCreate, ImgUpload},
        data() {
            return {
                tabActive: '',

                loadIng: 0,
                isAdmin: false,

                systemDrawerShow: false,

                userDrawerShow: false,
                userDrawerTab: 'personal',

                formSystem: {
                    github: 'show',
                    reg: 'open',
                    callav: 'open',
                    autoArchived: 'close',
                    archivedDay: 7,
                },

                formDatum: {
                    userimg: '',
                    nickname: '',
                    profession: ''
                },
                ruleDatum: { },

                formPass: {
                    oldpass: '',
                    newpass: '',
                    checkpass: '',
                },
                rulePass: { },

                formSetting: {
                    bgid: 0,
                },

                chatDrawerShow: false,
                chatUnreadTotal: 0,
            }
        },
        mounted() {
            this.isAdmin = $A.identity('admin');
            this.formatDatum();
            //
            this.tabActive = this.$route.meta.tabActive;
            //
            if ($A.urlParameter("open") === 'chat' && $A.getToken() !== false) {
                this.chatDrawerShow = true;
            }
        },
        watch: {
            '$route' () {
                this.tabActive = this.$route.meta.tabActive;
                this.systemDrawerShow = false;
                this.chatDrawerShow = $A.urlParameter("open") === 'chat' && $A.getToken() !== false;
                if (!this.usrInfo.changepass) {
                    this.userDrawerShow = false;
                }
            },
            usrName() {
                this.isAdmin = $A.identity('admin');
                this.formatDatum();
            }
        },
        methods: {
            initLanguage() {
                this.ruleDatum = {
                    nickname: [
                        { required: true, message: this.$L('请输入昵称！'), trigger: 'change' },
                        { type: 'string', min: 2, message: this.$L('昵称长度至少2位！'), trigger: 'change' }
                    ]
                };
                this.rulePass = {
                    oldpass: [
                        { required: true, message: this.$L('请输入旧密码！'), trigger: 'change' },
                        { type: 'string', min: 6, message: this.$L('密码长度至少6位！'), trigger: 'change' }
                    ],
                    newpass: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error(this.$L('请输入新密码！')));
                                } else {
                                    if (this.formPass.checkpass !== '') {
                                        this.$refs.formPass.validateField('checkpass');
                                    }
                                    callback();
                                }
                            },
                            required: true,
                            trigger: 'change'
                        },
                        { type: 'string', min: 6, message: this.$L('密码长度至少6位！'), trigger: 'change' }
                    ],
                    checkpass: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error(this.$L('请重新输入新密码！')));
                                } else if (value !== this.formPass.newpass) {
                                    callback(new Error(this.$L('两次密码输入不一致！')));
                                } else {
                                    callback();
                                }
                            },
                            required: true,
                            trigger: 'change'
                        }
                    ],
                };
            },

            formatDatum() {
                this.$set(this.formDatum, 'userimg', this.usrInfo.userimg)
                this.$set(this.formDatum, 'nickname', this.usrInfo.nickname)
                this.$set(this.formDatum, 'profession', this.usrInfo.profession)
                this.$set(this.formSetting, 'bgid', this.usrInfo.bgid)
                this.formDatum__reset = $A.cloneData(this.formDatum);
                this.formSetting__reset = $A.cloneData(this.formSetting);
                this.formPass__reset = $A.cloneData(this.formPass);
                this.changepass();
            },

            changepass() {
                if (this.usrInfo.changepass) {
                    this.userDrawerShow = true;
                    this.userDrawerTab = 'account';
                    setTimeout(() => {
                        this.changepass()
                    }, 500);
                }
            },

            getBgUrl(id, thumb) {
                id = Math.max(1, parseInt(id));
                return 'url(' + window.location.origin + '/images/bg/' + (thumb ? 'thumb/' : '') + id + '.jpg' + ')';
            },
            tabPage(path) {
                this.goForward({path: '/' + path});
            },
            setRightSelect(act) {
                switch (act) {
                    case 'system':
                        this.systemSetting(false);
                        this.systemDrawerShow = true;
                        break;

                    case 'user':
                        this.userDrawerShow = true;
                        break;

                    case 'out':
                        this.logout();
                        break;
                }
            },
            logout() {
                this.$Modal.confirm({
                    title: this.$L('退出登录'),
                    content: this.$L('您确定要退出登录吗？'),
                    onOk: () => {
                        $A.userLogout();
                    },
                });
            },
            systemSetting(save) {
                this.loadIng++;
                $A.apiAjax({
                    url: 'system/setting?type=' + (save ? 'save' : 'get'),
                    data: this.formSystem,
                    complete: () => {
                        this.loadIng--;
                    },
                    success: (res) => {
                        if (res.ret === 1) {
                            let tempData = res.data;
                            tempData.github = tempData.github || 'show';
                            tempData.reg = tempData.reg || 'open';
                            tempData.callav = tempData.callav || 'open';
                            tempData.autoArchived = tempData.autoArchived || 'close';
                            tempData.archivedDay = tempData.archivedDay || 7;
                            this.formSystem = tempData;
                            this.formSystem__reset = $A.cloneData(this.formSystem);
                            if (save) {
                                this.$Message.success(this.$L('修改成功'));
                            }
                        } else {
                            if (save) {
                                this.$Modal.error({title: this.$L('温馨提示'), content: res.msg });
                            }
                        }
                    }
                });
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        switch (name) {
                            case "formSystem": {
                                this.systemSetting(true);
                                break;
                            }
                            case "formDatum": {
                                this.loadIng++;
                                $A.apiAjax({
                                    url: 'users/editdata',
                                    data: this.formDatum,
                                    complete: () => {
                                        this.loadIng--;
                                    },
                                    success: (res) => {
                                        if (res.ret === 1) {
                                            $A.getUserInfo(true);
                                            $A.getUserBasic(this.usrInfo.username, () => {}, 0);
                                            this.$Message.success(this.$L('修改成功'));
                                        } else {
                                            this.$Modal.error({title: this.$L('温馨提示'), content: res.msg });
                                        }
                                    }
                                });
                                break;
                            }
                            case "formPass": {
                                this.loadIng++;
                                $A.apiAjax({
                                    url: 'users/editpass',
                                    data: this.formPass,
                                    complete: () => {
                                        this.loadIng--;
                                    },
                                    success: (res) => {
                                        if (res.ret === 1) {
                                            this.userDrawerShow = false;
                                            this.$Message.success(this.$L('修改成功，请重新登录！'));
                                            this.$refs[name].resetFields();
                                            $A.userLogout();
                                        } else {
                                            this.$Modal.error({title: this.$L('温馨提示'), content: res.msg });
                                        }
                                    }
                                });
                                break;
                            }
                            case "formSetting": {
                                this.loadIng++;
                                $A.apiAjax({
                                    url: 'users/editdata',
                                    data: this.formSetting,
                                    complete: () => {
                                        this.loadIng--;
                                    },
                                    success: (res) => {
                                        if (res.ret === 1) {
                                            $A.getUserInfo(true);
                                            this.$Message.success(this.$L('修改成功'));
                                        } else {
                                            this.$Modal.error({title: this.$L('温馨提示'), content: res.msg });
                                        }
                                    }
                                });
                                break;
                            }
                        }
                    }
                })
            },
            handleReset(name) {
                if (typeof this[name + '__reset'] !== "undefined") {
                    this[name] = $A.cloneData(this[name + '__reset']);
                    return;
                }
                this.$refs[name].resetFields();
            },
            formArchived(value) {
                this.formSystem = { ...this.formSystem, autoArchived: value };
            }
        },
    }
</script>