图片预览功能

package.json

@@ -32,7 +32,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "qs": "^6.9.4",
-    "v-viewer": "^1.5.1",
+    "v-viewer": "^1.6.4",
     "viewerjs": "^1.11.6",
     "vue": "2.7.10",
     "vue-cropper": "^0.5.4",

src/views/login/login.vue

@@ -86,9 +86,10 @@
             :loading="loading"
             size="medium"
             type="primary"
-            :disabled="!verify"
+
             @click.native.prevent="handleLogin"
           >
+<!--            :disabled="!verify"-->
             <span v-if="!loading">{{ '登 录' }}</span>
             <span v-else>登 录 中...</span>
           </el-button>

src/views/system/user/index.vue

@@ -29,7 +29,7 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-<!--          //查询按钮-->
+          <!--          //查询按钮-->
           <el-button
             :class="commonField.queryClass"
             :type="commonField.typePrimary"
@@ -37,7 +37,7 @@
             :size="commonField.smallSize"
             @click="handleQuery"
           >{{ commonField.queryName }}</el-button>
-<!--          //重置按钮-->
+          <!--          //重置按钮-->
           <el-button
             :class="commonField.resetClass"
             :icon="commonField.resetIcon"
@@ -46,7 +46,8 @@
           >{{ commonField.resetName }}</el-button>
         </el-form-item>
         <el-form-item style="float: right">
-<!--          //新增按钮-->
+          <el-button type="primary" @click="handleTest">图片预览测试</el-button>
+          <!--          //新增按钮-->
           <el-button
             v-hasPermi="hasAddPerm"
             :class="commonField.addClass"
@@ -55,7 +56,7 @@
             :size="commonField.smallSize"
             @click="handleAdd"
           >{{ commonField.addName }}</el-button>
-<!--          //导入按钮-->
+          <!--          //导入按钮-->
           <el-button
             v-hasPermi="hasImportPerm"
             :class="commonField.importClass"
@@ -64,7 +65,7 @@
             :size="commonField.smallSize"
             @click="handleImport"
           >{{ commonField.importName }}</el-button>
-<!--          //导出-->
+          <!--          //导出-->
           <el-button
             v-hasPermi="hasExportPerm"
             :class="commonField.exportClass"
@@ -153,7 +154,7 @@
             class-name="small-padding fixed-width"
           >
             <template slot-scope="scope">
-<!--              //修改-->
+              <!--              //修改-->
               <el-button
                 v-hasPermi="hasUpdatePerm"
                 :class="commonField.updateClass"
@@ -161,7 +162,7 @@
                 :size="commonField.size"
                 @click="handleUpdate(scope.row)"
               >{{ commonField.updateName }}</el-button>
-<!--              //重置密码-->
+              <!--              //重置密码-->
               <el-button
                 v-hasPermi="hasResetPerm"
                 :class="commonField.resetPasClass"
@@ -169,7 +170,7 @@
                 :size="commonField.size"
                 @click="handleResetPwd(scope.row)"
               >{{ commonField.resetPassword }}</el-button>
-<!--              //删除-->
+              <!--              //删除-->
               <el-button
                 v-if="scope.row.businessId !== 1"
                 v-hasPermi="hasDelPerm"
@@ -196,7 +197,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item v-if="form.businessId == undefined" label="登录名" prop="username">
-              <el-input show-word-limit maxlength="20" v-model="form.username" placeholder="请输入登录名" />
+              <el-input v-model="form.username" show-word-limit maxlength="20" placeholder="请输入登录名" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -371,6 +372,26 @@
         <el-button class="submitBtn" :disabled="userRestLoading" :loading="userRestLoading" type="primary" @click="handleResetPwdSure">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog title="图片" :visible.sync="testOpen" append-to-body>
+      <el-upload
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        list-type="picture-card"
+        :on-preview="handlePictureCardPreview"
+        :on-remove="handleRemoveImg"
+        :on-success="uploadSuccess"
+        :file-list="imgFileList"
+      >
+        <i class="el-icon-plus" />
+      </el-upload>
+    </el-dialog>
+    <!-- 大图预览 -->
+    <el-image-viewer
+      v-if="showImgViewer"
+      :on-close="closeImgViewer"
+      :url-list="imagePreviewUrls"
+      :z-index="9999"
+      :initial-index="initialImgPreviewIndex"
+    />
   </div>
 </template>
 <script>
@@ -395,9 +416,10 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { getListRole } from '@/api/system/role'
 import { getDataCache, setDataCache } from '@/assets/js/filterData'
 import commonField from '@/utils/commonField'
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
 export default {
   name: 'User',
-  components: { TreeSelect },
+  components: { TreeSelect, ElImageViewer },
   data() {
     const trueGroupName = (rule, value, callback) => {
       if (value && !value.trim()) {
@@ -413,6 +435,13 @@ export default {
       callback()
     }
     return {
+      initialImgPreviewIndex: 0, // 预览打开看到的图片下标
+      imagePreviewUrls: [], // 预览图片的下标
+      showImgViewer: false,
+      testOpen: false,
+      dialogImageUrl: [],
+      dialogVisible: false,
+      imgFileList: [],
       pwdTypeMap: {
         text: true,
         password: false
@@ -598,6 +627,34 @@ export default {
     // })
   },
   methods: {
+    handlePictureCardPreview(file) {
+      const index = this.imagePreviewUrls.indexOf(file.url)
+      if (index >= 0) {
+        this.initialImgPreviewIndex = index
+      }
+      this.showImgViewer = true
+    },
+    closeImgViewer() {
+      this.showImgViewer = false
+    },
+    uploadSuccess(file, fileList) {
+      if (fileList.status === 'success') {
+        this.imagePreviewUrls.push(fileList.url) // 预览图片的数组
+      }
+    },
+    // 删除选中的文件
+    handleRemoveImg(file) {
+      // 删除预览数组对应的图片
+      const index = this.imagePreviewUrls.indexOf(file.url)
+      if (index > -1) {
+        this.imagePreviewUrls.splice(index, 1)
+      }
+      // 执行删除
+    },
+
+    handleTest() {
+      this.testOpen = true
+    },
     /** 部门change事件*/
     changeValue() {
       this.$refs.form.validateField('id')