档案照片

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
@@ -45,8 +45,9 @@
         label="训练照片"
         lazy
         v-if="permission('/teamBaseInfo')"
-        name="training-photos"
+        name="6"
       >
+        <training-photos/>
       </el-tab-pane>
       <el-tab-pane
         label="乐团资讯"
@@ -65,7 +66,6 @@
       <survey/>
       </el-tab-pane>
     </tab-router>
-    <training-photos/>
   </div>
 </template>
 <script>

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

@@ -0,0 +1,69 @@
+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',
+  })
+}
+
+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;
+      word-break: keep-all;
+    }
+    .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,149 @@
+<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"
+    >
+      <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()
+    },
+    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,148 @@
+<template>
+  <el-form
+    ref="form"
+    :model="form"
+    label-width="80px"
+    @submit.stop.native="submit"
+  >
+    <el-form-item
+      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 {
+  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,
+            }))
+            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>