huoran
/
FE_huoran_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页脚配置及栏目和文章表格字段筛选缓存

Browse Source
master
yujialong 6 months ago
parent d8ea4f0cf4
commit d6c5319198
7 changed files with 572 additions and 361 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/api/index.js
  2. BIN
      src/assets/images/footer-bg.png
  3. 336
      src/const/modules.js
  4. 2
      src/mixins/page/index.js
  5. 36
      src/pages/article/list/index.vue
  6. 45
      src/pages/column/list/index.vue
  7. 486
      src/pages/footer/index.vue

12
src/api/index.js
Unescape View File

@ -42,6 +42,8 @@ export default {
sameLevelJudgment: `/iasf/sysColumn/sameLevelJudgment`, sameLevelJudgment: `/iasf/sysColumn/sameLevelJudgment`,
sortByColumn: `/iasf/sysColumn/sortByColumn`, sortByColumn: `/iasf/sysColumn/sortByColumn`,
controlDisplayNavigationMenu: `/iasf/sysColumn/controlDisplayNavigationMenu`, controlDisplayNavigationMenu: `/iasf/sysColumn/controlDisplayNavigationMenu`,
cacheField: `/iasf/sysColumn/cacheField`,
getCacheField: `/iasf/sysColumn/getCacheField`,
checkIfTheTitleIsRepeat: `/iasf/sysContent/checkIfTheTitleIsRepeat`, checkIfTheTitleIsRepeat: `/iasf/sysContent/checkIfTheTitleIsRepeat`,
deleteArticle: `/iasf/sysContent/batchDeletion`, deleteArticle: `/iasf/sysContent/batchDeletion`,
findArticle: `/iasf/sysContent/findById`, findArticle: `/iasf/sysContent/findById`,
@ -50,6 +52,8 @@ export default {
saveArticle: `/iasf/sysContent/save`, saveArticle: `/iasf/sysContent/save`,
updateArticle: `/iasf/sysContent/update`, updateArticle: `/iasf/sysContent/update`,
modifiedSort: `/iasf/sysContent/modifiedSort`, modifiedSort: `/iasf/sysContent/modifiedSort`,
cacheFieldContent: `/iasf/sysContent/cacheField`,
getCacheFieldContent: `/iasf/sysContent/getCacheField`,
longPageColumnList: `/iasf/pageManagement/longPageColumnList`, longPageColumnList: `/iasf/pageManagement/longPageColumnList`,
searchAllBySite: `/iasf/sysNavigationStyle/searchAllBySite`, searchAllBySite: `/iasf/sysNavigationStyle/searchAllBySite`,
updateStyle: `/iasf/sysNavigationStyle/update`, updateStyle: `/iasf/sysNavigationStyle/update`,
@ -90,4 +94,12 @@ export default {
saveFloating: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/saveOrUpdate`, saveFloating: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/saveOrUpdate`,
checkEnableOrDisable: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/checkEnableOrDisable`, checkEnableOrDisable: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/checkEnableOrDisable`,
enableOrDisableScheme: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/enableOrDisableScheme`, enableOrDisableScheme: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/enableOrDisableScheme`,
enableOrDisableScheme: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/enableOrDisableScheme`,
batchDeletionFooter: `/iasf/SysFooterSetupService/SysFooterSetup/batchDeletion`,
findFooter: `/iasf/SysFooterSetupService/SysFooterSetup/findById`,
footerList: `/iasf/SysFooterSetupService/SysFooterSetup/footerList`,
saveFooter: `/iasf/SysFooterSetupService/SysFooterSetup/saveOrUpdate`,
checkEnableOrDisableFooter: `/iasf/SysFooterSetupService/SysFooterSetup/checkEnableOrDisable`,
enableOrDisableSchemeFooter: `/iasf/SysFooterSetupService/SysFooterSetup/enableOrDisableScheme`,
} }

BIN
src/assets/images/footer-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

336
src/const/modules.js
Unescape View File

@ -807,110 +807,6 @@ export default {
}, },
] ]
}, },
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
},
{
type: 'input',
prop: 'des',
label: '描述'
}
],
form: {
title: '联系我们',
des: `CONTACT US`
}
},
{
type: 'form',
forms: [
{
type: 'upload',
prop: 'pic',
label: 'logo',
width: 185,
height: 44
},
{
type: 'input',
prop: 'siteName',
label: '公司官网',
},
{
type: 'input',
prop: 'address',
label: '地址'
},
{
type: 'input',
prop: 'phone',
label: '合作咨询',
},
{
type: 'input',
prop: 'mail',
label: '客户建议'
},
],
form: {
pic: 'https://huorantech.com/images/about/logo.png',
siteName: '公司官网：www.huorantech.com',
address: `地址：广东省深圳市南山区粤海街道海天二路盈峰中心2101`,
phone: `合作咨询：郭经理 17671782660`,
mail: `客户建议：service@huorantech.cn`,
},
labelWidth: '100px'
},
{
type: 'form',
forms: [
{
type: 'upload',
prop: 'pic',
label: '公众号二维码',
width: 103,
height: 103
},
{
type: 'input',
prop: 'title',
label: '公众号文案'
},
],
form: {
pic: 'https://huorantech.com/images/about/qrcode.jpg',
title: `扫一扫，关注公众号`,
},
labelWidth: '100px'
},
{
type: 'form',
forms: [
{
type: 'upload',
prop: 'pic',
label: '小程序二维码',
width: 103,
height: 103
},
{
type: 'input',
prop: 'title',
label: '小程序文案'
},
],
form: {
pic: 'https://huorantech.com/images/about/mini-program-sm.jpg',
title: `扫一扫，登录职站商城`,
},
labelWidth: '100px'
},
], ],
about: [ about: [
@ -12618,4 +12514,236 @@ export default {
], ],
}, },
], ],
footer: [
[
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
},
{
type: 'input',
prop: 'des',
label: '描述'
},
{
type: 'input',
prop: 'area',
label: '地区',
},
],
form: {
title: '联系我们',
des: `CONTACT US`,
area: '深圳',
}
},
{
type: 'form',
forms: [
{
type: 'upload',
prop: 'pic',
label: 'logo',
width: 185,
height: 44
},
{
type: 'input',
prop: 'siteName',
label: '公司官网',
},
{
type: 'input',
prop: 'address',
label: '地址'
},
{
type: 'input',
prop: 'phone',
label: '合作咨询',
},
{
type: 'input',
prop: 'mail',
label: '客户建议'
},
],
form: {
pic: 'https://huorantech.com/images/about/logo.png',
siteName: '公司官网：www.huorantech.com',
address: `地址：广东省深圳市南山区粤海街道海天二路盈峰中心2101`,
phone: `合作咨询：郭经理 17671782660`,
mail: `客户建议：service@huorantech.cn`,
},
labelWidth: '100px'
},
{
type: 'form',
forms: [
{
type: 'upload',
prop: 'pic',
label: '公众号二维码',
width: 103,
height: 103
},
{
type: 'input',
prop: 'title',
label: '公众号文案'
},
],
form: {
pic: 'https://huorantech.com/images/about/qrcode.jpg',
title: `扫一扫，关注公众号`,
},
labelWidth: '100px'
},
{
type: 'form',
forms: [
{
type: 'upload',
prop: 'pic',
label: '小程序二维码',
width: 103,
height: 103
},
{
type: 'input',
prop: 'title',
label: '小程序文案'
},
],
form: {
pic: 'https://huorantech.com/images/about/mini-program-sm.jpg',
title: `扫一扫，登录职站商城`,
},
labelWidth: '100px'
},
],
[
{
type: 'form',
forms: [
{
type: 'upload',
prop: 'pic',
label: 'logo',
},
{
type: 'editor',
prop: 'info',
label: '信息',
},
],
form: {
pic: `https://huorantech.com/images/about/logo.png`,
info: `<div style="text-align: center">
<p style="margin-bottom: 10px;font-size: 14px;">广东省深圳市龙华区民治街道红山社区龙光玖钻商务中心南期A座2311</p>
<a style="font-size: 14px;color: #6d7384" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
</div>`,
}
},
],
[
{
type: 'form',
forms: [
{
type: 'editor',
prop: 'info',
label: '信息',
},
],
form: {
pic: `https://huorantech.com/images/about/logo.png`,
info: `<div style="font-size: 14px;color: #bbb;line-height: 1.6;">
<img src="https://huorantech.com/images/about/logo.png" alt="">
<p style="margin: 15px 0;">一站式数字经济实训软件采购商城</p>
<p>公司官网：www.huorantech.com</p>
<p>合作咨询：15218726836</p>
<p>客户建议：service@huorantech.cn</p>
<p>地址：广东省深圳市龙华区民治街道红山社区龙光玖钻商务中心南期A座2311</p>
</div>`,
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题'
},
{
type: 'upload',
prop: 'pic',
label: '公众号二维码',
width: 103,
height: 103
},
{
type: 'input',
prop: 'des',
label: '公众号文案'
},
],
form: {
pic: 'https://huorantech.com/images/about/qrcode.jpg',
title: `公众号`,
des: `扫一扫，关注公众号`,
},
labelWidth: '100px'
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题'
},
{
type: 'upload',
prop: 'pic',
label: '小程序二维码',
width: 103,
height: 103
},
{
type: 'input',
prop: 'des',
label: '小程序文案'
},
],
form: {
pic: 'https://huorantech.com/images/about/mini-program-sm.jpg',
title: `微信小程序`,
des: `扫一扫，登录职站商城`,
},
labelWidth: '100px'
},
{
type: 'form',
forms: [
{
type: 'editor',
prop: 'info',
label: '信息',
},
],
form: {
info: `<a style="display: block;margin-top: 20px;font-size: 14px;color: #6d7384;text-align: center;text-decoration: none;background-color: transparent;" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
<img style="margin-right: 5px;" src="https://huorantech.com/images/police.svg" alt="">
粤ICP备20072679号
</a>`,
}
},
]
]
} }

