dy-admin-manager/src/views/teamDetail/components/convertList.vue

<template>
  <div>
    <save-form
      :inline="true"
      class="searchForm"
      save-key="teamDetails-convertList"
      @submit="search"
      @reset="onReSet"
      :model="searchForm"
    >
      <el-form-item prop="search">
        <el-input
          v-model.trim="searchForm.search"
          clearable
          placeholder="转换前班级名称"
          @keyup.enter.native="
            (e) => {
              e.target.blur();
              $refs.searchForm.save();
              search();
            }
          "
        ></el-input>
      </el-form-item>
      <el-form-item prop="operator">
        <el-input
          v-model.trim="searchForm.operator"
          clearable
          placeholder="操作人"
          @keyup.enter.native="
            (e) => {
              e.target.blur();
              $refs.searchForm.save();
              search();
            }
          "
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model.trim="searchForm.date"
          style="width: 400"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="操作开始日期"
          end-placeholder="操作结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="danger">搜索</el-button>
        <el-button type="primary" native-type="reset">重置</el-button>
      </el-form-item>
    </save-form>
    <!-- 查询列表 -->
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column align="center" label="转换前班级" prop="oldClassName">
        </el-table-column>
        <el-table-column
          align="center"
          prop="convertCourseNum"
          label="转换课时数"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="convertAfterClassNum"
          label="转换后班级数"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="convertAfterCourseNum"
          label="转换后课时数"
        >
        </el-table-column>
        <el-table-column align="center" prop="operatorName" label="操作人">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="操作时间">
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div>
              <!--       -->
              <el-button
                type="text"
                :disabled="scope.row.revokeFlag"
                v-if="permission('courseScheduleConvert/revoke')"
                @click="revokeCourse(scope.row)"
                >还原</el-button
              >
              <el-button
                type="text"
                v-if="permission('courseScheduleConvert/queryCourse')"
                @click="lookDetail(scope.row)"
                >查看</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        save-key="teamDetails-convertList"
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      />
      <converDetail ref='converDetail'/>
    </div>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { permission } from "@/utils/directivePage";
import { getConvertList, revokeConvert,getConvertDeatil } from "../api";
import converDetail from './modals/converDetail'
import { getTimes } from "@/utils";
export default {
  name: "tsalaryList",
  data() {
    return {
      dialogTableVisible: false,
      innerVisible: false,
      searchForm: {
        timer: [], // 时间选择器返回的值
        operator: "",
        search: "",
      },
      pickerOptions: {
        firstDayOfWeek: 1,
      }, // 时间选择器默认选项
      tableList: [], // table列表
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      searchLsit: [],

      courseScheduleId: "",

      tempSelectRow: {}, // 选中班级数据
    };
  },
  components: {
    pagination,
    converDetail
  },
  mounted() {
    this.getList();
  },
  methods: {
    permission(str) {
      return permission(str);
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.$refs.searchForm.resetFields();
      this.search();
    },
    getList() {
      this.teamid = this.$route.query.id;

      const { timer, ...rest } = this.searchForm;
      // try {
      //   const res = await getLiveBroadcastList({
      //     ...rest,
      //     ...getTimes(timer, ["startTime", "endTime"]),
      //     rows: this.rules.limit,
      //     page: this.rules.page,
      //   });
      //   this.tableList = res.data.rows;
      //   this.rules.total = res.data.total;
      // } catch (e) {
      //   console.log(e);
      // }

      // searchForm.date
      // if (!this.searchForm.date) {
      //   this.searchForm.date = [];
      // }

      let obj = {
        musicGroupId: this.teamid,
        ...rest,
        ...getTimes(timer, ["startTime", "endTime"]),
        page: this.rules.page,
        rows: this.rules.limit,
      };
      getConvertList(obj).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    async revokeCourse(row) {
      try {
        await this.$confirm("是否确还原转换课程?", "提示", {
          type: "warning",
        });
        const res = await revokeConvert({ courseConvertId: row.id });
        this.getList();
      } catch (e) {
        console.log(e);
      }
    },
    lookDetail(row){
      this.$refs.converDetail.openDialog(row)
    }
  },
};
</script>
<style lang="scss" scope>
</style>