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">
        <div class='newBand'
             @click="createNewTeam">新建乐团</div>
        <div class='newBand'
             @click="resetTeam">乐团调整</div>
      </div>

      <el-form :inline="true"
               class="topForm"
               ref="topForm"
               :model="topForm">
        <el-form-item prop='teamName'>
          <el-input v-model="topForm.teamName"
                    placeholder="请输入乐团名称"></el-input>
        </el-form-item>
        <el-form-item prop='orgin'>
          <el-select class='multiple'
                     v-model="topForm.orgin"
                     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="topForm.status"
                     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="topForm.payType"
                     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>
          <div class='searchBtn'
               @click="search">搜索</div>
        </el-form-item>
      </el-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"
                           align='center'
                           label="乐团编号">
          </el-table-column>
          <el-table-column prop="name"
                           width="200px"
                           align='center'
                           label="乐团名称">
          </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"
                           align='center'
                           label="申请时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.createTime | formatTimer}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="成团时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.billStartDate | formatTimer}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           width='200px'
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           v-if="scope.row.status == 'PREPARE'"
                           @click="gotoImprovement(scope.row)">基础技能班</el-button>
                <el-button type="text"
                           v-if="scope.row.status == 'PREPARE'" v-permission="'/teamDetailedList'"
                           @click="gotodetailList(scope.row)">发放清单</el-button>
                <el-button type="text"
                           v-if="scope.row.status == 'PROGRESS' ||  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 != '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 v-if="scope.row.status == 'PREPARE'" v-permission="'musicGroup/action'"
                           @click="startTeam(scope.row)"
                           type="text">确认成团</el-button>
                <el-button type="text" v-permission="'musicGroup/cancelMusicGroup'"
                           v-if="scope.row.status == 'AUDIT'"
                           @click="stopTeam(scope.row)">取消申请</el-button>
                <el-button v-if="scope.row.status == 'PAUSE'"  v-permission="'musicGroup/resumeMusicGroup'"
                           @click="onTeamOpeation('start', scope.row)"
                           type="text">启动</el-button>
                <el-button v-if="scope.row.status == 'PROGRESS'"  v-permission="'musicGroup/pauseMusicGroup'"
                           @click="onTeamOpeation('pause', scope.row)"
                           type="text">暂停</el-button>
                <el-button v-if="scope.row.status == 'PROGRESS'"
                           @click="resetTeaming(scope.row)"
                           type="text">修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!-- 分页 -->
        <pagination :total="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
// import { truncate } from 'fs';
import { getTeamList, getPayType } from '@/api/teamServer'
import { getCooperation, cancelMusicGroup, startTeam, getEmployeeOrgan, pauseMusicGroup, resumeMusicGroup } from '@/api/buildTeam'
import { musicGroupStatus } from '@/utils/searchArray'
export default {
  name: "Main",
  data () {
    return {
      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: [], // 传递的参数
    }
  },
  components: {
    pagination
  },
  mounted () {
    sessionStorage.setItem('resetCode', '1')
    this.getList();
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    })
    // 获取乐团收费类型
    getPayType().then(res => {
      // console.log(res);
      if (res.code == 200) {
        this.typeList = res.data.rows;
      }
    })
    // 获取乐团合作单位(学校)
    // getCooperation().then(res => {
    // })
  },
  methods: {
    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 () {
      this.$router.push({ path: '/business/teamBuild', query: { type: 'newTeam' } })
    },
    resetTeam () {
      // 这里还有勾选的乐团信息
      if (this.passed && this.passed.length <= 0) {
        this.$message.error('请至少选择一个乐团进行调整')
        return
      }
      this.$router.push({ path: '/business/teamBuild', query: { type: 'teamList', teamList: this.passed } })
    },
    resetTeaming (row) {
      // 修改进行中的乐团
      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 
        }


      }
    },
    onTeamOpeation (type, row) {
      if (type == 'start') {
        resumeMusicGroup({ musicGroupId: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('开启成功')
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else if (type == 'pause') {
        pauseMusicGroup({ musicGroupId: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('暂停成功')
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    gotoSearch () {
      this.$refs['topForm'].resetFields();
      this.searchLsit = [];
    },
    lookTeamDetail (row) {
      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 'AUDIT_FAILED': {
          // 审核失败
          this.$router.push({ path: '/business/teamBuild', query: { type: 'teamDraft', id: row.id } })
          break;
        }
        case 'APPLY': {
          // 报名中
          this.$router.push({ path: `/business/signupList`, query: { status: row.status, id: row.id, name: row.name } })
          break;
        }
        case 'PAY': {
          // 缴费中
          this.$router.push({ path: `/business/signupList`, query: { status: row.status, id: row.id, name: row.name } })
          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 } })
          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) {
      // row.id
      this.$router.push({ path: '/business/teamDetailedList', query: { id: row.id } })
    },
    // setImprovement 设置基础技能班
    gotoImprovement (row) {
      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) {
      startTeam({ musicGroupId: row.id }).then(res => {
        if (res.code == 200) {
          this.$message.success('开启乐团成功')
          this.getList();
        }
      })
    }
  }

}
</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>