118 lines
4.4 KiB
Vue
118 lines
4.4 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="head-container">
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-input v-model="query.blurry" size="small" clearable placeholder="请输入模板名称" style="width: 100%;"
|
||
class="filter-item" @keyup.enter.native="getTableData" />
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-button type="primary" @click="getTableData">查询</el-button>
|
||
<el-button @click="resetHandle">重置</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="head-container">
|
||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addSpecificationRef.show()">添加规格</el-button>
|
||
<addSpecification ref="addSpecificationRef" @success="getTableData" />
|
||
</div>
|
||
<div class="head-container">
|
||
<el-table :data="tableData.list" v-loading="tableData.loading">
|
||
<el-table-column label="模板名称" prop="name"></el-table-column>
|
||
<el-table-column label="规格详情">
|
||
<template v-slot="scope">
|
||
<el-row v-for="(item, index) in scope.row.specList" :key="index">
|
||
<span>{{ item.name }}：</span>
|
||
<span>{{ item.value.join('、') }}</span>
|
||
</el-row>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="排序" sortable></el-table-column>
|
||
<el-table-column label="操作" width="200">
|
||
<template v-slot="scope">
|
||
<el-button type="text" size="mini" round icon="el-icon-edit"
|
||
@click="$refs.addSpecificationRef.show(scope.row)">编辑</el-button>
|
||
<el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
|
||
<el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
|
||
删除
|
||
</el-button>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="head-container">
|
||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import addSpecification from './components/addSpecification'
|
||
import { tbProductSpecGet, tbProductSpecDelete } from '@/api/shop'
|
||
export default {
|
||
components: {
|
||
addSpecification
|
||
},
|
||
data() {
|
||
return {
|
||
query: {
|
||
blurry: '',
|
||
},
|
||
tableData: {
|
||
page: 0,
|
||
size: 10,
|
||
total: 0,
|
||
loading: false,
|
||
list: []
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getTableData()
|
||
},
|
||
methods: {
|
||
// 重置查询
|
||
resetHandle() {
|
||
this.query.blurry = ''
|
||
this.tableData.page = 0;
|
||
this.getTableData()
|
||
},
|
||
// 分页回调
|
||
paginationChange(e) {
|
||
this.tableData.page = e - 1
|
||
this.getTableData()
|
||
},
|
||
// 删除
|
||
async delHandle(ids) {
|
||
try {
|
||
const res = await tbProductSpecDelete(ids)
|
||
this.$notify({
|
||
title: '成功',
|
||
message: `删除成功`,
|
||
type: 'success'
|
||
});
|
||
this.getTableData()
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
// 获取商品列表
|
||
async getTableData() {
|
||
this.tableData.loading = true
|
||
try {
|
||
const res = await tbProductSpecGet({
|
||
page: this.tableData.page,
|
||
size: this.tableData.size,
|
||
sort: 'id',
|
||
shopId: localStorage.getItem('shopId')
|
||
})
|
||
this.tableData.loading = false
|
||
this.tableData.list = res.content
|
||
this.tableData.total = res.totalElements
|
||
} catch (error) { }
|
||
}
|
||
}
|
||
}
|
||
</script> |