diff --git a/src/components/extra/ElTable.vue b/src/components/extra/ElTable.vue
index 9040e83..f9d2890 100644
--- a/src/components/extra/ElTable.vue
+++ b/src/components/extra/ElTable.vue
@@ -226,8 +226,21 @@
console.error('可拖拽表格ID不存在');
}
};
- // 元素实例化后初始化sortablejs
- onMounted(handleInit);
+ if (props.sortable) {
+ // 元素实例化后初始化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);
diff --git a/src/store/modules/operation/advertise/advertise.js b/src/store/modules/operation/advertise/advertise.js
index 7b9294b..b90dc3f 100644
--- a/src/store/modules/operation/advertise/advertise.js
+++ b/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,
diff --git a/src/views/operation/advertise/form.vue b/src/views/operation/advertise/form.vue
index 329c009..07f76fd 100644
--- a/src/views/operation/advertise/form.vue
+++ b/src/views/operation/advertise/form.vue
@@ -79,9 +79,9 @@
继续为该位置添加广告
取消
+
+ 选择广告平台和广告位置后可以对广告进行拖动排序
+
-
-
+
+
-
+
-
-
+
+
@@ -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 @@
});
-
+