mirror of https://github.com/halo-dev/halo
feat: tag and category add save and continue button (#6223)
#### What type of PR is this? /kind feature #### What this PR does / why we need it: 文章分类和标签 Modal 添加 ”保存并继续添加” 按钮,便于连续添加。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/6127 #### Special notes for your reviewer:  #### Does this PR introduce a user-facing change? ```release-note 文章分类和标签页添加 "保存并继续添加" 按钮。 ```pull/6279/head v2.17.0
parent
b9c500dc8d
commit
c5bf1924a6
|
@ -21,6 +21,7 @@ import {
|
||||||
import { useQueryClient } from "@tanstack/vue-query";
|
import { useQueryClient } from "@tanstack/vue-query";
|
||||||
import { cloneDeep } from "lodash-es";
|
import { cloneDeep } from "lodash-es";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { submitForm, reset } from "@formkit/core";
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
@ -65,6 +66,7 @@ const formState = ref<Category>({
|
||||||
const selectedParentCategory = ref();
|
const selectedParentCategory = ref();
|
||||||
const saving = ref(false);
|
const saving = ref(false);
|
||||||
const modal = ref<InstanceType<typeof VModal> | null>(null);
|
const modal = ref<InstanceType<typeof VModal> | null>(null);
|
||||||
|
const keepAddingSubmit = ref(false);
|
||||||
|
|
||||||
const isUpdateMode = !!props.category;
|
const isUpdateMode = !!props.category;
|
||||||
|
|
||||||
|
@ -133,7 +135,11 @@ const handleSaveCategory = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (keepAddingSubmit.value) {
|
||||||
|
reset("category-form");
|
||||||
|
} else {
|
||||||
modal.value?.close();
|
modal.value?.close();
|
||||||
|
}
|
||||||
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["post-categories"] });
|
queryClient.invalidateQueries({ queryKey: ["post-categories"] });
|
||||||
|
|
||||||
|
@ -145,6 +151,11 @@ const handleSaveCategory = async () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (keepAdding = false) => {
|
||||||
|
keepAddingSubmit.value = keepAdding;
|
||||||
|
submitForm("category-form");
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.category) {
|
if (props.category) {
|
||||||
formState.value = cloneDeep(props.category);
|
formState.value = cloneDeep(props.category);
|
||||||
|
@ -340,18 +351,29 @@ const { handleGenerateSlug } = useSlugify(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
<div class="flex justify-between">
|
||||||
<VSpace>
|
<VSpace>
|
||||||
<SubmitButton
|
<SubmitButton
|
||||||
:loading="saving"
|
:loading="saving && !keepAddingSubmit"
|
||||||
|
:disabled="saving && keepAddingSubmit"
|
||||||
type="secondary"
|
type="secondary"
|
||||||
:text="$t('core.common.buttons.submit')"
|
:text="$t('core.common.buttons.submit')"
|
||||||
@submit="$formkit.submit('category-form')"
|
@submit="handleSubmit"
|
||||||
>
|
>
|
||||||
</SubmitButton>
|
</SubmitButton>
|
||||||
|
<VButton
|
||||||
|
v-if="!isUpdateMode"
|
||||||
|
:loading="saving && keepAddingSubmit"
|
||||||
|
:disabled="saving && !keepAddingSubmit"
|
||||||
|
@click="handleSubmit(true)"
|
||||||
|
>
|
||||||
|
{{ $t("core.common.buttons.save_and_continue") }}
|
||||||
|
</VButton>
|
||||||
|
</VSpace>
|
||||||
<VButton @click="modal?.close()">
|
<VButton @click="modal?.close()">
|
||||||
{{ $t("core.common.buttons.cancel_and_shortcut") }}
|
{{ $t("core.common.buttons.cancel_and_shortcut") }}
|
||||||
</VButton>
|
</VButton>
|
||||||
</VSpace>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</VModal>
|
</VModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -26,6 +26,7 @@ import useSlugify from "@console/composables/use-slugify";
|
||||||
import { cloneDeep } from "lodash-es";
|
import { cloneDeep } from "lodash-es";
|
||||||
import { onMounted } from "vue";
|
import { onMounted } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { submitForm, reset } from "@formkit/core";
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
@ -63,6 +64,8 @@ const modal = ref<InstanceType<typeof VModal> | null>(null);
|
||||||
|
|
||||||
const saving = ref(false);
|
const saving = ref(false);
|
||||||
|
|
||||||
|
const keepAddingSubmit = ref(false);
|
||||||
|
|
||||||
const isUpdateMode = computed(() => !!props.tag);
|
const isUpdateMode = computed(() => !!props.tag);
|
||||||
|
|
||||||
const modalTitle = computed(() => {
|
const modalTitle = computed(() => {
|
||||||
|
@ -101,7 +104,11 @@ const handleSaveTag = async () => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (keepAddingSubmit.value) {
|
||||||
|
reset("tag-form");
|
||||||
|
} else {
|
||||||
modal.value?.close();
|
modal.value?.close();
|
||||||
|
}
|
||||||
|
|
||||||
Toast.success(t("core.common.toast.save_success"));
|
Toast.success(t("core.common.toast.save_success"));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
@ -111,6 +118,11 @@ const handleSaveTag = async () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (keepAdding = false) => {
|
||||||
|
keepAddingSubmit.value = keepAdding;
|
||||||
|
submitForm("tag-form");
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setFocus("displayNameInput");
|
setFocus("displayNameInput");
|
||||||
});
|
});
|
||||||
|
@ -250,18 +262,29 @@ const { handleGenerateSlug } = useSlugify(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
<div class="flex justify-between">
|
||||||
<VSpace>
|
<VSpace>
|
||||||
<SubmitButton
|
<SubmitButton
|
||||||
:loading="saving"
|
:loading="saving && !keepAddingSubmit"
|
||||||
|
:disabled="saving && keepAddingSubmit"
|
||||||
type="secondary"
|
type="secondary"
|
||||||
:text="$t('core.common.buttons.submit')"
|
:text="$t('core.common.buttons.submit')"
|
||||||
@submit="$formkit.submit('tag-form')"
|
@submit="handleSubmit"
|
||||||
>
|
>
|
||||||
</SubmitButton>
|
</SubmitButton>
|
||||||
|
<VButton
|
||||||
|
v-if="!isUpdateMode"
|
||||||
|
:loading="saving && keepAddingSubmit"
|
||||||
|
:disabled="saving && !keepAddingSubmit"
|
||||||
|
@click="handleSubmit(true)"
|
||||||
|
>
|
||||||
|
{{ $t("core.common.buttons.save_and_continue") }}
|
||||||
|
</VButton>
|
||||||
|
</VSpace>
|
||||||
<VButton @click="modal?.close()">
|
<VButton @click="modal?.close()">
|
||||||
{{ $t("core.common.buttons.cancel_and_shortcut") }}
|
{{ $t("core.common.buttons.cancel_and_shortcut") }}
|
||||||
</VButton>
|
</VButton>
|
||||||
</VSpace>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</VModal>
|
</VModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1729,6 +1729,7 @@ core:
|
||||||
buttons:
|
buttons:
|
||||||
save: Save
|
save: Save
|
||||||
close: Close
|
close: Close
|
||||||
|
save_and_continue: Save and keep adding
|
||||||
close_and_shortcut: Close (Esc)
|
close_and_shortcut: Close (Esc)
|
||||||
delete: Delete
|
delete: Delete
|
||||||
setting: Setting
|
setting: Setting
|
||||||
|
|
|
@ -1308,6 +1308,7 @@ core:
|
||||||
buttons:
|
buttons:
|
||||||
save: Guardar
|
save: Guardar
|
||||||
close: Cerrar
|
close: Cerrar
|
||||||
|
save_and_continue: Guardar y seguir añadiendo
|
||||||
close_and_shortcut: Cerrar (Esc)
|
close_and_shortcut: Cerrar (Esc)
|
||||||
delete: Borrar
|
delete: Borrar
|
||||||
setting: Configuración
|
setting: Configuración
|
||||||
|
|
|
@ -1644,6 +1644,7 @@ core:
|
||||||
buttons:
|
buttons:
|
||||||
save: 保存
|
save: 保存
|
||||||
close: 关闭
|
close: 关闭
|
||||||
|
save_and_continue: 保存并继续添加
|
||||||
close_and_shortcut: 关闭(Esc)
|
close_and_shortcut: 关闭(Esc)
|
||||||
delete: 删除
|
delete: 删除
|
||||||
setting: 设置
|
setting: 设置
|
||||||
|
|
|
@ -1601,6 +1601,7 @@ core:
|
||||||
buttons:
|
buttons:
|
||||||
save: 保存
|
save: 保存
|
||||||
close: 關閉
|
close: 關閉
|
||||||
|
save_and_continue: 保存並繼續添加
|
||||||
close_and_shortcut: 關閉(Esc)
|
close_and_shortcut: 關閉(Esc)
|
||||||
delete: 刪除
|
delete: 刪除
|
||||||
setting: 設置
|
setting: 設置
|
||||||
|
|
Loading…
Reference in New Issue