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

src/pages/details/meetingDetail/index.vue

@@ -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>

src/pages/policyRegulation/meeting/components/editDrawer.vue

@@ -142,22 +142,38 @@
         <el-row>
           <template v-for="(item, index) in form.meetingTopicList">
             <el-col :span="24">
-              <div class="divider-line">
+              <div class="divider-line" style="display: flex;align-items: center;justify-content: space-between">
-                会议议题
+                <div>
-                <el-button
+                  会议议题{{ index + 1 }}
-                  type="primary"
+                  <el-button
-                  size="mini"
+                    style="margin-left: 10px"
-                  icon="el-icon-plus"
+                    type="primary"
-                  :style="{visibility: (index === form.meetingTopicList.length - 1) ? 'visible' : 'collapse'}"
+                    size="mini"
-                  @click="addMeetingTopic"
+                    icon="el-icon-plus"
-                />
+                    :style="{visibility: (index === form.meetingTopicList.length - 1) ? 'visible' : 'collapse'}"
-                <el-button
+                    @click="addMeetingTopic"
-                  type="primary"
+                  />
-                  size="mini"
+                  <el-button
-                  icon="el-icon-minus"
+                    type="primary"
-                  :style="{visibility: (form.meetingTopicList.length < 2 && index === 0) ? 'collapse' : 'visible'}"
+                    size="mini"
-                  @click="removeMeetingTopic(index)"
+                    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>