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 soundList"
            :key="i"
            :label="item.text"
            :value="item.value"
          ></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 prop="hasYesFirstAnswer">
        <el-select
          v-model.trim="searchForm.hasYesFirstAnswer"
          filterable
          clearable
          placeholder="请选择是否参加市赛"
        >
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item prop="hasInstrumentsId">
        <el-select
          v-model.trim="searchForm.hasInstrumentsId"
          filterable
          clearable
          placeholder="请选择是置换乐器"
        >
          <el-option label="是" :value="true"></el-option>
          <el-option label="否" :value="false"></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% !important"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
        max-height="500"
      >
        <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="actualAmount" label="现金支付">
          <template slot-scope="scope">
            <div>
              {{ scope.row.actualAmount | moneyFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="balance" label="余额支付">
          <template slot-scope="scope">
            <div>
              {{ scope.row.balance | moneyFormat }}
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="是否置换">
          <template slot-scope="scope">
            {{ scope.row.instrumentsId ? "是" : "否" }}
          </template>
        </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.openFlag | openFlagStatus }}
            </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="操作"
          width="150px"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                @click="openFlagMusic(scope.row)"
                v-if="
                  scope.row.openFlag == 0 &&
                  scope.row.instrumentsId &&
                  permission('replacementInstrumentActivity/updateOpenFlag')
                "
                >开启缴费</el-button
              >
              <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
        :total="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,
  updateOpenFlag,
} from "../api";
import ItemVue from "@/layout/components/Sidebar/Item.vue";
import Tooltip from "@/components/Tooltip/index";
import { permission } from "@/utils/directivePage";
const soundList = [
  { text: "长笛", value: 2 },
  { text: "单簧管", value: 4 },
  { text: "萨克斯", value: 5 },
  { text: "小号", value: 12 },
  { text: "圆号", value: 13 },
  { text: "长号", value: 14 },
  { text: "上低音号", value: 15 },
  { text: "大号", value: 17 },
  { text: "打击乐", value: 23 },
];
export default {
  components: { pagination, resetInfo, Tooltip },
  props: ["detail"],
  data() {
    return {
      searchForm: {
        cooperationId: "",
        specification: "",
        search: "",
        subjectId: "",
        hasYesFirstAnswer: "",
        hasInstrumentsId: "",
      },
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      dialogVisible: false,
      branchList: [],
      resetRow: null,
      soundList: soundList,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.searchForm.cooperationId = this.detail.id;
      await this.$store.dispatch("setSubjects");
      this.getList();
    },
    async getList() {
      try {
        const res = await getInstrumentActivityList({
          ...this.searchForm,
          page: this.rules.page,
          rows: this.rules.limit,
        });
        let temp = res.data.rows || [];
        temp.forEach((item) => {
          let questionResult = item.questionResult.split("");
          item.question1 = questionResult[0] == 1 ? "是" : "否";
        });
        this.tableList = temp;
        this.rules.total = res.data.total;
      } catch (e) {}
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    openFlagMusic(row) {
      // 开启缴费
      this.$confirm("您是否开启缴费?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          await updateOpenFlag({
            Id: row.id,
            openFlag: 1,
          });
          this.$message.success("开启成功");
          this.getList();
        } catch {
          //
        }
      });
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      this.searchForm.cooperationId = this.detail.id;
      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);
    },
  },
  filters: {
    openFlagStatus(val) {
      let template = ["否", "是"];
      return template[val];
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table th {
  background: #edeef0;
}
</style>