dy-admin-manager/src/views/teamDetail/teamList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>乐团列表
    </h2>
    <div class="m-core">
      <div class="btnList" style="margin-bottom: 20px">
        <el-button type="primary" v-permission="'/teamBuild'"
             @click="createNewTeam">新建乐团</el-button>
        <!-- <div class='newBand'
             v-permission="'/teamBuild/trimming'"
             @click="resetTeam">乐团调整</div> -->
      </div>

      <save-form :inline="true"
      @submit='search'
      @reset='reset'
               class="topForm"
               ref="topForm"
               :model="topForm">
        <el-form-item prop='teamName'>
          <el-input v-model.trim="topForm.teamName"
          clearable
                    @keyup.enter.native='search'
                    placeholder="请输入乐团名称"></el-input>
        </el-form-item>
        <el-form-item prop='orgin'>
          <el-select class='multiple'
                     v-model.trim="topForm.orgin"
                     filterable
                     clearable
                     placeholder="请选择分部">
            <el-option v-for="(item,index) in organList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop='status'>
          <el-select class='multiple'
                     v-model.trim="topForm.status"
                     filterable
                     clearable
                     placeholder="请选择乐团状态">
            <el-option v-for="(item,index) in nowStatus"
                       :key="index"
                       :label="item.text"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 收费类型 -->
        <el-form-item prop='payType'>
          <el-select v-model.trim="topForm.payType"
                     filterable
                     placeholder="请选择收费类型"
                     clearable>
            <el-option v-for="(item,index) in typeList"
                       :key='index'
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type='danger'
          native-type="submit"
                     >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type='primary'
          native-type="reset"
                    >重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table style="width: 100%"
                  @selection-change="handleSelectionChange"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data='tableData'>
          <!-- <el-table-column type="selection"
                           :selectable="checkSelectable"
                           width="50">
          </el-table-column> -->
          <el-table-column prop="id"
                           width="100"
                           align='center'
                           label="乐团编号">
                           <template slot-scope="scope">
                             <copy-text>{{scope.row.id}}</copy-text>
                           </template>
          </el-table-column>
          <el-table-column prop="name"
                           width="200px"
                           align='center'
                           label="乐团名称">
                           <template slot-scope="scope">
                             <copy-text>{{scope.row.name}}</copy-text>
                           </template>
          </el-table-column>
          <el-table-column align='center'
                           width="200px"
                           prop="cooperationOrganName"
                           max-width='274'
                           label="合作单位">
          </el-table-column>
          <el-table-column prop="status"
                           align='center'
                           label="乐团状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.status | teamStatus }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="chargeTypeName"
                           label="收费类型">
          </el-table-column>
          <el-table-column prop="educationalTeacherName"
                           align='center'
                           label="乐团主管">
          </el-table-column>
          <el-table-column prop="teamTeacherName"
                           align='center'
                           label="运营主管">
          </el-table-column>
          <el-table-column prop="groupMemberNum"
                           align='center'
                           label="成团人数">
          </el-table-column>
          <el-table-column prop="payNum"
                           align='center'
                           label="在读人数">
          </el-table-column>
          <!-- <el-table-column prop="course"
                           align='center'
                           label="当前课时">
          </el-table-column> -->
          <el-table-column prop="createTime"
                           width='100px'
                           align='center'
                           label="申请时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.createTime | formatTimer}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           width='100px'
                           label="成团时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.billStartDate | formatTimer}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           width='100px'
                           label="清单状况">
            <template slot-scope="scope">
              <div>
                {{ scope.row.hasVerifyMusicalList?'已确认':'未确认'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           width='220px'
                           fixed="right"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <!-- <el-button type="text"
                           v-if="scope.row.status == 'PREPARE' && permission('/setImprovement')"
                           @click="gotoImprovement(scope.row)">基础技能班</el-button> -->
                <el-button type="text"
                           v-if="scope.row.status == 'PREPARE' && permission('/teamDetailedList')"
                           @click="gotodetailList(scope.row)">发放清单</el-button>

                <!-- <el-button type="text"
                           v-if="scope.row.status == 'PREPARE'"
                           @click="lookTeamCourse(scope.row)">查看课表</el-button> -->

                <!-- 报名中&缴费中 查看 -->
                <el-button type="text"
                           v-if="(scope.row.status == 'APPLY'|| scope.row.status == 'PAY')  && permission('/signupList')"
                           @click="lookTeamDetail(scope.row)">查看</el-button>
                <!-- 报名中缴费中筹备中查看乐团 -->
                <el-button type="text"
                           v-if="(scope.row.status == 'APPLY'|| scope.row.status == 'PAY' || scope.row.status == 'PREPARE'  || scope.row.status == 'PRE_APPLY'  || scope.row.status == 'PRE_BUILD_FEE')  && permission('/teamLookBase')"
                           @click="lookTeamInfo(scope.row)">乐团信息</el-button>
                <el-button v-if="permission('recharge/findAll')"
                           type="text"
                           @click="lookSteam(scope.row)">乐团日志</el-button>
                <!-- 进行中 关闭 -->
                <el-button type="text"
                           v-if="scope.row.status == 'PROGRESS' && permission('musicGroup/closeMusicGroup')"
                           @click="closeTeamDetail(scope.row)">关闭乐团</el-button>
                <!-- 进行中 查看 -->
                <el-button type="text"
                           v-if="scope.row.status == 'PROGRESS' && permission('/teamDetails')"
                           @click="lookTeamDetail(scope.row)">查看</el-button>

                <!-- 预报名中 查看 -->
                <el-button type="text"
                           v-if="scope.row.status == 'PRE_APPLY' && permission('studentRegistration/queryPreApplyList')"
                           @click="lookTeamDetail(scope.row)">查看</el-button>

                <!-- 暂停中 查看 -->
                <el-button type="text"
                           v-if="scope.row.status == 'PAUSE' && permission('musicGroup/pauseMusicGroup/look')"
                           @click="lookTeamDetail(scope.row)">查看</el-button>

                <!-- 创建缴费中 查看 -->
                <el-button type="text"
                           v-if="scope.row.status == 'PRE_BUILD_FEE' && permission('/createPayment')"
                           @click="lookTeamDetail(scope.row)">创建缴费</el-button>

                <!-- <el-button type="text"
                           v-if="scope.row.status != 'PROGRESS' && scope.row.status != 'CANCELED'  && scope.row.status != 'PAUSE' && scope.row.status != 'APPLY'&& scope.row.status != 'PAY'"
                           @click="lookTeamDetail(scope.row)">编辑</el-button> -->
                <!-- 筹备中 编辑 -->
                <el-button type="text"
                           v-if="scope.row.status == 'PREPARE' && permission('teamDetail/teamSeting/update')"
                           @click="lookTeamDetail(scope.row)">班级列表</el-button>
                <!-- 审核中 编辑 -->
                <el-button type="text"
                           v-if="(scope.row.status == 'AUDIT')&& permission('teamDetail/audit/update')"
                           @click="lookTeamDetail(scope.row)">审核</el-button>
                <!-- 费用审核中  -->
                <el-button type="text"
                           v-if="( scope.row.status == 'FEE_AUDIT')&& permission('teamDetail/audit/update')"
                           @click="lookTeamDetail(scope.row)">查看</el-button>
                <!-- 编辑中 编辑 -->
                <el-button type="text"
                           v-if="scope.row.status == 'DRAFT' && permission('teamDetail/draft/update')"
                           @click="lookTeamDetail(scope.row)">编辑</el-button>
                <el-button type="text"
                           v-if="(scope.row.status == 'DRAFT' || scope.row.status == 'AUDIT'|| scope.row.status == 'FEE_AUDIT' || (scope.row.status == 'APPLY'|| scope.row.status == 'PAY') && permission('musicGroup/cancelMusicGroup'))"
                           @click="stopTeam(scope.row)">取消乐团</el-button>
                <!-- 审核失败 编辑 -->
                <el-button type="text"
                           v-if="scope.row.status == 'AUDIT_FAILED' && permission('teamDetail/aduitFailed/update')"
                           @click="lookTeamDetail(scope.row)">编辑</el-button>

                <el-button v-if="scope.row.status == 'PREPARE' && permission('musicGroup/action')"
                           @click="startTeam(scope.row)"
                           type="text">确认成团</el-button>
                <!-- <el-button type="text"
                           v-if="scope.row.status == 'AUDIT' && permission('musicGroup/cancelMusicGroup')"
                           @click="stopTeam(scope.row)">取消乐团</el-button> -->
                <el-button v-if="scope.row.status == 'PAUSE' && permission('musicGroup/resumeMusicGroup')"
                           @click="onTeamOpeation('start', scope.row)"
                           type="text">启动</el-button>
                <el-button v-if="scope.row.status == 'PROGRESS' && permission('musicGroup/pauseMusicGroup')"
                           @click="onTeamOpeation('pause', scope.row)"
                           type="text">暂停</el-button>
                <el-button v-if="scope.row.status == 'PROGRESS' && permission('/resetTeaming')"
                           @click="resetTeaming(scope.row)"
                           type="text">修改</el-button>
                <el-button v-if="scope.row.status == 'CANCELED' && permission('musicGroup/deleteMusicGroup')"
                           @click="deteleTeaming(scope.row)"
                           type="text">删除</el-button>
              </div>
            </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="getList" />
      </div>
      <el-dialog :visible.sync="showSteam"
                 width="500px"
                 title="乐团流程">

        <teamSteam :activeId='activeId' />
        <div slot="footer"
             class="dialog-footer">
          <el-button type="primary"
                     @click="showSteam=false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="closeVisible" title="确认学员" width="800px">
        <closeStudens v-if="closeVisible" :detail="closeDetail" @close="closeVisible = false" @submited="getList"/>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getTeamList, getPayType } from '@/api/teamServer'
import { getCooperation, cancelMusicGroup, startTeam, getEmployeeOrgan, pauseMusicGroup, resumeMusicGroup, deleteMusicGroup } from '@/api/buildTeam'
import { musicGroupStatus } from '@/utils/searchArray'
import { isObject } from 'util'
import { permission } from '@/utils/directivePage'
import teamSteam from './teamListComponent/teamSteam'
import closeStudens from '../teamBuild/modals/close-studens'
export default {
  name: "teamList",
  data () {
    return {
      closeDetail: {},
      closeVisible: false,
      topForm: {
        teamName: '',
        status: '',
        payType: '',
        word: '',
        orgin: ''
      },
      organList: [],
      typeList: [], // 收费类型
      nowStatus: musicGroupStatus,
      searchLsit: [], // 存储选择后的数组
      tableData: [], // table数据
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      passed: [], // 传递的参数
      showSteam: false,
      activeId: null
    }
  },
  components: {
    pagination,
    teamSteam,
    closeStudens
  },
  mounted () {
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      sessionStorage.setItem('resetCode', '1')

      getEmployeeOrgan().then(res => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      })
      // 获取乐团收费类型
      getPayType().then(res => {
        if (res.code == 200) {
          this.typeList = res.data.rows;
        }
      })
      // 获取乐团合作单位(学校)
      // getCooperation().then(res => {
      // })
      this.getList();
    },
    permission (str) {
      return permission(str)
    },
    reset () {
      this.rules.page = 1;
      this.$refs['topForm'].resetFields();
      this.getList()
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    getList () {
      getTeamList({
        rows: this.rules.limit,
        page: this.rules.page,
        organId: this.topForm.orgin || null,
        chargeTypeId: this.topForm.payType || null,
        musicGroupName: this.topForm.teamName || null,
        musicGroupStatus: this.topForm.status || null,
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.rules.total = res.data.total
        }
      })
    },
    createNewTeam () {
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({ path: '/business/teamBuild', query: { type: 'newTeam', } })
    },
    resetTeam () {
      // 这里还有勾选的乐团信息
      if (this.passed && this.passed.length <= 0) {
        this.$message.error('请至少选择一个乐团进行调整')
        return
      }
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({ path: '/business/teamBuild', query: { type: 'teamList', teamList: this.passed, } })
    },
    resetTeaming (row) {
      // 修改进行中的乐团
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({ path: '/business/resetTeaming', query: { type: 'resetTeam', id: row.id,} })
    },
    setSearchList (obj) {
      //
      // 没有相同的key=>添加这个对象
      // 有相同的key => 替换这个对象
      if (obj.type == 1) {
        let flag = false;
        this.searchLsit = this.searchLsit.map(item => {
          if (item.id == obj.id) {
            item = obj;
            flag = true;
          }
          return item;
        })
        if (!flag) {
          this.searchLsit.push(obj)
        }
      } else {
        let flag = false;
        this.searchLsit = this.searchLsit.map(item => {
          if (item.key == obj.key) {
            // 多选框的再次点击=> 等于 就是删除
            item = obj;
            flag = true;
          }
          return item;
        })
        if (!flag) {
          this.searchLsit.push(obj)
        }
      }

    },
    closeSearch (item) {
      // 1.删除search里的元素
      if (item.type == 1) {
        for (let some in this.searchLsit) {
          if (this.searchLsit[some].id == item.id) {
            this.searchLsit.splice(some, 1);
          }
        }
        // 2.清空对应元素所对应的的值
        this.topForm[item.id] = '';
      } else {
        for (let i = 0; i < this.topForm[item.id].length; i++) {
          if (this.topForm[item.id][i] == item.value) {
            this.topForm[item.id].splice(i, 1);
          }
        }
        // 处理search
        for (let some in this.searchLsit) {
          if (this.searchLsit[some].value == item.value && this.searchLsit[some].id == item.id) {
            this.searchLsit.splice(some, 1);
          }
          // id: 'school', key: this.schools[item].text, value: val, type: 1
        }


      }
    },
    closeTeamDetail(row) {
      this.closeVisible = true
      this.closeDetail = {...row}
    },
    onTeamOpeation (type, row) {
      if (type == 'start') {
        this.$confirm('是否确定开启乐团?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resumeMusicGroup({ musicGroupId: row.id }).then(res => {
            if (res.code == 200) {
              this.$message.success('开启成功')
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => { })

      } else if (type == 'pause') {
        this.$confirm('是否确定暂停乐团?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          pauseMusicGroup({ musicGroupId: row.id }).then(res => {
            if (res.code == 200) {
              this.$message.success('暂停成功')
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => { })
      }
    },
    gotoSearch () {
      this.$refs['topForm'].resetFields();
      this.searchLsit = [];
    },
    lookTeamCourse (row) {
      // 查看课表
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({ path: '/business/teamDetailCourse', query: { id: row.id, name: row.name,  } })
    },
    lookTeamDetail (row) {
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      switch (row.status) {
        case 'DRAFT': {
          // 编辑中
          this.$router.push({ path: '/business/teamBuild', query: { type: 'teamDraft', id: row.id,  } })
          break;
        }
        case 'AUDIT': {
          // 审核中
          this.$router.push({ path: '/business/teamBuild', query: { type: 'teamAudit', id: row.id,  } })
          break;
        }
        case 'PRE_BUILD_FEE': {
          // 创建缴费中
          this.$router.push({ path: '/business/createPayment', query: { type: 'PRE_BUILD_FEE', id: row.id, name: row.name } })
          break;
        }
        case 'FEE_AUDIT': {
          // 费用审核中
          this.$router.push({ path: '/business/teamBuild', query: { type: 'feeAudit', id: row.id,  } })
          break;
        }
        case 'AUDIT_FAILED': {
          // 审核失败
          this.$router.push({ path: '/business/teamBuild', query: { type: 'teamDraft', id: row.id,  } })
          break;
        }
        case 'PRE_APPLY': {
          // 预报名
          this.$router.push({ path: '/business/forecastName', query: { id: row.id, name: row.name  } })
          break;
        }
        case 'APPLY': {
          // 报名中
          this.$router.push({ path: `/business/signupList`, query: { status: row.status, id: row.id, name: row.name, } }, router => {
            router.meta.title = "报名详情"
          })
          break;
        }
        case 'PAY': {
          // 缴费中
          this.$router.push({ path: `/business/signupList`, query: { status: row.status, id: row.id, name: row.name,  } }, router => {
            router.meta.title = "缴费详情"
          })
          break;
        }
        case 'PREPARE': {
          // 筹备中 跳转到乐团设置界面
          this.$router.push({ path: `/business/teamSeting`, query: { status: row.status, id: row.id, name: row.name,  } })
          break;
        }
        case 'PROGRESS': {
          // 进行中
          // 调到乐团详情 teamDetails
          this.$router.push({ path: `/business/teamDetails`, query: { status: row.status, id: row.id, name: row.name,  organId: row.organId ,type:'look' } })
          break
        }
        case 'CANCELED': {
          // 取消
          break
        }
        case 'PAUSE': {
          // 暂停
          this.$router.push({ path: `/business/teamDetails`, query: { status: row.status, id: row.id, name: row.name, } })
          break;
        }
      }
    },
    checkSelectable (row) {
      return row.status == 'PROGRESS'
    },
    handleSelectionChange (arr) {
      this.passed = [];
      for (let i in arr) {
        let obj = {};
        obj.id = arr[i].id;
        obj.name = arr[i].name;
        this.passed.push(obj)
      }
    },
    gotodetailList (row) {
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({ path: '/business/teamDetailedList', query: { id: row.id, } })
    },
    //
    lookTeamInfo (row) {
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({ path: '/business/teamLookBase', query: { type: 'look', id: row.id, name: row.name } })
    },
    // setImprovement 设置基础技能班
    gotoImprovement (row) {
      let search = JSON.stringify(this.topForm)
      let rules = JSON.stringify(this.rules)
      this.$router.push({ path: '/business/setImprovement', query: { id: row.id,  } })
    },
    // 停止乐团
    stopTeam (row) {
      this.$confirm('您确定取消申请乐团?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelMusicGroup({
          musicGroupId: row.id
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('停止成功')
            this.getList()
          }
        })
      }).catch(() => {
      })

    },
    // 确认成团
    startTeam (row) {
      this.$confirm('是否确定成团?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        startTeam({ musicGroupId: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('开启乐团成功')
            this.getList();
          }
        })
      }).catch(() => { })

    },
    deteleTeaming (row) {
      this.$confirm('您确定删除该乐团?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMusicGroup({
          musicGroupId: row.id
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      }).catch(() => {
      })
    },
    lookSteam (row) {
      this.activeId = row.id
      this.showSteam = true
    }
  },
  watch: {
    showSteam (val) {
      if (!val) {
        this.activeId = null
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.select {
  font-size: 14px;
}
.btnList {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  div {
    margin-right: 15px;
  }
}
</style>