294 lines
7.8 KiB
Vue
294 lines
7.8 KiB
Vue
<template>
|
||
<div>
|
||
<div class="table-container">
|
||
<div class="title-form">
|
||
<a-row>
|
||
<a-col :span="2" class="item-text-right">标题：</a-col>
|
||
<a-col :span="6">
|
||
<j-input style="width: 80%;!important;" placeholder="请输入标题" v-model:value="titile"></j-input>
|
||
</a-col>
|
||
<a-col :span="10">
|
||
<a-button style="margin-left: 8px" preIcon="ant-design:search-outlined" type="primary" @click="handleSelect">查询</a-button>
|
||
<a-button style="margin-left: 8px" preIcon="ic:baseline-restart-alt" @click="handleClear">重置</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<div class="item-table" v-loading="tableDataLoading">
|
||
<div v-if="noticeList.length > 0">
|
||
<a-row style="padding: 10px 0px;">
|
||
<a-col :span="6">
|
||
<a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新建</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
<div v-for="notice in noticeList">
|
||
<a-row class="item-header-border">
|
||
<a-col :span="16">
|
||
<span class="item-title">{{notice.titile}}【{{showDictValue(notice.sendStatus, statusData)}}】</span>
|
||
</a-col>
|
||
<a-col :span="8" class="item-text-right">
|
||
<a-button v-if="notice.sendStatus!=1" class="item-button-border" type="link" @click="handleEdit(notice)">编辑</a-button>
|
||
<a-button v-if="notice.sendStatus!=1" class="item-button-border" type="link" @click="handleDelete(notice)">删除</a-button>
|
||
<a-button v-if="notice.sendStatus!=1" class="item-button-border" type="link" @click="handleRelease(notice)">发布</a-button>
|
||
<a-button v-if="notice.sendStatus==1" class="item-button-border" type="link" @click="handleDetail(notice)">详情</a-button>
|
||
<a-button v-if="notice.sendStatus==1" class="item-button-border" type="link" @click="handleReturn(notice)">撤回</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row class="item-content-border">
|
||
<a-col :span="24">
|
||
<div class="item-content" v-html="notice.msgContent"></div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row class="item-bottom-border">
|
||
<a-col :span="24">
|
||
<div class="item-text-right item-padding-right item-bottom">{{notice.createTime}}</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<div class="item-text-right item-padding-right">
|
||
<a-pagination
|
||
v-model:current="pageNo"
|
||
v-model:page-size-options="pageSizeOptions"
|
||
v-model:pageSize="pageSize"
|
||
v-model:total="total"
|
||
size="small"
|
||
show-size-changer
|
||
show-quick-jumper
|
||
:show-total="total => `共 ${total} 条数据`"
|
||
@change="onChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div v-if="noticeList.length == 0">
|
||
<a-empty style="padding-top: 100px;">
|
||
<template #description>
|
||
<p>
|
||
通知通告空空如也
|
||
</p>
|
||
<p>
|
||
尽快给专家发送通知通告吧
|
||
</p>
|
||
</template>
|
||
<a-button type="primary">新建通知</a-button>
|
||
</a-empty>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<DetailModal @register="detailModal"/>
|
||
<NoticeModal @register="noticeModal" @success="handleSelect" />
|
||
</div>
|
||
</template>
|
||
<script lang="ts" name="system-notice" setup>
|
||
import {createVNode, onMounted, ref} from 'vue';
|
||
import { Modal } from 'ant-design-vue';
|
||
import {JInput} from '/@/components/Form';
|
||
import {defHttp} from "@/utils/http/axios";
|
||
import { Pagination } from 'ant-design-vue';
|
||
import {getToken} from "@/utils/auth";
|
||
import {useModal} from "@/components/Modal";
|
||
import DetailModal from './DetailModal.vue';
|
||
import NoticeModal from './NoticeModal.vue';
|
||
import {useGlobSetting} from "@/hooks/setting";
|
||
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||
const glob = useGlobSetting();
|
||
const [detailModal, { openModal: openDetail }] = useModal();
|
||
const [noticeModal, { openModal }] = useModal();
|
||
const APagination = Pagination;
|
||
|
||
onMounted(()=>{
|
||
handleClear();
|
||
})
|
||
|
||
const statusData = ref([{id:'0',value:'草稿'},{id:'1',value:'已发布'},{id:'2',value:'已撤销'}]);
|
||
|
||
//页数
|
||
const pageNo = ref<number>(1);
|
||
//每页条数
|
||
const pageSize = ref<number>(10);
|
||
//下拉分页显示
|
||
const pageSizeOptions = ref<any>(['10', '20', '50', '100']);
|
||
//总数
|
||
const total = ref<number>(1);
|
||
|
||
let titile = ref('');
|
||
const noticeList = ref<any>([]);
|
||
const tableDataLoading = ref(false);
|
||
|
||
const onChange = (pageNumber: number) => {
|
||
handleSelect();
|
||
};
|
||
|
||
function showDictValue(data, datas){
|
||
const dictItem = datas.find(item => data === item.id);
|
||
return dictItem ? dictItem.value : '';
|
||
}
|
||
|
||
function handleSelect() {
|
||
tableDataLoading.value = true;
|
||
noticeList.value = [];
|
||
let params = {
|
||
"titile":titile.value,
|
||
"pageNo":pageNo.value,
|
||
"pageSize":pageSize.value,
|
||
}
|
||
defHttp.get({ url: "/sys/annountCement/list", params:params}).then((res)=>{
|
||
noticeList.value = res.records;
|
||
total.value = res.total;
|
||
});
|
||
tableDataLoading.value = false;
|
||
}
|
||
|
||
function handleClear() {
|
||
titile.value = '';
|
||
pageNo.value = 1;
|
||
pageSize.value = 10;
|
||
handleSelect();
|
||
}
|
||
|
||
//详情
|
||
function handleDetail(record){
|
||
openDetail(true,{
|
||
record,
|
||
});
|
||
}
|
||
|
||
//增加
|
||
function handleAdd(){
|
||
openModal(true, {
|
||
isUpdate: false,
|
||
});
|
||
}
|
||
|
||
//修改
|
||
function handleEdit(record){
|
||
openModal(true, {
|
||
record,
|
||
isUpdate: true,
|
||
});
|
||
}
|
||
|
||
//删除
|
||
function handleDelete(record){
|
||
Modal.confirm({
|
||
title: '确定删除该通知吗?',
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
onOk() {
|
||
let params = {"id":record.id}
|
||
return defHttp.delete({ url: "/sys/annountCement/delete", data: params }, { joinParamsToUrl: true }).then(() => {
|
||
handleSelect();
|
||
});
|
||
},
|
||
onCancel() {},
|
||
});
|
||
}
|
||
|
||
//发布
|
||
function handleRelease(record){
|
||
Modal.confirm({
|
||
title: '确定发布该通知吗?',
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
onOk() {
|
||
let params = {"id":record.id}
|
||
defHttp.get({ url: "/sys/annountCement/doReleaseData", params }).then(()=>{
|
||
handleSelect();
|
||
});
|
||
},
|
||
onCancel() {},
|
||
});
|
||
}
|
||
|
||
//撤回
|
||
function handleReturn(record){
|
||
Modal.confirm({
|
||
title: '确定撤回该通知吗?',
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
onOk() {
|
||
let params = {"id":record.id}
|
||
defHttp.get({ url: "/sys/annountCement/doReovkeData", params }).then(()=>{
|
||
handleSelect();
|
||
});
|
||
},
|
||
onCancel() {},
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="less">
|
||
|
||
.table-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.title-form{
|
||
padding: 8px 10px 8px 10px;
|
||
margin-bottom: 8px;
|
||
background-color: #ffffff;
|
||
border-radius: 2px;
|
||
line-height: 46px;
|
||
}
|
||
|
||
.item-table{
|
||
padding: 6px;
|
||
background-color: #ffffff;
|
||
border-radius: 2px;
|
||
min-height: 600px;
|
||
}
|
||
|
||
.item-header-border{
|
||
border-style: solid;
|
||
border-top-width: 1px;
|
||
border-bottom-width: 0px;
|
||
border-left-width: 1px;
|
||
border-right-width: 1px;
|
||
border-color: #333333;
|
||
}
|
||
|
||
.item-content-border{
|
||
border-style: solid;
|
||
border-top-width: 1px;
|
||
border-bottom-width: 1px;
|
||
border-left-width: 1px;
|
||
border-right-width: 1px;
|
||
border-color: #333333;
|
||
}
|
||
|
||
.item-bottom-border{
|
||
border-style: solid;
|
||
border-top-width: 0px;
|
||
border-bottom-width: 1px;
|
||
border-left-width: 1px;
|
||
border-right-width: 1px;
|
||
border-color: #333333;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.item-button-border{
|
||
border-style: solid;
|
||
border-left-width: 1px;
|
||
border-color: #e5e7eb;
|
||
}
|
||
|
||
.item-text-right{
|
||
text-align: right;
|
||
}
|
||
|
||
.item-title{
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.item-content{
|
||
padding: 10px;
|
||
}
|
||
|
||
.item-bottom{
|
||
line-height: 30px;
|
||
}
|
||
|
||
.item-padding-right{
|
||
padding-right: 8px;
|
||
}
|
||
|
||
</style>
|