模板修改

zhanghua

2024-10-08 b664e03064ea1fb6e2d8a4d9ace63c7a8cf8978d

 src/views/scheduleCourses/index.vue

@@ -1,112 +1,155 @@
<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="已停用" name="fourth" />
      </el-tabs>
      <div style="display: flex; flex-direction: row-reverse;">
        <div style="width: 300px;">
          <el-input
            placeholder="按课程名称搜索"
            v-model="input3"
            class="input-with-select"
            size="small"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        <el-tabs v-model="activeName" @tab-click="fetchData">
            <el-tab-pane label="全部" name="all" />
            <el-tab-pane label="已停用" name="deactivated" />
        </el-tabs>
        <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
                <el-input
                    placeholder="按课程名称搜索"
                    v-model="data.keyword"
                    class="input-with-select"
                    size="small"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="fetchData"
                    ></el-button>
                </el-input>
            </div>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
      >
        <el-table-column label="课程名称">
          <template slot-scope=""> xxxxx </template>
        </el-table-column>
        <el-table-column label="班级名称" width="80">
          <template slot-scope=""> 男 </template>
        </el-table-column>
        <el-table-column label="类型" width="200">
          <template slot-scope=""> 10086 </template>
        </el-table-column>
        <el-table-column label="课节市场(分钟)" width="200">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="人数上限" width="">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="消课方式" width="">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="颜色" width="">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="描述" width="">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="操作" width="">
          <template slot-scope=""> 修改 停用 </template>
        </el-table-column>
        <!-- <el-table-column label="Author" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Pageviews" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.pageviews }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="Status" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="Display_time" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.display_time }}</span>
          </template>
        </el-table-column> -->
      </el-table>
        <div style="height: calc(100vh - 248px)">
            <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                fit
                height="100%"
            >
                <el-table-column label="课程名称">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false">{{
                            scope.row.name
                        }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    label="停用时间"
                    width="200"
                    v-if="activeName == 'deactivated'"
                >
                    <template slot-scope="scope">
                        {{ scope.row.modifyTime }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    v-if="activeName == 'deactivated'"
                >
                    <template slot-scope="">
                        <el-link type="primary" :underline="false"
                            >恢复</el-link
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="data.pageIn.index + 1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="data.pageIn.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
</template>

<script>
import { getCourse, getDeletedItem } from "@/api/scheduleCourses";

export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
      return {
        list: null,
        listLoading: true,
        activeName: "first",
      };
        return {
            list: null,
            listLoading: true,
            activeName: "all",
            total: 0,
            data: {
                staffId: JSON.parse(localStorage.getItem("selectStaff")).id,
                keyword: "",
                pageIn: {
                    //可选，如果是分页查询，需要加上。
                    index: 0, //必选
                    size: 10, //每页的大小。默认20
                    sorts: {
                        name: "name", //排序字段名称
                        direction: "ASC", //排序方向
                    },
                },
                types: ["BOOKING_NONE", "BOOKING_TIME_STAFF", "BOOKING_TIME_PLACE"],
            },
        };
    },
    created() {
      this.fetchData();
        this.fetchData();
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
          this.listLoading = false;
        });
      },
        handleSizeChange(val) {
            this.data.pageIn.size = val;
            this.fetchData("pageIn");
        },
        handleCurrentChange(val) {
            this.data.pageIn.index = val - 1;
            this.fetchData("pageIn");
        },
        fetchData(_val) {

            this.data.staffId = JSON.parse(localStorage.getItem("selectStaff")).id
            if (_val !== "pageIn") {
                this.data.pageIn.index = 0;
                this.data.pageIn.size = 10;
            }
            this.listLoading = true;
            if (this.activeName == "all") {
                this.listLoading = true;
                getCourse(this.data).then((response) => {
                    this.list = response.data.findCourse.ls;
                    this.total = response.data.findCourse.pageOut.total;
                    this.listLoading = false;
                });
            } else if (this.activeName == "deactivated") {
                this.listLoading = true;
                let data = {
                    itemType: "COURSE",
                    staffId: JSON.parse(localStorage.getItem("selectStaff")).id,
                    keyword: this.data.keyword,
                    pageIn: { ...this.data.pageIn },
                };
                getDeletedItem(data).then((response) => {
                    this.list = response.data.findDeletedItem.ls;
                    this.total = response.data.findDeletedItem.pageOut.total;
                    this.listLoading = false;
                });
            }
        },
    },
  };
  </script>
  
};
</script>