Browse Source

用户管理界面完善

dev_ycq
21819 2 years ago
parent
commit
2b2a217fd7
  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

@ -20,7 +20,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -32,7 +33,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -44,7 +46,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -56,7 +59,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -68,7 +72,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -80,7 +85,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -92,7 +98,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -104,7 +111,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -116,7 +124,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -128,7 +137,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -140,7 +150,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -152,7 +163,8 @@
<template #dateCell="{ date, data }">
{{ data.day.split('-').slice(2).join('-') }}
<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 }}
</el-tag>
</div>
@ -165,6 +177,8 @@
<script>
// 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'
export default {

4
src/components/ManageMail.vue

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

100
src/components/ManageUser.vue

@ -37,7 +37,27 @@
<el-col :span="6">
<el-button type="default" @click="reset" class="under-btn">重置</el-button></el-col>
<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-col>
</el-row>
@ -57,7 +77,11 @@
</el-table-column>
<el-table-column fixed="right" label="详情" width="100">
<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>
</el-table-column>
</el-table>
@ -71,10 +95,9 @@
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { onMounted, onUpdated } from 'vue';
import router from '../router';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
const form = ref({
date: '',
@ -83,6 +106,12 @@ const form = ref({
idCard: '',
})
const newForm = ref({
realName: '',
phone: '',
idCard: '',
})
// tableDataaxios
const tableData = ref([])
@ -121,7 +150,18 @@ const flexColumnWidth = (label, prop) => {
const handleDelete = (index) => {
console.log(index)
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) => {
@ -195,11 +235,51 @@ const reset = () => {
}
}
const out = () => {
console.log('新增用户')
const newUser = ref(false)
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>
<style scoped>
@ -209,7 +289,7 @@ const out = () => {
}
.table-box {
/* 全屏时顶部元素总和284px */
height: calc(100vh - 316px);
/* 全屏时顶部元素总和286px */
height: calc(100vh - 286px);
}
</style>

2
src/layout/Index.vue

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

2
src/main.js

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

Loading…
Cancel
Save