41 lines
3.9 KiB
Vue
41 lines
3.9 KiB
Vue
<template>
|
||
<div>
|
||
<div class="n-layout-page-header"><n-card :bordered="false" title="会员通知">真实通知与运营模拟使用独立标签；运营模拟仅允许在非生产环境创建。</n-card></div>
|
||
<n-card :bordered="false" class="proCard">
|
||
<BasicForm ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" />
|
||
<BasicTable ref="actionRef" :columns="columns" :request="loadDataTable" :row-key="(row)=>row.id" :action-column="actionColumn" :scroll-x="scrollX" :resize-height-offset="-10000">
|
||
<template #tableTitle><n-button v-if="hasPermission(['/appMember/noticeEdit'])" type="primary" @click="openCreate">创建通知</n-button></template>
|
||
</BasicTable>
|
||
</n-card>
|
||
<n-modal v-model:show="showCreate" preset="card" title="创建会员通知" class="notice-modal">
|
||
<n-form label-placement="left" label-width="100">
|
||
<n-form-item label="接收会员ID"><n-input-number v-model:value="form.memberId" :min="0" /><n-text depth="3">0 表示全体会员</n-text></n-form-item>
|
||
<n-form-item label="标题"><n-input v-model:value="form.title" /></n-form-item>
|
||
<n-form-item label="内容"><n-input v-model:value="form.content" type="textarea" /></n-form-item>
|
||
<n-form-item label="来源"><n-select v-model:value="form.sourceType" :options="dict.getOptionUnRef('memberNoticeSource')" /></n-form-item>
|
||
<n-form-item label="有效期"><n-date-picker v-model:formatted-value="dateRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" clearable /></n-form-item>
|
||
</n-form>
|
||
<template #action><n-space justify="end"><n-button @click="showCreate=false">取消</n-button><n-button type="primary" @click="createNotice">创建</n-button></n-space></template>
|
||
</n-modal>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { computed, h, onMounted, reactive, ref } from 'vue';
|
||
import { useDialog, useMessage } from 'naive-ui';
|
||
import { BasicTable, TableAction } from '@/components/Table';
|
||
import { BasicForm, useForm } from '@/components/Form';
|
||
import { usePermission } from '@/hooks/web/usePermission';
|
||
import { useDictStore } from '@/store/modules/dict';
|
||
import { adaTableScrollX } from '@/utils/hotgo';
|
||
import { NoticeList, NoticeEdit, NoticeRevoke } from '@/api/appMember';
|
||
import { columns, schemas, loadOptions } from './model';
|
||
const message=useMessage(),dialog=useDialog(),dict=useDictStore();const {hasPermission}=usePermission();const actionRef=ref(),searchFormRef=ref<any>({}),showCreate=ref(false),dateRange=ref<[string,string]|null>(null);const form=reactive({memberId:0,title:'',content:'',sourceType:1});
|
||
const [register]=useForm({gridProps:{cols:'1 s:1 m:2 l:3'},labelWidth:70,schemas});const loadDataTable=(res)=>NoticeList({...searchFormRef.value?.formModel,...res});const reloadTable=()=>actionRef.value?.reload();
|
||
const actionColumn=reactive({width:100,title:'操作',key:'action',fixed:'right',render:(row)=>h(TableAction as any,{style:'button',actions:[{label:'撤回',disabled:row.noticeStatus===2,onClick:()=>revoke(row),auth:['/appMember/noticeRevoke']}]})});const scrollX=computed(()=>adaTableScrollX(columns,actionColumn.width));
|
||
function openCreate(){Object.assign(form,{memberId:0,title:'',content:'',sourceType:1});dateRange.value=null;showCreate.value=true}
|
||
async function createNotice(){if(!dateRange.value){message.error('请选择有效期');return}await NoticeEdit({...form,startAt:dateRange.value[0],endAt:dateRange.value[1]});message.success('创建成功');showCreate.value=false;reloadTable()}
|
||
function revoke(row){dialog.warning({title:'撤回通知',content:'撤回后前台不再展示，历史记录仍保留。',positiveText:'确认撤回',negativeText:'取消',onPositiveClick:async()=>{await NoticeRevoke({id:row.id,reason:'后台管理员撤回'});message.success('已撤回');reloadTable()}})}
|
||
onMounted(loadOptions);
|
||
</script>
|
||
<style lang="less" scoped>:deep(.notice-modal){width:min(720px,92vw)}</style>
|