88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { reactive, watch } from "vue";
|
||
|
|
import { useI18n } from "vue-i18n";
|
||
|
|
import type { CreateKolPackageRequest } from "@geo/shared-types";
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
open: boolean;
|
||
|
|
initialValue?: Partial<CreateKolPackageRequest>;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: "update:open", value: boolean): void;
|
||
|
|
(e: "submit", value: CreateKolPackageRequest): void;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const formState = reactive<CreateKolPackageRequest>({
|
||
|
|
name: "",
|
||
|
|
description: "",
|
||
|
|
industry: "",
|
||
|
|
tags: [],
|
||
|
|
price_note: "",
|
||
|
|
cover_url: "",
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.open,
|
||
|
|
(isOpen) => {
|
||
|
|
if (isOpen) {
|
||
|
|
Object.assign(formState, {
|
||
|
|
name: props.initialValue?.name || "",
|
||
|
|
description: props.initialValue?.description || "",
|
||
|
|
industry: props.initialValue?.industry || "",
|
||
|
|
tags: props.initialValue?.tags || [],
|
||
|
|
price_note: props.initialValue?.price_note || "",
|
||
|
|
cover_url: props.initialValue?.cover_url || "",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
function handleOk() {
|
||
|
|
if (!formState.name.trim()) return;
|
||
|
|
emit("submit", { ...formState });
|
||
|
|
emit("update:open", false);
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleCancel() {
|
||
|
|
emit("update:open", false);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-modal
|
||
|
|
:open="open"
|
||
|
|
:title="initialValue ? t('kol.manage.editPackage') : t('kol.manage.createPackage')"
|
||
|
|
@ok="handleOk"
|
||
|
|
@cancel="handleCancel"
|
||
|
|
>
|
||
|
|
<a-form layout="vertical">
|
||
|
|
<a-form-item :label="t('common.title')" required>
|
||
|
|
<a-input v-model:value="formState.name" :placeholder="t('common.inputPlease')" />
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<a-form-item :label="t('common.description')">
|
||
|
|
<a-textarea v-model:value="formState.description" :rows="3" />
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<a-form-item :label="t('kol.marketplace.filter.industry')">
|
||
|
|
<a-input v-model:value="formState.industry" />
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<a-form-item label="Tags">
|
||
|
|
<a-select v-model:value="formState.tags" mode="tags" style="width: 100%" placeholder="Add tags" />
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<a-form-item label="Price Note">
|
||
|
|
<a-input v-model:value="formState.price_note" />
|
||
|
|
</a-form-item>
|
||
|
|
|
||
|
|
<a-form-item label="Cover URL">
|
||
|
|
<a-input v-model:value="formState.cover_url" />
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
</a-modal>
|
||
|
|
</template>
|