|
@@ -11,6 +11,7 @@ import { MessagePlugin } from 'tdesign-vue-next'
|
|
|
import { updateArticle, createArticle } from '@/api/article'
|
|
import { updateArticle, createArticle } from '@/api/article'
|
|
|
import { searchCategories } from '@/api/category'
|
|
import { searchCategories } from '@/api/category'
|
|
|
import Editor from '@/components/Editor.vue'
|
|
import Editor from '@/components/Editor.vue'
|
|
|
|
|
+import ImageUpload from '@/components/ImageUpload.vue'
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
headerTitle?: String | null
|
|
headerTitle?: String | null
|
|
|
article: Article | null
|
|
article: Article | null
|
|
@@ -19,7 +20,7 @@ const props = defineProps<{
|
|
|
const formRef = ref<FormInstanceFunctions | null>(null)
|
|
const formRef = ref<FormInstanceFunctions | null>(null)
|
|
|
const headerText = computed(() => `${props.article ? '编辑' : '创建'}${props.headerTitle || ''}`)
|
|
const headerText = computed(() => `${props.article ? '编辑' : '创建'}${props.headerTitle || ''}`)
|
|
|
const confirmBtnText = computed(() => (props.article ? '保存' : '确定'))
|
|
const confirmBtnText = computed(() => (props.article ? '保存' : '确定'))
|
|
|
-const articleData = reactive<CreateArticleRequest>({ title: '', categoryId: '', content: ''})
|
|
|
|
|
|
|
+const articleData = reactive<CreateArticleRequest>({ title: '', categoryId: '', content: '', thumbnail: '', description: ''})
|
|
|
|
|
|
|
|
const rules: FormRules<CreateArticleRequest> = {
|
|
const rules: FormRules<CreateArticleRequest> = {
|
|
|
title: [
|
|
title: [
|
|
@@ -77,6 +78,26 @@ const rules: FormRules<CreateArticleRequest> = {
|
|
|
type: 'error',
|
|
type: 'error',
|
|
|
trigger: 'blur'
|
|
trigger: 'blur'
|
|
|
}
|
|
}
|
|
|
|
|
+ ],
|
|
|
|
|
+ thumbnail: [
|
|
|
|
|
+ {
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ message: '请上传封面图',
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ trigger: 'blur'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ whitespace: true,
|
|
|
|
|
+ message: '请上传封面图'
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ description: [
|
|
|
|
|
+ {
|
|
|
|
|
+ max: 500,
|
|
|
|
|
+ message: '描述不超过500字',
|
|
|
|
|
+ type: 'error',
|
|
|
|
|
+ trigger: 'blur'
|
|
|
|
|
+ }
|
|
|
]
|
|
]
|
|
|
}
|
|
}
|
|
|
watch(
|
|
watch(
|
|
@@ -85,6 +106,7 @@ watch(
|
|
|
articleData.categoryId = newArticleData?.category.id || ''
|
|
articleData.categoryId = newArticleData?.category.id || ''
|
|
|
articleData.title = newArticleData?.title || ''
|
|
articleData.title = newArticleData?.title || ''
|
|
|
articleData.content = newArticleData?.content || ''
|
|
articleData.content = newArticleData?.content || ''
|
|
|
|
|
+ articleData.thumbnail = newArticleData?.thumbnail || ''
|
|
|
},
|
|
},
|
|
|
{ deep: true }
|
|
{ deep: true }
|
|
|
)
|
|
)
|
|
@@ -143,6 +165,9 @@ fetchCategories('')
|
|
|
<TFormItem label="咨询标题:" name="title" help="名称长度大于2个汉字,小于120个汉字">
|
|
<TFormItem label="咨询标题:" name="title" help="名称长度大于2个汉字,小于120个汉字">
|
|
|
<t-input v-model.trim="articleData.title" clearable placeholder="请输入咨询标题" />
|
|
<t-input v-model.trim="articleData.title" clearable placeholder="请输入咨询标题" />
|
|
|
</TFormItem>
|
|
</TFormItem>
|
|
|
|
|
+ <TFormItem label="咨询描述:" name="description" help="描述长度小于500字符">
|
|
|
|
|
+ <TTextarea v-model.trim="articleData.description" clearable placeholder="请输入咨询标题" :maxcharacter="500"/>
|
|
|
|
|
+ </TFormItem>
|
|
|
<TFormItem label="咨询分类:" name="categoryId">
|
|
<TFormItem label="咨询分类:" name="categoryId">
|
|
|
<TSelect
|
|
<TSelect
|
|
|
v-model="articleData.categoryId"
|
|
v-model="articleData.categoryId"
|
|
@@ -152,6 +177,9 @@ fetchCategories('')
|
|
|
@search="fetchCategories"
|
|
@search="fetchCategories"
|
|
|
/>
|
|
/>
|
|
|
</TFormItem>
|
|
</TFormItem>
|
|
|
|
|
+ <TFormItem label="轮播图:" name="thumbnail">
|
|
|
|
|
+ <ImageUpload v-model="articleData.thumbnail"/>
|
|
|
|
|
+ </TFormItem>
|
|
|
<TFormItem label="内容:" name="content">
|
|
<TFormItem label="内容:" name="content">
|
|
|
<Editor v-model="articleData.content"></Editor>
|
|
<Editor v-model="articleData.content"></Editor>
|
|
|
</TFormItem>
|
|
</TFormItem>
|