模板修改

zhanghua

2024-10-08 b664e03064ea1fb6e2d8a4d9ace63c7a8cf8978d

 src/views/class/index.vue

@@ -1,103 +1,231 @@
<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="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
                v-if="activeName == 'all'"
                height="100%"
            >
                <el-table-column label="班级名称">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false">{{
                            scope.row.team.name
                        }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="班级人数" width="200">
                    <template slot-scope="scope"
                        >{{ scope.row.playerCount }} 人</template
                    >
                </el-table-column>
                <el-table-column label="课包/会员卡" width="200">
                    <template slot-scope="scope">{{
                        scope.row.team.voucher
                            ? scope.row.team.voucher.name
                            : ''
                    }}</template>
                </el-table-column>
                <el-table-column label="教师" width="">
                    <template slot-scope="scope">{{
                        concatenateArray(scope.row.team.sessionStaffs)
                    }}</template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleExport(scope.row)">
                            导出
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                fit
                height="100%"
                v-else
            >
                <el-table-column label="班级名称">
                    <template slot-scope="scope"
                        >{{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column label="停用时间">
                    <template slot-scope="scope"
                        >{{ scope.row.modifyTime }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <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>
        <el-dialog title="导出" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="日期范围">
                    <el-date-picker
                        v-model="form.dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmExport"
                    >导 出</el-button
                >
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
</template>

<script>
import { getTeamDtoAll, getDeletedItem } from "@/api/class";

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 {
            dialogVisible: false,
            form: {
                dateRange: [],
                teamId: "",
                name: "",
            },
            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: ["NORMAL"],
            },
        };
    },
    created() {
      this.fetchData();
        this.fetchData();
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
          this.listLoading = false;
        });
      },
        handleExport(row) {
            this.form.dateRange = [];
            this.form.teamId = row.team.id;
            this.form.name = row.team.name;
            this.dialogVisible = true;
        },
        confirmExport() {
            this.download('exportSignIn?teamId=' + this.form.teamId + '&startTime=' + this.form.dateRange[0] + '&endTime=' + this.form.dateRange[1], {
            }, `${this.form.name}上课签到表.xlsx`)
        },
        handleSizeChange(val) {
            this.data.pageIn.size = val;
            this.fetchData("pageIn");
        },
        handleCurrentChange(val) {
            this.data.pageIn.index = val - 1;
            this.fetchData("pageIn");
        },
        fetchData(_val) {
            if (_val !== "pageIn") {
                this.data.pageIn.index = 0;
                this.data.pageIn.size = 10;
            }
            this.listLoading = true;
            if (this.activeName == "all") {
                this.listLoading = true;
                getTeamDtoAll(this.data).then((response) => {
                    this.list = response.data.findTeamDtoAll.ls;
                    this.total = response.data.findTeamDtoAll.pageOut.total;
                    this.listLoading = false;
                });
            } else if (this.activeName == "deactivated") {
                this.listLoading = true;
                let data = {
                    itemType: "TEAM",
                    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;
                });
            }
        },
        concatenateArray(arr) {
            let result = "";
            for (let i = 0; i < arr.length; i++) {
                if (i == 0) {
                    result += arr[i].name;
                } else {
                    result += "," + arr[i].name;
                }
            }
            return result;
        },
    },
  };
  </script>
  
};
</script>