前端预览加权限设置页面 相关sql修改

ruoyi-ui/src/components/FlyfishPreview/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-dialog
+    :title="fileName"
+    :visible.sync="innerVisible"
+    width="900px"
+    top="5vh"
+    append-to-body
+    :before-close="handleClose"
+    @opened="onOpened"
+    @closed="onClosed"
+  >
+    <div ref="viewerContainer" class="ffv-container" />
+  </el-dialog>
+</template>
+
+<script>
+import { mountViewerFrame } from '@flyfish-group/file-viewer-web'
+
+export default {
+  name: 'FlyfishPreview',
+  props: {
+    visible: { type: Boolean, default: false },
+    fileUrl: { type: String, default: '' },
+    fileName: { type: String, default: '文件预览' }
+  },
+  computed: {
+    innerVisible: {
+      get() { return this.visible },
+      set(v) { if (!v) this.$emit('update:visible', false) }
+    }
+  },
+  data() {
+    return {
+      viewerCtrl: null
+    }
+  },
+  methods: {
+    onOpened() {
+      this.$nextTick(() => {
+        if (!this.$refs.viewerContainer) return
+        this.viewerCtrl = mountViewerFrame(this.$refs.viewerContainer, {
+          url: this.fileUrl,
+          options: {
+            theme: 'light'
+          }
+        })
+      })
+    },
+    onClosed() {
+      if (this.viewerCtrl) {
+        this.viewerCtrl.destroy()
+        this.viewerCtrl = null
+      }
+      this.$emit('close')
+    },
+    handleClose(done) {
+      done()
+    }
+  },
+  beforeDestroy() {
+    if (this.viewerCtrl) {
+      this.viewerCtrl.destroy()
+      this.viewerCtrl = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ffv-container {
+  width: 100%;
+  height: 70vh;
+  overflow: hidden;
+}
+</style>

ruoyi-ui/src/components/RmStageImage/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="stage-image-gallery">
+    <!-- Toolbar -->
+    <div class="gallery-toolbar" v-if="showToolbar">
+      <div class="gallery-title">{{ title }}</div>
+      <div class="gallery-actions">
+        <el-upload
+          :action="uploadUrl"
+          :headers="uploadHeaders"
+          :before-upload="beforeUpload"
+          :on-success="handleUploadSuccess"
+          :on-error="handleUploadError"
+          :show-file-list="false"
+          accept="image/*"
+        >
+          <el-button size="small" type="primary" icon="el-icon-upload2">上传图片</el-button>
+        </el-upload>
+        <el-button size="small" icon="el-icon-refresh" @click="loadImages">刷新</el-button>
+      </div>
+    </div>
+
+    <!-- Image Grid -->
+    <div v-if="loading" class="gallery-loading">
+      <i class="el-icon-loading"></i> 加载中...
+    </div>
+
+    <div v-else-if="imageList.length === 0" class="gallery-empty">
+      <el-empty :description="emptyText" />
+    </div>
+
+    <div v-else class="image-grid">
+      <div v-for="(item, index) in imageList" :key="item.imageId" class="image-card">
+        <div class="image-wrapper" @click="previewImage(index)">
+          <el-image :src="item.imageUrl" fit="cover" lazy>
+            <div slot="error" class="image-error">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </div>
+        <div class="image-info">
+          <div class="image-desc" :title="item.description || '无描述'">
+            {{ item.description || '无描述' }}
+          </div>
+          <div class="image-actions">
+            <el-button type="text" size="mini" icon="el-icon-edit" @click="editImage(item)">编辑</el-button>
+            <el-button type="text" size="mini" icon="el-icon-delete" style="color:#e74c3c" @click="deleteImage(item)">删除</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Image Preview Dialog -->
+    <el-dialog :visible.sync="previewVisible" width="800px" append-to-body top="5vh" @closed="previewIndex = -1">
+      <div class="preview-container">
+        <el-image :src="currentPreviewUrl" fit="contain" style="width:100%;max-height:70vh" />
+        <div class="preview-desc" v-if="currentPreviewDesc">
+          {{ currentPreviewDesc }}
+        </div>
+      </div>
+      <div class="preview-nav" v-if="imageList.length > 1">
+        <el-button size="small" :disabled="previewIndex <= 0" @click="previewIndex--">&lt; 上一张</el-button>
+        <span>{{ previewIndex + 1 }} / {{ imageList.length }}</span>
+        <el-button size="small" :disabled="previewIndex >= imageList.length - 1" @click="previewIndex++">下一张 &gt;</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- Edit Description Dialog -->
+    <el-dialog :visible.sync="editVisible" title="编辑图片描述" width="450px" append-to-body>
+      <el-form :model="editForm" label-width="80px" size="small">
+        <el-form-item label="预览">
+          <el-image :src="editForm.imageUrl" fit="contain" style="width:100%;max-height:200px;border:1px solid #eee;border-radius:4px" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="editForm.description" type="textarea" :rows="3" placeholder="请输入图片描述" />
+        </el-form-item>
+        <el-form-item label="排序号">
+          <el-input-number v-model="editForm.sortOrder" :min="0" :max="999" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="editVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleEditSubmit">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { allStageImage, addStageImage, updateStageImage, delStageImage } from '@/api/rm/stageImage'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'RmStageImage',
+  props: {
+    projectId: { type: [Number, String], required: true },
+    stageKey: { type: String, required: true },
+    title: { type: String, default: '阶段图片' },
+    emptyText: { type: String, default: '暂无图片' },
+    showToolbar: { type: Boolean, default: true }
+  },
+  data() {
+    return {
+      imageList: [],
+      loading: false,
+      uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload',
+      uploadHeaders: { Authorization: 'Bearer ' + getToken() },
+      previewVisible: false,
+      previewIndex: -1,
+      editVisible: false,
+      editForm: { imageId: null, imageUrl: '', description: '', sortOrder: 0 }
+    }
+  },
+  computed: {
+    currentPreviewUrl() {
+      if (this.previewIndex >= 0 && this.previewIndex < this.imageList.length) {
+        return this.imageList[this.previewIndex].imageUrl
+      }
+      return ''
+    },
+    currentPreviewDesc() {
+      if (this.previewIndex >= 0 && this.previewIndex < this.imageList.length) {
+        return this.imageList[this.previewIndex].description
+      }
+      return ''
+    }
+  },
+  watch: {
+    projectId: 'loadImages',
+    stageKey: 'loadImages'
+  },
+  created() {
+    this.loadImages()
+  },
+  methods: {
+    loadImages() {
+      if (!this.projectId || !this.stageKey) return
+      this.loading = true
+      allStageImage({ projectId: this.projectId, stageKey: this.stageKey }).then(res => {
+        this.imageList = res.data || []
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    beforeUpload(file) {
+      const isImage = file.type.startsWith('image/')
+      const isLt10M = file.size / 1024 / 1024 < 10
+      if (!isImage) {
+        this.$message.error('只能上传图片文件')
+        return false
+      }
+      if (!isLt10M) {
+        this.$message.error('图片大小不能超过 10MB')
+        return false
+      }
+      return true
+    },
+    handleUploadSuccess(res) {
+      if (res.url) {
+        addStageImage({
+          projectId: this.projectId,
+          stageKey: this.stageKey,
+          imageUrl: res.url,
+          description: '',
+          sortOrder: this.imageList.length
+        }).then(() => {
+          this.$message.success('上传成功')
+          this.loadImages()
+        })
+      } else {
+        this.$message.error('上传返回地址为空')
+      }
+    },
+    handleUploadError() {
+      this.$message.error('上传失败')
+    },
+    previewImage(index) {
+      this.previewIndex = index
+      this.previewVisible = true
+    },
+    editImage(item) {
+      this.editForm = {
+        imageId: item.imageId,
+        imageUrl: item.imageUrl,
+        description: item.description || '',
+        sortOrder: item.sortOrder || 0
+      }
+      this.editVisible = true
+    },
+    handleEditSubmit() {
+      updateStageImage(this.editForm).then(() => {
+        this.$message.success('更新成功')
+        this.editVisible = false
+        this.loadImages()
+      })
+    },
+    deleteImage(item) {
+      this.$confirm('确认删除该图片吗？', '提示', { type: 'warning' }).then(() => {
+        delStageImage(item.imageId).then(() => {
+          this.$message.success('删除成功')
+          this.loadImages()
+        })
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.stage-image-gallery {
+  width: 100%;
+}
+.gallery-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.gallery-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+.gallery-actions {
+  display: flex;
+  gap: 6px;
+}
+.gallery-loading {
+  text-align: center;
+  padding: 40px;
+  color: #909399;
+}
+.gallery-empty {
+  padding: 20px 0;
+}
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+.image-card {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  transition: box-shadow 0.2s;
+}
+.image-card:hover {
+  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+}
+.image-wrapper {
+  height: 160px;
+  cursor: pointer;
+  overflow: hidden;
+  background: #f5f7fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.image-wrapper .el-image {
+  width: 100%;
+  height: 100%;
+}
+.image-error {
+  font-size: 32px;
+  color: #c0c4cc;
+}
+.image-info {
+  padding: 8px;
+}
+.image-desc {
+  font-size: 12px;
+  color: #606266;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 6px;
+}
+.image-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+}
+.preview-container {
+  text-align: center;
+}
+.preview-desc {
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #606266;
+}
+.preview-nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin-top: 16px;
+  font-size: 13px;
+  color: #909399;
+}
+</style>