fix: 广告排序

src/components/extra/ElTable.vue

@@ -226,8 +226,21 @@
             console.error('可拖拽表格ID不存在');
         }
     };
-    // 元素实例化后初始化sortablejs
+    if (props.sortable) {
-    onMounted(handleInit);
+        // 元素实例化后初始化sortablejs
+        onMounted(handleInit);
+    } else {
+        watch(
+            () => props.sortable,
+            (value, old) => {
+                if (!old && value) {
+                    handleInit();
+                } else if (old && !value) {
+                    sortable.value.destroy();
+                }
+            }
+        );
+    }
     // 代理原生函数
     const handleProxy = (fnName, args) => {
         return unref(refsTable)[fnName]?.apply(unref(refsTable), args);

src/store/modules/operation/advertise/advertise.js

@@ -165,6 +165,15 @@ const actions = {
             ElMessage.error((data.isEnable ? '启用' : '禁用') + '失败');
         }
     },
+    sort: async ({ dispatch }, data) => {
+        let res = await api.sort(data);
+        if (res) {
+            ElMessage.success('排序成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('排序失败');
+        }
+    },
 };
 export default {
     state,

src/views/operation/advertise/form.vue

@@ -79,9 +79,9 @@
             <el-checkbox v-model="next" style="margin-right: 10px">继续为该位置添加广告</el-checkbox>
             <el-button @click="handleCancel">取消</el-button>
             <el-button
+                v-if="!form.isEnable"
                 :disabled="loading"
                 :loading="loading"
-                v-if="!form.isEnable"
                 plain
                 type="primary"
                 @click="handleSave()"

src/views/operation/advertise/index.vue

@@ -7,22 +7,31 @@
             :data="list"
             :operation="['create', 'search', 'remove']"
             :reset="handleReset"
+            :sortable="!!(state.condition.platform && state.condition.location)"
             title="广告"
             :total="total"
             @create="handleCreate"
             @remove="handleRemove"
+            @row-sort="handleSort"
             @search="handleSearch"
         >
+            <template #operation>
+                <el-tag style="margin-left: 20px">选择广告平台和广告位置后可以对广告进行拖动排序</el-tag>
+            </template>
             <template #search>
                 <el-form inline>
-                    <el-form-item label="广告名称" prop="name">
+                    <el-form-item label="广告平台" prop="platform">
-                        <el-input v-model="state.condition.name" />
+                        <el-select v-model="state.condition.platform" :opts="opts.platform" />
                     </el-form-item>
                     <el-form-item label="广告位置" prop="location">
-                        <el-select v-model="state.condition.location" :opts="opts.location" />
+                        <el-select
+                            v-model="state.condition.location"
+                            :config="{ disabled: (item, index) => state.condition.platform === 2 && index !== 0 }"
+                            :opts="opts.location"
+                        />
                     </el-form-item>
-                    <el-form-item label="广告平台" prop="platform">
+                    <el-form-item label="广告名称" prop="name">
-                        <el-select v-model="state.condition.platform" :opts="opts.platform" />
+                        <el-input v-model="state.condition.name" />
                     </el-form-item>
                     <el-form-item label="是否启用" prop="isEnable">
                         <el-select v-model="state.condition.isEnable" :opts="opts.status" />
@@ -87,6 +96,19 @@
         loading.value = false;
     };
     onActivated(handleSearch);
+    watch(
+        [() => state.condition.platform, () => state.condition.location],
+        (value) => {
+            if (value[0] && value[1]) {
+                if (value[0] === 2) {
+                    state.condition.location = 1;
+                    store.commit('advertise/setCondition', _.cloneDeep(state.condition));
+                }
+                handleSearch();
+            }
+        },
+        { immediate: true, deep: true }
+    );
     const handleCreate = () => {
         router.push({ name: 'CreateAdvertise' });
     };
@@ -104,6 +126,17 @@
         await store.dispatch('advertise/enable', row);
         loading.value = false;
     };
+    const handleSort = async (newIndex, oldIndex) => {
+        loading.value = true;
+        await store.dispatch('advertise/sort', {
+            id: unref(list)[newIndex].id,
+            platform: state.condition.platform,
+            location: state.condition.location,
+            oldSort: unref(list)[newIndex].sort,
+            newSort: unref(list)[oldIndex].sort,
+        });
+        loading.value = false;
+    };
     const config = reactive({
         // 表格列配置
         columns: [
@@ -188,11 +221,4 @@
     });
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-    .col {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-    }
-</style>