一、configCard
javascript
复制代码
<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)"> {{ $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
javascript
复制代码
<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
javascript
复制代码
<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>
<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>
四、分页
javascript
复制代码
<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>