hrp-ui-base 1.4.7 → 1.4.8

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

@@ -1,843 +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>
+<!-- 
+ * @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>