hrp-ui-base 1.0.1 → 1.0.2

package/packages/approval-process/packages/components/comment/modules/previewMp.vue

@@ -0,0 +1,54 @@
+<!-- 
+ * @description: 预览mp3，mp4等
+ * @fileName: previewMp.vue 
+ * @author: huatuo 
+!-->
+<template>
+  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" size="default" style="min-width: 800px" :destroy-on-close="true">
+    <div style="width: 100%;height: 100%;">
+      <audio controls v-if="fileType === 'mp3'" autoplay>
+        <source :src="fileInfo.url" type="audio/mpeg" style="width: 100%;height: 100%;"> 
+        您浏览器暂不支持该播放器！
+      </audio>
+      <video id="video-element" controls  v-if="fileType === 'mp4'" :src="fileInfo.url" autoplay style="width: 100%;height: 100%;">
+        您浏览器暂不支持该播放器！
+      </video>
+    </div>
+    <template #footer>
+      <el-button @click="closePreview">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" name="SystemTenantForm" setup>
+import { ref, onMounted, reactive, PropType } from 'vue'
+import { ElMessage } from 'element-plus';
+import FileBaseInfo from "hrp-ui-base/api/bms/file/bo/FileBaseInfo"
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+/** 文件类型 */
+const fileType = ref<'mp3' | 'mp4'>('mp3')
+/** 文件信息 */
+const fileInfo = ref<FileBaseInfo>(new FileBaseInfo())
+/** 打开弹窗 */
+const open = async (type: 'mp3' | 'mp4', row: FileBaseInfo) => {
+  dialogVisible.value = true
+  dialogTitle.value = '文件预览'
+  fileType.value = type
+  formLoading.value = true
+
+  resetForm()
+  fileInfo.value = row
+  formLoading.value = false
+
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 重置表单 */
+const resetForm = () => {
+}
+
+const closePreview = () => {
+  dialogVisible.value = false
+}
+</script>

package/packages/approval-process/packages/components/comment/styles/comment-style.scss

@@ -0,0 +1,304 @@
+.at-member-box {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  height: auto;
+  margin-bottom: 12px;
+
+  .at-member-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 50px;
+    height: 66px;
+    margin: 12px 12px 0 0;
+
+    &:hover {
+      .at-member-close {
+        display: block;
+      }
+    }
+
+    .at-member-avatar {
+      width: 36px;
+      height: 36px;
+      margin-bottom: 12px;
+    }
+
+    .at-member-name {
+      font-size: 12px;
+      text-align: center;
+      width: 100%;
+      height: 28px;
+      line-height: 12px;
+    }
+
+    .at-member-close {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      cursor: pointer;
+      display: none; // 默认隐藏
+      width: 16px;
+      height: 16px;
+      background-color: var(--custom-theme-fill-7);
+      border-radius: 50%;
+    }
+  }
+}
+
+.comment-button-box {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+
+.preview-img {
+  img {
+    width: 100%;
+  }
+}
+
+.exceed-limit {
+  border-color: red !important;
+}
+
+.error-message {
+  color: red;
+}
+
+
+.file-list-box {
+  margin-top: 10px;
+  width: 100%;
+  height: auto;
+
+  .file-out-box {
+    border: 1px solid var(--custom-theme-border-4);
+    border-radius: 6px 6px 6px 6px;
+    background: var(--custom-theme-fill-7);
+    padding: 24px 8px 8px;
+    width: 272px;
+    height: 80px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    position: relative;
+  }
+
+  .file-list-item {
+    width: 256px;
+    height: 48px;
+
+    .file-list-item-left {
+      width: calc(100% - 20px);
+      height: 100%;
+
+      .file-list-item-icon {
+        width: 41px;
+        height: 41px;
+
+        .file-icon {
+          width: 41px;
+        }
+      }
+
+      .file-name-box {
+        margin-left: 8px;
+        height: 100%;
+        max-width: calc(100% - 50px);
+
+        .file-name {
+          font-weight: 400;
+          font-size: 12px;
+          color: var(--custom-theme-text-1);
+          line-height: 12x;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          word-break: break-all;
+        }
+
+        .file-size {
+
+          font-weight: 400;
+          font-size: 12px;
+          color: var(--custom-theme-text-3);
+          line-height: 11px;
+        }
+      }
+    }
+
+    .file-list-item-right {
+      height: 100%;
+
+      .file-preview {
+        width: 16px;
+        cursor: pointer;
+      }
+
+      .file-download {
+        width: 16px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .delete-box {
+    position: absolute;
+    right: -7px;
+    top: -7px;
+    overflow: hidden;
+    font-size: 16px;
+    cursor: pointer;
+
+  }
+
+  .table-delete {
+    position: absolute;
+    right: -7px;
+    top: -7px;
+    overflow: hidden;
+    font-size: 16px;
+    cursor: pointer;
+
+  }
+}
+
+.comment-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+
+  .comment-item-avatar {
+    border-radius: 6px;
+    background-color: #d8d8d8;
+    background-size: cover;
+    border-radius: 6px;
+    float: left;
+    height: 40px;
+    margin-right: 12px;
+    width: 40px;
+    overflow: hidden;
+    margin-right: 12px;
+  }
+
+  .comment-show-box {
+    width: calc(100% - 52px);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    height: auto;
+    margin-bottom: 16px;
+
+    .comment-show-name-box {
+      color: var(--custom-theme-text-3);
+      font-size: 16px;
+      margin-bottom: 6px;
+
+      .comment-show-name-box-name {
+        margin-right: 18px;
+        color: var(--custom-theme-text-1);
+
+      }
+    }
+
+    .comment-show-content-box {
+      color: var(--custom-theme-text-2);
+      font-size: 14px;
+      margin-bottom: 6px;
+      word-break: break-all;
+    }
+
+    .comment-show-at-box {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      height: auto;
+      width: 100%;
+
+      .comment-show-at-item {
+        margin-right: 12px;
+        color: var(--custom-theme-normal-normal);
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+.comment-to-reply {
+  width: 100%;
+  margin-bottom: 8px;
+  .comment-to-reply-button {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.reply-box {
+  font-size: 14px;
+  width: 100%;
+  height: auto;
+  letter-spacing: 0.5px;
+  color: var(--custom-theme-text-1);
+  background: var(--custom-theme-fill-3);
+  padding: 12px 8px;
+  .reply-box-name {
+    color: var(--custom-theme-normal-normal);
+    margin: 0 8px;
+  }
+
+  .reply-item {
+    font-size: 14px;
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 12px;
+    &:hover {
+      .reply-item-button {
+        display: inline-block !important;
+      }
+    }
+
+    &-button {
+      display: none; // 默认隐藏按钮
+      margin-left: 12px;
+      color: var(--custom-theme-normal-normal);
+      cursor: pointer;
+      transition: opacity 0.3s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+  .reply-item-left{
+    width: calc(100% - 148px);
+    word-break: break-all;
+  }
+  .reply-item-time{
+    width: 148px;
+    text-align: right;
+  }
+}
+.comment-button-list{
+  margin: 8px 0;
+}

package/packages/approval-process/packages/components/image-cropper/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="裁剪签名图片" width="560px" @close="closeDialog">
+    <div class="cropper-content">
+      <div class="cropper-container">
+        <vue-cropper 
+          v-if="showCropper" 
+          class="crop" 
+          ref="cropperRef" 
+          :autoCrop="option.autoCrop"
+          :autoCropHeight="option.autoCropHeight" 
+          :autoCropWidth="option.autoCropWidth" 
+          :canMove="option.canMove"
+          :canScale="option.canScale" 
+          :centerBox="option.centerBox" 
+          :fixed="option.fixed" 
+          :fixedBox="option.fixedBox"
+          :fixedNumber="option.fixedNumber" 
+          :img="currentFile" 
+          :info-true="option.infoTrue" 
+          :mode="option.mode"
+          :origin="option.origin" 
+          :outputSize="option.outputSize" 
+          :outputType="option.outputType"
+        ></vue-cropper>
+      </div>
+      
+      <!-- 旋转控制按钮 -->
+      <div class="rotate-controls">
+        <el-button-group>
+          <el-button size="small" @click="rotateLeft" :icon="RefreshLeft">
+            左旋转90°
+          </el-button>
+          <el-button size="small" @click="rotateRight" :icon="RefreshRight">
+            右旋转90°
+          </el-button>
+        </el-button-group>
+      </div>
+    </div>
+    
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="confirmCrop" :loading="submitLoading">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+import { RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
+
+const emits = defineEmits(["success"]);
+
+const submitLoading = ref<boolean>(false)
+
+const option = ref({
+  autoCrop: true,
+  autoCropHeight: 100,
+  autoCropWidth: 133,
+  canMove: true,
+  canScale: true,
+  centerBox: true,
+  fixed: true,
+  fixedBox: false,
+  fixedNumber: [133, 100],
+  infoTrue: true,
+  mode: "contain",
+  origin: false,
+  outputSize: 1,
+  outputType: "png",
+});
+
+const showCropper = ref(false);
+const dialogVisible = ref(false);
+const cropperRef = ref<any>();
+const currentFile = ref<any>();
+
+// 打开裁剪弹框
+const open = async (file: File | Blob) => {
+  try {
+    dialogVisible.value = true;
+    currentFile.value = await fileToBase64(file);
+    await nextTick();
+    setTimeout(() => {
+      showCropper.value = true;
+    }, 10);
+  } catch (error) {
+    console.error('打开裁剪器失败:', error);
+    ElMessage.error("打开裁剪器失败，请重试!");
+  }
+};
+
+// 文件转 Base64
+const fileToBase64 = (file: File | Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+};
+
+// Base64 转 File
+function base64ToFile(base64String: string, fileName: string, mimeType: string) {
+  const byteString = atob(base64String.split(',')[1]);
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+
+  const blob = new Blob([ab], { type: mimeType });
+  return new File([blob], fileName, { type: mimeType });
+}
+
+// Base64 转 Blob
+function base64ToBlob(base64String: string, mimeType: string): Blob {
+  const byteString = atob(base64String.split(',')[1]);
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+
+  return new Blob([ab], { type: mimeType });
+}
+
+// 确认裁剪
+const confirmCrop = async () => {
+  submitLoading.value = true;
+  try {
+    cropperRef.value?.getCropData((data: string) => {
+      if (data) {
+        // 将裁剪后的 base64 转为 Blob
+        const croppedBlob = base64ToBlob(data, 'image/png');
+        
+        // 发送裁剪后的 Blob 给父组件
+        emits("success", croppedBlob);
+        dialogVisible.value = false;
+        showCropper.value = false;
+      }
+      submitLoading.value = false;
+    });
+  } catch (error) {
+    ElMessage.error("裁剪图片失败!");
+    submitLoading.value = false;
+  }
+};
+
+// 左旋转90度
+const rotateLeft = () => {
+  cropperRef.value?.rotateLeft();
+};
+
+// 右旋转90度
+const rotateRight = () => {
+  cropperRef.value?.rotateRight();
+};
+
+// 关闭弹框
+const closeDialog = () => {
+  showCropper.value = false;
+  currentFile.value = null;
+};
+
+defineExpose({
+  open,
+});
+</script>
+
+<style scoped lang="scss">
+.cropper-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.cropper-container {
+  width: 500px;
+  height: 400px;
+  position: relative;
+}
+
+.crop {
+  width: 100%;
+  height: 100%;
+}
+
+.rotate-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0;
+  
+  .el-button-group {
+    display: flex;
+    gap: 0;
+  }
+}
+</style>