fix: 图片预览组件修改；

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

@@ -42,7 +42,12 @@ export default {
     srcList() {
       console.log("this.files");
       console.log(this.files);
-      return this.files.map(val => process.env.VUE_APP_BASE_API + val.attachFileurl);
+      return this.files.map(val => {
+        if (val.attachFileurl.indexOf("http") === 0) {
+          return val.attachFileurl;
+        }
+        return process.env.VUE_APP_BASE_API + val.attachFileurl;
+      });
     }
   },
   methods: {

bs-ui/src/main.js

@@ -12,6 +12,7 @@ import store from './store'
 import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
+import Print from './plugins/print';
 import { download } from '@/utils/request'
 
 import './assets/icons' // icon
@@ -67,6 +68,7 @@ Vue.mixin(CommonMixin);
 
 Vue.use(directive)
 Vue.use(plugins)
+Vue.use(Print)
 Vue.use(VueMeta)
 DictData.install()
 

bs-ui/src/mixins/table-mixin.js

@@ -23,6 +23,7 @@ export default {
       query: { ...this.MXPageInfo().defaultQuery },
       tableSort: {},
       // 表格相关参数end
+      showSearch: true,
     };
   },
   created() {

bs-ui/src/plugins/print.js

@@ -0,0 +1,123 @@
+const Print = function (dom, options) {
+    if (!(this instanceof Print)) return new Print(dom, options);
+
+    this.options = this.extend({
+        noPrint: '.no-print',
+        onStart: function () {},
+        onEnd: function () {}
+    }, options);
+
+    if ((typeof dom) === "string") {
+        this.dom = document.querySelector(dom);
+    } else {
+        this.dom = dom;
+    }
+
+    this.init();
+};
+Print.prototype = {
+    init: function () {
+        let content = this.getStyle() + this.getHtml();
+        this.writeIframe(content);
+    },
+    extend: function (obj, obj2) {
+        for (let k in obj2) {
+            obj[k] = obj2[k];
+        }
+        return obj;
+    },
+
+    getStyle: function () {
+        let str = "";
+        let styles = document.querySelectorAll('style,link');
+        for (let i = 0; i < styles.length; i++) {
+            str += styles[i].outerHTML;
+        }
+        str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+        return str;
+    },
+
+    getHtml: function () {
+        let inputs = document.querySelectorAll('input');
+        let textareas = document.querySelectorAll('textarea');
+        let selects = document.querySelectorAll('select');
+
+        for (let k in inputs) {
+            if (inputs[k].type === "checkbox" || inputs[k].type === "radio") {
+                if (inputs[k].checked === true) {
+                    inputs[k].setAttribute('checked', "checked");
+                } else {
+                    inputs[k].removeAttribute('checked');
+                }
+            } else if (inputs[k].type === "text") {
+                inputs[k].setAttribute('value', inputs[k].value);
+            }
+        }
+
+        for (let k2 in textareas) {
+            if (textareas[k2].type === 'textarea') {
+                textareas[k2].innerHTML = textareas[k2].value;
+            }
+        }
+
+        for (let k3 in selects) {
+            if (selects[k3].type === 'select-one') {
+                let child = selects[k3].children;
+                for (let i in child) {
+                    if (child[i].tagName === 'OPTION') {
+                        if (child[i].selected === true) {
+                            child[i].setAttribute('selected', "selected");
+                        } else {
+                            child[i].removeAttribute('selected');
+                        }
+                    }
+                }
+            }
+        }
+        return this.dom.outerHTML;
+    },
+
+    writeIframe: function (content) {
+        let w;
+        let doc;
+        let iframe = document.createElement('iframe');
+        let f = document.body.appendChild(iframe);
+        iframe.id = "myIframe";
+        iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+        w = f.contentWindow || f.contentDocument;
+        doc = f.contentDocument || f.contentWindow.document;
+        doc.open();
+        doc.write(content);
+        doc.close();
+        this.toPrint(w, function () {
+            document.body.removeChild(iframe);
+        });
+    },
+
+    toPrint: function (w, cb) {
+        let _this = this;
+        w.onload = function () {
+            try {
+                setTimeout(function () {
+                    w.focus();
+                    typeof _this.options.onStart === 'function' && _this.options.onStart();
+                    if (!w.document.execCommand('print', false, null)) {
+                        w.print();
+                    }
+                    typeof _this.options.onEnd === 'function' && _this.options.onEnd();
+                    w.close();
+                    cb && cb();
+                });
+            } catch (err) {
+                console.log('err', err);
+            }
+        };
+    }
+};
+const MyPlugin = {};
+MyPlugin.install = function (Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$print = Print;
+};
+export default MyPlugin;

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

@@ -1,16 +1,14 @@
 <template>
-  <div class="image-item">
+  <div class="image-item" @click="$emit('goDetail')">
-
+    <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 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>

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

@@ -1,17 +1,17 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" v-loading="tableLoading">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="query" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <!-- <el-form-item label="目录名称" prop="cataName">
+      <el-form-item label="图片名称" prop="name">
         <el-input
-          v-model="queryParams.cataName"
+          v-model="query.cataName"
-          placeholder="请输入目录名称"
+          placeholder="请输入图片名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item> -->
+      </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryTable">重置</el-button>
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
@@ -25,29 +25,50 @@
           v-hasPermi="['gallery:cata:export']"
         >导出</el-button>
       </el-col> -->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getTableList"></right-toolbar>
     </el-row>
     <div class="image-list">
-      <ImageItem style="width: 30%;"></ImageItem>
+      <ImageItem class="image-item" @goDetail="showImageViewer"></ImageItem>
-      <ImageItem style="width: 30%;margin-left: 10px;"></ImageItem>
+      <ImageItem class="image-item"></ImageItem>
-      <ImageItem style="width: 30%;margin-left: 10px;"></ImageItem>
+      <ImageItem class="image-item"></ImageItem>
     </div>
+    <!-- 表格页脚 -->
+    <pagination
+        v-show="total > 0"
+        :total="total"
+        :pageSizes="[5, 10, 20, 50]"
+        :page.sync="page.pageNum"
+        :limit.sync="page.pageSize"
+        @pagination="getTableList"
+      />
+      <MyImageViewer ref="previewImage" :z-index="2000"
+      :files="[{attachFileurl:'https://picsum.photos/200/300'}, {attachFileurl:'https://picsum.photos/200/300'}]"></MyImageViewer>
   </div>
 </template>
 
 <script>
 import ImageItem from './components/ImageItem.vue';
+import tableMixin from '../../../mixins/table-mixin';
 
 export default {
   name: 'List',
   components: {
     ImageItem
   },
+  mixins: [tableMixin],
   data() {
     return {
-
+      showViewer: false,
     };
   },
+  methods: {
+    showImageViewer() {
+      console.log('showImageViewer');
+      this.showViewer = true;
+      this.$refs.previewImage.open(0);
+
+    }
+  }
 }
 </script>
 
@@ -55,5 +76,10 @@ export default {
   .image-list {
     display: flex;
     flex-wrap: wrap;
+
+    .image-item {
+      width: 300px;
+      margin: 0 15px 15px 0;
+    }
   }
 </style>