This commit is contained in:
parent
15e259b28f
commit
0da3738089
|
|
@ -235,4 +235,33 @@ export default {
|
|||
return await http.get("translations", data);
|
||||
}
|
||||
},
|
||||
message: {
|
||||
list: async function (data = {}) {
|
||||
return await http.get("message/list", data);
|
||||
},
|
||||
add: async function (data = {}) {
|
||||
return await http.post("message/add", data);
|
||||
},
|
||||
edit: async function (data = {}) {
|
||||
return await http.put("message/edit", data);
|
||||
},
|
||||
del: async function (data = {}) {
|
||||
return await http.delete("message/del", data);
|
||||
},
|
||||
recalled: async function (data = {}) {
|
||||
return await http.put("message/recalled", data);
|
||||
},
|
||||
mine: async function (data = {}) {
|
||||
return await http.get("message/mine", data);
|
||||
},
|
||||
read: async function (data = {}) {
|
||||
return await http.post("message/read", data);
|
||||
},
|
||||
detail: async function (data = {}) {
|
||||
return await http.get("message/detail", data);
|
||||
},
|
||||
remove: async function (data = {}) {
|
||||
return await http.delete("message/remove", data);
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -66,10 +66,10 @@ let html = ref("")
|
|||
|
||||
watch(() => props.modelValue, () => {
|
||||
html.value = props.modelValue
|
||||
}, {deep: true})
|
||||
|
||||
onMounted(() => {
|
||||
}, {immediate: true})
|
||||
|
||||
watch(html, () => {
|
||||
emit("update:modelValue", html.value)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<el-tabs v-model="msgTab" class="msg-tabs" stretch @tabChange="switchTab">
|
||||
<el-tab-pane label="业务" name="business"></el-tab-pane>
|
||||
<el-tab-pane label="审批" name="approval"></el-tab-pane>
|
||||
<el-tab-pane label="系统" name="system"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="msg-content">
|
||||
<div v-if="msgList.length===0" class="msg-empty">
|
||||
<el-icon class="icon">
|
||||
<pi-icon-no-message/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-scrollbar ref="scrollbar" height="230px" :view-style="{ 'overflow-x': 'hidden' }"
|
||||
@endReached="handleScroll">
|
||||
<el-link v-for="item in msgList" :key="item" underline="never"
|
||||
:title="item.create_time + ' ' + item.title"
|
||||
style="display: block; width: 100%;" @click="detail(item)">
|
||||
<template #default>
|
||||
<el-text truncated style="width: 100%;" :class="{isRead: item.read_flag}">
|
||||
<el-text type="primary" v-time.tip="item.create_time" style="margin-right: 5px;"
|
||||
:class="{isRead: item.read_flag}"></el-text>
|
||||
{{ item.title }}
|
||||
</el-text>
|
||||
</template>
|
||||
</el-link>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider/>
|
||||
<div class="msg-more">
|
||||
<el-button link type="primary" icon="el-icon-select" @click="read" :loading="loading">全部已读</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getCurrentInstance, onMounted, ref} from "vue";
|
||||
import api from "@/api"
|
||||
import {useRouter} from "vue-router"
|
||||
|
||||
const {proxy} = getCurrentInstance()
|
||||
const scrollbar = ref(null)
|
||||
const router = useRouter()
|
||||
|
||||
let msgTab = ref("business")
|
||||
let msgList = ref([])
|
||||
let page = ref(1)
|
||||
const limit = ref(10)
|
||||
const loading = ref(false)
|
||||
const finish = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
let res = await api.system.message.mine({type: msgTab.value, page: page.value})
|
||||
loading.value = false
|
||||
msgList.value = msgList.value.concat(res.data)
|
||||
if (res.data.length > limit.value) {
|
||||
finish.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function switchTab() {
|
||||
page.value = 1
|
||||
msgList.value = []
|
||||
finish.value = false
|
||||
await loadData()
|
||||
}
|
||||
|
||||
async function read() {
|
||||
let res = await api.system.message.read({type: msgTab.value})
|
||||
proxy.$message.success(res.msg)
|
||||
msgList.value.forEach((item) => {
|
||||
if (!item.read_flag) {
|
||||
item.read_flag = 1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function handleScroll(event) {
|
||||
if (loading.value || finish.value || event !== "bottom") return
|
||||
page.value++
|
||||
await loadData()
|
||||
}
|
||||
|
||||
function detail(item) {
|
||||
if (msgTab.value === "system") {
|
||||
router.push({
|
||||
path: "/dashboard/message/detail",
|
||||
query: {
|
||||
id: item.mess_id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.msg-content {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.msg-content .msg-empty {
|
||||
display: flex;
|
||||
height: 230px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msg-content .msg-empty .icon {
|
||||
font-size: 128px;
|
||||
}
|
||||
|
||||
.msg-content .el-link {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
:deep(.el-link__inner) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.msg-more {
|
||||
text-align: center;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.isRead {
|
||||
color: var(--el-color-info-light-3);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,18 +14,11 @@
|
|||
</el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="tasks panel-item" @click="tasksVisible=true">
|
||||
<el-badge :hidden="taskNum==0" :value="taskNum" class="badge" type="danger">
|
||||
<el-icon>
|
||||
<pi-icon-task/>
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="msg panel-item" @click="msgVisible=!msgVisible">
|
||||
<el-popover v-model:visible="msgVisible" :width="280" trigger="click">
|
||||
<div class="msg panel-item" @click="msgVisible=!msgVisible;newMsg=false;">
|
||||
<el-popover v-model:visible="msgVisible" :width="300" trigger="click">
|
||||
<template #reference>
|
||||
<div class="msg-panel">
|
||||
<el-badge :hidden="msgNum==0" :value="msgNum" class="badge" type="danger">
|
||||
<el-badge :is-dot="newMsg" class="badge" type="danger">
|
||||
<el-icon>
|
||||
<el-icon-bell/>
|
||||
</el-icon>
|
||||
|
|
@ -33,34 +26,17 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-tabs v-model="msgTab" class="msg-tabs" stretch>
|
||||
<el-tab-pane label="通知" name="notice"></el-tab-pane>
|
||||
<el-tab-pane label="消息" name="message"></el-tab-pane>
|
||||
<el-tab-pane label="待办" name="todo"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="msg-content">
|
||||
<div v-if="msgList.length===0" class="msg-empty">
|
||||
<el-icon class="icon">
|
||||
<pi-icon-no-message/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-scrollbar height="220px" :view-style="{ 'overflow-x': 'hidden' }">
|
||||
<el-link v-for="item in msgList" :key="item" href="/#/message" underline="never" :title="item.time + ' ' + item.title" style="display: block; width: 100%;">
|
||||
<template #default>
|
||||
<el-text truncated style="width: 100%;"><el-text type="primary" v-time.tip="item.time" style="margin-right: 5px;"></el-text>{{ item.title }}</el-text>
|
||||
</template>
|
||||
</el-link>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider/>
|
||||
<div class="msg-more">
|
||||
<el-button link type="primary" icon="el-icon-arrow-down">查看更多</el-button>
|
||||
</div>
|
||||
<msg v-if="msgVisible"/>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="attach panel-item" @click="attachVisible=true;newTask=false;">
|
||||
<el-badge :is-dot="newTask" class="badge" type="danger">
|
||||
<el-icon>
|
||||
<pi-icon-task/>
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
|
||||
<div class="user-avatar">
|
||||
<el-avatar :size="30" :src="avatar">{{ nicknameF }}</el-avatar>
|
||||
|
|
@ -90,8 +66,8 @@
|
|||
<el-dialog v-model="searchVisible" :width="700" title="菜单搜索" class="drawerBG" center destroy-on-close>
|
||||
<search @success="searchVisible=false"></search>
|
||||
</el-dialog>
|
||||
<el-drawer v-model="tasksVisible" :size="450" title="附件中心" destroy-on-close>
|
||||
<tasks></tasks>
|
||||
<el-drawer v-model="attachVisible" :size="450" title="附件中心" destroy-on-close>
|
||||
<attach/>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
|
|
@ -100,9 +76,10 @@ defineOptions({
|
|||
name: "userBar"
|
||||
})
|
||||
import {ref, onMounted, getCurrentInstance} from "vue"
|
||||
import search from './search.vue'
|
||||
import setting from './setting.vue'
|
||||
import tasks from './tasks.vue'
|
||||
import search from './search'
|
||||
import setting from './setting'
|
||||
import attach from './attach'
|
||||
import msg from './msg'
|
||||
import websocket from "@/utils/websocket"
|
||||
import {ElNotification} from 'element-plus'
|
||||
import tools from "@/utils/tools"
|
||||
|
|
@ -116,14 +93,11 @@ const {t} = useI18n()
|
|||
|
||||
const msgVisible = ref(false);
|
||||
let searchVisible = ref(false)
|
||||
let msg = ref(false)
|
||||
let msgNum = ref(2)
|
||||
let msgList = ref([])
|
||||
const tasksVisible = ref(false)
|
||||
let taskNum = ref(0)
|
||||
let newMsg = ref(false)
|
||||
const attachVisible = ref(false)
|
||||
let newTask = ref(false)
|
||||
const settingDialog = ref(false)
|
||||
const userInfo = tools.data.get("USER_INFO");
|
||||
let msgTab = ref("notice")
|
||||
|
||||
let nickname = userInfo.nickname || userInfo.username;
|
||||
let nicknameF = nickname.substring(0, 1);
|
||||
|
|
@ -132,7 +106,6 @@ let avatar = userInfo.avatar
|
|||
// mounted
|
||||
onMounted(() => {
|
||||
initWebSocket()
|
||||
loadData()
|
||||
})
|
||||
|
||||
function initWebSocket() {
|
||||
|
|
@ -142,16 +115,16 @@ function initWebSocket() {
|
|||
}
|
||||
|
||||
function messageHandle(message) {
|
||||
if (message.data == "connection successful" || message.data == "pong") {
|
||||
if (message.data === "connection successful" || message.data === "pong") {
|
||||
return;
|
||||
}
|
||||
const data = JSON.parse(message.data)
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
if (data.code == 200) {
|
||||
if (data.code === 200) {
|
||||
ElNotification.success({
|
||||
title: 'Success',
|
||||
title: '新信息通知',
|
||||
message: data['msg']
|
||||
})
|
||||
} else {
|
||||
|
|
@ -160,12 +133,11 @@ function messageHandle(message) {
|
|||
message: data['msg']
|
||||
})
|
||||
}
|
||||
if (data.type == "message") {
|
||||
msgNum.value++
|
||||
} else if (data.type == "task") {
|
||||
taskNum.value++
|
||||
if (data.type === "system" || data.type === "business" || data.type === "approval") {
|
||||
newMsg.value = true
|
||||
} else if (data.type === "attach") {
|
||||
newTask.value = true
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
function closeHandle() {
|
||||
|
|
@ -218,48 +190,6 @@ function handleUser(command) {
|
|||
function screen() {
|
||||
tools.screen(document.documentElement)
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
// let res = await this.$API.home.message.newCount()
|
||||
// this.msgNum = res.data.count
|
||||
msgNum.value = 5
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。您有一笔新的订单请及时处理',
|
||||
time: '2025-06-17 17:59:21'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。您有一笔新的订单请及时处理',
|
||||
time: '2025-06-16 10:29:30'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。',
|
||||
time: '2025-06-15 12:29:30'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。',
|
||||
time: '2025-05-15 12:29:30'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。',
|
||||
time: '2025-01-16 12:29:30'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。',
|
||||
time: '2024-06-15 12:29:30'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。',
|
||||
time: '2024-06-15 12:29:30'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。',
|
||||
time: '2015-06-15 12:29:30'
|
||||
})
|
||||
msgList.value.push({
|
||||
title: '您有一笔新的订单请及时处理。',
|
||||
time: '2025-06-15 12:29:30'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -311,76 +241,10 @@ async function loadData() {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.msg-list li {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.msg-list li a {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.msg-list li a:hover {
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
.msg-list__main h2 {
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.msg-list__main p {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 1.8;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.dark .msg-list__main h2 {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.dark .msg-list li {
|
||||
border-top: 1px solid #363636;
|
||||
}
|
||||
|
||||
.dark .msg-list li a:hover {
|
||||
background: #383838;
|
||||
}
|
||||
|
||||
.msg-panel {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.msg-content .msg-empty {
|
||||
display: flex;
|
||||
height: 220px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msg-content .msg-empty .icon {
|
||||
font-size: 128px;
|
||||
}
|
||||
|
||||
.msg-content .el-link {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
:deep(.el-link__inner) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.msg-more {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,23 +11,15 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "dashboard"
|
||||
})
|
||||
|
||||
let pageLoading = ref(true)
|
||||
|
||||
export default {
|
||||
name: "dashboard",
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
pageLoading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMounted(){
|
||||
this.pageLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<el-main class="pi-page">
|
||||
<el-page-header @back="onBack" :content="title" class="header">
|
||||
<template #extra>
|
||||
<div class="flex items-center">
|
||||
<el-popconfirm title="确定删除吗？" @confirm="del">
|
||||
<template #reference>
|
||||
<el-button type="danger" circle icon="el-icon-delete" :disabled="!info.mess_id"/>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<section v-if="!info.mess_id" class="empty">
|
||||
<img src="@/assets/images/404.png">
|
||||
</section>
|
||||
<section v-else v-html="info.content"/>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getCurrentInstance, onMounted, ref} from "vue";
|
||||
import api from "@/api"
|
||||
import useTabs from "@/utils/useTabs"
|
||||
import {useRoute} from "vue-router"
|
||||
|
||||
defineOptions({
|
||||
name: "messageDetail"
|
||||
})
|
||||
|
||||
const {proxy} = getCurrentInstance()
|
||||
const route = useRoute()
|
||||
let info = ref({})
|
||||
let title = ref("消息不存在")
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
const res = await api.system.message.detail({id: route.query.id})
|
||||
if (res.data) {
|
||||
info.value = res.data
|
||||
title.value = info.value.title
|
||||
}
|
||||
}
|
||||
|
||||
function onBack() {
|
||||
useTabs.close()
|
||||
}
|
||||
|
||||
async function del() {
|
||||
const res = await api.system.message.remove({id: route.query.id})
|
||||
proxy.$message.success(res.msg)
|
||||
onBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pi-page {
|
||||
background: var(--el-bg-color);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 80px 0;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-input v-model="form" placeholder=""/>
|
||||
<el-button plain @click="showClick">点我</el-button>
|
||||
<pi-dialog v-model="show" ref="dialog"></pi-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getCurrentInstance, ref} from "vue";
|
||||
defineOptions({
|
||||
name: 'messageCenter'
|
||||
})
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
let show = ref(false)
|
||||
|
||||
let form = ref("")
|
||||
|
||||
function showClick() {
|
||||
show.value = true
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -6,11 +6,15 @@
|
|||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree :default-expand-all="true" ref="groupRef" class="menu" node-key="dept_id" :data="group" :props="groupsProps" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
|
||||
<el-tree :default-expand-all="true" ref="groupRef" class="menu" node-key="dept_id" :data="group"
|
||||
:props="groupsProps" :current-node-key="''" :highlight-current="true"
|
||||
:expand-on-click-node="false" :filter-node-method="groupFilterNode"
|
||||
@node-click="groupClick"></el-tree>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<pi-table ref="tableRef" :apiObj="api.system.account.list" @selection-change="selectionChange" stripe remoteSort remoteFilter>
|
||||
<pi-table ref="tableRef" :apiObj="api.system.account.list" @selection-change="selectionChange" stripe remoteSort
|
||||
remoteFilter>
|
||||
<template #do>
|
||||
<el-button v-auth="'account:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
|
||||
</template>
|
||||
|
|
@ -27,17 +31,22 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="账号" prop="username"></el-table-column>
|
||||
<el-table-column label="昵称" prop="nickname"></el-table-column>
|
||||
<el-table-column label="邮箱" prop="email"></el-table-column>
|
||||
<el-table-column label="电话" prop="phone"></el-table-column>
|
||||
<el-table-column label="角色" prop="roles">
|
||||
<template #default="scope">
|
||||
{{scope.row.roles.map(item=>item.role_name).toString()}}
|
||||
{{ scope.row.roles.map(item => item.role_name).toString() }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="create_time"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="right" width="160">
|
||||
<template #default="scope">
|
||||
<el-button-group>
|
||||
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
||||
<el-button v-auth="'account:edit'" text type="success" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
||||
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看
|
||||
</el-button>
|
||||
<el-button v-auth="'account:edit'" text type="success" size="small"
|
||||
@click="table_edit(scope.row, scope.$index)">编辑
|
||||
</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
<el-button v-auth="'account:del'" text type="danger" size="small">删除</el-button>
|
||||
|
|
@ -90,60 +99,68 @@ onMounted(() => {
|
|||
})
|
||||
|
||||
//添加
|
||||
function add(){
|
||||
function add() {
|
||||
dialogShow.value = true
|
||||
nextTick(() => {
|
||||
saveRef.value.open('add', null, group.value)
|
||||
})
|
||||
}
|
||||
|
||||
//编辑
|
||||
function table_edit(row){
|
||||
function table_edit(row) {
|
||||
dialogShow.value = true
|
||||
nextTick(() => {
|
||||
saveRef.value.open('edit', row, group.value)
|
||||
})
|
||||
}
|
||||
|
||||
//查看
|
||||
function table_show(row){
|
||||
function table_show(row) {
|
||||
dialogShow.value = true
|
||||
nextTick(() => {
|
||||
saveRef.value.open('show', row, group.value)
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
async function table_del(row){
|
||||
async function table_del(row) {
|
||||
const loading = proxy.$loading();
|
||||
var res = await api.system.account.del({ids: [row.account_id]});
|
||||
tableRef.value.refresh()
|
||||
loading.close();
|
||||
proxy.$message.success(res.msg)
|
||||
}
|
||||
|
||||
//表格选择后回调事件
|
||||
function selectionChange(e){
|
||||
function selectionChange(e) {
|
||||
selection.value = e;
|
||||
}
|
||||
|
||||
//加载树数据
|
||||
async function getGroup(){
|
||||
async function getGroup() {
|
||||
showGrouploading.value = true;
|
||||
const res = await api.system.dept.option();
|
||||
showGrouploading.value = false;
|
||||
group.value = tools.makeTreeData(res.data, 0, "dept_id");
|
||||
group.value.unshift({'dept_id': null, 'dept_name': '所有部门'})
|
||||
}
|
||||
|
||||
//树过滤
|
||||
function groupFilterNode(value, data){
|
||||
function groupFilterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
|
||||
//树点击事件
|
||||
function groupClick(data){
|
||||
function groupClick(data) {
|
||||
var params = {
|
||||
dept_id: data.dept_id
|
||||
}
|
||||
tableRef.value.reload(params)
|
||||
}
|
||||
|
||||
//搜索
|
||||
function upsearch(){
|
||||
function upsearch() {
|
||||
tableRef.value.upData(search.value)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,38 @@
|
|||
<template>
|
||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
||||
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="formRef" label-width="100px" label-position="right">
|
||||
<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px"
|
||||
label-position="right">
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="form.username" placeholder="用于登录系统" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系电话" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" prop="password">
|
||||
<el-input type="password" v-model="form.password" clearable show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" prop="dept_id">
|
||||
<el-cascader ref="deptRef" v-model="form.dept_id" :options="depts" :props="deptsProps" clearable style="width: 100%;"></el-cascader>
|
||||
<el-cascader ref="deptRef" v-model="form.dept_id" :options="depts" :props="deptsProps" clearable
|
||||
style="width: 100%;"></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属岗位" prop="posts">
|
||||
<el-select v-model="form.posts" multiple filterable style="width: 100%">
|
||||
<el-option v-for="item in groups2" :key="item.post_id" :label="item.post_name" :value="item.post_id"/>
|
||||
<el-option v-for="item in groups2" :key="item.post_id" :label="item.post_name"
|
||||
:value="item.post_id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属角色" prop="roles">
|
||||
<el-select v-model="form.roles" multiple filterable style="width: 100%">
|
||||
<el-option v-for="item in groups" :key="item.role_id" :label="item.role_name" :value="item.role_id"/>
|
||||
<el-option v-for="item in groups" :key="item.role_id" :label="item.role_name"
|
||||
:value="item.role_id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false" >取 消</el-button>
|
||||
<el-button @click="visible=false">取 消</el-button>
|
||||
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
|
@ -49,8 +59,10 @@ let titleMap = ref({
|
|||
let visible = ref(false)
|
||||
let isSaveing = ref(false)
|
||||
const form = ref({
|
||||
account_id:null,
|
||||
account_id: null,
|
||||
username: "",
|
||||
email: '',
|
||||
phone: '',
|
||||
password: "",
|
||||
dept_id: 0,
|
||||
roles: [],
|
||||
|
|
@ -84,7 +96,7 @@ onMounted(() => {
|
|||
getGroup2()
|
||||
})
|
||||
|
||||
function open(m='add', data = {}, d = []){
|
||||
function open(m = 'add', data = {}, d = []) {
|
||||
mode.value = m;
|
||||
if (data) {
|
||||
Object.assign(form.value, data)
|
||||
|
|
@ -96,21 +108,24 @@ function open(m='add', data = {}, d = []){
|
|||
}
|
||||
|
||||
//加载树数据
|
||||
async function getGroup(){
|
||||
async function getGroup() {
|
||||
const res = await api.system.role.option();
|
||||
groups.value = res.data;
|
||||
}
|
||||
|
||||
async function getGroup2(){
|
||||
async function getGroup2() {
|
||||
const res = await api.system.post.option();
|
||||
groups2.value = res.data;
|
||||
}
|
||||
|
||||
//表单提交方法
|
||||
async function submit(){
|
||||
async function submit() {
|
||||
// 校验登录
|
||||
const validate = await formRef.value.validate().catch(() => {});
|
||||
if(!validate){ return false }
|
||||
const validate = await formRef.value.validate().catch(() => {
|
||||
});
|
||||
if (!validate) {
|
||||
return false
|
||||
}
|
||||
// 部门获取最后一项
|
||||
form.value.dept_id = deptRef.value.getCheckedNodes()[0].data.dept_id
|
||||
if (form.value.password) form.value.password = tools.crypto.MD5(form.value.password)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<pi-table ref="tableRef" :apiObj="api.system.message.list" @selection-change="selectionChange">
|
||||
<template #do>
|
||||
<el-button v-auth="'message:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
|
||||
<el-button v-auth="'message:edit'" type="success" icon="el-icon-edit" @click="edit"
|
||||
:disabled="selection.length!==1"></el-button>
|
||||
<el-button v-auth="'message:del'" type="danger" plain icon="el-icon-delete"
|
||||
:disabled="selection.length===0" @click="batch_del"></el-button>
|
||||
</template>
|
||||
<template #search>
|
||||
<el-input v-model="search.title" placeholder="标题" clearable style="width: 200px;"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</template>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="ID" prop="message_id"></el-table-column>
|
||||
<el-table-column label="标题" prop="title"></el-table-column>
|
||||
<el-table-column label="是否撤回" prop="recalled_flag">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.recalled_flag === 1" type="danger">是</el-tag>
|
||||
<el-tag v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建人" prop="account.username"></el-table-column>
|
||||
<el-table-column label="创建时间" prop="create_time"></el-table-column>
|
||||
<el-table-column label="更新时间" prop="update_time"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="center" width="120">
|
||||
<template #default="scope">
|
||||
<el-button-group>
|
||||
<el-button text type="primary" size="small" @click="show(scope.row, scope.$index)">查看
|
||||
</el-button>
|
||||
<el-button v-auth="'message:edit'" text type="success" size="small"
|
||||
@click="edit(scope.row, scope.$index)">编辑
|
||||
</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="del(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
<el-button v-auth="'message:del'" text type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm v-if="scope.row.recalled_flag !== 1" title="确定撤回吗？" @confirm="recalled(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
<el-button v-auth="'message:recalled'" text type="warning" size="small">撤回</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</pi-table>
|
||||
<save-dialog v-if="dialogShow" ref="dialogRef" @success="tableRef.refresh()"
|
||||
@closed="dialogShow=false"></save-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import saveDialog from './save'
|
||||
import api from "@/api/index";
|
||||
import {getCurrentInstance, nextTick, ref} from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "systemMessage"
|
||||
})
|
||||
|
||||
const {proxy} = getCurrentInstance()
|
||||
const tableRef = ref(null)
|
||||
const dialogRef = ref(null)
|
||||
|
||||
let dialogShow = ref(false)
|
||||
let selection = ref([])
|
||||
let search = ref({
|
||||
title: null,
|
||||
})
|
||||
|
||||
//添加
|
||||
function add() {
|
||||
dialogShow.value = true
|
||||
nextTick(() => {
|
||||
dialogRef.value.open()
|
||||
})
|
||||
}
|
||||
|
||||
//编辑
|
||||
function edit(row) {
|
||||
dialogShow.value = true
|
||||
nextTick(() => {
|
||||
if (row instanceof PointerEvent) {
|
||||
row = selection.value[0]
|
||||
}
|
||||
dialogRef.value.open('edit', row)
|
||||
})
|
||||
}
|
||||
|
||||
//查看
|
||||
function show(row) {
|
||||
dialogShow.value = true
|
||||
nextTick(() => {
|
||||
dialogRef.value.open('show', row)
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
async function del(row) {
|
||||
const loading = proxy.$loading();
|
||||
const res = await api.system.message.del({ids: [row.message_id]});
|
||||
tableRef.value.refresh()
|
||||
loading.close();
|
||||
proxy.$message.success(res.msg)
|
||||
}
|
||||
|
||||
async function recalled(row) {
|
||||
const loading = proxy.$loading();
|
||||
const res = await api.system.message.recalled({id: row.message_id});
|
||||
tableRef.value.refresh()
|
||||
loading.close();
|
||||
proxy.$message.success(res.msg)
|
||||
}
|
||||
|
||||
//批量删除
|
||||
async function batch_del() {
|
||||
proxy.$confirm(`确定删除选中的 ${selection.value.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const loading = proxy.$loading();
|
||||
const res = await api.system.message.del({ids: selection.value.map(item => item.message_id)});
|
||||
tableRef.value.refresh()
|
||||
loading.close();
|
||||
proxy.$message.success(res.msg)
|
||||
})
|
||||
}
|
||||
|
||||
//表格选择后回调事件
|
||||
function selectionChange(e) {
|
||||
selection.value = e;
|
||||
}
|
||||
|
||||
//搜索
|
||||
function upsearch() {
|
||||
tableRef.value.upData(search.value)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<pi-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false" showFullscreen>
|
||||
<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input type="text" v-model="form.title" placeholder="请输入标题" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="content">
|
||||
<pi-editor v-model="form.content" placeholder="请输入内容"></pi-editor>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false" >取 消</el-button>
|
||||
<el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||
</template>
|
||||
</pi-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getCurrentInstance, ref} from 'vue'
|
||||
import api from "@/api/index"
|
||||
import piEditor from '@/components/piEditor'
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
const formRef = ref(null)
|
||||
const {proxy} = getCurrentInstance()
|
||||
|
||||
let mode = ref('add')
|
||||
let titleMap = ref({
|
||||
add: '新增',
|
||||
edit: '编辑',
|
||||
show: '查看'
|
||||
})
|
||||
let visible = ref(false)
|
||||
let isSaveing = ref(false)
|
||||
let form = ref({
|
||||
message_id: null,
|
||||
title: null,
|
||||
content: null
|
||||
})
|
||||
const rules = ref({
|
||||
})
|
||||
|
||||
function open(m = 'add', data = null) {
|
||||
mode.value = m
|
||||
visible.value = true
|
||||
Object.assign(form.value, data)
|
||||
}
|
||||
|
||||
async function submit(){
|
||||
// 校验登录
|
||||
const validate = await formRef.value.validate().catch(() => {});
|
||||
if(!validate){ return false }
|
||||
isSaveing.value = true;
|
||||
const res = form.value.message_id? await api.system.message.edit(form.value) : await api.system.message.add(form.value);
|
||||
isSaveing.value = false;
|
||||
emit('success')
|
||||
visible.value = false;
|
||||
proxy.$message.success(res.msg)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -10,6 +10,20 @@
|
|||
<p style="font-size: 14px; color: #888888;">{{ userInfo.bio }}</p>
|
||||
</div>
|
||||
<div class="down">
|
||||
<div class="item">
|
||||
<!--邮箱-->
|
||||
<el-icon size="16">
|
||||
<component :is="'pi-icon-birthday'"/>
|
||||
</el-icon>
|
||||
<el-text>{{ userInfo.email || "保密" }}</el-text>
|
||||
</div>
|
||||
<div class="item">
|
||||
<!--电话-->
|
||||
<el-icon size="16">
|
||||
<component :is="'pi-icon-birthday'"/>
|
||||
</el-icon>
|
||||
<el-text>{{ userInfo.phone || "保密" }}</el-text>
|
||||
</div>
|
||||
<div class="item">
|
||||
<!--岗位-->
|
||||
<el-icon size="15">
|
||||
|
|
@ -68,6 +82,12 @@
|
|||
<el-form-item label="昵称" prop="nickname">
|
||||
<el-input v-model="form.nickname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model="form.phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-select v-model="form.sex">
|
||||
<el-option label="保密" :value="0" disabled/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue