feat: 秒杀CURD

src/api/operation/limit.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request.js';
+export const search = (params) => {
+    return request({
+        url: '/mall/marketing/activity',
+        method: 'get',
+        params,
+    });
+};
+export const detail = (id) => {
+    return request({
+        url: '/mall/marketing/activity/' + id,
+        method: 'get',
+    });
+};
+export const create = (data) => {
+    return request({
+        url: '/mall/marketing/activity',
+        method: 'post',
+        data,
+    });
+};
+export const update = (data) => {
+    return request({
+        url: '/mall/marketing/activity/' + data.id,
+        method: 'put',
+        data,
+    });
+};
+export const remove = (idList) => {
+    return request({
+        url: '/mall/marketing/activity',
+        method: 'delete',
+        params: { idList },
+    });
+};

src/components/extra/ElButton.vue

@@ -11,6 +11,9 @@
 </script>
 <style lang="less" scoped>
     .el-button {
+        &.el-button--text {
+            background-color: transparent;
+        }
         :deep(.el-icon) {
             position: relative;
             top: -2px;

src/store/modules/operation/limit/limitActivity.js

@@ -1,4 +1,4 @@
-import * as api from '@/api/sales/category.js';
+import * as api from '@/api/operation/limit.js';
 import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
 const state = () => ({
     code: 'LimitActivity',
@@ -25,11 +25,13 @@ const mutations = {
     setOpts: (state, data) => (state.opts = data),
 };
 const actions = {
-    search: async ({ state, commit }) => {
+    search: async ({ state, commit, rootGetters }) => {
-        let res = await api.search(state.condition);
+        let data = { ...state.condition };
-        commit('setList', res);
+        let res = await api.search({ ...rootGetters['local/page'](state.code), ...data });
+        commit('setList', res?.records || []);
+        commit('setTotal', res?.total || 0);
         if (!res) {
-            ElMessage.error('查询商品分类列表失败');
+            ElMessage.error('查询活动列表失败');
         }
         return res;
     },
@@ -39,11 +41,8 @@ const actions = {
             init: true,
         });
     },
-    detail: async ({ state, dispatch }, id) => {
+    detail: async (context, id) => {
-        if (!state.list.length) {
+        let res = await api.detail(id);
-            await dispatch('search');
-        }
-        let res = state.list.find((item) => item.id === id);
         if (!res) {
             ElMessage.error('加载详情失败');
         }
@@ -51,6 +50,9 @@ const actions = {
     },
     save: async ({ dispatch }, data) => {
         let save = data.id ? api.update : api.create;
+        data = _.cloneDeep(data);
+        data.activityStartTime = data.activityStartTime.split(' ')[0];
+        data.activityEndTime = data.activityEndTime.split(' ')[0];
         let res = await save(data);
         if (res) {
             ElMessage.success('保存成功');
@@ -60,22 +62,13 @@ const actions = {
         }
         return res;
     },
-    sort: async (context, data) => {
-        let res = await api.sort(data);
-        if (res) {
-            ElMessage.success(`移动前序号：${data.oldSort + 1}；移动后序号：${data.currentSort + 1}`);
-        } else {
-            ElMessage.error('保存排序失败');
-        }
-        return res;
-    },
     remove: async ({ dispatch }, ids) => {
         if (!ids.length) {
             ElMessage.warning('请选择要删除的数据');
         } else {
             try {
                 await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
-                let res = await api.remove({ id: ids.join(',') });
+                let res = await api.remove(ids.join(','));
                 if (res) {
                     ElMessage.success('删除成功');
                     dispatch('search');

src/views/operation/limit/index.vue

@@ -9,16 +9,16 @@
             :reset="handleReset"
             title="活动"
             :total="total"
-            @create="handleCreate"
+            @create="handleCreate()"
             @search="handleSearch"
         >
             <template #search>
                 <el-form inline>
-                    <el-form-item label="活动名称" prop="name">
+                    <el-form-item label="活动名称" prop="activityName">
-                        <el-input v-model="state.condition.name" />
+                        <el-input v-model="state.condition.activityName" />
                     </el-form-item>
-                    <el-form-item label="活动状态" prop="status">
+                    <el-form-item label="活动状态" prop="activityStatus">
-                        <el-select v-model="state.condition.status" :opts="opts.status" />
+                        <el-select v-model="state.condition.activityStatus" :opts="opts.status" />
                     </el-form-item>
                 </el-form>
             </template>
@@ -29,16 +29,12 @@
                     <el-input v-model="formState.form.name" />
                 </el-form-item>
                 <el-form-item label="活动名称" prop="time">
-                    <el-date-picker
+                    <el-date-picker v-model="formState.form.time" type="daterange" value-format="YYYY-MM-DD" />
-                        v-model="formState.form.time"
-                        type="datetimerange"
-                        value-format="YYYY-MM-DD HH:mm:ss"
-                    />
                 </el-form-item>
             </el-form>
             <template #footer>
                 <el-button @click="formState.formVisible = false">取消</el-button>
-                <el-button type="primary" @click="handleSave">保存</el-button>
+                <el-button :loading="formState.submitting" type="primary" @click="handleSave">保存</el-button>
             </template>
         </el-dialog>
     </div>
@@ -52,7 +48,7 @@
     const store = useStore();
     const loading = ref(false);
     const code = computed(() => store.state.limitActivity.code);
-    const list = computed(() => store.state.limitActivity.list);
+    const list = computed(() => _.cloneDeep(store.state.limitActivity.list));
     const total = computed(() => store.state.limitActivity.total);
     const opts = computed(() => store.state.limitActivity.opts);
     if (!unref(opts).init) {
@@ -62,8 +58,8 @@
     /* 列表查询 */
     const state = reactive({
         condition: {
-            name: null,
+            activityName: null,
-            status: null,
+            activityStatus: null,
         },
     });
     watch(
@@ -75,8 +71,8 @@
     );
     const handleReset = () => {
         state.condition = {
-            name: null,
+            activityName: null,
-            status: null,
+            activityStatus: null,
         };
     };
     const handleSearch = async () => {
@@ -86,12 +82,14 @@
     };
 
     /* 表单 */
+    const refsForm = ref(null);
     const formState = reactive({
         formVisible: false,
-        refsForm: null,
+        submitting: false,
         form: {
             name: null,
             time: [],
+            isOnline: false,
         },
         rules: {
             name: [{ required: true, message: '活动名称不能为空' }],
@@ -107,16 +105,23 @@
                 time: [],
             }
         );
-        formState.formVisible.value = true;
+        formState.formVisible = true;
     };
     // 保存
     const handleSave = async () => {
+        formState.submitting = true;
         try {
-            await unref(formState.refsForm).validate();
+            await unref(refsForm).validate();
+            let data = _.cloneDeep(formState.form);
+            data.activityStartTime = data.time[0];
+            data.activityEndTime = data.time[1];
+            delete data.time;
+            await store.dispatch('limitActivity/save', data);
             formState.formVisible = false;
         } catch (e) {
             console.info('取消保存', e);
         }
+        formState.submitting = false;
     };
 
     /* 操作 */
@@ -129,8 +134,10 @@
         router.push({ name: 'UpdateLimitProduct', params: { id: row.id } });
     };
     // 上下架
-    const handleEnable = (row, value) => {
+    const handleEnable = async (row) => {
-        row.enabled = value;
+        loading.value = true;
+        await store.dispatch('limitActivity/save', row);
+        loading.value = false;
     };
     // 删除
     const handleRemove = async (rows) => {
@@ -160,23 +167,21 @@
                 label: '活动状态',
                 width: 160,
                 slots: {
-                    default: ({ row }) => proxy.$dict(unref(opts).status, row.status),
+                    default: ({ row }) => proxy.$dict(unref(opts).status, row.activityState),
                 },
             },
             {
                 label: '活动时间',
                 width: 360,
                 slots: {
-                    default: ({ row }) => row.startTime + ' - ' + row.endTime,
+                    default: ({ row }) => row.activityStartTime + ' - ' + row.activityEndTime,
                 },
             },
             {
                 label: '上线/下线',
                 width: 120,
                 slots: {
-                    default: ({ row }) => (
+                    default: ({ row }) => <ElSwitch v-model={row.isOnline} onChange={() => handleEnable(row)} />,
-                        <ElSwitch value={row.isEnable} onChange={(visible) => handleEnable(row, visible)} />
-                    ),
                 },
             },
             {
@@ -192,10 +197,14 @@
                             <ElButton type="text" onClick={() => handleUpdateProduct(row)}>
                                 设置商品
                             </ElButton>
-                            <ElButton type="text" onClick={() => handleCreate(row)}>
+                            <ElButton type="text" disabled={row.activityState !== 1} onClick={() => handleCreate(row)}>
                                 编辑
                             </ElButton>
-                            <ElButton type="text" onClick={() => handleRemove([row])}>
+                            <ElButton
+                                type="text"
+                                disabled={row.activityState !== 1}
+                                onClick={() => handleRemove([row])}
+                            >
                                 删除
                             </ElButton>
                         </div>