feature(内外部会议): 会议议题可改变顺序

This commit is contained in:
zyn
2024-01-23 15:32:15 +08:00
parent b42d918212
commit ff2e43a089
2 changed files with 58 additions and 18 deletions
+1 -1
View File
@@ -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>