police-mailbox
/
mailbox-outer-admin-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

用户管理界面完善

dev_ycq
21819 2 years ago
parent
b3ad65f309
commit
2b2a217fd7
5 changed files with 122 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      src/components/HolidayList.vue
  2. 4
      src/components/ManageMail.vue
  3. 100
      src/components/ManageUser.vue
  4. 2
      src/layout/Index.vue
  5. 2
      src/main.js

38
src/components/HolidayList.vue
Unescape View File

@ -20,7 +20,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData1" :key="item"> <div style="width:100%;" v-for="item in scheduleData1" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -32,7 +33,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData2" :key="item"> <div style="width:100%;" v-for="item in scheduleData2" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -44,7 +46,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData3" :key="item"> <div style="width:100%;" v-for="item in scheduleData3" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -56,7 +59,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData4" :key="item"> <div style="width:100%;" v-for="item in scheduleData4" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -68,7 +72,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData5" :key="item"> <div style="width:100%;" v-for="item in scheduleData5" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -80,7 +85,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData6" :key="item"> <div style="width:100%;" v-for="item in scheduleData6" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -92,7 +98,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData7" :key="item"> <div style="width:100%;" v-for="item in scheduleData7" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -104,7 +111,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData8" :key="item"> <div style="width:100%;" v-for="item in scheduleData8" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -116,7 +124,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData9" :key="item"> <div style="width:100%;" v-for="item in scheduleData9" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -128,7 +137,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData10" :key="item"> <div style="width:100%;" v-for="item in scheduleData10" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -140,7 +150,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData11" :key="item"> <div style="width:100%;" v-for="item in scheduleData11" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -152,7 +163,8 @@
<template #dateCell="{ date, data }"> <template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<div style="width:100%;" v-for="item in scheduleData12" :key="item"> <div style="width:100%;" v-for="item in scheduleData12" :key="item">
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1"> <el-tag type="danger"
v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
{{ item.content }} {{ item.content }}
</el-tag> </el-tag>
</div> </div>
@ -165,6 +177,8 @@
<script> <script>
// import {getholiday} from "@/api/holiday" // import {getholiday} from "@/api/holiday"
import { getholiday } from '@/api/holiday' import { getholiday } from '@/api/holiday'
import { showholiday } from '@/api/holiday'
import { timePanelSharedProps } from 'element-plus/es/components/time-picker/src/props/shared'
import { saveholiday } from '@/api/holiday' import { saveholiday } from '@/api/holiday'
export default { export default {

4
src/components/ManageMail.vue
Unescape View File

@ -232,7 +232,7 @@ const out = () => {
} }
.table-box { .table-box {
/* 全屏时顶部元素总和284px */ /* 全屏时顶部元素总和316px */
height: calc(100vh - 316px); height: calc(100vh - 336px);
} }
</style> </style>

100
src/components/ManageUser.vue
Unescape View File

@ -37,7 +37,27 @@
<el-col :span="6"> <el-col :span="6">
<el-button type="default" @click="reset" class="under-btn">重置</el-button></el-col> <el-button type="default" @click="reset" class="under-btn">重置</el-button></el-col>
<el-col :span="6"> <el-col :span="6">
<el-button type="primary" @click="out" class="under-btn">新增用户</el-button></el-col> <el-button type="primary" @click="newUser = true" class="under-btn">新增用户</el-button></el-col>
<el-dialog v-model="newUser" title="新增用户" width="40%">
<el-form :model="newForm" label-width="150px">
<el-form-item label="新管理员姓名">
<el-input v-model="newForm.realName" placeholder="请输入新管理员姓名" max-length="200px"></el-input>
</el-form-item>
<el-form-item label="新管理员手机号">
<el-input v-model="newForm.phone" placeholder="请输入新管理员手机号"></el-input>
</el-form-item>
<el-form-item label="新管理员身份证号">
<el-input v-model="newForm.idCard" placeholder="请输入新管理员身份证号"></el-input>
</el-form-item></el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancleNewUser">取消</el-button>
<el-button type="primary" @click="submitNewUser">
提交
</el-button>
</span>
</template>
</el-dialog>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -57,7 +77,11 @@
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="详情" width="100"> <el-table-column fixed="right" label="详情" width="100">
<template v-slot="scope"> <template v-slot="scope">
<el-button type="danger" @click="handleDelete(scope.$index + 1)">删除</el-button> <el-popconfirm title="你确定要删除这个管理员吗？" @confirm="handleDelete(scope.$index + 1)">
<template #reference>
<el-button type="danger">删除</el-button>
</template>
</el-popconfirm>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -71,10 +95,9 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'
import axios from 'axios' import axios from 'axios'
import { onMounted, onUpdated } from 'vue'; import { onMounted, ref } from 'vue';
import router from '../router'; import { ElMessage } from 'element-plus'
const form = ref({ const form = ref({
date: '', date: '',
@ -83,6 +106,12 @@ const form = ref({
idCard: '', idCard: '',
}) })
const newForm = ref({
realName: '',
phone: '',
idCard: '',
})
// 定义可变的tableData变量，并用axios请求数据 // 定义可变的tableData变量，并用axios请求数据
const tableData = ref([]) const tableData = ref([])
@ -121,7 +150,18 @@ const flexColumnWidth = (label, prop) => {
const handleDelete = (index) => { const handleDelete = (index) => {
console.log(index) console.log(index)
console.log(tableData.value[index - 1].id) console.log(tableData.value[index - 1].id)
router.push('/user/detail/' + tableData.value[index - 1].id) axios.post('api/user/delete-user', { id: tableData.value[index - 1].id })
.then(function (response) {
// console.log(response);
if (response.status === 200 && response.data === 'success') {
search()
successMessage('删除用户成功')
}
})
.catch(function (error) {
errorMessage('删除用户失败');
console.log(error)
})
} }
const handleSizeChange = (size) => { const handleSizeChange = (size) => {
@ -195,11 +235,51 @@ const reset = () => {
} }
} }
const out = () => { const newUser = ref(false)
console.log('新增用户') const submitNewUser = () => {
const requestData = newForm.value
const data = JSON.stringify(requestData)
console.log(data)
axios.post('api/user/add-user', data, { headers: { 'Content-Type': 'application/json' } })
.then(function (response) {
console.log(response);
if (response.status === 200 && response.data === 'success') {
newUser.value = false;
newFormReset();
search();
successMessage('新增用户成功')
}
})
.catch(function (error) {
errorMessage('新增用户失败');
console.log(error)
})
}
const cancleNewUser = () => {
newUser.value = false;
newFormReset();
}
const newFormReset = () => {
newForm.value = {
realName: '',
phone: '',
idCard: '',
}
}
const successMessage = (msg) => {
ElMessage.success(msg)
}
const errorMessage = (msg) => {
ElMessage.error(msg)
} }
</script> </script>
<style scoped> <style scoped>
@ -209,7 +289,7 @@ const out = () => {
} }
.table-box { .table-box {
/* 全屏时顶部元素总和284px */ /* 全屏时顶部元素总和286px */
height: calc(100vh - 316px); height: calc(100vh - 286px);
} }
</style> </style>

2
src/layout/Index.vue
Unescape View File

@ -66,7 +66,7 @@ aside {
background-color: #071254; background-color: #071254;
color: #fff; color: #fff;
width: 100px; width: 100px;
height: calc(155vh - var(--header-height)); height: calc(100vh - var(--header-height));
nav { nav {
a { a {
height: 100px; height: 100px;

2
src/main.js
Unescape View File

@ -7,6 +7,8 @@ import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import './assets/style/style.scss' import './assets/style/style.scss'
import 'element-plus/theme-chalk/src/message.scss'
createApp(App) createApp(App)
.use(router) .use(router)

Write Preview
Loading…
Cancel
Save