parent
4c919a6451
commit
7f9f347e0f
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* @Author: BINGWU
|
||||
* @Date: 2024-05-21 23:05:12
|
||||
* @LastEditors: BINGWU HuJiaCheng2003@163.com
|
||||
* @LastEditTime: 2024-05-23 11:50:36
|
||||
* @FilePath: \employee-information-management-system\app\src\api\request.js
|
||||
* @Describe:
|
||||
* @Mark: ૮(˶ᵔ ᵕ ᵔ˶)ა
|
||||
*/
|
||||
import http from '@/utils/http'
|
||||
import { deleteRequest } from '@/utils/http'
|
||||
const getRequest = (_id) => {
|
||||
return http.get('/request/get', {
|
||||
params: {
|
||||
_id
|
||||
}
|
||||
})
|
||||
}
|
||||
const createRequest = (params) => {
|
||||
return http.post('/request/create', params)
|
||||
}
|
||||
const updateRequest = (params) => {
|
||||
return http.put('/request/update', params)
|
||||
}
|
||||
const deleteRequestData = (params) => {
|
||||
return deleteRequest('/request/delete', params)
|
||||
}
|
||||
const getAllRequest = (params) => {
|
||||
return http.get('/request/get-all', {
|
||||
params
|
||||
})
|
||||
}
|
||||
export {
|
||||
getRequest,
|
||||
createRequest,
|
||||
getAllRequest,
|
||||
updateRequest,
|
||||
deleteRequestData
|
||||
}
|
||||
@ -1,7 +1,39 @@
|
||||
<template>
|
||||
<div>avatar管理</div>
|
||||
<div class="change-avatar">
|
||||
<PreviewPictureCom ref="previewPictureComRef"></PreviewPictureCom>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import PreviewPictureCom from '@/components/PreviewPictureCom.vue'
|
||||
import { getUserStore } from '@/stores'
|
||||
import { smallFileUpload } from '@/utils/tencentCloud'
|
||||
import { updateUser, getUser } from '@/api/user'
|
||||
const previewPictureComRef = ref(null)
|
||||
const userStore = getUserStore()
|
||||
const handleSubmit = async () => {
|
||||
const fileData = previewPictureComRef.value.fileFn().getFile()
|
||||
const avatar = await smallFileUpload(fileData.value)
|
||||
await updateUser({
|
||||
_id: userStore._id,
|
||||
data: {
|
||||
avatar
|
||||
}
|
||||
})
|
||||
const res = await getUser(userStore._id)
|
||||
userStore.setAvatar(res.data.avatar)
|
||||
ElMessage({
|
||||
message: '更新成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
previewPictureComRef.value.imageUrlFn().setImageUrl(userStore.avatar)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,7 +1,61 @@
|
||||
<template>
|
||||
<div>密码管理</div>
|
||||
<div class="change-password">
|
||||
<el-input
|
||||
v-model="newPassword"
|
||||
style="width: 300px"
|
||||
type="password"
|
||||
placeholder="输入新的密码"
|
||||
show-password
|
||||
><template #append>
|
||||
<el-button icon="Select" @click="handleConfirm" /> </template
|
||||
></el-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { updateUser } from '@/api/user'
|
||||
import { getUserStore } from '@/stores'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const userStore = getUserStore()
|
||||
const newPassword = ref('')
|
||||
const handleConfirm = () => {
|
||||
ElMessageBox.confirm('确认要修改密码吗?', '警告', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
const value = newPassword.value
|
||||
await updateUser({
|
||||
_id: userStore._id,
|
||||
data: {
|
||||
password: value
|
||||
}
|
||||
})
|
||||
navigator.clipboard.writeText(value)
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '修改成功,新密码已经复制到剪贴板!'
|
||||
})
|
||||
newPassword.value = ''
|
||||
userStore.asideData = []
|
||||
userStore.routerData = []
|
||||
userStore.token = ''
|
||||
userStore._id = ''
|
||||
userStore.userType = ''
|
||||
userStore.name = ''
|
||||
ElMessage('请重新登陆')
|
||||
router.push('/login')
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '修改取消'
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="request-form">
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="props.title + '请假信息'"
|
||||
width="500"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
:model="formData"
|
||||
label-width="auto"
|
||||
style="max-width: 600px"
|
||||
ref="formRef"
|
||||
>
|
||||
<el-form-item label="职工名" prop="employeeName">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="formData.employeeName"
|
||||
:disabled="title === '查看' || title === '修改'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.remark"
|
||||
:disabled="title === '查看' || title === '修改'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group
|
||||
v-model="formData.status"
|
||||
@change="handleRadioChange"
|
||||
:disabled="title === '查看'"
|
||||
>
|
||||
<el-radio label="待批准">待批准</el-radio>
|
||||
<el-radio label="批准通过">批准通过</el-radio>
|
||||
<el-radio label="批准未通过">批准未通过</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="requestType">
|
||||
<el-radio-group
|
||||
v-model="formData.requestType"
|
||||
:disabled="title === '查看' || title === '修改'"
|
||||
>
|
||||
<el-radio label="病假">病假</el-radio>
|
||||
<el-radio label="事假">事假</el-radio>
|
||||
<el-radio label="调休">调休</el-radio>
|
||||
<el-radio label="其他">其他</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="提交时间" prop="date">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="formData.date"
|
||||
:disabled="title === '查看' || title === '修改'"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon"><calendar /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer" v-show="title !== '查看'">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, nextTick } from 'vue'
|
||||
import { updateRequest } from '@/api/request'
|
||||
const formData = reactive({
|
||||
employeeName: '',
|
||||
employeeId: '',
|
||||
requestType: '病假',
|
||||
remark: '',
|
||||
status: '待批准',
|
||||
date: ''
|
||||
})
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '添加'
|
||||
}
|
||||
})
|
||||
const formRef = ref(null)
|
||||
let newId = ''
|
||||
const emits = defineEmits(['updateTableData'])
|
||||
|
||||
const handleConfirm = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
let message = ''
|
||||
const params = {
|
||||
...formData
|
||||
}
|
||||
const {
|
||||
data: { msg }
|
||||
} = await updateRequest({
|
||||
data: params,
|
||||
_id: newId
|
||||
})
|
||||
message = msg
|
||||
ElMessage({
|
||||
message,
|
||||
type: 'success'
|
||||
})
|
||||
emits('updateTableData')
|
||||
offDialog()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const openDialog = (row) => {
|
||||
dialogVisible.value = true
|
||||
nextTick(() => {
|
||||
formRef.value.clearValidate()
|
||||
})
|
||||
const { remark, date, employeeName, status, _id, employeeId } = row
|
||||
formData.remark = remark
|
||||
formData.date = date
|
||||
formData.employeeName = employeeName
|
||||
formData.employeeId = employeeId
|
||||
formData.status = status.tagName
|
||||
newId = _id
|
||||
}
|
||||
const handleClose = () => {
|
||||
offDialog()
|
||||
}
|
||||
const offDialog = () => (dialogVisible.value = false)
|
||||
defineExpose({
|
||||
openDialog,
|
||||
offDialog
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.request-form {
|
||||
.tree-content {
|
||||
width: 100%;
|
||||
border: 1px solid #e5e6e7;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,129 @@
|
||||
<template>
|
||||
<div class="request-manage">
|
||||
<div clase="table">
|
||||
<BaseTableCom></BaseTableCom>
|
||||
<BaseTableCom
|
||||
:column-data="columnData"
|
||||
:dropdown-data="dropdownData"
|
||||
:table-data="tableData"
|
||||
:total="total"
|
||||
:show-pagination="true"
|
||||
:page-sizes="[5, 8]"
|
||||
@update-table-data="updateTableData"
|
||||
ref="baseTableComRef"
|
||||
></BaseTableCom>
|
||||
</div>
|
||||
<RequestFormCom
|
||||
ref="requestFormComRef"
|
||||
:title="title"
|
||||
@update-table-data="getTableData"
|
||||
></RequestFormCom>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { dayjs } from 'element-plus'
|
||||
import BaseTableCom from '@/components/table/BaseTableCom.vue'
|
||||
import { getAllRequest, deleteRequestData } from '@/api/request'
|
||||
import RequestFormCom from '../components/form/RequestFormCom.vue'
|
||||
const requestFormComRef = ref(null)
|
||||
|
||||
const columnData = [
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注'
|
||||
},
|
||||
{
|
||||
prop: 'requestType',
|
||||
label: '类型'
|
||||
},
|
||||
{
|
||||
prop: 'employeeName',
|
||||
label: '职工名'
|
||||
},
|
||||
{
|
||||
prop: 'employeeId',
|
||||
label: '职工Id'
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '状态',
|
||||
tagColumn: true
|
||||
},
|
||||
{
|
||||
prop: 'date',
|
||||
label: '提交时间'
|
||||
}
|
||||
]
|
||||
const total = ref(0)
|
||||
const title = ref('')
|
||||
const tableData = ref([])
|
||||
const baseTableComRef = ref(null)
|
||||
const dropdownData = [
|
||||
{
|
||||
command: 'command1',
|
||||
handleAction: (row) => {
|
||||
returnData(row, '查看')
|
||||
},
|
||||
icon: 'View',
|
||||
actionName: '查看'
|
||||
},
|
||||
{
|
||||
command: 'command2',
|
||||
handleAction: (row) => {
|
||||
returnData(row, '修改')
|
||||
},
|
||||
icon: 'Edit',
|
||||
actionName: '修改'
|
||||
},
|
||||
{
|
||||
command: 'command3',
|
||||
handleAction: async (row) => {
|
||||
const { _id } = row
|
||||
const res = await deleteRequestData({ _ids: [_id] })
|
||||
const { msg } = res.data
|
||||
await getTableData()
|
||||
ElMessage({
|
||||
message: msg,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
icon: 'Delete',
|
||||
actionName: '删除'
|
||||
}
|
||||
]
|
||||
const getTableData = async (params = null) => {
|
||||
if (!params) {
|
||||
const { currentPage, pageSize } = baseTableComRef.value.getPaginationData()
|
||||
params = { pageIndex: currentPage, pageSize }
|
||||
}
|
||||
const res = await getAllRequest(params)
|
||||
tableData.value = res.data.data.map((item) => {
|
||||
const statusObj = {
|
||||
待批准: 'warning',
|
||||
批准未通过: 'danger',
|
||||
批准通过: 'success'
|
||||
}
|
||||
item.date = dayjs(item.date).format('YYYY-MM-DD')
|
||||
item.status = {
|
||||
tagName: item.status,
|
||||
tagType: statusObj[item.status]
|
||||
}
|
||||
return item
|
||||
})
|
||||
total.value = res.data.total
|
||||
}
|
||||
const returnData = (row, newTiltle) => {
|
||||
title.value = newTiltle
|
||||
console.log('row:', row)
|
||||
requestFormComRef.value.openDialog(row)
|
||||
}
|
||||
const updateTableData = async (pageSize, pageIndex) => {
|
||||
await getTableData({ pageSize, pageIndex })
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getTableData({ pageSize: 5, pageIndex: 1 })
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
Reference in new issue