erp/resources/frontend/src/views/store/store.vue

<template>
  <div class="conent">
    <!-- 新增按钮 -->
    <div class="btn">
      <el-button type="primary" @click="handAdd">新增</el-button>
    </div>

    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="name" label="店铺名称" width="180">
        </el-table-column>
        <el-table-column prop="plat_id" label="所属平台"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="handEdit(scope.row.id, scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="handdel(scope.row.id)"
              >授权</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增店铺 -->
    <el-dialog title="新增店铺" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="店铺名称">
          <el-input v-model="form.name" placeholder="输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺平台">
          <el-select v-model="form.plat_id" placeholder="输入店铺平台">
            <el-option
              v-for="(item, index) in storeId"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="[15, 50, 100]"
        :page-size="per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Paginationdata.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { shopListId, shopAdd } from "../../api/shop";
import axios from "axios";
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        plat_id: "",
      },
      storeId: [], // 店铺id
      tableData: [],
      Paginationdata: {}, //分页相关数据
      current_page: 1, //当前页
      per_page: 15, //每页显示数量
    };
  },
  mounted() {
    // 获取平台
    shopListId().then((res) => {
      this.storeId = res.data.data;
    });
    // 展示店铺列表
    this.getStoreList();
  },
  methods: {
    // 点击新增
    handAdd() {
      this.form.name = "";
      this.form.plat_id = "";
      this.dialogFormVisible = true;
    },
    // 新增商品
    addSubmit() {
      const datas = this.form;
      shopAdd(datas).then((res) => {
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "添加成功",
          });
        }
        this.getStoreList();
      });
      this.dialogFormVisible = false;
    },
    // 店铺列表
    getStoreList() {
      // storeList().then((res) => {
      //   this.tableData = res.data.data;
      //   console.log(res, "kkk");
      // });
      axios
        .get("/api/shops", {
          headers: {
            Authorization:
              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
          },
          params: {
            page: this.current_page,
            per_page: this.per_page,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.Paginationdata = res.data.meta;
        });
    },
    //分页功能
    handleSizeChange(val) {
      //当前条数
      this.per_page = val;
      // console.log(1111, val);
      this.getStoreList();
    },
    handleCurrentChange(val) {
      //当前页
      this.current_page = val;
      // console.log(2222, val);
      this.getStoreList();
    },
  },
};
</script>

<style lang="scss" scoped>
.conent {
  width: 100%;
  min-height: calc(100vh - 200px);
  position: relative;
}
.btn {
  height: 104px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  .el-button {
    width: 114px;
    height: 44px;
    border-radius: 3px;
  }
}
.table {
  margin-top: 20px;
}
.block {
  margin-top: 30px;
}
</style>