页面设置

master
yujialong 2 years ago
parent 95f6675eeb
commit dcaa7a3caa
  1. 104
      src/components/modules/content.vue
  2. 107
      src/components/modules/module.vue
  3. 143
      src/pages/column/page/index.vue

@ -1,16 +1,35 @@
<template>
<!-- 表单 -->
<!-- 内容 -->
<div>
<el-dialog title="编辑" :visible.sync="data.visible" width="600px" custom-class="module" :close-on-click-modal="false">
<el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
<el-form ref="form" :model="data.form" :rules="rules" label-width="80px">
<el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
<el-input v-if="item.type === 'input'" v-model="data.form[i]" placeholder="请输入" maxlength="30"></el-input>
<el-input v-if="item.type === 'textarea'" v-model="data.form[i]" type="textarea" placeholder="请输入" maxlength="50"></el-input>
<el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入" maxlength="30"></el-input>
<el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="50"></el-input>
<el-upload
v-if="item.type === 'upload'"
class="uploader"
accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, data.form)"
:show-file-list="false"
:action="api.upload">
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传图片</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只支持.jpg,.png格式</p>
</div>
</el-upload>
<div v-if="item.type === 'link'" class="flex">
<el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
<el-button @click="toLink(data.form)">设置链接</el-button>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('close')">取消</el-button>
<el-button @click="$emit('update:visible', false)">取消</el-button>
<el-button type="primary" @click="moduleSubmit">确定</el-button>
</span>
</el-dialog>
@ -21,45 +40,59 @@
<script>
import Link from '@/components/modules/link'
export default {
props: {
data: {
required: true
},
// diaVisible: {
// type: Boolean,
// required: true
// }
},
props: ['data', 'visible'],
components: {
Link
},
data() {
return {
rules: {
groupName: [
{ required: true, message: "请输入名称", trigger: "blur" }
]
},
rules: {},
linkVisible: false,
linkForm: {},
curIndex: 0
curIndex: 0,
};
},
watch: {
visible(open) {
//
open && this.handleForm()
}
},
mounted() {
this.handleForm()
},
methods: {
// form
handleForm() {
const { forms, type } = this.data
//
if (type === 'form' || type === 'introduce') {
forms.map(e => {
if (e.required) {
this.rules[e.prop] = [
{
required: true,
message: `${e.type === 'input' ? '输入' : '选择'}${e.label}`,
trigger: e.type === 'input' ? 'blur' : 'change'
}
]
}
})
}
},
close() {
this.$emit('update:visible', false)
},
//
uploadSuccess(res, row) {
console.log("🚀 ~ file: index.vue ~ line 238 ~ uploadSuccess ~ res, row", res, row)
// let url = this.form.columnBanner
// url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
row.banner = res.url
},
//
moduleSubmit() {
this.$set(row, 'pic', res.url)
// row.pic = res.url
},
//
toLink(row, i) {
console.log("🚀 ~ file: index.vue ~ line 399 ~ toLink ~ row, i", row, i)
toLink(row, i = 0) {
this.linkVisible = true
this.curIndex = i
this.linkForm = row.link
@ -87,10 +120,21 @@ export default {
data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
this.data.list[this.curIndex].link = data
this.linkVisible = false
}
},
//
moduleSubmit() {
},
}
};
</script>
<style lang="scss" scoped>
.radio-wrap {
display: flex;
align-items: center;
.el-input {
width: 200px;
margin-left: -40px;
}
}
</style>

@ -2,7 +2,7 @@
<!-- banner -->
<div>
<el-dialog title="Banner模块管理" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
<template v-if="data.type === 'banner'">
<template v-if="data.type === 'banner' || data.type === 'introduce'">
<el-table class="module-table" :data="data.list" header-align="center" row-key="id">
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
<el-table-column label="图片" min-width="140">
@ -24,11 +24,13 @@
</el-upload>
</template>
</el-table-column>
<el-table-column v-if="data.type === 'introduce'" prop="title" label="标题" min-width="140"></el-table-column>
<el-table-column label="链接" min-width="140">
<template slot-scope="scope">
<div class="link-wrap">
<span>{{ scope.row.link.linkName }}</span>
<el-button class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button>
<el-button v-if="data.type === 'banner'" class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button>
<el-button v-else class="set-link" type="primary" size="mini" @click="editIntro(scope.row, scope.$index)">编辑</el-button>
</div>
</template>
</el-table-column>
@ -75,28 +77,101 @@
</div>
</el-form-item>
</el-form>
<el-form v-else-if="data.type === 'column'" ref="form" :model="data.form" :rules="columnRules" label-width="100px">
<el-form-item prop="site" label="站点选择">
<el-select v-model="data.form.site">
<el-option
v-for="item in $refs.link.sites"
:key="item.id"
:label="item.siteName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="column" label="关联栏目">
<el-select v-model="data.form.column">
<el-option
v-for="item in columns"
:key="item.id"
:label="item.siteName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="文章展示数量">
<el-select v-model="data.form.articleNum">
<el-option
v-for="item in articleNums"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="栏目标题">
<el-radio v-model="data.form.columnTitle" :label="1">默认读取关联栏目</el-radio>
<div class="radio-wrap">
<el-radio v-model="data.form.columnTitle" :label="2"></el-radio>
<el-input v-model="data.form.columnTitleCustom" size="small" maxlength="10"></el-input>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('update:visible', false)">取消</el-button>
<el-button type="primary" @click="moduleSubmit">确定</el-button>
</span>
</el-dialog>
<Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
<Content :data.sync="data" :visible.sync="contentVisible" />
</div>
</template>
<script>
import Link from '@/components/modules/link'
import Content from '@/components/modules/content'
export default {
name: 'module',
props: ['data', 'visible'],
components: {
Link
Link,
Content
},
data() {
return {
rules: {},
linkVisible: false,
linkForm: {},
curIndex: 0
curIndex: 0,
columnRules: {
site: [
{ required: true, message: '请选择站点', trigger: 'change' }
],
column: [
{ required: true, message: '请选择关联栏目', trigger: 'change' }
],
},
columns: [],
articleNums: [
{
id: '',
name: '默认'
},
{
id: 4,
name: '4'
},
{
id: 3,
name: '3'
},
{
id: 2,
name: '2'
},
],
contentVisible: false
};
},
watch: {
@ -145,18 +220,17 @@ export default {
}).then(() => {
list.splice(i, 1)
}).catch(() => {})
},
//
moduleSubmit() {
},
//
toLink(row, i = 0) {
console.log("🚀 ~ file: index.vue ~ line 399 ~ toLink ~ row, i", row, i)
this.linkVisible = true
this.curIndex = i
this.linkForm = row.link
},
//
editIntro(row, i = 0) {
this.contentVisible = true
},
//
linkSubmit() {
// return console.log(3, this.$refs.link.data)
@ -180,10 +254,21 @@ export default {
data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
this.data.list[this.curIndex].link = data
this.linkVisible = false
}
},
//
moduleSubmit() {
},
}
};
</script>
<style lang="scss" scoped>
.radio-wrap {
display: flex;
align-items: center;
.el-input {
width: 200px;
margin-left: -40px;
}
}
</style>

