|
@@ -1,37 +1,50 @@
|
|
|
<template>
|
|
<template>
|
|
|
<el-dialog
|
|
<el-dialog
|
|
|
v-model="dialogVisible"
|
|
v-model="dialogVisible"
|
|
|
- title="编辑学习笔记"
|
|
|
|
|
|
|
+ :title="title + $t('common.xuxibiji')"
|
|
|
width="800"
|
|
width="800"
|
|
|
>
|
|
>
|
|
|
- <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
|
|
|
|
- <el-form-item label="笔记名称" prop="title">
|
|
|
|
|
- <el-input v-model="form.title" placeholder="请输入笔记名称" />
|
|
|
|
|
|
|
+ <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="edit_note">
|
|
|
|
|
+ <el-form-item label="" prop="title">
|
|
|
|
|
+ <el-input v-model="form.title" placeholder="请输入标题" size="large" show-word-limit maxlength="20"/>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="笔记内容" prop="content">
|
|
|
|
|
- <BlockNoteEditor v-model="form.content" />
|
|
|
|
|
|
|
+ <el-form-item label="" prop="content">
|
|
|
|
|
+ <BlockNoteEditor v-model="editorContent" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
<template #footer>
|
|
<template #footer>
|
|
|
- <el-button type="primary" @click="submitForm">保存</el-button>
|
|
|
|
|
- <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
|
|
|
|
+ <div class="flex-center">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-button @click="dialogVisible = false" type="primary" plain>{{ $t('common.cancel') }}</el-button>
|
|
|
|
|
+ <el-button type="primary" @click="submitForm" class="gradient">{{ $t('common.confirm') }}</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import BlockNoteEditor from '@/components/BlockNoteEditor.vue'
|
|
import BlockNoteEditor from '@/components/BlockNoteEditor.vue'
|
|
|
-import { ref, reactive } from 'vue'
|
|
|
|
|
|
|
+import { ref, reactive, watchEffect } from 'vue'
|
|
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
|
|
+const { t } = useI18n()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-const dialogVisible = ref(false)
|
|
|
|
|
|
|
+const dialogVisible = ref(true)
|
|
|
|
|
+const title = ref(t('common.add'));
|
|
|
|
|
+// 编辑器内容
|
|
|
|
|
+const editorContent = ref(null);
|
|
|
const form = reactive({
|
|
const form = reactive({
|
|
|
title: '',
|
|
title: '',
|
|
|
content: ''
|
|
content: ''
|
|
|
})
|
|
})
|
|
|
|
|
+watchEffect(() => {
|
|
|
|
|
+ // 将编辑器内容赋值给表单的workflowContent
|
|
|
|
|
+ form.content = JSON.stringify(editorContent.value);
|
|
|
|
|
+})
|
|
|
const rules = {
|
|
const rules = {
|
|
|
- title: [{ required: true, message: '请输入笔记名称', trigger: 'blur' }],
|
|
|
|
|
- content: [{ required: true, message: '请输入笔记内容', trigger: 'blur' }]
|
|
|
|
|
|
|
+ title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
|
|
|
|
|
+ content: [{ required: true, message: '请输入内容', trigger: 'change' }]
|
|
|
}
|
|
}
|
|
|
const submitForm = async () => {
|
|
const submitForm = async () => {
|
|
|
|
|
|
|
@@ -44,3 +57,17 @@ defineExpose({
|
|
|
openDialog
|
|
openDialog
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+.edit_note{
|
|
|
|
|
+
|
|
|
|
|
+ .el-input--large .el-input__wrapper {
|
|
|
|
|
+ border: none !important;
|
|
|
|
|
+ box-shadow: none !important;
|
|
|
|
|
+ border-top:1px solid #e5e7eb !important;
|
|
|
|
|
+ border-bottom:1px solid #e5e7eb !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-input__inner{
|
|
|
|
|
+ font-size: 18px !important;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|