【食堂菜单】增加菜单：

①增加模板导出
②实现批量导入
③实现批量删除

src/api/canteen/basic.js

@@ -9,11 +9,11 @@ export function addMenu(data) {
   })
 }
 // 餐厅菜单删除
-export function delMenu(ids) {
+export function delMenu(data) {
   return request({
-    url: `/dh/menu/del/${ids}`,
-    method: 'DELETE',
-    // data: data
+    url: `/dh/menu/del`,
+    method: 'post',
+    data: data
   })
 }
 // 餐厅菜单列表
@@ -55,4 +55,13 @@ export function dakaPeople(params) {
     method: 'get',
     params: params
   })
+}
+
+// 导入
+export function IMPORT(data) {
+  return request({
+    url: `/dh/menu/importData`,
+    method: 'post',
+    data,
+  })
 }

src/views/canteen/addMenu.vue

@@ -1,77 +1,105 @@
 <template>
   <div id="canteenMenu">
     <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-select style="width: 200px;" v-model="menu.timeFrame" placeholder="请选择">
+        <el-select
+          style="width: 200px"
+          v-model="menu.timeFrame"
+          placeholder="请选择"
+        >
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
-            :value="item.value">
+            :value="item.value"
+          >
           </el-option>
         </el-select>
       </el-form-item>
       <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 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 label="日期" prop="billDate">
         <el-date-picker
-         style="width: 200px;"
+          style="width: 200px"
           v-model="menu.billDate"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="选择日期">
+          placeholder="选择日期"
+        >
         </el-date-picker>
       </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>
 
     <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>
     <el-table
       :data="tableData"
       @selection-change="handleSelectionChange"
       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
-        prop="name"
-        label="菜名"
-        align="center"
-        width="180">
+      <el-table-column prop="name" label="菜名" align="center" width="180">
       </el-table-column>
-      <el-table-column
-        prop="price"
-        align="center"
-        label="价格">
+      <el-table-column prop="price" align="center" label="价格">
         <template slot-scope="scope">
-            <span>￥{{ scope.row.price }}</span>
-          </template>
+          <span>￥{{ scope.row.price }}</span>
+        </template>
       </el-table-column>
-      <el-table-column
-        prop="timeFrame"
-        align="center"
-        label="时段">
+      <el-table-column prop="timeFrame" align="center" label="时段">
         <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>
       </el-table-column>
     </el-table>
@@ -79,78 +107,86 @@
 </template>
 
 <script>
-import {addMenu, menuList, delMenu} from '@/api/canteen/basic.js'
+import { addMenu, menuList, delMenu, IMPORT } from "@/api/canteen/basic.js";
 export default {
+  components: {
+    BatchImport: () => import("@/components/BatchImport/index.vue"),
+  },
   data() {
     return {
+      size: "mini",
       menu: {
-        timeFrame: '',
-        name: '',
-        price: '',
-        billDate: ''
+        timeFrame: "",
+        name: "",
+        price: "",
+        billDate: "",
       },
       options: [
-        {value: '1', label: '早餐'},
-        {value: '2', label: '午餐'},
-        {value: '3', label: '晚餐'}
+        { value: "1", label: "早餐" },
+        { value: "2", label: "午餐" },
+        { value: "3", label: "晚餐" },
       ],
       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: [],
-      nowDate: '',
-      ids: ''
-    }
+      nowDate: "",
+      // ids: "",
+      selectData: [],
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     submit() {
-      this.$refs['menuForm'].validate((valid) => {
+      this.$refs["menuForm"].validate((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.getList()
-              this.reset('menuForm')
+              this.getList();
+              this.reset("menuForm");
             }
-          })
-       }
-      })
+          });
+        }
+      });
     },
     reset(formName) {
       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() {
-      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) {
-      console.log('选中数据', selection)
-      let id = []
-      id = selection.map(item => item.id)
-      console.log('id',id.join())
-      this.ids = id.join()
+      this.selectData = selection;
     },
     getNow() {
       var date = new Date();
@@ -164,15 +200,44 @@ export default {
         day = "0" + 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>
 
 <style lang="scss" scoped>
- #canteenMenu {
+#canteenMenu {
   padding: 10px;
- }
-</style>
+}
+</style>