fix:资讯文章该类型增加拖拽和上下排序

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

@@ -215,7 +215,6 @@ const column = [
     width: '250'
   }
 ];
-
 const handleCommand = ({ type, row }) => {
   switch (type) {
     case 'detail':

src/pages/index/examination_information/info_article_type/index.vue

@@ -61,8 +61,15 @@
     :onSelectionChange="data => (selectionData = data)"
     :column="column"
     :params="params"
-    :request="params => getinfoArticleTypeList(params)"
+    v-loading="loading"
+    :request="params => tableDataInit(params)"
+
   >
+    <!-- 排序 -->
+    <template #info_article_type_sort="scope">
+      <el-input-number :disabled="loading" v-model='scope.row.info_article_type_sort' controls-position="right"
+        @change="handleEditOrder(scope.row)"></el-input-number>
+    </template>
     <template #chaoz="scope">
       <el-space>
         <el-button size="small" @click="handleUpdate(scope.row)">
@@ -106,18 +113,20 @@
 </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 {
   getinfoArticleTypeList,
   deleteinfoArticleType,
   exportExcel,
   downloadTemplate,
-  importExcel
+  importExcel,
+  editinfoArticleType
 } from '~/service/info_article_type';
 import AddinfoArticleTypeDialog from './components/AddinfoArticleTypeDialog.vue';
 import EditinfoArticleTypeDialog from './components/EditinfoArticleTypeDialog.vue';
 import DetailinfoArticleTypeDialog from './components/DetailinfoArticleTypeDialog.vue';
+import createDraw from 'hyw-drag'
 
 const tableRef = ref();
 const selectionData = ref([]);
@@ -144,7 +153,7 @@ const column = [
   {
     prop: 'info_article_type_sort',
     label: '资讯类型排序',
-    width: '150'
+    width: '180'
   },
   {
     prop: 'info_article_type_name',
@@ -159,6 +168,52 @@ const column = [
   }
 ];
 
+
+
+
+
+//表格数据获取及拖拽处理
+let drag = ref(false)
+let tableData = ref();
+async function tableDataInit(params) {
+  await getinfoArticleTypeList(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_type_sort';
+  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 editinfoArticleType(data);
+  if (code == 0) {
+    loading.value = false
+    tableRef.value.reload()
+  }
+}
+
+
+
+
+
+
+
+
+
+
 const handleCommand = ({ type, row }) => {
   switch (type) {
     case 'detail':

src/service/info_article_type.js

@@ -1,31 +1,31 @@
-import { api, downloadFile, createApiUrl} from '~/utils/axios';
+import { api, downloadFile, createApiUrl } from '~/utils/axios';
 
 
-                       /**
-                       * 导出资讯文章类型
-                       * @param {Object} data
-                       * @return {Promise} api
-                       */
-                       export function exportExcel(data) {
-                           downloadFile(createApiUrl('infoArticleType.infoArticleType/exportExcel'), data);
-                       }
-                       
-                       /**
-                        * 下载资讯文章类型模板
-                        * @param {Object} data
-                        * @return {Promise} api
-                        */
-                       export function downloadTemplate(data) {
-                           downloadFile(createApiUrl('infoArticleType.infoArticleType/downloadTemplate'), data);
-                       }
-                       
-                       /**
-                        * 导入资讯文章类型
-                        * @param {Object} data
-                        * @return {Promise} api
-                        */
-                       export const importExcel = createApiUrl('infoArticleType.infoArticleType/importExcel');
-                       
+/**
+* 导出资讯文章类型
+* @param {Object} data
+* @return {Promise} api
+*/
+export function exportExcel(data) {
+  downloadFile(createApiUrl('infoArticleType.infoArticleType/exportExcel'), data);
+}
+
+/**
+ * 下载资讯文章类型模板
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export function downloadTemplate(data) {
+  downloadFile(createApiUrl('infoArticleType.infoArticleType/downloadTemplate'), data);
+}
+
+/**
+ * 导入资讯文章类型
+ * @param {Object} data
+ * @return {Promise} api
+ */
+export const importExcel = createApiUrl('infoArticleType.infoArticleType/importExcel');
+