From 88c57076b8ae45f35131ac9eb162c45fc070aba6 Mon Sep 17 00:00:00 2001
From: jacky <phpcrazy@163.com>
Date: Mon, 29 Apr 2024 16:34:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=85=B3=E4=BA=8E=E6=88=91?=
 =?UTF-8?q?=E4=BB=AC=E7=AD=89=E7=89=B9=E6=AE=8A=E9=A1=B5=E9=9D=A2=E7=BB=B4?=
 =?UTF-8?q?=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/page.js                 |  75 ++++++++++++++++
 src/view/content/live/index.vue |  48 +++++-----
 src/view/page/index.vue         | 149 ++++++++++++++++++++++++++++++++
 3 files changed, 250 insertions(+), 22 deletions(-)
 create mode 100644 src/api/page.js
 create mode 100644 src/view/page/index.vue

diff --git a/src/api/page.js b/src/api/page.js
new file mode 100644
index 0000000..c6f1288
--- /dev/null
+++ b/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
+  })
+}
diff --git a/src/view/content/live/index.vue b/src/view/content/live/index.vue
index b5052bb..beb16e7 100644
--- a/src/view/content/live/index.vue
+++ b/src/view/content/live/index.vue
@@ -124,28 +124,32 @@
             </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-col :span="18">
-                    <div class="gva-multi-input">
-                      <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 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="时间线标题"
+                            @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>
               </template>
             </el-form-item>
           </el-col>
diff --git a/src/view/page/index.vue b/src/view/page/index.vue
new file mode 100644
index 0000000..b387d9b
--- /dev/null
+++ b/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>