Merge branch 'master' of https://gitlab-pro.ezijing.com/ezijing-web/center-resource

src/modules/admin/category/views/List.vue

 <script setup lang="ts">
-// import Sortable from 'sortablejs'
+import Sortable from 'sortablejs'
 import AddDialog from '../component/AddDialog.vue'
 import { Operation } from '@element-plus/icons-vue'
 import { getCategoryList, delCategory, createCategory, updateCategory } from '../api'
 import { ElMessage, ElMessageBox } from 'element-plus'
+const tableKey = ref(0)
 const loading = ref(false)
 const prevCategoryName = ref('')
 const title = ref('')
@@ -98,6 +99,95 @@ const getParent = (node: string, tree: any) => {
 //     }
 //   })
 // }
+
+// 行拖拽 排序
+const rowDrop = () => {
+  // 获取表格节点
+  nextTick(() => {
+    const el = document.querySelector('.el-table__body-wrapper tbody') as HTMLElement
+    let activeRows: any = []
+    if (!el) {
+      return
+    }
+    // 插件调用函数
+    Sortable.create(el, {
+      animation: 300,
+      onMove(dragged: any, related: any) {
+        // onMove() {
+        tableData = arrayTreeSetLevel(tableData) // 树形结构数据添加level
+        activeRows = treeToTile(tableData) // 把树形的结构转为列表再进行拖拽
+        console.log(dragged, '123', related, tableData, activeRows)
+        const oldRow = activeRows[dragged.rowIndex]
+        const newRow = activeRows[related.rowIndex]
+        console.log(oldRow, newRow)
+        // if (oldRow.level !== newRow.level && oldRow.pid !== newRow.pid) {
+        //   //不能跨级拖拽
+        //   return false
+        // }
+      },
+      onEnd(data) {
+        const oldIndex = data.oldIndex as number
+        const newIndex = data.newIndex as number
+        console.log(oldIndex, newIndex)
+        const oldRow = activeRows[oldIndex] // 移动的那个元素
+        const newRow = activeRows[newIndex] // 新的元素
+        if (oldIndex !== newIndex && oldRow.level === newRow.level && oldRow.pid === newRow.pid) {
+          const modelProperty = activeRows[oldIndex]
+          const changeIndex = newIndex - oldIndex
+          const index = activeRows.indexOf(modelProperty)
+          if (index < 0) {
+            return
+          }
+          activeRows.splice(index, 1)
+          activeRows.splice(index + changeIndex, 0, modelProperty)
+          console.log(111)
+          sortMenuData()
+        }
+      }
+    })
+  })
+}
+const sortMenuData = () => {
+  tableKey.value = Math.random() //狠狠的刷新dom
+  rowDrop() // 再把拖拽的功能塞入
+}
+
+// 给树形的数据去添加每一层的层级
+const arrayTreeSetLevel = (array: any, levelName = 'level', childrenName = 'children') => {
+  if (!Array.isArray(array)) {
+    return []
+  }
+  const recursive = (array: any, level = 0) => {
+    level++
+    return array.map((v: any) => {
+      v[levelName] = level
+      const child = v[childrenName]
+      if (child && child.length) {
+        recursive(child, level)
+      }
+      return v
+    })
+  }
+  return recursive(array)
+}
+
+const treeToTile = (treeData: any, childKey = 'children') => {
+  // 将树数据转化为平铺数据
+  const arr: any = []
+  const expanded = (data: any) => {
+    if (data && data.length > 0) {
+      data
+        .filter((d: any) => d)
+        .forEach((e: any) => {
+          arr.push(e)
+          expanded(e[childKey] || [])
+        })
+    }
+  }
+  expanded(treeData)
+  return arr
+}
+
 // 获取分类列表
 const handleCategoryList = () => {
   const params = { type: 'tree' }
@@ -175,9 +265,14 @@ const rebuildData = (value: any, arr: any) => {
 }
 
 onMounted(() => {
-  // sortable('t1', tableData) // 参数分别为table的class名称，table的数据data
+  rowDrop()
   handleCategoryList()
 })
+// let move: any = {}
+// const click = (obj: any) => {
+//   console.log(111)
+//   move = obj
+// }
 </script>
 <template>
   <AppCard title="类别管理">
@@ -202,9 +297,14 @@ onMounted(() => {
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       highlight-current-row
       v-loading="loading"
+      :key="tableKey"
     >
-      <el-table-column type="index" align="center" class-name="handle">
+      <el-table-column align="center">
         <el-icon><Operation /></el-icon>
+
+        <!-- <template #default="scope">
+          <el-icon @mousedown="click(scope.row)"><Operation /></el-icon>
+        </template> -->
       </el-table-column>
       <el-table-column prop="category_name" label="类别名称" align="center" class-name="handle" />
       <el-table-column prop="depth" label="层级" align="center" />

src/modules/admin/teacher/views/Detail.vue

@@ -26,8 +26,7 @@ const rules = reactive<FormRules>({
   name: [{ required: true, message: '请输入讲师姓名', trigger: 'blur' }],
   title: [{ required: true, message: '  请输入职位', trigger: 'blur' }]
 })
-const listOptions = $computed(() => {
-  return {
+const listOptions = {
   remote: {
     params: { type: '' }
   },
@@ -45,7 +44,6 @@ const listOptions = $computed(() => {
     { label: '操作', slots: 'table-operate', width: 300, align: 'center' }
   ]
 }
-})
 
 const handleDelete = (row: any) => {
   console.log('删除', row)

src/modules/admin/teacher/views/List.vue

 <script setup lang="ts">
-import { ElMessage,ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { getTeacherList, deleteTeacher } from '../api'
 const router = useRouter()
 const appList = ref()
-const listOptions = $computed(() => {
-  return {
+const listOptions = {
   remote: {
     httpRequest: getTeacherList,
     params: { type: '' }
@@ -26,14 +25,13 @@ const listOptions = $computed(() => {
     { label: '操作', slots: 'table-operate', width: 230, align: 'center' }
   ]
 }
-})
 // 删除讲师
 const handleDelete = (row: any) => {
   ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
     deleteTeacher({ id: row.id }).then(() => {
-    ElMessage.success('删除成功')
-    appList.value.refetch()
-  })
+      ElMessage.success('删除成功')
+      appList.value.refetch()
+    })
   })
 }
 // 更新讲师

src/modules/resource/video/views/List.vue

@@ -5,8 +5,7 @@ import { Expand, Search } from '@element-plus/icons-vue'
 
 const appList = ref()
 
-const isCard = ref(true)
-
+const isCard = ref(false)
 const listOptions = {
   remote: {
     httpRequest: getVideoList,

src/modules/system/cover/views/List.vue

@@ -7,8 +7,7 @@ const appList = ref()
 const isShowDialog = ref(false)
 const isEdit = ref(false)
 const editData = ref({})
-const listOptions = $computed(() => {
-  return {
+const listOptions = {
   remote: {
     httpRequest: getCoverList,
     params: { type: '' }
@@ -27,7 +26,6 @@ const listOptions = $computed(() => {
     { label: '操作', slots: 'table-operate', width: 230, align: 'center' }
   ]
 }
-})
 // 删除
 const handleDelete = (row: any) => {
   ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {

src/modules/system/dictionary/views/List.vue

@@ -13,48 +13,46 @@ const store = useMapStore()
 
 // 状态
 //表单每行数据
-const listOptions = $computed(() => {
-  return {
-    remote: {
-      httpRequest: getDictionaryList,
-      params: {
-        type: '',
-        created_time_start: '',
-        created_time_end: ''
-      }
+const listOptions = {
+  remote: {
+    httpRequest: getDictionaryList,
+    params: {
+      type: '',
+      created_time_start: '',
+      created_time_end: ''
+    }
+  },
+  filters: [
+    { type: 'input', prop: 'name', label: '字典名称:' },
+    { type: 'input', prop: 'key', label: '字典类型:' },
+    {
+      type: 'select',
+      prop: 'status',
+      label: '字典状态:',
+      options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values || []
     },
-    filters: [
-      { type: 'input', prop: 'name', label: '字典名称:' },
-      { type: 'input', prop: 'key', label: '字典类型:' },
-      {
-        type: 'select',
-        prop: 'status',
-        label: '字典状态:',
-        options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values || []
-      },
-      {
-        type: 'input',
-        label: '创建时间:',
-        slots: 'created_time_start',
-        prop: 'created_time_start'
-      },
-      { slots: 'created_time_end', prop: 'created_time_end' }
-    ],
-    columns: [
-      { label: '字典主键', prop: 'id', width: 224, align: 'center' },
-      { label: '字典名称', prop: 'name', align: 'center' },
-      { label: '字典类型', prop: 'key', align: 'center' },
-      {
-        label: '状态',
-        prop: 'status_name',
-        align: 'center'
-      },
-      { label: '备注  ', prop: 'remark', align: 'center' },
-      { label: '创建时间', prop: 'created_time', align: 'center' },
-      { label: '操作', slots: 'table-operate', align: 'center', width: 300 }
-    ]
-  }
-})
+    {
+      type: 'input',
+      label: '创建时间:',
+      slots: 'created_time_start',
+      prop: 'created_time_start'
+    },
+    { slots: 'created_time_end', prop: 'created_time_end' }
+  ],
+  columns: [
+    { label: '字典主键', prop: 'id', width: 224, align: 'center' },
+    { label: '字典名称', prop: 'name', align: 'center' },
+    { label: '字典类型', prop: 'key', align: 'center' },
+    {
+      label: '状态',
+      prop: 'status_name',
+      align: 'center'
+    },
+    { label: '备注  ', prop: 'remark', align: 'center' },
+    { label: '创建时间', prop: 'created_time', align: 'center' },
+    { label: '操作', slots: 'table-operate', align: 'center', width: 300 }
+  ]
+}
 // 新增弹窗
 const handleAdd = () => {
   isShowDialog.value = true

src/modules/system/dictionary/views/rowList.vue

@@ -10,28 +10,26 @@ const title = ref('')
 const type = route.query.type as string
 const isEdit = ref(false)
 const isListAddDialog = ref(false)
-const listOptions = $computed(() => {
-  return {
-    remote: {
-      httpRequest: getDictionaryItemList,
-      params: { data_dictionary_id: route.query.id }
-    },
+const listOptions = {
+  remote: {
+    httpRequest: getDictionaryItemList,
+    params: { data_dictionary_id: route.query.id }
+  },
 
-    columns: [
-      { label: '字典编码', prop: 'data_dictionary_id', align: 'center' },
-      { label: '字典标签', prop: 'label', align: 'center' },
-      { label: '字典键值', prop: 'value', align: 'center' },
-      {
-        label: '状态',
-        prop: 'status_name',
-        align: 'center'
-      },
-      { label: '备注  ', prop: 'remark', align: 'center' },
-      { label: '创建时间', prop: 'created_time', align: 'center' },
-      { label: '操作', slots: 'table-operate', align: 'center', minWidth: 180 }
-    ]
-  }
-})
+  columns: [
+    { label: '字典编码', prop: 'data_dictionary_id', align: 'center' },
+    { label: '字典标签', prop: 'label', align: 'center' },
+    { label: '字典键值', prop: 'value', align: 'center' },
+    {
+      label: '状态',
+      prop: 'status_name',
+      align: 'center'
+    },
+    { label: '备注  ', prop: 'remark', align: 'center' },
+    { label: '创建时间', prop: 'created_time', align: 'center' },
+    { label: '操作', slots: 'table-operate', align: 'center', minWidth: 180 }
+  ]
+}
 const handleAdd = () => {
   isListAddDialog.value = true
   isEdit.value = false