fix:拖拽和上下排序

src/pages/index/examination_information/info_article/index.vue

@@ -2,12 +2,17 @@
   <!-- 面包屑 -->
   <el-breadcrumb>
     <el-breadcrumb-item>艺考资讯</el-breadcrumb-item>
-    <el-breadcrumb-item to="/info_article/list">资讯文章</el-breadcrumb-item>
+    <el-breadcrumb-item to="/info_article/list"
+      >资讯文章</el-breadcrumb-item
+    >
   </el-breadcrumb>
   <!-- 搜索 -->
   <el-form inline :model="params">
     <el-form-item label="文章标题">
-      <el-input v-model="params.info_article_title" placeholder="请输入文章标题"></el-input>
+      <el-input
+        v-model="params.info_article_title"
+        placeholder="请输入文章标题"
+      ></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
@@ -24,16 +29,28 @@
     </el-col>
 
     <!-- 导入 -->
-    <el-upload class="upload-demo" :action="importExcel" :headers="headers" :on-success="handleExcelSuccess"
+    <el-upload
-      :on-progress="uploadLoading" :on-error="closeUploadLoading" style="margin-left: 10px" :show-file-list="false">
+      class="upload-demo"
+      :action="importExcel"
+      :headers="headers"
+      :on-success="handleExcelSuccess"
+      :on-progress="uploadLoading"
+      :on-error="closeUploadLoading"
+      style="margin-left: 10px"
+      :show-file-list="false"
+    >
       <el-button type="primary">导入</el-button>
     </el-upload>
 
     <!-- 下载导入模板 -->
-    <el-button icon="ElIconDownload" @click="downloadTemplate()">下载导入模板</el-button>
+    <el-button icon="ElIconDownload" @click="downloadTemplate()"
+      >下载导入模板</el-button
+    >
 
     <!-- 导出 -->
-    <el-button icon="ElIconDocument" @click="exportExcel(params)">导出</el-button>
+    <el-button icon="ElIconDocument" @click="exportExcel(params)"
+      >导出</el-button
+    >
 
     <!-- 下拉操作 -->
     <el-dropdown v-if="selectionData.length">
@@ -51,20 +68,42 @@
   </el-space>
   <!-- 数据表格 -->
   
-  <DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
+  <DataTable
-    :params="params" :request="params => getinfoArticleList(params)">
+    ref="tableRef"
+    style="width: 100%"
+    :onSelectionChange="data => (selectionData = data)"
+    :column="column"
+    :params="params"
+    v-loading="loading"
+    :request="params => tableDataInit(params)"
+  >
+  
+   <!-- 排序 -->
+   <template #info_article_order="scope">
+    <el-input-number :disabled="loading" v-model='scope.row.info_article_order' controls-position="right"
+      @change="handleEditOrder(scope.row)"></el-input-number>
+  </template>
 
     <template #info_article_cover="scope">
       
-      <el-image v-if="scope.row.info_article_cover" :src="scope.row.info_article_cover.split(',')[0]" lazy
+      <el-image
-        :preview-src-list="scope.row.info_article_cover.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
+        v-if="scope.row.info_article_cover"
-        fit="contain" class="el-avatar"></el-image>
+        :src="scope.row.info_article_cover.split(',')[0]"
+        lazy
+        :preview-src-list="scope.row.info_article_cover.split(',')"
+        :preview-teleported="true"
+        :hide-on-click-modal="true"
+        fit="contain"
+        class="el-avatar"
+      ></el-image>
       
       <template v-else>暂无图片</template>
       
     </template>
 
   
+
+    <template #chaoz="scope">
       <el-space>
         <el-button size="small" @click="handleUpdate(scope.row)">
           编辑
@@ -85,31 +124,45 @@
           </template>
         </el-dropdown>
       </el-space>
+    </template>
+    
+
+ 
   </DataTable>
 
   <!-- 添加资讯文章 -->
