|
|
|
|
@ -16,7 +16,7 @@
|
|
|
|
|
class="!w-240px"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="dict in getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
|
|
|
|
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
|
|
|
|
:key="dict.value"
|
|
|
|
|
:label="dict.label"
|
|
|
|
|
:value="dict.value"
|
|
|
|
|
@ -37,40 +37,26 @@
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
|
|
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
|
|
|
<el-button @click="handleUpdateList"
|
|
|
|
|
><Icon icon="ep:reading" class="mr-5px" /> 标记已读</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button @click="handleUpdateAll"
|
|
|
|
|
><Icon icon="ep:reading" class="mr-5px" /> 全部已读</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button @click="handleUpdateList">
|
|
|
|
|
<Icon icon="ep:reading" class="mr-5px" /> 标记已读
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button @click="handleUpdateAll">
|
|
|
|
|
<Icon icon="ep:reading" class="mr-5px" /> 全部已读
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- <el-row :gutter="10" class="mb8">
|
|
|
|
|
<el-col :span="1.5">
|
|
|
|
|
<el-button @click="handleUpdateList"
|
|
|
|
|
><Icon icon="ep:refresh" class="mr-5px" /> 标记已读</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="1.5">
|
|
|
|
|
<el-button @click="handleUpdateAll"
|
|
|
|
|
><Icon icon="ep:refresh" class="mr-5px" /> 全部已读</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row> -->
|
|
|
|
|
</content-wrap>
|
|
|
|
|
|
|
|
|
|
<content-wrap>
|
|
|
|
|
<!-- 列表 -->
|
|
|
|
|
<el-table
|
|
|
|
|
ref="tableRef"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
:data="list"
|
|
|
|
|
:height="tableHeight"
|
|
|
|
|
:row-key="getRowKeys"
|
|
|
|
|
ref="tableRef"
|
|
|
|
|
row-key="id"
|
|
|
|
|
@selection-change="handleSelectionChange"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
|
|
|
|
|
<!-- <el-table-column label="编号" align="center" prop="id" /> -->
|
|
|
|
|
<el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="发送时间"
|
|
|
|
|
@ -107,9 +93,9 @@
|
|
|
|
|
<el-button
|
|
|
|
|
link
|
|
|
|
|
:type="scope.row.readStatus ? 'primary' : 'warning'"
|
|
|
|
|
@click="openModal(scope.row)"
|
|
|
|
|
@click="openDetail(scope.row)"
|
|
|
|
|
>
|
|
|
|
|
{{ scope.row.readStatus ? '详情' : '查阅' }}
|
|
|
|
|
{{ scope.row.readStatus ? '详情' : '已读' }}
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
@ -124,15 +110,14 @@
|
|
|
|
|
</content-wrap>
|
|
|
|
|
|
|
|
|
|
<!-- 表单弹窗：详情 -->
|
|
|
|
|
<my-notify-message-detail ref="modalRef" />
|
|
|
|
|
<MyNotifyMessageDetail ref="detailRef" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts" name="MyNotifyMessage">
|
|
|
|
|
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
|
|
|
|
|
import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
|
|
|
|
|
import { dateFormatter } from '@/utils/formatTime'
|
|
|
|
|
import * as NotifyMessageApi from '@/api/system/notify/message'
|
|
|
|
|
import MyNotifyMessageDetail from './detail.vue'
|
|
|
|
|
|
|
|
|
|
import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
|
|
|
|
|
const message = useMessage() // 消息
|
|
|
|
|
|
|
|
|
|
const loading = ref(true) // 列表的加载中
|
|
|
|
|
@ -145,13 +130,10 @@ const queryParams = reactive({
|
|
|
|
|
createTime: []
|
|
|
|
|
})
|
|
|
|
|
const queryFormRef = ref() // 搜索的表单
|
|
|
|
|
const tableRef = ref()
|
|
|
|
|
const tableHeight = ref() // table高度
|
|
|
|
|
const selectedNum = ref(0) //表格select选中的条数
|
|
|
|
|
const selectedIds = ref([] as any[]) //表格select复选框选中的id
|
|
|
|
|
const multipleSelection = ref([])
|
|
|
|
|
const tableRef = ref() // 表格的 Ref
|
|
|
|
|
const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
|
|
|
|
|
|
|
|
|
|
/** 查询参数列表 */
|
|
|
|
|
/** 查询列表 */
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
loading.value = true
|
|
|
|
|
try {
|
|
|
|
|
@ -163,30 +145,43 @@ const getList = async () => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
queryParams.pageNo = 1
|
|
|
|
|
getList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
const resetQuery = () => {
|
|
|
|
|
queryFormRef.value.resetFields()
|
|
|
|
|
tableRef.value.clearSelection()
|
|
|
|
|
handleQuery()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 详情操作 */
|
|
|
|
|
const modalRef = ref()
|
|
|
|
|
const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
|
|
|
const detailRef = ref()
|
|
|
|
|
const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
|
|
|
|
|
if (!data.readStatus) {
|
|
|
|
|
handleUpdate(data.id)
|
|
|
|
|
handleReadOne(data.id)
|
|
|
|
|
}
|
|
|
|
|
modalRef.value.openModal(data)
|
|
|
|
|
detailRef.value.open(data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 标记指定 id 已读
|
|
|
|
|
const handleUpdate = async (ids) => {
|
|
|
|
|
await NotifyMessageApi.updateNotifyMessageRead(ids)
|
|
|
|
|
//message.success('标记已读成功！')
|
|
|
|
|
handleQuery()
|
|
|
|
|
/** 标记一条站内信已读 */
|
|
|
|
|
const handleReadOne = async (id) => {
|
|
|
|
|
await NotifyMessageApi.updateNotifyMessageRead(id)
|
|
|
|
|
await getList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 标记全部已读
|
|
|
|
|
/** 标记全部站内信已读 **/
|
|
|
|
|
const handleUpdateAll = async () => {
|
|
|
|
|
await NotifyMessageApi.updateAllNotifyMessageRead()
|
|
|
|
|
message.success('全部已读成功！')
|
|
|
|
|
handleQuery()
|
|
|
|
|
tableRef.value.clearSelection()
|
|
|
|
|
await getList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 标记勾选 ids 已读
|
|
|
|
|
/** 标记一些站内信已读 **/
|
|
|
|
|
const handleUpdateList = async () => {
|
|
|
|
|
if (selectedIds.value.length === 0) {
|
|
|
|
|
return
|
|
|
|
|
@ -194,57 +189,25 @@ const handleUpdateList = async () => {
|
|
|
|
|
await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
|
|
|
|
|
message.success('批量已读成功！')
|
|
|
|
|
tableRef.value.clearSelection()
|
|
|
|
|
handleQuery()
|
|
|
|
|
await getList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
queryParams.pageNo = 1
|
|
|
|
|
getList()
|
|
|
|
|
/** 某一行，是否允许选中 */
|
|
|
|
|
const selectable = (row) => {
|
|
|
|
|
return !row.readStatus
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
|
const resetQuery = () => {
|
|
|
|
|
queryFormRef.value.resetFields()
|
|
|
|
|
tableRef.value.clearSelection()
|
|
|
|
|
handleQuery()
|
|
|
|
|
/** 当表格选择项发生变化时会触发该事件 */
|
|
|
|
|
const handleSelectionChange = (array: NotifyMessageApi.NotifyMessageVO[]) => {
|
|
|
|
|
selectedIds.value = []
|
|
|
|
|
if (!array) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
array.forEach((row) => selectedIds.value.push(row.id))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 初始化 **/
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getList()
|
|
|
|
|
// TODO 感觉表格自适应高度体验好些，目前简单实现 需要进一步优化
|
|
|
|
|
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
|
|
|
|
|
// 监听浏览器高度变化
|
|
|
|
|
window.onresize = () => {
|
|
|
|
|
tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 85 - 155
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 禁用某行复选框
|
|
|
|
|
const selectable = (row) => {
|
|
|
|
|
return !row.readStatus
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//选中的list
|
|
|
|
|
const getRowKeys = (row) => {
|
|
|
|
|
return row.id
|
|
|
|
|
}
|
|
|
|
|
//当表格选择项发生变化时会触发该事件
|
|
|
|
|
const handleSelectionChange = (val) => {
|
|
|
|
|
// 解决来回切换页面，也无法清除上次选中情况
|
|
|
|
|
multipleSelection.value = val
|
|
|
|
|
selectedNum.value = multipleSelection.value.length
|
|
|
|
|
selectedIds.value = []
|
|
|
|
|
if (val) {
|
|
|
|
|
undefined
|
|
|
|
|
val.forEach((row) => {
|
|
|
|
|
undefined
|
|
|
|
|
if (row) {
|
|
|
|
|
undefined
|
|
|
|
|
selectedIds.value.push(row.id)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
YunaiV
3 years ago