1
0
mirror of https://github.com/FatttSnake/Pinnacle-OA.git synced 2026-04-05 23:11:24 +08:00

process layout

This commit is contained in:
gzw
2023-06-05 16:42:32 +08:00
parent 8c4a4d50f1
commit 40b475e0c6
3 changed files with 186 additions and 213 deletions

View File

@@ -25,16 +25,13 @@
</el-form-item> </el-form-item>
<el-form-item label="考勤时间" v-model="form.attTime" prop="attTime"> <el-form-item label="考勤时间" v-model="form.attTime" prop="attTime">
<div class="block"> <el-date-picker
<el-date-picker v-model="form.attTime"
v-model="form.attTime" +
+ type="datetime"
type="datetime" format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss" placeholder="请选择考勤时间"
placeholder="请选择考勤时间" />
style="width: 200px"
/>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-footer style="text-align: center"> <el-footer style="text-align: center">
@@ -83,7 +80,6 @@ export default {
this.$emit('setDialogVisible', false) this.$emit('setDialogVisible', false)
} else { } else {
ElMessage.error('操作失败') ElMessage.error('操作失败')
this.$emit('setDialogVisible', false)
return false return false
} }
}) })

View File

@@ -1,37 +1,35 @@
<template> <template>
<div id="attendanceMain"> <el-row :gutter="10">
<div id="attendanceMain1"> <el-col :span="12">
<el-date-picker <el-date-picker
v-model="attTime" v-model="attTime"
type="datetimerange" type="datetimerange"
style="width: 100%"
range-separator="" range-separator=""
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
> />
</el-date-picker> </el-col>
<el-col :span="-1">
<el-button type="primary" style="margin-left: 15px" @click="getAttendancesByTime()"> <el-button type="primary" @click="getAttendancesByTime()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center"> <el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-search /> <icon-pinnacle-search />
</el-icon> </el-icon>
<span style="vertical-align: center">查询</span> <span style="vertical-align: center">查询</span>
</el-button> </el-button>
<el-button type="warning" @click="resetParam()">
<el-button type="warning" style="margin-left: 15px" @click="resetParam()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center"> <el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-reset /> <icon-pinnacle-reset />
</el-icon> </el-icon>
<span style="vertical-align: center">重置</span> <span style="vertical-align: center">重置</span>
</el-button> </el-button>
<el-button type="success" @click="handleAdd()">
<el-button type="success" style="margin-left: 15px" @click="handleAdd()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center"> <el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-click /> <icon-pinnacle-click />
</el-icon> </el-icon>
<span style="vertical-align: center">增加</span> <span style="vertical-align: center">打卡</span>
</el-button> </el-button>
<el-popconfirm <el-popconfirm
title="你确定要批量删除这些数据吗?" title="你确定要批量删除这些数据吗?"
confirm-button-text="确定" confirm-button-text="确定"
@@ -49,121 +47,115 @@
</el-button> </el-button>
</template> </template>
</el-popconfirm> </el-popconfirm>
</div> </el-col>
</el-row>
<div id="attendanceMain2"> <el-table
<el-table :data="tableData"
:data="tableData" border
border :header-cell-style="{ background: 'aliceblue' }"
style="width: 80%" @selection-change="handleSelectionChange"
:header-cell-style="{ background: 'aliceblue' }" style="margin-top: 10px"
@selection-change="handleSelectionChange" >
> <el-table-column type="selection" width="55" />
<el-table-column type="selection" width="55" /> <el-table-column prop="user.username" label="用户名" align="center" />
<el-table-column prop="id" label="考勤编号" width="200"></el-table-column> <el-table-column prop="attTime" label="考勤时间" width="250" align="center">
<el-table-column prop="user.username" label="用户名" width="180"></el-table-column> <template #default="scope">
<el-table-column prop="attTime" label="考勤时间"> {{ formatDate(scope.row.attTime) }}
<template #default="scope"> </template>
{{ formatDate(scope.row.attTime) }} </el-table-column>
<el-table-column prop="status" label="考勤状态" width="150" align="center">
<template v-slot="scope">
<el-tag
:type="
scope.row.status === 1
? 'success'
: scope.row.status === 2
? ''
: scope.row.status === 3
? 'warning'
: scope.row.status === 1 + ''
? 'success'
: scope.row.status === 2 + ''
? ''
: scope.row.status === 3 + ''
? 'warning'
: 'danger'
"
disable-transitions
>{{
scope.row.status === 1
? '签到'
: scope.row.status === 2
? '签退'
: scope.row.status === 3
? '迟到'
: scope.row.status === 1 + ''
? '签到'
: scope.row.status === 2 + ''
? '签退'
: scope.row.status === 3 + ''
? '迟到'
: '异常'
}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="operations" label="操作" width="250" align="center">
<template #default="scope">
<el-button type="success" size="small" @click="viewUpdate(scope.row)"
>更改
</el-button>
<el-popconfirm
title="您确定要删除吗?"
confirm-button-text="确定"
cancel-button-text="再想想"
icon-color="red"
@cancel="cancel"
@confirm="handleDelete(scope.row.id)"
>
<template #reference>
<el-button type="danger" size="small">删除</el-button>
</template> </template>
</el-table-column> </el-popconfirm>
<el-table-column prop="status" label="考勤状态"> </template>
<template v-slot="scope"> </el-table-column>
<el-tag </el-table>
:type="
scope.row.status === 1
? 'success'
: scope.row.status === 2
? ''
: scope.row.status === 3
? 'warning'
: scope.row.status === 1 + ''
? 'success'
: scope.row.status === 2 + ''
? ''
: scope.row.status === 3 + ''
? 'warning'
: 'danger'
"
disable-transitions
>{{
scope.row.status === 1
? '签到'
: scope.row.status === 2
? '签退'
: scope.row.status === 3
? '迟到'
: scope.row.status === 1 + ''
? '签到'
: scope.row.status === 2 + ''
? '签退'
: scope.row.status === 3 + ''
? '迟到'
: '异常'
}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="operations" label="操作">
<template #default="scope">
<el-button type="success" size="small" @click="viewUpdate(scope.row)"
>更改
</el-button>
<el-popconfirm
title="您确定要删除吗?"
confirm-button-text="确定"
cancel-button-text="再想想"
icon-color="red"
@cancel="cancel"
@confirm="handleDelete(scope.row.id)"
>
<template #reference>
<el-button type="danger" size="small">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<div> <el-dialog
<el-dialog v-model="addDialogFormVisible"
v-model="addDialogFormVisible" title="考勤信息"
title="考勤信息" width="25% "
width="25% " :close-on-click-modal="false"
:close-on-click-modal="false" :show-close="false"
:show-close="false" >
> <edit-attendance
<edit-attendance :users="users"
:users="users" :isDisabled="isDisabled"
:isDisabled="isDisabled" @addAttendance="addAttendance"
@addAttendance="addAttendance" @setDialogVisible="setDialogVisible"
@setDialogVisible="setDialogVisible" ></edit-attendance>
></edit-attendance> </el-dialog>
</el-dialog> <el-dialog
<el-dialog v-model="editDialogFormVisible"
v-model="editDialogFormVisible" title="考勤信息"
title="考勤信息" width="25% "
width="25% " :close-on-click-modal="false"
:close-on-click-modal="false" :show-close="false"
:show-close="false" >
> <edit-attendance
<edit-attendance :users="users"
:users="users" :form-data="form"
:form-data="form" :isDisabled="isDisabled"
:isDisabled="isDisabled" @addAttendance="addAttendance"
@addAttendance="addAttendance" @setDialogVisible="setDialogVisible"
@setDialogVisible="setDialogVisible" ></edit-attendance>
></edit-attendance> </el-dialog>
</el-dialog>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { SIZE_ICON_SM, SIZE_ICON_XL } from '@/constants/Common.constants.js' import { SIZE_ICON_SM, SIZE_ICON_XL } from '@/constants/Common.constants.js'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css' import 'element-plus/theme-chalk/el-message.css'
import '@/assets/css/attendance.css'
import _ from 'lodash' import _ from 'lodash'
import request from '@/services' import request from '@/services'

View File

@@ -1,110 +1,96 @@
<template> <template>
<div id="attendanceMain"> <el-row :gutter="10">
<div id="attendanceMain1"> <el-col :span="15">
<el-date-picker <el-date-picker
v-model="attTimeB" v-model="attTimeB"
type="datetimerange" type="datetimerange"
style="width: 100%"
range-separator="" range-separator=""
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
> />
</el-date-picker> </el-col>
<el-col :span="-1">
<el-button type="primary" style="margin-left: 15px" @click="getOneAttendancesByTime()"> <el-button type="primary" @click="getOneAttendancesByTime()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center"> <el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-search /> <icon-pinnacle-search />
</el-icon> </el-icon>
<span style="vertical-align: center">查询</span> <span style="vertical-align: center">查询</span>
</el-button> </el-button>
<el-button type="warning" @click="resetParam()">
<el-button type="warning" style="margin-left: 15px" @click="resetParam()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center"> <el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-reset /> <icon-pinnacle-reset />
</el-icon> </el-icon>
<span style="vertical-align: center">重置</span> <span style="vertical-align: center">重置</span>
</el-button> </el-button>
<el-button type="success" @click="handleAdd()" style="margin-left: 15px"> <el-button type="success" @click="handleAdd()">
<el-icon :size="SIZE_ICON_SM()" style="vertical-align: center"> <el-icon :size="SIZE_ICON_SM()" style="vertical-align: center">
<icon-pinnacle-click /> <icon-pinnacle-click />
</el-icon> </el-icon>
<span style="vertical-align: center">打卡</span> <span style="vertical-align: center">打卡</span>
</el-button> </el-button>
</div> </el-col>
</el-row>
<div id="attendanceMain2"> <el-table
<el-table :data="tableData"
:data="tableData" border
border :header-cell-style="{ background: 'aliceblue' }"
style="width: 80%" style="margin-top: 10px"
:header-cell-style="{ background: 'aliceblue' }" >
> <el-table-column prop="user.username" label="用户名" align="center"></el-table-column>
<el-table-column prop="id" label="考勤编号" width="400"></el-table-column> <el-table-column prop="attTime" label="考勤时间" width="250" align="center">
<el-table-column prop="user.username" label="用户名" width="180"></el-table-column> <template #default="scope">
<el-table-column prop="attTime" label="考勤时间"> {{ formatDate(scope.row.attTime) }}
<template #default="scope"> </template>
{{ formatDate(scope.row.attTime) }} </el-table-column>
</template> <el-table-column prop="status" label="考勤状态" width="150" align="center">
</el-table-column> <template v-slot="scope">
<el-table-column prop="status" label="考勤状态"> <el-tag
<template v-slot="scope"> :type="
<el-tag scope.row.status === 1
:type=" ? 'success'
scope.row.status === 1 : scope.row.status === 2
? 'success' ? ''
: scope.row.status === 2 : scope.row.status === 3
? '' ? 'warning'
: scope.row.status === 3 : 'danger'
? 'warning' "
: 'danger' disable-transitions
" >{{
disable-transitions scope.row.status === 1
>{{ ? '签到'
scope.row.status === 1 : scope.row.status === 2
? '签' ? '签退'
: scope.row.status === 2 : scope.row.status === 3
? '签退' ? '迟到'
: scope.row.status === 3 : '异常'
? '迟到' }}
: '异常' </el-tag>
}} </template>
</el-tag> </el-table-column>
</template> </el-table>
</el-table-column> <el-dialog
</el-table> v-model="dialogFormVisible"
</div> title="考勤信息"
width="25%"
:close-on-click-modal="false"
:show-close="false"
>
<el-form ref="ruleForm" :model="form" :label-width="formLabelWidth">
<el-form-item label="考勤时间" v-model="attTime" prop="attTime">
<el-date-picker v-model="nowTime" type="datetime" disabled style="width: 200px" />
</el-form-item>
</el-form>
<div class="demo-pagination-block"></div> <template #footer>
<div> <span class="dialog-footer">
<el-dialog <el-button type="primary" @click="submitForm()">确认</el-button>
v-model="dialogFormVisible" <el-button @click="cancel">取消</el-button>
title="考勤信息" </span>
width="25%" </template>
:close-on-click-modal="false" </el-dialog>
:show-close="false"
>
<el-form ref="ruleForm" :model="form" :label-width="formLabelWidth">
<el-form-item label="考勤时间" v-model="attTime" prop="attTime">
<div class="block">
<el-date-picker
v-model="nowTime"
type="datetime"
disabled
style="width: 200px"
/>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="submitForm()">确认</el-button>
<el-button @click="cancel">取消</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -112,7 +98,6 @@ import { SIZE_ICON_SM, SIZE_ICON_XL } from '@/constants/Common.constants.js'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css' import 'element-plus/theme-chalk/el-message.css'
import _ from 'lodash' import _ from 'lodash'
import '@/assets/css/attendance.css'
import request from '@/services' import request from '@/services'
export default { export default {