jiangchengfeiyi-Web/src/views/Commodity/MerchandiseCenter.vue

<template>
  <div>
    <div >
      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称" v-model="username" ></el-input>
      <el-form-item label="商品类型" style="width: 200px; margin-right: 10px;display: inline-block">
        <el-select v-model="resources" placeholder="请选择">
          <el-option label="材料包" value="0" />
          <el-option label="手持物" value="1" />
          <el-option label="头饰" value="2" />
          <el-option label="定制" value="3" />
          <el-option label="积分兑换" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态" style="width: 200px;margin-right: 10px;display: inline-block">
        <el-select v-model="Region" placeholder="请选择">
          <el-option label="已上架" value="11" />
          <el-option label="已下架" value="12" />
        </el-select>
      </el-form-item>
            <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
            <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
    </div>
    <div style="margin: 15px 0">
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="InfoFilled"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
          width=180
      >
        <template #reference>
          <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
        </template>
      </el-popconfirm>
    </div>
    <el-table :data="tableData" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
              @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="selectedItems" label="商品编号" width="70 "></el-table-column>
      <el-table-column prop="uploadedFiles" label="商品图片"></el-table-column>
      <el-table-column prop="name" label="商品名称" ></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="resource" label="类型"></el-table-column>
      <el-table-column prop="quantity" label="商品数量"></el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" slot="reference">详情<i class="el-icon-remove-outline"></i></el-button>
          <el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
          <el-button type="danger" slot="reference">下架<i class="el-icon-remove-outline"></i></el-button>
          <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>

          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[2, 5, 10, 20]"
          :small="null"
          :disabled="null"
          :background="null"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>
  </div>
  <el-dialog title="商品信息" v-model="dialogTableVisible" width="30%">
    <el-table-column property="name" label="商品名称" width="150" />
    <el-table-column property="price" label="商品价格" width="200" />
    <el-table-column property="quantity" label="商品数量" />
    <el-table-column property="region" label="是否为限定产品" />
    <el-table-column property="resource" label="商品类型" />
    <el-table-column property="label" label="商品标签" />
    <el-table-column property="desc" label="详情描述" />
    <template #footer>
      <div class="dialog-footer">
        <el-button style="height: 30px;" @click="dialogTableVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import instance from '@/utils/request';
import { ElMessage } from 'element-plus';
import {ref, onMounted} from 'vue'
const tableData = ref([])
const pageNum = ref(0)
const pageSize = ref(0)
const total = ref(0)
const selectedItems = ref([])
onMounted(() => {
  load()
})
const handleSelectionChange = (row: any) => {
  selectedItems.value = JSON.parse(JSON.stringify(row))
}
const username = ref('')
const dialogTableVisible = ref(false)
const resources =ref('')
const Region = ref('')

const form=ref({
  selectedItems:'',//商品编号
  uploadedFiles:'',//商品图片
  name:'',
  price:'',
  resource:'',//商品类型
  quantity:'',//商品数量
  state:'',//商品状态(上架，下架，售罄)
  region:'',//是否为限定产品
  label:[],//商品标签
  desc:'',//详情描述
})
const reset =()=>{
  username.value = ''
  resources.value = ''
  Region.value = ''
}
const handleEdit = (row: any) => {
  dialogTableVisible.value = true
  form.value = row
  load()
}

const load = async () => {
  await instance.get('/admin/findAllUsers').then(res => {
    console.log(res.data.data)
    res.data.data.foreach((item:any) => {
      console.log(item)
    })
    tableData.value = res.data.data
  })
}
const delBatchSuccess = () => {
  ElMessage({
    message: '批量删除成功',
    type: 'success',
  })
}
const delBatch = async () => {
  await instance.post('').then(res => {
    if(res.data.code == '200'){
      load()
    }else{
      ElMessage({
        message: '批量删除失败',
        type: 'error'
      })
    }
  })
}


</script>


<style scoped>
.headerBg{
  background-color: #eee !important;
}
</style>