drp-ui/src/views/canteen/menuEdit/index.vue

<!-- 编辑菜单 -->
<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>