doctor-admin-components 1.0.0-beta.7 → 1.0.1

package/packages/src/views/biz/bizFileInfo/detail.vue

@@ -0,0 +1,82 @@
+<!--
+ * @Author: zhangpengwei 15038779532@163.com
+ * @Date: 2022-10-08 10:03:50
+ * @LastEditors: zhangpengwei 15038779532@163.com
+ * @LastEditTime: 2023-07-24 10:59:29
+ * @FilePath: /doctor-admin-components-再生博士管理台组建/src/views/biz/bizFileInfo/detail.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="app-container">
+
+    <!-- 文件信息详情对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
+      <el-form ref="form" :model="form"  label-width="100px">
+        <el-form-item label="关联编号" prop="linkId">
+          {{form.linkId}}
+        </el-form-item>
+        <el-form-item label="文件名" prop="fileName">
+          {{form.fileName}}
+        </el-form-item>
+        <el-form-item label="文件路径" prop="url">
+          {{form.url}}
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          {{form.createTime}}
+        </el-form-item>
+        <el-form-item label="扩展名" prop="ext">
+          {{form.ext}}
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getBizFileInfo } from "../../../api/biz/bizFileInfo";
+
+export default {
+  name: "BizFileInfo",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {},
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    // 表单重置
+    reset() {
+      this.form = {
+        fileId: null,
+        linkId: null,
+        linkType: null,
+        fileName: null,
+        fileType: null,
+        url: null,
+        createTime: null,
+        ext: null
+      };
+      this.resetForm("form");
+    },
+    /** 展示按钮操作 */
+    handleShow(row) {
+      this.reset();
+      const fileId = row.fileId || this.ids
+      getBizFileInfo(fileId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "文件信息";
+      });
+    },
+  }
+};
+</script>

