dy-admin-manager/src/views/studentManager/components/studentLebao.vue

<template>
  <div>
    <save-form
      :inline="true"
      class="searchForm"
      :model="searchForm"
      @submit="onSearch"
      @reset="onReSet"
      save-key="studentDetail-studentLebao"
    >
      <el-form-item prop="specification">
        <el-input
          placeholder="具体型号"
          clearable
          @keyup.enter.native="onSearch"
          v-model.trim="searchForm.specification"
        ></el-input>
      </el-form-item>
      <el-form-item prop="goodsCategoryId">
        <el-select
          v-model.trim="searchForm.goodsCategoryId"
          clearable
          placeholder="乐器分类"
        >
          <el-option
            v-for="(item, index) in categoryList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="status">
        <el-select
          v-model.trim="searchForm.status"
          filterable
          clearable
          placeholder="是否乐保"
        >
          <el-option value="0" label="否"></el-option>
          <el-option value="1" label="是"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="danger">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="reset">重置</el-button>
      </el-form-item>
    </save-form>
    <el-button @click="addMusicVisible = true" type="primary" v-permission="'studentInstrument/add'"
      >新增乐器</el-button
    >
    <div class="tableWrap">
      <el-table
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
      >
        <el-table-column label="具体型号" align="center" prop="id">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.goodsName }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column label="乐器分类" align="center" prop="name">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.goodsCategoryName }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column label="是否乐保" align="center" prop="teacherName">
           <template slot-scope="scope">
            {{ scope.row.status?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column label="乐保有效期" align="center" prop="studentNum">
          <template slot-scope="scope">
            <div>
              {{ scope.row.startTime|formatTimer}}~{{scope.row.endTime | formatTimer}}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        save-key="studentDetail-studentLebao"
        sync
        :total.sync="pageInfo.total"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getList"
      />
    </div>
    <el-dialog
      title="新增乐器"
      width="600px"
      :visible.sync="addMusicVisible"
      v-if="addMusicVisible"
    >
      <addMusic :categoryList='categoryList' ref='addMusic' @getList='getList' @close='addMusicVisible = false'/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMusicVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMusicSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import addMusic from "../modals/addMusic";
import { getInstrument } from "@/api/buildTeam";
import { categoryListTree } from "@/api/businessManager";
export default {
  components: { pagination, addMusic },
  data() {
    return {
      soundLists: [],
      tableList: [],
      searchForm: {
        specification:'',
        goodsCategoryId: "",
        studentId:this.$route.query.userId
      },
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      addMusicVisible: false,
      categoryList: [],
    };
  },
  mounted() {
    this.getCategory();
    this.getList()
  },
  methods: {
    onSearch() {
      this.pageInfo.page = 1;
      this.getList()
    },
    onReSet() {},
   async getList() {
     try{
       const res = await getInstrument({...this.searchForm,rows:this.pageInfo.limit,page:this.pageInfo.page})
        this.tableList = res.data.rows
     }catch(e){
       console.log(e)
     }

    },
    addMusicSubmit() {
      this.$refs.addMusic.addMusicSubmit()
    },
    getCategory() {
      let params = {
        delFlag: 0,
        rows: 9999,
      };
      categoryListTree(params).then((res) => {
        let result = res.data;
        if (res.code == 200) {
          let tempArray = [];
          result.rows.forEach((row) => {
            tempArray.push({
              label: row.name,
              value: row.id,
            });
          });
          this.categoryList = tempArray;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tableWrap {
  margin-top: 20px;
}
</style>