2
src/mixins/page/index.js
Unescape View File

@ -84,6 +84,8 @@ export default {
console.log("🚀 ~ file: index.js:85 ~ this.$post ~ list:", this.modules) console.log("🚀 ~ file: index.js:85 ~ this.$post ~ list:", this.modules)
} }
}).catch(err => { }) }).catch(err => { })
} else {
this.pass = true
} }
}, },
// 展开模块设置 // 展开模块设置

36
src/pages/article/list/index.vue
Unescape View File

@ -29,7 +29,7 @@
<el-button @click="resetColumns" type="text">列重置</el-button> <el-button @click="resetColumns" type="text">列重置</el-button>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0"> <el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0">
<el-checkbox v-model="column.show">{{ column.name }}</el-checkbox> <el-checkbox v-model="column.show" @change="fieldChange">{{ column.name }}</el-checkbox>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -67,7 +67,7 @@
sortable="custom"></el-table-column> sortable="custom"></el-table-column>
<el-table-column v-if="settings[9].show" prop="totalBrowsing" label="总浏览" align="center" <el-table-column v-if="settings[9].show" prop="totalBrowsing" label="总浏览" align="center"
min-width="70"></el-table-column> min-width="70"></el-table-column>
<el-table-column v-if="settings[10].show" prop="workNumber" label="状态" align="center" min-width="80"> <el-table-column v-if="settings[10].show" label="状态" align="center" min-width="80">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.isRelease ? '已发布' : '草稿' }} {{ scope.row.isRelease ? '已发布' : '草稿' }}
</template> </template>
@ -112,7 +112,9 @@ export default {
return { return {
last: this.$route.query.last, // 是否直接跳到最后一页的文章（编辑文章的时候改了所属栏目，返回到列表后则需要跳到最后一页文章） last: this.$route.query.last, // 是否直接跳到最后一页的文章（编辑文章的时候改了所属栏目，返回到列表后则需要跳到最后一页文章）
types: ColumnConst.types, types: ColumnConst.types,
siteId: this.$store.state.content.site.id,
siteName: this.$store.state.content.site.siteName, siteName: this.$store.state.content.site.siteName,
userId: +this.$store.state.user.userId,
columns: [], columns: [],
defaultProps: { defaultProps: {
value: 'id', value: 'id',
@ -149,50 +151,62 @@ export default {
originSettings: [], originSettings: [],
settings: [ settings: [
{ {
field: 'checkbox',
name: '选择框', name: '选择框',
show: true show: true
}, },
{ {
field: 'title',
name: '标题', name: '标题',
show: true show: true
}, },
{ {
field: 'columnName',
name: '栏目', name: '栏目',
show: true show: true
}, },
{ {
field: 'classificationName',
name: '所属分类', name: '所属分类',
show: false show: false
}, },
{ {
field: 'typeId',
name: '栏目类型', name: '栏目类型',
show: true show: true
}, },
{ {
field: 'founderName',
name: '录入人', name: '录入人',
show: true show: true
}, },
{ {
field: 'editorName',
name: '修改人', name: '修改人',
show: true show: true
}, },
{ {
field: 'updateTime',
name: '修改日期', name: '修改日期',
show: true show: true
}, },
{ {
field: 'releaseTime',
name: '发布日期', name: '发布日期',
show: true show: true
}, },
{ {
field: 'totalBrowsing',
name: '总浏览', name: '总浏览',
show: true show: true
}, },
{ {
field: 'isRelease',
name: '状态', name: '状态',
show: true show: true
}, },
{ {
field: 'action',
name: '操作', name: '操作',
show: true show: true
} }
@ -222,6 +236,7 @@ export default {
} }
]) ])
this.originSettings = JSON.parse(JSON.stringify(this.settings)) this.originSettings = JSON.parse(JSON.stringify(this.settings))
this.getField()
this.getColumn() this.getColumn()
}, },
methods: { methods: {
@ -280,6 +295,23 @@ export default {
} }
}).catch(err => { }) }).catch(err => { })
}, },
// 获取表格字段缓存
async getField () {
const { data } = await this.$get(this.api.getCacheFieldContent, {
userId: this.userId,
siteId: this.siteId,
})
if (data) {
this.settings.map(e => {
const cur = data.find(n => e.field === n)
e.show = cur ? true : false
})
}
},
// 表格字段缓存
async fieldChange () {
await this.$post(`${this.api.cacheFieldContent}?userId=${this.userId}&siteId=${this.siteId}&fields=${this.settings.filter(e => e.show).map(e => e.field).join()}`)
},
// 重置栏位筛选 // 重置栏位筛选
resetColumns () { resetColumns () {
this.settings = JSON.parse(JSON.stringify(this.originSettings)) this.settings = JSON.parse(JSON.stringify(this.originSettings))

45
src/pages/column/list/index.vue
Unescape View File

@ -12,7 +12,7 @@
<el-button @click="resetColumns" type="text">列重置</el-button> <el-button @click="resetColumns" type="text">列重置</el-button>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0"> <el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0">
<el-checkbox v-model="column.show">{{ column.name }}</el-checkbox> <el-checkbox v-model="column.show" @change="fieldChange">{{ column.name }}</el-checkbox>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -140,6 +140,7 @@ export default {
return { return {
siteId: this.$store.state.content.site.id, siteId: this.$store.state.content.site.id,
siteName: this.$store.state.content.site.siteName, siteName: this.$store.state.content.site.siteName,
userId: +this.$store.state.user.userId,
types: ColumnConst.types, types: ColumnConst.types,
templates: [], templates: [],
listStyle: [], listStyle: [],
@ -166,36 +167,44 @@ export default {
originSettings: [], originSettings: [],
settings: [ settings: [
{ {
field: 'checkbox',
name: '选择框', name: '选择框',
show: true show: true,
}, },
{ {
field: 'typeId',
name: '栏目类型', name: '栏目类型',
show: true show: true,
}, },
{ {
field: 'templateName',
name: '栏目模板', name: '栏目模板',
show: true show: true,
}, },
{ {
field: 'listStyle',
name: '列表/长页样式', name: '列表/长页样式',
show: true show: true,
}, },
{ {
field: 'detailStyle',
name: '详情样式', name: '详情样式',
show: true show: true,
}, },
{ {
field: 'menuVisible',
name: '导航菜单', name: '导航菜单',
show: true show: true,
}, },
{ {
field: 'id',
name: 'ID', name: 'ID',
show: true show: true,
}, },
{ {
field: 'action',
name: '操作', name: '操作',
show: true show: true,
} }
], ],
sortVisible: false, sortVisible: false,
@ -225,6 +234,7 @@ export default {
} }
]) ])
this.originSettings = JSON.parse(JSON.stringify(this.settings)) this.originSettings = JSON.parse(JSON.stringify(this.settings))
this.getField()
this.getData() this.getData()
}, },
methods: { methods: {
@ -242,6 +252,23 @@ export default {
this.listLoading = false this.listLoading = false
}) })
}, },
// 获取表格字段缓存
async getField () {
const { data } = await this.$get(this.api.getCacheField, {
userId: this.userId,
siteId: this.siteId,
})
if (data) {
this.settings.map(e => {
const cur = data.find(n => e.field === n)
e.show = cur ? true : false
})
}
},
// 表格字段缓存
async fieldChange () {
await this.$post(`${this.api.cacheField}?userId=${this.userId}&siteId=${this.siteId}&fields=${this.settings.filter(e => e.show).map(e => e.field).join()}`)
},
// 根据模板id获取样式 // 根据模板id获取样式
getStyle () { getStyle () {
this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => { this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => {

486
src/pages/footer/index.vue
Unescape View File

@ -13,9 +13,11 @@
<el-table v-loading="listLoading" ref="table" :data="list" default-expand-all class="table" header-align="center" <el-table v-loading="listLoading" ref="table" :data="list" default-expand-all class="table" header-align="center"
@selection-change="handleSelectionChange" row-key="id"> @selection-change="handleSelectionChange" row-key="id">
<el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column> <el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column>
<el-table-column prop="schemeName" show-overflow-tooltip label="页脚名称" min-width="140"></el-table-column> <el-table-column prop="footerName" show-overflow-tooltip label="页脚名称" min-width="140"></el-table-column>
<el-table-column prop="scopeOfApplication" label="应用范围" min-width="100"></el-table-column> <el-table-column prop="scopeOfApplication" label="应用范围" min-width="100"></el-table-column>
<el-table-column prop="numberOfContentModules" label="模块名称" min-width="100"></el-table-column> <el-table-column prop="templateName" label="模块名称" min-width="100">
<!-- <template slot-scope="scope">{{ styles[scope.row.floatingBarStyle].name }}</template> -->
</el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="100"></el-table-column> <el-table-column prop="createTime" label="创建时间" min-width="100"></el-table-column>
<el-table-column prop="updateTime" label="最近编辑" min-width="100"></el-table-column> <el-table-column prop="updateTime" label="最近编辑" min-width="100"></el-table-column>
<el-table-column prop="editorSName" label="编辑人" min-width="100"></el-table-column> <el-table-column prop="editorSName" label="编辑人" min-width="100"></el-table-column>
@ -39,84 +41,139 @@
layout="total, prev, pager, next" :total="total"></el-pagination> layout="total, prev, pager, next" :total="total"></el-pagination>
</div> </div>
<el-dialog title="模块管理" :visible.sync="moduleVisible" width="1000px" :close-on-click-modal="false"> <el-dialog title="模块管理" :visible.sync="moduleVisible" width="1200px" :close-on-click-modal="false"
@closed="moduleClose">
<el-form ref="form" :model="form" :rules="rules" label-suffix="："> <el-form ref="form" :model="form" :rules="rules" label-suffix="：">
<div class="flex"> <div class="flex">
<el-form-item prop="schemeName" label="页脚名称" label-width="100px"> <el-form-item prop="footerName" label="页脚名称" label-width="100px">
<el-input style="width: 200px" placeholder="请输入页脚名称" v-model="form.schemeName" clearable <el-input style="width: 200px" placeholder="请输入页脚名称" v-model="form.footerName" clearable
maxlength="10"></el-input> maxlength="10"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="style" label="页脚样式" label-width="110px"> <el-form-item prop="style" label="页脚样式" label-width="110px">
<el-select v-model="form.floatingBarStyle" clearable> <el-select v-model="form.floatingBarStyle" @change="styleChange">
<el-option v-for="item in styles" :key="item.id" :label="item.name" :value="item.id"> <el-option v-for="item in styles" :key="item.id" :label="item.name" :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
<!-- <div class="contact"> <div v-if="modules.length" class="m-b-20">
<div class="inner"> <!-- 常规样式 -->
<div class="title c-wrap"> <div v-if="form.floatingBarStyle === 1" class="contact">
<h6>{{ modules[10].form.title }}</h6> <div class="c-wrap">
<p class="text">{{ modules[10].form.des }}</p> <div class="title">
<div class="cover" @click="toSet(10)">点击更改标题与描述</div> <h6>{{ modules[0].form.title }}</h6>
<p class="text">{{ modules[0].form.des }}</p>
</div> </div>
<div class="region"> <div class="region">
<img class="dot" src="https://huorantech.com/images/about/dot.png" alt=""> <img class="dot" src="https://huorantech.com/images/about/dot.png" alt="">
<p class="name">深圳</p> <p class="name">{{ modules[0].form.area }}</p>
</div>
<div class="cover" @click="toSet(0)">点击更改标题、描述与地区</div>
</div> </div>
<div class="info"> <div class="info">
<img class="logo" :src="modules[11].form.pic" alt=""> <img class="logo" :src="modules[1].form.pic" alt="">
<div class="texts c-wrap"> <div class="texts c-wrap">
<div class="item"> <div class="item">
<div class="line"> <div class="line">
<img class="icon" src="https://huorantech.com/images/about/site.png" alt=""> <img class="icon" src="https://huorantech.com/images/about/site.png" alt="">
{{ modules[11].form.siteName }} {{ modules[1].form.siteName }}
</div> </div>
<div class="line"> <div class="line">
<img class="icon" src="https://huorantech.com/images/about/address.png" alt=""> <img class="icon" src="https://huorantech.com/images/about/address.png" alt="">
{{ modules[11].form.address }} {{ modules[1].form.address }}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="line"> <div class="line">
<img class="icon" src="https://huorantech.com/images/about/phone.png" alt=""> <img class="icon" src="https://huorantech.com/images/about/phone.png" alt="">
{{ modules[11].form.phone }} {{ modules[1].form.phone }}
</div> </div>
<div class="line"> <div class="line">
<img class="icon" src="https://huorantech.com/images/about/mail.png" alt=""> <img class="icon" src="https://huorantech.com/images/about/mail.png" alt="">
{{ modules[11].form.mail }} {{ modules[1].form.mail }}
</div> </div>
</div> </div>
<div class="cover" style="width: 800px" @click="toSet(11)">点击更改信息</div> <div class="cover" style="width: 760px" @click="toSet(1)">点击更改信息</div>
<div class="qrcode c-wrap"> <div class="qrcode c-wrap">
<img width="103" :src="modules[12].form.pic" alt=""> <img width="103" :src="modules[2].form.pic" alt="">
<p class="text">{{ modules[12].form.title }}</p> <p class="text">{{ modules[2].form.title }}</p>
<div class="cover" @click="toSet(12)">点击更改信息</div> <div class="cover" @click="toSet(2)">点击更改信息</div>
</div> </div>
<div class="qrcode c-wrap m-l-30"> <div class="qrcode c-wrap m-l-30">
<img width="103" :src="modules[13].form.pic" alt=""> <img width="103" :src="modules[3].form.pic" alt="">
<p class="text">{{ modules[13].form.title }}</p> <p class="text">{{ modules[3].form.title }}</p>
<div class="cover" @click="toSet(13)">点击更改信息</div> <div class="cover" @click="toSet(3)">点击更改信息</div>
</div>
</div>
</div>
</div>
<!-- 含网站导航 -->
<div v-else-if="form.floatingBarStyle === 2" class="footer">
<div class="relative text-center">
<img :src="modules[0].form.pic" alt="">
<div class="flex j-center a-center m-t-20">
<div class="flex">
</div> </div>
</div> </div>
<div class="flex j-center a-center m-t-20">
<div class="flex">
<div v-for="(item, i) in columns.slice(0, 5)" :key="i" class="column">
<h6>{{ item.columnName }}</h6>
<ul v-if="item.children.length" class="children">
<li v-for="(column, j) in item.children" :key="j">{{ column.columnName }}</li>
</ul>
</div>
</div>
</div>
<div v-html="modules[0].form.info"></div>
</div>
<div class="cover" @click="toSet(0)">点击更改页脚信息</div>
</div>
<!-- 英文字母 -->
<div v-else-if="form.floatingBarStyle === 3" class="footer3">
<div class="flex j-between">
<div class="c-wrap">
<div v-html="modules[0].form.info"></div>
<div class="cover" @click="toSet(0)">点击更改页脚信息</div>
</div>
<div class="flex text-center">
<div class="qrcode">
<p class="title">{{ modules[1].form.title }}</p>
<img width="103" :src="modules[1].form.pic" alt="">
<p class="text">{{ modules[1].form.des }}</p>
<div class="cover" @click="toSet(1)">点击更改信息</div>
</div>
<div class="qrcode m-l-30">
<p class="title">{{ modules[2].form.title }}</p>
<img width="103" :src="modules[2].form.pic" alt="">
<p class="text">{{ modules[2].form.des }}</p>
<div class="cover" @click="toSet(2)">点击更改信息</div>
</div>
</div>
</div>
<div class="c-wrap">
<div v-html="modules[3].form.info"></div>
<div class="cover" @click="toSet(3)">点击更改版权信息</div>
</div>
</div> </div>
</div> </div>
</div> -->
<el-form-item label="应用范围"> <el-form-item label="应用范围">
<div class="flex"> <div class="flex">
<el-radio-group class="m-t-10" v-model="range"> <el-radio-group class="m-t-10" v-model="form.isGlobal">
<el-radio :label="0">网站全局</el-radio> <el-radio :label="1">网站全局</el-radio>
<el-radio :label="1">选择栏目</el-radio> <el-radio :label="0">选择栏目</el-radio>
</el-radio-group> </el-radio-group>
<el-cascader v-if="range" class="m-l-30" v-model="selectColumn" :options="columns" :props="columnProps" <el-cascader v-if="!form.isGlobal" class="m-l-30" v-model="selectColumn" :options="columns"
clearable></el-cascader> :props="columnProps" clearable></el-cascader>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="moduleVisible = false">取消</el-button> <el-button @click="moduleVisible = false">取消</el-button>
<el-button type="primary" @click="moduleSubmit">确定</el-button> <el-button type="primary" @click="moduleSave">确定</el-button>
</span> </span>
</el-dialog> </el-dialog>
@ -125,16 +182,14 @@
</template> </template>
<script> <script>
import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import Axios from 'axios' import Modules from '@/const/modules'
import Editor from '@tinymce/tinymce-vue' import mixins from '@/mixins/page'
import editorConfig from '@/components/editor'
import _ from 'lodash' import _ from 'lodash'
export default { export default {
mixins: [mixins],
data () { data () {
return { return {
editorConfig,
siteId: this.$store.state.content.site.id, siteId: this.$store.state.content.site.id,
siteName: this.$store.state.content.site.siteName, siteName: this.$store.state.content.site.siteName,
keyword: '', keyword: '',
@ -145,9 +200,23 @@ export default {
total: 0, total: 0,
multipleSelection: [], multipleSelection: [],
listLoading: false, listLoading: false,
range: 0,
selectColumn: [], selectColumn: [],
styles: [], allModule: Modules.footer,
modules: Modules.footer[0],
styles: [
{
id: 1,
name: '常规样式'
},
{
id: 2,
name: '含网站导航'
},
{
id: 3,
name: '英文字母'
},
],
columns: [], columns: [],
columnProps: { columnProps: {
multiple: true, multiple: true,
@ -157,90 +226,21 @@ export default {
originForm: {}, originForm: {},
form: { form: {
editorId: this.$store.state.user.userId, editorId: this.$store.state.user.userId,
schemeName: '', footerName: '',
floatingBarStyle: '1', floatingBarStyle: 1,
siteId: this.$store.state.content.site.id, siteId: this.$store.state.content.site.id,
floatingColumnSchemeModules: [ isGlobal: 1,
{ footerSetupScopeOfApplications: [],
pictureAddress: 'https://huorantech.com/images/index/wechat.png', footerContent: '',
schemeTitle: '微信扫码添加职站售前咨询',
isDisable: 0,
schemeContentJson: `
<div style="width: 168px;text-align: center;line-height: normal;">
<p style="margin: 5px 0 15px;font-size: 12px;color: #333;">提供付费咨询及解决方案</p>
<img width="150" src="https://huorantech.com/images/index/customer.png" alt="">
</div>
`
},
{
pictureAddress: 'https://huorantech.com/images/index/tel.png',
schemeTitle: '',
isDisable: 0,
schemeContentJson: `
<div style="width: 190px;line-height: normal;">
<div style="display: flex;margin-bottom: 20px;">
<div>
<img src="https://huorantech.com/images/index/tel-2.png" alt="">
</div>
<div style="margin-left: 15px;">
<p style="font-size: 14px;cursor: pointer;">售前咨询</p>
<p style="margin: 5px 0;font-size: 12px;color: #006eff;">金老师</p>
<p style="font-size: 12px;color: #006eff;">15218726836</p>
</div>
</div>
<div style="display: flex;">
<div>
<img src="https://huorantech.com/images/index/sug.png" alt="">
</div>
<div style="margin-left: 15px;">
<a style="font-size: 14px;color: #333;text-decoration: none;cursor: pointer;" target="_blank" href="https://www.wjx.cn/vm/wB0RcMm.aspx">咨询，建议与反馈</a>
<p style="margin-top: 5px;font-size: 12px;color: #686868;">您的每一条建议声音，我们都认真对待</p>
</div>
</div>
</div>
`
}
],
floatingColumnSchemeScopeOfApplications: [],
},
originModules: {
pictureAddress: '',
schemeContentJson: '',
schemeTitle: '',
isDisable: 0,
}, },
rules: { rules: {
schemeName: [ footerName: [
{ required: true, message: '请输入悬浮栏目名称', trigger: 'blur' } { required: true, message: '请输入页脚名称', trigger: 'blur' }
], ],
}, },
moduleVisible: false, moduleVisible: false,
modules: [],
curRow: {},
curModule: 0,
contentVisible: false,
contentRules: {
pictureAddress: [
{ required: true, message: '请上传图片', trigger: 'change' }
],
// schemeTitle: [
// { required: true, message: '请输入标题', trigger: 'blur' }
// ],
schemeContentJson: [
{ required: true, message: '请输入内容', trigger: 'blur' }
],
},
cropperModel: false,
isUpload: false,
fixedNumber: [1, 1],
file: {}, // 当前被选择的图片文件
}; };
}, },
components: {
Editor,
},
watch: { watch: {
keyword: function (val) { keyword: function (val) {
clearTimeout(this.searchTimer) clearTimeout(this.searchTimer)
@ -262,13 +262,14 @@ export default {
name: '页脚设置' name: '页脚设置'
} }
]) ])
// this.originForm = _.cloneDeep(this.form) this.originForm = _.cloneDeep(this.form)
// this.getData() console.log(111, Modules.footer, this.modules)
// this.getColumn() this.getData()
this.getColumn()
}, },
methods: { methods: {
getData () { getData () {
this.$post(this.api.listFloating, { this.$post(this.api.footerList, {
siteId: this.siteId, siteId: this.siteId,
search: this.keyword, search: this.keyword,
pageNum: this.page, pageNum: this.page,
@ -299,37 +300,15 @@ export default {
this.columns = data this.columns = data
}, },
add () { add () {
this.range = 0 this.modules = this.allModule[0]
this.selectColumn = [] this.selectColumn = []
this.form = _.cloneDeep(this.originForm) this.form = _.cloneDeep(this.originForm)
this.moduleVisible = true this.moduleVisible = true
}, },
// 添加行
addRow () {
this.curRow = _.cloneDeep(this.originModules)
this.curModule = -1
this.contentVisible = true
},
// 编辑内容
editRow (row, i = 0) {
this.curRow = _.cloneDeep(row)
this.curModule = i
this.contentVisible = true
},
// 删除行（通用）
delRow (i) {
this.$confirm('确定要删除吗？', '提示', {
type: 'warning'
}).then(() => {
this.form.floatingColumnSchemeModules.splice(i, 1)
}).catch(() => { })
},
async edit (row) { async edit (row) {
this.moduleVisible = true this.moduleVisible = true
const { data } = await this.$post(`${this.api.findFloating}?id=${row.floatingBarSchemeId}`) const { data } = await this.$post(`${this.api.findFooter}?id=${row.footerId}`)
const range = data.floatingColumnSchemeScopeOfApplications const range = data.footerSetupScopeOfApplications
// 应用范围数组里有一个对象的applicationScopeId为0，则是网站全局
this.range = row.isGlobal ? 0 : 1
if (!row.isGlobal) { if (!row.isGlobal) {
const column = [] const column = []
// 选择栏目 // 选择栏目
@ -337,40 +316,44 @@ export default {
column.push(e.applicationScopeId.split(',').map(n => +n)) column.push(e.applicationScopeId.split(',').map(n => +n))
}) })
this.selectColumn = column this.selectColumn = column
console.log("🚀 ~ edit ~ this.selectColumn:", this.selectColumn)
} }
this.modules = JSON.parse(data.footerContent)
this.form = data this.form = data
}, },
// 样式切换回调
styleChange (id) {
this.modules = this.allModule[id - 1]
},
// 模块设置提交 // 模块设置提交
moduleSubmit () { moduleSave () {
this.$refs.form.validate(async (valid) => { this.$refs.form.validate(async (valid) => {
if (valid) { if (valid) {
if (this.submiting) return false if (this.submiting) return false
const form = JSON.parse(JSON.stringify(this.form)) const form = JSON.parse(JSON.stringify(this.form))
if (!form.floatingColumnSchemeModules.length) return Util.warningMsg('请添加内容模块')
const column = this.selectColumn const column = this.selectColumn
if (this.range && !column.length) return Util.warningMsg('请选择栏目') if (!form.isGlobal && !column.length) return Util.warningMsg('请选择栏目')
this.submiting = true this.submiting = true
if (this.range) { // 选择栏目
if (!form.isGlobal) {
const scope = [] const scope = []
// debugger
column.map(e => { column.map(e => {
scope.push({ scope.push({
applicationScopeId: typeof e === 'number' ? e : e.join(',') applicationScopeId: typeof e === 'number' ? e : e.join(',')
}) })
}) })
form.floatingColumnSchemeScopeOfApplications = scope form.footerSetupScopeOfApplications = scope
} else { } else {
form.floatingColumnSchemeScopeOfApplications = [{ form.footerSetupScopeOfApplications = [{
applicationScopeId: 0 applicationScopeId: 0
}] }]
} }
if (!form.floatingBarSchemeId) form.founderId = form.editorId form.footerContent = JSON.stringify(this.modules)
// debugger form.isDisable = 1
if (!form.footerId) form.founderId = form.editorId // 新增则创建人即编辑人
try { try {
await this.$post(this.api.saveFloating, form) await this.$post(this.api.saveFooter, form)
Util.successMsg('新增成功！') Util.successMsg('新增成功！')
this.moduleVisible = false this.moduleVisible = false
this.getData() this.getData()
@ -383,29 +366,16 @@ export default {
} }
}) })
}, },
// 内容设置提交 // 模块弹框关闭回调
contentSubmit () { moduleClose () {
this.$refs.contentForm.validate(async (valid) => { this.modules = []
if (valid) {
this.contentVisible = false
const row = this.curRow
if (this.curModule === -1) {
this.form.floatingColumnSchemeModules.push(_.cloneDeep(row))
} else {
const list = this.form.floatingColumnSchemeModules[this.curModule]
for (const i in row) {
this.$set(list, i, row[i])
}
}
}
})
}, },
del (row) { del (row) {
this.$confirm('确定要删除吗？', "提示", { this.$confirm('确定要删除吗？', "提示", {
type: "warning" type: "warning"
}).then(() => { }).then(() => {
this.$post(`${this.api.batchDeletionFloating}?id=${row.floatingBarSchemeId}`).then(res => { this.$post(`${this.api.batchDeletionFooter}?ids=${row.footerId}`).then(res => {
Util.successMsg("删除成功") Util.successMsg("删除成功")
this.getData() this.getData()
}).catch(res => { }) }).catch(res => { })
@ -414,21 +384,24 @@ export default {
// 禁用启用 // 禁用启用
async switchOff (row) { async switchOff (row) {
try { try {
const { code, msg } = await this.$post(`${this.api.checkEnableOrDisable}?id=${row.floatingBarSchemeId}&isDisable=${row.isDisable}`) const { code, msg } = await this.$post(`${this.api.checkEnableOrDisableFooter}?id=${row.footerId}&isDisable=${row.isDisable}`)
// debugger
if (code === 300) { if (code === 300) {
// 悬浮栏管理里的禁用启用返回300要弹询问框选择是否继续 // 悬浮栏管理里的禁用启用返回300要弹询问框选择是否继续
this.$confirm(msg, '提示', { this.$confirm(msg, '提示', {
type: "warning" type: "warning"
}).then(async () => { }).then(async () => {
await this.$post(`${this.api.enableOrDisableScheme}?id=${row.floatingBarSchemeId}&isDisable=${row.isDisable}`) await this.$post(`${this.api.enableOrDisableSchemeFooter}?id=${row.footerId}&isDisable=${row.isDisable}`)
this.getData()
}).catch(() => { }).catch(() => {
row.isDisable = row.isDisable ? 0 : 1 row.isDisable = row.isDisable ? 0 : 1
}) })
} else { } else {
await this.$post(`${this.api.enableOrDisableScheme}?id=${row.floatingBarSchemeId}&isDisable=${row.isDisable}`) await this.$post(`${this.api.enableOrDisableSchemeFooter}?id=${row.footerId}&isDisable=${row.isDisable}`)
this.getData()
}
} catch (e) {
row.isDisable = row.isDisable ? 0 : 1
} }
} catch (e) { }
}, },
// 批量删除 // 批量删除
batchDel () { batchDel () {
@ -438,9 +411,9 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
const ids = list.map(e => { const ids = list.map(e => {
return 'id=' + e.floatingBarSchemeId return 'ids=' + e.footerId
}) })
this.$post(`${this.api.batchDeletionFloating}?${ids.join('&')}`).then(res => { this.$post(`${this.api.batchDeletionFooter}?${ids.join('&')}`).then(res => {
this.$refs.table.clearSelection() this.$refs.table.clearSelection()
Util.successMsg("删除成功") Util.successMsg("删除成功")
this.getData() this.getData()
@ -462,89 +435,126 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.plus { @import '../../styles/page/page.scss';
margin-top: 10px;
font-size: 20px;
text-align: center;
color: $main-color;
cursor: pointer;
}
.del { .contact {
margin-left: 8px; position: relative;
font-size: 18px; padding: 0 0 106px 0;
color: #333; background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
cursor: pointer;
}
$upload-width: 220px; .inner {
$upload-height: 102px; padding: 0;
$upload-lg-height: 102px; }
/deep/ .avatar-uploader { .title {
.el-upload { width: 419px;
position: relative; height: 258px;
width: $upload-width; padding: 113px 0 0 43px;
height: $upload-height; background-color: #0854fe;
border: 1px solid #dcdee0;
border-radius: 2px; h6 {
cursor: pointer; margin-bottom: 20px;
overflow: hidden; font-size: 46px;
color: #fff;
}
.uploader-default { .text {
font-size: 28px;
color: #fff;
}
}
.region {
position: absolute;
top: 152px;
left: 70%;
display: flex; display: flex;
height: $upload-height;
flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
text-align: center; font-size: 20px;
background: #fafafa; color: #fff;
p { img {
margin-top: 10px; margin-right: 20px;
font-size: 14px;
color: #333;
line-height: 20px;
} }
} }
.info {
margin: 86px 0 0 44px;
.texts {
display: flex;
align-items: center;
margin-top: 24px;
} }
&.avatar-uploader-lg { .item {
.el-upload { margin-right: 30px;
width: 100%; }
max-width: 820px;
height: $upload-lg-height;
.uploader-default { .line {
height: $upload-lg-height; display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
color: #fff;
img {
margin-right: 8px;
} }
} }
} }
}
.avatar {
display: block;
width: $upload-width;
height: $upload-height;
}
.avatar-lg { .footer {
display: block; position: relative;
width: 100%; padding: 48px 20% 25px;
height: $upload-lg-height; color: #fff;
background-color: #091733;
overflow: hidden;
background: rgba(0, 5, 12, .8) url(../../assets/images/footer-bg.png) no-repeat;
.meta {
margin-bottom: 10px;
font-size: 14px;
} }
.el-upload__tip { .column {
margin-top: 0; margin: 0 20px;
p { h6 {
font-size: 12px; margin-bottom: 20px;
color: #333; font-size: 16px;
white-space: nowrap;
cursor: pointer;
} }
} }
.copyright {
font-size: 14px;
color: #6d7384;
}
} }
.pic { .footer3 {
max-width: 100px; padding: 30px;
background-color: #303246;
.qrcode {
position: relative;
color: #fff;
img {
margin: 10px 0; margin: 10px 0;
}
.title {
font-size: 14px;
}
.text {
font-size: 12px;
}
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save