feature(内外部会议): 会议议题可改变顺序
This commit is contained in:
@@ -61,7 +61,7 @@
|
||||
<template slot="title">
|
||||
<div class="modular-header">
|
||||
<div class="modular-header-title">
|
||||
<i class="icon-modular-title" /><span>会议议题</span>
|
||||
<i class="icon-modular-title" /><span>会议议题{{ index + 1 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -142,22 +142,38 @@
|
||||
<el-row>
|
||||
<template v-for="(item, index) in form.meetingTopicList">
|
||||
<el-col :span="24">
|
||||
<div class="divider-line">
|
||||
会议议题
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
:style="{visibility: (index === form.meetingTopicList.length - 1) ? 'visible' : 'collapse'}"
|
||||
@click="addMeetingTopic"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-minus"
|
||||
:style="{visibility: (form.meetingTopicList.length < 2 && index === 0) ? 'collapse' : 'visible'}"
|
||||
@click="removeMeetingTopic(index)"
|
||||
/>
|
||||
<div class="divider-line" style="display: flex;align-items: center;justify-content: space-between">
|
||||
<div>
|
||||
会议议题{{ index + 1 }}
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
:style="{visibility: (index === form.meetingTopicList.length - 1) ? 'visible' : 'collapse'}"
|
||||
@click="addMeetingTopic"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-minus"
|
||||
:style="{visibility: (form.meetingTopicList.length < 2 && index === 0) ? 'collapse' : 'visible'}"
|
||||
@click="removeMeetingTopic(index)"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center">
|
||||
<i
|
||||
class="el-icon-bottom move-icon"
|
||||
style="margin-left: 20px;transform: rotate(180deg)"
|
||||
:style="{visibility: (index === 0) ? 'collapse' : 'visible'}"
|
||||
@click="moveOrder(index, 'top')"
|
||||
/>
|
||||
<i
|
||||
class="el-icon-bottom move-icon"
|
||||
:style="{visibility: (index === form.meetingTopicList.length - 1) ? 'collapse' : 'visible'}"
|
||||
@click="moveOrder(index, 'bottom')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@@ -407,6 +423,9 @@ export default {
|
||||
this.$refs.formRef.validate(valid => {
|
||||
if (valid) {
|
||||
this.isSubmit = true
|
||||
this.form.meetingTopicList.forEach((item, index) => {
|
||||
item.sort = index
|
||||
})
|
||||
if (this.title === '新增') {
|
||||
this.$http._postData(this.api.add, this.form).then(res => {
|
||||
if (res.ok) {
|
||||
@@ -436,7 +455,21 @@ export default {
|
||||
},
|
||||
dragIn (val) {
|
||||
this.$set(this.form, 'topicName', val.topicName)
|
||||
}
|
||||
},
|
||||
moveOrder (index, type) {
|
||||
if (type === 'top') {
|
||||
const obj1 = this.form.meetingTopicList[index]
|
||||
const obj2 = this.form.meetingTopicList[index - 1]
|
||||
this.$set(this.form.meetingTopicList, index - 1, obj1)
|
||||
this.$set(this.form.meetingTopicList, index, obj2)
|
||||
}
|
||||
if (type === 'bottom') {
|
||||
const obj1 = this.form.meetingTopicList[index]
|
||||
const obj2 = this.form.meetingTopicList[index + 1]
|
||||
this.$set(this.form.meetingTopicList, index + 1, obj1)
|
||||
this.$set(this.form.meetingTopicList, index, obj2)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -457,4 +490,11 @@ export default {
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
}
|
||||
.move-icon {
|
||||
font-size: 32px;
|
||||
cursor: pointer
|
||||
}
|
||||
.move-icon:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user