shopping.vue

<template>
  <el-card>
    <el-button type="primary" @click="addShop1" style="margin: 20px 0;">新增商品</el-button>
    <el-button type="primary" @click="getList()" style="margin: 20px 10px;">查询</el-button>
    <el-table :data="products" style="width: 100%">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="b2" label="商品图片">
        <template slot-scope="scope">
          <div>
            <span v-html="getPic(scope.row.b2)"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="b1" label="商品排序"></el-table-column>
      <el-table-column prop="stock" label="商品库存"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="b7" label="商品状态">
        <template slot-scope="scope">
          <div>{{ scope.row.b7 == 1 ? '上架' : '下架' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editProduct(scope.row)" type="text">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="!checkitem.id ? '新增商品' : '编辑商品'" :visible.sync="drawer" width="700px" :before-close="handleClose"
      :destroy-on-close="true">
      <addShop :checkitem="checkitem" :drawer="drawer" @changeSuc="changeSuc" />
    </el-dialog>
  </el-card>
</template>

<script>
import request from '@/utils/request'
import addShop from './addShop.vue';
export default {
  components: {
    addShop
  },
  data() {
    return {
      products: [],
      product: {},
      drawer: false,
      checkitem: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getPic(row) {
      let str = ""
      row?.includes(',') ? row.split(',').map(v => str += `<img style="width:30px;height:auto;" src=${process.env.VUE_APP_BASE_API + v} />`) : str = `<img style="width:30px;height:auto;" src=${process.env.VUE_APP_BASE_API + row} />`
      return str
    },
    addForm() {

    },
    changeSuc() {
      this.drawer = false
      this.$message.success("操作成功！")
      this.getList()
    },
    getList() {
      request({
        url: '/api/products/list',
        method: 'post',
        data: {}
      }).then(res => {
        if (res?.data?.length) {
          this.products = res.data
        }
      })
    },
    addShop1() {
      this.checkitem = {}
      this.drawer = true
    },
    editProduct(product) {
      this.checkitem = product
      this.drawer = true
      // 编辑商品逻辑
      console.log('编辑商品:', product);
    },
    deleteProduct(productId) {
      // 删除商品逻辑
      console.log('删除商品ID:', productId);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  },
};
</script>

<style scoped>
/* 添加样式 */
</style>