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

<template>
  <div>
    <el-button type="primary"
               @click="handAdd">新增</el-button>
    <el-table :data="tableData"
              border
              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>
    <!-- 新增店铺 -->
    <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>
</template>

<script>
import { shopListId, shopAdd, storeList } from '../../api/shop'
export default {
  name: 'GlxtStore',

  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        plat_id: '',
      },
      storeId: [], // 店铺id
      tableData: [],
    }
  },
  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.dialogFormVisible = false
      this.getStoreList()
    },
    // 店铺列表
    getStoreList() {
      storeList().then((res) => {
        this.tableData = res.data.data
        console.log(res, 'kkk')
      })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>