Merge branch '07/06musicArchives' of http://git.dayaedu.com/yonge/dy-admin-manager into 07/06musicArchives

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/musicArchices.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tab-router v-model="activeIndex" ref="tab">
+    <tab-router v-model="activeIndex" ref="tab" searchKey="musicArchices">
       <el-tab-pane
         label="基本信息"
         lazy
@@ -47,7 +47,7 @@
         v-if="permission('/teamBaseInfo')"
         name="6"
       >
-
+        <training-photos/>
       </el-tab-pane>
       <el-tab-pane
         label="乐团资讯"
@@ -70,6 +70,7 @@
 </template>
 <script>
 import { permission } from "@/utils/directivePage";
+import trainingPhotos from './training-photos'
 import baseInfo from "./archicesComponents/baseInfo";
 import certificate from "./archicesComponents/certificate";
 import studentAndTeacher from "./archicesComponents/studentAndTeacher";
@@ -80,6 +81,7 @@ import trainTimer from "./archicesComponents/trainTimer";
 import workStatus from "./archicesComponents/workStatus";
 export default {
   components: {
+    'training-photos': trainingPhotos,
     baseInfo,
     certificate,
     studentAndTeacher,
@@ -91,7 +93,7 @@ export default {
   },
   data() {
     return {
-      activeIndex: "1",
+      activeIndex: "training-photos",
     };
   },
   mounted() {},

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

@@ -0,0 +1,70 @@
+import request from '@/utils/request2'
+
+export const photoAlbumQueryPage = (data) => {
+  return request({
+    url: '/api-web/photoAlbum/queryPage',
+    data,
+    method: 'post',
+  })
+}
+
+export const photoAlbumAdd = (data) => {
+  return request({
+    url: '/api-web/photoAlbum/add',
+    data: data,
+    method: 'post',
+    requestType: 'form'
+  })
+}
+
+export const photoAlbumDel = (data) => {
+  return request({
+    url: '/api-web/photoAlbum/del',
+    data: {},
+    params: data,
+    method: 'post',
+  })
+}
+
+export const photoAlbumUpdate = (data) => {
+  return request({
+    url: '/api-web/photoAlbum/update',
+    data: data,
+    method: 'post',
+    requestType: 'form'
+  })
+}
+
+export const photoQueryPage = (data) => {
+  return request({
+    url: '/api-web/photo/queryPage',
+    data: data,
+    method: 'post',
+    requestType: 'form'
+  })
+}
+
+export const photoAdd = (data) => {
+  return request({
+    url: '/api-web/photo/add',
+    data: data,
+    method: 'post',
+  })
+}
+
+export const photoDel = (data) => {
+  return request({
+    url: '/api-web/photo/del',
+    data: data,
+    method: 'post',
+    requestType: 'form'
+  })
+}
+
+export const photoUpdate = (data) => {
+  return request({
+    url: '/api-web/photo/update',
+    data: data,
+    method: 'post',
+  })
+}

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

@@ -0,0 +1,79 @@
+<template>
+  <el-form
+    ref="form"
+    :model="form"
+    label-width="80px"
+    @submit.stop.native="submit"
+  >
+    <el-form-item
+      label="相册名称"
+      prop="name"
+      :rules="[{required: true, message: '请输入相册名称'}]"
+    >
+      <el-input v-model="form.name" placeholder="请输入相册名称"/>
+    </el-form-item>
+    <div class="dialog-footer">
+      <el-button @click="$emit('close')">取 消</el-button>
+      <el-button
+        type="primary"
+        native-type="submit"
+      >确 定</el-button>
+    </div>
+  </el-form>
+</template>
+<script>
+import { photoAlbumAdd, photoAlbumUpdate } from '../api'
+export default {
+  props: {
+    detail: {
+      type: Object,
+    }
+  },
+  data() {
+    return {
+      form: {
+        name: ''
+      }
+    }
+  },
+  mounted() {
+    if (this.detail) {
+      this.form.name = this.detail.name
+    }
+  },
+  methods: {
+    async submit(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          try {
+            if (this.detail) {
+              await photoAlbumUpdate({
+                ...this.form,
+                musicGroupId: this.$route.query.id,
+                id: this.detail.id
+              })
+              this.$message.success('修改成功')
+            } else {
+              await photoAlbumAdd({
+                ...this.form,
+                musicGroupId: this.$route.query.id
+              })
+              this.$message.success('添加成功')
+            }
+            this.$emit('close')
+            this.$emit('submited')
+          } catch (error) {}
+        }
+      })
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.dialog-footer{
+  text-align: right;
+}
+</style>

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="group">
+    <div class="list">
+      <el-image
+        v-for="(item, index) in list"
+        :src="item"
+        :key="item"
+        class="img"
+        :style="{marginRight: (index % 2 ? 0 : '10px'), marginTop: (index > 1 ? '6px' : '0')}"
+        :preview-src-list="list">
+      </el-image>
+    </div>
+    <el-tooltip class="item" effect="dark" :content="name" placement="top" :open-delay=".3">
+      <div class="title">{{name}}</div>
+    </el-tooltip>
+    <!-- <viewer class="viewer">
+      <div class="img" v-for="item in list" :src="item" :key="item"></div>
+    </viewer> -->
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+    },
+    list: {
+      type: Array,
+      default: []
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .group{
+    width: 190px;
+    .list{
+      width: 190px;
+      padding: 10px;
+      background-color: rgba(0, 0, 0, .05);
+      border-radius: 6px;
+    }
+    .title{
+      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;
+    }
+    .img{
+      width: 80px;
+      height: 80px;
+      border-radius: 3px;
+    }
+    .viewer{
+      img {
+        width: 48%;;
+        margin-top: 4%;
+      }
+      img:nth-child(2n) {
+        margin-right: 0;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="btns">
+      <el-button type="primary" @click="openForm()">新建相册</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"
+        :list="imgs"
+        :name="item.name"
+      />
+      <div class="ctrls">
+        <el-dropdown @command="command => handleCommand(command, item)">
+          <span class="el-dropdown-link">
+            更多操作 <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="ctrls-dropdown">
+            <el-dropdown-item command="realName">重命名</el-dropdown-item>
+            <el-dropdown-item command="remove" style="color: red;">删除</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </div>
+    <empty v-if="list.length == 0"/>
+    <el-dialog
+      :title="detail ? '修改相册' : '创建相册'"
+      :visible.sync="formVisible"
+      v-if="formVisible"
+    >
+      <form-popup
+        :detail="detail"
+        @close="formVisible = false"
+        @submited="submited"
+      />
+    </el-dialog>
+    <el-dialog
+      title="上传照片"
+      :visible.sync="uploadVisible"
+      v-if="uploadVisible"
+    >
+      <upload-popup
+        @close="uploadVisible = false"
+        @submited="submited"
+      />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { photoAlbumDel, photoAlbumQueryPage } from './api'
+import group from './group'
+import formPopup from './form'
+import uploadPopup from './upload'
+export default {
+  name: 'training-photos',
+  components: {
+    group,
+    'form-popup': formPopup,
+    'upload-popup': uploadPopup,
+  },
+  data() {
+    return {
+      page: 1,
+      formVisible: false,
+      uploadVisible: false,
+      detail: null,
+      list: [],
+      imgs: [
+        'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
+        'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
+        'https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF'
+      ]
+    }
+  },
+  mounted() {
+    this.FetchList()
+  },
+  methods: {
+    submited() {
+      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({
+          musicGroupId: this.$route.query.id
+        })
+        this.list = res.data.rows
+      } catch (error) {}
+    },
+    async removeItem(item) {
+      console.log(item)
+      try {
+        await this.$confirm('相册内的照片将一起删除无法恢复，请谨慎操作', '提示')
+        await photoAlbumDel({id: item.id})
+        this.submited()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    handleCommand(command, item) {
+      if (command === 'remove') {
+        this.removeItem(item)
+      } else if (command === 'realName') {
+        this.openForm(item)
+      }
+    },
+    openForm(item) {
+      this.detail = item
+      this.formVisible = true
+    },
+    openUpload() {
+      this.uploadVisible = true
+    },
+  }
+}
+</script>
+<style scoped lang="less">
+.item-container{
+  position: relative;
+  display: inline-block;
+  margin-top: 20px;
+  .ctrls{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    bottom: 40px;
+    visibility: hidden;
+    opacity: 0;
+    border-radius: 10px;
+    transition: all .3s;
+  }
+}
+.item-container:hover,
+.ctrls-dropdown:hover{
+  .ctrls{
+    visibility: visible;
+    opacity: 1;
+    background-color: rgba(0, 0, 0, .4);
+  }
+}
+// .group{
+// }
+</style>

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

@@ -0,0 +1,158 @@
+<template>
+  <el-form
+    ref="form"
+    :model="form"
+    label-width="80px"
+    @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: '请选择相册'}]"
+    >
+      <el-select v-model="form.photoAlbumId" placeholder="请选择相册">
+        <el-option v-for="item in photos" :key="item.id" :label="item.name" :value="item.id"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      label="上传相册"
+    >
+      <el-upload
+        action="/api-web/uploadFile"
+        :on-preview="handlePictureCardPreview"
+        :show-file-list="false"
+        multiple
+        accept=".png, .jpg, .jpeg, .gif"
+        :on-success="successed"
+        :on-remove="handleRemove">
+        <el-button type="primary">上传图片</el-button>
+      </el-upload>
+      <div class="img-container">
+        <div class="list" v-if="uploaded.length > 0">
+          <div
+            v-for="(item) in uploaded"
+            :key="item.url"
+            class="item"
+          >
+            <el-image
+              :src="item.url"
+              :preview-src-list="uploaded.map(item => item.url)"
+              class="img">
+            </el-image>
+            <el-input v-model="item.name" placeholder="请输入图片名称" clearable size="mini"/>
+          </div>
+        </div>
+        <empty v-else/>
+      </div>
+    </el-form-item>
+    <div class="dialog-footer">
+      <el-button @click="$emit('close')">取 消</el-button>
+      <el-button
+        type="primary"
+        native-type="submit"
+      >确 定</el-button>
+    </div>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </el-form>
+</template>
+<script>
+import { photoAdd, photoAlbumQueryPage } from '../api'
+export default {
+  props: {
+    name: String
+  },
+  data() {
+    return {
+      fileList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      form: {
+        photoAlbumId: ''
+      },
+      uploaded: [],
+      photos: []
+    }
+  },
+  mounted() {
+    this.FetchList()
+  },
+  methods: {
+    handleChange(file, fileList) {
+      this.fileList = fileList.slice(-3);
+    },
+    successed(response, file, fileList) {
+      if (response.code === 200) {
+        this.uploaded.push({
+          url: response.data.url,
+          name: file.name.split('.').shift(),
+          clientShow: 'YES',
+        })
+      } else {
+        this.$message.error(res.data?.message || res.msg || '上传失败')
+      }
+      console.log(response, file, fileList)
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    async FetchList() {
+      try {
+        const res = await photoAlbumQueryPage({
+          musicGroupId: this.$route.query.id,
+          rows: 9999
+        })
+        this.photos = res.data.rows
+      } catch (error) {}
+    },
+    async submit(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      try {
+        this.$refs.form.validate(async (valid) => {
+          if (valid) {
+            const phoths = this.uploaded.map(item => ({
+              ...item,
+              photoAlbumId: this.form.photoAlbumId || this.$route.params.id,
+            }))
+            await photoAdd(phoths)
+            this.$message.success('添加成功')
+            this.$emit('close')
+            this.$emit('submited')
+          }
+        })
+      } catch (error) {}
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.dialog-footer{
+  text-align: right;
+}
+.img-container{
+  margin: 10px auto;
+}
+.item{
+  width: 150px;
+  margin-top: 10px;
+  margin-right: 10px;
+}
+.img{
+  width: 150px;
+  height: 150px;
+}
+</style>