ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="公告标题" prop="noticeTitle">
        <el-input
          v-model="queryParams.noticeTitle"
          placeholder="请输入公告标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="操作人员" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入操作人员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="noticeType">
        <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
          <el-option
            v-for="dict in sys_notice_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click=""
          v-hasPermi="['system:noticeSend:list']"
        >全部标注已读</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="noticeId" width="100" />
      <el-table-column
        label="消息标题"
        align="center"
        prop="noticeTitle"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="消息类型" align="center" prop="noticeType" width="100">
        <template #default="scope">
          <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
        </template>
      </el-table-column>
      <el-table-column label="发布人" align="center" prop="sender" width="100" />
      <el-table-column label="发布时间" align="center" prop="sendTime" width="100" />
      <el-table-column label="优先级" align="center" prop="priority" width="100">
        <template #default="scope">
          <dict-tag :options="sys_priority" :value="scope.row.priority"/>
        </template>
      </el-table-column>
      <el-table-column label="阅读状态" align="center" prop="readFlag" width="100">
        <template #default="scope">
          <dict-tag :options="sys_readflag" :value="scope.row.readFlag"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleSee(scope.row)"
            v-hasPermi="['system:noticeSend:list']"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
     <show-notice ref="showNoticeRef" @ok="modalFormOk"></show-notice>
     <dynamic-notice ref="showDynamNoticeRef" :path="openPath" :formData="formData"></dynamic-notice>
  </div>
</template>
<script setup lang="ts" name ="MyNotice">
  import ShowNotice from '@/layout/components/HeaderNotice/ShowNotice.vue'
  import DynamicNotice from '@/layout/components/HeaderNotice/DynamicNotice.vue'
  import { getMyNoticeSend, updateUserIdAndNotice } from "@/api/system/notice";
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const { sys_priority, sys_notice_type, sys_readflag } = toRefs<any>(proxy?.useDict("sys_priority", "sys_notice_type", "sys_readflag"));
  const hovered = ref(false)
  // 遮罩层
  const loading = ref(true)
  // 选中数组
  const ids = ref<any>([])
  // 非单个禁用
  const single = ref(true)
  // 非多个禁用
  const multiple = ref(true)
  // 显示搜索条件
  const showSearch = ref(true)
  // 总条数
  const total = ref(0)
  // 公告表格数据
  const noticeList = ref<any>([])
  // 查询参数
  const queryParams = ref({
    noticeSendModel: {},
    pageNum: 1,
    pageSize: 10
  })
  const formData = ref<any>({})
  const openPath = ref('')
  const showDynamNoticeRef = ref(DynamicNotice)
  const showNoticeRef = ref(ShowNotice)
  const queryFormRef = ref(null)
  /** 查询公告列表 */
  const getList = () => {
    loading.value = true;
    console.log("queryParams",queryParams.value);
    getMyNoticeSend(queryParams.value).then(res => {
      console.log("getMyNoticeSend res", res);
      noticeList.value = res.data.records;
      total.value = res.data.total;
      loading.value = false;
    });
  }
  const handleSee = (record:any) => {
    console.log("handleSee record",record);
    if(record.readFlag == '0')
    {
      updateUserIdAndNotice({
        noticeId: record.noticeId
      }).then((res) => {
        if (res.code == 200) {
          getList();
        }
      });
    }
    hovered.value = false;
    if (record.openType === 'component') {
      openPath.value = record.openPage;
      formData.value = {
        id: record.busId
      };
      showDynamNoticeRef.value.detail(record.openPage);
    } else {
      showNoticeRef.value.detail(record);
    }
  }
  const modalFormOk = () => {}
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  }
  /** 重置按钮操作 */
  const resetQuery= () => {
    queryFormRef.value?.resetFields();
    handleQuery();
  }
  // 多选框选中数据
  const handleSelectionChange = (selection: any) => {
    ids.value = selection.map(item => item.noticeId)
    single.value = selection.length!=1
    multiple.value = !selection.length
  }
  onMounted(() => {
    getList();
  })
</script>