template div classdashboard-container div classcontainer div classtableBar label stylemargin-right: 10px套餐名称/label el-input v-modelinput placeholder请填写套餐名称 stylewidth: 14% clearable clearinit keyup.enter.nativeinitFun / label stylemargin-right: 10px; margin-left: 20px套餐分类/label el-select v-modelcategoryId stylewidth: 14% placeholder请选择 clearable clearinit el-option v-foritem in dishCategoryList :keyitem.value :labelitem.label :valueitem.value / /el-select label stylemargin-right: 10px; margin-left: 20px售卖状态/label el-select v-modeldishStatus stylewidth: 14% placeholder请选择 clearable clearinit el-option v-foritem in saleStatus :keyitem.value :labelitem.label :valueitem.value / /el-select el-button classnormal-btn continue clickinit(true) 查询 /el-button div classtableLab span classdelBut non clickdeleteHandle(批量)批量删除/span !-- span classblueBug non clickstatusHandle(1)批量启售/span span styleborder: none classdelBut non clickstatusHandle(0) 批量停售/span -- el-button typeprimary stylemargin-left: 15px clickaddSetMeal(add) 新建套餐 /el-button /div /div el-table v-iftableData.length :datatableData stripe classtableBox selection-changehandleSelectionChange el-table-column typeselection width25 / el-table-column propname label套餐名称 / el-table-column propimage label图片 template slot-scope{ row } el-image stylewidth: 80px; height: 40px; border: none; cursor: pointer :srcrow.image div sloterror classimage-slot img src./../../assets/noImg.png stylewidth: auto; height: 40px; border: none /div /el-image /template /el-table-column el-table-column propcategoryName label套餐分类 / el-table-column propprice label套餐价 template slot-scopescope span{{ ((scope.row.price ).toFixed(2) * 100) / 100 }}/span /template /el-table-column el-table-column label售卖状态 template slot-scopescope div classtableColumn-status :class{ stop-use: String(scope.row.status) 0 } {{ String(scope.row.status) 0 ? 停售 : 启售 }} /div /template /el-table-column el-table-column propupdateTime label最后操作时间 !-- template slot-scopescope {{ moment(scope.row.lastUpdateTime).format(YYYY-MM-DD h:m:s) }} /template -- /el-table-column el-table-column label操作 width250 aligncenter template slot-scopescope el-button typetext sizesmall classblueBug clickaddSetMeal(scope.row) 修改 /el-button el-button typetext sizesmall classdelBut clickdeleteHandle(单删, scope.row.id) 删除 /el-button el-button typetext sizesmall classblueBug non :class{ blueBug: scope.row.status 0, delBut: scope.row.status ! 0 } clickstatusHandle(scope.row) {{ scope.row.status 0 ? 启售 : 停售 }} /el-button /template /el-table-column /el-table Empty v-else :is-searchisSearch / el-pagination v-ifcounts 10 classpageList :page-sizes[10, 20, 30, 40] :page-sizepageSize layouttotal, sizes, prev, pager, next, jumper :totalcounts size-changehandleSizeChange current-changehandleCurrentChange / /div /div /template script langts import { Component, Vue } from vue-property-decorator import HeadLable from /components/HeadLable/index.vue import { getSetmealPage, editSetmeal, deleteSetmeal, setmealStatusByStatus, dishCategoryList } from /api/setMeal import InputAutoComplete from /components/InputAutoComplete/index.vue import Empty from /components/Empty/index.vue import { baseUrl } from /config.json Component({ name: package, components: { HeadLable, InputAutoComplete, Empty } }) export default class extends Vue { private input: any private counts: number 0 private page: number 1 private pageSize: number 10 private checkList: any[] [] private tableData: [] [] private dishCategoryList [] private categoryId private dishStatus private isSearch: boolean false private saleStatus: any [ { value: 0, label: 停售 }, { value: 1, label: 启售 } ] created() { this.init() this.getDishCategoryList() } initProp(val) { this.input val this.initFun() } initFun() { this.page 1 this.init() } private async init(isSearch?) { this.isSearch isSearch await getSetmealPage({ page: this.page, pageSize: this.pageSize, name: this.input || undefined, categoryId: this.categoryId || undefined, status: this.dishStatus }) .then(res { if (res res.data res.data.code 1) { this.tableData res.data.data.records this.counts Number(res.data.data.total) } else { this.$message.error(res.data.msg) } }) .catch(err { this.$message.error(请求出错了 err.message) }) } // 添加更改 private addSetMeal(st: any) { if (st add) { this.$router.push({ path: /setmeal/add }) } else { this.$router.push({ path: /setmeal/add, query: { id: st.id } }) } } // 删除 private deleteHandle(type: string, id: any) { if (type 批量 id null) { if (this.checkList.length 0) { return this.$message.error(请选择删除对象) } } this.$confirm(确定删除该套餐?, 确定删除, { confirmButtonText: 删除, cancelButtonText: 取消, type: warning }).then(() { deleteSetmeal(type 批量 ? this.checkList.join(,) : id) .then(res { if (res.data.code 1) { this.$message.success(删除成功) this.init() } else { this.$message.error(res.data.msg) } }) .catch(err { this.$message.error(请求出错了 err.message) }) }) } //状态更改 private statusHandle(row: any) { let params: any {} if (typeof row string) { if (this.checkList.length 0) { this.$message.error(批量操作请先勾选操作菜品) return false } params.ids this.checkList.join(,) params.status row } else { params.ids row.id params.status row.status ? 0 : 1 } this.$confirm(确认更改该套餐状态?, 提示, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning }).then(() { setmealStatusByStatus(params) .then(res { if (res.data.code 1) { this.$message.success(套餐状态已经更改成功) this.init() } else { this.$message.error(res.data.msg) } }) .catch(err { this.$message.error(请求出错了 err.message) }) }) } //获取套餐分类下拉数据 private getDishCategoryList() { dishCategoryList({ type: 2 }) .then(res { if (res res.data res.data.code 1) { this.dishCategoryList ( res.data res.data.data res.data.data ).map(item { return { value: item.id, label: item.name } }) } }) .catch(() {}) } // 全部操作 private handleSelectionChange(val: any) { let checkArr: string[] [] val.forEach((n: any) { checkArr.push(n.id) }) this.checkList checkArr } private handleSizeChange(val: any) { this.pageSize val this.init() } private handleCurrentChange(val: any) { this.page val this.init() } } /script