添加拖拽功能

.env.development

@@ -15,11 +15,11 @@ VITE_DROP_CONSOLE = false
 
 # Basic interface address SPA
 # VITE_GLOB_API_URL= http://localhost:8000/api
-VITE_GLOB_API_URL= http://localhost:8888/admin
+VITE_GLOB_API_URL=http://localhost:8888/admin
 # VITE_GLOB_API_URL=/api
 
 # File upload address， optional
-VITE_GLOB_UPLOAD_URL=/upload
+VITE_GLOB_UPLOAD_URL=http://localhost:8888/admin/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=

.env.production

@@ -17,7 +17,7 @@ VITE_GLOB_API_URL=/api
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly
-VITE_GLOB_UPLOAD_URL=/upload
+VITE_GLOB_UPLOAD_URL=http://localhost:8888/admin/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=

package.json

@@ -50,7 +50,6 @@
     "vue-i18n": "9.1.6",
     "vue-router": "^4.0.8",
     "vue-types": "^3.0.2",
-    "vuedraggable": "^2.24.3",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {

src/api/sys/upload.ts

@@ -12,6 +12,8 @@ export function uploadApi(
   params: UploadFileParams,
   onUploadProgress: (progressEvent: ProgressEvent) => void
 ) {
+  console.log(`params`, params);
+  console.log(`uploadUrl`, uploadUrl);
   return defHttp.uploadFile<UploadApiResult>(
     {
       url: uploadUrl,

src/components/Table/src/BasicTable.vue

@@ -13,21 +13,9 @@
         <slot :name="item" v-bind="data"></slot>
       </template>
     </BasicForm>
-
-    <!-- <draggable
-      v-model="getBindValues.dataSource"
-      group="title"
-      @start="drag = true"
-      @end="drag = false"
-      item-key="id"
-    >
-      <template #item="{ element }">
-        <div>{{ element }}</div>
-      </template>
-    </draggable> -->
-
     <Table
       ref="tableElRef"
+      class="mytable"
       v-bind="getBindValues"
       :rowClassName="getRowClassName"
       v-show="getEmptyDataIsShowTable"
@@ -51,7 +39,7 @@
     ColumnChangeParam,
   } from './types/table';
 
-  import { defineComponent, ref, computed, unref, toRaw } from 'vue';
+  import { defineComponent, ref, computed, unref, toRaw, onMounted } from 'vue';
   import { Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import expandIcon from './components/ExpandIcon';
@@ -73,7 +61,7 @@
   import { useTableForm } from './hooks/useTableForm';
   import { useExpose } from '/@/hooks/core/useExpose';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import draggable from 'vuedraggable/src/vuedraggable';
+  import Sortable from 'sortablejs';
   import { omit } from 'lodash-es';
   import { basicProps } from './props';
   import { isFunction } from '/@/utils/is';
@@ -83,7 +71,6 @@
       Table,
       BasicForm,
       HeaderCell,
-      draggable,
     },
     props: basicProps,
     emits: [
@@ -91,6 +78,7 @@
       'fetch-error',
       'selection-change',
       'register',
+      'dragRow',
       'row-click',
       'row-dbClick',
       'row-contextmenu',
@@ -307,6 +295,53 @@
 
       emit('register', tableAction, formActions);
 
+      console.log('===============分割线=============');
+
+      // 初始化 sortable 实现拖动
+      function initSortable() {
+        const el = document.querySelector('.mytable tbody') as any;
+        console.log(el);
+        Sortable.create(el, {
+          handle: '.ant-table-row',
+          sort: true, // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
+          delay: 0, // number 定义鼠标选中列表单元可以开始拖动的延迟时间；
+          touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
+          disabled: false, // boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
+          animation: 150, // ms, number 单位：ms，定义排序动画的时间
+          easing: 'cubic-bezier(1, 0, 0, 1)', // Easing for animation. Defaults to null. See https://easings.net/ for examples.
+          ghostClass: 'sortable-ghost', // drop placeholder的css类名
+          draggable: '.ant-table-row', // 允许拖拽的项目类名
+          chosenClass: 'sortable-chosen', // 被选中项的css 类名
+          dragClass: 'sortable-drag', // 正在被拖拽中的css类名
+          dataIdAttr: 'data-id',
+          group: { name: 'name', pull: true, put: true },
+
+          // 拖拽完成
+          onUpdate: function (evt) {
+            console.log('onUpdate', evt);
+            emit('dragRow', evt);
+          },
+          // 开始拖拽的时候
+          // onStart: function (evt) {
+          //   console.log('onStart', evt);
+          // },
+          // onAdd: function (evt) {
+          //   console.log('onAdd', evt);
+          // },
+          // onRemove: function (evt) {
+          //   console.log('onRemove', evt);
+          // },
+        });
+      }
+      onMounted(() => {
+        console.log('props.canDragRow', props.canDragRow);
+        if (!props.canDragRow) {
+          return;
+        }
+        initSortable(); // 开启拖拽功能
+        // console.log(`fn`, fn)
+      });
+      console.log('===============分割线=============');
       return {
         tableElRef,
         getBindValues,

src/components/Table/src/props.ts

@@ -114,6 +114,7 @@ export const basicProps = {
     default: '',
   },
   bordered: propTypes.bool,
+  canDragRow: propTypes.bool,
   pagination: {
     type: [Object, Boolean] as PropType<PaginationProps | boolean>,
     default: null,

src/views/permission/admin_log/index.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <BasicTable
-      ref="tableRef"
-      @register="registerTable"
-      rowKey="id"
-      :pagination="{ pageSize: 2, defaultPageSize: 2, showSizeChanger: false }"
-      @rowDbClick="handleDetail"
-    >
+    <BasicTable ref="tableRef" @register="registerTable" rowKey="id" @rowDbClick="handleDetail">
       <template #toolbar>
         <a-button type="danger" @click="deleteA"> 删除 </a-button>
         <a-button type="primary" @click="openModal"> 导出 </a-button>

src/views/permission/rule/data.ts

@@ -4,6 +4,7 @@ import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Form/index';
 import { Icon } from '/@/components/Icon';
 import { adapt } from '/@/utils/adapt';
+import { editRule } from '/@/api/sys/user';
 
 const adaptWidth = adapt();
 
@@ -149,9 +150,11 @@ export const columns: BasicColumn[] = [
       function onChange(val) {
         console.log(val, record.id);
         record.ismenu = val;
-        console.log('======onChange======');
+        const data = { id: record.id, ismenu: Number(val) };
+        console.log(`data11`, data);
+        editRule(data);
       }
-      return h(Switch, { defaultChecked: record.ismenu, onChange: onChange });
+      return h(Switch, { checked: record.ismenu, onChange: onChange });
     },
   },
   {
@@ -193,6 +196,15 @@ export const schemas: FormSchema[] = [
     },
   },
   {
+    field: 'title',
+    component: 'Input',
+    label: '标题',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+  {
     field: 'name',
     component: 'Input',
     label: '名称',
@@ -214,6 +226,19 @@ export const schemas: FormSchema[] = [
     field: 'icon',
     label: '图标',
     component: 'IconPicker',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
+  },
+  {
+    field: 'ismenu',
+    label: '是否菜单',
+    component: 'Switch',
+    labelWidth: adaptWidth.labelWidth,
+    colProps: {
+      span: adaptWidth.elContainer,
+    },
   },
   {
     field: 'status',

src/views/permission/rule/index.vue

@@ -6,6 +6,8 @@
       @fetchSuccess="ExpandAllRows"
       @selectionChange="selectionChange"
       @rowDbClick="handleEdit"
+      @dragRow="dragRow"
+      canDragRow
       rowKey="id"
     >
       <template #toolbar>
@@ -200,6 +202,13 @@
         }
       }
 
+      // 拖拽
+      function dragRow(evt) {
+        console.log('=======拖拽完成才触发=========');
+        console.log(`evt.oldIndex`, evt.oldIndex);
+        console.log(`evt.newIndex`, evt.newIndex);
+      }
+
       // 导出
       function defaultHeader({ filename, bookType }: ExportModalResult) {
         // 默认Object.keys(data[0])作为header
@@ -248,6 +257,7 @@
         defaultHeader,
         openModal,
         register,
+        dragRow,
         ...toRefs(btn),
       };
     },

src/views/permission/rule/popup.vue

@@ -81,15 +81,6 @@
         if (role.id) {
           data.id = role.id;
         }
-        // delete data.pname;
-        console.log(`data`, data);
-        // const data = {
-        //   info,
-        // }
-        // console.log(data)
-        // console.log(getFieldsValue())  // 表单数据
-        // console.log('------ 菜单key ------')
-        // console.log(popupData.checkedKeys)
         const popupData = { closeModal, data };
         emit('saveData', popupData);
       }

src/views/table/attachment/index.vue

@@ -9,12 +9,7 @@
       <template #form-custom> custom-slot </template>
 
       <template #toolbar>
-        <Upload
-          action="http://localhost:8000/api/upload/"
-          method="POST"
-          :showUploadList="false"
-        >
-        </Upload>
+        <Upload action="http://localhost:8000/api/upload/" method="POST" :showUploadList="false" />
       </template>
     </BasicTable>
     <!-- <Model @register="addRegister" :modelData="modelData" /> -->

src/views/table/imageTable/index.vue

@@ -8,7 +8,7 @@
 
       <template #toolbar>
         <Upload>
-          <a-button type="primary"> t('component.upload.upload') </a-button>
+          <!-- <a-button type="primary"> t('component.upload.upload') </a-button> -->
         </Upload>
       </template>
     </BasicTable>

src/views/test/index.vue

@@ -1,33 +1,36 @@
 <template>
-  <div class="p-4">
-    <Alert message="有预览图" type="info" />
-    <div class="flex justify-center mt-4">
-      <img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" />
+  <PageWrapper title="后台权限示例" contentBackground contentClass="p-4">
+    <div class="mt-2">
+      当前权限模式：
+      <a-button type="link">
+        {{ permissionMode === PermissionModeEnum.BACK ? '后台权限模式' : '前端角色权限模式' }}
+      </a-button>
+      <a-button class="ml-4" @click="togglePermissionMode" type="primary"> 切换权限模式 </a-button>
+      <Divider />
     </div>
-    <Alert message="无预览图" type="info" />
-    <a-button @click="handlePreview" type="primary" class="mt-4">预览图片</a-button>
-  </div>
+  </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Alert } from 'ant-design-vue';
-  import { createImgPreview } from '/@/components/Preview/index';
-  const imgList: string[] = [
-    'https://picsum.photos/id/66/346/216',
-    'https://picsum.photos/id/67/346/216',
-    'https://picsum.photos/id/68/346/216',
-  ];
+  import { defineComponent, computed } from 'vue';
+  import { useAppStore } from '/@/store/modules/app';
+  import { PermissionModeEnum } from '/@/enums/appEnum';
+  import { Divider } from 'ant-design-vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { PageWrapper } from '/@/components/Page';
+
   export default defineComponent({
-    components: { Alert },
+    name: 'CurrentPermissionMode',
+    components: { Divider, PageWrapper },
     setup() {
-      function handleClick(img: string) {
-        createImgPreview({ imageList: [img] });
-      }
+      const appStore = useAppStore();
+      const permissionMode = computed(() => appStore.getProjectConfig.permissionMode);
+      const { togglePermissionMode } = usePermission();
 
-      function handlePreview() {
-        createImgPreview({ imageList: imgList });
-      }
-      return { imgList, handleClick, handlePreview };
+      return {
+        permissionMode,
+        PermissionModeEnum,
+        togglePermissionMode,
+      };
     },
   });
 </script>

yarn.lock

@@ -9161,11 +9161,6 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sortablejs@1.10.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
-  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
-
 sortablejs@^1.13.0:
   version "1.13.0"
   resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz#3ab2473f8c69ca63569e80b1cd1b5669b51269e9"
@@ -10881,13 +10876,6 @@ vue@^3.0.0:
     "@vue/runtime-dom" "3.1.1"
     "@vue/shared" "3.1.1"
 
-vuedraggable@^2.24.3:
-  version "2.24.3"
-  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
-  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
-  dependencies:
-    sortablejs "1.10.2"
-
 warning@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"