导航图标设置

src/api/index.js

@@ -120,4 +120,11 @@ export default {
   productDetailsEnable: `/iasf/productDetails/articleEnableOrDisable`,
   productDetailsTop: `/iasf/productDetails/courseProductTopOperation`,
   productDetailsCheck: `/iasf/productDetails/checkIfTheTitleIsRepeat`,
+
+  navList: `/iasf/SysNavigationIconService/SysNavigationIcon/list`,
+  navDel: `/iasf/SysNavigationIconService/SysNavigationIcon/batchDeletion`,
+  navFind: `/iasf/SysNavigationIconService/SysNavigationIcon/findById`,
+  navSave: `/iasf/SysNavigationIconService/SysNavigationIcon/saveOrUpdate`,
+  navSort: `/iasf/SysNavigationIconService/SysNavigationIcon/updateSortOrder`,
+  navEnable: `/iasf/SysNavigationIconService/SysNavigationIcon/enableDisable`,
 }

src/layouts/header/index.vue

@@ -44,7 +44,7 @@ export default {
       sites: [],
       crumbRefresh: true,
       inContent: false, // 是否显示站点切换
-      sitePath: ['/page', '/column', '/article', '/seo', '/floatingFrame', '/footer', '/logo']
+      sitePath: ['/page', '/column', '/article', '/seo', '/floatingFrame', '/footer', '/logo', '/nav']
     };
   },
   components: {

src/layouts/navbar/index.vue

@@ -163,6 +163,10 @@ export default {
             {
               index: '/logo',
               title: '网站logo设置'
+            },
+            {
+              index: '/nav',
+              title: '导航图标设置'
             }
           ]
         }

src/pages/column/list/index.vue

@@ -448,10 +448,6 @@ export default {
     height: auto;
     border-bottom: 1px solid #ebedf0;
   }
