shop-admin/src/views/system/notify/index.vue

<template>
    <div class="list-container">
        <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>
    </div>
</template>

<script setup lang="jsx">
    import ElButton from '@/components/extra/ElButton.vue';
    const store = useStore();
    const { proxy } = getCurrentInstance();
    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 proxy.$validate(refsForm);
            let data = _.cloneDeep(formState.form);
            await store.dispatch('notify/save', data);
            formState.formVisible = false;
        } catch (e) {
            console.info('取消保存', e);
        }
        formState.submitting = false;
    };
    const handleRemove = async (rows) => {
        store.dispatch(
            'notify/remove',
            rows.map((item) => item.id)
        );
    };
    const config = reactive({
        // 表格列配置
        columns: [
            {
                label: '编号',
                prop: 'id',
                width: 160,
            },
            {
                label: '消息标题',
                prop: 'title',
                minWidth: 160,
            },
            {
                label: '发布时间',
                prop: 'releaseTime',
                width: 160,
            },
            {
                label: '发布人员',
                prop: 'createUser',
                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>