accout-vue3-ui/src/views/system/setBtn/components/edit-dialog.vue

<script setup lang="ts">
import { FormRules, ElForm } from "element-plus";
import { computed, reactive, ref } from "vue";
import btnList from "/@/utils/btnList";
import { httpUpdate, httpAdd } from "/@/api/system/buttonOperator";
import { useNav } from "/@/layout/hooks/nav";
import { IMenuTree } from "../types";
import { responseHandle } from "/@/utils/responseHandle";

enum FROM_TYPE {
  create = "create",
  edit = "edit"
}

const showModel = ref(false);
const currentMenuId = ref("");
const TYPE = ref<FROM_TYPE>(FROM_TYPE.create);
const formRef = ref<InstanceType<typeof ElForm>>(null);
const currentNode = ref<IMenuTree | null>(null);
const loading = ref(false);
const { logout } = useNav();

const emit = defineEmits(["reload"]);

const formModel = ref({
  action_code: "",
  status: ""
});

const action_name = computed(() => {
  return btnList.filter(b => b.code === formModel.value.action_code)[0].name;
});

const rules = reactive<FormRules>({
  action_code: [{ required: true, message: "请选择按钮名称", trigger: "blur" }],
  status: [{ required: true, message: "请选择按钮状态", trigger: "blur" }]
});

function show(node: any, isCreate = false) {
  showModel.value = true;
  currentNode.value = node;
  Object.keys(formModel.value).forEach(key => {
    formModel.value[key] = isCreate ? "" : node[key];
  });

  TYPE.value = isCreate ? FROM_TYPE.create : FROM_TYPE.edit;
}

function handleUpdate() {
  const data = {
    menuid: currentMenuId.value,
    id: currentNode.value.id,
    action_name: action_name.value,
    ...formModel.value
  };

  return {
    data,
    api: httpUpdate
  };
}

function handleCreate() {
  const data = {
    menuid: currentMenuId.value,
    action_name: action_name.value,
    ...formModel.value
  };

  return {
    data,
    api: httpAdd
  };
}

function handleSave() {
  formRef.value.validate(async vaild => {
    if (vaild) {
      const handler =
        TYPE.value === FROM_TYPE.create ? handleCreate : handleUpdate;

      loading.value = true;
      const { api, data } = handler();

      const { message, code } = await api(data);

      responseHandle({
        code,
        message,
        logout,
        handler: () => {
          emit("reload");
        }
      });

      showModel.value = false;
      loading.value = false;
    }
  });
}

defineExpose({
  show,
  changeCurrentMenuId: (id: string) => (currentMenuId.value = id)
});
</script>

<template>
  <div>
    <el-dialog v-model="showModel">
      <el-form :model="formModel" :rules="rules" ref="formRef">
        <el-form-item label="按钮标识" prop="action_code">
          <el-select v-model="formModel.action_code">
            <el-option
              v-for="(btn, index) in btnList"
              :label="btn.name"
              :value="btn.code"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="按钮状态" prop="status">
          <el-radio-group v-model="formModel.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <div class="flex justify-end">
          <el-button :loading="loading" type="primary" @click="handleSave"
            >保存</el-button
          >
          <el-button @click="showModel = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>