yujialong 1 year ago
parent 18e94e69bf
commit 26f950cc61
  1. 23
      src/components/modules/content.vue
  2. 6
      src/components/modules/history.vue
  3. 70
      src/components/modules/module.vue
  4. 60
      src/const/modules.js
  5. 2
      src/mixins/page/index.js
  6. 6
      src/pages/column/page/team.vue

@ -28,7 +28,7 @@
api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
v-model="data.form[item.prop]" v-model="data.form[item.prop]"
:init="editorConfig" /> :init="editorConfig" />
<el-upload v-if="item.type === 'upload' && item.crop" <el-upload v-if="item.type === 'upload' && item.width"
class="uploader" class="uploader"
accept=".jpg,.png,.jpeg,.gif" accept=".jpg,.png,.jpeg,.gif"
:on-change="res => changeFile(res, data.form)" :on-change="res => changeFile(res, data.form)"
@ -48,7 +48,7 @@
<p>只支持.jpg,.png格式</p> <p>只支持.jpg,.png格式</p>
</div> </div>
</el-upload> </el-upload>
<el-upload v-if="item.type === 'upload' && !item.crop" <el-upload v-if="item.type === 'upload' && !item.width"
class="uploader" class="uploader"
accept=".jpg,.png,.jpeg" accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, data.form)" :on-success="res => uploadSuccess(res, data.form)"
@ -109,6 +109,8 @@
:is-upload="isUpload" :is-upload="isUpload"
:fixed="fixed" :fixed="fixed"
:fixedNumber.sync="fixedNumber" :fixedNumber.sync="fixedNumber"
:autoCropWidth="autoCropWidth"
:autoCropHeight="autoCropHeight"
@upload="customUpload" /> @upload="customUpload" />
</el-dialog> </el-dialog>
</div> </div>
@ -144,7 +146,9 @@ export default {
file: {}, // file: {}, //
curForm: {}, curForm: {},
fixed: false, fixed: false,
fixedNumber: [0.88, 1] fixedNumber: [0.88, 1],
autoCropWidth: 480,
autoCropHeight: 124,
}; };
}, },
watch: { watch: {
@ -160,16 +164,15 @@ export default {
// form // form
handleForm () { handleForm () {
const { forms, type } = this.data const { forms, type } = this.data
this.fixed = false
// //
if (type === 'form' || type === 'introduce') { if (forms) {
forms.map(e => { forms.map(e => {
if (e.type === 'upload') { if (e.type === 'upload' && e.width) {
if (e.fixedNumber) { this.autoCropWidth = e.width
this.autoCropHeight = e.height
this.fixed = true this.fixed = true
this.fixedNumber = e.fixedNumber this.fixedNumber = [e.width / e.height, 1]
} else {
this.fixed = false
}
} }
if (e.required) { if (e.required) {
this.rules[e.prop] = [ this.rules[e.prop] = [

@ -38,11 +38,6 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div class="link-wrap"> <div class="link-wrap">
<span>{{ scope.row.link.linkName }}</span> <span>{{ scope.row.link.linkName }}</span>
<el-button v-if="data.type === 'banner'"
class="set-link"
type="primary"
size="mini"
@click="toLink(scope.row, scope.$index)">设置链接</el-button>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -122,6 +117,7 @@ export default {
// //
editHistory (row, i = 0) { editHistory (row, i = 0) {
this.data.form = JSON.parse(JSON.stringify(row)) this.data.form = JSON.parse(JSON.stringify(row))
if (!this.data.labelWidth) this.data.labelWidth = '60px'
this.curModule = i this.curModule = i
this.contentVisible = true this.contentVisible = true
}, },

@ -1,50 +1,16 @@
<template> <template>
<div> <div>
<!-- <!--
模块type: introduce | customList | form | forms | column | columns | history 模块type: introduce | form | forms | column | columns | history
--> -->
<el-dialog title="模块管理" <el-dialog title="模块管理"
:visible.sync="visible" :visible.sync="visible"
width="700px" :width="dialogWidth"
custom-class="module" custom-class="module"
:close-on-click-modal="false" :close-on-click-modal="false"
:before-close="close"> :before-close="close">
<template v-if="data.type === 'introduce' || data.type === 'customList'"> <template v-if="data.type === 'introduce'">
<!-- introduce是可以设置图片和链接的且大弹框内只会显示标题图片链接三个字段其他能输入的字段只会在小弹框里显示 customList是纯输入框会递归forms里面的字段显示在大弹框里面 --> <el-table class="module-table"
<el-table v-if="data.type === 'customList'"
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 v-for="(item, i) in data.forms"
:key="i"
:prop="item.prop"
:label="item.label"
min-width="120"
align="center">
<template slot-scope="scope">
<el-input v-model="scope.row[item.prop]"
:placeholder="'请输入' + item.label"
maxlength="100"></el-input>
</template>
</el-table-column>
<el-table-column label="操作"
width="60"
align="center">
<template slot-scope="scope">
<div class="flex j-center a-center">
<i class="el-icon-delete del"
@click="delRow(data.list, scope.$index)"></i>
</div>
</template>
</el-table-column>
</el-table>
<el-table v-else
class="module-table"
:data="data.list" :data="data.list"
header-align="center" header-align="center"
row-key="id"> row-key="id">
@ -60,7 +26,7 @@
min-width="130" min-width="130"
align="center"> align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="item.type === 'link'" <div v-if="item.type === 'link' && scope.row.link"
class="link-wrap"> class="link-wrap">
<span>{{ scope.row.link.linkName }}</span> <span>{{ scope.row.link.linkName }}</span>
</div> </div>
@ -75,12 +41,11 @@
</div> </div>
</template> </template>
<p v-else>{{ scope.row[item.prop] }}</p> <p v-else>{{ scope.row[item.prop] }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" <el-table-column label="操作"
width="100" :width="data.sort ? 150 : 100"
align="center"> align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex a-center"> <div class="flex a-center">
@ -90,6 +55,14 @@
</el-switch> </el-switch>
<i class="el-icon-edit-outline del" <i class="el-icon-edit-outline del"
@click="editIntro(scope.row, scope.$index)"></i> @click="editIntro(scope.row, scope.$index)"></i>
<template v-if="data.sort">
<i v-if="scope.$index != data.list.length - 1"
class="el-icon-bottom del"
@click="sort(1, scope.$index)"></i>
<i v-if="scope.$index"
class="el-icon-top del"
@click="sort(0, scope.$index)"></i>
</template>
<i class="el-icon-delete del" <i class="el-icon-delete del"
@click="delRow(data.list, scope.$index)"></i> @click="delRow(data.list, scope.$index)"></i>
</div> </div>
@ -333,6 +306,7 @@ export default {
token: Util.local.get(Setting.tokenKey) token: Util.local.get(Setting.tokenKey)
}, },
isVideo: Util.isVideo, isVideo: Util.isVideo,
dialogWidth: '800px',
rules: {}, rules: {},
linkVisible: false, linkVisible: false,
linkForm: {}, linkForm: {},
@ -404,7 +378,8 @@ export default {
]), ]),
// form // form
handleForm () { handleForm () {
const { type, forms, form } = this.data const { type, forms, form, dialogWidth } = this.data
this.fixed = false
if (type === 'form' || type === 'forms') { if (type === 'form' || type === 'forms') {
forms.map(e => { forms.map(e => {
if (e.type === 'video' || e.type === 'media') { if (e.type === 'video' || e.type === 'media') {
@ -449,7 +424,7 @@ export default {
this.articleNums = nums this.articleNums = nums
} }
form && form.site && this.siteChange(form.site) form && form.site && this.siteChange(form.site)
console.log(333, this.fixedNumber) this.dialogWidth = dialogWidth || '800px'
}, },
// //
siteChange (siteId) { siteChange (siteId) {
@ -484,9 +459,7 @@ export default {
// //
addRow () { addRow () {
const { type } = this.data const { type } = this.data
if (type === 'customList') { if (type === 'history') {
this.data.list.push(JSON.parse(JSON.stringify(this.data.originForm)))
} else if (type === 'history') {
this.data.list.push(JSON.parse(JSON.stringify(this.data.historyForm))) this.data.list.push(JSON.parse(JSON.stringify(this.data.historyForm)))
} else { } else {
this.editIntro(this.data.originForm, -1) this.editIntro(this.data.originForm, -1)
@ -561,6 +534,11 @@ export default {
form[prop] = '' form[prop] = ''
form.fileName = '' form.fileName = ''
}, },
//
sort (type, i) {
const item = this.data.list.splice(i, 1)[0]
this.data.list.splice(i + (type ? 1 : -1), 0, item)
},
// //
delRow (list, i) { delRow (list, i) {
this.$confirm('确定要删除吗?', '提示', { this.$confirm('确定要删除吗?', '提示', {

@ -3985,7 +3985,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 1920,
height: 345
}, },
{ {
type: 'input', type: 'input',
@ -5604,7 +5606,8 @@ export default {
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true, required: true,
crop: false width: 1920,
height: 991
}, },
{ {
type: 'link', type: 'link',
@ -5703,7 +5706,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 700,
height: 543
}, },
{ {
type: 'input', type: 'input',
@ -5810,7 +5815,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 1920,
height: 480
}, },
{ {
type: 'input', type: 'input',
@ -5869,7 +5876,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 1920,
height: 480
}, },
{ {
type: 'input', type: 'input',
@ -5912,7 +5921,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 392,
height: 247
}, },
{ {
type: 'input', type: 'input',
@ -5958,7 +5969,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 1920,
height: 480
}, },
{ {
type: 'input', type: 'input',
@ -6016,7 +6029,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: false required: false,
width: 1100,
height: 812
}, },
], ],
form: { form: {
@ -6032,7 +6047,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 1920,
height: 480
}, },
{ {
type: 'input', type: 'input',
@ -6069,7 +6086,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 848,
height: 505
}, },
{ {
type: 'input', type: 'input',
@ -6114,7 +6133,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 848,
height: 505
}, },
{ {
type: 'input', type: 'input',
@ -6159,7 +6180,9 @@ export default {
type: 'upload', type: 'upload',
prop: 'pic', prop: 'pic',
label: '图片', label: '图片',
required: true required: true,
width: 848,
height: 505
}, },
{ {
type: 'input', type: 'input',
@ -8787,7 +8810,7 @@ export default {
} }
}, },
{ {
type: 'customList', type: 'introduce',
forms: [ forms: [
{ {
type: 'input', type: 'input',
@ -8824,7 +8847,7 @@ export default {
list: [ list: [
{ {
dep: '', dep: '',
dep: '', contacts: '',
phone: '', phone: '',
email: '', email: '',
isEnable: 1 isEnable: 1
@ -9028,7 +9051,9 @@ export default {
isEnable: 1, isEnable: 1,
} }
], ],
labelWidth: '120px' labelWidth: '120px',
dialogWidth: '1200px',
sort: true
}, },
{ {
type: 'introduce', type: 'introduce',
@ -9200,7 +9225,7 @@ export default {
} }
}, },
{ {
type: 'forms', type: 'introduce',
forms: [ forms: [
{ {
type: 'upload', type: 'upload',
@ -9305,7 +9330,8 @@ export default {
des: `杨学明作为院领导,负责组织制定研究院的战略规划与实施监督,分管人才队伍建设、财务管理等方面工作,同时作为总指挥、总负责人,主持建设深圳产业光源项目。孙冬柏曾任中山大学常务副校长,层主持建设了“十一五”国家重大科技基础设施“重大工程材料服役安全研究评价设施”暨国家材料服役安全科学中心;担任分总体负责人,负责研制建设了“十二五”国家重大科技基础设施“高能同步辐射光源验证装置”—工程材料线站。`, des: `杨学明作为院领导,负责组织制定研究院的战略规划与实施监督,分管人才队伍建设、财务管理等方面工作,同时作为总指挥、总负责人,主持建设深圳产业光源项目。孙冬柏曾任中山大学常务副校长,层主持建设了“十一五”国家重大科技基础设施“重大工程材料服役安全研究评价设施”暨国家材料服役安全科学中心;担任分总体负责人,负责研制建设了“十二五”国家重大科技基础设施“高能同步辐射光源验证装置”—工程材料线站。`,
isEnable: 1 isEnable: 1
} }
] ],
dialogWidth: '1200px',
}, },
], ],
iasf: [ iasf: [

@ -8,7 +8,7 @@ export default {
userId: +this.$store.state.user.userId, userId: +this.$store.state.user.userId,
site: this.$store.state.content.site, site: this.$store.state.content.site,
columnId: +this.$route.query.id, columnId: +this.$route.query.id,
withOriginForm: ['introduce', 'history', 'label', 'customList'], // 要添加origiinForm的模块类型 withOriginForm: ['introduce', 'history'], // 要添加origiinForm的模块类型
id: '', id: '',
modules: [], modules: [],
originModules: '[]', originModules: '[]',

@ -28,7 +28,7 @@
</div> </div>
<div class="content"> <div class="content">
<div class="left"> <div class="left c-wrap">
<ul class="list"> <ul class="list">
<li v-for="(item, i) in modules[1].list" <li v-for="(item, i) in modules[1].list"
:key="i"> :key="i">
@ -41,10 +41,10 @@
<div class="text" <div class="text"
v-html="item.des"></div> v-html="item.des"></div>
</div> </div>
<div class="cover"
@click="toSet(1, i)">点击更换图片标题描述</div>
</li> </li>
</ul> </ul>
<div class="cover"
@click="toSet(1)">点击更换图片标题描述</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save