|
@@ -1,77 +1,105 @@
|
|
<template>
|
|
<template>
|
|
<div id="canteenMenu">
|
|
<div id="canteenMenu">
|
|
<span>菜单新增</span>
|
|
<span>菜单新增</span>
|
|
- <el-form :model="menu" :rules="menuRules" ref="menuForm" label-width="100px" class="demo-ruleForm">
|
|
|
|
|
|
+ <el-form
|
|
|
|
+ :size="size"
|
|
|
|
+ :model="menu"
|
|
|
|
+ :rules="menuRules"
|
|
|
|
+ :inline="true"
|
|
|
|
+ ref="menuForm"
|
|
|
|
+ label-width="100px"
|
|
|
|
+ class="demo-ruleForm"
|
|
|
|
+ >
|
|
<el-form-item label="时段" prop="timeFrame">
|
|
<el-form-item label="时段" prop="timeFrame">
|
|
- <el-select style="width: 200px;" v-model="menu.timeFrame" placeholder="请选择">
|
|
|
|
|
|
+ <el-select
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ v-model="menu.timeFrame"
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ >
|
|
<el-option
|
|
<el-option
|
|
v-for="item in options"
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:label="item.label"
|
|
- :value="item.value">
|
|
|
|
|
|
+ :value="item.value"
|
|
|
|
+ >
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="菜名" prop="name">
|
|
<el-form-item label="菜名" prop="name">
|
|
- <el-input style="width: 200px;" v-model="menu.name" placeholder="请输入菜名"></el-input>
|
|
|
|
|
|
+ <el-input
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ v-model="menu.name"
|
|
|
|
+ placeholder="请输入菜名"
|
|
|
|
+ ></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="价格" prop="price">
|
|
<el-form-item label="价格" prop="price">
|
|
- <el-input-number :min="0" style="width: 200px;" v-model="menu.price" placeholder="请输入价格"></el-input-number>
|
|
|
|
|
|
+ <el-input-number
|
|
|
|
+ :min="0"
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ v-model="menu.price"
|
|
|
|
+ placeholder="请输入价格"
|
|
|
|
+ ></el-input-number>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="日期" prop="billDate">
|
|
<el-form-item label="日期" prop="billDate">
|
|
<el-date-picker
|
|
<el-date-picker
|
|
- style="width: 200px;"
|
|
|
|
|
|
+ style="width: 200px"
|
|
v-model="menu.billDate"
|
|
v-model="menu.billDate"
|
|
type="date"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
- placeholder="选择日期">
|
|
|
|
|
|
+ placeholder="选择日期"
|
|
|
|
+ >
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
- <el-button size="small" type="primary" @click="submit">提交</el-button>
|
|
|
|
- <el-button size="small" @click="reset('menuForm')">重置</el-button>
|
|
|
|
|
|
+ <el-button type="primary" @click="submit">提交</el-button>
|
|
|
|
+ <el-button @click="reset('menuForm')">重置</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
<span>菜单列表</span>
|
|
<span>菜单列表</span>
|
|
- <div style="text-align: right;">
|
|
|
|
- <el-button size="small" type="primary" @click="delitems">批量删除</el-button>
|
|
|
|
|
|
+ <div style="text-align: right; margin-bottom: 12px">
|
|
|
|
+ <el-button
|
|
|
|
+ :disabled="!selectData.length"
|
|
|
|
+ :size="size"
|
|
|
|
+ type="primary"
|
|
|
|
+ @click="delitems"
|
|
|
|
+ >批量删除</el-button
|
|
|
|
+ >
|
|
|
|
+ <batch-import
|
|
|
|
+ ref="batchImport"
|
|
|
|
+ @import="handelImport"
|
|
|
|
+ @temDownload="handleTemDownload"
|
|
|
|
+ :fileSize="2"
|
|
|
|
+ ></batch-import>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
<el-table
|
|
:data="tableData"
|
|
:data="tableData"
|
|
@selection-change="handleSelectionChange"
|
|
@selection-change="handleSelectionChange"
|
|
max-height="500"
|
|
max-height="500"
|
|
- style="width: 100%">
|
|
|
|
- <el-table-column
|
|
|
|
- type="selection"
|
|
|
|
- width="55">
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column
|
|
|
|
- prop="billDate"
|
|
|
|
- label="日期"
|
|
|
|
- align="center"
|
|
|
|
- width="180">
|
|
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column type="selection" width="55"> </el-table-column>
|
|
|
|
+ <el-table-column prop="billDate" label="日期" align="center" width="180">
|
|
|
|
+ <template slot-scope="scope">{{
|
|
|
|
+ new Date(scope.row.billDate).Format("yyyy-MM-dd")
|
|
|
|
+ }}</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column
|
|
|
|
- prop="name"
|
|
|
|
- label="菜名"
|
|
|
|
- align="center"
|
|
|
|
- width="180">
|
|
|
|
|
|
+ <el-table-column prop="name" label="菜名" align="center" width="180">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column
|
|
|
|
- prop="price"
|
|
|
|
- align="center"
|
|
|
|
- label="价格">
|
|
|
|
|
|
+ <el-table-column prop="price" align="center" label="价格">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <span>¥{{ scope.row.price }}</span>
|
|
|
|
- </template>
|
|
|
|
|
|
+ <span>¥{{ scope.row.price }}</span>
|
|
|
|
+ </template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column
|
|
|
|
- prop="timeFrame"
|
|
|
|
- align="center"
|
|
|
|
- label="时段">
|
|
|
|
|
|
+ <el-table-column prop="timeFrame" align="center" label="时段">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <span>{{ scope.row.timeFrame == '1' ? '早餐' : scope.row.timeFrame == '2' ? '午餐' : '晚餐' }}</span>
|
|
|
|
|
|
+ <span>{{
|
|
|
|
+ scope.row.timeFrame == "1"
|
|
|
|
+ ? "早餐"
|
|
|
|
+ : scope.row.timeFrame == "2"
|
|
|
|
+ ? "午餐"
|
|
|
|
+ : "晚餐"
|
|
|
|
+ }}</span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
@@ -79,78 +107,86 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import {addMenu, menuList, delMenu} from '@/api/canteen/basic.js'
|
|
|
|
|
|
+import { addMenu, menuList, delMenu, IMPORT } from "@/api/canteen/basic.js";
|
|
export default {
|
|
export default {
|
|
|
|
+ components: {
|
|
|
|
+ BatchImport: () => import("@/components/BatchImport/index.vue"),
|
|
|
|
+ },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ size: "mini",
|
|
menu: {
|
|
menu: {
|
|
- timeFrame: '',
|
|
|
|
- name: '',
|
|
|
|
- price: '',
|
|
|
|
- billDate: ''
|
|
|
|
|
|
+ timeFrame: "",
|
|
|
|
+ name: "",
|
|
|
|
+ price: "",
|
|
|
|
+ billDate: "",
|
|
},
|
|
},
|
|
options: [
|
|
options: [
|
|
- {value: '1', label: '早餐'},
|
|
|
|
- {value: '2', label: '午餐'},
|
|
|
|
- {value: '3', label: '晚餐'}
|
|
|
|
|
|
+ { value: "1", label: "早餐" },
|
|
|
|
+ { value: "2", label: "午餐" },
|
|
|
|
+ { value: "3", label: "晚餐" },
|
|
],
|
|
],
|
|
menuRules: {
|
|
menuRules: {
|
|
- timeFrame: [{ required: true, message: '请选择时段', trigger: 'change' }],
|
|
|
|
- name: [{ required: true, message: '请输入菜名', trigger: 'blur' }],
|
|
|
|
- price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
|
|
|
- billDate: [{ required: true, message: '请选择时段', trigger: 'change' }],
|
|
|
|
|
|
+ timeFrame: [
|
|
|
|
+ { required: true, message: "请选择时段", trigger: "change" },
|
|
|
|
+ ],
|
|
|
|
+ name: [{ required: true, message: "请输入菜名", trigger: "blur" }],
|
|
|
|
+ price: [{ required: true, message: "请输入价格", trigger: "blur" }],
|
|
|
|
+ billDate: [
|
|
|
|
+ { required: true, message: "请选择时段", trigger: "change" },
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
tableData: [],
|
|
tableData: [],
|
|
- nowDate: '',
|
|
|
|
- ids: ''
|
|
|
|
- }
|
|
|
|
|
|
+ nowDate: "",
|
|
|
|
+ // ids: "",
|
|
|
|
+ selectData: [],
|
|
|
|
+ };
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.getList()
|
|
|
|
|
|
+ this.getList();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
submit() {
|
|
submit() {
|
|
- this.$refs['menuForm'].validate((valid) => {
|
|
|
|
|
|
+ this.$refs["menuForm"].validate((valid) => {
|
|
if (valid) {
|
|
if (valid) {
|
|
- addMenu(this.menu).then(res => {
|
|
|
|
- if (res.code === 200 ) {
|
|
|
|
|
|
+ addMenu(this.menu).then((res) => {
|
|
|
|
+ if (res.code === 200) {
|
|
this.$modal.msgSuccess("操作成功");
|
|
this.$modal.msgSuccess("操作成功");
|
|
- this.getList()
|
|
|
|
- this.reset('menuForm')
|
|
|
|
|
|
+ this.getList();
|
|
|
|
+ this.reset("menuForm");
|
|
}
|
|
}
|
|
- })
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
},
|
|
},
|
|
reset(formName) {
|
|
reset(formName) {
|
|
this.$refs[formName].resetFields();
|
|
this.$refs[formName].resetFields();
|
|
},
|
|
},
|
|
- delitems() {
|
|
|
|
- if (this.ids) {
|
|
|
|
- delMenu(this.ids).then(res => {
|
|
|
|
- if (res.code === 200) {
|
|
|
|
- this.$modal.msgSuccess("操作成功");
|
|
|
|
- this.getList()
|
|
|
|
- }
|
|
|
|
|
|
+ async delitems() {
|
|
|
|
+ this.$modal
|
|
|
|
+ .confirm("是否确认删除?")
|
|
|
|
+ .then(async () => {
|
|
|
|
+ try {
|
|
|
|
+ let ids = this.selectData.map((item) => item.id);
|
|
|
|
+ let { code, msg } = await delMenu(ids);
|
|
|
|
+ if (code === 200) {
|
|
|
|
+ this.$modal.msgSuccess(msg);
|
|
|
|
+ this.getList();
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {}
|
|
})
|
|
})
|
|
- } else {
|
|
|
|
- this.$modal.alertWarning("请选择至少一条数据");
|
|
|
|
- }
|
|
|
|
|
|
+ .catch(() => {});
|
|
},
|
|
},
|
|
getList() {
|
|
getList() {
|
|
- this.getNow()
|
|
|
|
- menuList({pageSize: 100, billDate: this.nowDate}).then(res => {
|
|
|
|
- if (res.code === 200 ) {
|
|
|
|
- this.tableData = res.rows
|
|
|
|
|
|
+ this.getNow();
|
|
|
|
+ menuList({ pageSize: 100, billDate: this.nowDate }).then((res) => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ this.tableData = res.rows;
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
},
|
|
},
|
|
handleSelectionChange(selection) {
|
|
handleSelectionChange(selection) {
|
|
- console.log('选中数据', selection)
|
|
|
|
- let id = []
|
|
|
|
- id = selection.map(item => item.id)
|
|
|
|
- console.log('id',id.join())
|
|
|
|
- this.ids = id.join()
|
|
|
|
|
|
+ this.selectData = selection;
|
|
},
|
|
},
|
|
getNow() {
|
|
getNow() {
|
|
var date = new Date();
|
|
var date = new Date();
|
|
@@ -164,15 +200,44 @@ export default {
|
|
day = "0" + day;
|
|
day = "0" + day;
|
|
}
|
|
}
|
|
const nowDate = year + "-" + month + "-" + day;
|
|
const nowDate = year + "-" + month + "-" + day;
|
|
- this.nowDate = nowDate
|
|
|
|
- this.menu.billDate = nowDate
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ this.nowDate = nowDate;
|
|
|
|
+ this.menu.billDate = nowDate;
|
|
|
|
+ },
|
|
|
|
+ // 导入
|
|
|
|
+ async handelImport(fileList) {
|
|
|
|
+ try {
|
|
|
|
+ let formData = new FormData();
|
|
|
|
+
|
|
|
|
+ formData.append("file", fileList[0].raw);
|
|
|
|
+
|
|
|
|
+ this.$modal.loading("正在上传文件,请稍候...");
|
|
|
|
+
|
|
|
|
+ let { code, data } = await IMPORT(formData);
|
|
|
|
+ if (code === 200) {
|
|
|
|
+ // this.tableData = [...this.tableData, ...data];
|
|
|
|
+ this.getList();
|
|
|
|
+ let { setVisible } = this.$refs.batchImport;
|
|
|
|
+ setVisible(false);
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ } finally {
|
|
|
|
+ this.$modal.closeLoading();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 模板下载
|
|
|
|
+ handleTemDownload() {
|
|
|
|
+ this.download(
|
|
|
|
+ "/dh/menu/templateDownload",
|
|
|
|
+ {},
|
|
|
|
+ `菜单模板${new Date().getTime()}.xlsx`
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
- #canteenMenu {
|
|
|
|
|
|
+#canteenMenu {
|
|
padding: 10px;
|
|
padding: 10px;
|
|
- }
|
|
|
|
-</style>
|
|
|
|
|
|
+}
|
|
|
|
+</style>
|