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 label="操作">
          <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.status === '未授权'"
              ><a
                :href="scope.row.authUrl"
                target="_blank"
                rel="noopener noreferrer"
                >&nbsp;&nbsp;授&nbsp;&nbsp;&nbsp;权&nbsp;&nbsp;</a
              ></el-button
            >
            <div v-if="scope.row.status === '重新授权'">
              <el-button type="danger" target="_blank"
                ><a :href="scope.row.authUrl" rel="noopener noreferrer"
                  >重新授权</a
                ></el-button
              >
              <el-button @click="download(scope.row)">下载商品</el-button>
            </div>

            <div v-if="scope.row.status === '无需授权'">
              <el-button type="success">{{ scope.row.status }}</el-button>
              <el-button @click="download(scope.row)">下载商品</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增店铺 -->
    <el-dialog
      title="新增店铺"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <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, storeList, downloadGoods } from "../../api/shop";
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        plat_id: "",
      },
      storeId: [], // 店铺id
      tableData: [],
      Paginationdata: {}, //分页相关数据
      current_page: 1, //当前页
      per_page: 15, //每页显示数量
    };
  },
  mounted() {
    // 展示店铺列表
    this.getStoreList();
  },
  methods: {
    // 点击新增
    handAdd() {
      this.form.name = "";
      this.form.plat_id = "";
      this.dialogFormVisible = true;
      this.getshop();
    },

    // 新增商品
    addSubmit() {
      const datas = this.form;
      shopAdd(datas).then((res) => {
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "添加成功",
          });
        }
        this.getStoreList();
      });
      this.dialogFormVisible = false;
    },

    // 店铺列表
    getStoreList() {
      let page = {
        page: this.current_page,
        per_page: this.per_page,
      };
      storeList(page).then((res) => {
        this.tableData = res.data.data;
        this.Paginationdata = res.data.meta;
        console.log(111111, this.tableData);
      });
    },

    //分页功能
    handleSizeChange(val) {
      //当前条数
      this.per_page = val;
      // console.log(1111, val);
      this.getStoreList();
    },
    handleCurrentChange(val) {
      //当前页
      this.current_page = val;
      // console.log(2222, val);
      this.getStoreList();
    },

    // 店铺平台
    getshop() {
      shopListId().then((res) => {
        this.storeId = res.data.data;
      });
    },

    // 下载商品
    download(row) {
      // console.log(row);
      downloadGoods(row.id).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  color: white;
}

.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>