La123123.
/
im-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

快捷回复完善

master
La123123 1 month ago
parent
e46c93ae89
commit
bdb10a16c0
4 changed files with 126 additions and 91 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. 10
      im-admin-ui/src/views/im/customer/index.vue
  2. 188
      im-admin-ui/src/views/im/quickReply/index.vue
  3. 6
      im-admin/ruoyi-im/src/main/java/org/dromara/im/domain/vo/ImQuickReplyVo.java
  4. 13
      im-admin/ruoyi-im/src/main/java/org/dromara/im/service/impl/ImQuickReplyServiceImpl.java

10
im-admin-ui/src/views/im/customer/index.vue
View File

@ -25,8 +25,8 @@
<el-col :span="1.5">
<el-button v-hasPermi="['im:user:addCustomer']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="4" style="display: flex; align-items: center; justify-content: center">
<span>当前客服数量：{{ total }}</span>
<el-col :span="4" class="flex items-center">
<span class="text-[var(--el-component-bg-color)]">当前客服数量：{{ total }}</span>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
@ -99,9 +99,6 @@
<el-form-item label="昵称" prop="nickName">
<el-input v-model="form.nickName" />
</el-form-item>
<el-form-item label="自定义欢迎语" prop="welcomeMsg">
<el-input v-model="form.welcomeMsg" />
</el-form-item>
<!--
<el-form-item label="个性签名" prop="signature">
<el-input v-model="form.signature" />
@ -151,8 +148,7 @@ const initFormData: UserForm = {
createdTime: undefined,
type: undefined,
isBanned: undefined,
reason: undefined,
welcomeMsg: undefined
reason: undefined
};
const data = reactive<PageData<UserForm, UserQuery>>({
form: { ...initFormData },

188
im-admin-ui/src/views/im/quickReply/index.vue
View File

@ -4,15 +4,15 @@
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="快捷回复名称" prop="replyName">
<el-form-item label="回复名称" prop="replyName">
<el-input v-model="queryParams.replyName" placeholder="请输入快捷回复名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="0-文本，1-图片" prop="replyType">
<el-select v-model="queryParams.replyType" placeholder="请选择0-文本，1-图片" clearable >
<el-option v-for="dict in file_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
<el-form-item label="类型" prop="replyType">
<el-select v-model="queryParams.replyType" placeholder="请选择回复类型" clearable>
<el-option v-for="dict in file_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="快捷回复标题" prop="replyTitle">
<el-form-item label="标题" prop="replyTitle">
<el-input v-model="queryParams.replyTitle" placeholder="请输入快捷回复标题" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
@ -28,74 +28,78 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['im:quickReply:add']">新增</el-button>
<el-button v-hasPermi="['im:quickReply:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['im:quickReply:edit']">修改</el-button>
<el-button v-hasPermi="['im:quickReply:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['im:quickReply:remove']">删除</el-button>
<el-button v-hasPermi="['im:quickReply:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['im:quickReply:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" :data="quickReplyList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键ID" align="center" prop="id" v-if="true" />
<el-table-column label="快捷回复名称" align="center" prop="replyName" />
<el-table-column label="0-文本，1-图片" align="center" prop="replyType">
<!-- <el-table-column label="主键ID" align="center" prop="id" v-if="true" /> -->
<el-table-column label="名称" align="center" prop="replyName" width="150" />
<el-table-column label="回复类型" align="center" prop="replyType" width="100">
<template #default="scope">
<dict-tag :options="file_type" :value="scope.row.replyType"/>
<dict-tag :options="file_type" :value="scope.row.replyType" />
</template>
</el-table-column>
<el-table-column label="快捷回复标题" align="center" prop="replyTitle" />
<el-table-column label="快捷回复内容" align="center" prop="replyContentUrl" width="100">
<el-table-column label="快捷回复标题" align="center" prop="replyTitle" width="250" />
<el-table-column label="快捷回复内容" align="center" prop="replyContent" width="400">
<template #default="scope">
<image-preview :src="scope.row.replyContentUrl" :width="50" :height="50"/>
<div v-if="scope.row.replyType === 0">{{ scope.row.replyContent }}</div>
<div v-else-if="scope.row.replyType === 1">
<image-preview :src="scope.row.replyContent" :full-src="scope.row.replyContent" :width="50" :height="50" />
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['im:quickReply:edit']"></el-button>
<el-button v-hasPermi="['im:quickReply:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['im:quickReply:remove']"></el-button>
<el-button v-hasPermi="['im:quickReply:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
</el-card>
<!-- 添加或修改快捷回复对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
<el-form ref="quickReplyFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="快捷回复名称" prop="replyName">
<el-form-item label="回复名称" prop="replyName">
<el-input v-model="form.replyName" placeholder="请输入快捷回复名称" />
</el-form-item>
<el-form-item label="0-文本，1-图片" prop="replyType">
<el-select v-model="form.replyType" placeholder="请选择0-文本，1-图片">
<el-option
v-for="dict in file_type"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
<el-form-item label="回复类型" prop="replyType">
<el-select v-model="form.replyType" placeholder="请选择回复类型" @change="handleTypeChange">
<el-option v-for="dict in file_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
</el-select>
</el-form-item>
<el-form-item label="快捷回复标题" prop="replyTitle">
<el-form-item label="标题" prop="replyTitle">
<el-input v-model="form.replyTitle" placeholder="请输入快捷回复标题" />
</el-form-item>
<el-form-item label="快捷回复内容" prop="replyContent">
<image-upload v-model="form.replyContent"/>
<el-form-item label="内容" prop="replyContent">
<div v-if="form.replyType === 0">
<el-input v-model="form.replyContent" type="textarea" :rows="4" placeholder="请输入文本内容" />
</div>
<div v-else-if="form.replyType === 1">
<image-upload v-model="form.replyContent" />
</div>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
@ -135,44 +139,62 @@ const dialog = reactive<DialogOption>({
const initFormData: QuickReplyForm = {
id: undefined,
replyName: undefined,
replyType: undefined,
replyType: 0,
replyTitle: undefined,
replyContent: undefined,
remark: undefined,
}
remark: undefined
};
const data = reactive<PageData<QuickReplyForm, QuickReplyQuery>>({
form: {...initFormData},
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
replyName: undefined,
replyType: undefined,
replyTitle: undefined,
replyContent: undefined,
params: {
}
params: {}
},
rules: {
id: [
{ required: true, message: "主键ID不能为空", trigger: "blur" }
],
replyName: [
{ required: true, message: "快捷回复名称不能为空", trigger: "blur" }
],
replyType: [
{ required: true, message: "0-文本，1-图片不能为空", trigger: "change" }
],
replyTitle: [
{ required: true, message: "快捷回复标题不能为空", trigger: "blur" }
],
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
replyName: [{ required: true, message: '快捷回复名称不能为空', trigger: 'blur' }],
replyType: [{ required: true, message: '回复类型不能为空', trigger: 'change' }],
replyTitle: [{ required: true, message: '快捷回复标题不能为空', trigger: 'blur' }],
replyContent: [
{ required: true, message: "快捷回复内容不能为空", trigger: "blur" }
],
{ required: true, message: '快捷回复内容不能为空', trigger: 'blur' },
{ validator: validateReplyContent, trigger: 'blur' }
]
}
});
const { queryParams, form, rules } = toRefs(data);
// 添加一个验证函数来处理不同类型的内容验证
function validateReplyContent(rule: any, value: any, callback: any) {
if (form.value.replyType === 0) {
// 如果是文本类型，验证文本长度
if (!value) {
callback(new Error('请填写文本内容'));
} else if (value.length > 500) {
callback(new Error('文本内容不能超过500个字符'));
} else {
callback();
}
} else {
// 如果是图片类型，验证图片是否存在
if (!value) {
callback(new Error('请选择要上传的图片'));
} else {
callback();
}
}
}
/** 处理类型改变事件 */
const handleTypeChange = () => {
// 当类型改变时，清空内容字段
form.value.replyContent = undefined;
};
/** 查询快捷回复列表 */
const getList = async () => {
loading.value = true;
@ -180,55 +202,55 @@ const getList = async () => {
quickReplyList.value = res.rows;
total.value = res.total;
loading.value = false;
}
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
};
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
form.value = { ...initFormData };
quickReplyFormRef.value?.resetFields();
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: QuickReplyVO[]) => {
ids.value = selection.map(item => item.id);
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
};
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加快捷回复";
}
dialog.title = '添加快捷回复';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: QuickReplyVO) => {
reset();
const _id = row?.id || ids.value[0]
const _id = row?.id || ids.value[0];
const res = await getQuickReply(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改快捷回复";
}
dialog.title = '修改快捷回复';
};
/** 提交按钮 */
const submitForm = () => {
@ -236,32 +258,36 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateQuickReply(form.value).finally(() => buttonLoading.value = false);
await updateQuickReply(form.value).finally(() => (buttonLoading.value = false));
} else {
await addQuickReply(form.value).finally(() => buttonLoading.value = false);
await addQuickReply(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess("操作成功");
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
}
};
/** 删除按钮操作 */
const handleDelete = async (row?: QuickReplyVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除快捷回复编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
await proxy?.$modal.confirm('是否确认删除快捷回复编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delQuickReply(_ids);
proxy?.$modal.msgSuccess("删除成功");
proxy?.$modal.msgSuccess('删除成功');
await getList();
}
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('im/quickReply/export', {
...queryParams.value
}, `quickReply_${new Date().getTime()}.xlsx`)
}
proxy?.download(
'im/quickReply/export',
{
...queryParams.value
},
`quickReply_${new Date().getTime()}.xlsx`
);
};
onMounted(() => {
getList();

6
im-admin/ruoyi-im/src/main/java/org/dromara/im/domain/vo/ImQuickReplyVo.java
View File

@ -63,5 +63,11 @@ public class ImQuickReplyVo implements Serializable {
@ExcelProperty(value = "快捷回复内容")
private String replyContent;
/**
* 快捷回复内容
*/
@ExcelProperty(value = "备注")
private String remark;
}

13
im-admin/ruoyi-im/src/main/java/org/dromara/im/service/impl/ImQuickReplyServiceImpl.java
View File

@ -108,11 +108,18 @@ public class ImQuickReplyServiceImpl implements IImQuickReplyService {
public Boolean insertByBo(ImQuickReplyBo bo) {
ImQuickReply add = MapstructUtils.convert(bo, ImQuickReply.class);
if (add == null) {
return false;
}
add.setCreatorId(LoginHelper.getUserId());
add.setCreatedTime(DateUtil.date());
add.setUpdaterId(LoginHelper.getUserId());
add.setUpdatedTime(DateUtil.date());
// 如果不是超级管理员，则设置 uniqueToken
if(!LoginHelper.isSuperAdmin()) {
if (add != null) {
add.setUniqueToken(imAgentService.getTokenByUserId());
}
add.setUniqueToken(imAgentService.getTokenByUserId());
}
validEntityBeforeSave(add);

Write Preview
Loading…
Cancel
Save