<template> <div class="single"> <el-form ref="searchFrom" :model="searchFrom" label-width="80px"> <el-row> <el-col :span="4"> <el-form-item label="分类名称"> <el-input v-model="searchFrom.category_name" placeholder="名称" size="small"></el-input> </el-form-item> </el-col> <el-col :span="4"> <el-form-item label="单品名称"> <el-input v-model="searchFrom.name" placeholder="名称" size="small"></el-input> </el-form-item> </el-col> <el-col :span="4"> <el-form-item> <el-button type="primary" plain size="small" @click="initPage"> 搜索 </el-button> </el-form-item> </el-col> <el-col :span="4" :offset="8"> <el-form-item> <el-button type="success" plain size="small" @click="onAdd" v-if="!$store.state.readonly"> 添加单品 </el-button> </el-form-item> </el-col> </el-row> </el-form> <el-table :data="tableData" :default-sort = "{prop: 'num', order: 'descending'}" style="width: 100%"> <el-table-column prop="id" label="id"> </el-table-column> <el-table-column prop="name" label="名称"> </el-table-column> <el-table-column prop="category_name" label="分类"> </el-table-column> <el-table-column prop="num" sortable label="库存"> </el-table-column> <el-table-column width="200" v-if="!$store.state.readonly" label="操作"> <template slot-scope="scope"> <el-button size="mini" plain type="warning" @click="edit(scope.row)"> 编辑 </el-button> <el-button size="mini" plain type="danger" @click="delthat(scope.row)" v-if="$store.state.deletePermission"> 删除 </el-button> </template> </el-table-column> </el-table> <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> <dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="initPage"/> </div> </template> <script> import {getSingleListApi,delSingleApi} from "../../service/api"; import page from '../framework/page' import dialogCom from './dialog' export default { name: "index", components:{ page, dialogCom }, data(){ return { total:0, nowPage:1, limit: 10, searchFrom: { name:'' }, tableData:[], dialogObj:{ type:0, show:false, id:'' }, } }, created(){ this.initPage() }, methods:{ initPage(){ let json = { limit: this.limit, page: this.nowPage } if (this.searchFrom.name) { json.name = this.searchFrom.name } if (this.searchFrom.category_name) { json.category_name = this.searchFrom.category_name } getSingleListApi(json).then(res=>{ this.tableData = res.list; this.total = res.total }) }, onPageChange(val){ this.nowPage = val this.initPage() }, onSizeChange(val){ this.nowPage = 1 this.limit = val this.initPage() }, changeShow() { }, delthat(data){ this.$confirm('此操作将删除该单品?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { delSingleApi(data.id).then(res=>{ this.$message({ type: 'success', message: '删除成功!' }); }); this.initPage() }); }, onAdd(){ this.dialogObj = { type: 0, show: true, } }, edit(data) { this.dialogObj = { type: 1, show: true, id: data.id } }, } } </script> <style scoped lang="less"> @import "../../util/public"; .single{ .main-block } </style>