@ -105,8 +105,11 @@
<div class="block">
<div class="inner">
<div class="c-wrap">
<h2 class="b-title">Light Chasers' Home at IASF</h2>
<p class="intro">Keep up with what happen with IASF</p>
<div class="cover" @click="toSet(6)">点击更换标题与描述</div>
</div>
<ul class="people">
<li>
<img class="pic" src="@/assets/images/channel/channel1.png" alt="">
@ -124,6 +127,15 @@
</div>
<img class="pic" src="@/assets/images/channel/channel2.png" alt="">
</li>
<li>
<img class="pic" src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
</li>
<div class="cover" @click="toSet(7)">点击更改图片标题概述与链接</div>
</ul>
</div>
</div>
@ -137,51 +149,62 @@
<p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.</p>
</div>
</div>
<div class="cover" @click="toSet(8)">点击更换标题与描述</div>
</div>
<div class="block" style="padding-bottom: 0">
<div class="inner">
<div class="c-wrap">
<h2 class="glance">IASF at a glance</h2>
<div class="cover" @click="toSet(9)">点击更换标题与描述</div>
</div>
<ul class="stat">
<li>
<p class="num">2020</p>
<p class="text">The year IASF was founded</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li>
<li>
<p class="num">2</p>
<p class="text">Facility projects</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li>
<li>
<p class="num">240</p>
<p class="text">Employees</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li>
<li>
<p class="num">10</p>
<p class="text">Academicians</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li>
<li>
<p class="num">45%</p>
<p class="text">Hold doctorates or the highest degree in their field</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li>
<li>
<p class="num">$32B+</p>
<p class="text">Facility construction need-based grant aid provided </p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li>
</ul>
</div>
</div>
<Banner :data.sync="modules[curModule]" :visible.sync="diaVisible" />
<Module :data.sync="modules[curModule]" :visible.sync="diaVisible" />
</div>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
import Banner from '@/components/modules/banner'
import Module from '@/components/modules/module'
export default {
data() {
return {
userId: +this.$store.state.user.userId,
site: this.$store.state.content.site,
id: +this.$route.query.id,
modules: [
@ -314,8 +337,38 @@ export default {
des: ''
}
},
{
type: 'column',
form: {
site: '',
column: '',
articleNum: '',
columnTitle: 1,
columnTitleCustom: ''
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '',
des: ''
}
},
{
type: 'introduce',
forms: [
{
type: 'upload',
@ -329,6 +382,11 @@ export default {
label: '标题',
required: true
},
{
type: 'input',
prop: 'subTitle',
label: '小标题'
},
{
type: 'link',
prop: 'link',
@ -341,13 +399,87 @@ export default {
}
],
form: {
pic: '',
title: '',
subTitle: '',
link: {
linkName: '无',
connectionType: 1,
linkAddress : '',
},
des: ''
},
list: [
{
pic: '',
title: '',
link: {
linkName: '无',
connectionType: 1,
linkAddress : '',
isOpen: 1
},
isEnable: 1
}
]
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '',
des: ''
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '',
des: ''
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '',
des: ''
}
},
@ -357,7 +489,7 @@ export default {
}
},
components: {
Banner,
Module,
},
watch: {
'$route'() {
@ -397,6 +529,8 @@ export default {
columnId: this.id,
state,
sort: 1,
founderId: this.userId,
editorId: this.userId,
jsonBeforeEditing: this.handleJson(),
theEditedJson: this.handleJson(),
}).then(({ data }) => {
@ -510,6 +644,7 @@ export default {
}
.people {
position: relative;
li {
display: flex;
justify-content: space-between;
@ -544,6 +679,7 @@ export default {
flex-wrap: wrap;
margin-top: 60px;
li {
position: relative;
width: 30%;
margin-bottom: 50px;
}
@ -564,6 +700,7 @@ export default {
margin: 0 auto;
}
.about {
position: relative;
padding: 77px 0 198px;
background: url(../../../assets/images/channel/about-bg.png) 0 0/100% 100% no-repeat;
.line {

Loading…
Cancel
Save