优化代码逻辑

src/api/system/message.ts

@@ -4,7 +4,7 @@ import { AxiosPromise } from 'axios'
 /**
  * 获取路由列表
  */
-export function getMessage() {
+function getMessage() {
 	return request({
 		url: '/sys/message/inform',
 		method: 'get'
@@ -12,7 +12,7 @@ export function getMessage() {
 	})
 }
 
-export function getMessageInfo(data: any): AxiosPromise {
+function getMessageInfo(data: any): AxiosPromise {
 	return request({
 		url: '/sys/message/page',
 		method: 'post',
@@ -20,9 +20,26 @@ export function getMessageInfo(data: any): AxiosPromise {
 	})
 }
 
-export function getMessageInfoById(id: any): AxiosPromise {
+function getMessageInfoById(id: any): AxiosPromise {
 	return request({
 		url: '/sys/message/get?id=' + id,
 		method: 'get'
 	})
 }
+
+/**
+ * 扩展配置 - 删除
+ */
+function messageDeleteApi(data: any): AxiosPromise {
+	return request({
+		url: '/sys/message/delete',
+		method: 'post',
+		data
+	})
+}
+export default {
+	getMessage,
+	getMessageInfo,
+	getMessageInfoById,
+	messageDeleteApi
+}

src/layout/components/Header/components/Message.vue

@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { getMessage } from '@/api/system/message'
+import message from '@/api/system/message'
 import router from '@/router'
 // noticeList  通知     messageList   消息     todoList   待办
 const tabsConfig = reactive({
@@ -61,8 +61,7 @@ const tabsConfig = reactive({
 })
 const activeTab = ref('noticeList')
 const total = ref(0)
-getMessage().then(res => {
-	console.error(res, 'res///')
+message.getMessage().then(res => {
 	let _total = 0
 	Object.keys(tabsConfig).map(key => {
 		if (res[key]) {

src/store/modules/permission.ts

@@ -175,7 +175,6 @@ const usePermissionStore = defineStore({
 		},
 		queryMenuList(roles: string[]) {
 			return getMenuList().then((data: any) => {
-				console.error(data, 'menuList')
 				const menuList = filterAsyncRoutes(
 					data!.menu, // .filter((v: any) => /\/.*/.test(v.path)),
 					roles

src/views/approve/approved/detail.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { getMessageInfoById } from '@/api/system/message'
+import message from '@/api/system/message'
 
 // 同步值
 const $myEmit = defineEmits(['update:modelValue'])
@@ -46,7 +46,7 @@ const handleCancel = () => {
 
 const getMessageInfoDetail = async () => {
 	const { messageId } = myProps
-	const res = await getMessageInfoById(messageId)
+	const res = await message.getMessageInfoById(messageId)
 	formOptions.value = res
 }
 

src/views/approve/approved/index.vue

@@ -27,7 +27,11 @@
 				</template>
 
 				<template #actionSlot="scope">
-					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
 				</template>
 			</LeTable>
 		</div>

src/views/approve/myApplication/detail.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { getMessageInfoById } from '@/api/system/message'
+import message from '@/api/system/message'
 
 // 同步值
 const $myEmit = defineEmits(['update:modelValue'])
@@ -46,7 +46,7 @@ const handleCancel = () => {
 
 const getMessageInfoDetail = async () => {
 	const { messageId } = myProps
-	const res = await getMessageInfoById(messageId)
+	const res = await message.getMessageInfoById(messageId)
 	formOptions.value = res
 }
 

src/views/approve/myApplication/index.vue

@@ -27,7 +27,11 @@
 				</template>
 
 				<template #actionSlot="scope">
-					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
 				</template>
 			</LeTable>
 		</div>

src/views/approve/myReceived/detail.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { getMessageInfoById } from '@/api/system/message'
+import message from '@/api/system/message'
 
 // 同步值
 const $myEmit = defineEmits(['update:modelValue'])
@@ -46,7 +46,7 @@ const handleCancel = () => {
 
 const getMessageInfoDetail = async () => {
 	const { messageId } = myProps
-	const res = await getMessageInfoById(messageId)
+	const res = await message.getMessageInfoById(messageId)
 	formOptions.value = res
 }
 

src/views/approve/myReceived/index.vue

@@ -27,7 +27,11 @@
 				</template>
 
 				<template #actionSlot="scope">
-					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
 				</template>
 			</LeTable>
 		</div>

src/views/approve/pendingApproval/detail.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { getMessageInfoById } from '@/api/system/message'
+import message from '@/api/system/message'
 
 // 同步值
 const $myEmit = defineEmits(['update:modelValue'])
@@ -46,7 +46,7 @@ const handleCancel = () => {
 
 const getMessageInfoDetail = async () => {
 	const { messageId } = myProps
-	const res = await getMessageInfoById(messageId)
+	const res = await message.getMessageInfoById(messageId)
 	formOptions.value = res
 }
 

src/views/approve/pendingApproval/index.vue

@@ -27,7 +27,11 @@
 				</template>
 
 				<template #actionSlot="scope">
-					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
 				</template>
 			</LeTable>
 		</div>

src/views/approve/pendingClaim/index.vue

@@ -27,7 +27,11 @@
 				</template>
 
 				<template #actionSlot="scope">
-					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
 				</template>
 			</LeTable>
 		</div>

src/views/message/list/detail.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { getMessageInfoById } from '@/api/system/message'
+import message from '@/api/system/message'
 
 // 同步值
 const $myEmit = defineEmits(['update:modelValue'])
@@ -46,7 +46,7 @@ const handleCancel = () => {
 
 const getMessageInfoDetail = async () => {
 	const { messageId } = myProps
-	const res = await getMessageInfoById(messageId)
+	const res = await message.getMessageInfoById(messageId)
 	formOptions.value = res
 }
 

src/views/message/list/index.vue

@@ -15,6 +15,11 @@
 			>
 				<template #toolLeft>
 					<el-button type="primary">全部标记已读</el-button>
+					<el-button type="danger" :disabled="curSelectionRows.length === 0" @click="batch_del">
+						<el-icon class="btn-icon">
+							<Delete />
+						</el-icon>
+					</el-button>
 				</template>
 
 				<template #categorySlot="scope">
@@ -24,7 +29,19 @@
 				</template>
 
 				<template #actionSlot="scope">
-					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
+					<el-divider direction="vertical"></el-divider>
+					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
+						<template #reference>
+							<el-icon class="ibt0">
+								<Delete />
+							</el-icon>
+						</template>
+					</el-popconfirm>
 				</template>
 			</LeTable>
 		</div>
@@ -33,13 +50,15 @@
 	</div>
 </template>
 <script lang="tsx" setup>
-import { getMessageInfo } from '@/api/system/message'
+import message from '@/api/system/message'
 import { nextTick, ref, watch } from 'vue'
 import { useTablePage } from '@/hooks/useTablePage'
 import MessageDetail from './detail.vue'
 import { useRoute } from 'vue-router'
-const route = useRoute()
+import {Delete} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
 
+const route = useRoute()
 const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
 const currentId = ref(null)
 
@@ -64,7 +83,7 @@ const queryList = async () => {
 	const { options, searchParams } = tableOpts
 	options.loading = true
 	try {
-		const { records: list, total } = await getMessageInfo(searchParams)
+		const { records: list, total } = await message.getMessageInfo(searchParams)
 		tableOpts.total = total
 		tableOpts.list = list
 	} catch {
@@ -100,7 +119,7 @@ const columns = [
 	{
 		prop: 'createTime',
 		label: '发布时间',
-		minWidth: 126
+		minWidth: 150
 	},
 	{
 		prop: 'action',
@@ -113,7 +132,7 @@ const columns = [
 	}
 ]
 
-const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
+const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
 	{
 		options: {
 			showIndex: false
@@ -131,6 +150,28 @@ const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
 	}
 )
 
+// 删除
+const deleteItem = async ids => {
+	try {
+		await message.messageDeleteApi(ids)
+		updateParams()
+	} catch (e) {
+		console.log('删除失败')
+		ElMessage.error(`删除失败~`)
+	}
+}
+
+// 单个删除
+const table_del = row => {
+	deleteItem([row.id])
+}
+
+//批量删除
+const batch_del = () => {
+	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
+	deleteItem(ids)
+}
+
 const openDetail = (row: any) => {
 	currentId.value = row.id
 	visibleDetail.value = true
@@ -162,13 +203,10 @@ watch(
 	background-color: var(--el-fill-color-lighter);
 	//background: #fff;
 }
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
+.content-warp {
+	flex: 1;
+	width: calc(100% - 210px);
+}
 
 // 应用的树结构样式
 :deep(.menu-tree) {

src/views/message/list/my.vue

@@ -15,6 +15,11 @@
 			>
 				<template #toolLeft>
 					<el-button type="primary">全部标记已读</el-button>
+					<el-button type="danger" :disabled="curSelectionRows.length === 0" @click="batch_del">
+						<el-icon class="btn-icon">
+							<Delete />
+						</el-icon>
+					</el-button>
 				</template>
 
 				<template #categorySlot="scope">
@@ -24,7 +29,19 @@
 				</template>
 
 				<template #actionSlot="scope">
-					<el-link type="primary" @click="openDetail(scope.row)">查看</el-link>
+					<el-tooltip content="查看" placement="bottom" effect="light">
+						<el-icon class="ibt0" @click="openDetail(scope.row)">
+							<View />
+						</el-icon>
+					</el-tooltip>
+					<el-divider direction="vertical"></el-divider>
+					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
+						<template #reference>
+							<el-icon class="ibt0">
+								<Delete />
+							</el-icon>
+						</template>
+					</el-popconfirm>
 				</template>
 			</LeTable>
 		</div>
@@ -33,13 +50,15 @@
 	</div>
 </template>
 <script lang="tsx" setup>
-import { getMessageInfo } from '@/api/system/message'
-import { nextTick, ref, watch } from 'vue'
-import { useTablePage } from '@/hooks/useTablePage'
+import message from '@/api/system/message'
+import {nextTick, ref, watch} from 'vue'
+import {useTablePage} from '@/hooks/useTablePage'
 import MessageDetail from './detail.vue'
-import { useRoute } from 'vue-router'
-const route = useRoute()
+import {useRoute} from 'vue-router'
+import {Delete} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
 
+const route = useRoute()
 const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
 const currentId = ref(null)
 
@@ -61,10 +80,10 @@ const forms = ref([
 
 // table列表数据请求
 const queryList = async () => {
-	const { options, searchParams } = tableOpts
+	const {options, searchParams} = tableOpts
 	options.loading = true
 	try {
-		const { records: list, total } = await getMessageInfo(searchParams)
+		const {records: list, total} = await message.getMessageInfo(searchParams)
 		tableOpts.total = total
 		tableOpts.list = list
 	} catch {
@@ -100,7 +119,7 @@ const columns = [
 	{
 		prop: 'createTime',
 		label: '发布时间',
-		minWidth: 126
+		minWidth: 150
 	},
 	{
 		prop: 'action',
@@ -113,7 +132,7 @@ const columns = [
 	}
 ]
 
-const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
+const {searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams} = useTablePage(
 	{
 		options: {
 			showIndex: false
@@ -131,6 +150,28 @@ const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
 	}
 )
 
+// 删除
+const deleteItem = async ids => {
+	try {
+		await message.messageDeleteApi(ids)
+		updateParams()
+	} catch (e) {
+		console.log('删除失败')
+		ElMessage.error(`删除失败~`)
+	}
+}
+
+// 单个删除
+const table_del = row => {
+	deleteItem([row.id])
+}
+
+//批量删除
+const batch_del = () => {
+	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
+	deleteItem(ids)
+}
+
 const openDetail = (row: any) => {
 	currentId.value = row.id
 	visibleDetail.value = true
@@ -149,7 +190,7 @@ watch(
 			})
 		}
 	},
-	{ immediate: true }
+	{immediate: true}
 )
 </script>
 <style scoped lang="scss">
@@ -162,19 +203,18 @@ watch(
 	background-color: var(--el-fill-color-lighter);
 	//background: #fff;
 }
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
+
+.content-warp {
+	flex: 1;
+	width: calc(100% - 210px);
+}
 
 // 应用的树结构样式
 :deep(.menu-tree) {
 	.el-tree-node__content {
 		height: 36px;
 	}
+
 	.el-tree-node__content .el-tree-node__label .icon {
 		margin-right: 5px;
 	}

src/views/setting/configure/index.vue

@@ -294,7 +294,6 @@ watch(groupFilterText, val => {
 }
 .content-warp {
 	flex: 1;
-	//width: calc(100% - 250px);
 	width: calc(100% - 210px);
 }
 // 单独自己写的