feat: 图片列表item 。图片预览编辑

bs-ui/package.json

@@ -48,6 +48,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "moment": "^2.30.1",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

bs-ui/src/components/MyImageViewer/image-viewer.vue

@@ -0,0 +1,385 @@
+<template>
+  <transition name="viewer-fade">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper"
+      :style="{ 'z-index': viewerZIndex }">
+      <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
+      <!-- CLOSE -->
+      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
+        <i class="el-icon-close"></i>
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span class="el-image-viewer__btn el-image-viewer__prev" :class="{ 'is-disabled': !infinite && isFirst }"
+          @click="prev">
+          <i class="el-icon-arrow-left" />
+        </span>
+        <span class="el-image-viewer__btn el-image-viewer__next" :class="{ 'is-disabled': !infinite && isLast }"
+          @click="next">
+          <i class="el-icon-arrow-right" />
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div v-loading="toolLoading" class="el-image-viewer__btn el-image-viewer__actions" style="width: auto;">
+        <div class="el-image-viewer__actions__inner i__space">
+          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i :class="mode.icon" @click="toggleMode"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
+          <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
+          <i class="el-icon-download" v-if="extraOptions.download" @click="handleExtraActions('download')"></i>
+          <i class="el-icon-printer" v-if="extraOptions.print" @click="handleExtraActions('print')"></i>
+          <el-popover v-if="extraOptions.edit" v-model="nameVisible" placement="top" title="修改附件名称" width="300"
+            trigger="click">
+            <el-input v-model="filename" placeholder="输入附件名称" style="margin-bottom: 20px;"></el-input>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="nameVisible = false">取消</el-button>
+              <el-button type="primary" size="mini" @click="handleExtraActions('edit')">确定</el-button>
+            </div>
+            <i class="el-icon-edit" slot="reference" style="margin-left: 15px;"></i>
+          </el-popover>
+          <el-popconfirm v-if="extraOptions.check" title="保存当前图片方向吗？" @confirm="handleExtraActions('check')">
+            <i class="el-icon-check" slot="reference" style="margin-left: 15px;"></i>
+          </el-popconfirm>
+          <el-popconfirm v-if="extraOptions.delete" title="确定删除当前图片附件吗？" @confirm="handleExtraActions('delete')">
+            <i class="el-icon-delete-solid" slot="reference" style="margin-left: 25px;"></i>
+          </el-popconfirm>
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="el-image-viewer__canvas">
+        <img v-for="(url, i) in urlList" v-if="i === index" ref="img" class="el-image-viewer__img" :key="url"
+          :src="currentImg" :style="imgStyle" @load="handleImgLoad" @error="handleImgError" @mousedown="handleMouseDown">
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from 'element-ui/src/utils/dom';
+import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+import { PopupManager } from 'element-ui/lib/utils/popup';
+
+const Mode = {
+  CONTAIN: {
+    name: 'contain',
+    icon: 'el-icon-full-screen'
+  },
+  ORIGINAL: {
+    name: 'original',
+    icon: 'el-icon-c-scale-to-original'
+  }
+};
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+
+export default {
+  name: 'elImageViewer',
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    nameList: {
+      type: Array,
+      default: () => []
+    },
+    zIndex: {
+      type: Number,
+      default: 2000
+    },
+    onSwitch: {
+      type: Function,
+      default: () => { }
+    },
+    onClose: {
+      type: Function,
+      default: () => { }
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    options: {
+      type: Object,
+      default: () => ({ })
+    },
+    toolLoading: false,
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      },
+      nameVisible: false,
+      filename: this.nameList[this.initialIndex] || '',
+    };
+  },
+  computed: {
+    extraOptions() {
+      return Object.assign({
+        download: true,
+        print: true,
+        edit: false,
+        check: false,
+        delete: false,
+      }, this.options);
+    },
+    isSingle() {
+      return this.urlList.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1;
+    },
+    currentImg() {
+      return this.urlList[this.index];
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}px`,
+        'margin-top': `${offsetY}px`
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = '100%';
+      }
+      return style;
+    },
+    viewerZIndex() {
+      const nextZIndex = PopupManager.nextZIndex();
+      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
+    }
+  },
+  watch: {
+    nameList: {
+      handler(val) {
+        if (val && val.length) {
+          this.filename = val[this.index];
+        }
+      }
+    },
+    index: {
+      handler: function (val) {
+        this.reset();
+        this.onSwitch(val);
+        if (val >= 0 && this.nameList && this.nameList.length) {
+          this.filename = this.nameList[val];
+        }
+      }
+    },
+    currentImg(val) {
+      this.$nextTick(_ => {
+        const $img = this.$refs.img[0];
+        if (!$img.complete) {
+          this.loading = true;
+        }
+      });
+    }
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall();
+      this.onClose();
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = e => {
+        e.stopPropagation();
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide();
+            break;
+          // SPACE
+          case 32:
+            this.toggleMode();
+            break;
+          // LEFT_ARROW
+          case 37:
+            this.prev();
+            break;
+          // UP_ARROW
+          case 38:
+            this.handleActions('zoomIn');
+            break;
+          // RIGHT_ARROW
+          case 39:
+            this.next();
+            break;
+          // DOWN_ARROW
+          case 40:
+            this.handleActions('zoomOut');
+            break;
+        }
+      };
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          this.handleActions('zoomIn', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        } else {
+          this.handleActions('zoomOut', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        }
+      });
+      on(document, 'keydown', this._keyDownHandler);
+      on(document, mousewheelEventName, this._mouseWheelHandler);
+    },
+    deviceSupportUninstall() {
+      off(document, 'keydown', this._keyDownHandler);
+      off(document, mousewheelEventName, this._mouseWheelHandler);
+      this._keyDownHandler = null;
+      this._mouseWheelHandler = null;
+    },
+    handleImgLoad(e) {
+      this.loading = false;
+    },
+    handleImgError(e) {
+      this.loading = false;
+      e.target.alt = '加载失败';
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return;
+
+      const { offsetX, offsetY } = this.transform;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      this._dragHandler = rafThrottle(ev => {
+        this.transform.offsetX = offsetX + ev.pageX - startX;
+        this.transform.offsetY = offsetY + ev.pageY - startY;
+      });
+      on(document, 'mousemove', this._dragHandler);
+      on(document, 'mouseup', ev => {
+        off(document, 'mousemove', this._dragHandler);
+      });
+
+      e.preventDefault();
+    },
+    handleMaskClick() {
+      if (this.maskClosable) {
+        this.hide();
+      }
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    },
+    toggleMode() {
+      if (this.loading) return;
+
+      const modeNames = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const index = modeValues.indexOf(this.mode);
+      const nextIndex = (index + 1) % modeNames.length;
+      this.mode = Mode[modeNames[nextIndex]];
+      this.reset();
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index + 1) % len;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      const { transform } = this;
+      switch (action) {
+        case 'zoomOut':
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+          }
+          break;
+        case 'zoomIn':
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          break;
+        case 'clocelise':
+          transform.deg += rotateDeg;
+          break;
+        case 'anticlocelise':
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    },
+    handleExtraActions(action) {
+      let deg = this.transform.deg % 360;
+      if (deg < 0) {
+        deg += 360;
+      }
+      const params = {
+        index: this.index,
+        deg: deg,
+        filename: this.filename,
+      }
+      this.$emit(action, params);
+      this.nameVisible = false;
+    },
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    if (this.appendToBody) {
+      document.body.appendChild(this.$el);
+    }
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus();
+  },
+  destroyed() {
+    // if appendToBody is true, remove DOM node after destroy
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.i__space {
+  i+i {
+    margin-left: 15px;
+  }
+}
+</style>

bs-ui/src/components/MyImageViewer/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <image-viewer v-if="show" ref="viewer" :tool-loading="loading" :options="options" :name-list="files.map(val => val.oldName)" :url-list="srcList" :initial-index="initialIndex" :on-switch="onSwitch" @download="download" @print="print" @edit="edit" @check="check" @delete="deleteImage" :onClose="close"></image-viewer>
+</template>
+
+<script>
+import ImageViewer from './image-viewer';
+import { update, fileDownload, deleteFile } from '@/api/system/file';
+import { downloadFile } from '@/utils';
+
+export default {
+  name: 'MyImageViewer',
+  components: {
+    ImageViewer,
+  },
+  props: {
+    // options参数：
+    // download: true,
+    // print: true,
+    // edit: false,
+    // check: false,
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    files: {
+      type: Array,
+      default: () => []
+    },
+  },
+  model: {
+    event: 'change',
+    prop: 'files',
+  },
+  data() {
+    return {
+      show: false,
+      initialIndex: 0,
+      loading: false,
+    };
+  },
+  computed: {
+    srcList() {
+      console.log("this.files");
+      console.log(this.files);
+      return this.files.map(val => process.env.VUE_APP_BASE_API + val.attachFileurl);
+    }
+  },
+  methods: {
+    close() {
+      this.show = false;
+    },
+    open(index) {
+      this.initialIndex = index;
+      this.$nextTick(() => {
+        this.show = true;
+      });
+    },
+    // 切换index
+    onSwitch(index) {
+
+    },
+    // 下载
+    download(params) {
+      const { index } = params;
+      const item = this.files[index];
+      this.loading = true;
+      fileDownload(item.attachId).then((res) => {
+        const suffix = item.attachFileurl.substring(item.attachFileurl.lastIndexOf(".")).toLowerCase();
+        downloadFile(res, item.oldName + suffix);
+        this.loading = false;
+      }).catch(e => {
+        this.loading = false;
+      });
+    },
+    // 打印
+    print(params) {
+      this.$print(this.$refs.viewer.$refs.img[0], {});
+    },
+    // 保存编辑名称
+    edit(params) {
+      const { filename, index } = params;
+      const item = this.files[index];
+      this.loading = true;
+      update({
+        attachId: item.attachId,
+        refId: item.refId,
+        oldName: filename,
+      }).then(res => {
+        this.loading = false;
+        item.oldName = filename;
+        item.name = filename;
+        this.$emit('change', [...this.files]);
+        this.$message.success('保存成功');
+      }).catch(e => {
+        this.loading = false;
+      });
+    },
+    // 保存方向
+    check(params) {
+      const { deg, index } = params;
+      if (deg === 0) return;
+      const item = this.files[index];
+      this.loading = true;
+      update({
+        attachId: item.attachId,
+        refId: item.refId,
+        angle: deg,
+      }).then(res => {
+        this.loading = false;
+        item.attachFileurl = res.data.attachFileurl;
+        item.url = process.env.VUE_APP_BASE_API + res.data.attachFileurl;
+        // this.files[index] = res.data;
+        this.$emit('change', [...this.files]);
+        this.$refs.viewer && this.$refs.viewer.reset();
+        this.$message.success('保存成功');
+      }).catch(e => {
+        this.loading = false;
+      });
+    },
+    deleteImage(params) {
+      const { index } = params;
+      const item = this.files[index];
+      this.loading = true;
+      deleteFile(item.attachId).then(res => {
+        this.loading = false;
+        const newList = this.files.filter(val => {
+          return item.attachId !== val.attachId;
+        });
+        this.$emit('change', newList);
+        if (this.initialIndex > 0) {
+          // 索引减一
+          this.initialIndex -= 1;
+        }
+        if (newList.length === 0) {
+          // 没有附件了关闭
+          this.show = false;
+        }
+        this.$message.success('删除成功');
+      }).catch(e => {
+        this.loading = false;
+      });
+    }
+  }
+}
+</script>
+
+<style></style>

bs-ui/src/main.js

@@ -33,6 +33,8 @@ import FileUpload from "@/components/FileUpload"
 import ImageUpload from "@/components/ImageUpload"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
+// 图片预览组件
+import MyImageViewer from "@/components/MyImageViewer"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 // 头部标签组件
@@ -59,6 +61,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('MyImageViewer', MyImageViewer)
 
 Vue.mixin(CommonMixin);
 

bs-ui/src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register', '/test']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

bs-ui/src/router/index.js

@@ -51,6 +51,11 @@ export const constantRoutes = [
     component: () => import('@/views/register'),
     hidden: true
   },
+  {
+    path: '/test',
+    hidden: true,
+    component: () => import('@/views/test/index'),
+  },
   {
     path: '/404',
     component: () => import('@/views/error/404'),

bs-ui/src/utils/index.js

@@ -388,3 +388,39 @@ export function isNumberStr(str) {
   return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }
 
+// 下载文件
+export function downloadFile(obj, name, suffix) {
+  let reader = new FileReader();
+  let resObj;
+  reader.readAsText(obj, 'utf-8');
+  reader.onload = () => {
+    try {
+      resObj = JSON.parse(reader.result);
+      // 如果转换成功说明后端已经抛出异常
+      this.$message.error(resObj.msg)
+    } catch (e) {
+      // 转换异常说明是正常的文件流
+      oldDownloadFile(obj, name, suffix);
+    }
+  }
+}
+
+function oldDownloadFile(obj, name, suffix) {
+  const url = window.URL.createObjectURL(new Blob([obj]))
+  const link = document.createElement('a')
+  link.style.display = 'none'
+  link.href = url
+  // const fileName = formatDate(new Date()) + '-' + name + '.' + suffix
+  const _suffix = '.' + suffix
+  let fileName
+  if (suffix) {
+    fileName = name + _suffix
+  } else {
+    fileName = name
+  }
+  link.setAttribute('download', fileName)
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+

bs-ui/src/views/gallery/list/components/ImageItem.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="image-item">
+
+    <div class="info-tag">
+      <el-tag size="small">大厅</el-tag>
+      <el-tag size="small" style="margin-left: 3px;">大厅</el-tag>
+      <el-tag size="small" style="margin-left: 3px;">大厅</el-tag>
+    </div>
+    
+    <img class="image" src="https://picsum.photos/200/300" alt="">
+    <div class="info">
+      <div class="info-title">图片名称</div>
+      <div class="info-date">2025-05-05 12:12:12</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImageItem'
+}
+</script>
+
+<style lang="scss" scoped>
+  .image-item {
+    border-radius: 10px;
+    box-shadow: 0px 0px 8px #999999;
+    overflow: hidden;
+
+    .image {
+      width: 100%;
+      height: 200px;
+    }
+
+    .info {
+      padding: 5px 10px 10px;
+
+      .info-title {
+        font-size: 18px;
+      }
+
+      .info-date {
+        margin-top: 2px;
+        font-size: 15px;
+        color: #666666;
+      }
+
+      
+    }
+
+    .info-tag {
+      margin-top: 4px;
+      font-size: 16px;
+      color: #409EFF;
+      padding: 0 5px 4px;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+  }
+</style>

bs-ui/src/views/gallery/list/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <!-- <el-form-item label="目录名称" prop="cataName">
+        <el-input
+          v-model="queryParams.cataName"
+          placeholder="请输入目录名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['gallery:cata:export']"
+        >导出</el-button>
+      </el-col> -->
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <div class="image-list">
+      <ImageItem style="width: 30%;"></ImageItem>
+      <ImageItem style="width: 30%;margin-left: 10px;"></ImageItem>
+      <ImageItem style="width: 30%;margin-left: 10px;"></ImageItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import ImageItem from './components/ImageItem.vue';
+
+export default {
+  name: 'List',
+  components: {
+    ImageItem
+  },
+  data() {
+    return {
+
+    };
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .image-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>

bs-ui/src/views/test/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <GalleryList></GalleryList>
+  </div>
+</template>
+
+<script>
+import GalleryList from '@/views/gallery/list/index.vue';
+export default {
+  components: {
+    GalleryList
+  }
+}
+</script>
+
+<style>
+
+</style>