Revert "fix:拖拽和上下排序"

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

@@ -2,17 +2,12 @@
   <!-- 面包屑 -->
   <el-breadcrumb>
     <el-breadcrumb-item>艺考资讯</el-breadcrumb-item>
-    <el-breadcrumb-item to="/info_article/list"
+    <el-breadcrumb-item to="/info_article/list">资讯文章</el-breadcrumb-item>
-      >资讯文章</el-breadcrumb-item
-    >
   </el-breadcrumb>
   <!-- 搜索 -->
   <el-form inline :model="params">
     <el-form-item label="文章标题">
-      <el-input
+      <el-input v-model="params.info_article_title" placeholder="请输入文章标题"></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">
@@ -29,28 +24,16 @@
     </el-col>
 
     <!-- 导入 -->
-    <el-upload
+    <el-upload class="upload-demo" :action="importExcel" :headers="headers" :on-success="handleExcelSuccess"
-      class="upload-demo"
+      :on-progress="uploadLoading" :on-error="closeUploadLoading" style="margin-left: 10px" :show-file-list="false">
-      :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 icon="ElIconDownload" @click="downloadTemplate()">下载导入模板</el-button>
-      >下载导入模板</el-button
-    >
 
     <!-- 导出 -->
-    <el-button icon="ElIconDocument" @click="exportExcel(params)"
+    <el-button icon="ElIconDocument" @click="exportExcel(params)">导出</el-button>
-      >导出</el-button
-    >
 
     <!-- 下拉操作 -->
     <el-dropdown v-if="selectionData.length">
@@ -68,101 +51,65 @@
   </el-space>
   <!-- 数据表格 -->
 
-  <DataTable
+  <DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
-    ref="tableRef"
+    :params="params" :request="params => getinfoArticleList(params)">
-    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
+      <el-image v-if="scope.row.info_article_cover" :src="scope.row.info_article_cover.split(',')[0]" lazy
-        v-if="scope.row.info_article_cover"
+        :preview-src-list="scope.row.info_article_cover.split(',')" :preview-teleported="true" :hide-on-click-modal="true"
-        :src="scope.row.info_article_cover.split(',')[0]"
+        fit="contain" class="el-avatar"></el-image>
-        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>
 
 
-
+    <el-space>
-    <template #chaoz="scope">
+      <el-button size="small" @click="handleUpdate(scope.row)">
-      <el-space>
+        编辑
-        <el-button size="small" @click="handleUpdate(scope.row)">
+      </el-button>
-          编辑
+      <el-dropdown @command="handleCommand">
+        <el-button type="primary" size="small">
+          更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
         </el-button>
-        <el-dropdown @command="handleCommand">
+        <template #dropdown>
-          <el-button type="primary" size="small">
+          <el-dropdown-menu>
-            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
-          </el-button>
+              详情
-          <template #dropdown>
+            </el-dropdown-item>
-            <el-dropdown-menu>
+            <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
-              <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
+              删除
-                详情
+            </el-dropdown-item>
-              </el-dropdown-item>
+          </el-dropdown-menu>
-              <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
+        </template>
-                删除
+      </el-dropdown>
-              </el-dropdown-item>
+    </el-space>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </el-space>
-    </template>
-    
-
- 
   </DataTable>
 
   <!-- 添加资讯文章 -->
-  <AddinfoArticleDialog
+  <AddinfoArticleDialog v-model="addinfoArticleDialogVisible" :done="() => tableRef.reload()"></AddinfoArticleDialog>
-    v-model="addinfoArticleDialogVisible"
-    :done="() => tableRef.reload()"
-  ></AddinfoArticleDialog>
   <!-- 编辑资讯文章 -->
-  <EditinfoArticleDialog
+  <EditinfoArticleDialog v-model="EditinfoArticleDialogVisible" :data="EditinfoArticleDialogRow"
-    v-model="EditinfoArticleDialogVisible"
+    :done="() => tableRef.reload()"></EditinfoArticleDialog>
-    :data="EditinfoArticleDialogRow"
-    :done="() => tableRef.reload()"
-  ></EditinfoArticleDialog>
   <!-- 资讯文章详情 -->
-  <DetailinfoArticleDialog
+  <DetailinfoArticleDialog v-model="DetailinfoArticleDialogVisible" :data="DetailinfoArticleDialogRow">
-    v-model="DetailinfoArticleDialogVisible"
+  </DetailinfoArticleDialog>
-    :data="DetailinfoArticleDialogRow"
-  ></DetailinfoArticleDialog>
 </template>
 <script setup>
 import { ArrowDown } from '@element-plus/icons-vue';
-import { ref, reactive ,watch} from 'vue';
+import { ref, reactive } 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([]);
@@ -188,11 +135,11 @@ const column = [
     fixed: true,
     type: 'selection'
   },
-  {
+  // {
-    prop: 'info_article_order',
+  //   prop: 'info_article_order',
-    label: '文章排序',
+  //   label: '文章排序',
-    width: '180'
+  //   width: '150'
-  },
+  // },
   {
     prop: 'info_article_title',
     label: '文章标题',
@@ -227,44 +174,6 @@ 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 () => {