370 lines
10 KiB
Vue
370 lines
10 KiB
Vue
<script lang="ts" setup>
|
|
import type { FormSubmitEvent } from '#ui/types'
|
|
import { number, object, string, type InferType } from 'yup'
|
|
|
|
const loginState = useLoginState()
|
|
const toast = useToast()
|
|
|
|
const isCreateSystemTitlesSlideActive = ref(false)
|
|
const isUserTitlesRequestModalActive = ref(false)
|
|
|
|
const systemPagination = reactive({
|
|
page: 1,
|
|
pageSize: 15,
|
|
})
|
|
|
|
const userPagination = reactive({
|
|
page: 1,
|
|
pageSize: 15,
|
|
})
|
|
|
|
const { data: systemTitlesTemplate, status: systemTitlesTemplateStatus } =
|
|
useAsyncData(
|
|
'systemTitlesTemplate',
|
|
() =>
|
|
useFetchWrapped<
|
|
PagedDataRequest & AuthedRequest,
|
|
BaseResponse<PagedData<TitlesTemplate>>
|
|
>('App.Digital_Titles.GetList', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
page: systemPagination.page,
|
|
perpage: systemPagination.pageSize,
|
|
}),
|
|
{
|
|
watch: [systemPagination],
|
|
}
|
|
)
|
|
|
|
const {
|
|
data: userTitlesTemplate,
|
|
status: userTitlesTemplateStatus,
|
|
refresh: refreshUserTitlesTemplate,
|
|
} = useAsyncData(
|
|
'userTitlesTemplate',
|
|
() =>
|
|
useFetchWrapped<
|
|
PagedDataRequest & AuthedRequest & { process_status: 0 | 1 },
|
|
BaseResponse<PagedData<TitlesTemplate>>
|
|
>('App.User_UserTitles.GetList', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
to_user_id: loginState.user.id,
|
|
page: userPagination.page,
|
|
perpage: userPagination.pageSize,
|
|
process_status: 1,
|
|
}),
|
|
{
|
|
watch: [userPagination],
|
|
}
|
|
)
|
|
|
|
const { data: userTitlesRequests, refresh: refreshUserTitlesRequests } =
|
|
useAsyncData('userTitlesTemplateRequests', () =>
|
|
useFetchWrapped<
|
|
PagedDataRequest & AuthedRequest & { process_status: 0 | 1 },
|
|
BaseResponse<PagedData<TitlesTemplate>>
|
|
>('App.User_UserTitles.GetList', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
to_user_id: loginState.user.id,
|
|
process_status: 0,
|
|
})
|
|
)
|
|
|
|
const userTitlesSchema = object({
|
|
title_id: number().required().moreThan(0, '模板 ID 无效'),
|
|
title: string().required('请填写课程名称'),
|
|
description: string().required('请填写主讲人名字'),
|
|
})
|
|
|
|
type UserTitlesSchema = InferType<typeof userTitlesSchema>
|
|
|
|
const userTitlesState = reactive({
|
|
title_id: 0,
|
|
title: '',
|
|
description: '',
|
|
})
|
|
|
|
const onUserTitlesRequest = (titles: TitlesTemplate) => {
|
|
userTitlesState.title_id = titles.id
|
|
isUserTitlesRequestModalActive.value = true
|
|
}
|
|
|
|
const onUserTitlesDelete = (titles: TitlesTemplate) => {
|
|
useFetchWrapped<
|
|
Pick<req.gen.TitlesTemplateRequest, 'to_user_id'> & {
|
|
user_title_id: number
|
|
} & AuthedRequest,
|
|
BaseResponse<any>
|
|
>('App.User_UserTitles.DeleteConn', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
to_user_id: loginState.user.id,
|
|
user_title_id: titles.id,
|
|
})
|
|
.then((res) => {
|
|
if (res.ret === 200) {
|
|
toast.add({
|
|
title: '删除成功',
|
|
description: '已删除片头素材',
|
|
color: 'green',
|
|
icon: 'i-tabler-check',
|
|
})
|
|
} else {
|
|
toast.add({
|
|
title: '删除失败',
|
|
description: res.msg || '未知错误',
|
|
color: 'red',
|
|
icon: 'i-tabler-alert-triangle',
|
|
})
|
|
}
|
|
})
|
|
.finally(() => {
|
|
userPagination.page = 1
|
|
refreshUserTitlesTemplate()
|
|
})
|
|
}
|
|
|
|
const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
|
useFetchWrapped<
|
|
req.gen.TitlesTemplateRequest & AuthedRequest,
|
|
BaseResponse<any>
|
|
>('App.User_UserTitles.CreateConn', {
|
|
token: loginState.token!,
|
|
user_id: loginState.user.id,
|
|
to_user_id: loginState.user.id,
|
|
...event.data,
|
|
})
|
|
.then((res) => {
|
|
if (res.ret === 200) {
|
|
userTitlesState.title = ''
|
|
userTitlesState.description = ''
|
|
toast.add({
|
|
title: '提交成功',
|
|
description: '已提交片头制作请求',
|
|
color: 'green',
|
|
icon: 'i-tabler-check',
|
|
})
|
|
} else {
|
|
toast.add({
|
|
title: '提交失败',
|
|
description: res.msg || '未知错误',
|
|
color: 'red',
|
|
icon: 'i-tabler-alert-triangle',
|
|
})
|
|
}
|
|
})
|
|
.finally(() => {
|
|
isUserTitlesRequestModalActive.value = false
|
|
userPagination.page = 1
|
|
refreshUserTitlesRequests()
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full">
|
|
<div class="p-4 pb-0">
|
|
<BubbleTitle
|
|
title="片头片尾模版"
|
|
subtitle="Materials"
|
|
>
|
|
<template #action>
|
|
<UButton
|
|
color="amber"
|
|
icon="tabler:plus"
|
|
variant="soft"
|
|
v-if="loginState.user.auth_code === 2"
|
|
@click="isCreateSystemTitlesSlideActive = true"
|
|
>
|
|
创建模板
|
|
</UButton>
|
|
</template>
|
|
</BubbleTitle>
|
|
<GradientDivider />
|
|
</div>
|
|
<div class="p-4">
|
|
<div
|
|
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
|
v-if="systemTitlesTemplateStatus === 'pending'"
|
|
>
|
|
<USkeleton
|
|
class="w-full aspect-video"
|
|
v-for="i in systemPagination.pageSize"
|
|
:key="i"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="systemTitlesTemplate?.data.items.length === 0"
|
|
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
|
>
|
|
<Icon
|
|
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
|
name="i-tabler-photo-hexagon"
|
|
/>
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">暂时没有可用模板</p>
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
|
v-else
|
|
>
|
|
<AigcGenerationTitlesTemplate
|
|
v-for="titles in systemTitlesTemplate?.data.items"
|
|
:data="titles"
|
|
type="system"
|
|
:key="titles.id"
|
|
@user-titles-request="onUserTitlesRequest"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 pb-0 pt-12">
|
|
<BubbleTitle
|
|
title="我的片头片尾"
|
|
:bubble="false"
|
|
></BubbleTitle>
|
|
<GradientDivider />
|
|
</div>
|
|
<div class="p-4 pt-2">
|
|
<UAlert
|
|
v-if="userTitlesRequests?.data.total"
|
|
color="primary"
|
|
icon="tabler:info-circle"
|
|
variant="subtle"
|
|
class="mb-4"
|
|
>
|
|
<template #title>
|
|
有 {{ userTitlesRequests?.data.total }} 个片头正在制作中
|
|
</template>
|
|
<template #description>
|
|
<div class="flex gap-2">
|
|
<div
|
|
v-for="titles in userTitlesRequests?.data.items"
|
|
:key="titles.id"
|
|
>
|
|
<p>
|
|
{{ titles.title }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UAlert>
|
|
<div
|
|
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
|
v-if="userTitlesTemplateStatus === 'pending'"
|
|
>
|
|
<USkeleton
|
|
class="w-full aspect-video"
|
|
v-for="i in userPagination.pageSize"
|
|
:key="i"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else-if="userTitlesTemplate?.data.items.length === 0"
|
|
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
|
>
|
|
<Icon
|
|
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
|
name="i-tabler-photo-hexagon"
|
|
/>
|
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
|
还没有使用过模板
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
|
v-else
|
|
>
|
|
<AigcGenerationTitlesTemplate
|
|
v-for="titles in userTitlesTemplate?.data.items"
|
|
type="user"
|
|
:data="titles"
|
|
:key="titles.id"
|
|
@user-titles-delete="onUserTitlesDelete"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<UModal v-model="isUserTitlesRequestModalActive">
|
|
<UCard
|
|
:ui="{
|
|
ring: '',
|
|
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
|
}"
|
|
>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div
|
|
class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
|
|
>
|
|
<p>使用模板</p>
|
|
</div>
|
|
<UButton
|
|
class="-my-1"
|
|
color="gray"
|
|
icon="i-tabler-x"
|
|
variant="ghost"
|
|
@click="isUserTitlesRequestModalActive = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<div>
|
|
<UForm
|
|
class="space-y-4"
|
|
:schema="userTitlesSchema"
|
|
:state="userTitlesState"
|
|
@submit="onUserTitlesSubmit"
|
|
>
|
|
<UFormGroup
|
|
label="课程名称"
|
|
name="title"
|
|
required
|
|
>
|
|
<UInput v-model="userTitlesState.title" />
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="主讲人"
|
|
name="description"
|
|
required
|
|
>
|
|
<UInput v-model="userTitlesState.description" />
|
|
</UFormGroup>
|
|
<UFormGroup name="title_id">
|
|
<UInput
|
|
type="hidden"
|
|
v-model="userTitlesState.title_id"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UAlert
|
|
icon="tabler:info-circle"
|
|
color="primary"
|
|
variant="subtle"
|
|
title="片头片尾模板"
|
|
description="提交模板相应字段后，待工作人员制作好后即可使用"
|
|
/>
|
|
|
|
<div class="flex justify-end gap-2">
|
|
<UButton
|
|
color="primary"
|
|
variant="soft"
|
|
label="取消"
|
|
@click="isUserTitlesRequestModalActive = false"
|
|
/>
|
|
<UButton
|
|
color="primary"
|
|
type="submit"
|
|
>
|
|
提交
|
|
</UButton>
|
|
</div>
|
|
</UForm>
|
|
</div>
|
|
</UCard>
|
|
</UModal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|