From c1f067e758d1b5c972716f5e46d5a4b23526f9f7 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 20 Mar 2024 18:03:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=82=AC=E6=B5=AE=E6=A0=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/navbar/index.vue        |   8 +-
 src/pages/floatingFrame/index.vue   | 519 ++++++++++++++++++++++++++++
 src/router/modules/floatingFrame.js |  18 +
 3 files changed, 541 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/floatingFrame/index.vue
 create mode 100644 src/router/modules/floatingFrame.js

diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index 70ddb10..9828ae4 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -194,10 +194,10 @@ export default {
               index: '/seo',
               title: 'SEO管理'
             },
-            // {
-            //   index: '/seo',
-            //   title: '悬浮栏管理'
-            // }
+            {
+              index: '/floatingFrame',
+              title: '悬浮栏管理'
+            }
           ]
         }
       ],
diff --git a/src/pages/floatingFrame/index.vue b/src/pages/floatingFrame/index.vue
new file mode 100644
index 0000000..bcda4cb
--- /dev/null
+++ b/src/pages/floatingFrame/index.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="page">
+    <div class="tool">
+      <div class="search-wrap">
+        <el-input placeholder="请输入悬浮栏名称"
+                  v-model.trim="keyword"
+                  clearable></el-input>
+      </div>
+      <div class="actions">
+        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'"
+                   type="primary"
+                   @click="add">新增</el-button>
+        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'"
+                   @click="batchDel">删除</el-button>
+      </div>
+    </div>
+
+    <el-table v-loading="listLoading"
+              ref="table"
+              :data="list"
+              default-expand-all
+              class="table"
+              header-align="center"
+              @selection-change="handleSelectionChange"
+              row-key="id">
+      <el-table-column type="selection"
+                       width="50"
+                       align="center"
+                       :reserve-selection="true"></el-table-column>
+      <el-table-column prop="columnName"
+                       show-overflow-tooltip
+                       label="悬浮栏名称"
+                       min-width="140"></el-table-column>
+      <el-table-column prop="typeId"
+                       label="应用范围"
+                       min-width="100"></el-table-column>
+      <el-table-column prop="typeId"
+                       label="内容模块"
+                       min-width="100"></el-table-column>
+      <el-table-column prop="typeId"
+                       label="创建时间"
+                       min-width="100"></el-table-column>
+      <el-table-column prop="typeId"
+                       label="最近编辑"
+                       min-width="100"></el-table-column>
+      <el-table-column prop="typeId"
+                       label="编辑人"
+                       min-width="100"></el-table-column>
+      <el-table-column label="操作"
+                       width="180">
+        <template slot-scope="scope">
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'"
+                     type="text"
+                     @click="edit(scope.row, 'edit')">编辑</el-button>
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'"
+                     type="text"
+                     @click="del(scope.row)">删除</el-button>
+          <el-switch class="m-l-10"
+                     v-model="scope.row.menuVisible"
+                     :active-value="0"
+                     :inactive-value="1"
+                     @change="switchOff($event, scope.row, scope.$index)">
+          </el-switch>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog title="模块管理"
+               :visible.sync="moduleVisible"
+               width="1000px"
+               :close-on-click-modal="false">
+
+      <el-form ref="form"
+               :model="moduleForm"
+               :rules="moduleRules">
+        <el-form-item prop="columnName"
+                      label="悬浮栏目名称"
+                      label-width="110px">
+          <el-input style="width: 200px"
+                    placeholder="请输入栏目名称"
+                    v-model="moduleForm.columnName"
+                    clearable
+                    maxlength="10"></el-input>
+        </el-form-item>
+        <el-table class="module-table"
+                  :data="modules"
+                  header-align="center"
+                  row-key="id">
+          <el-table-column prop="columnName"
+                           label="图片"
+                           min-width="140"></el-table-column>
+          <el-table-column prop="columnName"
+                           label="标题"
+                           min-width="140"></el-table-column>
+          <el-table-column prop="columnName"
+                           label="内容"
+                           min-width="140"></el-table-column>
+          <el-table-column label="操作"
+                           :width="150"
+                           align="center">
+            <template slot-scope="scope">
+              <div class="flex a-center">
+                <el-switch v-model="scope.row.isEnable"
+                           :active-value="1"
+                           :inactive-value="0">
+                </el-switch>
+                <i class="el-icon-edit-outline del"
+                   @click="editRow(scope.row, scope.$index)"></i>
+                <i class="el-icon-delete del"
+                   @click="delRow(scope.$index)"></i>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="plus">
+          <i class="el-icon-circle-plus-outline"
+             @click="addRow"></i>
+        </div>
+        <el-form-item label="应用范围">
+          <el-select v-model="moduleForm.range"
+                     clearable>
+            <el-option v-for="item in ranges"
+                       :key="item.id"
+                       :label="item.title"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="moduleVisible = false">取消</el-button>
+        <el-button type="primary"
+                   @click="moduleSubmit">确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="新增内容"
+               :visible.sync="contentVisible"
+               width="700px"
+               :close-on-click-modal="false">
+      <el-form ref="form"
+               :model="contentForm"
+               :rules="contentRules">
+        <el-form-item prop="titleImg"
+                      label="图片">
+          <el-upload class="avatar-uploader"
+                     accept=".jpg,.png,.jpeg,.gif"
+                     :on-change="file => changeFile(file, 0)"
+                     :show-file-list="false"
+                     :action="this.api.upload"
+                     :auto-upload="false">
+            <img v-if="contentForm.titleImg"
+                 :src="contentForm.titleImg"
+                 class="avatar">
+            <div class="uploader-default"
+                 v-else>
+              <img class="plus"
+                   src="@/assets/images/plus.png"
+                   alt="">
+              <p>点击上传</p>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item prop="columnName"
+                      label="标题">
+          <el-input style="width: 200px"
+                    placeholder="请输入栏目名称"
+                    v-model="contentForm.columnName"
+                    clearable
+                    maxlength="20"></el-input>
+        </el-form-item>
+        <el-form-item prop="columnName"
+                      label="内容设置">
+          <el-radio-group v-model="contentForm.connectionType">
+            <el-radio :label="1">富文本</el-radio>
+            <el-radio :label="2">链接</el-radio>
+          </el-radio-group>
+          <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
+                  v-model="contentForm.connectionType"
+                  :init="editorConfig" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="contentVisible = false">取消</el-button>
+        <el-button type="primary"
+                   @click="contentSubmit">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 剪裁组件弹窗 -->
+    <el-dialog title="图片裁剪"
+               append-to-body
+               :visible.sync="cropperModel"
+               width="1100px"
+               :close-on-click-modal="false">
+      <Cropper ref="cropper"
+               :img-file.sync="file"
+               :is-upload="isUpload"
+               :fixed="true"
+               :fixedNumber.sync="fixedNumber"
+               @upload="customUpload" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Axios from 'axios'
+import Editor from '@tinymce/tinymce-vue'
+import editorConfig from '@/components/editor'
+export default {
+  data () {
+    return {
+      editorConfig,
+      siteId: this.$store.state.content.site.id,
+      siteName: this.$store.state.content.site.siteName,
+      templates: [],
+      listStyle: [],
+      pageStyle: [],
+      detailStyle: [],
+      keyword: '',
+      searchTimer: null,
+      list: [],
+      multipleSelection: [],
+      listLoading: false,
+      styleVisible: false,
+      ranges: [],
+      moduleForm: {
+        id: '',
+        columnName: '',
+        navigationStyle: 1,
+        styleTemplate: 1,
+        siteId: this.$store.state.content.site.id
+      },
+      moduleRules: {
+        columnName: [
+          { required: true, message: '请输入悬浮栏目名称', trigger: 'blur' }
+        ],
+      },
+      moduleVisible: false,
+      modules: [{}],
+
+      curRow: {},
+      curModule: 0,
+      contentVisible: false,
+      contentForm: {},
+      contentRules: {
+        columnName: [
+          { required: true, message: '请输入悬浮栏目名称', trigger: 'blur' }
+        ],
+      },
+
+      cropperModel: false,
+      isUpload: false,
+      fixedNumber: [1.76, 1],
+      file: {}, // 当前被选择的图片文件
+    };
+  },
+  components: {
+    Editor
+  },
+  watch: {
+    keyword: function (val) {
+      clearTimeout(this.searchTimer)
+      this.searchTimer = setTimeout(() => {
+        this.initData()
+      }, 500)
+    }
+  },
+  mounted () {
+    this.$store.commit('user/setCrumbs', [
+      {
+        name: '站点管理',
+        route: '/site'
+      },
+      {
+        name: '内容管理'
+      },
+      {
+        name: '悬浮栏设置'
+      }
+    ])
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.$post(this.api.listWithTree, {
+        siteId: this.siteId,
+        columnName: this.keyword,
+        templateId: '',
+        typeId: '',
+        isSort: 1
+      }).then(({ data }) => {
+        this.list = data
+        this.listLoading = false
+      }).catch(err => {
+        this.listLoading = false
+      })
+    },
+    // 重置列表
+    initData () {
+      this.$refs.table.clearSelection()
+      this.page = 1
+      this.getData()
+    },
+    add () {
+      this.moduleVisible = true
+    },
+    // 添加行
+    addRow () {
+      // this.data.list.push(JSON.parse(JSON.stringify(this.data.historyForm)))
+    },
+    // 编辑内容
+    editRow (row, i = 0) {
+      this.curRow = JSON.parse(JSON.stringify(row))
+      this.curModule = i
+      this.contentVisible = true
+    },
+    // 删除行（通用）
+    delRow (i) {
+      this.$confirm('确定要删除吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        // list.splice(i, 1)
+      }).catch(() => { })
+    },
+    edit (row, type) {
+      this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`)
+    },
+    // 模块设置提交
+    moduleSubmit () {
+
+    },
+    // 内容设置提交
+    contentSubmit () {
+
+    },
+    // 图片裁剪上传事件
+    customUpload (data) {
+      const formData = new FormData()
+      formData.append('file', data, this.file.name)
+      this.imgUpload(formData)
+    },
+    // 图片上传到服务器
+    imgUpload (formData) {
+      this.isUpload = true
+      Axios({
+        method: 'post',
+        url: this.api.upload,
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          token: Util.local.get(Setting.tokenKey)
+        },
+      }).then(({ data }) => {
+        if (data.code === 401) {
+          Util.errorMsg("登录过期，请重新登录");
+          setTimeout(() => {
+            this.$store.dispatch('user/logout')
+          }, 1000);
+          return false
+        }
+        this.$set(this.curForm, 'pic', data.url)
+      }).catch(res => { })
+      this.$refs.cropper.isDisabled = false
+      this.isUpload = false
+      this.cropperModel = false
+    },
+    // 图片改变钩子
+    changeFile (file, form) {
+      const { size, name } = file
+      const ext = name.substring(name.lastIndexOf('.') + 1)
+      if (!Util.isImg(ext)) {
+        this.$message.error('请上传图片！')
+        return false
+      }
+      if (size / 1024 / 1024 > 100) {
+        this.$message.error('请上传100M以内的图片！')
+        return false
+      }
+      this.file = file
+      this.curForm = form
+      this.cropperModel = true
+      this.$nextTick(() => {
+        this.$refs.cropper.updateImg({
+          url: window.URL.createObjectURL(file.raw),
+          size: file.size
+        })
+      })
+    },
+
+    del (row) {
+      this.$confirm("删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？", "提示", {
+        type: "warning"
+      }).then(() => {
+        this.$post(`${this.api.deleteColumn}?ids=${row.id}`).then(res => {
+          util.successMsg("删除成功")
+          this.getData()
+        }).catch(res => { })
+      }).catch(() => { })
+    },
+    // 禁用启用
+    switchOff (val, row) {
+      this.$post(this.api.updateColumn, row).then(res => { }).catch((res) => { })
+    },
+    // 批量删除
+    batchDel () {
+      const list = this.multipleSelection
+      if (list.length) {
+        this.$confirm('删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？', '提示', {
+          type: 'warning'
+        }).then(() => {
+          const data = []
+          list.map(e => {
+            data.push('ids=' + e.id)
+          })
+          this.$post(`${this.api.deleteColumn}?${data.join('&')}`).then(res => {
+            this.$refs.table.clearSelection()
+            util.successMsg("删除成功")
+            this.getData()
+          }).catch(res => { })
+        }).catch(() => { })
+      } else {
+        util.errorMsg('请先选择数据 ！')
+      }
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+    handleCurrentChange (val) {
+      this.page = val
+      this.$router.push(`list?page=${val}`)
+      this.getData()
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.plus {
+    margin-top: 10px;
+    font-size: 20px;
+    text-align: center;
+    color: $main-color;
+    cursor: pointer;
+}
+.del {
+    margin-left: 5px;
+    font-size: 18px;
+    color: #333;
+    cursor: pointer;
+}
+$upload-width: 220px;
+$upload-height: 102px;
+$upload-lg-height: 102px;
+/deep/ .avatar-uploader {
+    .el-upload {
+        position: relative;
+        width: $upload-width;
+        height: $upload-height;
+        border: 1px solid #dcdee0;
+        border-radius: 2px;
+        cursor: pointer;
+        overflow: hidden;
+        .uploader-default {
+            display: flex;
+            height: $upload-height;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            background: #fafafa;
+            p {
+                margin-top: 10px;
+                font-size: 14px;
+                color: #333;
+                line-height: 20px;
+            }
+        }
+    }
+    &.avatar-uploader-lg {
+        .el-upload {
+            width: 100%;
+            max-width: 820px;
+            height: $upload-lg-height;
+
+            .uploader-default {
+                height: $upload-lg-height;
+            }
+        }
+    }
+    .avatar {
+        display: block;
+        width: $upload-width;
+        height: $upload-height;
+    }
+    .avatar-lg {
+        display: block;
+        width: 100%;
+        height: $upload-lg-height;
+    }
+    .el-upload__tip {
+        margin-top: 0;
+        p {
+            font-size: 12px;
+            color: #333;
+        }
+    }
+}
+.style-wrap {
+    display: flex;
+    margin-top: 10px;
+    .label {
+        margin-right: 30px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/floatingFrame.js b/src/router/modules/floatingFrame.js
new file mode 100644
index 0000000..c457c39
--- /dev/null
+++ b/src/router/modules/floatingFrame.js
@@ -0,0 +1,18 @@
+import BasicLayout from '@/layouts/home'
+
+const meta = {}
+
+const pre = 'article-'
+
+export default {
+    path: '/floatingFrame',
+    meta,
+    component: BasicLayout,
+    children: [
+        {
+            path: `/floatingFrame`,
+            component: () => import('@/pages/floatingFrame'),
+            meta: { title: '悬浮栏设置' }
+        },
+    ]
+}