|
|
@@ -0,0 +1,186 @@
|
|
|
+<template>
|
|
|
+ <my-drawer
|
|
|
+ class="sop-dialog"
|
|
|
+ :visible="visible"
|
|
|
+ header="打卡明细"
|
|
|
+ size="80%"
|
|
|
+ attach="body"
|
|
|
+ :closeOnOverlayClick="false"
|
|
|
+ :close-btn="true"
|
|
|
+ :footer="false"
|
|
|
+ @close="emit('update:visible', false)"
|
|
|
+ >
|
|
|
+ <div class="">
|
|
|
+ <t-collapse class="sop-step-mid" defaultExpandAll>
|
|
|
+ <t-collapse-panel disabled>
|
|
|
+ <t-form colon label-width="72px">
|
|
|
+ <t-row :gutter="[0, 4]">
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="项目单号">{{ row.crmNo }}</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="姓名">{{ row.archivesInfo }}</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="项目角色">{{
|
|
|
+ roleTypeFilter(row.roleType)
|
|
|
+ }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="所属供应商" label-width="100px">{{ row.supplierName }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="sop流水号">{{
|
|
|
+ row.sopNo
|
|
|
+ }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="客户名称">{{
|
|
|
+ row.customName
|
|
|
+ }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="有效出勤">{{
|
|
|
+ row.actualDays
|
|
|
+ }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="考试开始时间" label-width="100px">{{
|
|
|
+ timestampFilter(row.approachTime)
|
|
|
+ }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="考试结束时间" label-width="100px">{{
|
|
|
+ timestampFilter(row.departureTime)
|
|
|
+ }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <!-- <t-col :span="3">-->
|
|
|
+ <!-- <t-form-item label="实施产品">{{-->
|
|
|
+ <!-- row.productName-->
|
|
|
+ <!-- }}-->
|
|
|
+ <!-- </t-form-item>-->
|
|
|
+ <!-- </t-col>-->
|
|
|
+ <t-col :span="3">
|
|
|
+ <t-form-item label="服务单元">{{
|
|
|
+ row.serviceUnitName
|
|
|
+ }}
|
|
|
+ </t-form-item>
|
|
|
+ </t-col>
|
|
|
+ </t-row>
|
|
|
+ </t-form>
|
|
|
+ </t-collapse-panel>
|
|
|
+ </t-collapse>
|
|
|
+ <div style="margin-bottom: 20px">
|
|
|
+ <t-button variant="outline">
|
|
|
+ <template #icon>
|
|
|
+ <svg-icon name="effective-attendance" color="#00B42A"/>
|
|
|
+ </template
|
|
|
+ >
|
|
|
+ 有效出勤 {{ row.actualDays }}天
|
|
|
+ </t-button>
|
|
|
+ <t-button variant="outline">
|
|
|
+ <template #icon>
|
|
|
+ <svg-icon name="working-hours" color="#262626"/>
|
|
|
+ </template
|
|
|
+ >
|
|
|
+ 共计工时 {{ row.workHours }}天
|
|
|
+ </t-button>
|
|
|
+ <t-button variant="outline">
|
|
|
+ <template #icon>
|
|
|
+ <svg-icon name="anomalies" color="#F53F3F"/>
|
|
|
+ </template
|
|
|
+ >
|
|
|
+ 异常共计 {{ row.exceptionCount }}天
|
|
|
+ </t-button>
|
|
|
+ </div>
|
|
|
+ <t-table
|
|
|
+ size="small"
|
|
|
+ row-key="id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="tableData"
|
|
|
+ bordered
|
|
|
+ :pagination="{
|
|
|
+ defaultCurrent: 1,
|
|
|
+ defaultPageSize: 20,
|
|
|
+
|
|
|
+ total: pagination.total,
|
|
|
+ current: pagination.pageNumber,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template #signIn="{ col, row }">
|
|
|
+ {{ row.signInTime ? timestampFilter(row[col.colKey], 'tt') + row.signInAddress : '异常' }}
|
|
|
+ </template>
|
|
|
+ <template #signOut="{ col, row }">
|
|
|
+ {{ row.signOutTime ? timestampFilter(row[col.colKey], 'tt') + row.signOutAddress : '异常' }}
|
|
|
+ </template>
|
|
|
+ <template #workHours="{ col, row }">
|
|
|
+ {{ row.signOutTime && row.signInTime ? ((row.signOutTime - row.signInTime) / 1000 / 60 / 60).toFixed(2) : '' }}
|
|
|
+ </template>
|
|
|
+ </t-table>
|
|
|
+ <t-space class="sop-step-footer" style="flex-direction: row">
|
|
|
+ <t-button theme="primary" @click="emit('update:visible', false)"
|
|
|
+ >返回
|
|
|
+ </t-button
|
|
|
+ >
|
|
|
+ </t-space>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </my-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="DetailDialog">
|
|
|
+import {timestampFilter, roleTypeFilter, customerTypeFilter, attendanceSubmitStatusFilter} from '@/utils/filter';
|
|
|
+import {computed, reactive, watch} from 'vue';
|
|
|
+import useFetchTable from "@/hooks/useFetchTable";
|
|
|
+import {detail} from "@/api/work-hours";
|
|
|
+import {randomCode} from "@/utils/tool";
|
|
|
+
|
|
|
+const emit = defineEmits(['update:visible', 'confirm']);
|
|
|
+const props = defineProps({
|
|
|
+ visible: Boolean,
|
|
|
+ row: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+const columns = [
|
|
|
+ {colKey: 'signDate', title: '日期', width: 100},
|
|
|
+ {colKey: 'signInTime', title: '签到', cell: 'signIn',width: 160},
|
|
|
+ {colKey: 'signOutTime', title: '签退', width: 160, cell: 'signOut'},
|
|
|
+ {colKey: 'workHours', title: '工时(小时)', width: 100, cell: 'workHours'},
|
|
|
+];
|
|
|
+
|
|
|
+const params = computed(() => {
|
|
|
+ return {
|
|
|
+ sopNo: props.row.sopNo,
|
|
|
+ archivesId: props.row.archivesId,
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+const {pagination, tableData, fetchData} = useFetchTable(
|
|
|
+ detail,
|
|
|
+ {
|
|
|
+ params,
|
|
|
+ }, false
|
|
|
+);
|
|
|
+
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.visible,
|
|
|
+ (val) => {
|
|
|
+ if (val)
|
|
|
+
|
|
|
+ fetchData()
|
|
|
+
|
|
|
+ }
|
|
|
+);
|
|
|
+</script>
|
shudonghui
