feat: ✨新增工作台拖拽排序

src/api/workplace/category.ts

@@ -18,6 +18,15 @@ export function categoryPost(data: any) {
   });
 }
 
+// 分类排序
+export function categoryPut(data: any) {
+  return request({
+    url: '/manager/workplace/category/reorder',
+    method: 'put',
+    data
+  });
+}
+
 // 分类获取应用
 export function categoryAppGet(params: any) {
   return request({

src/layouts/components/Tabs.vue

@@ -10,25 +10,6 @@
             :class="tabsMenuValue === item.path ? 'chrome-tab_active' : ''"
             @click.stop="tabClick(item)"
           >
-            <!-- <div class="chrome-tab__bg">
-              <svg style="width: 100%; height: 100%">
-                <defs>
-                  <symbol id="geometry-left" viewBox="0 0 214 36">
-                    <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
-                  </symbol>
-                  <symbol id="geometry-right" viewBox="0 0 214 36"><use xlink:href="#geometry-left"></use></symbol>
-                  <clipPath><rect width="100%" height="100%" x="0"></rect></clipPath>
-                </defs>
-                <svg width="51%" height="100%">
-                  <use xlink:href="#geometry-left" width="214" height="36" fill="currentColor"></use>
-                </svg>
-                <g transform="scale(-1, 1)">
-                  <svg width="51%" height="100%" x="-100%" y="0">
-                    <use xlink:href="#geometry-right" width="214" height="36" fill="currentColor"></use>
-                  </svg>
-                </g>
-              </svg>
-            </div> -->
             <div v-if="item.icon && tabsIcon">
               <component :is="'i-bd-add-text'" theme="outline" size="16" class="cursor-pointer" />
             </div>

src/pages/workplace/configuration/components/Banner.vue

@@ -16,7 +16,10 @@
         <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
           <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
             <template #header>
-              <i-bd-setting class="cursor-pointer" size="16" />
+              <i-bd-drag class="cursor-pointer" size="16" />
+            </template>
+            <template #default>
+              <i-bd-drag class="bd-drag cursor-pointer" size="16" />
             </template>
           </el-table-column>
           <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
@@ -47,6 +50,7 @@
 
 <script lang="tsx" name="Banner" setup>
 import { ElButton, ElSpace, ElImage, ElMessageBox, ElMessage } from 'element-plus';
+import Sortable from 'sortablejs';
 import BannerDialog from './BannerDialog.vue';
 import { BU_DOU_CONFIG } from '@/config';
 
@@ -188,8 +192,23 @@ const onDelBanner = (item: any) => {
     });
 };
 
+// tree 拖拽排序
+const tableDrop = () => {
+  Sortable.create(document.querySelector('.el-table__body-wrapper tbody') as HTMLElement, {
+    // draggable: '.bd-drag',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }: any) {
+      const tablesList = [...tableData.value];
+      const currRow = tablesList.splice(oldIndex as number, 1)[0];
+      tablesList.splice(newIndex as number, 0, currRow);
+      tableData.value = tablesList;
+    }
+  });
+};
+
 onMounted(() => {
   getTableList();
+  tableDrop();
 });
 </script>
 

src/pages/workplace/configuration/components/CustomGroup.vue

@@ -21,6 +21,9 @@
               :class="{ 'bd-tree-activate': item.category_no === optTree }"
               @click="onOptTreeClick(item.category_no)"
             >
+              <div class="mr-4px">
+                <i-bd-drag class="bd-drag cursor-pointer" size="14" />
+              </div>
               <div class="flex-1 text">{{ item.name }}</div>
               <div class="bd-opt">
                 <i-bd-editor :size="16" class="cursor-pointer pr-4px" />
@@ -48,6 +51,14 @@
       <!-- 表格 -->
       <div class="flex-1 overflow-hidden p-12px">
         <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-drag class="cursor-pointer" size="16" />
+            </template>
+            <template #default>
+              <i-bd-drag class="bd-drag cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
           <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
             <template #default="scope">
               <template v-if="item.render">
@@ -76,12 +87,13 @@
 
 <script lang="tsx" name="CustomGroup" setup>
 import { ElButton, ElSpace, ElImage, ElMessageBox, ElMessage } from 'element-plus';
+import Sortable from 'sortablejs';
 import CategoryDialog from './CategoryDialog.vue';
 import AppDialog from './AppDialog.vue';
 import { BU_DOU_CONFIG } from '@/config';
 
 // API接口
