liweiliang
/
bitcopay-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加

master
liweiliang 2 years ago
parent
284150a76b
commit
a54cdc6a41
2 changed files with 554 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/api/user/mail.js
  2. 501
      src/views/user/mail/index.vue

53
src/api/user/mail.js
View File

@ -0,0 +1,53 @@
import request from '@/utils/request'
// 查询站内信列表
export function listMail(query) {
return request({
url: '/user/mail/list',
method: 'get',
params: query
})
}
// 查询站内信详细
export function getMail(mailId) {
return request({
url: '/user/mail/' + mailId,
method: 'get'
})
}
// 新增站内信
export function addMail(data) {
return request({
url: '/user/mail',
method: 'post',
data: data
})
}
// 修改站内信
export function updateMail(data) {
return request({
url: '/user/mail',
method: 'put',
data: data
})
}
// 删除站内信
export function delMail(mailId) {
return request({
url: '/user/mail/' + mailId,
method: 'delete'
})
}
// 导出站内信
export function exportMail(query) {
return request({
url: '/user/mail/export',
method: 'get',
params: query
})
}

501
src/views/user/mail/index.vue
View File

@ -0,0 +1,501 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="订单号" prop="orderNo">
<el-input
v-model="queryParams.orderNo"
placeholder="请输入订单号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="消息标题 中文" prop="mailTitleZh">
<el-input
v-model="queryParams.mailTitleZh"
placeholder="请输入消息标题 中文"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="消息状态" prop="mailState">
<el-select v-model="queryParams.mailState" placeholder="请选择消息状态" clearable size="small">
<el-option
v-for="dict in mailStateOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="mailState">
<el-select v-model="queryParams.dataStatus" placeholder="请选择状态" clearable size="small">
<el-option
v-for="dict in dataStatusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="模板类型" prop="mailState">
<el-select v-model="queryParams.mailType" placeholder="请选择模板类型" clearable size="small">
<el-option
v-for="dict in mailTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['user:mail:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['user:mail:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['user:mail:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['user:mail:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="mailList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="站内信id" align="center" prop="mailId" />
<el-table-column label="发送者" align="center" prop="sender" />
<el-table-column label="接收者" align="center" prop="recipient" />
<el-table-column label="图片" align="center" prop="mailImg" >
<template width="90" slot-scope="scope">
<el-image
style="width: 80px; height: 80px"
:src="scope.row.mailImg"
@click="previewImage(scope.row.mailImg)"
:preview-src-list="srcList"
></el-image>
<!-- <img style="width:80px;height:80px;border:none;" :src="scope.row.chainIconUrl"> -->
</template>
</el-table-column>
<el-table-column label="订单号" align="center" prop="orderNo" />
<el-table-column label="消息标题 中文" align="center" prop="mailTitleZh" />
<el-table-column label="消息标题 英文" align="center" prop="mailTitleEn" />
<el-table-column label="消息标题 繁体" align="center" prop="mailTitleFt" />
<el-table-column label="消息详情 中文" align="center" prop="mailDetailsZh" />
<el-table-column label="消息详情 英文" align="center" prop="mailDetailsEn" />
<el-table-column label="消息详情 繁体" align="center" prop="mailDetailsFt" />
<el-table-column label="消息状态" align="center" prop="mailState" :formatter="mailStateFormat" />
<el-table-column label="状态" align="center" prop="dataStatus" :formatter="dataStatusFormat" />
<el-table-column label="消息模板类型" align="center" prop="mailType" :formatter="mailTypeFormat" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['user:mail:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['user:mail:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改站内信对话框 -->
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
<!-- <el-form-item label="发送者" prop="sender">
<el-input v-model="form.sender" placeholder="请输入发送者" />
</el-form-item>
<el-form-item label="接收者" prop="recipient">
<el-input v-model="form.recipient" placeholder="请输入接收者" />
</el-form-item> -->
<el-form-item label="图片" prop="mailImg">
<!-- <el-input v-model="form.icon" placeholder="请输入图标" />-->
<el-upload
class="avatar-uploader"
:show-file-list="false"
:action="uploadUrl()"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:data="{path:'otc'}"
>
<img v-if="form.mailImg" :src="form.mailImg" class="avatar" style="width: 150px" height="150px">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<!--
<el-form-item label="订单号" prop="orderNo">
<el-input v-model="form.orderNo" placeholder="请输入订单号" />
</el-form-item> -->
<el-form-item label="消息标题 中文" prop="mailTitleZh">
<el-input v-model="form.mailTitleZh" placeholder="请输入消息标题 中文" />
</el-form-item>
<el-form-item label="消息标题 英文" prop="mailTitleEn">
<el-input v-model="form.mailTitleEn" placeholder="请输入消息标题 英文" />
</el-form-item>
<el-form-item label="消息标题 繁体" prop="mailTitleFt">
<el-input v-model="form.mailTitleFt" placeholder="请输入消息标题 繁体" />
</el-form-item>
<el-form-item label="消息详情 中文">
<editor v-model="form.mailDetailsZh" :min-height="192"/>
</el-form-item>
<el-form-item label="消息详情 英文">
<editor v-model="form.mailDetailsEn" :min-height="192"/>
</el-form-item>
<el-form-item label="消息详情 繁体">
<editor v-model="form.mailDetailsFt" :min-height="192"/>
</el-form-item>
<!-- <el-form-item label="消息状态" prop="mailState">
<el-select v-model="form.mailState" placeholder="请选择消息状态 read已读 未读unread">
<el-option
v-for="dict in mailStateOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="状态" prop="mailState">
<el-select v-model="form.dataStatus" placeholder="请选择状态">
<el-option
v-for="dict in dataStatusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="消息模板类型" prop="mailState">
<el-select v-model="form.mailType" placeholder="请选择消息模板类型">
<el-option
v-for="dict in mailTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listMail, getMail, delMail, addMail, updateMail, exportMail } from "@/api/user/mail";
import ImageUpload from '@/components/ImageUpload';
import Editor from '@/components/Editor';
export default {
name: "Mail",
components: {
ImageUpload,
Editor,
},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 站内信表格数据
mailList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 消息状态 read已读 未读unread字典
mailStateOptions: [],
// mail_type 消息模板类型 system系统 order订单
mailTypeOptions: [],
// 消息状态 read已读 未读unread字典
dataStatusOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
sender: null,
recipient: null,
mailImg: null,
orderNo: null,
mailTitleZh: null,
mailTitleEn: null,
mailTitleFt: null,
mailDetailsZh: null,
mailDetailsEn: null,
mailDetailsFt: null,
mailState: null,
dataStatus: null,
mailType: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
},
// 预览
srcList: ["http://118.25.187.239:9099/img/adImg/557097620301025280.jpg"],
};
},
created() {
this.getList();
this.getDicts("mail_type").then(response => {
this.mailTypeOptions = response.data;
});
this.getDicts("mail_state").then(response => {
this.mailStateOptions = response.data;
});
this.getDicts("sys_yes_no").then(response => {
this.dataStatusOptions = response.data;
});
},
methods: {
uploadUrl:function(){
// 地址
return process.env.VUE_APP_BASE_API+"/system/ftpfile/uploadFile"
},
// 预览图片
previewImage(abUrl) {
this.srcList[0] = abUrl;
},
/** 查询站内信列表 */
getList() {
this.loading = true;
listMail(this.queryParams).then(response => {
this.mailList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 消息状态 read已读 未读unread字典翻译
mailStateFormat(row, column) {
return this.selectDictLabel(this.mailStateOptions, row.mailState);
},
// 消息状态
mailTypeFormat(row, column) {
return this.selectDictLabel(this.mailTypeOptions, row.mailType);
},
// 消息状态 read已读 未读unread字典翻译
dataStatusFormat(row, column) {
return this.selectDictLabel(this.dataStatusOptions, row.dataStatus);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 预览图片
previewImage(abUrl) {
this.srcList[0] = abUrl;
},
// 表单重置
reset() {
this.form = {
mailId: null,
sender: null,
recipient: null,
mailImg: null,
orderNo: null,
mailTitleZh: null,
mailTitleEn: null,
mailTitleFt: null,
mailDetailsZh: null,
mailDetailsEn: null,
mailDetailsFt: null,
mailState: null,
dataStatus: "0",
mailType: null,
createTime: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.mailId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加站内信";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const mailId = row.mailId || this.ids
getMail(mailId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改站内信";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.mailId != null) {
updateMail(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMail(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const mailIds = row.mailId || this.ids;
this.$confirm('是否确认删除站内信编号为"' + mailIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delMail(mailIds);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有站内信数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportMail(queryParams);
}).then(response => {
this.download(response.msg);
})
},
// 图片上传组件自带的成功回调函数
handleAvatarSuccess(res) {
console.log(res);
this.form.icon = res.data.url;
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 20;
if (!isJPG) {
this.$modal.$message.error('上传头像图片只能是 JPG或png 格式!');
}
if (!isLt2M) {
this.$modal.$message.error('上传头像图片大小不能超过 20MB!');
}
return isJPG && isLt2M;
},
}
};
</script>
Write Preview
Loading…
Cancel
Save