110 lines
4.0 KiB
Vue
110 lines
4.0 KiB
Vue
<template>
|
|
<div class="page-main-header">空白 Issue</div>
|
|
<page-layout>
|
|
<div class="page-main-content g-content-card">
|
|
<d-form layout="vertical" :data="issueData" :rules="rules" ref="formRef">
|
|
<d-form-item class="edit-form-item" field="title" label="标题">
|
|
<d-input v-model="issueData.title" placeholder="请填写 Issue 标题" maxlength="201" size="lg" />
|
|
</d-form-item>
|
|
<d-form-item class="edit-form-item" field="description" label="内容">
|
|
<MdEditor v-model="issueData.description" @content-change="mdChange" :project-id="decodeURIComponent(repoId)" toggle-repo-permission></MdEditor>
|
|
</d-form-item>
|
|
<!-- <d-form-item class="edit-form-item" field="confidential" label="Issue 可见性"><d-select class="edit-form-select" placeholder="请选择" v-model="issueData.confidential" :options="options" size="sm"></d-select></d-form-item> -->
|
|
</d-form>
|
|
<div class="edit-btngroup">
|
|
<d-button :disabled="issueData?.title?.length < 1 || issueData?.title?.length > 200 || !issueData.description || issueData.description.length > 1024 * 1024" @click="handleSubmit" :loading="loading"
|
|
color="primary" variant="solid" class="w-[80px]">新建</d-button>
|
|
<d-button @click="$router.push({ name: 'repoIssues'})"
|
|
class="w-[80px]">取消</d-button>
|
|
</div>
|
|
</div>
|
|
|
|
<template #right>
|
|
<AsideSetSkeleton v-model="issueData" type="create" hiddenBoards hiddenMerge hiddenBranch :repoId="repoId" />
|
|
</template>
|
|
</page-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineOptions({ name: 'create-issue' });
|
|
import AsideSetSkeleton from '@/views/Repo/components/IssueAsideSetGroup/index.vue';
|
|
import PageLayout from '@/components/PageLayout/index.vue';
|
|
import MdEditor from '@/components/MdEditor/index.vue';
|
|
import { ref, provide } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { createIssue } from '@/api/issue/index';
|
|
import { getRepoRole } from '@/api/repo/index';
|
|
import { useRepoId } from '@/utils/hooks/useRepoId';
|
|
import { reqCatch } from '@/utils/catch';
|
|
import { formatIssuePutData } from '@/utils';
|
|
import { repoInfoStore } from '@/stores/Repo/index';
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
import { useAccountStore } from '@/stores/user';
|
|
const userInfo = useAccountStore();
|
|
const { accountInfo } = storeToRefs(userInfo);
|
|
const { repoId } = useRepoId();
|
|
const loading = ref(false);
|
|
const router = useRouter();
|
|
const options = [{ name: '公开的', value: false }, { name: '私密的', value: true }];
|
|
const { isAdmin, isDeveloper, isVisitor } = repoInfoStore();
|
|
|
|
const rules = {
|
|
title: [
|
|
{ required: true, message: '标题不能为空！', trigger: 'blur' },
|
|
{ required: true, min: 1, max: 200, message: '标题限制 1~200 个字符！', trigger: 'blur' }
|
|
],
|
|
description: [{ required: true, message: '信息不能为空！', trigger: 'blur' }]
|
|
};
|
|
|
|
const formRef = ref(null);
|
|
const issueData = ref({ title: '', confidential: false, description: '' });
|
|
|
|
function handleSubmit() {
|
|
formRef?.value?.validate(async(isValid: boolean) => {
|
|
if (isValid) {
|
|
loading.value = true;
|
|
const res = await reqCatch(createIssue, formatIssuePutData({
|
|
project_id: repoId.value,
|
|
title: issueData.value.title,
|
|
description: issueData.value.description,
|
|
...issueData.value
|
|
}));
|
|
|
|
if (!res.error) {
|
|
router.push({ name: 'repoIssueDetail', params: { serialNumber: res?.data?.data?.iid }});
|
|
}
|
|
loading.value = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
function mdChange(text: string) {
|
|
issueData.value.description = text;
|
|
}
|
|
provide('isVisitor', isVisitor);
|
|
provide('isDeveloper', isDeveloper);
|
|
provide('isAdmin', isAdmin);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-main-header {
|
|
margin-top: 24px;
|
|
margin-bottom: 12px;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
@apply text-G900;
|
|
}
|
|
|
|
.page-main-content {
|
|
@apply bg-white p-20;
|
|
:deep(.devui-form__label-span){
|
|
@apply text-G900
|
|
}
|
|
}
|
|
|
|
.edit-btngroup {
|
|
@apply flex gap-2 flex-row-reverse;
|
|
}
|
|
</style>
|