|
|
@@ -1,7 +1,377 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive, ref, nextTick } from 'vue'
|
|
|
+import { ColumnProps } from '@/components/TableBase/interface/index'
|
|
|
+import {
|
|
|
+ Overtime_User_list,
|
|
|
+ Overtime_Stat,
|
|
|
+ Overtime_Add,
|
|
|
+ Overtime_Del,
|
|
|
+ Overtime_Edit
|
|
|
+} from '@/api/workAttendance/index'
|
|
|
+import { User_List } from '@/api/user/index'
|
|
|
+import { UpFileToken } from '@/api/public/index'
|
|
|
+import Dialog from '@/components/dialog/Dialog.vue'
|
|
|
+import Drawer from '@/components/Drawer/index.vue'
|
|
|
+import { Edit, Delete, ZoomIn, Download, Plus } from '@element-plus/icons-vue'
|
|
|
+import type {
|
|
|
+ FormInstance,
|
|
|
+ FormRules,
|
|
|
+ UploadFile,
|
|
|
+ UploadInstance,
|
|
|
+ UploadProps,
|
|
|
+ UploadRawFile,
|
|
|
+ UploadFiles
|
|
|
+} from 'element-plus'
|
|
|
+import { ElMessageBox, ElMessage } from 'element-plus'
|
|
|
+import { floatReg } from '@/views/salary/salary/relus'
|
|
|
+import { GlobalStore } from '@/stores/index'
|
|
|
+const globalStore = GlobalStore()
|
|
|
+
|
|
|
+const TableRef = ref()
|
|
|
+const columns: ColumnProps[] = [
|
|
|
+ { prop: 'T_start_time', label: '开始时间' },
|
|
|
+ { prop: 'T_end_time', label: '结束时间' },
|
|
|
+ { prop: 'T_duration', label: '时长', name: 'T_duration' },
|
|
|
+ { prop: 'T_State', label: '审核', name: 'T_State' },
|
|
|
+ { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
|
|
|
+]
|
|
|
+const columns_Stat: ColumnProps[] = [
|
|
|
+ { prop: 'T_duration', label: '时长' },
|
|
|
+ { prop: 'RemainingTime', label: '剩余时长' },
|
|
|
+ { prop: 'T_type_name', label: '事项' },
|
|
|
+ { prop: 'T_approver_name', label: '处理人' },
|
|
|
+ { prop: 'UpdateTime', label: '时间' }
|
|
|
+]
|
|
|
+const initParam = {
|
|
|
+ User_tokey: globalStore.GET_User_tokey
|
|
|
+}
|
|
|
+const openDrawerOvertime = (str: string, row: any) => {
|
|
|
+ drawerRef.value.openDrawer()
|
|
|
+ if (str === 'edit') {
|
|
|
+ // isNew = false
|
|
|
+ // nextTick(() => {
|
|
|
+ // form.value = { ...row }
|
|
|
+ // uuid = row.T_approver
|
|
|
+ // form.value.T_approver = row.T_user_name
|
|
|
+ // form.value.T_id = row.Id
|
|
|
+ // })
|
|
|
+ }
|
|
|
+}
|
|
|
+const OvertimeDelete = (row: any) => {}
|
|
|
+const AddOvertime = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ formEl.validate(async valid => {
|
|
|
+ if (valid) {
|
|
|
+ let res: any = {}
|
|
|
+ form.value.T_duration = form.value.T_duration * 60
|
|
|
+ if (isNew) {
|
|
|
+ res = await Overtime_Add({ ...form.value, T_approver: uuid })
|
|
|
+ } else {
|
|
|
+ res = await Overtime_Edit({ ...form.value, T_approver: uuid })
|
|
|
+ }
|
|
|
+ if (res.Code === 200) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: `${isNew ? '申请' : '修改'}成功！`
|
|
|
+ })
|
|
|
+ nextTick(() => {
|
|
|
+ drawerRef.value.closeDrawer()
|
|
|
+ TableRef.value.getTableList()
|
|
|
+ resetForm(ruleFormRef.value)
|
|
|
+ isNew = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// Drawer
|
|
|
+const drawerRef = ref()
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
+type Fn = () => void
|
|
|
+const callbackDrawer = (done: Fn) => {
|
|
|
+ resetForm(ruleFormRef.value)
|
|
|
+ done()
|
|
|
+}
|
|
|
+const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ formEl.resetFields()
|
|
|
+}
|
|
|
+const validate_float = (rule: any, value: any, callback: any) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入加班时长'))
|
|
|
+ } else {
|
|
|
+ if (floatReg.test(value) || /\d+/.test(value)) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback(new Error('时间必须是数字或小数'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const rules = reactive<FormRules>({
|
|
|
+ T_type: [{ required: true, message: '请选择请假类型', trigger: 'blur' }],
|
|
|
+ T_start_time: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
|
|
|
+ T_end_time: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
|
|
|
+ T_duration: [{ required: true, validator: validate_float, trigger: 'blur' }],
|
|
|
+ T_approver: [{ required: true, message: '请选择审批人', trigger: 'blur' }]
|
|
|
+})
|
|
|
+let uuid = ''
|
|
|
+const form = ref({
|
|
|
+ T_type: '',
|
|
|
+ T_start_time: '',
|
|
|
+ T_end_time: '',
|
|
|
+ T_duration: 0,
|
|
|
+ T_text: '',
|
|
|
+ T_approver: '',
|
|
|
+ T_id: ''
|
|
|
+})
|
|
|
+const formLabelWidth = ref('100px')
|
|
|
+let isNew = true
|
|
|
+const selectApprover = () => {
|
|
|
+ dialog.value.DialogOpen()
|
|
|
+}
|
|
|
+
|
|
|
+// dialog
|
|
|
+const dialog = ref()
|
|
|
+const search = ref('')
|
|
|
+const tableApproverRef = ref()
|
|
|
+const Dialogcolumns: ColumnProps[] = [{ prop: 'T_name', label: '名字', name: 'T_name' }]
|
|
|
+const approverInitParam = {
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ T_name: '',
|
|
|
+ T_dept_leader: 1
|
|
|
+}
|
|
|
+const searchHandle = () => {
|
|
|
+ approverInitParam.T_name = search.value
|
|
|
+ tableApproverRef.value.searchTable()
|
|
|
+}
|
|
|
+const getApproverInfo = (row: any) => {
|
|
|
+ uuid = row.T_uuid
|
|
|
+ form.value.T_approver = row.T_name
|
|
|
+ dialog.value.DialogClose()
|
|
|
+}
|
|
|
+
|
|
|
+const onResize = () => {
|
|
|
+ const height = document.documentElement.clientHeight
|
|
|
+ return height / 2
|
|
|
+}
|
|
|
+
|
|
|
+// upload file
|
|
|
+let uploadData = { token: '' }
|
|
|
+const dialogImageUrl = ref('')
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const disabled = ref(false)
|
|
|
+// const fileList = ref<UploadUserFile[]>([])
|
|
|
+const handlePictureCardPreview = (file: UploadFile) => {
|
|
|
+ console.log(file)
|
|
|
+ dialogImageUrl.value = file.url as string
|
|
|
+ dialogVisible.value = true
|
|
|
+}
|
|
|
+const beforeUpload = async (file: any) => {
|
|
|
+ let reg = /^image/g
|
|
|
+ if (!reg.test(file.type)) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: '必须上传图片!!'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const res: any = await UpFileToken({ User_tokey: globalStore.GET_User_tokey })
|
|
|
+ uploadData.token = res.Data
|
|
|
+}
|
|
|
+const handleExceed: UploadProps['onExceed'] = (files: any) => {
|
|
|
+ console.log(files)
|
|
|
+ // upload.value!.clearFiles()
|
|
|
+ // const file = files[0] as UploadRawFile
|
|
|
+ // file.uid = genFileId()
|
|
|
+ // upload.value!.handleStart(file)
|
|
|
+}
|
|
|
+const onSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
|
|
+ console.log(response, uploadFile, uploadFiles)
|
|
|
+}
|
|
|
+const onError = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
|
|
+ console.log(error, uploadFile, uploadFiles)
|
|
|
+}
|
|
|
+// const handleRemove = (file: UploadFile) => {
|
|
|
+// console.log(file)
|
|
|
+// }
|
|
|
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
|
|
+ console.log(uploadFile, uploadFiles)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
<template>
|
|
|
- <div>我的加班</div>
|
|
|
-</template>
|
|
|
+ <el-row :gutter="24" class="h-100">
|
|
|
+ <el-col :span="12" class="padding-right-0 h-100">
|
|
|
+ <TableBase
|
|
|
+ ref="TableRef"
|
|
|
+ :columns="columns"
|
|
|
+ :requestApi="Overtime_User_list"
|
|
|
+ :initParam="initParam"
|
|
|
+ layout="total,sizes,prev, pager, next"
|
|
|
+ >
|
|
|
+ <template #table-header>
|
|
|
+ <div class="table-header">
|
|
|
+ <h4>我的加班</h4>
|
|
|
+ <el-button type="primary" @click="openDrawerOvertime">申请加班</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #T_duration="{ row }"> {{ row.T_duration }}分钟 </template>
|
|
|
+ <template #T_State="{ row }">
|
|
|
+ <el-tag v-if="row.T_State === 1" type="success">通过</el-tag>
|
|
|
+ <el-tag v-else-if="row.T_State === 2" type="warning">未通过</el-tag>
|
|
|
+ <el-tag v-else type="danger">待审核</el-tag>
|
|
|
+ </template>
|
|
|
+ <template #right="{ row }">
|
|
|
+ <el-button link type="primary" size="small" :icon="Edit" @click="openDrawerOvertime('edit', row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button link type="danger" size="small" :icon="Delete" @click="OvertimeDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </TableBase></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="12" class="h-100" style="overflow: hidden">
|
|
|
+ <TableBase
|
|
|
+ ref="TableRef"
|
|
|
+ :columns="columns_Stat"
|
|
|
+ :requestApi="Overtime_Stat"
|
|
|
+ :initParam="initParam"
|
|
|
+ layout="total,sizes,prev, pager, next"
|
|
|
+ >
|
|
|
+ <template #table-header="{ pageable }">
|
|
|
+ <el-button text
|
|
|
+ ><h4>剩余总时长：{{ pageable.RemainingTime }}</h4></el-button
|
|
|
+ ></template
|
|
|
+ >
|
|
|
+ <template #T_name="{ row }">
|
|
|
+ <el-button type="primary" text>{{ row.T_name }}</el-button>
|
|
|
+ </template>
|
|
|
+ </TableBase>
|
|
|
+ </el-col>
|
|
|
+ <Drawer ref="drawerRef" :handleClose="callbackDrawer">
|
|
|
+ <template #header="{ params }">
|
|
|
+ <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 角色</h4>
|
|
|
+ </template>
|
|
|
+ <el-form ref="ruleFormRef" :model="form" :rules="rules">
|
|
|
+ <el-form-item label="开始时间：" :label-width="formLabelWidth" prop="T_start_time">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%"
|
|
|
+ class="my-date-picker"
|
|
|
+ v-model="form.T_start_time"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择开始时间"
|
|
|
+ format="YYYY-MM-DD hh:mm:ss"
|
|
|
+ value-format="YYYY-MM-DD hh:mm:ss"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间：" :label-width="formLabelWidth" prop="T_end_time">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 100%"
|
|
|
+ class="my-date-picker"
|
|
|
+ v-model="form.T_end_time"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择结束时间"
|
|
|
+ format="YYYY-MM-DD hh:mm:ss"
|
|
|
+ value-format="YYYY-MM-DD hh:mm:ss"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="加班时长：" :label-width="formLabelWidth" prop="T_duration">
|
|
|
+ <el-input v-model.number="form.T_duration" autocomplete="off" placeholder="请假时长" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="取证：" :label-width="formLabelWidth" prop="T_duration">
|
|
|
+ <el-upload
|
|
|
+ action="https://up-z2.qiniup.com"
|
|
|
+ list-type="picture-card"
|
|
|
+ :limit="1"
|
|
|
+ :auto-upload="true"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :on-success="onSuccess"
|
|
|
+ :on-error="onError"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :data="uploadData"
|
|
|
+ >
|
|
|
+ <el-icon><Plus /></el-icon>
|
|
|
|
|
|
-<script setup lang="ts"></script>
|
|
|
+ <!-- <template #file="{ file }">
|
|
|
+ <div>
|
|
|
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
|
+ <el-icon><zoom-in /></el-icon>
|
|
|
+ </span>
|
|
|
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
|
|
+ <el-icon><Download /></el-icon>
|
|
|
+ </span>
|
|
|
+ <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template> -->
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog v-model="dialogVisible">
|
|
|
+ <img w-full :src="dialogImageUrl" class="full-img" alt="Preview Image" />
|
|
|
+ </el-dialog>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容：" :label-width="formLabelWidth">
|
|
|
+ <el-input
|
|
|
+ v-model="form.T_text"
|
|
|
+ autocomplete="off"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 4, maxRows: 6 }"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="审批：" :label-width="formLabelWidth" prop="T_approver">
|
|
|
+ <el-input v-model="form.T_approver" autocomplete="off" placeholder="审批人" @focus="selectApprover" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label-width="formLabelWidth">
|
|
|
+ <el-button v-if="isNew" color="#626aef" @click="AddOvertime(ruleFormRef)">添加</el-button>
|
|
|
+ <el-button v-else color="#626aef" @click="AddOvertime(ruleFormRef)">修改</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </Drawer>
|
|
|
+ <Dialog ref="dialog" width="30%">
|
|
|
+ <template #header>
|
|
|
+ <h3>选择审批人</h3>
|
|
|
+ </template>
|
|
|
+ <TableBase
|
|
|
+ ref="tableApproverRef"
|
|
|
+ :columns="Dialogcolumns"
|
|
|
+ :initParam="approverInitParam"
|
|
|
+ :requestApi="User_List"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :onResize="onResize"
|
|
|
+ >
|
|
|
+ <template #table-header>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="20" class="d-flex">
|
|
|
+ <span class="inline-flex">账户查询：</span>
|
|
|
+ <el-input v-model="search" type="text" class="w-50 m-2" />
|
|
|
+ <el-button type="primary" @click="searchHandle">搜索</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ <template #T_name="{ row }">
|
|
|
+ <el-button type="primary" link @click="getApproverInfo(row)">{{ row.T_name }}</el-button>
|
|
|
+ </template>
|
|
|
+ </TableBase>
|
|
|
+ </Dialog>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.table-header {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.full-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
@sun-chaoqun