hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-07-18 12:55:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Vue3 重构：REVIEW 站内信

Browse Source
This commit is contained in:
YunaiV
2023-03-28 23:18:10 +08:00
parent 969c83a8dc
commit a4dea6c254
25 changed files with 107 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/views/system/notify/my/index.vue
View File

@ -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,40 +145,6 @@ const getList = async () => {
}
}
/** 详情操作 */
const modalRef = ref()
const openModal = (data: NotifyMessageApi.NotifyMessageVO) => {
if (!data.readStatus) {
handleUpdate(data.id)
}
modalRef.value.openModal(data)
}
// 标记指定 id 已读
const handleUpdate = async (ids) => {
await NotifyMessageApi.updateNotifyMessageRead(ids)
//message.success('标记已读成功！')
handleQuery()
}
// 标记全部已读
const handleUpdateAll = async () => {
await NotifyMessageApi.updateAllNotifyMessageRead()
message.success('全部已读成功！')
handleQuery()
}
// 标记勾选 ids 已读
const handleUpdateList = async () => {
if (selectedIds.value.length === 0) {
return
}
await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
message.success('批量已读成功！')
tableRef.value.clearSelection()
handleQuery()
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
@ -210,41 +158,56 @@ const resetQuery = () => {
handleQuery()
}
/** 初始化 **/
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 detailRef = ref()
const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
if (!data.readStatus) {
handleReadOne(data.id)
}
})
detailRef.value.open(data)
}
// 禁用某行复选框
/** 标记一条站内信已读 */
const handleReadOne = async (id) => {
await NotifyMessageApi.updateNotifyMessageRead(id)
await getList()
}
/** 标记全部站内信已读 **/
const handleUpdateAll = async () => {
await NotifyMessageApi.updateAllNotifyMessageRead()
message.success('全部已读成功！')
tableRef.value.clearSelection()
await getList()
}
/** 标记一些站内信已读 **/
const handleUpdateList = async () => {
if (selectedIds.value.length === 0) {
return
}
await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
message.success('批量已读成功！')
tableRef.value.clearSelection()
await getList()
}
/** 某一行，是否允许选中 */
const selectable = (row) => {
return !row.readStatus
}
//选中的list
const getRowKeys = (row) => {
return row.id
}
//当表格选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
// 解决来回切换页面，也无法清除上次选中情况
multipleSelection.value = val
selectedNum.value = multipleSelection.value.length
/** 当表格选择项发生变化时会触发该事件 */
const handleSelectionChange = (array: NotifyMessageApi.NotifyMessageVO[]) => {
selectedIds.value = []
if (val) {
undefined
val.forEach((row) => {
undefined
if (row) {
undefined
selectedIds.value.push(row.id)
}
})
if (!array) {
return
}
array.forEach((row) => selectedIds.value.push(row.id))
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>