Merge branch 'msb_test' into msb_prod

src/api/sales/category.js

@@ -30,7 +30,13 @@ export const remove = (params) => {
 export const sort = (data) => {
     return request({
         url: '/mall/product/admin/productCategory/updateSort',
-        method: 'post',
+        method: 'put',
         data,
     });
 };
+export const transform = (data) => {
+    return request({
+        url: `/mall/product/admin/productCategory/transfer/${data.sourceId}/${data.targetId}`,
+        method: 'put',
+    });
+};

src/api/sales/product.js

@@ -26,6 +26,13 @@ export const update = (data) => {
         data,
     });
 };
+export const enable = (data) => {
+    return request({
+        url: '/mall/product/admin/product/enable/' + data.id,
+        method: 'put',
+        params: { isEnable: data.isEnable },
+    });
+};
 export const remove = (params) => {
     return request({
         url: '/mall/product/admin/product',

src/api/system/customer.js

@@ -1,14 +1,14 @@
 import request from '@/utils/request.js';
 export const search = (params) => {
     return request({
-        url: 'admin/user/page',
+        url: 'uc/admin/user/page',
         method: 'get',
         params,
     });
 };
 export const enable = (params) => {
     return request({
-        url: 'admin/user/enable',
+        url: 'uc/admin/user/enable',
         method: 'put',
         params,
     });

src/api/system/notify.js

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

src/components/ElEditor.vue

@@ -75,8 +75,9 @@
         { deep: true }
     );
     const handleReady = () => {
-        unref(editor).setHTML(attrs.modelValue || '');
+        unref(editor)?.setHTML(attrs.modelValue || '');
     };
+    watch(() => attrs.modelValue, handleReady, { immediate: true });
     const handleUpdateContent = () => {
         content.value = unref(editor).getHTML();
     };

src/router/modules/system.js

@@ -49,6 +49,15 @@ export default [
                     icon: 'UserFilled',
                 },
             },
+            {
+                path: 'notify',
+                name: 'NotifyManagement',
+                component: () => import('@/views/system/notify/index.vue'),
+                meta: {
+                    title: '系统通知',
+                    icon: 'AlarmClock',
+                },
+            },
         ],
     },
 ];

src/store/modules/sales/category.js

@@ -64,10 +64,21 @@ const actions = {
         }
         return res;
     },