-
-  // .el-tree-node__expand-icon {
-  //   display: none;
-  // }
 }
 
 .sort-line {

src/pages/nav/index.vue

@@ -0,0 +1,412 @@
+<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>
+        <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:更改排序'" class="lg" @click="sort">更改排序</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="title" show-overflow-tooltip label="标题" min-width="140"></el-table-column>
+      <el-table-column prop="scopeOfApplication" label="图标" min-width="140">
+        <template slot-scope="scope">
+          <img v-if="scope.row.icon" :src="scope.row.icon" alt="" class="icon m-t-10 m-b-10">
+        </template>
+      </el-table-column>
+      <el-table-column prop="buttonText" label="按钮文字" min-width="140" align="center"></el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
+      <el-table-column prop="updateTime" label="最近编辑" width="160"></el-table-column>
+      <el-table-column prop="editorSName" label="编辑人" width="120"></el-table-column>
+      <el-table-column label="状态" width="100">
+        <template slot-scope="scope">{{ scope.row.isDisable ? '禁用' : '启用' }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="160">
+        <template slot-scope="scope">
+          <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text"
+            @click="edit(scope.row)">编辑</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.isDisable" :active-value="0" :inactive-value="1"
+            @change="switchOff(scope.row)">
+          </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="form" label-suffix="：" label-width="130px">
+        <el-form-item label="标题" required>
+          <el-input style="width: 200px" placeholder="请输入标题" v-model="form.title" clearable maxlength="10"></el-input>
+        </el-form-item>
+        <el-form-item label="按钮文字">
+          <div class="flex">
+            <el-input style="width: 200px" placeholder="请输入按钮文字" v-model="form.buttonText" clearable
+              maxlength="10"></el-input>
+            <p class="m-l-10">按钮文字和图标至少填写一个</p>
+          </div>
+        </el-form-item>
+        <el-form-item label="图标">
+          <el-upload accept=".jpg,.png,.jpeg" :action="this.api.upload" :on-remove="handleRemove"
+            :on-error="uploadError" :before-remove="beforeRemove" :headers="headers" :file-list="fileList"
+            :on-success="res => uploadSuccess(res, 'icon')">
+            <div style="text-align: left;">
+              <el-button size="small" type="primary">上传图标</el-button>
+              {{ form.icon }}
+              <div class="m-t-10">
+                <img v-if="form.icon" :src="form.icon" class="icon">
+              </div>
+            </div>
+
+            <div slot="tip" class="el-upload__tip">
+              <p>只能上传jpg/png/svg文件，请上传25*25以内的图标</p>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="按钮内容设置" required>
+          <el-radio-group class="m-t-10" v-model="form.buttonContent">
+            <el-radio label="0">链接</el-radio>
+            <el-radio label="1">图片</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <template v-if="form.buttonContent === '0'">
+          <el-form-item label="链接地址" required>
+            <el-input style="width: 200px" placeholder="请输入链接地址" v-model="form.linkAddress" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="是否新开页面">
+            <el-switch v-model="form.newTab" :active-value="1" :inactive-value="0">
+            </el-switch>
+          </el-form-item>
+        </template>
+
+        <el-form-item v-else-if="form.buttonContent === '1'" label="图片">
+          <el-upload accept=".jpg,.png,.jpeg" :action="this.api.upload" :on-error="uploadError"
+            :before-remove="beforeRemove" :headers="headers" :show-file-list="false"
+            :on-success="res => uploadSuccess(res, 'imagePath')">
+            <div style="text-align: left;">
+              <el-button size="small" type="primary">上传图片</el-button>
+              <div class="m-t-10">
+                <img v-if="form.imagePath" :src="form.imagePath" style="max-width: 100px;">
+              </div>
+            </div>
+
+            <div slot="tip" class="el-upload__tip">
+              <p>只能上传jpg/png/svg文件，请上传1920px以内的图片</p>
+            </div>
+          </el-upload>
+        </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="sortVisible" width="750px" :close-on-click-modal="false">
+      <div class="sort-wrap">
+        <ul class="thead">
+          <li style="width: 300px;padding-left: 30px">标题</li>
+          <li style="width: 280px">图标</li>
+          <li>按钮文字</li>
+        </ul>
+        <el-tree class="sort" :data="sortColumns" node-key="id" default-expand-all draggable :allow-drop="allowDrop">
+          <ul class="sort-line" slot-scope="{ node, data }">
+            <li>{{ data.title }}</li>
+            <li><img v-if="data.icon" :src="data.icon" alt="" style="max-height: 20px"></li>
+            <li>{{ data.buttonText }}</li>
+          </ul>
+        </el-tree>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="sortVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sortSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Axios from 'axios'
+import _ from 'lodash'
+export default {
+  data () {
+    return {
+      headers: {
+        token: Util.local.get(Setting.tokenKey)
+      },
+      siteId: this.$store.state.content.site.id,
+      siteName: this.$store.state.content.site.siteName,
+      keyword: '',
+      searchTimer: null,
+      list: [],
+      multipleSelection: [],
+      listLoading: false,
+      originForm: {},
+      form: {
+        editorId: this.$store.state.user.userId,
+        title: '',
+        type: '',
+        newTab: 1,
+        linkAddress: '',
+        imagePath: '',
+        icon: '',
+        buttonText: '',
+        buttonContent: '',
+        siteId: this.$store.state.content.site.id,
+      },
+      fileList: [],
+      moduleVisible: false,
+
+      sortVisible: false,
+      sortColumns: [],
+    };
+  },
+  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.originForm = _.cloneDeep(this.form)
+    this.getData()
+  },
+  methods: {
+    getData () {
+      this.$post(`${this.api.navList}?siteId=${this.siteId}`, {
+        siteId: this.siteId,
+        search: this.keyword,
+      }).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.fileList = []
+      this.form = _.cloneDeep(this.originForm)
+      this.moduleVisible = true
+    },
+    async edit (row) {
+      this.moduleVisible = true
+      const { data } = await this.$post(`${this.api.navFind}?id=${row.id}`)
+      this.form = data
+      this.fileList = data.icon ? [{
+        name: data.icon,
+        url: data.icon
+      }] : []
+    },
+    // 模块设置提交
+    moduleSubmit () {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          if (this.submiting) return false
+          const form = _.cloneDeep(this.form)
+          if (!form.title) return Util.warningMsg('请填写标题')
+          if (!form.buttonText && !form.icon) return Util.warningMsg('按钮文字和图标至少填写一个')
+          if (!form.buttonContent) return Util.warningMsg('请选择按钮内容')
+          if (form.buttonContent === '0' && !form.linkAddress) return Util.warningMsg('请设置链接地址')
+          if (form.buttonContent === '1' && !form.imagePath) return Util.warningMsg('请上传图片')
+
+          this.submiting = true
+          // form.isDisable = 1
+          if (!form.id) form.founderId = form.editorId // 新增则创建人即编辑人
+          try {
+            await this.$post(this.api.navSave, form)
+            Util.successMsg('新增成功！')
+            this.moduleVisible = false
+            this.getData()
+            setTimeout(() => {
+              this.submiting = false
+            }, 2000)
+          } catch (e) {
+            this.submiting = false
+          }
+        }
+      })
+    },
+
+    del (row) {
+      this.$confirm('确定要删除吗？', "提示", {
+        type: "warning"
+      }).then(() => {
+        this.$post(`${this.api.navDel}?ids=${row.id}`).then(res => {
+          Util.successMsg("删除成功")
+          this.getData()
+        }).catch(res => { })
+      }).catch(() => { })
+    },
+    // 禁用启用
+    async switchOff (row) {
+      try {
+        await this.$post(`${this.api.navEnable}?id=${row.id}&isDisable=${row.isDisable}`)
+        this.getData()
+      } catch (e) { }
+    },
+    // 批量删除
+    batchDel () {
+      const list = this.multipleSelection
+      if (list.length) {
+        this.$confirm('确定要删除吗？', '提示', {
+          type: 'warning'
+        }).then(() => {
+          const ids = list.map(e => {
+            return 'ids=' + e.id
+          })
+          this.$post(`${this.api.navDel}?${ids.join('&')}`).then(res => {
+            this.$refs.table.clearSelection()
+            Util.successMsg("删除成功")
+            this.getData()
+          }).catch(res => { })
+        }).catch(() => { })
+      } else {
+        Util.errorMsg('请先选择数据 ！')
+      }
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+
+    handleExceed () { // 上传文件
+      Util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！")
+    },
+    // 附件上传成功
+    uploadSuccess (data, prop) {
+      if (data.code === 401) {
+        Util.errorMsg("登录过期，请重新登录")
+        setTimeout(() => {
+          this.$store.dispatch('user/logout')
+        }, 1000)
+        return false
+      }
+      this.form[prop] = data.url
+      if (prop === 'icon') this.fileList = [{
+        name: data.original,
+        url: data.url
+      }]
+    },
+    uploadError (err, file, fileList) {
+      this.$message({
+        message: "上传出错，请重试！",
+        type: "error",
+        center: true
+      });
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handleRemove () {
+      this.form.icon = ''
+    },
+
+
+    // 更改排序
+    sort () {
+      this.sortColumns = _.cloneDeep(this.list)
+      this.sortVisible = true
+    },
+    // 拖拽放置的条件(只能存在一级)
+    allowDrop (draggingNode, dropNode, type) {
+      return type !== 'inner'
+    },
+    // 排序提交
+    async sortSubmit () {
+      const result = this.sortColumns.map((e, i) => {
+        return {
+          id: e.id,
+          sortOrder: i + 1
+        }
+      })
+      await this.$post(this.api.navSort, result)
+      Util.successMsg('修改成功')
+      this.sortVisible = false
+      this.getData()
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  max-width: 30px;
+}
+
+.sort-wrap {
+  max-height: 400px;
+  overflow: auto;
+}
+
+.thead {
+  display: flex;
+  line-height: 44px;
+  background-color: #f7f7f7;
+
+  li {
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #323232;
+  }
+}
+
+/deep/.sort {
+  .el-tree-node__content {
+    height: auto;
+    border-bottom: 1px solid #ebedf0;
+  }
+}
+
+.sort-line {
+  display: flex;
+  width: 100%;
+
+  li {
+    padding: 12px 0;
+
+    &:first-child {
+      width: 230px;
+    }
+
+    &:nth-child(2) {
+      position: absolute;
+      left: 310px;
+    }
+
+    &:last-child {
+      position: absolute;
+      right: 80px;
+    }
+  }
+}
+</style>

src/router/modules/nav.js

@@ -0,0 +1,16 @@
+import BasicLayout from '@/layouts/home'
+
+const meta = {}
+
+export default {
+  path: '/nav',
+  meta,
+  component: BasicLayout,
+  children: [
+    {
+      path: `/nav`,
+      component: () => import('@/pages/nav'),
+      meta: { title: '导航图标设置' }
+    },
+  ]
+}

src/setting.js

@@ -5,7 +5,7 @@ const isDev = process.env.NODE_ENV === 'development' // 开发环境
 let host = location.origin
 if (isDev) {
   host = 'https://huorantech.com'
-  // host = 'http://192.168.31.217:10000'
+  host = 'http://192.168.31.217:10000'
 }
 
 const Setting = {