【无标题】

鸣鲷有柒

已于 2023-09-07 00:13:25 修改

阅读量442

点赞数

文章标签： vue.js javascript ecmascript

于 2023-09-04 23:38:46 首次发布

本文链接：https://blog.csdn.net/m0_74343097/article/details/132679837

版权

一、configCard

<template>
    <div>
        <el-card class="boxCard">
            <div class="form-body">
                <div class="form-left">
                    <span prop="name" label="Name" align="center" class="name">{{ bigName }}</span><br><br>
                    <span prop="description" label="Description" align="center" class="description">{{ littleName }}</span>
                </div>
                <div class="form-right">
                    <el-button icon="el-icon-edit-outline" @click="edit(bigName)">&nbsp;{{ $t('message.edit') }}</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    props: ['bigName', 'littleName'],
    methods: {
        //点击进入编辑路由界面
        edit(flag) {
            console.log('****', flag);
            if (flag == '全局') {
                this.$router.replace({ path: '/main/configGlobal' })
            }
            else if (flag == 'Global') {
                this.$router.replace({ path: '/main/configGlobal' })
            }
            else if (flag == '集群') {
                this.$router.replace({ path: '/main/configCluster' })
            }
            else if (flag == 'Cluster') {
                this.$router.replace({ path: '/main/configCluster' })
            }
            else if (flag == '注册服务') {
                this.$router.replace({ path: '/main/configAuth' })
            }
            else if (flag == 'Registration service') {
                this.$router.replace({ path: '/main/configAuth' })
            }
            else if (flag == '警报') {
                this.$router.replace({ path: '/main/configAlerts' })
            }
            else if (flag == 'alarm') {
                this.$router.replace({ path: '/main/configAlerts' })
            }
            else if (flag == '政策监察') {
                this.$router.replace({ path: '/main/configRootcheck' })
            }
            else if (flag == 'Policy supervision') {
                this.$router.replace({ path: '/main/configRootcheck' })
            }
            else if (flag == 'CIS-CAT') {
                this.$router.replace({ path: '/main/cis-cat' })
            }
            else if (flag == 'Osquery') {
                this.$router.replace({ path: '/main/configOsquery' })
            }
            else if (flag == 'Syscollector') {
                this.$router.replace({ path: '/main/configSyscollector' })
            }
            else if (flag == '命令') {
                this.$router.replace({ path: '/main/configCommand' })
            }            
            else if (flag == 'order') {
                this.$router.replace({ path: '/main/configCommand' })
            }
            else if (flag == '本地日志文件监视器') {
                this.$router.replace({ path: '/main/configLocalfile' })
            }
            else if (flag == 'Local log file monitor') {
                this.$router.replace({ path: '/main/configLocalfile' })
            }
            else if (flag == '本地系统日志') {
                this.$router.replace({ path: '/main/configLocalfile2' })
            }
            else if (flag == 'Local system log') {
                this.$router.replace({ path: '/main/configLocalfile2' })
            }
            else if (flag == '日志') {
                this.$router.replace({ path: '/main/configLogging' })
            }
            else if (flag == 'journal') {
                this.$router.replace({ path: '/main/configLogging' })
            }
            else if (flag == '远程') {
                this.$router.replace({ path: '/main/configRemote' })
            }
            else if (flag == 'remote') {
                this.$router.replace({ path: '/main/configRemote' })
            }
            else if (flag == '漏洞扫描') {
                this.$router.replace({ path: '/main/configSca' })
            }
            else if (flag == 'Vulnerability scanning') {
                this.$router.replace({ path: '/main/configSca' })
            }
            else if (flag == '漏洞检测') {
                this.$router.replace({ path: '/main/configVd' })
            }
            else if (flag == 'Vulnerability detection') {
                this.$router.replace({ path: '/main/configVd' })
            }
            else if (flag == '规则集') {
                this.$router.replace({ path: '/main/configRuleset' })
            }
            else if (flag == 'Rule set') {
                this.$router.replace({ path: '/main/configRuleset' })
            }
            else if (flag == '规则测试') {
                this.$router.replace({ path: '/main/configRuleTest' })
            }
            else if (flag == 'Rule test') {
                this.$router.replace({ path: '/main/configRuleTest' })
            }
            else if (flag == '完整性检查') {
                this.$router.replace({ path: '/main/configSyscheck' })
            }
            else if (flag == 'Integrity check') {
                this.$router.replace({ path: '/main/configSyscheck' })
            }
            else if (flag == '地址组') {
                this.$router.replace({ path: '/main/configAddressGroups' })
            }
            else if (flag == 'AddressGroups') {
                this.$router.replace({ path: '/main/configAddressGroups' })
            }
            else if (flag == 'PortGroups') {
                this.$router.replace({ path: '/main/configPortGroups' })
            }
            else if (flag == '端口组') {
                this.$router.replace({ path: '/main/configPortGroups' })
            }
        }
    }
}
</script>

<style lang="scss">
.boxCard {
    margin: 1vh 1vw;
    justify-content: space-between;
    box-sizing: border-box;
    display: block;

    .form-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(255, 255, 255, 1);
        width: 21.5vw;

        .form-left {
            height: 61px;
            margin: 1vh 0vw;
            width: 15vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .name {
                font-size: 16px;
                font-weight: bold;
                width: 64px;
                height: 22px;
                color: rgba(31, 30, 72, 1);
                line-height: 22px;
            }

            .description {
                width: 84px;
                height: 17px;
                color: rgba(136, 135, 153, 1);
                font-size: 12px;
                line-height: 17px;
            }
        }

        .form-right {
            margin: 1vh 1vw;

            .el-icon-edit-outline,
            .el-button {
                color: #4A61D5;
                font-size: 12px;
            }

            .el-button {
                border: 1px solid #4A61D5;
            }
        }
    }
}
</style>

二、configuration