-    sort: async (context, data) => {
+    transform: async ({ dispatch }, data) => {
+        let res = await api.transform(data);
+        if (res) {
+            ElMessage.success('保存成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('保存失败');
+        }
+        return res;
+    },
+    sort: async ({ dispatch }, data) => {
         let res = await api.sort(data);
         if (res) {
             ElMessage.success(`移动前序号：${data.oldSort + 1}；移动后序号：${data.currentSort + 1}`);
+            dispatch('search');
         } else {
             ElMessage.error('保存排序失败');
         }

src/store/modules/sales/product.js

@@ -74,10 +74,6 @@ const mutations = {
 const actions = {
     search: async ({ state, commit, rootGetters }) => {
         let data = { ...state.condition };
-        data.productStatus = (data.productStatus || []).join(',');
-        if (data.productStatus === '0') {
-            delete data.productStatus;
-        }
         let res = await api.search({ ...rootGetters['local/page'](state.code), ...data });
         commit('setList', res?.records || []);
         commit('setTotal', res?.total || 0);
@@ -111,6 +107,16 @@ const actions = {
         }
         return res;
     },
+    enable: async ({ dispatch }, data) => {
+        let res = await api.enable(data);
+        if (res) {
+            ElMessage.success('保存成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('保存失败');
+        }
+        return res;
+    },
     sort: async (context, data) => {
         let res = await api.sort(data);
         if (res) {

src/store/modules/system/notify.js

@@ -0,0 +1,83 @@
+import * as api from '@/api/system/notify.js';
+import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
+const state = () => ({
+    code: 'NotifyManagement',
+    condition: {},
+    list: [],
+    total: 0,
+    opts: {
+        init: false,
+    },
+});
+const getters = {};
+const mutations = {
+    setCode: (state, data) => (state.code = data),
+    setCondition: (state, data) => (state.condition = data),
+    setList: (state, data) => (state.list = data),
+    setTotal: (state, data) => (state.total = data),
+    setOpts: (state, data) => (state.opts = data),
+};
+const actions = {
+    search: async ({ state, commit, rootGetters }) => {
+        let data = { ...state.condition };
+        data.startReleaseTime = data.dateRange?.[0];
+        data.endReleaseTime = data.dateRange?.[1];
+        delete data.dateRange;
+        let res = await api.search({ ...rootGetters['local/page'](state.code), ...state.condition });
+        if (res) {
+            commit('setList', res.records);
+            commit('setTotal', res.total);
+        } else {
+            ElMessage.error('查询失败');
+            commit('setList', []);
+        }
+        return res;
+    },
+    load: async ({ commit }) => {
+        commit('setOpts', {
+            init: true,
+        });
+    },
+    detail: async (context, id) => {
+        let res = await api.detail(id);
+        if (!res) {
+            ElMessage.error('加载详情失败');
+        }
+        return res;
+    },
+    save: async ({ dispatch }, data) => {
+        let save = data.id ? api.update : api.create;
+        let res = await save(data);
+        if (res) {
+            ElMessage.success('保存成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('保存失败');
+        }
+        return res;
+    },
+    remove: async ({ dispatch }, idList) => {
+        if (!idList.length) {
+            ElMessage.warning('请选择要删除的数据');
+        } else {
+            try {
+                await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
+                let res = await api.remove(idList.join(','));
+                if (res) {
+                    ElMessage.success('删除成功');
+                    dispatch('search');
+                } else {
+                    ElMessage.error('删除失败');
+                }
+            } catch (e) {
+                console.info('取消删除', e);
+            }
+        }
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};

src/views/sales/category/form.vue

@@ -76,6 +76,9 @@
                 Object.assign(form, res);
             }
         }
+        if (route.query.pid && !form.parentId) {
+            form.parentId = +route.query.pid;
+        }
     };
     onActivated(handleLoad);
     /* 交互 */

src/views/sales/category/index.vue

@@ -1,38 +1,53 @@
 <template>
     <div class="list-container">
         <TableList
+            ref="refsTable"
             v-loading="loading"
             :code="code"
             :config="config"
             :data="list"
-            :operation="['search', 'create']"
+            :operation="['create']"
-            :reset="handleReset"
             sortable
             title="分类"
             :total="total"
-            @create="handleCreate"
+            @create="handleCreate()"
+            @row-click="handleExpand"
             @row-sort="handleSort"
-            @search="handleSearch"
+        />
-        >
+        <el-dialog v-model="formState.formVisible" title="转移商品" width="360px">
-            <template #search>
+            <el-form ref="refsForm" label-width="100px" :model="formState.form" :rules="formState.rules">
-                <el-form inline>
+                <el-form-item label="目标分类" prop="targetId">
-                    <el-form-item label="是否显示" prop="visible">
+                    <el-cascader
-                        <el-select v-model="state.condition.visible" :opts="opts.visible" />
+                        v-model="formState.form.targetId"
+                        :options="list"
+                        :props="{
+                            label: 'name',
+                            value: 'id',
+                            children: 'childList',
+                            trigger: 'hover',
+                            emitPath: false,
+                        }"
+                    />
                 </el-form-item>
             </el-form>
+            <template #footer>
+                <el-button @click="formState.formVisible = false">取消</el-button>
+                <el-button :loading="formState.submitting" type="primary" @click="handleSave">保存</el-button>
             </template>
-        </TableList>
+        </el-dialog>
     </div>
 </template>
 
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
     import ElSwitch from '@/components/extra/ElSwitch.vue';
+    import TableList from '@/components/TableList.vue';
     const router = useRouter();
     const store = useStore();
     const loading = ref(false);
+    const refsTable = ref(null);
     const code = computed(() => store.state.category.code);
-    const list = computed(() => store.state.category.list);
+    const list = computed(() => _.cloneDeep(store.state.category.list));
     const total = computed(() => store.state.category.total);
     const opts = computed(() => store.state.category.opts);
     if (!unref(opts).init) {
@@ -41,9 +56,7 @@
 
     /* 查询订单 */
     const state = reactive({
-        condition: {
+        condition: {},
-            visible: null,
-        },
     });
     watch(
         () => state.condition,
@@ -52,24 +65,22 @@
         },
         { immediate: true, deep: true }
     );
-    const handleReset = () => {
-        state.condition = {
-            visible: null,
-        };
-    };
     const handleSearch = async () => {
         loading.value = true;
         await store.dispatch('category/search');
         loading.value = false;
     };
-    const handleCreate = () => {
+    onActivated(handleSearch);
-        router.push({ name: 'CreateCategory' });
+    const handleCreate = (row) => {
+        router.push({ name: 'CreateCategory', query: { pid: row?.id } });
     };
     const handleUpdate = (row) => {
         router.push({ name: 'UpdateCategory', params: { id: row.id } });
     };
-    const handleVisible = (row) => {
+    const handleVisible = async (row) => {
-        router.push({ name: 'UpdateCategory', params: { id: row.id } });
+        loading.value = true;
+        await store.dispatch('category/save', row);
+        loading.value = false;
     };
     const handleRemove = async (rows) => {
         await store.dispatch(
@@ -77,27 +88,72 @@
             rows.map((item) => item.id)
         );
     };
-    const handleSort = async (currentSort, oldSort) => {
+    const handleSort = async (newSort, oldSort, e, list) => {
+        list = list || unref(list);
+        let direction = (oldSort - newSort) / Math.abs(oldSort - newSort);
+        let currentSort = list[newSort].sort;
+        oldSort = list[newSort + direction].sort;
         loading.value = true;
-        await store.dispatch('category/sort', { id: unref(list)[currentSort].id, currentSort, oldSort });
+        await store.dispatch('category/sort', { id: list[newSort].id, currentSort, oldSort });
         loading.value = false;
     };
+    const handleExpand = (row) => {
+        unref(list).forEach((item) => {
+            unref(refsTable).toggleRowExpansion(item, false);
+        });
+        unref(refsTable).toggleRowExpansion(row);
+    };
+
+    /* 表单 */
+    const refsForm = ref(null);
+    const formState = reactive({
+        formVisible: false,
+        submitting: false,
+        form: {
+            sourceId: null,
+            targetId: false,
+        },
+        rules: {
+            targetId: [{ required: true, message: '目标分类不能为空' }],
+        },
+    });
+    // 转移商品
+    const handleTransform = (row) => {
+        formState.form = {
+            sourceId: row.id,
+            targetId: null,
+        };
+        formState.formVisible = true;
+    };
+    const handleSave = async () => {
+        formState.submitting = true;
+        try {
+            await unref(refsForm).validate();
+            let data = _.cloneDeep(formState.form);
+            await store.dispatch('category/transform', data);
+            formState.formVisible = false;
+        } catch (e) {
+            console.info('取消保存', e);
+        }
+        formState.submitting = false;
+    };
 
     /* 列表配置 */
-    const config = reactive({
+    const handleConfig = (parent) => {
+        let res = reactive({
+            setting: !parent,
             page: false,
             columns: [
                 {
                     label: '分类名称',
                     prop: 'name',
                     minWidth: 300,
-                fixed: 'left',
                 },
                 {
                     label: '图片',
                     minWidth: 300,
                     slots: {
-                    default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
+                        default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="64px" />,
                     },
                 },
                 {
@@ -105,13 +161,12 @@
                     width: 120,
                     slots: {
                         default: ({ row }) => (
-                        <ElSwitch value={row.isEnable} onChange={(visible) => handleVisible(row, visible)} />
+                            <ElSwitch v-model={row.isEnable} onChange={(visible) => handleVisible(row, visible)} />
                         ),
                     },
                 },
                 {
                     label: '操作',
-                fixed: 'right',
                     width: 300,
                     slots: {
                         default: ({ row }) => (
@@ -119,7 +174,7 @@
                                 <ElButton type="text" onClick={() => handleCreate(row)}>
                                     新增下级
                                 </ElButton>
-                            <ElButton type="text" onClick={() => handleCreate(row)}>
+                                <ElButton type="text" onClick={() => handleTransform(row)}>
                                     转移商品
                                 </ElButton>
                                 <ElButton type="text" onClick={() => handleUpdate(row)}>
@@ -134,23 +189,43 @@
                 },
             ],
         });
+        if (!parent) {
+            res.columns.unshift({
+                type: 'expand',
+                width: 60,
+                slots: {
+                    default: ({ row }) => (
+                        <TableList
+                            code={Date.now() + ''}
+                            config={handleConfig(row)}
+                            data={row.childList || []}
+                            operation={[]}
+                            sortable
+                            onRowSort={(newSort, oldSort, e) => handleSort(newSort, oldSort, e, row.childList)}
+                        />
+                    ),
+                },
+            });
+        } else {
+            res.columns.unshift({
+                type: 'index',
+                width: 60,
+            });
+        }
+        return res;
+    };
+    const config = handleConfig(null);
 </script>
 
 <style lang="less" scoped>
-    .list-container {
+    :deep(.el-table__expanded-cell) {
-        display: flex;
-        flex-direction: column;
         .common-list {
-            flex-shrink: 1;
+            width: 100%;
-        }
+            min-height: 300px;
-        .order-status {
+            flex: 1;
             display: flex;
-            margin-bottom: @layout-space;
+            flex-direction: column;
-            li {
+            overflow: hidden;
-                + li {
-                    margin-left: @layout-space;
-                }
-            }
         }
     }
 </style>

src/views/sales/product/index.vue

@@ -1,20 +1,5 @@
 <template>
     <div class="list-container">
-        <ul class="product-status">
-            <li v-for="(item, index) in opts.status" :key="index">
-                <el-button
-                    :type="state.condition.productStatus.includes(item.value) ? 'primary' : 'default'"
-                    @click="handleStatus(item.value)"
-                >
-                    <span>
-                        {{ item.label }}
-                    </span>
-                    <span>(</span>
-                    <span class="num">{{ summary[index] || 0 }}</span>
-                    <span>)</span>
-                </el-button>
-            </li>
-        </ul>
         <TableList
             v-loading="loading"
             :code="code"
@@ -54,7 +39,6 @@
     const code = computed(() => store.state.product.code);
     const list = computed(() => _.cloneDeep(store.state.product.list));
     const total = computed(() => store.state.product.total);
-    const summary = computed(() => store.state.product.summary);
     const opts = computed(() => store.state.product.opts);
     if (!unref(opts).init) {
         store.dispatch('product/load');
@@ -65,7 +49,6 @@
         condition: {
             name: null,
             categoryId: null,
-            productStatus: [],
         },
     });
     watch(
@@ -75,40 +58,12 @@
         },
         { immediate: true, deep: true }
     );
-    watch(
-        () => state.condition.productStatus,
-        () => {
-            handleSearch();
-        },
-        { deep: true }
-    );
     const handleReset = () => {
         state.condition = {
             name: null,
             categoryId: null,
-            productStatus: [],
         };
     };
-    const handleStatus = (status) => {
-        let index = state.condition.productStatus.indexOf(status);
-        if (index === -1) {
-            if (status === 0) {
-                state.condition.productStatus = [0];
-            } else {
-                state.condition.productStatus.push(status);
-                state.condition.productStatus = state.condition.productStatus.filter((item) => item > 0);
-            }
-        } else {
-            if (status !== 0) {
-                state.condition.productStatus.splice(index, 1);
-                if (state.condition.productStatus.length) {
-                    state.condition.productStatus = state.condition.productStatus.filter((item) => item > 0);
-                } else {
-                    state.condition.productStatus = [0];
-                }
-            }
-        }
-    };
     const handleSearch = async () => {
         loading.value = true;
         await store.dispatch('product/search');
@@ -160,7 +115,7 @@
     /* 上下架 */
     const handleEnabled = async (row) => {
         loading.value = true;
-        await store.dispatch('product/save', row);
+        await store.dispatch('product/enable', { id: row.id, isEnable: row.isEnable });
         loading.value = false;
     };
 
@@ -242,14 +197,5 @@
         .common-list {
             flex-shrink: 1;
         }
-        .product-status {
-            display: flex;
-            margin-bottom: @layout-space;
-            li {
-                + li {
-                    margin-left: @layout-space;
-                }
-            }
-        }
     }
 </style>

src/views/system/customer/form.vue

@@ -1,113 +0,0 @@
-<template>
-    <div class="form-container">
-        <el-form
-            ref="refsForm"
-            v-loading="loading"
-            class="form-content"
-            label-width="100px"
-            :model="form"
-            :rules="rules"
-        >
-            <el-form-item label="用户名" prop="userName">
-                <el-input v-model="form.userName" />
-            </el-form-item>
-            <el-form-item label="员工姓名" prop="employeeName">
-                <el-input v-model="form.employeeName" />
-            </el-form-item>
-            <el-form-item label="员工类型" prop="employeeType">
-                <el-select v-model="form.employeeType" :opts="opts.type" />
-            </el-form-item>
-            <el-form-item label="手机号" prop="phone">
-                <el-input v-model="form.phone" />
-            </el-form-item>
-            <el-form-item label="邮箱" prop="email">
-                <el-input v-model="form.email" />
-            </el-form-item>
-            <el-form-item label="是否启用" prop="isEnable">
-                <el-switch v-model="form.isEnable" />
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-                <el-input v-model="form.remark" type="textarea" />
-            </el-form-item>
-        </el-form>
-        <div class="form-footer">
-            <el-button @click="handleCancel">取消</el-button>
-            <el-button :disabled="loading" :loading="submitting" type="primary" @click="handleSave">保存</el-button>
-        </div>
-    </div>
-</template>
-
-<script setup>
-    /* 全局 */
-    const store = useStore();
-    const route = useRoute();
-    const router = useRouter();
-    const { proxy } = getCurrentInstance();
-    /* 表单 */
-    const loading = ref(false);
-    const submitting = ref(false);
-    const refsForm = ref(null);
-    const form = reactive({
-        id: null,
-        email: '',
-        employeeName: '',
-        employeeType: 1,
-        isEnable: false,
-        phone: '',
-        remark: '',
-        userName: '',
-    });
-    const rules = reactive({
-        userName: [{ required: true, message: '用户名不能为空' }],
-        employeeName: [{ required: true, message: '员工姓名不能为空' }],
-        employeeType: [{ required: true, message: '员工类型不能为空' }],
-    });
-    const opts = computed(() => store.state.employee.opts);
-    if (!unref(opts).init) {
-        store.dispatch('employee/load');
-    }
-    /* 数据 */
-    const handleLoad = async () => {
-        if (route.params.id) {
-            const id = +route.params.id;
-            if (form.id !== id) {
-                let res = await store.dispatch('employee/detail', id);
-                Object.assign(form, res);
-            }
-        }
-    };
-    onActivated(handleLoad);
-    /* 交互 */
-    const handleSave = async () => {
-        submitting.value = true;
-        try {
-            await unref(refsForm).validate();
-            let data = { ...unref(form) };
-            data.voucherClueUrls = data.voucherClueUrls || [];
-            data.voucherClueUrl = data.voucherClueUrls.join(',');
-            let res = await store.dispatch('employee/save', data);
-            if (res) {
-                if (!data.id) {
-                    unref(refsForm).resetFields();
-                }
-                handleClose();
-            }
-        } catch (e) {
-            console.info('取消保存', e);
-        }
-        submitting.value = false;
-    };
-    const handleCancel = async () => {
-        try {
-            await proxy.$confirm('确定要放弃未保存的数据继续离开吗?', '数据未保存');
-            handleClose();
-        } catch (e) {
-            console.info('取消关闭', e);
-        }
-    };
-    const handleClose = () => {
-        router.push({ name: 'UserManagement' });
-    };
-</script>
-
-<style lang="less" scoped></style>

src/views/system/customer/index.vue

@@ -70,6 +70,7 @@
         await store.dispatch('customer/search');
         loading.value = false;
     };
+    onActivated(handleSearch);
     const handleEnable = async (row) => {
         loading.value = true;
         await store.dispatch('customer/enable', { userId: row.id, isEnable: !row.isEnable });

src/views/system/employee/index.vue

@@ -59,6 +59,7 @@
         await store.dispatch('employee/search');
         loading.value = false;
     };
+    onActivated(handleSearch);
     const handleCreate = () => {
         router.push({ name: 'CreateEmployee' });
     };
@@ -66,12 +67,10 @@
         router.push({ name: 'UpdateEmployee', params: { id: row.id } });
     };
     const handleRemove = async (rows) => {
-        loading.value = true;
+        store.dispatch(
-        await store.dispatch(
             'employee/remove',
             rows.map((item) => item.id)
         );
-        loading.value = false;
     };
     const handleEnable = async (row) => {
         loading.value = true;

src/views/system/notify/index.vue

@@ -0,0 +1,185 @@
+<template>
+    <TableList
+        v-loading="loading"
+        :code="code"
+        :config="config"
+        :data="list"
+        :operation="['create', 'search']"
+        :reset="handleReset"
+        title="消息通知"
+        :total="total"
+        @create="handleCreate"
+        @remove="handleRemove"
+        @search="handleSearch"
+    >
+        <template #search>
+            <el-form inline>
+                <el-form-item label="消息标题" prop="title">
+                    <el-input v-model="state.condition.title" />
+                </el-form-item>
+                <el-form-item label="发布时间" prop="dateRange">
+                    <el-input v-model="state.condition.dateRange" />
+                </el-form-item>
+            </el-form>
+        </template>
+    </TableList>
+    <el-dialog v-model="formState.formVisible" :title="formState.form.id ? '查看' : '添加' + '通知'">
+        <el-form
+            ref="refsForm"
+            :disabled="!!formState.form.id"
+            label-width="100px"
+            :model="formState.form"
+            :rules="formState.rules"
+        >
+            <el-form-item label="消息标题" prop="title">
+                <el-input v-model="formState.form.title" />
+            </el-form-item>
+            <el-form-item label="消息内容" prop="content">
+                <el-input v-model="formState.form.content" :autosize="{ minRows: 3, maxRows: 5 }" type="textarea" />
+            </el-form-item>
+            <el-form-item label="链接跳转" prop="linkJump">
+                <el-input v-model="formState.form.linkJump" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="formState.formVisible = false">取消</el-button>
+            <el-button v-if="!formState.form.id" :loading="formState.submitting" type="primary" @click="handleSave">
+                保存
+            </el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="jsx">
+    import ElButton from '@/components/extra/ElButton.vue';
+    const store = useStore();
+    const loading = ref(false);
+    const code = computed(() => store.state.notify.code);
+    const list = computed(() => store.state.notify.list);
+    const total = computed(() => store.state.notify.total);
+    const opts = computed(() => store.state.notify.opts);
+    if (!unref(opts).init) {
+        store.dispatch('notify/load');
+    }
+    const state = reactive({
+        condition: {
+            title: null,
+            dateRange: [],
+        },
+    });
+    watch(
+        () => state.condition,
+        (value) => {
+            store.commit('notify/setCondition', _.cloneDeep(value));
+        },
+        { immediate: true, deep: true }
+    );
+    const handleReset = () => {
+        state.condition = {
+            title: null,
+            dateRange: [],
+        };
+    };
+    const handleSearch = async () => {
+        loading.value = true;
+        await store.dispatch('notify/search');
+        loading.value = false;
+    };
+    onActivated(handleSearch);
+
+    /* 表单 */
+    const refsForm = ref(null);
+    const formState = reactive({
+        formVisible: false,
+        submitting: false,
+        form: {
+            title: null,
+            content: null,
+            linkJump: null,
+        },
+        rules: {
+            title: [{ required: true, message: '消息标题不能为空' }],
+            content: [{ required: true, message: '消息内容不能为空' }],
+        },
+    });
+    // 添加/编辑
+    const handleCreate = (row) => {
+        Object.assign(
+            formState.form,
+            row || {
+                title: null,
+                content: null,
+                linkJump: null,
+            }
+        );
+        formState.formVisible = true;
+    };
+    // 保存
+    const handleSave = async () => {
+        formState.submitting = true;
+        try {
+            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;
+    };
+    const handleRemove = async (rows) => {
+        loading.value = true;
+        await store.dispatch(
+            'notify/remove',
+            rows.map((item) => item.id)
+        );
+        loading.value = false;
+    };
+    const config = reactive({
+        // 表格列配置
+        columns: [
+            {
+                label: '编号',
+                prop: 'id',
+                width: 160,
+            },
+            {
+                label: '消息标题',
+                prop: 'title',
+                minWidth: 160,
+            },
+            {
+                label: '发布时间',
+                prop: 'phone',
+                width: 160,
+            },
+            {
+                label: '发布人员',
+                prop: 'email',
+                width: 160,
+            },
+            {
+                label: '操作',
+                fixed: 'right',
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <ElButton type="text" onClick={() => handleCreate(row)}>
+                                查看
+                            </ElButton>
+                            <ElButton type="text" onClick={() => handleRemove([row])}>
+                                删除
+                            </ElButton>
+                        </div>
+                    ),
+                },
+                width: 120,
+            },
+        ],
+    });
+</script>
+
+<style lang="less" scoped></style>