dy-admin-manager/src/views/teamBuild/components/select-msic.vue

<template>
  <div class="container" style="width: 100%">
    <el-form ref="search" :model="search" inline @submit.stop.native="submit" @reset.stop.native="reset">
      <el-form-item prop="musicGroupName">
        <el-input v-model.trim="search.musicGroupName" clearable placeholder="乐团名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">搜索</el-button>
        <el-button type="danger" native-type="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="width: 100%"
      max-height="300px"
      ref="table"
      @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"
        prop="cooperationOrganName"
        max-width="274"
        label="合作单位"
      >
      </el-table-column>
    </el-table>
    <pagination
      :total.sync="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      layout="prev, pager, next"
      style="padding: 10px"
      @pagination="FetchList" />
    <div class="footer" slot="footer">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button @click="submited" type="primary">确认</el-button>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getTeamList, getPayType } from "@/api/teamServer";
export default {
  props: ['visible', 'organId'],
  components: { pagination },
  data() {
    return {
      tableData: [],
      passed: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      search: {
        musicGroupName: '',
        hastimer: ''
      }
    };
  },
  mounted() {
    this.FetchList()
  },
  watch: {
    visible() {
      this.$refs.table.clearSelection()
      this.passed = []
    }
  },
  methods: {
    submit(evt) {
      this.rules.page = 1;
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      this.FetchList()
    },
    reset(evt) {
      this.rules.page = 1;
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      this.search = {
        musicGroupName: '',
        hastimer: ''
      }
      this.FetchList()
    },
    checkSelectable (row) {
      return true
    },
    handleSelectionChange(arr) {
      const passed = [];
      for (let i in arr) {
        let obj = {};
        obj.id = arr[i].id;
        obj.name = arr[i].name;
        passed.push(obj);
      }
      this.passed = passed;
    },
    async FetchList() {
      try {
        const res = await getTeamList({
          rows: this.rules.limit,
          page: this.rules.page,
          organId: this.organId,
          ...this.search
        })
        this.tableData = res.data.rows.filter(item => item.id !== this.$route.query.id)
          this.rules.total = res.data.total
      } catch (error) {}
    },
    submited() {
      this.$emit('close')
      this.$emit('submited', this.passed)
    }
  },
};
</script>
<style lang="less" scoped>
.container{
  /deep/ .footer{
    text-align: right;
    margin-top: 20px;
  }
}
</style>