增加关于我们等特殊页面维护

src/api/page.js

@@ -0,0 +1,75 @@
+import service from '@/utils/request'
+
+// @Summary 获取列表
+// @Produce  application/json
+// @Router /cms/page/getList [post]
+export const getPageList = (data) => {
+  return service({
+    url: '/cms/page/getList',
+    method: 'get',
+    data
+  })
+}
+
+// @Summary 新增
+// @Produce  application/json
+// @Param menu Object
+// @Router /cms/page/add [post]
+export const addPage = (data) => {
+  return service({
+    url: '/cms/page/add',
+    method: 'post',
+    data
+  })
+}
+
+// @Summary 删除
+// @Produce  application/json
+// @Param id int
+// @Router /cms/page/delete [delete]
+export const deletePage = (data) => {
+  return service({
+    url: '/cms/page/delete',
+    method: 'delete',
+    data
+  })
+}
+
+// @Summary 批量删除
+// @Param data body request.IdsReq true "批量删除"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
+// @Router /cms/page/deleteByIds [delete]
+export const deletePageByIds = (params) => {
+  return service({
+    url: '/cms/page/deleteByIds',
+    method: 'delete',
+    params
+  })
+}
+
+// @Summary 修改
+// @Produce  application/json
+// @Param menu Object
+// @Router /cms/page/update [put]
+export const updatePage = (data) => {
+  return service({
+    url: '/cms/page/update',
+    method: 'put',
+    data
+  })
+}
+
+// @Summary 根据id获取
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body api.GetById true "根据id获取"
+// @Success 200 {string} json "{"success":true,"data":{},"msg":"获取成功"}"
+// @Router /cms/page/get [get]
+export const getPageById = (params) => {
+  return service({
+    url: '/cms/page/find',
+    method: 'get',
+    params
+  })
+}

src/view/content/live/index.vue

@@ -124,7 +124,9 @@
             </el-form-item>
             <el-form-item label="时间线" prop="liveTimeline" style="width: 100%">
               <template #default="scope">
-                <el-row :gutter="10" v-for="(item, index) in liveTimelineArr" style="width: 100%">
+                <el-timeline hide-timestamp>
+                  <el-timeline-item placement="top" v-for="(item, index) in liveTimelineArr">
+                    <el-row :gutter="10" style="width: 100%">
                       <el-col :span="18">
                         <div class="gva-multi-input">
                           <el-input v-model="item.title" style="width: 100%; margin-bottom: 10px;" placeholder="时间线标题"
@@ -146,6 +148,8 @@
                         </el-button>
                       </el-col>
                     </el-row>
+                  </el-timeline-item>
+                </el-timeline>
               </template>
             </el-form-item>
           </el-col>

src/view/page/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="gva-table-box">
+    <el-menu ref="elMenuRef" class="gva-page-menu" :default-active="defaultActive" mode="horizontal">
+      <el-menu-item v-for="(item) in pageList" @click="handleOpenItem(item)" :index="item.ID.toString()">
+        <span>{{ item.name }}</span>
+      </el-menu-item>
+    </el-menu>
+
+    <el-form ref="elFormRef" label-position="top" label-width="auto" :inline="true" :model="formData">
+      <div v-if="formData.kind === 1" style="margin-bottom: 15px;">
+        <RichEdit v-model="formData.content" media-category="page_imgs" style="height: 50rem;" />
+      </div>
+      <div v-else style="width: 100%;">
+        <el-timeline hide-timestamp>
+          <el-timeline-item placement="top" v-for="(item, index) in timelineArr">
+            <el-row :gutter="10" style="width: 80%">
+              <el-col :span="18">
+                <div class="gva-multi-input">
+                  <el-input v-model="item.time" style="width: 100%; margin-bottom: 10px;" placeholder="时间"
+                    @blur="timelineBlur" />
+                  <el-input v-model="item.title" style="width: 100%; margin-bottom: 10px;" placeholder="标题"
+                    @blur="timelineBlur" />
+                  <el-input v-model="item.content" type="textarea" rows="3" style="width: 100%" placeholder="内容" />
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <el-button type="primary" plain size="small" @click="timelineAdd(index)">
+                  <el-icon>
+                    <Plus />
+                  </el-icon>
+                </el-button>
+                <el-button type="danger" plain size="small" v-if="index > 0" @click="timelineDel(index)">
+                  <el-icon>
+                    <Minus />
+                  </el-icon>
+                </el-button>
+              </el-col>
+            </el-row>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+      <div>
+        <el-button type="primary" style="width: 160px;" @click="handleFormSubmit">保存</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import RichEdit from '@/components/richtext/rich-edit.vue'
+import {
+  getPageList,
+  getPageById,
+  updatePage,
+} from '@/api/page'
+
+const elMenuRef = ref(null)
+const elFormRef = ref(null)
+const defaultActive = ref("")
+const pageList = ref([])
+const formData = ref({})
+const timelineArr = ref([{
+  time: "",
+  title: "",
+  content: "",
+}])
+const copyTimelineData = () => {
+  const arr = timelineArr.value.filter(item => item.title.trim() != '')
+  if (arr.length > 0) {
+    formData.value.content = JSON.stringify(arr)
+  }
+}
+const timelineAdd = (index) => {
+  timelineArr.value.splice(index + 1, 0, { time: '', title: '', content: '' })
+}
+const timelineDel = (index) => {
+  timelineArr.value.splice(index, 1)
+}
+const timelineBlur = () => {
+  copyTimelineData()
+}
+
+const handleOpenItem = async (item) => {
+  console.log(item)
+  const res = await getPageById({ id: item.ID })
+  if (res.code === 0) {
+    formData.value = res.data.item
+    if (item.kind === 2) {
+      if (res.data.item.content != '') {
+        timelineArr.value = JSON.parse(res.data.item.content)
+      }
+      console.log(timelineArr.value.length)
+      if (timelineArr.length == 0) {
+        timelineArr.value.push({
+          time: "",
+          title: "",
+          content: "",
+        })
+      }
+      console.log(timelineArr.value.length)
+    }
+  } else {
+    ElMessage.error("获取数据失败")
+  }
+}
+const getTableData = async () => {
+  const res = await getPageList()
+  if (res.code === 0) {
+    pageList.value = res.data.list
+    defaultActive.value = pageList.value[0].ID.toString()
+    handleOpenItem(pageList.value[0])
+  }
+}
+
+const init = () => {
+  getTableData()
+}
+
+init()
+
+const handleFormSubmit = () => {
+  copyTimelineData()
+  elFormRef.value.validate(async valid => {
+    if (!valid) {
+      return false
+    }
+    const res = await updatePage(formData.value)
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '保存成功',
+      })
+    }
+  })
+}
+
+</script>
+
+<style scoped>
+.gva-page-menu {
+  margin-bottom: 15px;
+}
+
+.gva-multi-input {
+  margin-bottom: 15px;
+}
+</style>