-  <AddinfoArticleDialog v-model="addinfoArticleDialogVisible" :done="() => tableRef.reload()"></AddinfoArticleDialog>
+  <AddinfoArticleDialog
+    v-model="addinfoArticleDialogVisible"
+    :done="() => tableRef.reload()"
+  ></AddinfoArticleDialog>
   <!-- 编辑资讯文章 -->
-  <EditinfoArticleDialog v-model="EditinfoArticleDialogVisible" :data="EditinfoArticleDialogRow"
+  <EditinfoArticleDialog
-    :done="() => tableRef.reload()"></EditinfoArticleDialog>
+    v-model="EditinfoArticleDialogVisible"
+    :data="EditinfoArticleDialogRow"
+    :done="() => tableRef.reload()"
+  ></EditinfoArticleDialog>
   <!-- 资讯文章详情 -->
-  <DetailinfoArticleDialog v-model="DetailinfoArticleDialogVisible" :data="DetailinfoArticleDialogRow">
+  <DetailinfoArticleDialog
-  </DetailinfoArticleDialog>
+    v-model="DetailinfoArticleDialogVisible"
+    :data="DetailinfoArticleDialogRow"
+  ></DetailinfoArticleDialog>
 </template>
 <script setup>
 import { ArrowDown } from '@element-plus/icons-vue';
-import { ref, reactive } from 'vue';
+import { ref, reactive ,watch} from 'vue';
 import { useLoginStore } from '~/store';
 import {
   getinfoArticleList,
   deleteinfoArticle,
   downloadTemplate,
   importExcel,
-  exportExcel
+  exportExcel,
+  editinfoArticle
 } from '~/service/info_article';
 import AddinfoArticleDialog from './components/AddinfoArticleDialog.vue';
 import EditinfoArticleDialog from './components/EditinfoArticleDialog.vue';
 import DetailinfoArticleDialog from './components/DetailinfoArticleDialog.vue';
+import createDraw from 'hyw-drag'
 
 const tableRef = ref();
 const selectionData = ref([]);
@@ -135,11 +188,11 @@ const column = [
     fixed: true,
     type: 'selection'
   },
-  // {
+  {
-  //   prop: 'info_article_order',
+    prop: 'info_article_order',
-  //   label: '文章排序',
+    label: '文章排序',
-  //   width: '150'
+    width: '180'
-  // },
+  },
   {
     prop: 'info_article_title',
     label: '文章标题',
@@ -174,6 +227,44 @@ const handleCommand = ({ type, row }) => {
   }
 };
 
+
+
+
+//表格数据获取及拖拽处理
+let drag = ref(false)
+let tableData = ref();
+async function tableDataInit(params) {
+  await getinfoArticleList(params).then((res) => tableData.value = res)
+  setTimeout(() => {
+    [...document.getElementsByClassName('el-table__row')].map(item => { item.classList.add('row1') });
+    drag.value === false && (drag.value = createDraw(document.getElementsByClassName('el-table__row')[0].parentElement))
+  })
+  return tableData.value;
+}
+watch(drag, () => {
+  const orderField = 'info_article_order';
+  drag.value.drop((info) => {
+    let targetIdx = [...document.getElementsByClassName('row1')].indexOf(info.el)
+    let sourceIdx = [...document.getElementsByClassName('row1')].indexOf(info.info.source.el)
+    let orderIdx = tableData.value.data[sourceIdx][orderField]
+    tableData.value.data[targetIdx][orderField] = orderIdx
+    handleEditOrder(tableData.value.data[targetIdx])
+  })
+})
+
+//排序
+const loading = ref(false)
+async function handleEditOrder(data) {
+  loading.value = true
+  const { code } = await editinfoArticle(data);
+  if (code == 0) {
+    loading.value = false
+    tableRef.value.reload()
+  }
+}
+
+
+
 // 删除数据
 const handleDelete = data => {
   ElMessageBox.confirm(`您确定要删除该资讯文章吗？`).then(async () => {