152 lines
4.1 KiB
Vue
152 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue'
|
|
import { useI18n } from '@vben/locales'
|
|
import {
|
|
ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage,
|
|
} from 'element-plus'
|
|
import { ZqDialog } from '#/components/zq-dialog'
|
|
import { useWikiStore } from '#/store/wiki'
|
|
import type { WikiSpace } from '#/types/zq-smart-table/table'
|
|
import ImageSelector from '#/components/zq-form/image-selector/image-selector.vue'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
space: WikiSpace | null
|
|
}>()
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
updated: [spaceId: string]
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
const wikiStore = useWikiStore()
|
|
|
|
const visible = computed({
|
|
get: () => props.modelValue,
|
|
set: (v) => emit('update:modelValue', v),
|
|
})
|
|
|
|
const saving = ref(false)
|
|
const form = ref({
|
|
name: '',
|
|
description: '',
|
|
category: 'default',
|
|
visibility: 'private',
|
|
avatar: undefined as string | undefined,
|
|
})
|
|
|
|
const categories = computed(() => [
|
|
{ value: 'default', label: t('wiki.categoryDefault') },
|
|
{ value: 'tech', label: t('wiki.categoryTech') },
|
|
{ value: 'product', label: t('wiki.categoryProduct') },
|
|
{ value: 'design', label: t('wiki.categoryDesign') },
|
|
{ value: 'business', label: t('wiki.categoryBusiness') },
|
|
{ value: 'other', label: t('wiki.categoryOther') },
|
|
])
|
|
|
|
const visibilityOptions = computed(() => [
|
|
{ value: 'private', label: t('wiki.private') },
|
|
{ value: 'team', label: t('wiki.team') },
|
|
{ value: 'public', label: t('wiki.public') },
|
|
])
|
|
|
|
watch(() => props.modelValue, (v) => {
|
|
if (v && props.space) {
|
|
form.value = {
|
|
name: props.space.name,
|
|
description: props.space.description || '',
|
|
category: props.space.category || 'default',
|
|
visibility: props.space.visibility || 'private',
|
|
avatar: props.space.avatar || undefined,
|
|
}
|
|
}
|
|
})
|
|
|
|
async function handleSave() {
|
|
if (!props.space) return
|
|
const name = form.value.name.trim()
|
|
if (!name) {
|
|
ElMessage.warning(t('wiki.spaceNamePlaceholder'))
|
|
return
|
|
}
|
|
saving.value = true
|
|
try {
|
|
await wikiStore.updateSpace(props.space.id, {
|
|
name,
|
|
description: form.value.description.trim() || null,
|
|
category: form.value.category,
|
|
visibility: form.value.visibility,
|
|
avatar: form.value.avatar || null,
|
|
})
|
|
ElMessage.success(t('wiki.editSpaceSuccess'))
|
|
visible.value = false
|
|
emit('updated', props.space.id)
|
|
} catch {
|
|
ElMessage.error('Failed')
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ZqDialog
|
|
v-model="visible"
|
|
:title="t('wiki.editSpace')"
|
|
width="480px"
|
|
:confirm-loading="saving"
|
|
@confirm="handleSave"
|
|
>
|
|
<ElForm label-position="top">
|
|
<ElFormItem :label="t('wiki.avatar')">
|
|
<ImageSelector
|
|
v-model="form.avatar"
|
|
:size="72"
|
|
enable-crop
|
|
:crop-aspect-ratio="1"
|
|
crop-shape="circle"
|
|
source="wiki"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem :label="t('wiki.spaceName')" required>
|
|
<ElInput
|
|
v-model="form.name"
|
|
:placeholder="t('wiki.spaceNamePlaceholder')"
|
|
maxlength="200"
|
|
show-word-limit
|
|
@keyup.enter="handleSave"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem :label="t('wiki.spaceDescription')">
|
|
<ElInput
|
|
v-model="form.description"
|
|
type="textarea"
|
|
:rows="3"
|
|
:placeholder="t('wiki.spaceDescriptionPlaceholder')"
|
|
maxlength="500"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem :label="t('wiki.category')">
|
|
<ElSelect v-model="form.category" class="w-full">
|
|
<ElOption
|
|
v-for="c in categories"
|
|
:key="c.value"
|
|
:label="c.label"
|
|
:value="c.value"
|
|
/>
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
<ElFormItem :label="t('wiki.visibility')">
|
|
<ElSelect v-model="form.visibility" class="w-full">
|
|
<ElOption
|
|
v-for="v in visibilityOptions"
|
|
:key="v.value"
|
|
:label="v.label"
|
|
:value="v.value"
|
|
/>
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
</ZqDialog>
|
|
</template>
|