更新移动

src/views/user-info/video-operation/course-content/index.tsx

@@ -8,14 +8,20 @@ import {
   ElDialog,
   ElForm,
   ElFormItem,
+  ElIcon,
   ElInput,
   ElMessage,
-  ElRow
+  ElMessageBox,
+  ElRow,
+  ElTooltip
 } from 'element-plus'
 import { defineComponent } from 'vue'
 import CoursePreview from '../course-preview'
 import { createState } from '../createState'
 import styles from './index.module.less'
+import iconDown from '../images/icon_down.png'
+import iconUp from '../images/icon_up.png'
+import iconDelete from '../images/icon_delete.png'
 
 export default defineComponent({
   name: 'course-content',
@@ -38,7 +44,7 @@ export default defineComponent({
   methods: {
     handleUpload(urls: any) {
       console.log(urls)
-      // 上传视频连接
+      // 上传视频连接s
       const urlList = urls || []
       urlList.forEach((item: any) => {
         createState.lessonList.push({
@@ -96,6 +102,10 @@ export default defineComponent({
         sessionStorage.setItem('videoActiveName', 'DOING')
         this.$router.back()
       } catch {}
+    },
+    swapItems(arr: any, index1: number, index2: number) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
+      return arr
     }
   },
   render() {
@@ -122,12 +132,72 @@ export default defineComponent({
           </ElFormItem>
           {createState.lessonList.map((item: any, index: number) => (
             <div
-              class="p-4 pt-5 rounded-xl mb-3 border border-dashed border-gray-300"
+              class="p-4 pt-5 rounded-xl mb-3 border border-dashed border-gray-300 relative"
               key={item.key}
             >
+              <div class="absolute right-4 top-4 z-10 flex">
+                {index !== 0 && (
+                  <ElTooltip
+                    class="box-item"
+                    effect="dark"
+                    content="上移"
+                    placement="top"
+                  >
+                    <div
+                      onClick={() => {
+                        this.swapItems(createState.lessonList, index, index - 1)
+                      }}
+                    >
+                      <ElIcon size={29}>
+                        <img src={iconUp} />
+                      </ElIcon>
+                    </div>
+                  </ElTooltip>
+                )}
+                {createState.lessonList.length - 1 !== index && (
+                  <ElTooltip
+                    class="box-item"
+                    effect="dark"
+                    content="下移"
+                    placement="top"
+                  >
+                    <div
+                      onClick={() => {
+                        this.swapItems(createState.lessonList, index, index + 1)
+                      }}
+                    >
+                      <ElIcon size={29} class="ml-3">
+                        <img src={iconDown} title="向下移动" />
+                      </ElIcon>
+                    </div>
+                  </ElTooltip>
+                )}
+                {createState.lessonList.length > 1 && (
+                  <ElTooltip
+                    class="box-item"
+                    effect="dark"
+                    content="删除"
+                    placement="top"
+                  >
+                    <div
+                      onClick={() => {
+                        ElMessageBox.confirm('确定删除该条数据吗？', '提示', {
+                          type: 'warning'
+                        }).then(() => {
+                          createState.lessonList.splice(index, 1)
+                        })
+                      }}
+                    >
+                      <ElIcon size={29} class="ml-3">
+                        <img src={iconDelete} />
+                      </ElIcon>
+                    </div>
+                  </ElTooltip>
+                )}
+              </div>
               <ElRow>
                 <ElCol span={10}>
-                  <ElFormItem label="第一课">
+                  <ElFormItem label={`第${index + 1}课`}>
                     <ColUploadVideo
                       v-model:modelValue={item.videoUrl}
                       disabled