154 lines
4.8 KiB
Vue
154 lines
4.8 KiB
Vue
<template>
|
|
<el-card>
|
|
|
|
<el-row :gutter="20" class="header" >
|
|
<el-col :span="4" >
|
|
<el-input placeholder="请输入商品ID..." clearable v-model="queryForm.id"></el-input>
|
|
</el-col>
|
|
<el-col :span="4" v-if="params.product==undefined">
|
|
<el-input placeholder="请输入商家ID..." clearable v-model="queryForm.businessId"></el-input>
|
|
</el-col>
|
|
<el-col :span="4" >
|
|
<el-input placeholder="请输入分类ID..." clearable v-model="queryForm.commoditiesGroupId"></el-input>
|
|
</el-col>
|
|
<el-button type="primary" :icon="Search" @click="initProductList" >搜索</el-button>
|
|
<el-button v-if="params.product!==undefined" >商家名称：{{JSON.parse(params.product).businessName}}</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="businessId" label="商家ID" />
|
|
<el-table-column prop="commoditiesGroupId" label="商品关联类别Id" />
|
|
<el-table-column prop="inventoryStatus" label="商品库存" />
|
|
<el-table-column prop="status" label="商品状态" />
|
|
<el-table-column prop="action" fixed="right" label="操作" min-width="80">
|
|
<template v-slot="scope" >
|
|
<el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row.id)"></el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</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:'',
|
|
commoditiesGroupId: null,
|
|
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 handleDelete=(id)=>{
|
|
// console.log(id)
|
|
ElMessageBox.confirm(
|
|
'您确定要删除这条记录吗？',
|
|
'系统提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
.then(async() => {
|
|
let res=await axios.post('commodities/delete',{id:id})
|
|
if(res.data.code==0){
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '删除成功',
|
|
})
|
|
initSmallTypeList();
|
|
}else{
|
|
ElMessage({
|
|
type: 'error',
|
|
message: res.data.description,
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
})
|
|
// initUserList();
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.header{
|
|
padding-bottom: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
.el-pagination{
|
|
padding-top: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |