leisure-core 1.0.2 → 1.0.4

package/le-upload-table/src/main.vue

@@ -0,0 +1,648 @@
+<template>
+  <div>
+    <le-button type="primary" size="small" @click="showPopClick"
+      >附件</le-button
+    >
+    <le-dialog-container
+      v-if="showWindow"
+      title="附件管理"
+      width="80%"
+      :showDialog="showWindow"
+      :showFooter="true"
+      :showCloseBtnTop="true"
+      saveBtnText="确定"
+      :showSaveBtn="false"
+      @close="closeBtn"
+    >
+      <div class="attachment-management">
+        <!-- 头部标题和上传按钮 -->
+        <div class="header">
+          <span class="title">{{ title }}</span>
+          <span class="count" v-if="localAttachments.length > 0"
+            >({{ localAttachments.length }})</span
+          >
+          <el-upload
+            action=""
+            :http-request="uploadFile"
+            :before-upload="beforeUpload"
+            :show-file-list="false"
+            :multiple="true"
+            :accept="acceptTypes"
+          >
+            <el-button
+              type="primary"
+              size="small"
+              icon="el-icon-upload"
+              v-if="dispUpload"
+            >
+              上传文件
+            </el-button>
+          </el-upload>
+        </div>
+
+        <!-- 文件列表表格 -->
+        <el-table :data="localAttachments" class="file-table">
+          <el-table-column
+            prop="mtype_name"
+            label="业务类型"
+            align="center"
+          ></el-table-column>
+          <el-table-column label="原始文件名称" align="center">
+            <template slot-scope="scope">
+              <div class="file-info">
+                <i :class="getFileIcon(scope.row)" class="file-icon"></i>
+                <span>{{ scope.row.attach_name_ori }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="attach_name"
+            label="文件名称"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="attach_path"
+            label="存储路径"
+            align="center"
+          ></el-table-column>
+
+          <el-table-column label="文件大小" align="center">
+            <template slot-scope="scope">
+              {{ formatFileSize(scope.row.attach_size) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="上传时间" align="center">
+            <template slot-scope="scope">
+              {{ formatTime(scope.row.create_at) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="120" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="mini"
+                @click="handleDownLoad(scope.row)"
+              >
+                下载
+              </el-button>
+              <el-button
+                type="text"
+                size="mini"
+                @click="handleRemove(scope.$index)"
+                class="delete-btn"
+                v-if="dispDele"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 空状态 -->
+        <div
+          v-if="!localAttachments || localAttachments.length === 0"
+          class="empty-state"
+        >
+          <i class="el-icon-document"></i>
+          <p>暂无附件</p>
+        </div>
+      </div>
+    </le-dialog-container>
+  </div>
+</template>
+
+<script>
+// import {
+//   upload,
+//   create,
+//   del,
+//   list,
+//   download,
+// } from "@/api/attachment/attachment.js";
+// import { downLoadSimple } from "@/utils/downLoadFile.js";
+
+export default {
+  name: "le-upload-table",
+  props: {
+    showPop: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    mname: {
+      type: String,
+      default: "",
+    },
+    mtype: {
+      type: String,
+      default: "",
+    },
+    mid: {
+      type: String,
+      default: "",
+    },
+
+    title: {
+      type: String,
+      default: "附件管理",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    maxSize: {
+      type: Number,
+      default: 10,
+    },
+    maxTotalSize: {
+      type: Number,
+      default: 100,
+    },
+    maxFileCount: {
+      type: Number,
+      default: 20,
+    },
+    dir: {
+      type: String,
+      default: "",
+    },
+    acceptTypes: {
+      type: String,
+      default: "*",
+    },
+    dispUpload: {
+      type: Boolean,
+      default: true,
+    },
+    dispDele: {
+      type: Boolean,
+      default: true,
+    },
+    uploadApi: {
+      type: Function,
+      required: true, // 强制父组件提供
+    },
+    // 批量创建附件记录（接收参数数组，返回 Promise<{ data: { data: [...] } }>）
+    createApi: {
+      type: Function,
+      required: true,
+    },
+    // 删除附件（接收 { id }，返回 Promise）
+    deleteApi: {
+      type: Function,
+      required: true,
+    },
+    // 查询附件列表（接收 { mid, mtype }，返回 Promise<{ data: { data: [...] } }>）
+    listApi: {
+      type: Function,
+      required: true,
+    },
+    // 下载文件（接收参数，通常为 fileName 等，返回 void 或 Promise）
+    downloadApi: {
+      type: Function,
+      required: true,
+    },
+  },
+  watch: {
+    showPop: {
+      handler(val) {
+        this.showWindow = val;
+      },
+      immediate: true,
+    },
+    // 监听父组件传入的value变化，同步到本地
+    value: {
+      handler(newVal) {
+        this.localAttachments = [...newVal];
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      showWindow: false,
+      uploading: false,
+      selectedFiles: [],
+      localAttachments: [], // 本地管理的附件列表
+    };
+  },
+  computed: {
+    currentTotalSize() {
+      return this.localAttachments.reduce(
+        (total, file) => total + (file.size || 0),
+        0,
+      );
+    },
+    //  currentTotalSize() {
+    //   return this.localAttachments.reduce(
+    //     (total, file) => total + (file.attach_size || 0),
+    //     0
+    //   );
+    // },
+  },
+  mounted() {},
+  methods: {
+    // getList(callback) {
+    //   let param = {};
+    //   param.mid = this.mid;
+    //   param.mtype = this.mtype;
+    //   const formData = new URLSearchParams(param);
+    //   list(formData).then((res) => {
+    //     this.localAttachments = res.data.data;
+    //     if (callback) {
+    //       callback();
+    //     }
+    //   });
+    // },
+    getList(callback) {
+      const param = { mid: this.mid, mtype: this.mtype };
+      const formData = new URLSearchParams(param);
+      this.listApi(formData)
+        .then((res) => {
+          this.localAttachments = res.data.data || [];
+          if (callback) callback();
+        })
+        .catch(() => {
+          this.$message.error("获取附件列表失败");
+        });
+    },
+    // 上传前校验
+    beforeUpload(file) {
+      // 检查文件大小
+      if (file.size / 1024 / 1024 > this.maxSize) {
+        this.$message.error(
+          `文件 "${file.name}" 大小不能超过 ${this.maxSize}MB`,
+        );
+        return false;
+      }
+
+      // 检查文件数量
+      if (this.localAttachments.length >= this.maxFileCount) {
+        this.$message.error(`最多只能上传 ${this.maxFileCount} 个文件`);
+        return false;
+      }
+
+      // 检查总大小
+      const newTotalSize = this.currentTotalSize + file.size;
+      if (newTotalSize / 1024 / 1024 > this.maxTotalSize) {
+        this.$message.error(`所有文件总大小不能超过 ${this.maxTotalSize}MB`);
+        return false;
+      }
+
+      return true;
+    },
+
+    // 上传文件
+    // async uploadFile(param) {
+    //   if (this.uploading) {
+    //     this.$message.warning("正在上传中，请稍候...");
+    //     return;
+    //   }
+
+    //   this.uploading = true;
+
+    //   try {
+    //     const formData = new FormData();
+    //     formData.append("files", param.file);
+
+    //     if (this.dir) {
+    //       formData.append("dir", this.dir);
+    //     }
+
+    //     const res = await upload(formData);
+
+    //     if (res.data && res.data.data) {
+    //       const urlList = res.data.data;
+
+    //       if (urlList && urlList.length > 0) {
+    //         let newFiles = [];
+    //         urlList.forEach((ele) => {
+    //           const newFile = {
+    //             id: Date.now(),
+    //             mid: this.mid,
+    //             mtype: this.mtype,
+    //             mtype_name: this.mname,
+    //             attach_name_ori: ele.filesOriginal,
+    //             attach_name: ele.filesNew,
+    //             attach_size: ele.fileSize,
+    //             attach_path: ele.filesUrlPath,
+    //             create_at: new Date(),
+    //           };
+    //           newFiles.push(newFile);
+    //         });
+
+    //         this._saveData(newFiles, (res) => {
+    //           const uploadFiles = res.data.data;
+    //           const localData = [...this.localAttachments, ...uploadFiles];
+    //           this.localAttachments = localData;
+    //           this.$message.success(`文件上传成功`);
+    //         });
+    //       } else {
+    //         this.$message.error("上传成功但未返回文件URL");
+    //       }
+    //     } else {
+    //       this.$message.error(res.data?.msg || "上传失败");
+    //     }
+    //   } catch (error) {
+    //     this.$message.error(`文件上传失败`);
+    //   } finally {
+    //     this.uploading = false;
+    //   }
+    // },
+
+    async uploadFile(param) {
+      if (this.uploading) {
+        this.$message.warning("正在上传中，请稍候...");
+        return;
+      }
+      this.uploading = true;
+      try {
+        const formData = new FormData();
+        formData.append("files", param.file);
+        if (this.dir) formData.append("dir", this.dir);
+
+        const res = await this.uploadApi(formData);
+        const urlList = res?.data?.data;
+        if (!urlList || urlList.length === 0) {
+          this.$message.error("上传成功但未返回文件URL");
+          return;
+        }
+        const newFiles = urlList.map((ele) => ({
+          id: Date.now(),
+          mid: this.mid,
+          mtype: this.mtype,
+          mtype_name: this.mname,
+          attach_name_ori: ele.filesOriginal,
+          attach_name: ele.filesNew,
+          attach_size: ele.fileSize,
+          attach_path: ele.filesUrlPath,
+          create_at: new Date(),
+        }));
+        // 调用创建 API
+        await this._createRecords(newFiles);
+        // 刷新列表
+        await this.getList();
+        this.$message.success("文件上传成功");
+      } catch (error) {
+        this.$message.error(error.message || "文件上传失败");
+      } finally {
+        this.uploading = false;
+      }
+    },
+
+    // 删除文件
+    handleRemove(index) {
+      const file = this.localAttachments[index];
+      this.$confirm(`确定删除文件 "${file.attach_name_ori}" 吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        // 直接更新本地数据
+        let param = { id: file.id };
+        const formData = new URLSearchParams(param);
+        this.deleteApi(formData).then(() => {
+          const updatedAttachments = [...this.localAttachments];
+          updatedAttachments.splice(index, 1);
+          this.localAttachments = updatedAttachments;
+          this.$message.success("删除成功");
+        });
+      });
+    },
+
+    // 根据文件名获取文件类型
+    getFileTypeFromName(filename) {
+      if (!filename) return "";
+      const ext = filename.split(".").pop().toLowerCase();
+      const typeMap = {
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        bmp: "image/bmp",
+        webp: "image/webp",
+        pdf: "application/pdf",
+        doc: "application/msword",
+        docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        xls: "application/vnd.ms-excel",
+        xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ppt: "application/vnd.ms-powerpoint",
+        pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        zip: "application/zip",
+        rar: "application/x-rar-compressed",
+        txt: "text/plain",
+        md: "text/markdown",
+      };
+      return typeMap[ext] || "application/octet-stream";
+    },
+
+    // 下载文件
+    handleDownLoad(row) {
+      let params = {};
+      params.fileName = row.attach_name;
+      // downLoadSimple(
+      //   "/system-attachment/download",
+      //   row.attach_name_ori,
+      //   params,
+      // ).catch((error) => {
+      //   this.$message.error(error);
+      // });
+      this.downloadApi(row.attach_name_ori, params).catch((err) => {
+        this.$message.error(err.message || "下载失败");
+      });
+    },
+
+    // 检查文件是否可预览
+    isPreviewable(file) {
+      const previewableTypes = ["image/", "application/pdf", "text/"];
+      return previewableTypes.some((type) => file.type?.includes(type));
+    },
+
+    // 获取文件图标
+    getFileIcon(file) {
+      const type = file.type || "";
+      const name = file.attach_name_ori || "";
+
+      if (type.startsWith("image/")) return "el-icon-picture";
+      if (type.includes("pdf") || name.toLowerCase().endsWith(".pdf"))
+        return "el-icon-document";
+      if (type.includes("word") || name.toLowerCase().match(/\.docx?$/))
+        return "el-icon-document";
+      if (type.includes("excel") || name.toLowerCase().match(/\.xlsx?$/))
+        return "el-icon-document";
+      if (type.includes("zip") || name.toLowerCase().match(/\.(zip|rar|7z)$/))
+        return "el-icon-folder";
+      if (type.includes("text") || name.toLowerCase().match(/\.(txt|md)$/))
+        return "el-icon-document";
+      return "el-icon-document";
+    },
+
+    // 格式化文件大小
+    formatFileSize(bytes) {
+      if (!bytes || bytes === 0) return "0 B";
+      const k = 1024;
+      const sizes = ["B", "KB", "MB", "GB"];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    },
+
+    // 格式化时间
+    formatTime(time) {
+      if (!time) return "";
+      const date = new Date(time * 1000);
+      return `${date.getFullYear()}-${(date.getMonth() + 1)
+        .toString()
+        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
+        .getHours()
+        .toString()
+        .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+    },
+
+    saveData() {
+      // 在保存时将本地数据同步给父组件
+      this.closeBtn();
+    },
+
+    // _saveData(datas, callBack) {
+    //   if (datas && datas.length > 0) {
+    //     let params = [];
+    //     datas.forEach((ele) => {
+    //       let param = {};
+    //       param.mid = ele.mid;
+    //       param.mtype = ele.mtype;
+    //       param.mtype_name = ele.mtype_name;
+    //       param.attach_name = ele.attach_name;
+    //       param.attach_name_ori = ele.attach_name_ori;
+    //       param.attach_size = ele.attach_size;
+    //       param.attach_path = ele.attach_path;
+    //       params.push(param);
+    //     });
+    //     create(params)
+    //       .then((res) => {
+    //         if (callBack) callBack(res);
+    //         this.$message.success("上传服务器成功");
+    //       })
+    //       .catch((err) => {
+    //         this.$message.error("上传失败");
+    //       });
+    //   }
+    // },
+
+    _createRecords(datas) {
+      if (!datas || datas.length === 0) return Promise.resolve();
+      const params = datas.map((ele) => ({
+        mid: ele.mid,
+        mtype: ele.mtype,
+        mtype_name: ele.mtype_name,
+        attach_name: ele.attach_name,
+        attach_name_ori: ele.attach_name_ori,
+        attach_size: ele.attach_size,
+        attach_path: ele.attach_path,
+      }));
+      return this.createApi(params);
+    },
+
+    closeBtn() {
+      this.showWindow = false;
+      this.$emit("update:showPop", false);
+      this.$emit("close");
+    },
+
+    showPopClick() {
+      this.getList(() => {
+        this.showWindow = true;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.attachment-management {
+  padding: 16px;
+  background: #fff;
+  border-radius: 4px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.count {
+  color: #909399;
+  font-size: 14px;
+}
+
+.file-table {
+  width: 100%;
+  border: 1px solid #ebeef5;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.file-icon {
+  color: #409eff;
+  font-size: 18px;
+}
+
+.delete-btn {
+  color: #f56c6c;
+}
+
+.delete-btn:hover {
+  color: #f78989;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px;
+  color: #909399;
+}
+
+.empty-state i {
+  font-size: 48px;
+  margin-bottom: 12px;
+  display: block;
+  color: #c0c4cc;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* 上传按钮禁用状态 */
+:deep(.el-upload) {
+  display: inline-block;
+}
+
+:deep(.el-upload[disabled]) {
+  cursor: not-allowed;
+}
+
+:deep(.el-upload[disabled] .el-button) {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+</style>

package/le-url/index.js

@@ -0,0 +1,7 @@
+import LeUrl from "./src/main.vue";
+
+LeUrl.install = function (Vue) {
+  Vue.component(LeUrl.name, LeUrl);
+};
+
+export default LeUrl;

package/le-url/src/main.vue

@@ -0,0 +1,27 @@
+<template>
+  <a :href="value" target="_blank" rel="noopener noreferrer">
+    {{ value }}
+  </a>
+</template>
+<script>
+export default {
+  name: "le-url",
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>

package/le-video/index.js

@@ -0,0 +1,7 @@
+import LeVideo from "./src/main.vue";
+
+LeVideo.install = function (Vue) {
+  Vue.component(LeVideo.name, LeVideo);
+};
+
+export default LeVideo;