dy-admin-manager/src/views/reaplceMusicPlayer/modals/detail.vue

<template>
  <div>
    <el-form
      :inline="true"
      :model="searchForm"
      ref="searchForm"
      @submit.native.prevent="search"
      @reset.native.prevent="onReSet"
    >
      <el-form-item prop="search">
        <el-input
          v-model.trim="searchForm.search"
          clearable
          @keyup.enter.native="search"
          placeholder="学生姓名或手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="subjectId">
        <el-select
          v-model.trim="searchForm.subjectId"
          filterable
          clearable
          placeholder="请选择声部"
          @change="changeSound"
        >
          <el-option
            v-for="(item, i) in selects.subjects"
            :key="i"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="specification">
        <el-select
          v-model.trim="searchForm.specification"
          filterable
          clearable
          placeholder="请选择品牌型号"
          :disabled="!searchForm.subjectId"
        >
          <el-option
            v-for="(item, index) in branchList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="primary">搜索</el-button>
        <el-button native-type="reset" type="danger">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="tableWrap">
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
      >
        <el-table-column
          align="center"
          prop="userId"
          label="学员编号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="userName"
          label="学员姓名"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="mobileNo"
          label="联系电话"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="subjectName"
          label="声部"
        ></el-table-column>
        <el-table-column align="center" prop="studentId" label="品牌型号">
          <template slot-scope="scope">
            <div>{{ scope.row.brand }}{{ scope.row.specification }}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="payStatus"
          label="缴费状态"
        >
        <template  slot-scope="scope">
          <div>
            {{scope.row.payStatus|replacementInsFilter}}
          </div>
        </template>
        </el-table-column>
        <el-table-column align="center" label="其他建议">
          <template slot-scope="scope">
            <Tooltip
              :content="
                scope.row.otherSuggestion ? scope.row.otherSuggestion : ''
              "
            />
          </template>
        </el-table-column>

        <el-table-column align="center" prop="studentId" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                @click="resetMusic(scope.row)"
                v-if="permission('replacementInstrumentActivity/update')&&scope.row.payStatus==0"
                >修改</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
      title="修改信息"
      :visible.sync="dialogVisible"
      width="600px"
      append-to-body
      v-if="dialogVisible"
    >
      <resetInfo
        @close="close"
        :detail="resetRow"
        ref="resetInfo"
        @getList="getList"
      />
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateInfo">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import resetInfo from "./resetInfo";
import { getInstrumentSoundList, getInstrumentActivityList } from "../api";
import ItemVue from "@/layout/components/Sidebar/Item.vue";
import Tooltip from "@/components/Tooltip/index";
import { permission } from "@/utils/directivePage";
export default {
  components: { pagination, resetInfo, Tooltip },
  props: ["detail"],
  data() {
    return {
      searchForm: {
        cooperationOrganId: "",
        specification: "",
        search: "",
        subjectId: "",
      },
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      dialogVisible: false,
      branchList: [],
      resetRow: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.searchForm.cooperationOrganId = this.detail.cooperationOrganId;
      await this.$store.dispatch("setSubjects");
      this.getList();
    },
    async getList() {
      try {
        const res = await getInstrumentActivityList({
          ...this.searchForm,
          page: this.rules.page,
          rows: this.rules.limit,
        });
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (e) {}
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      this.searchForm.cooperationOrganId = this.detail.cooperationOrganId;
      this.search();
    },
    resetMusic(row) {
      this.resetRow = row;
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
    async changeSound(val) {
      this.searchForm.brand = "";
      if (val) {
        try {
          const res = await getInstrumentSoundList({
            subjectId: val,
            page: 1,
            rows: 999,
          });
          this.branchList = res.data.rows.map((item) => {
            return {
              name: item.brand + item.specification,
              id: item.specification,
            };
          });
          console.log(res);
        } catch (e) {
          console.log(e);
        }
      }
    },
    updateInfo() {
      this.$refs.resetInfo.submited();
    },
    permission(str, parent) {
      return permission(str, parent);
    },
  },
};
</script>