feat: 完善文章编辑功能

Yi.BBS.Vue3/src/views/EditArticle.vue

@@ -0,0 +1,121 @@
+<template>
+  <div style="width: 100%;">
+    <div class="body-div">
+      <el-form label-width="120px" :model="discuss" label-position="left" :rules="rules" ref="ruleFormRef">
+
+        <el-form-item label="分类：">
+          <el-radio-group v-model="radio">
+            <el-radio-button label="1">文章</el-radio-button>
+            <el-radio-button label="2">主题</el-radio-button>
+            <el-radio-button label="3">板块</el-radio-button>
+            <el-radio-button label="4">其他</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="标题：" prop="title">
+          <el-input placeholder="请输入" v-model="discuss.title" />
+        </el-form-item>
+        <el-form-item label="描述：" prop="introduction">
+          <el-input placeholder="请输入" v-model="discuss.introduction" />
+        </el-form-item>
+        <el-form-item label="内容：" prop="content">
+          {{ discuss.content + "[111]" }}
+          <MavonEdit height="30rem" v-model="discuss.content" :codeStyle="codeStyle" />
+        </el-form-item>
+        <el-form-item label="封面：">
+          <el-input placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="标签：" prop="types">
+          <el-input placeholder="请输入" v-model="discuss.types" />
+        </el-form-item>
+        <el-form-item> <el-button @click="submit(ruleFormRef)" class="submit-btn"
+            type="primary">提交</el-button></el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script setup>
+import MavonEdit from '@/components/MavonEdit.vue'
+import { ref, reactive,onMounted } from 'vue';
+import { useRoute } from 'vue-router'
+
+import { add as discussAdd, update as discussUpdate,get as discussGet } from '@/apis/discussApi.js'
+
+//数据定义
+const route = useRoute()
+const radio = ref(1)
+const codeStyle = "atom-one-dark"
+//需要添加的主题信息
+const discuss = reactive({
+  title: "",
+  types: "",
+  introduction: "",
+  content: "",
+  plateId: route.params.id
+});
+//定义效验规则
+const ruleFormRef = ref(null)
+const rules = reactive({
+  title: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+    { min: 3, max: 20, message: '长度 3 到 20', trigger: 'blur' },
+  ],
+
+})
+//提交按钮,需要区分操作类型
+const submit = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      //创建
+      if (route.params.operType == 'create') {
+        await discussAdd(discuss)
+
+      }
+      //更新
+      else if (route.params.operType == 'update') {
+        await discussUpdate(route.params.id, discuss)
+      }
+
+      ruleFormRef.value.resetFields();
+      discuss.plateId = route.params.id;
+    }
+  })
+
+}
+
+onMounted(async()=>{
+  //如果是更新操作，需要先查询
+  if (route.params.operType == 'update') {
+        await loadDiscuss();
+      }
+})
+//加载主题
+const loadDiscuss=async()=>{
+ const response= await discussGet(route.params.id);
+ discuss.content=  response.content;
+ discuss.title=  response.title;
+ discuss.types=  response.types;
+ discuss.introduction=  response.introduction;
+}
+// const clear = (source) => {
+//   const keys = Object.keys(source);
+//   let obj = {};
+//   keys.forEach((item) => {
+//     obj[item] = "";
+//   });
+//   Object.assign(source, obj);
+// };
+
+</script>
+<style scoped>
+.submit-btn {
+  width: 40%;
+}
+
+.body-div {
+  min-height: 1000px;
+  background-color: #fff;
+  margin: 1.5rem;
+  padding: 1.5rem;
+}
+</style>