相册详情

src/router/index.js

@@ -59,6 +59,22 @@ export const constantRoutes = [
     }]
   },
   {
+    path: '/photo-detail', // 相册详情
+    component: Layout,
+    hidden: true,
+    children: [
+    {
+      name: '相册详情',
+      path: ':id',
+      component: () => import('@/views/photo-detail'),
+      hidden: true,
+      meta: {
+        noCache: '1',
+        title: '相册详情'
+      }
+    }]
+  },
+  {
     path: '/setSilder', // 侧边栏
     component: Layout,
     hidden: true,

src/views/photo-detail/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="m-container">
+    <h2>
+      <el-page-header @back="onCancel" :content="detailName"></el-page-header>
+    </h2>
+    <div class="m-core">
+      <div class="buttons">
+        <el-button type="primary" @click="openUpload()">上传照片</el-button>
+        <el-button type="primary" v-if="!editing" @click="changeMode()">编辑照片</el-button>
+        <el-button type="danger" v-if="editing" @click="remove()">删除照片</el-button>
+        <el-button type="primary" v-if="editing" @click="confirm()">确定</el-button>
+        <el-button type="primary" v-if="editing" @click="editing = false">取消</el-button>
+      </div>
+      <el-alert
+        v-if="editing"
+        type="info"
+        class="alert"
+        :closable="false">
+        <div slot="title">
+          <el-button class="btn" type="text" :disabled="list.length === checked.length" @click="checkAll()">全选</el-button>
+          <el-button class="btn" type="text" :disabled="!checked.length" @click="checked = []">取消选择</el-button>
+          <span>共{{list.length}}条, 已选择{{checked.length}}条</span>
+        </div>
+      </el-alert>
+      <el-checkbox-group v-model="checked">
+        <div
+          v-for="(item) in list"
+          :key="item.url"
+          class="img-container"
+        >
+          <div v-if="editing" class="ctrl-bar">
+            <el-checkbox class="check" :label="item.id"></el-checkbox>
+            <i class="el-icon-view" :class="{active: views.includes(item.id)}" @click="setView(item)"></i>
+          </div>
+          <el-image
+            :src="item.url"
+            class="img"
+            :preview-src-list="list.map(item => item.url)">
+          </el-image>
+          <el-tooltip v-if="!editing" class="item" effect="dark" :content="item.name" placement="top" :open-delay=".3">
+            <div class="name">{{item.name}}</div>
+          </el-tooltip>
+          <el-input class="nameinput" v-else v-model="item.name" size="mini" placeholder="请输入照片名称" clearable/>
+        </div>
+      </el-checkbox-group>
+      <empty v-if="list.length == 0"/>
+    </div>
+    <el-dialog
+      title="上传照片"
+      :visible.sync="uploadVisible"
+      v-if="uploadVisible"
+    >
+      <upload-popup
+        @close="uploadVisible = false"
+        @submited="submited"
+        :name="$route.query.name"
+      />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import uploadPopup from '@/views/resetTeaming/components/training-photos/upload'
+import { photoQueryPage, photoDel } from '@/views/resetTeaming/components/training-photos/api'
+export default {
+  components: {
+    'upload-popup': uploadPopup,
+  },
+  computed: {
+    detailName() {
+      return this.$route.query.name || '相册详情'
+    }
+  },
+  data() {
+    return {
+      views: [],
+      checked: [],
+      uploadVisible: false,
+      list: [],
+      editing: false,
+    }
+  },
+  mounted() {
+    this.FetchList()
+  },
+  methods: {
+    onCancel() {
+      this.$store.dispatch("delVisitedViews", this.$route);
+      if (this.$route.query.returnUrl) {
+        this.$router.push(this.$route.query.returnUrl);
+      }
+    },
+    openUpload() {
+      this.uploadVisible = true
+    },
+    changeMode() {
+      this.checked = []
+      this.views = this.list.filter(item => item.clientShow).map(item => item.id)
+      this.editing = true
+    },
+    submited() {
+      this.FetchList()
+    },
+    setView(item){
+      const indexOf = this.views.indexOf(item.id)
+      if (indexOf > -1) {
+        this.views.splice(indexOf, 1)
+      } else {
+        this.views.push(item.id)
+      }
+    },
+    checkAll() {
+      this.checked = this.list.map(item => item.id)
+    },
+    async FetchList() {
+      try {
+        const res = await photoQueryPage({photoAlbumId: this.$route.params.id})
+        console.log(res.data.rows)
+        this.list = res.data.rows
+      } catch (error) {}
+    },
+    async confirm() {
+      try {
+        await this.$confirm('是否确认修改照片信息?', '提示')
+
+      } catch (error) {}
+    },
+    async remove() {
+      try {
+        await this.$confirm('是否确认删除已选照片?', '提示')
+        await photoDel({
+          ids: this.checked.join(',')
+        })
+      } catch (error) {}
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.img-container{
+  display: inline-flex;
+  margin-right: 20px;
+  margin-top: 20px;
+  flex-direction: column;
+  text-align: center;
+  position: relative;
+  >.name{
+    width: 150px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    margin-top: 10px;
+    color: rgba(0, 0, 0, .65);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre;
+    font-size: 14px;
+  }
+  >.nameinput{
+    width: 150px;
+    margin-top: 10px;
+  }
+}
+.ctrl-bar{
+  background-color: rgba(0, 0, 0, .45);
+  height: 30px;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 15px;
+}
+.el-icon-view{
+  font-size: 14px;
+  color: #fff;
+  cursor: pointer;
+  &.active{
+    color: #14928A;
+  }
+}
+.switch{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+}
+.img{
+  width: 150px;
+  height: 150px;
+  border-radius: 3px;
+}
+.alert{
+  margin-top: 20px;
+}
+.btn{
+  padding: 0;
+}
+</style>

src/views/resetTeaming/components/training-photos/api.js

@@ -57,6 +57,7 @@ export const photoDel = (data) => {
     url: '/api-web/photo/del',
     data: data,
     method: 'post',
+    requestType: 'form'
   })
 }
 

src/views/resetTeaming/components/training-photos/group/index.vue

@@ -48,7 +48,7 @@ export default {
       color: rgba(0, 0, 0, .65);
       overflow: hidden;
       text-overflow: ellipsis;
-      word-break: keep-all;
+      white-space: pre;
     }
     .img{
       width: 80px;

src/views/resetTeaming/components/training-photos/index.vue

@@ -2,12 +2,13 @@
   <div>
     <div class="btns">
       <el-button type="primary" @click="openForm()">新建相册</el-button>
-      <el-button type="primary" @click="openUpload()">上传图片</el-button>
+      <!-- <el-button type="primary" @click="openUpload()">上传图片</el-button> -->
     </div>
     <div
       v-for="item in list"
       :key="item.id"
       class="item-container"
+      @click="toDetail(item)"
     >
       <group
         class="item"
@@ -84,6 +85,15 @@ export default {
       this.page = 1
       this.FetchList()
     },
+    toDetail(item) {
+      this.$router.push({
+        path: '/photo-detail/' + item.id,
+        query: {
+          returnUrl: this.$route.fullPath,
+          name: item.name
+        }
+      })
+    },
     async FetchList() {
       try {
         const res = await photoAlbumQueryPage({

src/views/resetTeaming/components/training-photos/upload/index.vue

@@ -6,6 +6,13 @@
     @submit.stop.native="submit"
   >
     <el-form-item
+      v-if="name"
+      label="相册"
+    >
+      {{name}}
+    </el-form-item>
+    <el-form-item
+      v-else
       label="相册"
       prop="photoAlbumId"
       :rules="[{required: true, message: '请选择相册'}]"
@@ -60,6 +67,9 @@
 <script>
 import { photoAdd, photoAlbumQueryPage } from '../api'
 export default {
+  props: {
+    name: String
+  },
   data() {
     return {
       fileList: [],
@@ -116,7 +126,7 @@ export default {
           if (valid) {
             const phoths = this.uploaded.map(item => ({
               ...item,
-              photoAlbumId: this.form.photoAlbumId,
+              photoAlbumId: this.form.photoAlbumId || this.$route.params.id,
             }))
             await photoAdd(phoths)
             this.$message.success('添加成功')