可拖拽表格保存拖拽顺序，按照拖拽顺序进行下载

可拖拽表格的难点：
（1）拖拽表格行顺序，自动进行保存顺序
解析：要根据表格行顺序进行下载，这就意味着保存与初始化传参需要按照表格拖拽后顺序
（2）下载表格传参是[1,2,3]数字形式，我们保存与初始化是对象数组，
解析：这个时候我们可以直接采取给{[1,2,3]}数组包层对象
（3）表格行选择是通过复选框，这个时候我们需要去重，避免传参重复new Set的使用
解析： let selectedNumbers = new Set(); // 使用 Set 来存储唯一的 number 值

• 通过给el-table元素添加key属性，可以确保在数据发生变化时，Vue会重新渲染el-table组件，从而正确地更新表格的显示。
• 给el-table添加row-key="id"的作用是为表格的每一行指定一个唯一的key值。这个key值通常是数据源中每一条数据的唯一标识，比如id字段。

ref=“dataTable” 的用法
this.$refs.dataTable.toggleAllSelection()	用于切换所有行的选中状态，如果当前的选中状态是全部选中，则会取消所有行的选中状态；如果当前的选中状态是部分选中或未选中，则会选中所有行。
this.$refs.dataTable.clearSelection()	清空选中的行
this.$refs.dataTable.toggleRowSelection(rowData)	切换某一行的选中状态
this.$refs.dataTable.data	获取 el-table 的数据
this.$refs.dataTable.selection	获取 el-table 的选中行数据

 <div>
        <task-suggest v-model="taskName" @id-select="taskidSel" />
      </div>
  <div style="margin-top:20px">
        <el-table :key="rendertable" ref="dataTable" row-key="id" :data="tableData" border class="draggable-table"
          style="width: 30%" @selection-change="handleSelectionChange">
          <el-table-column :reserve-selection="true" type="selection"> </el-table-column>
          <el-table-column prop="name" label="表名"> </el-table-column>
        </el-table>
      </div>
      ------------------------------------
      import Sortable from 'sortablejs'
       rendertable: "",
       allSelect: [],//选中的表格行形成的数组
      numberArr: [],
           tableData: [
        {
          name: "表名1",
          id: 1,//添加id为了方便区分（row-key）
          number: 17//下载的参数
        },
        {
          name: "表名2",
          id: 2,
          number: 1
        },
      ],
      ----------------------------------
       mounted() {
    this.setDraggableTable();
    this.init();
  },
  methods: {
    init() {
      let obj_get = {
        taskId: this.value1,
        formName: this.formTableName,
      }
      GetFormData(obj_get).then((res) => {
        this.result = res.data.data
        //如果初次进页面未保存，表格默认全选
        if (this.result.length == 0) {
          this.$refs.dataTable.toggleAllSelection()
          return false
        }
        //如果有数据，直接赋值给表格
        this.tableData = this.result[0].value.list
        //如果表格number与返回数据中的number一致，就选择当前行
        this.tableData.forEach(item => {
          if (item.ishow == 1) {
            console.log("item", item);
            this.$refs.dataTable.toggleRowSelection(item);
            delete item.ishow
          }

        })
      })
    },
    //表格拖拽行的方法
    setDraggableTable() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
          console.log(_this.tableData);
        }
      })
    },
    //表格选择多行的方法
    handleSelectionChange(val) {
      this.allSelect = val
      this.numberArr = []
      let selectedNumbers = new Set(); // 使用 Set 来存储唯一的 number 值
      this.tableData.forEach(item => {
        val.forEach((it) => {
          if (item.number === it.number && !selectedNumbers.has(item.number)) {
            selectedNumbers.add(item.number);
            console.log('2', selectedNumbers);
          }
        });
      });
      this.numberArr = Array.from(selectedNumbers); // 将 Set 转换为数组
    },
    //新增、保存
    switcSave() {
      this.tableData.forEach((item, index) => {
        this.allSelect.forEach((it) => {
          if (item.number === it.number) {
            item['ishow'] = 1
          } else {
            item['ishow']
          }
        })
      })
      console.log(this.tableData);
      this.obj_add = {
        taskId: this.value1,
        formName: this.formTableName,
        formNameRemark: "一键生成报表",
        Key: { taskId: this.value1, },
        value: { list: this.tableData },
      };
      if (this.result.length > 0) {
        this.obj_add.id = this.result[0].id
      }
      console.log('1', this.obj_add);
      switchFormData(this.obj_add).then(res => {
        console.log('0001', res);
        if (res.status == 200) {
          this.$message.success('保存成功');
          this.init()
        } else {
          this.$message.error('保存失败');
        }
      })
    },
    //生成报表pdf or word
    handlePreview(fileType) {
      //下载表
      let tmpFileName = fileType == "pdf" ? '总报表.pdf' : "总报表.doc"
      let isPDF = fileType == "pdf" ? true : false//pdf传true，word传false
      DownloadAllFile(this.value1, isPDF, this.numberArr).then(res => {
        const blobUrl = window.URL.createObjectURL(res.data)
        this.downloadFileByBlob(blobUrl, tmpFileName)
        //如果下载成功就添加
        if (res.status == 200) {
          this.$message.success('下载成功');
          this.switcSave()
        } else {
          this.$message.error('下载失败');
        }
      })
    },
    // 保存表
    downloadFileByBlob(blobUrl, filename) {
      const eleLink = document.createElement('a')
      eleLink.download = filename
      eleLink.style.display = 'none'
      eleLink.href = blobUrl
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
      setTimeout(() => {
        this.loadingPdf = false
        this.loadingWord = false
      }, 8000)
    },
    //组件方法可以拿到每个任务的id
    taskidSel(taskid) {
      this.value1 = taskid
      console.log('hi', taskid);
    },
  },
  updated() {
    this.setDraggableTable();
  },