✨ feat(食堂菜单): drp：食堂菜单-增加编辑功能

食堂菜单-增加编辑功能

20240226166

src/api/canteen/basic.js

@@ -64,4 +64,20 @@ export function IMPORT(data) {
     method: 'post',
     data,
   })
+}
+
+// 编辑 
+export function MENUEDIT(data) {
+  return request({
+    url: `/dh/menu`,
+    method: "PUT",
+    data,
+  })
+}
+// 详情 
+export function MENUDETAIL(id) {
+  return request({
+    url: `/dh/menu/${id}`,
+    method: "get",
+  })
 }

src/views/canteen/addMenu.vue

@@ -58,6 +58,12 @@
 
     <span>菜单列表</span>
     <div style="text-align: right; margin-bottom: 12px">
+      <edit-btn
+        :size="size"
+        type="primary"
+        :data="selectData"
+        @close="getList"
+      ></edit-btn>
       <el-button
         :disabled="!selectData.length"
         :size="size"
@@ -111,6 +117,7 @@ import { addMenu, menuList, delMenu, IMPORT } from "@/api/canteen/basic.js";
 export default {
   components: {
     BatchImport: () => import("@/components/BatchImport/index.vue"),
+    EditBtn: () => import("./menuEdit/index.vue"),
   },
   data() {
     return {

src/views/canteen/menuEdit/columns.js

@@ -0,0 +1,37 @@
+export default function useColumns() {
+  const FormColumns = [
+    {
+      item: { key: "timeFrame", title: "时段", required: true, },
+      attr: {
+        is: "el-select",
+        dictName: "canteen_mealtime",
+        placeholder: "请选择",
+      },
+    },
+    {
+      item: { key: "name", title: "菜名", required: true, },
+      attr: {
+        is: "el-input",
+        placeholder: "请输入菜名",
+      },
+    },
+    {
+      item: { key: "price", title: "价格", required: true, },
+      attr: {
+        is: "el-input-number",
+        min: 0,
+        placeholder: "请输入价格",
+      },
+    },
+    {
+      item: { key: "billDate", title: "日期", required: true, },
+      attr: {
+        is: "el-date-picker",
+        type: "date",
+        valueFormat: "yyyy-MM-dd",
+        placeholder: "选择日期",
+      },
+    },
+  ]
+  return { FormColumns }
+};

src/views/canteen/menuEdit/index.vue

@@ -0,0 +1,132 @@
+<!-- 编辑菜单 -->
+<script>
+import useColumns from "./columns";
+import { MENUEDIT, MENUDETAIL } from "@/api/canteen/basic.js";
+export default {
+  name: "MenuEdit",
+  dicts: ["canteen_mealtime"],
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    ElSuperForm: () => import("@/components/super-form/index.vue"),
+  },
+  data() {
+    const { FormColumns } = useColumns();
+    const rules = this.$init.rules(FormColumns);
+    const params = this.$init.params(FormColumns);
+    return {
+      rules,
+      params,
+      width: "50%",
+      title: "编 辑",
+      visible: false,
+      FormColumns,
+    };
+  },
+  computed: {
+    disabled: {
+      get() {
+        let { data } = this.$props;
+        if (data.length === 1) {
+          return false;
+        }
+        return true;
+      },
+      set() {},
+    },
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    //
+    async beforeOpen() {
+      try {
+        this.loading = true;
+        let { id } = this.$props.data[0];
+        let { code, data } = await MENUDETAIL(id);
+        if (code === 200) {
+          this.params = data;
+        }
+      } catch (error) {
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 提交
+    useSubmit(form) {
+      this.$refs[form].validate(async (valid) => {
+        if (valid) {
+          try {
+            this.$modal.loading("处理中...");
+            let { code, msg } = await MENUEDIT({ ...this.params });
+            if (code === 200) {
+              this.$notify.success(msg);
+              this.cancel();
+            }
+          } catch (error) {
+          } finally {
+            this.$modal.closeLoading();
+          }
+        }
+      });
+    },
+    cancel() {
+      this.params = this.$init.params(this.FormColumns);
+      this.visible = false;
+      this.$emit("close");
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-button
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="$attrs.size"
+    @click="open"
+    :disabled="disabled"
+  >
+    {{ title }}
+    <el-dialog
+      :width="width"
+      :visible.sync="visible"
+      append-to-body
+      :show-close="false"
+      @open="beforeOpen"
+    >
+      <template #title>
+        <el-row type="flex" justify="space-between">
+          <el-col>{{ title }}</el-col>
+          <el-col style="text-align: right">
+            <el-button
+              :size="$attrs.size"
+              type="primary"
+              @click="useSubmit('superForm')"
+              >保存</el-button
+            >
+            <el-button :size="$attrs.size" @click="cancel">取消</el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-super-form
+        v-model="params"
+        :dict="dict"
+        :rules="rules"
+        :size="$attrs.size"
+        :columns="FormColumns"
+        ref="superForm"
+        label-width="auto"
+        label-position="right"
+        style="padding: 20px"
+      >
+      </el-super-form>
+    </el-dialog>
+  </el-button>
+</template>