快捷回复完善

im-admin-ui/src/views/im/customer/index.vue

@@ -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 },

im-admin-ui/src/views/im/quickReply/index.vue

@@ -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-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,71 +28,75 @@
       <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" />
           </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">
+        <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="请输入内容" />
@@ -135,11 +139,11 @@ 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 },
   queryParams: {
@@ -148,31 +152,49 @@ const data = reactive<PageData<QuickReplyForm, QuickReplyQuery>>({
     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 };
   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', {
+  proxy?.download(
+    'im/quickReply/export',
+    {
       ...queryParams.value
-  }, `quickReply_${new Date().getTime()}.xlsx`)
-}
+    },
+    `quickReply_${new Date().getTime()}.xlsx`
+  );
+};
 
 onMounted(() => {
   getList();

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

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

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

@@ -108,12 +108,19 @@ 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());
         }
-        }
 
         validEntityBeforeSave(add);
         boolean flag = baseMapper.insert(add) > 0;