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

<template>
  <div class="m-container">
    <h2>乐团列表</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='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="getList">搜索</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"
                           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="improventClassesNum"
                           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'"
                           @click="gotodetailList(scope.row)">发放清单</el-button>
                <el-button type="text"
                           v-if="scope.row.status == 'PROGRESS'"
                           @click="lookTeamDetail(scope.row)">查看</el-button>
                <el-button type="text"
                           v-if="scope.row.status != 'PROGRESS'"
                           @click="lookTeamDetail(scope.row)">编辑</el-button>
                <el-button v-if="scope.row.status == 'PAUSE'"
                           @click="onTeamOpeation('start', scope.row)"
                           type="text">启动</el-button>
                <el-button v-if="scope.row.status == 'PROGRESS'"
                           @click="onTeamOpeation('pause', 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 } from '@/api/buildTeam'
export default {
  name: "Main",
  data () {
    return {
      topForm: {
        teamName: '',
        status: '',
        payType: '',
        word: ''
      },
      typeList: [], // 收费类型
      nowStatus: [{ // 状态数组
        value: 'APPLY', text: '报名中'
      },
      {
        value: 'PAY', text: '缴费中'
      }, {
        value: 'PREPARE', text: '筹备中'
      },
      {
        value: 'PROGRESS', text: '进行中'
      }, {
        value: 'CANCELED', text: '取消'
      }, {
        value: 'AUDIT', text: '审核中'
      },
      {
        value: 'PAUSE', text: '暂停'
      }, {
        value: 'DRAFT', text: '编辑中'
      }, {
        value: 'AUDIT_FAILED', text: '审核失败'
      }
      ],
      searchLsit: [], // 存储选择后的数组
      tableData: [], // table数据
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      passed: [], // 传递的参数
    }
  },
  components: {
    pagination
  },
  mounted () {
    this.getList();
    // 获取乐团收费类型
    getPayType().then(res => {
      // console.log(res);
      if (res.code == 200) {
        this.typeList = res.data.rows;
      }
    })
    // 获取乐团合作单位(学校)
    // getCooperation().then(res => {
    // })
  },
  methods: {
    getList () {
      /**
       * 
       *  teamName: '',
        status: [],
        payType: '',
       * 
       */
      getTeamList({
        rows: this.rules.limit,
        page: this.rules.page,
        organId: this.$store.getters.organ,
        chargeTypeId: this.topForm.payType,
        musicGroupName: this.topForm.teamName

      }).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 } })
    },
    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': {
          // 审核中
          break;
        }
        case 'AUDIT_FAILED': {
          // 审核失败
          break;
        }
        case 'APPLY': {
          // 报名中
          console.log('报名中')
          this.$router.push({ path: `/business/signupList`, query: { status: row.status, id: row.id, name: row.name } })
          break;
        }
        case 'PAY': {
          // 缴费中
          console.log('缴费中')
          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 } })
          console.log('进行中')
          break
        }
        case 'CANCELED': {
          // 取消
          console.log('取消')
          break
        }
        case 'PAUSE': {
          // 暂停
          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 } })
    }
  },
}
</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>