一、configCard
<el-card class="boxCard">
<span prop="name" label="Name" align="center" class="name">{{ bigName }}span><br><br>
<span prop="description" label="Description" align="center" class="description">{{ littleName }}span>
<el-button icon="el-icon-edit-outline" @click="edit(bigName)"> {{ $t('message.edit') }}el-button>
props: ['bigName', 'littleName'],
console.log('****', flag);
this.$router.replace({ path: '/main/configGlobal' })
else if (flag == 'Global') {
this.$router.replace({ path: '/main/configGlobal' })
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' })
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' })
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' })
this.$router.replace({ path: '/main/configLogging' })
else if (flag == 'journal') {
this.$router.replace({ path: '/main/configLogging' })
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' })
justify-content: space-between;
justify-content: space-between;
background-color: rgba(255, 255, 255, 1);
color: rgba(31, 30, 72, 1);
color: rgba(136, 135, 153, 1);
border: 1px solid #4A61D5;
二、configuration
<span class="titleName">Wazuhspan>
<configCard :bigName="$t('message.Global')" :littleName="$t('message.Full aggregation remote setting')">
<configCard :bigName="$t('message.Cluster')" :littleName="$t('message.Master node configuration')">
<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 :bigName="'CIS-CAT'"
:littleName="$t('message.Use CIS scanner and SCAP check for configuration evaluation')">
<configCard :bigName="'Osquery'"
:littleName="$t('message.Expose the operating system to a high-performance relational database')">
<configCard :bigName="'Syscollector'" :littleName="$t('message.Specify the Wodle module to configure')">
<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 :bigName="$t('message.journal')" :littleName="$t('message.Log record')">configCard>
<configCard :bigName="$t('message.remote')" :littleName="$t('message.Remote log collector')">
<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')">
<span class="titleName">Suricataspan>
<configCard :bigName="$t('message.AddressGroups')"
:littleName="$t('message.Define address groups')">configCard>
<configCard :bigName="$t('message.PortGroups')" :littleName="$t('message.Define port groups')">
import configCard from '@/views/configuration/configCard.vue'
let result = await this.$api.configuration.getEditor(this.query)
this.data11 = this.$x2js.xml2js(result);
color: rgba(31, 30, 72, 1);
justify-content: space-between;
justify-content: space-between;
border: 1px solid #4A61D5;
三、configAuth
<div class="headerTitle">
<i class="el-icon-arrow-left" @click="goBackPath">i>
<span class="registerSev">{{ $t('message.Registration service') }}span>
<span class="enabled">{{ $t('message.enbled') }}span><br>
<span class="autoRegister">{{ $t('message.Automatic agent registration service') }}span>
<div class="rightBottom">
<div class="formList" v-if="activeName == 'form'">
<div class="mainSettings">
<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>JSONbutton>
<button @click="goExpert"><i class="el-icon-s-custom">i>{{ $t('message.Expert mode') }}button>
<span class="formListItem">{{ $t('message.Enable or disable authentication and encryption options')
<el-input v-model="status1">el-input>
<span class="formListItem">{{ $t('message.The port number on which the Wazuh agent will listen')
<el-input v-model="status2">el-input>
<span class="formListItem">
{{ $t('message.Enable or disable IP address verification to ensure the legitimacy') }}
<el-input v-model="status3">el-input>
<span class="formListItem">{{ $t('message.Timeout for disconnecting idle connection (in seconds)')
<el-input v-model="status4">el-input>
<span class="formListItem">{{ $t('message.Enable or disable password authentication') }}span>
<el-input v-model="status5">el-input>
<span class="formListItem">{{ $t('message.List of allowed encryption algorithms') }}span>
<el-input v-model="status6">el-input>
<span class="formListItem">{{ $t('message.Enable or disable SSL hostname verification') }}span>
<el-input v-model="status7">el-input>
<span class="formListItem">{{ $t('message.SSL certificate path of management server') }}span>
<el-input v-model="status8">el-input>
<span class="formListItem">{{ $t('message.SSL private key path of management server') }}span>
<el-input v-model="status9">el-input>
<span class="formListItem">{{ $t('message.Enable or disable auto-negotiation of SSL/TLS version')
<el-input v-model="status10">el-input>
<div class="jsonModel" v-if="activeName == 'json'">
<div class="mainSettings">
<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>JSONbutton>
<button @click="goExpert"><i class="el-icon-s-custom">i>{{ $t('message.Expert mode') }}button>
<VueDataEditor @input="jsonCodeChange" :value="jsonCode" :disable="false">VueDataEditor>
<div class="expertModel" v-if="activeName == 'expert'">
<div class="mainSettings">
<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>JSONbutton>
<button><i class="el-icon-s-custom">i>{{ $t('message.Expert mode') }}button>
<VueDataEditor @input="xmlCodeChange" :value="xmlCode" :disable="false">VueDataEditor>
import axios from 'axios'
import VueDataEditor from '@/views/configuration/editor'
console.log(this.xmlCode);
console.log(this.$x2js.xml2dom(xml));
const a = this.$x2js.xml2js(xml)
this.initJsonData.auth = a
this.b.ossec_config = this.initJsonData
if (result.code == 200) {
this.$message.success(this.$t('message.modify successfully'))
this.$router.replace({ path: '/main/configuration' })
this.activeName = "expert"
let result = await this.$api.configuration.getEditor(this.query)
console.log('alalal', result);
this.initJsonData = result.data.affected_items[0]
let jsonA = this.initJsonData.auth
let A222 = this.$x2js.js2xml(jsonA)
<style lang="scss" scoped>
border: 1px solid #4A61D5;
justify-content: space-between;
justify-content: space-between;
color: rgba(77, 94, 128, 1);
background-color: #FDEEED;
color: rgba(136, 135, 153, 1);
justify-content: space-between;
overflow-wrap: break-word;
color: rgba(77, 94, 128, 1);
color: rgba(136, 135, 153, 1);
justify-content: space-between;
color: rgba(77, 94, 128, 1);
justify-content: space-between;
四、分页
<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">
<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" />
<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 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>
<el-table v-loading="loading" :data="tableData" @selection-change="getCheckboxInfo" style="width: 100%;" ref="table">
<el-table-column type="expand">
<template #default="props">
<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 label="近次访问：">
<span>{{ new Date(props.row.last_time).toLocaleString() }}span>
<el-form-item label="身份证号：">
<el-form-item label="真实姓名：">
<span>{{ props.row.real_name }}span>
<el-form-item label="标签：">
<span>{{ props.row.labels }}span>
<el-form-item label="生日：">
<span>{{ props.row.birthday }}span>
<el-form-item label="推荐人：">
<span>{{ props.row.spread_uid_nickname }}span>
<el-form-item label="地址：">
<span>{{ props.row.address }}span>
<el-form-item label="备注：">
<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 prop="nickname" label="姓名">el-table-column>
<el-table-column prop="vip_name" label="付费会员">
<template #default="props">
{{ props.row.vip_name === false ? '否' : '是' }}
<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">
<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-button type="text">更多el-button>
<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;">
<div class="drawer-container" style="display: flex;">
<div style="padding: 20px;">
<el-image :src="DetailInfo.avatar" style="border-radius: 50%;width: 80px;" />
<div style="display: flex;margin-top:50px;justify-content: space-evenly;width: 400px;">
用户名：{{ DetailInfo.nickname }}
余额：{{ DetailInfo.now_money }}
总消费金额：{{ DetailInfo.pay_count }}
<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>
<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>
用户编号：<el-input disabled v-model="DetailInfo.uid" style="width: 200px;">el-input>
<div v-show="!editflag">真实姓名：{{ DetailInfo.real_name === '' ? '-' : DetailInfo.real_name }}
真实姓名：<el-input v-model="DetailInfo.real_name" style="width: 200px;">el-input>
<div v-show="!editflag">手机号码：{{ DetailInfo.phone }}div>
手机号码：<el-input v-model="DetailInfo.phone" style="width: 200px;">el-input>
<div v-show="!editflag">生日：{{ new Date(DetailInfo.add_time).toLocaleString() }}div>
生日： <el-date-picker style="width: 200px;" v-model="DetailInfo.add_time" type="date"
placeholder="请选择日期" :size="size" />
<div v-show="!editflag">性别：{{ DetailInfo.sex }}div>
<el-radio-group v-model="DetailInfo.sex">
<el-radio label="男" value="1" />
<el-radio label="女" value="2" />
<el-radio label="保密" value="0" />
<div v-show="!editflag">地址：{{ DetailInfo.addres === '' ? '-' : DetailInfo.addres }}div>
地址：<el-input style="width: 200px;" v-model="DetailInfo.addres">el-input>
<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-drawer v-model="drawer1" title="I am the title" :with-header="false" :size="750">
<div style="border-bottom: 1px solid #e8eaec;padding-bottom: 10px;">
<div style="margin-top: 20px;">
<el-form-item label="真实姓名：" prop="name">
<el-input placeholder="请输入真实姓名" style="width: 450px;" />
<el-form-item label="手机号码：" prop="phone">
<el-input placeholder="请输入真实姓名" style="width: 450px;" />
<el-form-item label="生日：">
<el-date-picker placeholder="请选择生日" />
<el-form-item label="身份证号：">
<el-input placeholder="请输入身份证号" style="width: 450px;" />
<el-form-item label="用户地址：">
<el-input placeholder="请输入用户地址" style="width: 450px;" />
<el-form-item label="用户备注：">
<el-input placeholder="请输入用户备注" style="width: 450px;" />
<el-form-item label="登录密码：" prop="password">
<el-input placeholder="请输入登录密码（修改用户可不填写，不填写不修改原始密码）" style="width: 450px;" />
<el-form-item label="确认密码：" prop="surePassword">
<el-input placeholder="请输入确认密码（修改用户可不填写，不填写不修改原始密码）" style="width: 450px;" />
<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"
<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"
<el-form-item label="用户标签：">
<el-input placeholder="请选择用户关联标签" style="width: 450px;" />
<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>
<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>
<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>
<div style="float: right;border-top: 1px solid #e8e8e8;padding-top: 20px;">
<el-button type="primary">提交el-button>
<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%;" />
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'
import { saveAs } from 'file-saver'
const loading = ref(true)
const drawer = ref(false)
const drawer1 = ref(false)
const activeName1 = ref('one')
const optionsValue = ref('')
const inputValue = ref('')
let editflag = ref(false)
let props = defineProps({
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 5, message: '长度必须是3-5位', trigger: 'blur' },
{ 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)
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)
if (res.data.status === 200) {
editflag.value = !editflag.value
else if (res.data.status === 400) {
message: '修改失败，请检查网络或重新尝试',
function searchUser(arg1, arg2) {
console.log({ field_key: arg2, nickname: arg1 });
getUserList({ page: pageSize, limit: 15, field_key: arg2, nickname: arg1 })
getUserList({ page: pageSize, limit: 15 })
function getCheckboxInfo(val) {
function xiangqing(arg: any) {
const handleSizeChange = (pageSize: number) => {
const handleCurrentChange = (currentPage: number) => {
getUserList({ page: currentPage, limit: 15 })
editflag.value = !editflag.value
function saveInfo(data) {
data.add_time = new Date(data.add_time).valueOf()
editUserInfo(data.uid, data)
getUserList({ user_type: props.flag, page: pageSize, limit: 15 })
<style lang='scss' scoped>
.demo-table-expand label {
.demo-table-expand .el-form-item {
五、usersCenter
<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-input placeholder="请输入值" v-model="query.value">el-input>
<el-button icon="el-icon-search" type="primary" @click="getUsers">搜索el-button>
<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-table-column prop="image" label="头像" align="center">
<template slot-scope="scope">
<el-avatar :size="50" :src="scope.row.image">el-avatar>
<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>
layout="sizes, prev, pager, next, jumper, ->, total, slot"
:page-size="query.pageSize"
:current-page="query.currentPage"
:page-sizes="[5,10,15,20]"
@size-change="changePageSize"
@current-change="changeCurrentPage">
:visible.sync="updateDialogVisible"
<el-form label-width="60px">
<el-form-item label="用户名">
<el-input v-model="updateUserItem.username">el-input>
<el-form-item label="电话">
<el-input v-model="updateUserItem.phone">el-input>
<el-form-item label="邮箱">
<el-input v-model="updateUserItem.email">el-input>
<el-form-item label="密码">
<el-input v-model="updateUserItem.password">el-input>
<el-form-item label="角色">
<el-select placeholder="选择角色" v-model="updateUserItem.auth">
<el-option label="超级管理员" :value="1">el-option>
<el-option label="普通管理员" :value="2">el-option>
<el-form-item label="头像">
<el-input v-model="updateUserItem.image">el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="updateDialogVisible = false">取 消el-button>
<el-button type="primary" @click="updateUserApi">确 定el-button>
import {createNamespacedHelpers} from 'vuex'
const {mapMutations:mapTabsMutations}=createNamespacedHelpers("tabs")
updateDialogVisible:false,
...mapTabsMutations(["addTabs"]),
const result = await this.$api.users.getUsers(this.query);
console.log("result", result.data);
this.list = result.data.result;
this.total = result.data.total;
this.query.currentPage=args
console.log('args',args.row);
this.updateUserItem={...args.row}
this.updateDialogVisible=true
console.log('修改后的数据',this.updateUserItem);
const result=await this.$api.users.updateUsers(this.updateUserItem)
console.log('resultss',result);
this.$message.success(result.message)
this.updateDialogVisible=false
beforeRouteEnter(to,from,next){
六、userModify
<div slot="header" class="clearfix">
<el-form label-width="80px">
<el-form-item label="用户名">
<el-input placeholder="请输入用户名" v-model="loginUser.username">el-input>
<el-form-item label="密码">
<el-input placeholder="请输入密码" v-model="loginUser.password">el-input>
<el-form-item label="电话">
<el-input placeholder="请输入电话" v-model="loginUser.phone">el-input>
<el-form-item label="邮箱">
<el-input placeholder="请输入邮箱" v-model="loginUser.email">el-input>
<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-form-item label="头像">
action="http://www.zhaijizhe.cn:3005/images/uploadImages"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<i v-else class="el-icon-plus avatar-uploader-icon">i>
<el-button type="primary" @click="modifyUserInfo" class="loginbtn">修改el-button>
import {mapState,mapActions} from 'vuex'
...mapState(['loginUser'])
...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;
this.$message.error('上传头像图片只能是 JPG 格式!');
this.$message.error('上传头像图片大小不能超过 2MB!');
console.log('user',this.loginUser);
this.modifyUserAsync(this.loginUser)
.avatar-uploader ::v-deep .el-upload {
border: 1px dashed #d9d9d9;
.avatar-uploader ::v-deep .el-upload:hover {
七、studentList
<el-button type="primary" @click="openAddDialog">增加学员el-button>
<el-button type="primary" @click="deleteMe">删除el-button>
:visible.sync="addStudentDialogVisible"
:before-close="handleCloseAddStudentDialog">
<el-form label-width="70px">
<el-form-item label="姓名">
<el-input placeholder="请输入用户名" v-model="addStudentItem.name"/>
<el-form-item label="年龄">
<el-input placeholder="请输入年龄" v-model="addStudentItem.age"/>
<el-form-item label="性别">
<el-select v-model="addStudentItem.gender">
<el-option value="男" label="男">el-option>
<el-option value="女" label="女">el-option>
<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-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-form-item label="头像">
action="http://www.zhaijizhe.cn:3005/images/uploadImages"
: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>
<span slot="footer" class="dialog-footer">
<el-button @click="addStudentDialogVisible = false">取 消el-button>
<el-button type="primary" @click="addStudentApi">确 定el-button>
import {createNamespacedHelpers} from 'vuex'
const {mapMutations:mapTabsMutations}=createNamespacedHelpers("tabs")
addStudentDialogVisible:false,
...mapTabsMutations(['addTabs']),
let p=this.$api.students.deleteStudents("6409a665f763e04f125d6c23")
this.addStudentDialogVisible=true
handleCloseAddStudentDialog(){
this.addStudentDialogVisible=false
const result=await this.$api.students.addStudents(this.addStudentItem)
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
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;
this.$message.error('上传头像图片只能是 JPG 格式!');
this.$message.error('上传头像图片大小不能超过 2MB!');
'addStudentItem.subjectsId':{
handler:async function(newVal){
let result=await this.$api.classes.getClassesBySubjectsId(newVal)
this.classesBySubjectList=result.data.result
this.addStudentItem.classesId=""
beforeRouteEnter(to,from,next){
<style lang="scss" scoped>
background-color: #f9fafc;
.avatar-uploader ::v-deep .el-upload {
border: 1px dashed #d9d9d9;
.avatar-uploader ::v-deep .el-upload:hover {
八、classList
<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-input placeholder="请输入值" v-model="query.value">el-input>
<el-button icon="el-icon-search" type="primary" @click="getClasses">搜索el-button>
<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>
<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-dialog title="增加班级信息" :visible.sync="addClassDialogVisible" width="30%"
:before-close="handleCloseAddClassDialog">
<el-form-item label="班级">
<el-input placeholder="请输入班级" v-model="addClassItem.name" />
<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>
<span slot="footer" class="dialog-footer">
<el-button @click="addClassDialogVisible = false">取 消el-button>
<el-button type="primary" @click="addClassApi">确 定el-button>
import {createNamespacedHelpers} from 'vuex'
const{mapMutations:mapTabsMutations}= createNamespacedHelpers('tabs')
addClassDialogVisible: false,
ClassesBySubjectsList: [],
...mapTabsMutations(['addTabs']),
const result = await this.$api.classes.getClasses(this.query)
console.log('result', result);
this.list = result.data.result
this.total = result.data.total
this.query.pageSize = args
changeCurrentPage(args) {
this.query.currentPage = args
this.addClassDialogVisible = true
handleCloseAddClassDialog() {
this.addClassDialogVisible = false
const result = await this.$api.classes.addClasses(this.addClassItem)
this.$message.success(result.message)
this.addClassItem.name = ''
this.addClassItem.subjectsId = ''
this.addClassDialogVisible = false
console.log('aa', result);
const result = await this.$api.subjects.getSubjects()
this.subjectsAllList = result.data.result
async deleteClasses(args) {
let result =await this.$api.classes.deleteClasses(args)
this.$message.success(result.message)
beforeRouteEnter(to,from,next){
<style lang="scss" scoped>
.avatar-uploader ::v-deep .el-upload {
border: 1px dashed #d9d9d9;
.avatar-uploader ::v-deep .el-upload:hover {