更新 views/disk 模块

src/router/disk.js

@@ -1,12 +1,8 @@
 const Disk = () => import('views/disk/Disk')
-const DiskAlbumIndex = () => import('views/disk/DiskAlbumIndex')
 const DiskPhoto = () => import('views/disk/DiskPhoto')
 const DiskMe = () => import('views/disk/DiskMe')
-const DiskAlbumView = () => import('views/disk/DiskAlbumView')
-const DiskAlbumEdit = () => import('views/disk/DiskAlbumEdit')
 const DiskFile = () => import('views/disk/DiskFile')
 const DiskShare = () => import('views/disk/DiskShare')
-const DiskRecycle = () => import('views/disk/DiskRecycle')
 const CamList = () => import('views/disk/CamList')
 const CamDetail = () => import('views/disk/CamDetail')
 
@@ -35,6 +31,12 @@ export default {
       component: CamList,
       meta: { title: '我的监控', needAuth: true }
     },
+    {
+      path: '/disk/cam/detail',
+      name: 'CamDetail',
+      component: CamDetail,
+      meta: { needAuth: true }
+    },
     {
       path: '/disk/share',
       name: 'DiskShare',
@@ -46,36 +48,6 @@ export default {
       name: 'DiskMe',
       component: DiskMe,
       meta: { title: '我的', needAuth: true }
-    },
-    {
-      path: '/disk/recycle',
-      name: 'DiskRecycle',
-      component: DiskRecycle,
-      meta: { title: '回收站', needAuth: true }
-    },
-    {
-      path: '/disk/album',
-      name: 'DiskAlbumIndex',
-      component: DiskAlbumIndex,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/album/edit/:albumId',
-      name: 'DiskAlbumEdit',
-      component: DiskAlbumEdit,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/album/:albumId',
-      name: 'DiskAlbumView',
-      component: DiskAlbumView,
-      meta: { needAuth: true }
-    },
-    {
-      path: '/disk/cam/detail',
-      name: 'CamDetail',
-      component: CamDetail,
-      meta: { needAuth: true }
     }
   ]
 }

src/views/disk/DiskAlbumEdit.vue

