Commit fb06bc8357972af6aae9774bd5f4d4c11d78bec6
1 parent
b4e86430
bpm：增加 OA 请假的详情
Showing
4 changed files
with
58 additions
and
59 deletions
yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
| @@ -135,7 +135,15 @@ VXETable.setup({ | @@ -135,7 +135,15 @@ VXETable.setup({ | ||
| 135 | }) | 135 | }) |
| 136 | // 自定义全局的格式化处理函数 | 136 | // 自定义全局的格式化处理函数 |
| 137 | VXETable.formats.mixin({ | 137 | VXETable.formats.mixin({ |
| 138 | - // 格式日期，默认 yyyy-MM-dd HH:mm:ss | 138 | + // 格式精简日期，默认 yyyy-MM-dd HH:mm:ss |
| 139 | + formatDay({ cellValue }, format) { | ||
| 140 | + if (cellValue != null) { | ||
| 141 | + return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd') | ||
| 142 | + } else { | ||
| 143 | + return '' | ||
| 144 | + } | ||
| 145 | + }, | ||
| 146 | + // 格式完整日期，默认 yyyy-MM-dd HH:mm:ss | ||
| 139 | formatDate({ cellValue }, format) { | 147 | formatDate({ cellValue }, format) { |
| 140 | if (cellValue != null) { | 148 | if (cellValue != null) { |
| 141 | return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss') | 149 | return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss') |
yudao-ui-admin-vue3/src/views/bpm/oa/leave/detail.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="app-container"> | ||
| 3 | - <!-- 对话框(添加 / 修改) --> | ||
| 4 | - <el-form ref="form" :model="form" label-width="100px"> | ||
| 5 | - <el-form-item label="开始时间：" prop="startTime"> | ||
| 6 | - {{ formatDate(form.startTime, '{y}-{m}-{d}') }} | ||
| 7 | - </el-form-item> | ||
| 8 | - <el-form-item label="结束时间：" prop="endTime"> | ||
| 9 | - {{ formatDate(form.endTime, '{y}-{m}-{d}') }} | ||
| 10 | - </el-form-item> | ||
| 11 | - <el-form-item label="请假类型：" prop="type"> | ||
| 12 | - <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type" /> | ||
| 13 | - </el-form-item> | ||
| 14 | - <el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item> | ||
| 15 | - </el-form> | ||
| 16 | - </div> | 2 | + <ContentWrap> |
| 3 | + <!-- 详情 --> | ||
| 4 | + <Descriptions :schema="allSchemas.detailSchema" :data="formData" /> | ||
| 5 | + </ContentWrap> | ||
| 17 | </template> | 6 | </template> |
| 18 | 7 | ||
| 19 | <script lang="ts" setup> | 8 | <script lang="ts" setup> |
| 20 | import { onMounted, ref } from 'vue' | 9 | import { onMounted, ref } from 'vue' |
| 21 | -import { ElMessage } from 'element-plus' | 10 | +// 业务相关的 import |
| 11 | +import * as LeaveApi from '@/api/bpm/leave' | ||
| 12 | +import { allSchemas } from '@/views/bpm/oa/leave/leave.data' | ||
| 22 | 13 | ||
| 23 | -import { getLeaveApi } from '@/api/bpm/leave' | ||
| 24 | -import { DICT_TYPE } from '@/utils/dict' | ||
| 25 | -import { formatDate } from '@/utils/formatTime' | ||
| 26 | -import { useRouter } from 'vue-router' | ||
| 27 | -const router = useRouter() | ||
| 28 | -// 请假编号 | ||
| 29 | -const id = ref() | 14 | +const { query } = useRoute() // 查询参数 |
| 15 | +const message = useMessage() // 消息弹窗 | ||
| 16 | + | ||
| 17 | +const id = ref() // 请假编号 | ||
| 30 | // 表单参数 | 18 | // 表单参数 |
| 31 | -const form = ref({ | 19 | +const formData = ref({ |
| 32 | startTime: undefined, | 20 | startTime: undefined, |
| 33 | endTime: undefined, | 21 | endTime: undefined, |
| 34 | type: undefined, | 22 | type: undefined, |
| 35 | reason: undefined | 23 | reason: undefined |
| 36 | }) | 24 | }) |
| 37 | -/** 获得请假信息 */ | ||
| 38 | -const getDetail = () => { | ||
| 39 | - getLeaveApi(id.value).then((response) => { | ||
| 40 | - form.value = response.data | ||
| 41 | - }) | ||
| 42 | -} | 25 | + |
| 43 | onMounted(() => { | 26 | onMounted(() => { |
| 44 | - id.value = router.currentRoute.value.query.id | 27 | + id.value = query.id |
| 45 | if (!id.value) { | 28 | if (!id.value) { |
| 46 | - ElMessage({ | ||
| 47 | - type: 'error', | ||
| 48 | - message: '未传递 id 参数，无法查看 OA 请假信息' | ||
| 49 | - }) | 29 | + message.error('未传递 id 参数，无法查看 OA 请假信息') |
| 50 | return | 30 | return |
| 51 | } | 31 | } |
| 52 | - getDetail() | 32 | + // 获得请假信息 |
| 33 | + LeaveApi.getLeaveApi(id.value).then((data) => { | ||
| 34 | + formData.value = data | ||
| 35 | + }) | ||
| 53 | }) | 36 | }) |
| 54 | </script> | 37 | </script> |
yudao-ui-admin-vue3/src/views/bpm/oa/leave/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <XTable @register="registerTable"> | ||
| 3 | - <template #toolbar_buttons> | ||
| 4 | - <!-- 操作：发起请假 --> | ||
| 5 | - <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" /> | ||
| 6 | - </template> | ||
| 7 | - <template #actionbtns_default="{ row }"> | ||
| 8 | - <!-- 操作: 取消请假 --> | ||
| 9 | - <XTextButton | ||
| 10 | - preIcon="ep:delete" | ||
| 11 | - title="取消请假" | ||
| 12 | - v-hasPermi="['bpm:oa-leave:create']" | ||
| 13 | - v-if="row.result === 1" | ||
| 14 | - @click="cancelLeave(row)" | ||
| 15 | - /> | ||
| 16 | - <!-- 操作: 详情 --> | ||
| 17 | - <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" /> | ||
| 18 | - <!-- 操作: 审批进度 --> | ||
| 19 | - <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" /> | ||
| 20 | - </template> | ||
| 21 | - </XTable> | 2 | + <ContentWrap> |
| 3 | + <XTable @register="registerTable"> | ||
| 4 | + <template #toolbar_buttons> | ||
| 5 | + <!-- 操作：发起请假 --> | ||
| 6 | + <XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" /> | ||
| 7 | + </template> | ||
| 8 | + <template #actionbtns_default="{ row }"> | ||
| 9 | + <!-- 操作: 取消请假 --> | ||
| 10 | + <XTextButton | ||
| 11 | + preIcon="ep:delete" | ||
| 12 | + title="取消请假" | ||
| 13 | + v-hasPermi="['bpm:oa-leave:create']" | ||
| 14 | + v-if="row.result === 1" | ||
| 15 | + @click="cancelLeave(row)" | ||
| 16 | + /> | ||
| 17 | + <!-- 操作: 详情 --> | ||
| 18 | + <XTextButton preIcon="ep:delete" :title="t('action.detail')" @click="handleDetail(row)" /> | ||
| 19 | + <!-- 操作: 审批进度 --> | ||
| 20 | + <XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" /> | ||
| 21 | + </template> | ||
| 22 | + </XTable> | ||
| 23 | + </ContentWrap> | ||
| 22 | </template> | 24 | </template> |
| 23 | 25 | ||
| 24 | <script setup lang="ts"> | 26 | <script setup lang="ts"> |
yudao-ui-admin-vue3/src/views/bpm/oa/leave/leave.data.ts
| @@ -29,17 +29,23 @@ const crudSchemas = reactive<VxeCrudSchema>({ | @@ -29,17 +29,23 @@ const crudSchemas = reactive<VxeCrudSchema>({ | ||
| 29 | { | 29 | { |
| 30 | title: t('common.startTimeText'), | 30 | title: t('common.startTimeText'), |
| 31 | field: 'startTime', | 31 | field: 'startTime', |
| 32 | - formatter: 'formatDate', | 32 | + formatter: 'formatDay', |
| 33 | table: { | 33 | table: { |
| 34 | width: 180 | 34 | width: 180 |
| 35 | + }, | ||
| 36 | + detail: { | ||
| 37 | + dateFormat: 'YYYY-MM-DD' | ||
| 35 | } | 38 | } |
| 36 | }, | 39 | }, |
| 37 | { | 40 | { |
| 38 | title: t('common.endTimeText'), | 41 | title: t('common.endTimeText'), |
| 39 | field: 'endTime', | 42 | field: 'endTime', |
| 40 | - formatter: 'formatDate', | 43 | + formatter: 'formatDay', |
| 41 | table: { | 44 | table: { |
| 42 | width: 180 | 45 | width: 180 |
| 46 | + }, | ||
| 47 | + detail: { | ||
| 48 | + dateFormat: 'YYYY-MM-DD' | ||
| 43 | } | 49 | } |
| 44 | }, | 50 | }, |
| 45 | { | 51 | { |