展演

src/views/photo-detail/index.vue

@@ -104,6 +104,7 @@ export default {
         return {
           id,
           type: this.type,
+          photoAlbumId: id,
         }
       }
       return {
@@ -231,7 +232,7 @@ export default {
   position: relative;
   cursor: move;
   >.name{
-    width: 150px;
+    width: 100%;
     height: 30px;
     line-height: 30px;
     text-align: center;
@@ -243,7 +244,7 @@ export default {
     font-size: 14px;
   }
   >.nameinput{
-    width: 150px;
+    width: 100%;
     margin-top: 10px;
   }
 }

src/views/resetTeaming/components/archicesComponents/api.js

@@ -194,4 +194,32 @@ export const delQuestion = data => request2({
 })
 
 
+// 获取展演信息
+export const musicGroupPerformanceQueryPage = data => request2({
+  url: '/api-web/musicGroupPerformance/queryPage',
+  data,
+  method: 'post',
+  requestType: 'form'
+})
+
+// 添加展演信息
+export const musicGroupPerformanceAdd = data => request2({
+  url: '/api-web/musicGroupPerformance/add',
+  data,
+  method: 'post',
+})
 
+// 修改展演信息
+export const musicGroupPerformanceUpdate = data => request2({
+  url: '/api-web/musicGroupPerformance/update',
+  data,
+  method: 'post',
+})
+
+// 删除展演信息
+export const musicGroupPerformanceDel = data => request2({
+  url: '/api-web/musicGroupPerformance/del',
+  data,
+  method: 'post',
+  requestType: 'form'
+})

src/views/resetTeaming/components/archicesComponents/modals/performance-form.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <el-form
+      ref="form"
+      :model="form"
+      label-width="100px"
+      @submit.stop.native="submit"
+    >
+      <el-form-item
+        label="展演名称"
+        prop="name"
+        :rules="[{required: true, message: '请输入展演名称'}]"
+      >
+        <el-input v-model="form.name" placeholder="请输入展演名称"/>
+      </el-form-item>
+      <el-form-item
+        label="预计时间"
+        prop="startTime"
+        :rules="[{required: true, message: '请选择预计时间'}]"
+      >
+        <el-date-picker
+          v-model="form.startTime"
+          style="width: 100%"
+          placeholder="请选择预计时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item
+        v-for="(item, index) in form.songs"
+        :key="index"
+        :label="'展演曲目' + (index + 1)"
+        :prop="'songs.' + index"
+        :rules="[{required: true, message: '请输入展演曲目'}]"
+      >
+        <div class="cont">
+          <el-input v-model="form.songs[index]" placeholder="请输入展演曲目"/>
+          <div class="ctrls">
+            <i class="el-icon-circle-plus-outline" @click="add"></i>
+            <i class="el-icon-remove-outline" v-if="form.songs.length > 1" @click="remove(index)"></i>
+          </div>
+        </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-form>
+  </div>
+</template>
+
+<script>
+import { musicGroupPerformanceAdd, musicGroupPerformanceUpdate} from '../api'
+export default {
+  props: {
+    detail: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      form: {
+        name: '',
+        startTime: '',
+        songs: ['']
+      }
+    }
+  },
+  mounted() {
+    if (this.detail) {
+      this.form.name = this.detail.name
+      this.form.startTime = this.detail.startTime
+      const s = (this.detail.musicScoreName || '').split(',')
+      this.form.songs = s.length ? s : ['']
+    }
+  },
+  methods: {
+    add() {
+      this.form.songs.push('')
+    },
+    remove(index) {
+      this.form.songs.splice(index, 1)
+    },
+    async submit(evt) {
+      evt.stopPropagation()
+      evt.stopImmediatePropagation()
+      evt.preventDefault()
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          try {
+            const {songs, ...rest} = this.form
+            if (this.detail) {
+              await musicGroupPerformanceUpdate([{
+                ...rest,
+                musicScoreNames: songs,
+                musicGroupId: this.$route.query.id,
+                id: this.detail.id
+              }])
+              this.$message.success('修改成功')
+            } else {
+              await musicGroupPerformanceAdd({
+                ...rest,
+                musicScoreNames: songs,
+                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;
+}
+.cont{
+  display: flex;
+  justify-content: space-between;
+  .ctrls{
+    width: 100px;
+    margin-left: 10px;
+    >i{
+      font-size: 20px;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/resetTeaming/components/archicesComponents/performance.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="performance">
+    <el-alert :closable="false" class="alert" type="info">
+      <template slot="title">
+        <div class="alerTitle">
+          <div class="shapeWrap">
+            <span class="shape"></span>
+            <p style="margin-right: 5px">展演信息</p>
+          </div>
+          <auth auths="musicGroupQuestionnaire/add">
+            <el-button type="text" @click="openForm()"
+              >+新增满意度调查</el-button
+            >
+          </auth>
+        </div>
+      </template>
+    </el-alert>
+    <div class="tableWrap">
+      <el-table
+        style="width: 100%"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+        :data="tableList"
+      >
+        <el-table-column
+          align="center"
+          prop="name"
+          label="展演名称"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="startTime"
+          label="预计时间"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="musicScoreName"
+          label="展演曲目"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="operatorName"
+          label="添加人"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="操作"
+          fixed="right"
+          width="220px"
+        >
+          <template slot-scope="scope">
+            <auth auths="teacherAttendance/repealComplaints">
+              <el-button
+                type="text"
+                @click="openForm(scope.row)"
+                >修改</el-button
+              >
+            </auth>
+            <auth auths="teacherAttendance/repealComplaints">
+              <el-button
+                type="text"
+                @click="remove(scope.row)"
+                >删除</el-button
+              >
+            </auth>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        sync
+        :total.sync="rules.total"
+        :page.sync="rules.page"
+        :limit.sync="rules.limit"
+        :page-sizes="rules.page_size"
+        @pagination="FetchList"
+      />
+    </div>
+    <el-alert :closable="false" class="alert" type="info">
+      <template slot="title">
+        <div class="alerTitle">
+          <div class="shapeWrap">
+            <span class="shape"></span>
+            <p style="margin-right: 5px">获奖证书</p>
+          </div>
+          <auth auths="musicGroupQuestionnaire/add">
+            <el-button type="text"
+              >全部证书 ></el-button
+            >
+          </auth>
+        </div>
+      </template>
+    </el-alert>
+    <div
+      v-for="(item) in photos"
+      :key="item.url"
+      class="img-container"
+    >
+      <el-image
+        :src="item.url"
+        class="img"
+        fit="contain"
+        :preview-src-list="photos.map(item => item.url)">
+      </el-image>
+      <el-tooltip class="item" effect="dark" :content="item.name" placement="top" :open-delay=".5">
+        <div class="name">{{item.name}}</div>
+      </el-tooltip>
+    </div>
+    <el-dialog
+      :title="detail ? '修改展演信息' : '添加展演信息'"
+      :visible.sync="formVisible"
+    >
+      <performance-form
+        v-if="formVisible"
+        @close="formVisible = false"
+        @submited="submited"
+        :detail="detail"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import pagination from "@/components/Pagination/index";
+import PerformanceForm from './modals/performance-form.vue'
+import { photoQueryPage } from '@/views/resetTeaming/components/training-photos/api'
+import { musicGroupPerformanceQueryPage, musicGroupPerformanceDel } from './api'
+export default {
+  components: {
+    pagination,
+    PerformanceForm
+  },
+  data() {
+    return {
+      detail: null,
+      formVisible: false,
+      tableList: [],
+      photos: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+    }
+  },
+  mounted() {
+    this.FetchList()
+    this.FetchPhoto()
+  },
+  methods: {
+    openForm(detail) {
+      this.detail = detail
+      this.formVisible = true
+    },
+    submited() {
+      this.rules.page = 1
+      this.FetchList()
+    },
+    async remove(item) {
+      try {
+        await this.$confirm('是否确认删除此数据', '提示')
+        await musicGroupPerformanceDel({
+          id: item.id
+        })
+        this.$message.success('删除成功')
+        this.submited()
+      } catch (error) {}
+    },
+    async FetchList() {
+      try {
+        const res = await musicGroupPerformanceQueryPage({
+          page: this.rules.page
+        })
+        this.tableList = res.data.rows;
+        this.rules.total = res.data.total;
+      } catch (error) {}
+    },
+    async FetchPhoto() {
+      try {
+        const res = await photoQueryPage({
+          rows: 5,
+          type: 'SHOW',
+          musicGroupId: this.$route.query.id
+        })
+        this.photos = res.data.rows;
+      } catch (error) {}
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.performance{
+  /deep/.el-alert__content{
+    width: 100%;
+  }
+}
+.shapeWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  .shape {
+    position: relative;
+    top: -1px;
+    display: block;
+    margin-right: 10px;
+    height: 14px;
+    width: 4px;
+    background-color: #14928a;
+    z-index: 500;
+  }
+}
+.alerTitle {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  .el-button {
+    padding: 0 20px !important;
+  }
+}
+.img-container{
+  display: inline-flex;
+  margin-right: 20px;
+  margin-top: 20px;
+  flex-direction: column;
+  text-align: center;
+  position: relative;
+  >.name{
+    width: 100%;
+    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;
+  }
+}
+.img{
+  width: 200px;
+  height: 112.5px;
+  border-radius: 3px;
+  background-color: rgba(0, 0, 0, .05);
+}
+.tableWrap{
+  margin-top: 20px;
+}
+</style>

src/views/resetTeaming/components/musicArchices.vue

@@ -58,13 +58,21 @@
         <training-photos v-if="activeIndex == 6" />
       </el-tab-pane>
       <el-tab-pane
+        label="展演&证书"
+        lazy
+        v-if="permission('/archicesPhotosDetail')"
+        name="9"
+      >
+        <performance v-if="activeIndex == 9" />
+      </el-tab-pane>
+      <!-- <el-tab-pane
         label="获奖证书"
         lazy
         v-if="permission('/archicesPhotosDetail')"
         name="9"
       >
         <photo-detail type="SHOW" v-if="activeIndex == 9" />
-      </el-tab-pane>
+      </el-tab-pane> -->
       <el-tab-pane
         label="乐团资讯"
         lazy
@@ -96,6 +104,7 @@ import teamInfo from "./archicesComponents/teamInfo";
 import trainPlan from "./archicesComponents/trainPlan";
 import trainTimer from "./archicesComponents/trainTimer";
 import workStatus from "./archicesComponents/workStatus";
+import performance from './archicesComponents/performance'
 import { getExceptionPlan } from './archicesComponents/api'
 export default {
   components: {
@@ -109,6 +118,7 @@ export default {
     trainPlan,
     trainTimer,
     workStatus,
+    performance
   },
   data() {
     return {

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

@@ -30,9 +30,10 @@
         :show-file-list="false"
         multiple
         accept=".png, .jpg, .jpeg, .gif"
+        :before-upload="beforeUpload"
         :on-success="successed"
         :on-remove="handleRemove">
-        <el-button type="primary">上传图片</el-button>
+        <el-button :loading="uploading" type="primary">上传图片</el-button>
       </el-upload>
       <div class="img-container">
         <div class="list" v-if="uploaded.length > 0">
@@ -82,6 +83,7 @@ export default {
       fileList: [],
       dialogImageUrl: '',
       dialogVisible: false,
+      uploading: false,
       form: {
         photoAlbumId: ''
       },
@@ -97,7 +99,12 @@ export default {
     handleChange(file, fileList) {
       this.fileList = fileList.slice(-3);
     },
+    beforeUpload() {
+      this.uploading = true
+      return true
+    },
     successed(response, file, fileList) {
+      this.uploading = false
       if (response.code === 200) {
         this.uploaded.push({
           url: response.data.url,