<template>
    <div>
        <!-- 表格 -->
        <div class="form">
            <div class="title">
                <!-- 标题栏 -->
                <span class="titleName">Wazuh</span>
                <div class="ico">

                </div>
            </div>
            <!-- 卡片表格 -->
            <div class="cardList">
                <!-- 1 -->
                <div class="cardCol">
                    <configCard :bigName="$t('message.Global')" :littleName="$t('message.Full aggregation remote setting')">
                    </configCard>
                    <configCard :bigName="$t('message.Cluster')" :littleName="$t('message.Master node configuration')">
                    </configCard>
                    <configCard :bigName="$t('message.Registration service')"
                        :littleName="$t('message.Automatic agent registration service')"></configCard>
                    <configCard :bigName="$t('message.alarm')"
                        :littleName="$t('message.Settings related to alerts and their formats')"></configCard>

                    <configCard :bigName="$t('message.Policy supervision')"
                        :littleName="$t('message.Configure to ensure compliance with security policies, standards and hardening guidelines')">
                    </configCard>

                    <configCard :bigName="'CIS-CAT'"
                        :littleName="$t('message.Use CIS scanner and SCAP check for configuration evaluation')">
                    </configCard>
                    <configCard :bigName="'Osquery'"
                        :littleName="$t('message.Expose the operating system to a high-performance relational database')">
                    </configCard>
                    <configCard :bigName="'Syscollector'" :littleName="$t('message.Specify the Wodle module to configure')">
                    </configCard>
                    <configCard :bigName="$t('message.order')"
                        :littleName="$t('message.Configuration options for Command wodle')"></configCard>

                    <configCard :bigName="$t('message.Local log file monitor')"
                        :littleName="$t('message.Identify changes in the contents, permissions, ownership and attributes of files')">
                    </configCard>
                    <configCard :bigName="$t('message.journal')" :littleName="$t('message.Log record')"></configCard>


                    <configCard :bigName="$t('message.remote')" :littleName="$t('message.Remote log collector')">
                    </configCard>
                    <configCard :bigName="$t('message.Vulnerability scanning')"
                        :littleName="$t('message.System vulnerability scanning')"></configCard>
                    <configCard :bigName="$t('message.Vulnerability detection')"
                        :littleName="$t('message.System vulnerability scanning')"></configCard>
                    <configCard :bigName="$t('message.Integrity check')"
                        :littleName="$t('message.Configure system integrity check')"></configCard>
                    <configCard :bigName="$t('message.Local system log')"
                        :littleName="$t('message.Define local system log files')"></configCard>
                    <configCard :bigName="$t('message.Rule set')" :littleName="$t('message.Define rule set')"></configCard>

                    <configCard :bigName="$t('message.Rule test')"
                        :littleName="$t('message.Define rule test options to specify how the Wazuh agent tests rules')">
                    </configCard>

                </div>
                <!-- 2 -->
                <div class="card2">
                    <span class="titleName">Suricata</span>
                    <div class="cardCol">
                        <configCard :bigName="$t('message.AddressGroups')"
                            :littleName="$t('message.Define address groups')"></configCard>

                        <configCard :bigName="$t('message.PortGroups')" :littleName="$t('message.Define port groups')">
                        </configCard>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import configCard from '@/views/configuration/configCard.vue'
export default {
    data() {
        return {
            // configList: [{
            //     name: '',
            //     description: '',
            // }]
            data11: {},
            query: {
                ddd: ''
            }
        }
    },
    components: {
        configCard
    },
    methods: {
        async getEditor(arg) {
            this.query.ddd = arg
            let result = await this.$api.configuration.getEditor(this.query)
            // console.log('XML11', result);
            this.xmlCode = result;
            // 调用转换方法
            this.data11 = this.$x2js.xml2js(result);
            // console.log('aaaa', this.data11);
        }
    },
    created() {
        this.getEditor()
    }
}
</script>

<style lang="scss">
* {
    padding: 0;
    margin: 0;
}

//表格样式
.form {
    margin-top: 10vh;

    .titleName {
        margin: 2vh 1vw;
        width: 96px;
        height: 33px;
        color: rgba(31, 30, 72, 1);
        font-size: 20px;
        font-weight: 600;
        line-height: 33px;
    }

    .cardList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cardCol {
        display: flex;
        flex-wrap: wrap;
    }

    //标题栏样式
    .title {
        display: flex;
        justify-content: space-between;

        .el-button {
            font-size: 12px;
        }

        .ico {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
                margin: 0vh 1vw;
            }

            .el-icon-refresh-right,
            .el-icon-edit-outline {
                color: #4A61D5;
            }

            .el-button {
                color: #4A61D5;
                border: 1px solid #4A61D5;
            }
        }
    }
}</style>

三、configAuth