@@ -1,388 +0,0 @@
-<template>
-  <div>
-    <el-row style="padding: 5px">
-      <span style="color: red">
-        点击图片可选中要删除的图片
-      </span>
-      <span style="color: green">
-        拖拽图片可改变图片显示的顺序
-      </span>
-    </el-row>
-    <el-row style="padding: 5px">
-      <el-button
-        style="float: left; padding: 5px"
-        icon="el-icon-plus"
-        type="text"
-        @click="onAddImage"
-      >添加图片</el-button>
-      <el-button
-        v-if="dragged"
-        style="float: left; padding: 5px"
-        icon="el-icon-edit"
-        type="text"
-        @click="onSaveDragResult"
-      >保存拖拽</el-button>
-      <el-button
-        v-if="deleteList.length !== 0"
-        style="float: left; padding: 5px"
-        icon="el-icon-delete"
-        type="text"
-        @click="onDeleteImage"
-      >删除图片</el-button>
-    </el-row>
-    <div v-loading="loading" style="height: 80vh;">
-      <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
-        <el-row v-if="dataList.length !== 0">
-          <draggable
-            v-model="dataList"
-            :scroll="true"
-            animation="500"
-            @start="onDragStart"
-            @end="onDragEnd"
-          >
-            <el-col
-              v-for="(album, index) in dataList"
-              :key="index"
-              :md="6"
-              :sm="12"
-              :xs="12"
-              style="padding: 5px"
-            >
-              <div :class="{ selected: checkDeleteElement(album.fileId) }" @click="changeDeleteList(album.fileId)">
-                <el-image
-                  lazy
-                  fit="cover"
-                  class="coverImg240"
-                  :src="album.url"
-                />
-              </div>
-            </el-col>
-          </draggable>
-        </el-row>
-        <el-row>
-          <div v-if="hasMore" style="display: flex; justify-content: center;">
-            <el-button link size="mini" type="text" icon="el-icon-bottom" @click="loadMore">
-              加载更多
-            </el-button>
-          </div>
-        </el-row>
-      </el-scrollbar>
-    </div>
-
-    <el-dialog
-      title="添加图片"
-      :visible.sync="showAddImageDialog"
-      width="100%"
-      center
-    >
-      <div>
-        <el-row v-if="dataListImage.length !== 0">
-          <el-col
-            v-for="(album, index) in dataListImage"
-            :key="index"
-            :md="6"
-            :sm="12"
-            :xs="12"
-            style="padding: 5px"
-          >
-            <div :class="{ selected: checkAddElement(album.fileId) }" @click="changeAddList(album.fileId)">
-              <el-image
-                lazy
-                fit="cover"
-                class="coverImg180"
-                :src="album.url"
-              />
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-pagination
-            :small="screenWidth <= 768"
-            hide-on-single-page
-            layout="prev, pager, next"
-            :page-size="pageSize"
-            :current-page="currentPageImage"
-            :total="totalSizeImage"
-            @current-change="handleCurrentChangeImage"
-            @prev-click="handleCurrentChangeImage"
-            @next-click="handleCurrentChangeImage"
-          />
-          <el-button
-            type="primary"
-            plain
-            size="small"
-            icon="el-icon-plus"
-            style="margin-left: 10px"
-            @click="onAddSelectedImage"
-          >
-            添加选择的图片
-          </el-button>
-          <el-button
-            type="primary"
-            plain
-            size="small"
-            icon="el-icon-check"
-            style="margin-left: 10px"
-            @click="onAddImageComplete"
-          >
-            完成添加
-          </el-button>
-        </el-row>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-import { editAlbum, createAlbum, getAlbumDetail, getAlbumExcludeFiles } from '@/api/disk'
-
-export default {
-  name: 'DiskAlbumEdit',
-  components: { draggable },
-  data() {
-    return {
-      albumId: null,
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 12,
-      totalSize: 0,
-      dataList: [],
-      loading: false,
-      hasMore: false,
-      // ****************************************************************************************************************
-      deleteList: [],
-      // ****************************************************************************************************************
-      dragged: false,
-      // ****************************************************************************************************************
-      showAddImageDialog: false,
-      currentPageImage: 1,
-      pageSizeImage: 12,
-      totalSizeImage: 0,
-      dataListImage: [],
-      addList: [],
-      // ****************************************************************************************************************
-      showCreateAlbumDialog: false,
-      createAlbumForm: {
-        albumName: null
-      }
-    }
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
-  },
-  created() {
-    const albumId = this.$route.params.albumId
-    if (!albumId) {
-      return
-    }
-
-    this.albumId = albumId
-    document.title = '管理相册'
-    this.getData()
-  },
-  methods: {
-    loadMore() {
-      this.currentPage += 1
-      this.getData()
-    },
-    getData() {
-      this.loading = true
-      getAlbumDetail(this.albumId, this.currentPage).then(resp => {
-        if (resp.code === 0) {
-          const respData = resp.data
-          document.title = '管理相册 ' + respData.albumName
-
-          this.dataList = this.dataList.concat(respData.pageList.list)
-          this.totalSize = respData.pageList.totalSize
-          this.hasMore = respData.pageList.hasNext
-        } else {
-          this.$message.error(resp.msg)
-        }
-      }).catch(error => {
-        this.$message.error(error.message)
-      }).finally(() => {
-        this.loading = false
-        // 滚动条始终保持在底部
-        this.$nextTick(() => {
-          this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
-        })
-      })
-    },
-    onCreateAlbum() {
-      this.showCreateAlbumDialog = true
-    },
-    createAlbum() {
-      this.showCreateAlbumDialog = false
-      createAlbum(this.createAlbumForm).then(resp => {
-        this.$message.info(resp.msg)
-      })
-    },
-    getAlbum(albumId) {
-      const path = '/disk/album/' + albumId
-      console.log(path)
-      this.$router.push({
-        path: path
-      })
-      this.$router.go(0)
-    },
-    handleCurrentChangeImage(pageNumber) {
-      this.currentPageImage = pageNumber
-      // this.dataListImage = []
-      this.getDataImage()
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getDataImage() {
-      const fileType = 1001
-      getAlbumExcludeFiles(fileType, this.currentPageImage).then(resp => {
-        if (resp.code === 0) {
-          const respData = resp.data
-          this.dataListImage = respData.list
-          this.totalSizeImage = respData.totalSize
-        }
-      })
-    },
-    onAddImage() {
-      this.showAddImageDialog = true
-      this.getDataImage()
-    },
-    onAddSelectedImage() {
-      if (this.albumId === 0) {
-        this.$message.error('albumId error')
-        return
-      }
-
-      const jsonData = {}
-      jsonData.albumId = this.albumId
-      jsonData.operation = 1
-      jsonData.fileIds = this.addList
-      this.editAlbumWrapper(jsonData)
-    },
-    onAddImageComplete() {
-      this.showAddImageDialog = false
-    },
-    editAlbumWrapper(payload) {
-      editAlbum(payload).then(resp => {
-        /* if (resp.code === 0) {
-          this.$router.go(0)
-        } else {
-          this.$message.info(resp.msg)
-        }*/
-        this.$message.info(resp.msg)
-        if (payload.operation === 1) {
-          this.addList = []
-          this.getDataImage()
-        }
-      }).catch(error => {
-        this.$message.error(error.message)
-      })
-    },
-    onDragStart() {
-      this.$message.info('drag start')
-    },
-    onDragEnd() {
-      this.$message.info('drag end')
-      this.dragged = true
-    },
-    onSaveDragResult() {
-      var fileIds = []
-      for (const item of this.dataList) {
-        fileIds.push(item.fileId)
-      }
-
-      const jsonData = {}
-      jsonData.albumId = this.albumId
-      jsonData.operation = 2
-      jsonData.fileIds = fileIds
-      this.editAlbumWrapper(jsonData)
-    },
-    onDeleteImage() {
-      this.$confirm('确定要删除选中的 ' + this.deleteList.length + ' 张图片?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        const jsonData = {}
-        jsonData.albumId = this.albumId
-        jsonData.operation = 3
-        jsonData.fileIds = this.deleteList
-        this.editAlbumWrapper(jsonData)
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
-        })
-      })
-    },
-    changeDeleteList(val) {
-      var result = this.deleteList.some(ele => ele === val)
-      if (!result) {
-        this.deleteList.push(val)
-      } else {
-        this.deleteList = this.deleteList.filter(function(ele) {
-          return ele !== val
-        })
-      }
-    },
-    checkDeleteElement(val) {
-      return this.deleteList.some(ele => ele === val)
-    },
-    changeAddList(val) {
-      var result = this.addList.some(ele => ele === val)
-      if (!result) {
-        this.addList.push(val)
-      } else {
-        this.addList = this.addList.filter(function(ele) {
-          return ele !== val
-        })
-      }
-      console.log(this.addList)
-    },
-    checkAddElement(val) {
-      return this.addList.some(ele => ele === val)
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 320px;
-  display: block;
-}
-
-.coverImg240 {
-  width: 100%;
-  height: 240px;
-  display: block;
-}
-
-.coverImg180 {
-  width: 100%;
-  height: 180px;
-  display: block;
-}
-
-.selected {
-  color: #4abe84;
-  box-shadow: 0 2px 7px 0 rgba(85, 110, 97, 0.35);
-  border-radius: 1px;
-  border: 3px solid rgba(74, 190, 132, 1);
-}
-</style>

