导出

龚焕茏

2024-09-06 02c2abb2888dada3ad2898f247fe4ec2930a6906

导出

 src/router/index.js

@@ -82,6 +82,19 @@
      },
    ],
  },
  {
    path: "/",
    component: Layout,
    redirect: "/session",
    children: [
      {
        path: "/session",
        name: "Session",
        component: () => import("@/views/session/index"),
        meta: { title: "报告", icon: "table" },
      },
    ],
  },
  // {
  //   path: "/educational",
  //   component: Layout,

 src/views/session/components/create.vue

New file
@@ -0,0 +1,190 @@
<template>
  <div class="app-container">
    <el-dialog
      title="添加学员"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="createData" label-width="100px">
        <el-form-item label="姓名" style="width: 400px">
          <el-input v-model="createData.playerName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="性别" style="width: 400px">
          <el-input v-model="createData.gender" size="small"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            v-model="createData.birthday"
            type="date"
            placeholder="选择日期"
            size="small"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系电话" style="width: 400px">
          <el-input v-model="createData.mobile" size="small"></el-input>
        </el-form-item>
        <el-form-item label="课包/会员卡">
          <el-select
            v-model="createData.saleMan.id"
            filterable
            clearable
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="item in saleManList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时" style="width: 400px">
          <el-input-number v-model="num" size="small"></el-input-number>
        </el-form-item>
        <el-form-item label="缴费" style="width: 400px">
          <el-input-number
            v-model="num"
            size="small"
            style="width: 200px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="有效期" style="width: 400px">
          <div>
            <el-radio-group v-model="lifespan" @input="lifespanChange" size="mini">
              <el-radio-button label="month">一月</el-radio-button>
              <el-radio-button label="year">一年</el-radio-button>
              <el-radio-button label="longTerm">长期</el-radio-button>
              <el-radio-button label="custom">自定义</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <el-date-picker
              v-model="createData.endDate"
              type="date"
              placeholder="选择日期"
              size="small"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="课程顾问">
          <el-select
            v-model="createData.voucherId"
            filterable
            clearable
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="item in voucherList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" style="width: 400px">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
            v-model="createData.description"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDetails, getSaleMan } from "@/api/student";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dialogVisible: false,
      createData: {
        beginDate: new Date(),
        birthday: null,
        description: "",
        detailDescription: "",
        endDate: new Date(),
        amt: 0,
        freezeQty: 0,
        gender: "男",
        mobile: "",
        orgId: 25, //机构
        playerId: null,
        playerName: "",
        qty: 0,
        saleMan: {
          id: "",
          name: "",
        },
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        visibility: true,
        voucherId: "", //课包/会员卡
      },
      saleManList: [],
      voucherList: [],
      lifespan:''
    };
  },
  created() {},
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    getSaleManList() {
      let data = {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          index: 0,
          size: 999,
          sorts: [
            {
              name: "name",
              direction: "ASC",
            },
            {
              name: "createTime",
              direction: "DESC",
            },
          ],
        },
      };
      getSaleMan(data).then((response) => {
        this.saleManList = response.data.findStaff.ls;
      });
    },
    goDetails(row) {
      this.$router.push("/details");
    },
    lifespanChange(val){
      console.log(val);
    }
  },
};
</script>

 src/views/session/components/details.vue

New file
@@ -0,0 +1,185 @@
<template>
  <div class="app-container">
    <div
      style="margin-bottom: 20px; display: flex; flex-direction: row-reverse"
    >
      <div>
        <el-button type="primary" size="small">课程</el-button>
        <el-button type="primary" size="small">班级</el-button>
        <el-button type="danger" size="small">续费</el-button>
        <el-button type="primary" size="small">成长</el-button>
        <el-button type="primary" size="small">作业</el-button>
        <el-button type="primary" size="small">停用</el-button>
      </div>
    </div>
    <div>
      <el-form ref="form" :model="detailsData" label-width="100px">
        <el-form-item label="姓名" style="width: 400px">
          <el-input v-model="detailsData.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="性别" style="width: 400px">
          <el-input v-model="detailsData.gender" size="small"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            v-model="detailsData.birthday"
            type="date"
            placeholder="选择日期"
            size="small"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系电话" style="width: 400px">
          <el-input v-model="detailsData.mobile" size="small"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <el-image
            fit="cover"
            v-if="detailsData.avatars && detailsData.avatars.length"
            style="width: 200px; height: 200px"
            :src="'https://s.9village.cn/' + detailsData.avatars[0].url2"
            :preview-src-list="[
              'https://s.9village.cn/' + detailsData.avatars[0].origin,
            ]"
          >
          </el-image>
        </el-form-item>
        <el-form-item label="课程顾问">
          <el-select
            v-model="detailsData.saleMan.id"
            filterable
            clearable
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="item in saleManList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" style="width: 400px">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
            v-model="detailsData.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="账户" style="width: 800px">
          <el-table :data="detailsData.accs" fit>
            <el-table-column label="课程" prop="">
              <template slot-scope="scope">
                {{ scope.row.voucher.name }}
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="goDetails(scope.row)"
                  >{{ scope.row.name }}</el-link
                >
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="qty" />
            <el-table-column label="金额" prop="amt" />
            <el-table-column label="到期时间" prop="endDate" />
            <el-table-column label="" prop="">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="goDetails(scope.row)"
                  >查看明细</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item
          label=""
          style="width: 500px; display: flex; justify-content: space-around"
        >
          <el-button size="small">取消</el-button>
          <el-button type="primary" size="small">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getDetails, getSaleMan } from "@/api/student";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      detailsData: {
        saleMan: [{ id: "", name: "" }],
      },
      saleManList: [],
    };
  },
  created() {
    this.getSaleManList();
    this.fetchData();
  },
  methods: {
    fetchData() {
      let data = { id: Number(this.$route.query.id) };
      getDetails(data).then((response) => {
        this.detailsData = response.data.findPlayerDto;
        this.detailsData.gender =
          this.detailsData.gender == "FEMALE" ? "女" : "男";
        if (
          response.data.findPlayerDto.saleMan &&
          response.data.findPlayerDto.saleMan.length !== 0
        ) {
          this.detailsData.saleMan.id = String(this.detailsData.saleMan.id);
        }
      });
    },
    getSaleManList() {
      let data = {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          index: 0,
          size: 999,
          sorts: [
            {
              name: "name",
              direction: "ASC",
            },
            {
              name: "createTime",
              direction: "DESC",
            },
          ],
        },
      };
      getSaleMan(data).then((response) => {
        this.saleManList = response.data.findStaff.ls;
      });
    },
    goDetails(row) {
      this.$router.push("/details");
    },
  },
};
</script>

 src/views/session/index.vue