-import { categoryGet, categoryAppGet, categoryAppDelete } from '@/api/workplace/category';
+import { categoryGet, categoryPut, categoryAppGet, categoryAppDelete } from '@/api/workplace/category';
 
 interface Tree {
   category_no: string;
@@ -117,6 +129,30 @@ const onCategoryOk = () => {
   getCategoryData();
 };
 
+const categoryReorder = (newIndex: string, oldIndex: string) => {
+  const fromData = {
+    category_nos: [newIndex, oldIndex]
+  };
+  categoryPut(fromData).then(res => {
+    console.log(res);
+  });
+};
+
+// tree 拖拽排序
+const treesDrop = () => {
+  Sortable.create(document.querySelector('.tree-warp') as HTMLElement, {
+    draggable: '.bd-tree-item',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }: any) {
+      categoryReorder(dataTree.value[newIndex].category_no, dataTree.value[oldIndex].category_no);
+      const treesList = [...dataTree.value];
+      const currRow = treesList.splice(oldIndex as number, 1)[0];
+      treesList.splice(newIndex as number, 0, currRow);
+      dataTree.value = treesList;
+    }
+  });
+};
+
 /**
  * 添加应用
  */
@@ -241,8 +277,24 @@ const onDelApply = (item: any) => {
     });
 };
 
+// table 拖拽排序
+const tableDrop = () => {
+  Sortable.create(document.querySelector('.el-table__body-wrapper tbody') as HTMLElement, {
+    // draggable: '.bd-drag',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }: any) {
+      const tablesList = [...tableData.value];
+      const currRow = tablesList.splice(oldIndex as number, 1)[0];
+      tablesList.splice(newIndex as number, 0, currRow);
+      tableData.value = tablesList;
+    }
+  });
+};
+
 onMounted(() => {
   getCategoryData();
+  treesDrop();
+  tableDrop();
 });
 </script>
 

src/pages/workplace/configuration/components/Recommend.vue

@@ -19,7 +19,10 @@
         <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
           <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
             <template #header>
-              <i-bd-setting class="cursor-pointer" size="16" />
+              <i-bd-drag class="cursor-pointer" size="16" />
+            </template>
+            <template #default>
+              <i-bd-drag class="bd-drag cursor-pointer" size="16" />
             </template>
           </el-table-column>
           <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
@@ -30,8 +33,8 @@
               <template v-else-if="item.formatter">
                 <slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
               </template>
-              <template v-else>
+              <template v-else-if="item.prop">
-                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
+                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop!] }}</slot>
               </template>
             </template>
           </el-table-column>
@@ -55,28 +58,38 @@
 </template>
 
 <script lang="tsx" name="Recommend" setup>
-import { ElButton, ElSpace } from 'element-plus';
+import { ElButton, ElSpace, ElImage } from 'element-plus';
+import Sortable from 'sortablejs';
+import { BU_DOU_CONFIG } from '@/config';
 /**
  * 表格
  */
 const column = reactive<Column.ColumnOptions[]>([
   {
-    prop: 'name',
+    prop: 'icon',
-    label: '名称'
+    label: '应用LOGO',
-  },
+    align: 'center',
-  {
+    width: 100,
-    prop: 'no',
+    render: (scope: any) => {
-    label: '编码'
+      let img_url = '';
-  },
+      if (scope.row['icon']) {
-  {
+        img_url = `${BU_DOU_CONFIG.APP_URL}${scope.row.icon}`;
-    prop: 'status',
+      }
-    label: '状态',
+      return <ElImage src={img_url} fit={'scale-down'} class={'w-60px h-60px'} />;
-    formatter(row: any) {
-      return row.status === 1 ? '开启' : '关闭';
     }
   },
   {
-    prop: 'des',
+    prop: 'name',
+    label: '应用名称',
+    width: 160
+  },
+  {
+    prop: 'app_id',
+    label: '应用APP ID',
+    width: 290
+  },
+  {
+    prop: 'description',
     label: '描述'
   },
   {
@@ -120,6 +133,24 @@ const onCurrentChange = (current: number) => {
 };
 
 // 新增版本
+
+// table 拖拽排序
+const tableDrop = () => {
+  Sortable.create(document.querySelector('.el-table__body-wrapper tbody') as HTMLElement, {
+    // draggable: '.bd-drag',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }: any) {
+      const tablesList = [...tableData.value];
+      const currRow = tablesList.splice(oldIndex as number, 1)[0];
+      tablesList.splice(newIndex as number, 0, currRow);
+      tableData.value = tablesList;
+    }
+  });
+};
+
+onMounted(() => {
+  tableDrop();
+});
 </script>
 
 <style lang="scss" scoped>