hrp-ui-base 1.0.0 → 1.0.2

package/packages/approval-process/packages/components/comment/index.vue

@@ -0,0 +1,843 @@
+<!-- 
+ * @description: 
+ * @fileName: index.vue 
+!-->
+<template>
+  <!-- 其他 - 评论和变更记录 -->
+  <div class="process-box" style="margin-top: 8px">
+    <div class="inner-page-item-header">评论</div>
+    <div class="comment-box">
+      <el-input
+        v-model="commentValue"
+        placeholder="点击输入评论"
+        autosize
+        maxlength="2000"
+        show-word-limit
+        v-if="!isCommentSendStatus"
+        @click="changeCommentSendStatus"
+        class="comment-input-box"
+        readonly
+      />
+      <el-input
+        v-model="commentValue"
+        :autosize="{ minRows: 2 }"
+        type="textarea"
+        placeholder="请输入..."
+        maxlength="2000"
+        show-word-limit
+        v-if="isCommentSendStatus"
+        @click="isCommentSendStatus = true"
+        ref="sendCommentInputRef"
+        class="comment-input-box"
+      />
+
+      <div class="comment-button-box" v-if="isCommentSendStatus">
+        <div style="margin-right: 18px">
+          <el-button type="primary" @click="openAtDialog" color="#d7d7d7"
+            >@提醒谁关注</el-button
+          >
+        </div>
+        <!-- 上传文件组件   :limit="3"-->
+        <el-upload
+          v-model:file-list="fileList"
+          class="upload-demo"
+          action="#"
+          multiple
+          :http-request="uploadFileCommonUtil"
+          :on-exceed="handleExceed"
+          ref="commonUploadFileRef1"
+          :show-file-list="false"
+          accept=".jpg,.png,.bmp,.jpeg,.tiff,.raw,.heif,.gif,.JPG,.PNG,.BMP,.JPEG,.TIFF,.RAW,.HEIF,.GIF"
+          :before-upload="beforeUploadOSS"
+        >
+          <el-button
+            type="primary"
+            @click="uploadImg"
+            color="#d7d7d7"
+            style="margin-right: 18px"
+            
+            >图片</el-button
+          >
+        </el-upload>
+        <el-upload
+          v-model:file-list="fileList"
+          class="upload-demo"
+          action="#"
+          multiple
+          :http-request="uploadFileCommonUtil"
+          :on-exceed="handleExceed"
+          ref="commonUploadFileRef2"
+          :show-file-list="false"
+          accept=".docx,.doc,.xls,.xlsx,.pdf,.ppt,.pptx,.mp3,.mp4,.DOCX,.DOC,.XLS,.XLSX,.PDF,.PPT,.PPTX,.MP3,.MP4,.dcm,.DCM"
+          :before-upload="beforeUploadOSS"
+        >
+          <el-button
+            type="primary"
+            @click="uploadFile"
+            color="#d7d7d7"
+            style="margin-right: 18px"
+            >附件</el-button
+          >
+        </el-upload>
+      </div>
+      <div
+        v-if="
+          isCommentSendStatus &&
+          Array.isArray(atMemberList) &&
+          atMemberList.length > 0
+        "
+        class="at-member-box"
+      >
+        <div
+          v-for="(item, index) in atMemberList"
+          :key="index"
+          class="at-member-item"
+        >
+          <img
+            :src="item.avatar"
+            alt=""
+            class="at-member-avatar"
+            v-if="item.avatar"
+          />
+          <img
+            src="./assets/avatar.svg"
+            alt=""
+            class="at-member-avatar"
+            v-else
+          />
+          <div class="at-member-name">{{ item.userName }}</div>
+          <!-- <el-icon class="at-member-close" @click="deleteAtMember(index)">
+            <CircleClose />
+          </el-icon> -->
+          <img
+            src="./assets/remove.png"
+            alt=""
+            class="at-member-close"
+            @click="deleteAtMember(index)"
+          />
+        </div>
+      </div>
+      <div class="file-list-box flex-row-start">
+        <div
+          class="file-out-box"
+          v-for="(item, index) in sendFileList"
+          :key="index"
+        >
+          <div class="file-list-item flex-row-between">
+            <div class="flex-row-start file-list-item-left">
+              <el-image
+                class="file-list-item-icon"
+                :src="item.url"
+                :zoom-rate="1.2"
+                :initial-index="0"
+                fit="cover"
+                :preview-src-list="[item.url]"
+                preview-teleported="true"
+                @error="handleImageError"
+                @load="handleImageLoad"
+                v-loading="submitLoading"
+                v-if="
+                  getFileType(item.url) === 'jpg' ||
+                  getFileType(item.url) === 'png' ||
+                  getFileType(item.url) === 'bmp' ||
+                  getFileType(item.url) === 'jpeg' ||
+                  getFileType(item.url) === 'raw' ||
+                  getFileType(item.url) === 'heif' ||
+                  getFileType(item.url) === 'tiff' ||
+                  getFileType(item.url) === 'gif'
+                "
+              >
+                <template #error>
+                  <img src="./assets/other.svg" class="file-icon" />
+                </template>
+              </el-image>
+              <div v-else class="file-list-item-icon">
+                <img
+                  src="./assets/pdf.svg"
+                  v-if="getFileType(item.url) === 'pdf'"
+                  class="file-icon"
+                />
+                <img
+                  src="./assets/word.svg"
+                  v-else-if="
+                    getFileType(item.url) === 'docx' ||
+                    getFileType(item.url) === 'doc'
+                  "
+                  class="file-icon"
+                />
+                <img
+                  src="./assets/mp3.svg"
+                  v-else-if="getFileType(item.url) === 'mp3'"
+                  class="file-icon"
+                />
+                <img
+                  src="./assets/mp4.svg"
+                  v-else-if="getFileType(item.url) === 'mp4'"
+                  class="file-icon"
+                />
+                <img
+                  src="./assets/xls.svg"
+                  v-else-if="
+                    getFileType(item.url) === 'xls' ||
+                    getFileType(item.url) === 'xlsx'
+                  "
+                  class="file-icon"
+                />
+                <img
+                  src="./assets/ppt.svg"
+                  v-else-if="
+                    getFileType(item.url) === 'ppt' ||
+                    getFileType(item.url) === 'pptx'
+                  "
+                  class="file-icon"
+                />
+                <img src="./assets/other.svg" v-else class="file-icon" />
+              </div>
+              <div
+                class="flex-column-around file-name-box"
+                style="align-items: flex-start"
+              >
+                <el-tooltip effect="dark" :content="item.fileName">
+                  <div class="file-name">{{ item.fileName }}</div>
+                </el-tooltip>
+                <div class="file-size">{{ item.fileSize || "--" }}</div>
+              </div>
+            </div>
+            <div class="flex-column-around file-list-item-right">
+              <img
+                src="./assets/preview.svg"
+                alt=""
+                class="file-preview"
+                @click="previewFile(item, index)"
+              />
+
+              <img
+                src="./assets/download.svg"
+                alt=""
+                class="file-download"
+                @click="downloadFile(item)"
+              />
+            </div>
+          </div>
+          <div class="table-delete" @click="deleteUploadItem(item, index)">
+            <img
+              src="hrp-ui-base/assets/table-delete/table-delete.svg"
+              alt="删除"
+              width="25"
+              height="25"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        style="
+          height: 70px;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-end;
+          align-items: center;
+        "
+        v-if="isCommentSendStatus"
+      >
+        <el-button @click="sendComment" size="large" type="primary"
+          >发送</el-button
+        >
+      </div>
+
+      <div
+        v-for="(item, index) in commentList"
+        :key="index"
+        class="flexRowStart comment-item"
+      >
+        <img
+          :src="item.sender.avatar"
+          alt="头像"
+          class="imgbox"
+          style="margin-right: 12px"
+          v-if="item.sender && item.sender.avatar"
+        />
+        <img
+          src="./assets/avatar.svg"
+          alt="头像"
+          class="imgbox"
+          style="margin-right: 12px"
+          v-else
+        />
+        <div class="flexColumnStart comment-show-box">
+          <div class="comment-show-name-box flexRowStartCenter">
+            <div class="comment-show-name-box-name flexRowStart">
+              {{ item.sender.userName || "-" }}
+            </div>
+            <div class="comment-show-name-box-time">
+              {{ item.sendTime || "" }}
+            </div>
+          </div>
+          <div class="comment-show-content-box">{{ item.message || "" }}</div>
+          <div
+            class="comment-show-at-box"
+            v-if="
+              Array.isArray(item.mentionUsers) && item.mentionUsers.length > 0
+            "
+          >
+            <div
+              class="comment-show-at-item"
+              v-for="(atItem, atIndex) in item.mentionUsers"
+              :key="atIndex"
+            >
+              {{ "@" + atItem.userName }}
+            </div>
+          </div>
+          <div class="file-list-box flex-row-start">
+            <div
+              class="file-out-box"
+              v-for="(fileItem, fileIndex) in item.fileBaseInfoList"
+              :key="fileIndex"
+            >
+              <div class="file-list-item flex-row-between">
+                <div class="flex-row-start file-list-item-left">
+                  <el-image
+                    class="file-list-item-icon"
+                    :src="fileItem.url"
+                    :zoom-rate="1.2"
+                    :initial-index="0"
+                    fit="cover"
+                    :preview-src-list="[fileItem.url]"
+                    preview-teleported="true"
+                    @error="handleImageError"
+                    @load="handleImageLoad"
+                    v-loading="submitLoading"
+                    v-if="
+                      getFileType(fileItem.url) === 'jpg' ||
+                      getFileType(fileItem.url) === 'png' ||
+                      getFileType(fileItem.url) === 'bmp' ||
+                      getFileType(fileItem.url) === 'jpeg' ||
+                      getFileType(fileItem.url) === 'raw' ||
+                      getFileType(fileItem.url) === 'heif' ||
+                      getFileType(fileItem.url) === 'tiff' ||
+                      getFileType(fileItem.url) === 'gif'
+                    "
+                  >
+                    <template #error>
+                      <img src="./assets/other.svg" class="file-icon" />
+                    </template>
+                  </el-image>
+                  <div v-else class="file-list-item-icon">
+                    <img
+                      src="./assets/pdf.svg"
+                      v-if="getFileType(fileItem.url) === 'pdf'"
+                      class="file-icon"
+                    />
+                    <img
+                      src="./assets/word.svg"
+                      v-else-if="
+                        getFileType(fileItem.url) === 'docx' ||
+                        getFileType(fileItem.url) === 'doc'
+                      "
+                      class="file-icon"
+                    />
+                    <img
+                      src="./assets/mp3.svg"
+                      v-else-if="getFileType(fileItem.url) === 'mp3'"
+                      class="file-icon"
+                    />
+                    <img
+                      src="./assets/mp4.svg"
+                      v-else-if="getFileType(fileItem.url) === 'mp4'"
+                      class="file-icon"
+                    />
+                    <img
+                      src="./assets/xls.svg"
+                      v-else-if="
+                        getFileType(fileItem.url) === 'xls' ||
+                        getFileType(fileItem.url) === 'xlsx'
+                      "
+                      class="file-icon"
+                    />
+                    <img
+                      src="./assets/ppt.svg"
+                      v-else-if="
+                        getFileType(fileItem.url) === 'ppt' ||
+                        getFileType(fileItem.url) === 'pptx'
+                      "
+                      class="file-icon"
+                    />
+                    <img src="./assets/other.svg" v-else class="file-icon" />
+                  </div>
+                  <div
+                    class="flex-column-around file-name-box"
+                    style="align-items: flex-start"
+                  >
+                    <el-tooltip effect="dark" :content="fileItem.fileName">
+                      <div class="file-name">{{ fileItem.fileName }}</div>
+                    </el-tooltip>
+                    <div class="file-size">{{ fileItem.fileSize || "--" }}</div>
+                  </div>
+                </div>
+                <div class="flex-column-around file-list-item-right">
+                  <img
+                    src="./assets/preview.svg"
+                    alt=""
+                    class="file-preview"
+                    @click="previewFile(fileItem, index)"
+                  />
+                  <img
+                    src="./assets/download.svg"
+                    alt=""
+                    class="file-download"
+                    @click="downloadFile(fileItem)"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="comment-button-list">
+            <el-button
+              type="primary"
+              text
+              @click="addReplyToComment(item, index)"
+              >回复</el-button
+            >
+            <el-button
+              type="warning"
+              text
+              @click="deleteComment(item, index)"
+              v-if="item.isMyComment"
+              >删除</el-button
+            >
+          </div>
+          <div class="comment-to-reply" v-if="commentIndex === index">
+            <el-input
+              v-model="replyMessage"
+              :autosize="{ minRows: 2 }"
+              type="textarea"
+              placeholder="请输入..."
+              maxlength="2000"
+              show-word-limit
+              class="comment-input-box"
+            />
+            <div class="comment-to-reply-button">
+              <el-button type="info" @click="cancelReply">取消</el-button>
+              <el-button type="primary" @click="sendReply">回复</el-button>
+            </div>
+          </div>
+          <!-- 回复列表 -->
+          <div
+            class="reply-box"
+            v-if="Array.isArray(item.replyList) && item.replyList.length > 0"
+          >
+            <div
+              class="reply-item"
+              v-for="(replyItem, replyIndex) in item.replyList"
+              :key="replyIndex"
+            >
+              <div class="reply-item-left">
+                <span class="reply-box-name">{{
+                  replyItem.sender.userName || "-"
+                }}</span>
+                <span>回复</span>
+                <span class="reply-box-name">{{
+                  replyItem.receiver.userName || "-"
+                }}</span>
+                <span>：</span>
+                <span>{{ replyItem.message || "-" }}</span>
+                <span
+                  class="reply-item-button"
+                  @click="addReplyToReply(replyItem, replyIndex, item, index)"
+                  >回复</span
+                >
+                <span
+                  class="reply-item-button"
+                  v-if="replyItem.isMyComment"
+                  @click="deleteComment(replyItem, replyIndex)"
+                  >删除</span
+                >
+              </div>
+              <div class="reply-item-time">
+                {{ replyItem.sendTime || "-" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 专门用来预览的组件 -->
+    <el-image
+      style="display: none"
+      ref="previewImgRef"
+      :src="perviewImg.url"
+      :preview-src-list="perviewImg.srcList"
+      preview-teleported="true"
+      id="previewImgId"
+    >
+    </el-image>
+    <!-- 预览mp3，mp4 -->
+    <PreviewMp ref="previewMpRef"></PreviewMp>
+    <ChooseMemberNew ref="chooseMemberNewRef" @success="changeChooseMemberNew">
+    </ChooseMemberNew>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick, onMounted } from "vue";
+import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+import { IsPhone } from "../../utils/getEnv";
+import ChooseMemberNew from "../choose-member/index.vue";
+import PreviewMp from "./modules/previewMp.vue";
+
+import type {
+  UploadProps,
+  UploadUserFile,
+  UploadRequestOptions,
+} from "element-plus";
+import { getFileType, ddWindowOpen } from "hrp-ui-base";
+import FileBaseInfo from "hrp-ui-base/api/bms/file/bo/FileBaseInfo";
+import FileUploadController from "hrp-ui-base/api/bms/file/FileUploadController";
+import FlowCommentController from "hrp-ui-base/api/bms/flow/FlowCommentController";
+
+import FlowCommentVO from "hrp-ui-base/api/bms/flow/bo/FlowCommentVO";
+import FlowReplyVO from "hrp-ui-base/api/bms/flow/bo/FlowReplyVO";
+import FlowCommentBO from "hrp-ui-base/api/bms/flow/bo/FlowCommentBO";
+import dd from "dingtalk-jsapi";
+import { downloadFile } from "hrp-ui-base";
+
+const chooseMemberNewRef = ref();
+const props = defineProps({
+  // 页面id
+  pageId: {
+    type: String,
+    default: "",
+    require: true,
+  },
+  formId: {
+    type: String,
+    default: "",
+    require: true,
+  },
+});
+const commentValue = ref();
+// 是否是发送状态
+const isCommentSendStatus = ref<boolean>(false);
+const sendCommentInputRef = ref();
+
+// @的人员列表
+const atMemberList = ref<
+  { avatar: string; userId: string; userName: string }[]
+>([]);
+const openAtDialog = () => {
+  chooseMemberNewRef.value?.open([], true, "all", []);
+};
+const changeChooseMemberNew = (list: any[]) => {
+  list.forEach((item) => {
+    // 检查是否已存在相同用户
+    const exist = atMemberList.value.some(
+      (member) => member.userId === item.userId
+    );
+    if (!exist) {
+      atMemberList.value.push({
+        avatar: item.avatar,
+        userId: item.userId,
+        userName: item.userName,
+      });
+    }
+  });
+};
+// 修改评论发送状态
+const changeCommentSendStatus = (val: boolean) => {
+  isCommentSendStatus.value = val;
+  if (val) {
+    setTimeout(() => {
+      sendCommentInputRef.value?.focus();
+    }, 100);
+  }
+};
+const sendComment = () => {
+  if (!commentValue.value) {
+    ElMessage({
+      message: "请输入内容后发送",
+      type: "warning",
+    });
+  } else {
+    let submitObj: FlowCommentBO = {
+      sourceId: props.formId,
+      message: commentValue.value,
+      mentionUserIds: atMemberList.value.map((item) => {
+        return item.userId;
+      }),
+      fileIds: sendFileList.value.map((item) => {
+        return item.fileId;
+      }),
+    };
+    FlowCommentController.submitComment(submitObj).then((data) => {
+      if (data.code == 200) {
+        ElMessage.success("评论成功！");
+        clearSendMessage();
+        getSendList();
+      }
+    });
+  }
+};
+
+// 评论数据列表 - 二层
+const commentList = ref<FlowCommentVO[]>([]);
+// 删除at选择的成员
+const deleteAtMember = (index: number) => {
+  atMemberList.value.splice(index, 1);
+};
+/** 上传文件方法 */
+const uploadFileCommonUtil = async (options: UploadRequestOptions) => {
+  try {
+    console.log(options);
+    const fileOBJ = options.file;
+    await FileUploadController.upload(
+      fileOBJ,
+      props.pageId ? props.pageId : "01-01-04-001"
+    )
+      .then((data) => {
+        if (data.code === 200 && data.res) {
+          sendFileList.value.push(data.res);
+        } else {
+          ElMessage.error("数据发生错误，请重新上传!");
+        }
+      })
+      .catch((err) => {
+        ElMessage.error("数据发生错误，请重试!");
+      })
+      .finally(() => {
+        submitLoading.value = false;
+      });
+  } catch (err) {
+    console.debug(err);
+  }
+};
+const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
+  ElMessage.warning("上传超出限制！");
+};
+const commonUploadFileRef = ref();
+// 文件列表
+const fileList = ref<UploadUserFile[]>([]);
+// 上传图片
+const uploadImg = () => {
+  commonUploadFileRef.value?.handleStart();
+};
+const imgFileList = ref<any[]>([]);
+// 上传文件
+const uploadFile = () => {
+  commonUploadFileRef.value?.handleStart();
+};
+const otherFileList = ref<any[]>([]);
+const submitLoading = ref(false);
+const handleImageLoad = () => {
+  submitLoading.value = false;
+};
+const handleImageError = () => {
+  submitLoading.value = false;
+};
+const sendFileList = ref<Array<FileBaseInfo>>([]);
+/** 专门用来预览的组件 */
+const previewImgRef = ref();
+const perviewImg = ref<{ url: string; srcList: string[] }>({
+  url: "",
+  srcList: [],
+});
+/** mp3,mp4 预览 */
+const previewMpRef = ref();
+
+/** 预览文件 */
+const previewFile = async (item: FileBaseInfo, index: number) => {
+  if (
+    getFileType(item.url) === "jpg" ||
+    getFileType(item.url) === "png" ||
+    getFileType(item.url) === "bmp" ||
+    getFileType(item.url) === "jpeg" ||
+    getFileType(item.url) === "raw" ||
+    getFileType(item.url) === "heif" ||
+    getFileType(item.url) === "tiff" ||
+    getFileType(item.url) === "gif"
+  ) {
+    // 图片的情况
+    perviewImg.value.url = item.url;
+    perviewImg.value.srcList = [item.url];
+    nextTick(() => {
+      previewImgRef.value?.showPreview();
+    });
+  } else if (getFileType(item.url) === "mp3") {
+    // mp3的情况
+    previewMpRef.value?.open("mp3", item);
+  } else if (getFileType(item.url) === "mp4") {
+    // mp4的情况
+    previewMpRef.value?.open("mp4", item);
+  } else {
+    try {
+      let currentUserConfig = sessionStorage.getItem("userConfig")
+        ? JSON.parse(sessionStorage.getItem("userConfig") as string)
+        : null;
+      if (currentUserConfig && currentUserConfig.fileUploadType === "oss") {
+        // 文档的情况
+        await FileUploadController.getFilePreview(item.fileId).then((data) => {
+          if (data.code == 200 && data.res) {
+            ddWindowOpen(
+              window.location.origin +
+                window.location.pathname +
+                "ay-doc/index.html?url=" +
+                data.res.webOfficeUrl +
+                "&token=" +
+                data.res.accessToken
+            );
+          } else {
+            ElMessage.error("预览失败，请稍后再试!");
+          }
+        });
+      } else if (
+        currentUserConfig &&
+        currentUserConfig.fileUploadType === "minio"
+      ) {
+        // minio 的预览 需要第三方工具，暂时没有，先定义成下载
+        FileUploadController.getMinioFilePreview(item.fileId).then((data) => {
+          if (data.code == 200 && data.res) {
+            window.open(
+              window.location.origin +
+                window.location.pathname +
+                "preview/onlinePreview?url=" +
+                data.res
+            );
+          }
+        });
+      }
+    } catch (error) {
+      alert("读取本地用户信息失败！");
+    }
+  }
+};
+/** 删除 */
+const deleteUploadItem = (item: any, index: any) => {
+  sendFileList.value.splice(index, 1);
+  fileList.value = JSON.parse(JSON.stringify(sendFileList.value));
+};
+const fileName = ref<string>("");
+
+const beforeUploadOSS = async (e: any) => {
+  submitLoading.value = true;
+
+  const is20M = e.size / 1024 / 1024 < 20;
+  if (!is20M) {
+    submitLoading.value = false;
+
+    ElMessage.error("上传文件大小不能超过 20MB!");
+    return false;
+  }
+  fileName.value = e.name;
+  // if (props.type === 'oss') {
+
+  //   await getOSSOption(e.name)
+  // }
+};
+
+onMounted(async () => {});
+const formId = ref<string>("");
+const setCommentProps = async (data: { formId: string }) => {
+  formId.value = data.formId;
+  getSendList();
+};
+const getSendList = async () => {
+  await FlowCommentController.getCommentList(formId.value).then((data) => {
+    if (data.code === 200 && data.res) {
+      commentList.value = data.res;
+    }
+  });
+};
+/** 清空输入内容 */
+const clearSendMessage = () => {
+  fileList.value = [];
+  sendFileList.value = [];
+  commentValue.value = "";
+  atMemberList.value = [];
+};
+/** 回复评论 */
+const replyType = ref<"reply" | "comment">("comment");
+const commentItem = ref<FlowCommentVO>(new FlowCommentVO());
+const commentIndex = ref<number>(-1);
+const replyItem = ref<FlowReplyVO>(new FlowReplyVO());
+const replyIndex = ref<number>(-1);
+/** 回复评论 */
+const addReplyToComment = async (item: FlowCommentVO, index: number) => {
+  replyType.value = "comment";
+  replyMessage.value = "";
+  commentItem.value = item;
+  commentIndex.value = index;
+};
+const addReplyToReply = async (
+  aimReplyItem: FlowReplyVO,
+  aimReplyIndex: number,
+  item: FlowCommentVO,
+  index: number
+) => {
+  replyType.value = "reply";
+  replyMessage.value = "";
+  commentItem.value = item;
+  commentIndex.value = index;
+  replyItem.value = aimReplyItem;
+  replyIndex.value = aimReplyIndex;
+};
+const cancelReply = () => {
+  replyType.value = "comment";
+  replyMessage.value = "";
+  commentItem.value = new FlowCommentVO();
+  commentIndex.value = -1;
+  replyItem.value = new FlowReplyVO();
+  replyIndex.value = -1;
+};
+const replyMessage = ref("");
+const sendReply = async () => {
+  if (!replyMessage.value) {
+    ElMessage({
+      message: "请输入内容后发送",
+      type: "warning",
+    });
+    return;
+  }
+  let submitObj: FlowCommentBO = {
+    sourceId:
+      replyType.value === "comment"
+        ? commentItem.value.sourceId
+        : replyItem.value.sourceId,
+    message: replyMessage.value,
+    mentionUserIds: [],
+    fileIds: [],
+  };
+  await FlowCommentController.replyComment(submitObj).then((data) => {
+    if (data.code === 200) {
+      ElMessage.success("回复成功！");
+      cancelReply();
+      getSendList();
+    }
+  });
+};
+// 删除评论
+const deleteComment = async (
+  item: FlowCommentVO | FlowReplyVO,
+  index: number
+) => {
+  ElMessageBox.confirm("确认删除选中的数据？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    await FlowCommentController.deleteComment(item.sourceId).then((data) => {
+      if (data.code === 200) {
+        ElMessage.success("删除成功！");
+        getSendList();
+      }
+    });
+  });
+};
+
+defineExpose({
+  setCommentProps,
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../flow/styles/examine-approve-pc.scss";
+@use "./styles/comment-style.scss";
+</style>