New file
@@ -0,0 +1,179 @@
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="待续费" name="pendingFees" />
      <el-tab-pane label="已过期" name="expired" />
      <el-tab-pane label="已停用" name="deactivated" />
    </el-tabs>
    <div style="display: flex;">
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" style="margin-right: 10px">
      </el-date-picker>
      <el-button type="primary" size="small" @click="handleExport">导出</el-button>
    </div>
    <div style="height: calc(100vh - 248px)">
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" fit height="100%">
        <el-table-column label="姓名" prop="">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="goDetails(scope.row)">{{ scope.row.name }}</el-link>
            <!-- <el-link type="primary" :underline="false">{{
              scope.row.name
            }}</el-link> -->
          </template>
        </el-table-column>
        <el-table-column label="性别" width="80" v-if="activeName !== 'deactivated'">
          <template slot-scope="scope">
            {{ scope.row.gender == "FEMALE" ? "女" : "男" }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="200" prop="mobile" v-if="activeName !== 'deactivated'">
          <template slot-scope="scope">
            {{ scope.row.mobile ? scope.row.mobile : "--" }}
          </template>
        </el-table-column>
        <el-table-column label="是否绑定微信" width="200" v-if="activeName !== 'deactivated'">
          <template slot-scope="scope">
            {{ scope.row.user ? "是" : "否" }}
          </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>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-link type="primary" :underline="false">恢复</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>
    </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>
    <StudentCreate ref="studentCreate" />
  </div>
</template>

<script>
import { getData, getRenew, getExpire, getDeleted, handleExport } from "@/api/student";
import StudentCreate from "./components/create.vue";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  components: {
    StudentCreate,
  },
  data() {
    return {
      dateRange: "",
      list: null,
      listLoading: true,
      activeName: "all",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: {
            name: "name", //排序字段名称
            direction: "ASC", //排序方向
          },
        },
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    formatDate (date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    handleExport() {
      this.download('exportReport?startDate=' + this.formatDate(this.dateRange[0]) + '&endDate=' + this.formatDate(this.dateRange[1]), {
      }, `导出_${new Date().getTime()}.xlsx`)
    },
    fetchData() {
      this.listLoading = true;
      getData(this.data).then((response) => {
        this.list = response.data.findPlayerByStaff.ls;
        this.total = response.data.findPlayerByStaff.pageOut.total;
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.handleClick();
    },
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.handleClick();
    },
    handleClick(tab, event) {
      if (this.activeName == "pendingFees") {
        this.listLoading = true;
        getRenew(this.data).then((response) => {
          this.list = response.data.findPlayerRenew.ls;
          this.total = response.data.findPlayerRenew.pageOut.total;
          this.listLoading = false;
        });
      } else if (this.activeName == "expired") {
        this.listLoading = true;
        getExpire(this.data).then((response) => {
          this.list = response.data.findPlayerExpire.ls;
          this.total = response.data.findPlayerExpire.pageOut.total;
          this.listLoading = false;
        });
      } else if (this.activeName == "all") {
        this.fetchData();
      } else if (this.activeName == "deactivated") {
        this.listLoading = true;
        let data = {
          itemType: "PLAYER",
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        getDeleted(data).then((response) => {
          this.list = response.data.findDeletedItem.ls;
          this.total = response.data.findDeletedItem.pageOut.total;
          this.listLoading = false;
        });
      }
    },
    goDetails(row) {
      this.$router.push({
        name: "StudentDetails",
        query: {
          id: row.id,
        },
      });
    },
    showCreate() {
      this.$refs.studentCreate.showDialog();
    },
  },
};
</script>