- <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)"> {{ $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>
- <div>
-
- <div class="form">
- <div class="title">
-
- <span class="titleName">Wazuhspan>
- <div class="ico">
-
- div>
- div>
-
- <div class="cardList">
-
- <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>
-
- <div class="card2">
- <span class="titleName">Suricataspan>
- <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>
-
- <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>
- <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>
- <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>JSONbutton>
- <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>
-
-
- <div class="jsonModel" v-if="activeName == 'json'">
-
- <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>JSONbutton>
- <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'">
-
- <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>JSONbutton>
- <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>
- <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">
-
- <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>
-
- <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>
- <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-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>
-
- <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>
- <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">
-
- <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>
- <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>
- <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>
-
- <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>