朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 56bdca38b24a25fe8050c5436c55dc7d8bd938ce 1 个父辈 030cb9d8

修改样式

内嵌 并排对比
正在显示 2 个修改的文件 包含 211 行增加 和 94 行删除
... ... @@ -6,10 +6,6 @@
<div>
<el-row>
<el-col :span="4">
<el-input v-model="messageNote_queryInfo.username" placeholder="用户名称"
size="medium" clearable prefix-icon="el-icon-search"></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="messageNote_queryInfo.serverName" placeholder="服务器名称"
size="medium" clearable prefix-icon="el-icon-search"></el-input>
</el-col>
... ... @@ -18,8 +14,6 @@
size="medium" clearable prefix-icon="el-icon-search"
placeholder="虚拟主机名称"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<el-input v-model="messageNote_queryInfo.exchangeName" placeholder="交换机名称"
size="medium" clearable prefix-icon="el-icon-search"></el-input>
... ... @@ -28,8 +22,19 @@
<el-input v-model="messageNote_queryInfo.routingKeyName" placeholder="路由键名称"
size="medium" clearable prefix-icon="el-icon-search"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<el-date-picker v-model="messageNote_queryInfo.sendTime" placeholder="消息发送时间"
<el-input v-model="messageNote_queryInfo.username" placeholder="用户名称"
size="medium" clearable prefix-icon="el-icon-search"></el-input>
</el-col>
<el-col :span="4">
<el-date-picker v-model="messageNote_queryInfo.sendTimeBegin" placeholder="时间段-开始"
type="date" value-format="yyyy-MM-dd"
size="medium" style="width: auto"></el-date-picker>
</el-col>
<el-col :span="4">
<el-date-picker v-model="messageNote_queryInfo.sendTimeEnd" placeholder="时间段-结束"
type="date" value-format="yyyy-MM-dd"
size="medium" style="width: auto"></el-date-picker>
</el-col>
... ... @@ -65,7 +70,7 @@
<el-table-column label="交换机名称" prop="exchangeName" align="center" width="220"></el-table-column>
<el-table-column label="路由键名称" prop="routingKeyName" align="center"
width="220"></el-table-column>
<el-table-column label="消息发送时间" prop="sendTime" align="center"
<el-table-column label="消息发送时间" prop="alias_sendTime" align="center"
width="220">
</el-table-column>
<el-table-column label="发送内容" prop="alias_sendContent" align="center"
... ... @@ -77,9 +82,9 @@
<el-table-column label="操作" width="245px" align="center" fixed="right">
<template slot-scope="scope">
<!-- 编辑按钮-->
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-tooltip effect="dark" content="查看" placement="top-start" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="mini"
@click="messageNote_toEditDialog(scope.$index,scope.row)">编辑
@click="messageNote_toEditDialog(scope.$index,scope.row)">查看
</el-button>
</el-tooltip>
<!-- 删除按钮-->
... ... @@ -236,11 +241,12 @@
<el-form-item label="发送内容：" prop="alias_sendContent">
<el-input v-model="messageNote_addForm.alias_sendContent" style="width:300px" size="small"
clearable type="textarea" :rows="1"
placeholder="请输入相关描述">
placeholder="请输入发送内容">
</el-input>
</el-form-item>
<el-form-item label="相关描述：" prop="description">
<el-input v-model="messageNote_addForm.description" style="width:300px" size="small" clearable
<el-input v-model="messageNote_addForm.description" style="width:300px" size="small"
clearable type="textarea" :rows="1"
placeholder="请输入相关描述">
</el-input>
</el-form-item>
... ... @@ -257,102 +263,128 @@
</div>
<!-- 编辑，对话框区域 -->
<div>
<el-dialog title="编辑消息记录"
<el-dialog title="查看消息记录"
:visible.sync="messageNote_dialog.editDialog"
style="margin-top: -50px" text-align="center" width="65%"
@close="messageNote_editDialogClosed">
<el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
:model="messageNote_editForm" :rules="messageNote_editFormRules" ref="messageNote_editFormRef">
<el-form-item label="用户名称：" prop="userId">
<el-select v-model="messageNote_editForm.userId" prefix-icon="el-icon-search" clearable
style="width:300px" size="medium" filterable disabled
placeholder="请选择用户">
<el-option
v-for="item in (messageNote_config.userInfoList)"
:key="item.id"
:label="item.username"
:value="item.id">
</el-option>
</el-select>
<el-form-item label="用户名称：" prop="username">
<el-input v-model="messageNote_editForm.username" style="width:300px" size="small"
readonly
placeholder="用户名称">
</el-input>
<!-- <el-select v-model="messageNote_editForm.userId" prefix-icon="el-icon-search" clearable-->
<!-- style="width:300px" size="medium" filterable disabled-->
<!-- placeholder="请选择用户">-->
<!-- <el-option-->
<!-- v-for="item in (messageNote_config.userInfoList)"-->
<!-- :key="item.id"-->
<!-- :label="item.username"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-form-item label="服务器名称：" prop="serverId">
<el-select v-model="messageNote_editForm.serverId" prefix-icon="el-icon-search" clearable
disabled
style="width:300px" size="small"
@change="messageNote_server_editChange"
placeholder="请选择所属服务器">
<el-option
v-for="item in (messageNote_config.serverList)"
:key="item.id"
:label="item.serverName"
:value="item.id">
</el-option>
</el-select>
<el-form-item label="服务器名称：" prop="serverName">
<el-input v-model="messageNote_editForm.serverName" style="width:300px" size="small"
readonly
placeholder="服务器名称">
</el-input>
<!-- <el-select v-model="messageNote_editForm.serverId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- @change="messageNote_server_editChange"-->
<!-- placeholder="请选择所属服务器">-->
<!-- <el-option-->
<!-- v-for="item in (messageNote_config.serverList)"-->
<!-- :key="item.id"-->
<!-- :label="item.serverName"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-form-item label="虚拟主机名称：" prop="virtualHostId">
<el-form-item label="虚拟主机名称：" prop="virtualHostName">
<el-input v-model="messageNote_editForm.virtualHostName" style="width:300px" size="small"
readonly
placeholder="虚拟主机名称">
</el-input>
<!-- :disabled="messageNote_editForm.serverId===''" -->
<el-select v-model="messageNote_editForm.virtualHostId" prefix-icon="el-icon-search" clearable
disabled
style="width:300px" size="small"
@change="messageNote_virtualHost_editChange"
placeholder="请选择虚拟主机名称">
<el-option
v-for="item in (messageNote_config.virtualHostList)"
:key="item.id"
:label="item.virtualHostName"
:value="item.id">
</el-option>
</el-select>
<!-- <el-select v-model="messageNote_editForm.virtualHostId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- @change="messageNote_virtualHost_editChange"-->
<!-- placeholder="请选择虚拟主机名称">-->
<!-- <el-option-->
<!-- v-for="item in (messageNote_config.virtualHostList)"-->
<!-- :key="item.id"-->
<!-- :label="item.virtualHostName"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-form-item label="交换机名称：" prop="exchangeId">
<el-form-item label="交换机名称：" prop="exchangeName">
<el-input v-model="messageNote_editForm.exchangeName" style="width:300px" size="small"
readonly
placeholder="交换机名称">
</el-input>
<!-- :disabled="messageNote_editForm.virtualHostId===''" -->
<el-select v-model="messageNote_editForm.exchangeId" prefix-icon="el-icon-search" clearable
disabled
style="width:300px" size="small"
@change="messageNote_exchange_editChange"
placeholder="请选择交换机名称">
<el-option
v-for="item in (messageNote_config.exchangeList)"
:key="item.id"
:label="item.exchangeName"
:value="item.id">
</el-option>
</el-select>
<!-- <el-select v-model="messageNote_editForm.exchangeId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- @change="messageNote_exchange_editChange"-->
<!-- placeholder="请选择交换机名称">-->
<!-- <el-option-->
<!-- v-for="item in (messageNote_config.exchangeList)"-->
<!-- :key="item.id"-->
<!-- :label="item.exchangeName"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-form-item label="路由键名称：" prop="routingKeyId">
<el-form-item label="路由键名称：" prop="routingKeyName">
<el-input v-model="messageNote_editForm.routingKeyName" style="width:300px" size="small"
readonly
placeholder="路由键名称">
</el-input>
<!-- :disabled="messageNote_editForm.exchangeId===''" -->
<el-select v-model="messageNote_editForm.routingKeyId" prefix-icon="el-icon-search" clearable
disabled
style="width:300px" size="small"
placeholder="请选择路由键名称">
<el-option
v-for="item in (messageNote_config.routingKeyList)"
:key="item.id"
:label="item.routingKeyName"
:value="item.id">
</el-option>
</el-select>
<!-- <el-select v-model="messageNote_editForm.routingKeyId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- placeholder="请选择路由键名称">-->
<!-- <el-option-->
<!-- v-for="item in (messageNote_config.routingKeyList)"-->
<!-- :key="item.id"-->
<!-- :label="item.routingKeyName"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
</el-form-item>
<el-form-item label="消息发送时间：" prop="sendTime">
<el-date-picker v-model="messageNote_editForm.sendTime" disabled clearable type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择发送时间" size="small" style="width:300px"></el-date-picker>
<el-form-item label="消息发送时间：" prop="alias_sendTime">
<el-input v-model="messageNote_editForm.alias_sendTime" style="width:300px" size="small"
readonly
placeholder="消息发送时间">
</el-input>
<!-- <el-date-picker v-model="messageNote_editForm.sendTime" disabled clearable type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- placeholder="选择发送时间" size="small" style="width:300px"></el-date-picker>-->
</el-form-item>
<el-form-item label="发送内容：" prop="alias_sendContent">
<el-input v-model="messageNote_editForm.alias_sendContent" style="width:300px" size="small"
clearable disabled type="textarea" :rows="1"
placeholder="请输入相关描述">
clearable readonly type="textarea" :rows="1"
placeholder="请输入发送内容">
</el-input>
</el-form-item>
<el-form-item label="相关描述：" prop="description">
<el-input v-model="messageNote_editForm.description" style="width:300px" size="small" clearable
<el-input v-model="messageNote_editForm.description" style="width:300px" size="small"
clearable readonly type="textarea" :rows="1"
placeholder="请输入相关描述">
</el-input>
</el-form-item>
... ... @@ -361,9 +393,12 @@
<el-button type="info" @click="messageNote_dialog.editDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="messageNote_edit" :loading="messageNote_loading.editLoading"
size="medium" style="width: 100px">添加
<el-button type="primary" @click="messageNote_dialog.editDialog = false" size="medium"
style="width: 100px">关闭
</el-button>
<!-- <el-button type="primary" @click="messageNote_edit" :loading="messageNote_loading.editLoading"-->
<!-- size="medium" style="width: 100px">查看-->
<!-- </el-button>-->
</div>
</el-dialog>
</div>
... ... @@ -420,9 +455,9 @@
// 路由键名称
routingKeyName: '',
// 消息发送时间
sendTime: undefined,
sendTimeBegin: undefined,
// 消息获取时间
receiveTime: undefined,
sendTimeEnd: undefined,
// 当前页数
pageNum: 1,
// 每页条数
... ... @@ -639,9 +674,9 @@
return this.$message.error('获取消息收发记录，失败！');
}
// 获取列表数据
this.messageNote_page.messageNoteList = res.data.list;
this.messageNote_page.messageNoteList = res.data;
// 获取列表的总记录数
this.messageNote_page.total = res.data.total;
this.messageNote_page.total = res.total;
// 关闭加载
this.messageNote_loading.listLoading = false;
this.$message.success('获取消息收发记录，成功！');
... ... @@ -708,7 +743,7 @@
messageNote_toEditDialog(index, row) {
this.messageNote_selectServerList();
this.messageNote_selectHostList(row.serverId);
this.messageNote_selectQueueList(row.virtualHostId);
// this.messageNote_selectQueueList(row.virtualHostId);
this.messageNote_selectExchangeList(row.virtualHostId);
this.messageNote_selectRoutingKeyList(row.exchangeId);
this.messageNote_editForm = Object.assign({}, row);
... ... @@ -770,16 +805,18 @@
).then(() => {
// 开启加载
this.messageNote_loading.delLoading = true;
// 特殊情况，sendTime与后端接收格式不对（但又不能改）
row.sendTime = undefined;
deleteMessageNote(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
// 关闭加载
this.messageNote_loading.delLoading = false;
return this.$message.error('删除队列信息，失败');
return this.$message.error('删除消息记录信息，失败');
}
// 关闭加载
this.messageNote_loading.delLoading = false;
this.$message.success('删除队列信息，成功！');
this.$message.success(res.msg);
// 刷新列表
this.messageNote_getList();
}).catch(error => {
... ... @@ -817,7 +854,7 @@
this.messageNote_loading.batchDelLoading = false;
return this.$message.error('批量删除消息收发记录，失败');
}
this.$message.success('批量删除消息收发记录，成功！');
this.$message.success(res.msg);
// 关闭加载
this.messageNote_loading.batchDelLoading = false;
// 刷新列表
... ... @@ -1026,7 +1063,7 @@
// 根据虚拟主机ID，获取出对应的交换机和队列的列表
this.messageNote_selectExchangeList(value);
this.messageNote_selectQueueList(value);
// this.messageNote_selectQueueList(value);
},
/**
* 编辑方法，交换机ID值，改变
... ... @@ -1056,7 +1093,7 @@
},
created() {
// 刷新列表
this.messageNote_getList();
// this.messageNote_getList();
// 获取删除时间
this.selectDeleteTime();
},
... ...
<template>
<div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
<el-input placeholder="请输入4位验证码" style="width: 100px" v-model="ruleForm.verifyCode"></el-input>
<span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
</div>
</template>
<script>
export default {
name: 'ValidCode',
props: {
width: {
type: String,
default: '100px'
},
height: {
type: String,
default: '40px'
},
length: {
type: Number,
default: 4
}
},
data() {
return {
codeList: [],
ruleForm: {
verifyCode: ''
}
}
},
mounted() {
this.createdCode()
},
methods: {
refreshCode() {
this.createdCode()
},
createdCode() {
let len = this.length,
codeList = [],
chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
charsLen = chars.length
// 生成
for (let i = 0; i < len; i++) {
let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
codeList.push({
code: chars.charAt(Math.floor(Math.random() * charsLen)),
color: `rgb(${rgb})`,
fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
padding: `${[Math.floor(Math.random() * 10)]}px`,
transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
})
}
// 指向
this.codeList = codeList
// 将当前数据派发出去
this.$emit('update:value', codeList.map(item => item.code).join(''))
},
getStyle(data) {
return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
}
}
}
</script>
<style scoped lang="scss">
.ValidCode {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
span {
display: inline-block;
}
}
</style>
... ...