jiaqingjiayi-Web/src/views/product/index.vue

<template>
  <el-card>
    <el-row :gutter="20" class="header" style="display: flex;align-items: center;
   justify-content: center;" v-if="params.product!==undefined">
      商家名称：{{JSON.parse(params.product).businessName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      商家头像：<img :src="JSON.parse(params.product).businessAvatar" width="50" height="50"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      商家电话：{{JSON.parse(params.product).businessPhone}}

    </el-row>
    <el-row :gutter="20" class="header" >
      <el-col :span="7" >
        <el-input placeholder="请输入商品ID..." clearable v-model="queryForm.id"></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initProductList" >搜索</el-button>
<!--        <el-button type="primary" :icon="DocumentAdd"-->
<!--                   @click="handleDialogValue()">添加商品</el-button>-->
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%;">
      <el-table-column prop="id" label="#ID"  />
      <el-table-column prop="commoditiesName" label="商品名称"  />
      <el-table-column prop="commoditiesImagecommoditiesImage" label="商品图片" >
        <template v-slot="scope">
          <img :src="scope.row.commoditiesImagecommoditiesImage"
               width="50" height="50"/>
        </template>
      </el-table-column>
      <el-table-column prop="commoditiesPrice" label="商品名称"  />
      <el-table-column prop="inventoryStatus" label="商品库存"  />
      <el-table-column prop="status" label="商品状态"  />

    </el-table>
    <el-pagination
        v-model:currentPage="queryForm.current"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[10, 20, 30, 40,50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
<!--  <Dialog v-model="dialogVisible" :dialogVisible="dialogVisible"-->
<!--          :dialogTitle="dialogTitle" :id="id" @initProductList="initProductList"></Dialog>-->
</template>
<script setup>
import {Search,Delete,Edit,DocumentAdd} from '@element-plus/icons-vue'
import {ref, watch} from 'vue'
import axios,{getServerUrl} from "@/util/axios";
import { ElMessageBox,ElMessage } from 'element-plus'
import {useRoute} from "vue-router";
// import Dialog from './components/dialog'

let params=useRoute().query
const query=ref()
const total=ref(0)
const tableData =ref([])
const id=ref(-1)
const dialogTitle=ref('');
const dialogVisible=ref(false)


const queryForm=ref({
  businessId: '',
  id:'',
  current:1,
  pageSize:10
})
// const handleDialogValue=(productId)=>{
//   if(productId){
//     id.value=productId;
//     dialogTitle.value="商品修改"
//   }else{
//     id.value=-1;
//     dialogTitle.value="商品添加"
//   }
//   dialogVisible.value=true
// }
const initProductList=async()=>{
  //console.log(JSON.parse(params.product).id)
  if(params.product!=undefined){

    queryForm.value.businessId=JSON.parse(params.product).id
  }
    const res=await axios.post("commodities/list/page/commodities",queryForm.value);
    // console.log(res.data.data)
    tableData.value=res.data.data.records;
    total.value=Number(res.data.data.total);

}
initProductList();
watch(query,()=>{
  // console.log(id.value)
  initProductList();
},10000)

const handleSizeChange = (pageSize) => {
  queryForm.value.current=1;
  queryForm.value.pageSize=pageSize;
  initProductList();
}
const handleCurrentChange = (current) => {
  queryForm.value.current=current;
  initProductList();
}
// const typeNameFormatter=(row)=>{
//   // console.log(row)
//   // let name=await axios.get('admin/smallType/'+row.typeid).then((res) => {
//   //    return  res.data.smallType.name
//   // });
//   // row.smalltype=name;
//  let name= axios.get('admin/smallType/'+row.typeid).then((res) => {
//        return  res.data.smallType.name
//      });
//  let t=name
//   console.log(t.then())
//   return t.then()
// }
// const typeNameFormatter=(row)=>{
//   // console.log(row)
//   let name= typeNameFormatter2(row)
//   console.log(name)
//   return name
// }
// const handleDelete=(id)=>{
//   ElMessageBox.confirm(
//       '您确定要删除这条记录吗？',
//       '系统提示',
//       {
//         confirmButtonText: '确定',
//         cancelButtonText: '取消',
//         type: 'warning',
//       }
//   )
//       .then(async() => {
//         let res=await axios.get('admin/product/delete/'+id)
//         if(res.data.code==0){
//           ElMessage({
//             type: 'success',
//             message: '删除成功',
//           })
//           initProductList();
//         }else{
//           ElMessage({
//             type: 'error',
//             message: res.data.msg,
//           })
//         }
//       })
//       .catch(() => {
//       })
// }
</script>
<style lang="scss" scoped>
.header{
  padding-bottom: 16px;
  box-sizing: border-box;
}
.el-pagination{
  padding-top: 15px;
  box-sizing: border-box;
}
</style>