<template>
    <div>
        <el-card>
            <!-- 标头 -->
            <div class="headerTitle">
                <div class="titleText">
                    <div class="titleLeft">
                        <i class="el-icon-arrow-left" @click="goBackPath"></i>
                    </div>
                    <div class="titleRight">
                        <div class="rightTop">
                            <span class="registerSev">{{ $t('message.Registration service') }}</span>&nbsp;&nbsp;&nbsp;
                            <span class="enabled">{{ $t('message.enbled') }}</span><br>
                            <span class="autoRegister">{{ $t('message.Automatic agent registration service') }}</span>
                        </div>
                        <div class="rightBottom">
                        </div>
                    </div>
                </div>

                <div class="icoa">
                </div>
            </div>

            <!-- 表单模式 -->
            <div class="formList" v-if="activeName == 'form'">
                <!-- 主要设置部分 -->
                <div class="mainSettings">
                    <div class="mainSet">
                    </div>
                    <div class="iconRight">
                        <el-button type="primary" @click="save(1)">保存</el-button>
                        <button><i class="el-icon-edit-outline"></i>{{ $t('message.Form mode') }}</button>
                        <button @click="goJson"><i class="el-icon-c-scale-to-original"></i>JSON</button>
                        <button @click="goExpert"><i class="el-icon-s-custom"></i>{{ $t('message.Expert mode') }}</button>
                    </div>
                </div>

                <!-- 表单 -->
                <el-form>
                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable authentication and encryption options')
                        }}</span>
                        <el-input v-model="status1"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.The port number on which the Wazuh agent will listen')
                        }}</span>
                        <el-input v-model="status2"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">
                            {{ $t('message.Enable or disable IP address verification to ensure the legitimacy') }}
                        </span>
                        <el-input v-model="status3"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Timeout for disconnecting idle connection (in seconds)')
                        }}</span>
                        <el-input v-model="status4"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable password authentication') }}</span>
                        <el-input v-model="status5"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.List of allowed encryption algorithms') }}</span>
                        <el-input v-model="status6"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable SSL hostname verification') }}</span>
                        <el-input v-model="status7"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.SSL certificate path of management server') }}</span>
                        <el-input v-model="status8"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.SSL private key path of management server') }}</span>
                        <el-input v-model="status9"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable auto-negotiation of SSL/TLS version')
                        }}</span>
                        <el-input v-model="status10"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <!-- JSON模式 -->
            <div class="jsonModel" v-if="activeName == 'json'">
                <!-- XML查看器部分 -->
                <div class="mainSettings">
                    <div class="mainSet">
                    </div>
                    <div class="iconRight">
                        <el-button type="primary" @click="save(2)">保存</el-button>
                        <button @click="goForm"><i class="el-icon-edit-outline"></i>{{ $t('message.Form mode') }}</button>
                        <button><i class="el-icon-c-scale-to-original"></i>JSON</button>
                        <button @click="goExpert"><i class="el-icon-s-custom"></i>{{ $t('message.Expert mode') }}</button>
                    </div>
                </div>

                <!-- 模式框 -->
                <div class="models">
                    <!-- 引用插件 -->
                    <VueDataEditor @input="jsonCodeChange" :value="jsonCode" :disable="false"></VueDataEditor>
                </div>
            </div>

            <!-- 专家模式 -->
            <div class="expertModel" v-if="activeName == 'expert'">
                <!-- XML查看器部分 -->
                <div class="mainSettings">
                    <div class="mainSet">
                    </div>
                    <div class="iconRight">
                        <el-button type="primary" @click="save(3)">保存</el-button>
                        <button @click="goForm"><i class="el-icon-edit-outline"></i>{{ $t('message.Form mode') }}</button>
                        <button @click="goJson"><i class="el-icon-c-scale-to-original"></i>JSON</button>
                        <button><i class="el-icon-s-custom"></i>{{ $t('message.Expert mode') }}</button>
                    </div>
                </div>

                <!-- 模式框 -->
                <div class="models">
                    <!-- 引用插件 -->
                    <VueDataEditor @input="xmlCodeChange" :value="xmlCode" :disable="false"></VueDataEditor>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>

import axios from 'axios'
import VueDataEditor from '@/views/configuration/editor'
export default {
    data() {
        return {
            data11: {},
            //表格传入数据
            status1: '',
            status2: '',
            status3: '',
            status4: '',
            status5: '',
            status6: '',
            status7: '',
            status8: '',
            status9: '',
            status10: '',

            query: {
                ddd: ''
            },
            expert: [],
            xmlCode: '',
            disable: false,
            // 双向绑定的值
            jsonCode: '',
            activeName: "form",
            jsonA: ''

        }
    },
    components: {
        VueDataEditor
    },
    methods: {
        async save(val) {
            switch (val) {
                case 1: {
                    // const result = await this.$api.configuration.updateXMLWazuh(this.initJsonData)
                    // console.log(result);
                    // break;
                }
                case 2: {
                    // const result = await this.$api.configuration.updateXMLWazuh(this.jsonCode)
                    // break;
                }
                case 3: {
                    console.log(this.xmlCode);
                    const xml = this.xmlCode
                    console.log(xml);
                    console.log(this.$x2js);
                    console.log(this.$x2js.xml2dom(xml));
                    const a = this.$x2js.xml2js(xml)
                    console.log(a);
                    this.initJsonData.auth = a
                    this.b.ossec_config = this.initJsonData
                    console.log(this.b);
                    // const result = await this.$api.configuration.updateXMLWazuh(this.b)
                    // console.log(result);
                    if (result.code == 200) {
                        this.$message.success(this.$t('message.modify successfully'))
                    }
                    break;
                }
            }
        },
        //箭头跳转
        goBackPath() {
            this.$router.replace({ path: '/main/configuration' })
        },
        //点击到表单页面
        goForm() {
            this.activeName = "form"
        },
        //点击到Json页面
        goJson() {
            this.activeName = "json"
        },
        //点击到专家页面
        goExpert() {
            this.activeName = "expert"
        },
        // 子组件传递过来的最新值的方法
        jsonCodeChange(event) {
            this.jsonCode = event;
        },
        xmlCodeChange(event) {
            this.xmlCode = event;
        },

        async getEditor(arg) {
            this.query.ddd = arg
            let result = await this.$api.configuration.getEditor(this.query)
            console.log('alalal', result);
            // this.initData = result
            // this.xmlCode = result;
            // // 调用转换方法
            // //转为 json
            this.initJsonData = result.data.affected_items[0]
            // console.log('editorJson', this.data11);


            // //截取后的json数据
            let jsonA = this.initJsonData.auth
            // console.log('AAA', jsonA);

            // this.jsonCode = JSON.stringify(jsonA)
            // console.log('json111', this.jsonCode);

            // //截取后的xml数据
            // let xmlaa = jsonA;
            // console.log('BBB', xmlaa);

            let A222 = this.$x2js.js2xml(jsonA)
            this.xmlCode = A222
            // console.log('xml111', A222);
        }
    },
    created() {
        this.getEditor()
    }
}
</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