package/packages/src/views/biz/bizFileInfo/fileShow.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="file-info" v-if="fileInfo.url">
+    <div class="main">
+      <el-checkbox label="" @change="handleCheck"> </el-checkbox>
+      <div class="area">
+        <div class="area-info">
+          <div class="area-pdf" v-if="fileInfo.ext == '.pdf'"></div>
+          <el-image
+            style="width: 54px; height: 54px"
+            :src="fileInfo.url"
+            fit="contain"
+            :preview-src-list="[fileInfo.url]"
+            v-else-if="isImage(fileInfo.ext)"
+          ></el-image>
+          <div class="area-file" v-else></div>
+          <el-button
+            type="text"
+            size="mini"
+            class="ml5"
+            @click="openFile(fileInfo.url)"
+            >预览</el-button
+          >
+          <el-button type="text" size="mini" @click="handleDownload">
+            下载
+          </el-button>
+        </div>
+        <div>
+          <el-dropdown trigger="click" @command="handleCommand">
+            <span class="el-dropdown-link">
+              {{ fileInfo.fileName }}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="delete">删除</el-dropdown-item>
+              <el-dropdown-item command="rename">重命名</el-dropdown-item>
+              <el-dropdown-item command="deleteAndUpload">
+                删除并重新上传</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加或修改文件信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-form-item label="文件名" prop="fileName">
+          <el-input v-model="form.fileName" placeholder="请输入文件名" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 上传文件信息对话框 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="uploadOpen"
+      width="550px"
+      append-to-body
+    >
+      <el-form ref="form" :model="uploadForm" label-width="100px">
+        <file-upload v-model="uploadForm.fileInfoList"> </file-upload>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitUploadForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { downloadFile } from "../../../utils/request";
+import {
+  getBizFileInfo,
+  delBizFileInfo,
+  addBizFileInfo,
+  updateBizFileInfo,
+} from "../../../api/biz/bizFileInfo";
+export default {
+  name: "FileShow",
+  props: {
+    // 文件信息
+    fileInfo: {
+      type: Object,
+      default: () => {
+        return {
+          url: "",
+          fileName: "",
+          ext: "",
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      checkedIds: [],
+      //是否显示上传弹出层
+      uploadOpen: false,
+      // 是否显示弹出层
+      open: false,
+      // 弹出层标题
+      title: "",
+      // 表单参数
+      form: {},
+      //上传表单
+      uploadForm: {},
+    };
+  },
+  computed: {
+    fileId() {
+      return this.fileInfo.fileId;
+    },
+  },
+  methods: {
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.uploadOpen = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        fileId: null,
+        linkId: null,
+        linkType: null,
+        fileName: null,
+        fileType: null,
+        url: null,
+        createTime: null,
+        ext: null,
+      };
+      this.uploadForm = {
+        fileId: null,
+        linkId: null,
+        linkType: null,
+        fileName: null,
+        fileType: null,
+        url: null,
+        createTime: null,
+        ext: null,
+        fileInfoList: [],
+      };
+      this.resetForm("form");
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.fileId != null) {
+            updateBizFileInfo(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.$emit("refresh");
+            });
+          } else {
+            addBizFileInfo(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.$emit("refresh");
+            });
+          }
+        }
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const fileId = row.fileId || this.ids;
+      getBizFileInfo(fileId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改文件信息";
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const fileIds = row.fileId || this.ids;
+      this.$modal
+        .confirm("是否确认删除该文件？")
+        .then(function () {
+          return delBizFileInfo(fileIds);
+        })
+        .then(() => {
+          this.$emit("refresh");
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    submitUploadForm() {
+      console.log(this.uploadForm);
+      addBizFileInfo(this.uploadForm).then((response) => {
+        this.$modal.msgSuccess("上传成功");
+        this.uploadOpen = false;
+        this.$emit("refresh");
+      });
+    },
+    handleDeleteAndUpload(row) {
+      const fileId = row.fileId;
+      this.$modal
+        .confirm("是否确认删除该文件并重新上传？")
+        .then(function () {
+          return delBizFileInfo(fileId);
+        })
+        .then(() => {
+          this.$modal.msgSuccess("删除成功");
+          this.reset();
+          this.uploadOpen = true;
+          this.uploadForm = {
+            linkId: row.linkId,
+            linkType: row.linkType,
+            fileType: row.fileType,
+          };
+          this.title = "上传文件";
+        })
+        .catch(() => {});
+    },
+    handleCommand(command) {
+      switch (command) {
+        case "delete":
+          this.handleDelete(this.fileInfo);
+          break;
+        case "rename":
+          this.handleUpdate(this.fileInfo);
+          break;
+        case "deleteAndUpload":
+          this.handleDeleteAndUpload(this.fileInfo);
+          break;
+        default:
+          break;
+      }
+    },
+    isImage(ext) {
+      return [".jpg", ".jpeg", ".png", ".gif"].includes(ext);
+    },
+    /** 下载文件 */
+    handleDownload() {
+      // this.download(this.fileInfo.url, {}, this.fileInfo.fileName);
+      downloadFile(this.fileInfo.url, this.fileInfo.fileName);
+    },
+    openFile(url) {
+      window.open(url);
+    },
+    handleCheck(val) {
+      if (val) {
+        this.$emit("checked", this.fileInfo);
+      } else {
+        this.$emit("uncheck", this.fileInfo.fileId);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.file-info {
+  width: 160px;
+  display: flex;
+  // border: 1px solid red;
+  .main {
+    display: flex;
+    .area {
+      margin-left: 5px;
+      width: 100%;
+      height: 100%;
+      display: block;
+      .area-info {
+        display: flex;
+        .area-pdf {
+          width: 38px;
+          height: 46px;
+          background-image: url("../../../assets/images/pdf.png") no-repeat center;
+          background-size: contain;
+        }
+        .area-file {
+          width: 38px;
+          height: 46px;
+          background: url("../../../assets/images/file.png") no-repeat center;
+          background-size: contain;
+        }
+      }
+    }
+    .filename {
+      width: 140px;
+      margin-top: 10px;
+      font-size: 14px;
+      color: #333;
+      text-align: left;
+      word-wrap: break-word;
+    }
+  }
+  ::v-deep .el-dropdown {
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409eff;
+    word-break: break-word;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+}
+</style>