src/views/disk/DiskAlbumIndex.vue

@@ -1,236 +0,0 @@
-<template>
-  <div>
-    <el-row style="padding: 5px">
-      <el-button
-        style="float: left; padding: 5px"
-        icon="el-icon-plus"
-        type="text"
-        @click="onCreateAlbum"
-      >创建相册</el-button>
-    </el-row>
-    <el-row style="padding: 5px">
-      <el-col
-        v-for="(album, index) in dataList"
-        :key="index"
-        :md="6"
-        :sm="12"
-        :xs="12"
-        style="padding: 5px"
-      >
-        <el-card :body-style="{ padding: '1px' }">
-          <router-link style="text-decoration-line: none" target="_blank" :to="`/disk/album/${album.albumId}`">
-            <div>
-              <el-image
-                lazy
-                fit="cover"
-                :src="album.coverUrl"
-                class="coverImg"
-              />
-            </div>
-          </router-link>
-          <div style="padding: 14px">
-            <el-row style="padding: 1px">
-              <span style="color: black">
-                {{ album.albumName }}
-              </span>
-              <span style="color: black">
-                <i class="el-icon-picture-outline">{{ album.num }}</i>
-              </span>
-            </el-row>
-            <el-row style="padding: 1px">
-              <el-button style="float: right; padding: 5px;" icon="el-icon-share" type="text" @click="onShareAlbum(album.albumId)">分享</el-button>
-              <router-link style="text-decoration-line: none" target="_blank" :to="`/disk/album/${album.albumId}`">
-                <el-button style="float: right; padding: 5px" icon="el-icon-view" type="text" @click="true">查看</el-button>
-              </router-link>
-              <router-link style="text-decoration-line: none" target="_blank" :to="`/disk/album/edit/${album.albumId}`">
-                <el-button style="float: right; padding: 5px" icon="el-icon-edit" type="text" @click="true">管理</el-button>
-              </router-link>
-            </el-row>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-pagination
-        :small="screenWidth <= 768"
-        hide-on-single-page
-        layout="prev, pager, next"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        :total="totalSize"
-        @current-change="handleCurrentChange"
-        @prev-click="handleCurrentChange"
-        @next-click="handleCurrentChange"
-      />
-    </el-row>
-
-    <el-dialog
-      :visible.sync="showCreateAlbumDialog"
-      width="100%"
-      center
-    >
-      <div>
-        <el-form ref="createAlbumForm" :model="createAlbumForm">
-          <el-form-item label="相册名" label-width="120px" prop="title">
-            <el-input
-              v-model="createAlbumForm.albumName"
-              style="margin-left: 5px"
-              clearable
-            />
-          </el-form-item>
-          <el-button
-            type="primary"
-            plain
-            size="small"
-            icon="el-icon-plus"
-            style="margin-left: 10px"
-            @click="createAlbum"
-          >
-            创建相册
-          </el-button>
-        </el-form>
-      </div>
-    </el-dialog>
-    <el-dialog
-      :visible.sync="showCreateShareDialog"
-      width="100%"
-      center
-    >
-      <div>
-        <el-form ref="createAlbumForm" :model="createShareForm">
-          <el-form-item label="过期时间" label-width="120px" prop="title">
-            <el-input
-              v-model="createShareForm.expireAt"
-              style="margin-left: 5px"
-              clearable
-            />
-          </el-form-item>
-          <el-form-item label="选择用户" label-width="120px" prop="title">
-            <el-checkbox-group v-model="createShareForm.shareToList">
-              <el-checkbox v-for="user in userContactList" :key="user.userIdStr" :label="user.username" />
-            </el-checkbox-group>
-          </el-form-item>
-          <el-button
-            type="primary"
-            plain
-            size="small"
-            icon="el-icon-plus"
-            style="margin-left: 10px"
-            @click="createShare"
-          >
-            分享相册
-          </el-button>
-        </el-form>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { createAlbum, createShare, getAlbumList } from '@/api/disk'
-import { getUserContact } from '@/api/user'
-
-export default {
-  name: 'DiskAlbumIndex',
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 12,
-      totalSize: 0,
-      dataList: [],
-      // ****************************************************************************************************************
-      showCreateAlbumDialog: false,
-      createAlbumForm: {
-        albumName: null,
-        fileType: 1001
-      },
-      // ****************************************************************************************************************
-      showCreateShareDialog: false,
-      userContactList: [],
-      createShareForm: {
-        albumType: 2,
-        albumId: null,
-        shareToList: []
-      }
-    }
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
-  },
-  created() {
-    document.title = '相册'
-    this.getData()
-  },
-  methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.dataList = []
-      this.getData()
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getData() {
-      getAlbumList(this.currentPage).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data
-        }
-      })
-    },
-    onCreateAlbum() {
-      this.showCreateAlbumDialog = true
-    },
-    createAlbum() {
-      this.showCreateAlbumDialog = false
-      createAlbum(this.createAlbumForm).then(resp => {
-        this.$message.info(resp.msg)
-      })
-    },
-    onShareAlbum(albumId) {
-      this.createShareForm.albumId = albumId
-      getUserContact(1).then(resp => {
-        if (resp.code === 0) {
-          this.userContactList = resp.data
-          this.showCreateShareDialog = true
-        } else {
-          this.$message.error(resp.msg)
-        }
-      })
-    },
-    createShare() {
-      createShare(this.createShareForm).then(resp => {
-        this.$message.info(resp.msg)
-      }).finally(() => {
-        this.showCreateShareDialog = false
-        this.createShareForm = {
-          albumType: 2,
-          albumId: null,
-          shareToList: []
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 180px;
-  display: block;
-}
-</style>

src/views/disk/DiskAlbumView.vue

@@ -1,125 +0,0 @@
-<template>
-  <div v-loading="loading" style="height: 80vh;">
-    <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
-      <el-row v-if="dataList.length !== 0">
-        <el-col
-          v-for="(album, index) in dataList"
-          :key="index"
-          :md="6"
-          :sm="12"
-          :xs="12"
-          style="padding: 5px"
-        >
-          <el-image
-            lazy
-            fit="cover"
-            class="coverImg"
-            :src="album.url"
-            @click="showImages(index)"
-          />
-        </el-col>
-      </el-row>
-      <el-row v-if="!loading && dataList.length === 0" style="display: flex; justify-content: center;">
-        <span style="color: #007bff">
-          这是一个空相册, 快去
-          <router-link style="text-decoration-line: none; color: red" :to="`/disk/album/edit/${albumId}`">
-            添加
-          </router-link>
-          点照片到相册中吧!
-        </span>
-      </el-row>
-      <el-row>
-        <div v-if="hasMore" style="display: flex; justify-content: center;">
-          <el-button link size="mini" type="text" icon="el-icon-bottom" @click="loadMore">
-            加载更多
-          </el-button>
-        </div>
-      </el-row>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script>
-
-import { getAlbumDetail } from '@/api/disk'
-
-export default {
-  name: 'DiskAlbumView',
-  data() {
-    return {
-      albumId: null,
-      currentPage: 1,
-      dataList: [],
-      loading: false,
-      hasMore: false
-    }
-  },
-  created() {
-    document.title = '查看相册'
-    const albumId = this.$route.params.albumId
-    if (albumId === undefined) {
-      return
-    }
-    this.albumId = albumId
-    this.getData()
-  },
-  methods: {
-    getData() {
-      this.loading = true
-      getAlbumDetail(this.albumId, this.currentPage).then(resp => {
-        if (resp.code === 0) {
-          const respData = resp.data
-          document.title = '查看相册 ' + respData.albumName
-
-          this.dataList = this.dataList.concat(respData.pageList.list)
-          this.hasMore = respData.pageList.hasNext
-        } else {
-          this.$message.error(resp.msg)
-        }
-      }).catch(error => {
-        this.$message.error(error.message)
-      }).finally(() => {
-        this.loading = false
-        // 滚动条始终保持在底部
-        this.$nextTick(() => {
-          this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
-        })
-      })
-    },
-    loadMore() {
-      this.currentPage += 1
-      this.getData()
-    },
-    showImages(index) {
-      const imageUrls = []
-      for (const item of this.dataList) {
-        imageUrls.push(item.url)
-      }
-      this.$viewerApi({
-        images: imageUrls,
-        options: {
-          initialViewIndex: index,
-          movable: true,
-          fullscreen: false,
-          keyboard: true
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-.coverImg {
-  width: 100%;
-  height: 320px;
-  display: block;
-}
-</style>

src/views/disk/DiskRecycle.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <span>disk recycle</span>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'DiskRecycle',
-  data() {
-    return {
-    }
-  },
-  created() {
-    document.title = '回收站'
-    this.getData()
-  },
-  methods: {
-    getData() {
-    }
-  }
-}
-</script>
-
-<style>
-</style>