DBSD_ZJPT/jeecgboot-vue3/src/views/system/notice/index.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" class="mdule-box">
            <a-row class="item-header-border">
              <a-col :span="16">
                <span class="item-title" style="font-weight: bold;">{{notice.titile}}</span>
                <span :class="notice.sendStatus=='0'?'state-cg':notice.sendStatus=='1'?'state-fb':'state-cx'">{{notice.sendStatus}}-{{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: 5px;
  line-height: 46px;
}

.title-form:hover{
   box-shadow: 2px 2px 5px 2px #ddd;
}

.item-table{
  padding: 6px;
  background-color: #f7f8fa;
  border-radius: 5px;
  min-height: 600px;
  margin:10px 0;
  padding:0 10px 10px 10px;
  box-shadow: 2px 2px 10px 2px #ddd;
}
.item-header-border{
  // border-style: solid;
  // border-top-width: 0px;
  // border-bottom-width: 0px;
  // border-left-width: 0px;
  // border-right-width: 0px;
  // border-color: #333333;
  margin-top:3px;
}

.item-content-border{
  border-style: solid;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-color: #f7f7f7;
  margin-top: 10px;
  color: #666;
}

.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;
}

.item-button-border{
  // border-style: solid;
  // border-left-width: 1px;
  // border-color: #59afff;
  background: #e8f4ff;
  margin-right: 5px;
  color: #1890ff;
}
.item-button-border:hover{
  // border-style: solid;
  // border-left-width: 1px;
  // border-color: #59afff;
  background: #f7f8fa;
}
.item-text-right{
  text-align: right;
}

.item-title{
  font-size: 16px;
  padding-left: 10px;
  margin-top: 10px;
}

.item-content{
  padding: 10px;
}

.item-bottom{
  line-height: 30px;
}

.item-padding-right{
  padding-right: 8px;
}
.mdule-box{
  border: 2px solid #eff1f4;
  background: #fff;
  border-radius:5px;
  padding: 10px;
  margin-bottom: 10px;
}
.mdule-box:hover{
  border: 2px solid #afd9ff;
  background: #fff;
  border-radius:5px;
  box-shadow: 2px 2px 10px 2px #ddd;
  cursor: pointer;
}
.state-fb{
  background: #e5f8f0;
  color: #00bf6f;
  font-size: 12px;
  border-radius:3px;
  margin-left: 5px;
  padding: 2px 6px;
}
.state-cx{
  background: #e5f4ff;
  color: #65b2f3;
  font-size: 12px;
  border-radius:3px;
  margin-left: 5px;
  padding: 2px 6px;
}
.state-cg{
  background: #ffeeea;
  color: #fc5531;
  font-size: 12px;
  border-radius:3px;
  margin-left: 5px;
  padding: 2px 6px;
}
</style>