|
|
<template>
|
|
|
<!-- 消息回复对话框 -->
|
|
|
<el-dialog title="消息回复" :close-on-click-modal="false" :visible.sync="visible">
|
|
|
<!-- 表单区域 -->
|
|
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm">
|
|
|
<!-- 表单项：回复内容 -->
|
|
|
<el-form-item prop="replyContent">
|
|
|
<!-- 文本区域输入框，用于输入回复内容 -->
|
|
|
<el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input>
|
|
|
<!-- 当回复类型为文本时显示，点击插入链接 -->
|
|
|
<el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- 对话框底部操作区域 -->
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<!-- 取消按钮，点击关闭对话框 -->
|
|
|
<el-button @click="visible = false">取消</el-button>
|
|
|
<!-- 发送按钮，根据uploading状态显示不同文本，并控制是否禁用 -->
|
|
|
<el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{uploading ? '发送中...' : '发送'}}</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 控制对话框显示状态
|
|
|
visible: false,
|
|
|
// 控制发送按钮状态及文本
|
|
|
uploading: false,
|
|
|
// 表单数据模型
|
|
|
dataForm: {
|
|
|
// 用户唯一标识
|
|
|
openid: '',
|
|
|
// 回复类型，默认为文本
|
|
|
replyType: 'text',
|
|
|
// 回复内容
|
|
|
replyContent: ''
|
|
|
},
|
|
|
// 表单验证规则
|
|
|
dataRule: {
|
|
|
// 回复内容必填验证
|
|
|
replyContent: [
|
|
|
{ required: true, message: "回复内容不能为空", trigger: "blur" }
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 局部注册组件（但在此组件模板中未使用）
|
|
|
components: {
|
|
|
WxMsgPreview: () => import('@/components/wx-msg-preview')
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化方法，接收openid并显示对话框
|
|
|
init(openid) {
|
|
|
if (!openid) throw '参数异常'; // 校验openid是否存在
|
|
|
this.dataForm.openid = openid; // 设置openid
|
|
|
this.visible = true; // 显示对话框
|
|
|
},
|
|
|
// 表单提交方法
|
|
|
dataFormSubmit() {
|
|
|
if (this.uploading) return; // 如果正在上传，则直接返回
|
|
|
this.uploading = true; // 设置上传状态为true
|
|
|
this.$refs['dataForm'].validate((valid) => { // 验证表单
|
|
|
if (valid) { // 如果验证通过
|
|
|
// 发送请求（注意：这里假设存在一个自定义的$http方法）
|
|
|
this.$http({
|
|
|
url: this.$http.adornUrl(`/manage/wxMsg/reply`), // 请求地址（可能经过某种处理）
|
|
|
method: 'post', // 请求方法
|
|
|
data: this.$http.adornData(this.dataForm) // 请求数据（可能经过某种处理）
|
|
|
}).then(({ data }) => { // 请求成功回调
|
|
|
if (data && data.code === 200) { // 如果请求成功且返回码为200
|
|
|
// 显示成功消息，并关闭对话框，清空回复内容
|
|
|
this.$message({
|
|
|
message: '回复成功',
|
|
|
type: 'success',
|
|
|
duration: 1500,
|
|
|
onClose: () => {
|
|
|
this.visible = false;
|
|
|
}
|
|
|
});
|
|
|
this.$emit("success", { ...this.dataForm }); // 触发success事件，传递表单数据
|
|
|
this.dataForm.replyContent = ''; // 清空回复内容
|
|
|
} else { // 如果请求失败
|
|
|
// 显示错误消息
|
|
|
this.$message.error(data.msg);
|
|
|
}
|
|
|
this.uploading = false; // 无论成功或失败，都重置上传状态
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 插入链接方法，向回复内容中添加链接文本（注意：链接地址未动态设置）
|
|
|
addLink() {
|
|
|
this.dataForm.replyContent += '<a href="链接地址">链接文字</a>';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
/* 样式部分，但.msg-container类在模板中未使用 */
|
|
|
.msg-container {
|
|
|
background: #eee;
|
|
|
}
|
|
|
</style> |