//按钮
button {
    background-color: #fff;
    border-radius: 5%;
    color: #4A61D5;
    border: 1px solid #4A61D5;
    margin: 0vh 1vw;
    padding: 2vh 1.5vw;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

//头部标题
.headerTitle {
    display: flex;
    justify-content: space-between;
    margin: 1vh 0vw;

    .titleText {
        display: flex;
        justify-content: space-between;

        .titleLeft {
            .el-icon-arrow-left {
                color: #5D75FA;
                font-size: 60px;
                cursor: pointer;
            }
        }

        .titleRight {
            .registerSev {
                color: rgba(77, 94, 128, 1);
                font-size: 16px;
                font-weight: 500;
                line-height: 32px;
            }

            .enabled {
                background-color: #FDEEED;
                padding: 0.5vh 1vw;
                border-radius: 50%;
            }

            .autoRegister {
                color: rgba(136, 135, 153, 1);
                font-size: 16px;
                line-height: 28px;
                margin-top: 8px;
                padding: 0.5vh 0vw;
            }
        }
    }
}

// 主要设置部分
.mainSettings {
    display: flex;
    justify-content: space-between;
    margin: 3vh 1vw;

    .mainSet {
        .mainSets {
            width: 96px;
            height: 32px;
            overflow-wrap: break-word;
            color: rgba(77, 94, 128, 1);
            font-size: 16px;
            font-weight: 500;
            line-height: 32px;
        }

        .registerConfig {
            width: 240px;
            height: 28px;
            color: rgba(136, 135, 153, 1);
            font-size: 16px;
            line-height: 28px;
            padding: 0.5vh 0vw;
        }
    }

    .iconRight {
        display: flex;
        justify-content: space-between;
        align-items: center;


        .el-icon-refresh-right,
        .el-icon-edit-outline,
        .el-icon-question {
            color: #4A61D5;
        }


    }
}

// 表格部分
.formList {
    margin: 1vh 1vw;

    .formListItem {
        width: 96px;
        height: 32px;
        color: rgba(77, 94, 128, 1);
        font-size: 16px;
        font-weight: 500;
        line-height: 32px;
    }

    .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .el-form-item {
        margin-bottom: 10px;
        width: 40vw;
    }
}

.ico {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icoa {

    .el-icon-refresh-right,
    .el-icon-edit-outline {
        color: #4A61D5;
    }
}

//模式框
.models {
    width: 92%;
    height: 40%;
    margin: 3vh 3vw;

    .buttonBottom {
        text-align: center;
        padding-bottom: 5vh;
    }
}
</style>

四、分页

<template>
    <div class="list-container">
        <!-- 表头搜索 -->
        <div style="border-bottom: 1px solid #dcdee2;margin-bottom: 20px;">
            <div style="width: 600px;display: flex;padding: 20px;">
                <p style="width:140px;line-height: 40px;">用户搜索 ：</p>
                <el-input v-model="inputValue" placeholder="请输入用户" clearable @clear="clear">
                    <template #append>
                        <el-select style="width: 110px;" v-model="optionsValue" class="m-2" placeholder="请选择" size="large">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </template>
                </el-input>
                <div style="display: flex;margin-left: 20px;">
                    <el-button @click="searchUser(inputValue, optionsValue)" type="primary" size="large">搜索</el-button>
                    <el-button @click="reset" size="large">重置</el-button>
                </div>
            </div>
        </div>

        <div style="margin-bottom: 20px;margin-left: 20px;">
            <el-button type="primary" @click="addUser" size="large">添加用户</el-button>
            <el-button @click="sendCoupon" size="large">发送优惠券</el-button>
            <el-button @click="setGroup" size="large">批量设置分组</el-button>
            <el-button @click="setLabel" size="large">批量设置标签</el-button>
            <el-button @click="exportExcel" size="large" :icon="Upload">导出</el-button>
        </div>

        <!-- 表格主体 -->
        <div>
            <el-table v-loading="loading" :data="tableData" @selection-change="getCheckboxInfo" style="width: 100%;" ref="table">
                <!-- 展开行 -->
                <el-table-column type="expand">
                    <template #default="props">
                        <!-- {{ props.row }} -->
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="首次访问：">
                                <span>{{ new Date(props.row.add_time).toLocaleString() }}</span>
                            </el-form-item>
                            <el-form-item label="近次访问：">
                                <span>{{ new Date(props.row.last_time).toLocaleString() }}</span>
                            </el-form-item>
                            <el-form-item label="身份证号：">
                                <span></span>
                            </el-form-item>
                            <el-form-item label="真实姓名：">
                                <span>{{ props.row.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="标签：">
                                <span>{{ props.row.labels }}</span>
                            </el-form-item>
                            <el-form-item label="生日：">
                                <span>{{ props.row.birthday }}</span>
                            </el-form-item>
                            <el-form-item label="推荐人：">
                                <span>{{ props.row.spread_uid_nickname }}</span>
                            </el-form-item>
                            <el-form-item label="地址：">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                            <el-form-item label="备注：">
                                <span></span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column type="selection" @selection-change="getCheckboxInfo" width="55" />
                <el-table-column prop="uid" label="用户ID"></el-table-column>
                <el-table-column v-slot="scope" label="头像">
                    <el-image :src="scope.row.avatar" style="width: 50px;" />
                </el-table-column>
                <el-table-column prop="nickname" label="姓名"></el-table-column>
                <el-table-column prop="vip_name" label="付费会员">
                    <template #default="props">
                        {{ props.row.vip_name === false ? '否' : '是' }}
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="用户等级"></el-table-column>
                <el-table-column prop="group_id" label="分组"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="user_type" label="用户类型"></el-table-column>
                <el-table-column prop="edit" label="操作" fixed="right" width="200">
                    <template v-slot="scope">
                        <div>
                            <el-button type="text" @click="xiangqing(scope.row)">详情</el-button>
                            <!-- 移入 -->
                            <el-popover placement="bottom" :width="100" trigger="hover"
                                v-model:popoverVisible="popoverVisible">
                                <el-menu style="width: 150px;margin-left: -10px;">
                                    <el-menu-item style="height:40px">积分余额</el-menu-item>
                                    <el-menu-item style="height:40px">赠送会员</el-menu-item>
                                    <el-menu-item style="height:40px">设置分组</el-menu-item>
                                    <el-menu-item style="height:40px">设置标签</el-menu-item>
                                    <el-menu-item style="height:40px">修改上级推广人</el-menu-item>
                                </el-menu>
                                <template #reference>
                                    <el-button type="text">更多</el-button>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 点击详情右侧弹出的抽屉 -->
            <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="1100">
                <div style="border-bottom: 1px solid #e8eaec;padding-bottom: 20px;">
                    <h3>用户详情</h3>
                </div>
                <div class="drawer-container" style="display: flex;">
                    <div style="padding: 20px;">
                        <el-image :src="DetailInfo.avatar" style="border-radius: 50%;width: 80px;" />
                    </div>
                    <div style="display: flex;margin-top:50px;justify-content: space-evenly;width: 400px;">
                        <div>
                            用户名：{{ DetailInfo.nickname }}
                        </div>
                        <div>
                            余额：{{ DetailInfo.now_money }}
                        </div>
                        <div>
                            总消费金额：{{ DetailInfo.pay_count }}
                        </div>
                    </div>
                    <el-button v-show="!editflag" @click="edit(DetailInfo)" type="primary" size="large"
                        style="margin-left: 420px;margin-top: 30px;">编辑</el-button>
                    <div style="margin-left: 370px;margin-top: 30px;" v-show="editflag">
                        <el-button size="large" @click="editflag = false">取消</el-button>
                        <el-button type="primary" size="large" @click="saveInfo(DetailInfo)">保存</el-button>
                    </div>

                </div>
                <div>
                    <!-- 可以左右切换的标签页 -->
                    <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick1">
                        <el-tab-pane label="用户信息" name="one">
                            <div class="demo-tabs-item"
                                style="display: flex; justify-content: space-between;padding: 40px;flex-wrap: wrap;">
                                <div v-show="!editflag">用户编号：{{ DetailInfo.uid }}</div>
                                <div v-show="editflag">
                                    用户编号：<el-input disabled v-model="DetailInfo.uid" style="width: 200px;"></el-input>
                                </div>
                                <div v-show="!editflag">真实姓名：{{ DetailInfo.real_name === '' ? '-' : DetailInfo.real_name }}
                                </div>
                                <div v-show="editflag">
                                    真实姓名：<el-input v-model="DetailInfo.real_name" style="width: 200px;"></el-input>
                                </div>
                                <div v-show="!editflag">手机号码：{{ DetailInfo.phone }}</div>
                                <div v-show="editflag">
                                    手机号码：<el-input v-model="DetailInfo.phone" style="width: 200px;"></el-input>
                                </div>
                                <div v-show="!editflag">生日：{{ new Date(DetailInfo.add_time).toLocaleString() }}</div>
                                <div v-show="editflag">
                                    生日： <el-date-picker style="width: 200px;" v-model="DetailInfo.add_time" type="date"
                                        placeholder="请选择日期" :size="size" />
                                </div>
                                <div v-show="!editflag">性别：{{ DetailInfo.sex }}</div>
                                <div v-show="editflag">
                                    性别：
                                    <el-radio-group v-model="DetailInfo.sex">
                                        <el-radio label="男" value="1" />
                                        <el-radio label="女" value="2" />
                                        <el-radio label="保密" value="0" />
                                    </el-radio-group>
                                </div>
                                <div v-show="!editflag">地址：{{ DetailInfo.addres === '' ? '-' : DetailInfo.addres }}</div>
                                <div v-show="editflag">
                                    地址：<el-input style="width: 200px;" v-model="DetailInfo.addres"></el-input>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="消费记录" name="two">消费记录</el-tab-pane>
                        <el-tab-pane label="积分明细" name="three">积分明细</el-tab-pane>
                        <el-tab-pane label="签到记录" name="four">签到记录</el-tab-pane>
                        <el-tab-pane label="持有优惠券" name="five">持有优惠券</el-tab-pane>
                        <el-tab-pane label="余额变动" name="six">余额变动</el-tab-pane>
                        <el-tab-pane label="好友关系" name="seven">好友关系</el-tab-pane>
                    </el-tabs>
                </div>
            </el-drawer>
            <!-- 点击增加弹出的抽屉 -->
            <el-drawer v-model="drawer1" title="I am the title" :with-header="false" :size="750">
                <div style="border-bottom: 1px solid #e8eaec;padding-bottom: 10px;">
                    <h3>用户信息填写</h3>
                </div>
                <div style="margin-top: 20px;">
                    <el-form :rules="rules">
                        <el-form-item label="真实姓名：" prop="name">
                            <el-input placeholder="请输入真实姓名" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="手机号码：" prop="phone">
                            <el-input placeholder="请输入真实姓名" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="生日：">
                            <el-date-picker placeholder="请选择生日" />
                        </el-form-item>
                        <el-form-item label="身份证号：">
                            <el-input placeholder="请输入身份证号" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="用户地址：">
                            <el-input placeholder="请输入用户地址" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="用户备注：">
                            <el-input placeholder="请输入用户备注" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="登录密码：" prop="password">
                            <el-input placeholder="请输入登录密码（修改用户可不填写，不填写不修改原始密码）" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="确认密码：" prop="surePassword">
                            <el-input placeholder="请输入确认密码（修改用户可不填写，不填写不修改原始密码）" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="用户等级：">
                            <el-select v-model="value" placeholder="请选择" size="large">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户分组：">
                            <el-select v-model="value" placeholder="请选择" size="large">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户标签：">
                            <el-input placeholder="请选择用户关联标签" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="推广资格：">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">启用</el-radio>
                                <el-radio label="2" size="large">禁用</el-radio>
                            </el-radio-group>

                        </el-form-item>
                        <div style="padding-bottom: 20px;text-indent:6em;color:#bbbbbb;">指定分销模式下，开启或关闭用户的推广权限</div>
                        <el-form-item label="推广权限：">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">开启</el-radio>
                                <el-radio label="2" size="large">锁定</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div style="padding-bottom: 20px;text-indent:6em;color:#bbbbbb;">指定分销模式下，开启或关闭用户的推广权限</div>
                        <el-form-item label="用户状态：">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">开启</el-radio>
                                <el-radio label="2" size="large">锁定</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="float: right;border-top: 1px solid #e8e8e8;padding-top: 20px;">
                    <el-button>取消</el-button>
                    <el-button type="primary">提交</el-button>
                </div>
            </el-drawer>
            <div>
                <!-- 分页 -->
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    layout="total, prev, pager, next, jumper" :total="count" style="padding: 20px;margin-left: 50%;" />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, ref, reactive } from 'vue';
import api from '@/api';
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'

import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
// ---------------------------- 初始化数据 ----------------------------

// exportExcel() =>{  
//     // 构造数据  
//     const data = [    
//         ['姓名', '年龄', '性别'],    
//         ['张三', 18, '男'],    
//         ['李四', 20, '女'],    
//         ['王五', 22, '男'],  
//     ]  
//     // 创建 Workbook 对象  
//     const workbook = XLSX.utils.book_new()  
//     // 创建 Worksheet 对象  
//     const worksheet = XLSX.utils.aoa_to_sheet(data)  
//     // 将 Worksheet 添加到 Workbook 中  
//     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')  
//     // 将 Workbook 转换成二进制数据流  
//     const binaryData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })  
//     // 将二进制数据流保存为文件  
//     saveAs(new Blob([binaryData], { type: 'application/octet-stream' }), 'data.xlsx')
// }
const loading = ref(true)   
let tableData = ref()
let count = ref()
let currentPage = ref(1)
const pageSize = ref(1)
const drawer = ref(false)
const drawer1 = ref(false)
const activeName1 = ref('one')
const optionsValue = ref('')
const inputValue = ref('')
const options = [
    {
        value: '',
        label: '全部',
    },
    {
        value: 'uid',
        label: 'UID',
    },
    {
        value: 'phone',
        label: '手机号',
    },
    {
        value: 'nickname',
        label: '用户昵称',
    }
]
const DetailInfo = ref()
let editflag = ref(false)

// 接收父组件传过来的数据
let props = defineProps({
    flag: String,
})
// 添加用户的表单验证
let rules = reactive({
    name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: '长度必须是3-5位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 18, message: '长度必须是6-18位', trigger: 'blur' },
    ]
})

// ---------------------------- 函数逻辑部分 --------------------------
async function getUserList(arg) {
    let res = await api.user.getUserList(arg)
    // console.log(res.data.data);
    if(res.data.data.list){
        loading.value = false
    }
    // 总条数
    count.value = res.data.data.count;
    tableData.value = res.data.data.list
}
// 编辑接口
async function editUserInfo(uid, data) {
    let res = await api.user.editUserInfo(uid, data)
    console.log(res);
    if (res.data.status === 200) {
        editflag.value = !editflag.value
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
    }
    else if (res.data.status === 400) {
        ElMessage({
            message: '请填写您的姓名和电话',
            type: 'error',
        })
    } else {
        ElMessage({
            message: '修改失败，请检查网络或重新尝试',
            type: 'error',
        })
    }
}

// 搜索
function searchUser(arg1, arg2) {
    console.log(arg1, arg2);
    console.log({ field_key: arg2, nickname: arg1 });

    getUserList({ page: pageSize, limit: 15, field_key: arg2, nickname: arg1 })
}
// 重置
function reset() {
    optionsValue.value = ''
    inputValue.value = ''
    getUserList({ page: pageSize, limit: 15 })
}

// 添加用户
function addUser() {
    drawer1.value = true
    
}

// 点击某一行的多选框触发
function getCheckboxInfo(val) {
    // 获取选中的复选框个数
    // console.log(val.length);

    // 获取这一行的数据
    // console.log(val[0].uid);
}

// 点击详情
function xiangqing(arg: any) {
    console.log(arg);
    drawer.value = true
    DetailInfo.value = arg
}
// 点击查看更多
function more(arg) {

}
// 分页部分
const handleSizeChange = (pageSize: number) => {
    //   console.log(`${pageSize} items per page`)
}
const handleCurrentChange = (currentPage: number) => {
    //   console.log(`current page: ${currentPage}`)
    getUserList({ page: currentPage, limit: 15 })
}

// 编辑
function edit(arg) {
    // console.log(arg);
    editflag.value = !editflag.value
}
// 点击保存触发
function saveInfo(data) {
    console.log(data);
    // 将日历选择的格式转化为时间戳
    data.add_time = new Date(data.add_time).valueOf()
    // console.log(new Date(data.add_time).valueOf());
    editUserInfo(data.uid, data)
}

onMounted(() => {
    getUserList({ user_type: props.flag, page: pageSize, limit: 15 })
})
</script>

<style lang='scss' scoped>
.list-container {
    background-color: white;
}

.demo-table-expand {
    padding: 0;
    font-size: 0;
    margin-left: 50px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.demo-tabs-item div {
    margin-bottom: 20px;
}
</style>

五、usersCenter

<template>
    <div>
        <el-card>
    <el-form :inline="true">
        <el-form-item>
            <el-select placeholder="请选择类型" v-model="query.type">
                <el-option label="用户名" value="username"></el-option>
                <el-option label="手机号" value="phone"></el-option>
                <el-option label="邮箱" value="email"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input placeholder="请输入值" v-model="query.value"></el-input>
        </el-form-item>
        <el-form-item>
             <el-button icon="el-icon-search" type="primary" @click="getUsers">搜索</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="list" stripe border>
      <el-table-column prop="username" label="用户名" align="center" />
      <el-table-column prop="phone" label="电话" align="center"/>
      <el-table-column prop="email" label="邮箱" align="center"/>
      <el-table-column prop="auth" label="角色" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.auth==1?'primary':'success'">
                 {{scope.row.auth==1?"超级管理员":scope.row.auth==2?"普通管理员":""}}
            </el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="image" label="头像" align="center">
            <template slot-scope="scope">
                <el-avatar :size="50" :src="scope.row.image"></el-avatar>
            </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
           <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateUser(scope)">编辑</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
           </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
     <el-pagination
       background
       layout="sizes, prev, pager, next, jumper, ->, total, slot"
      :total="total"
      :page-size="query.pageSize"
      :current-page="query.currentPage"
      :page-sizes="[5,10,15,20]"
      @size-change="changePageSize"
      @current-change="changeCurrentPage">
     </el-pagination>
      </el-card>

      <!-- 修改的模态框 -->
      <el-dialog
        title="修改用户"
         :visible.sync="updateDialogVisible"
         width="650px">
          <el-form label-width="60px">
            <el-form-item label="用户名">
                <el-input v-model="updateUserItem.username"></el-input>
            </el-form-item>
             <el-form-item label="电话">
                <el-input v-model="updateUserItem.phone"></el-input>
            </el-form-item>
             <el-form-item label="邮箱">
                <el-input v-model="updateUserItem.email"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="updateUserItem.password"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <!-- <el-radio-group v-model="updateUserItem.auth">
                  <el-radio label="超级管理员" :value="1"></el-radio>
                  <el-radio label="普通管理员" :value="2"></el-radio>
              </el-radio-group> -->
              <el-select placeholder="选择角色" v-model="updateUserItem.auth">
                <el-option label="超级管理员" :value="1"></el-option>
                <el-option label="普通管理员" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="头像">
                <el-input v-model="updateUserItem.image"></el-input>
            </el-form-item>
          </el-form>
           <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUserApi">确 定</el-button>
          </span>
      </el-dialog>
    </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapMutations:mapTabsMutations}=createNamespacedHelpers("tabs")
export default {
  data() {
    return {
      list: [],
      total: 0,
      query:{
        type:'',
        value:'',
        pageSize:5,
        currentPage:1
      },
      updateDialogVisible:false,
      updateUserItem:{
        username:'',
        auth:1
      }
    };
  },
  methods: {
    ...mapTabsMutations(["addTabs"]),
    async getUsers() {
      const result = await this.$api.users.getUsers(this.query);
      console.log("result", result.data);
      this.list = result.data.result;
      this.total = result.data.total;
    },
    changePageSize(args){
      this.query.pageSize=args
      this.getUsers()
    },
    changeCurrentPage(args){
       this.query.currentPage=args
       this.getUsers()
    },
    updateUser(args){
      console.log('args',args.row);
      this.updateUserItem={...args.row}
      //显示模态框
      //this.updateUser.username=args.row.username
      this.updateDialogVisible=true
    },
    async updateUserApi(){
      console.log('修改后的数据',this.updateUserItem);
      const result=await this.$api.users.updateUsers(this.updateUserItem)
      console.log('resultss',result);
      if(result.code){
        this.$message.success(result.message)
        //重新渲染列表页面
        this.getUsers()
        //模态框关闭
        this.updateDialogVisible=false
      }
    }
  },
  created() {
    this.getUsers();
  },
   beforeRouteEnter(to,from,next){
        next(vm=>{
           vm.addTabs(to)
        })
    }
};
</script>

<style>
</style>

六、userModify

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>修改用户信息</span>
      </div>
      <div>
         <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input placeholder="请输入用户名" v-model="loginUser.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="loginUser.password"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input placeholder="请输入电话" v-model="loginUser.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input placeholder="请输入邮箱" v-model="loginUser.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="loginUser.auth">
                    <el-option :value="1" label="超级管理员">超级管理员</el-option>
                    <el-option :value="2" label="普通管理员">普通管理员</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                    class="avatar-uploader"
                    action="http://www.zhaijizhe.cn:3005/images/uploadImages"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <!-- <img v-if="loginUser.image" :src="loginUser.image" class="avatar"> -->
                     <el-image 
                        v-if="loginUser.image"
                        :src="loginUser.image" 
                        class="avatar">
                    </el-image>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifyUserInfo" class="loginbtn">修改</el-button>
            </el-form-item>

         </el-form>
         
      </div>
    </el-card>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {

    computed:{
        ...mapState(['loginUser'])
    },
    methods:{
        ...mapActions(['modifyUserAsync']),
        handleAvatarSuccess(args){
           console.log('args',args);
           this.loginUser.image=`http://www.zhaijizhe.cn:3005${args.data[0]}`
           
        },
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        modifyUserInfo(){
            console.log('user',this.loginUser);
            this.modifyUserAsync(this.loginUser)
        }
    }
};
</script>

<style scoped>
  .avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .loginbtn{
    width: 100px;
  }
</style>

七、studentList

<template>
    <div>
        <!-- 卡片区域 -->
       <el-card>
            <el-row>
                <el-col :span="24">
                    <div>
                        <el-button type="primary" @click="openAddDialog">增加学员</el-button>
                        <el-button type="primary" @click="deleteMe">删除</el-button>
                    </div>
                </el-col>
            </el-row>
       </el-card>
        <!-- 增加学生的模态框 -->
        <el-dialog
            title="增加学生"
            :visible.sync="addStudentDialogVisible"
            width="650px"
            :before-close="handleCloseAddStudentDialog">
            <el-form label-width="70px">
                <el-form-item label="姓名">
                    <el-input placeholder="请输入用户名" v-model="addStudentItem.name"/>
                </el-form-item>
                 <el-form-item label="年龄">
                    <el-input placeholder="请输入年龄" v-model="addStudentItem.age"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="addStudentItem.gender">
                        <el-option  value="男" label="男"></el-option>
                         <el-option value="女" label="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业">
                    <el-select v-model="addStudentItem.subjectsId">
                        <el-option v-for="item in subjectsAllList" :key="item._id" :label="item.name" :value="item._id"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="班级">
                        <el-select v-model="addStudentItem.classesId">
                            <el-option v-for="item in classesBySubjectList" :key="item._id" :value="item._id" :label="item.name"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://www.zhaijizhe.cn:3005/images/uploadImages"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="addStudentItem.image" :src="addStudentItem.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
           

            <span slot="footer" class="dialog-footer">
                <el-button @click="addStudentDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addStudentApi">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapMutations:mapTabsMutations}=createNamespacedHelpers("tabs")
export default {
    data(){
        return{
            addStudentDialogVisible:false,
            subjectsAllList:[],
            classesBySubjectList:[],
            addStudentItem:{
                name:'',
                age:'',
                gender:'',
                subjectsId:'',
                classesId:'',
                image:''
            }
        }
    },
    methods:{
        ...mapTabsMutations(['addTabs']),
        deleteMe(){
            let p=this.$api.students.deleteStudents("6409a665f763e04f125d6c23")
            console.log('p',p);
        },
        openAddDialog(){
            this.addStudentDialogVisible=true
        },
        handleCloseAddStudentDialog(){
            this.addStudentDialogVisible=false
        },
        async addStudentApi(){
            // console.log('学生对象',this.addStudentItem);
            const result=await this.$api.students.addStudents(this.addStudentItem)
            if(result.code){
                this.$message.success(result.message)
                //将表单中的数据清空
                this.addStudentItem.name=""
                this.addStudentItem.age=""
                this.addStudentItem.gender=""
                this.addStudentItem.subjectsId=""
                this.addStudentItem.classesId=""
                this.addStudentItem.image=""
                this.addStudentDialogVisible=false
            }
        },
        //获取所有的专业
        async getAllSubjects(){
            const result=await this.$api.subjects.getSubjects()
            console.log('所有专业',result.data.result);
            this.subjectsAllList=result.data.result
        },
        handleAvatarSuccess(args){
            console.log('args',args);
           this.addStudentItem.image=`http://www.zhaijizhe.cn:3005${args.data[0]}`
           
        },
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    watch:{
        'addStudentItem.subjectsId':{
            handler:async function(newVal){
                let result=await this.$api.classes.getClassesBySubjectsId(newVal)
          
                this.classesBySubjectList=result.data.result
                this.addStudentItem.classesId=""
            }
        }
    },
    created(){
        this.getAllSubjects()
    },
    beforeRouteEnter(to,from,next){
        next(vm=>{
           vm.addTabs(to)
        })
    }
}
</script>

<style lang="scss" scoped>
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }


   .avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

八、classList

<template>
  <div>
    <el-card>
      <!-- 表单区域 -->
      <el-form :inline="true">
        <el-form-item>
          <el-select placeholder="请选择类型" v-model="query.type">
            <el-option label="姓名" value="name"></el-option>
            <el-option label="专业" value="subjectsId.name"></el-option>
            <el-option label="班主任" value="directorsId_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入值" v-model="query.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getClasses">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <el-table :data="list" stript border height="600">
        <el-table-column prop="name" label="班级" align="center" />
        <el-table-column prop="subjectsId.name" label="专业" align="center" />

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" icon="el-icon-circle-plus-outline"
              @click="openAddDdialog">增加</el-button><br />
 
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteClasses(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination background layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="total"
        :page-size="query.pageSize" :current-page="query.currentPage" :page-sizes="[5, 10, 15, 20]"
        @size-change="changePageSize" @current-change="changeCurrentPage">
      </el-pagination>
    </el-card>

    <!-- 增加模态框 -->
    <el-dialog title="增加班级信息" :visible.sync="addClassDialogVisible" width="30%"
      :before-close="handleCloseAddClassDialog">
      <el-form>

        <el-form-item label="班级">
          <el-input placeholder="请输入班级" v-model="addClassItem.name" />
        </el-form-item>

        <el-form-item label="专业">
          <el-select v-model="addClassItem.subjectsId">
            <el-option v-for="item in subjectsAllList" :key="item._id" :label="item.name" :value="item._id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addClassDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClassApi">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
  
<script>
import {createNamespacedHelpers} from 'vuex'
const{mapMutations:mapTabsMutations}= createNamespacedHelpers('tabs')
export default {
  data() {
    return {
      list: [],
      total: 0,
      query: {
        type: '',
        value: '',
        pageSize: 5,
        currentPage: 1
      },

      addDialogVisible: false,
      addateClassesItem: {
        name: '',
      },
      addClassDialogVisible: false,
      subjectsAllList: [],
      ClassesBySubjectsList: [],
      addClassItem: {
        name: '',
        subjectsId: '',
        classesId: '',
      }
    }
  },
  methods: {
    ...mapTabsMutations(['addTabs']),
    async getClasses() {
      const result = await this.$api.classes.getClasses(this.query)
      console.log('result', result);
      this.list = result.data.result
      this.total = result.data.total
    },
    //分页
    changePageSize(args) {
      this.query.pageSize = args
      this.getClasses()
    },
    changeCurrentPage(args) {
      this.query.currentPage = args
      this.getClasses()
    },
    // 新增
    openAddDdialog() {
      this.addClassDialogVisible = true
    },
    handleCloseAddClassDialog() {
      this.addClassDialogVisible = false
    },
    async addClassApi() {
      const result = await this.$api.classes.addClasses(this.addClassItem)
      if (result.code) {
        this.$message.success(result.message)
        //将表单中的数据情清空
        this.addClassItem.name = ''
        this.addClassItem.subjectsId = ''

        this.addClassDialogVisible = false
      }
      console.log('aa', result);
    },
    //获取所有的专业
    async getAllSubjects() {
      const result = await this.$api.subjects.getSubjects()
      // console.log('result', result.data.result);
      this.subjectsAllList = result.data.result
    },
    // 删除班级
    async deleteClasses(args) {
      let result =await this.$api.classes.deleteClasses(args)
      if (result.code) {
        this.$message.success(result.message)
      this.getClasses()
      }
    },
  },
  created() {
    this.getClasses(),
    this.getAllSubjects()
  },
  //进入组件前的导航守卫
  beforeRouteEnter(to,from,next){
    next(vm=>{
      vm.addTabs(to)
    })
  }
}
</script>
  
<style lang="scss" scoped>
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>