|
|
<template>
|
|
|
<div>
|
|
|
<card-container>
|
|
|
<vxe-toolbar print custom export>
|
|
|
<template #buttons>
|
|
|
<el-date-picker
|
|
|
:value="(select.start_date && select.end_date) ? [select.start_date,select.end_date] : []"
|
|
|
type="daterange"
|
|
|
size="small"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
style="width: 260px;"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
@input="e => (e && e.length === 2) ? (select.start_date = e[0],select.end_date = e[1]) : (select.start_date = '',select.end_date = '')">
|
|
|
</el-date-picker>
|
|
|
<el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 6px;" @click="getList">搜索</el-button>
|
|
|
</template>
|
|
|
</vxe-toolbar>
|
|
|
<vxe-table
|
|
|
ref="table"
|
|
|
stripe
|
|
|
style="margin-top: 10px;"
|
|
|
:loading="loading"
|
|
|
keep-source
|
|
|
show-overflow
|
|
|
:max-height="1400"
|
|
|
:min-height="400"
|
|
|
:export-config="{}"
|
|
|
:print-config="{}"
|
|
|
:column-config="{ resizable: true }"
|
|
|
:scroll-y="{ enabled: true, gt: 100 }"
|
|
|
:expand-config="{
|
|
|
visibleMethod: () => false,
|
|
|
trigger: 'manual'
|
|
|
}"
|
|
|
:data="tableData"
|
|
|
>
|
|
|
<vxe-column type="expand" title="关联调休" align="center" width="80">
|
|
|
<template #default="{ row }">
|
|
|
<el-button type="primary"
|
|
|
size="mini"
|
|
|
icon="el-icon-zoom-in"
|
|
|
@click="toggleExpand(row)">{{ row.qingqiujia instanceof Array ? row.qingqiujia.length : 0 }}</el-button>
|
|
|
</template>
|
|
|
<template #content="{ row }">
|
|
|
<div>
|
|
|
<h4 style="text-indent: 24px;"><i class="el-icon-alarm-clock"></i> 请休假</h4>
|
|
|
<vxe-table style="width: calc(100% - 80px);" :max-height="400" align="center" show-overflow :data="row.qingqiujia">
|
|
|
<vxe-column type="seq" width="58" align="center" />
|
|
|
<vxe-column title="请假类别" width="100" field="qingjialeibie"></vxe-column>
|
|
|
<vxe-column title="开始时间" width="180" field="kaishishijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
|
|
|
<vxe-column title="结束时间" width="180" field="jieshushijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
|
|
|
<vxe-column title="请假时间（时）" width="120" field="qingjiashijian"></vxe-column>
|
|
|
<vxe-column title="请假天数" width="120" field="day"></vxe-column>
|
|
|
<vxe-column title="实际开始时间" width="180" field="shijikaishishijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
|
|
|
<vxe-column title="实际结束时间" width="180" field="shijijieshushijian" :formatter="({ cellValue }) => cellValue ? $moment(cellValue).format('YYYY-MM-DD HH:mm') : ''" />
|
|
|
<vxe-column title="实际请假时间（时）" width="160" field="shijiqingjiashichang"></vxe-column>
|
|
|
<vxe-column title="实际请假天数" width="120" field="shijiqingjiatianshu"></vxe-column>
|
|
|
<vxe-column
|
|
|
min-width="80"
|
|
|
align="center"
|
|
|
field="operate"
|
|
|
title="操作"
|
|
|
fixed="right"
|
|
|
>
|
|
|
<template #default="{ row }">
|
|
|
<el-button plain type="success" size="mini" @click="detail(row)"
|
|
|
>查看</el-button>
|
|
|
</template>
|
|
|
</vxe-column>
|
|
|
</vxe-table>
|
|
|
</div>
|
|
|
</template>
|
|
|
</vxe-column>
|
|
|
<vxe-column type="seq" width="58" align="center" />
|
|
|
<vxe-column
|
|
|
min-width="180"
|
|
|
header-align="center"
|
|
|
field="jiabanleixing"
|
|
|
title="加班类型"
|
|
|
></vxe-column>
|
|
|
<vxe-column width="190" align="center" title="开始时间" field="kaishiriqi" />
|
|
|
<vxe-column width="190" align="center" title="结束时间" field="jieshushijian" />
|
|
|
<vxe-column min-width="140" align="center" title="原因说明" field="yuanyinshuoming" />
|
|
|
<!-- <vxe-column-->
|
|
|
<!-- width="80"-->
|
|
|
<!-- align="center"-->
|
|
|
<!-- field="status"-->
|
|
|
<!-- title="当前状态"-->
|
|
|
<!-- :formatter="({ cellValue }) => myStatus.get(cellValue)"-->
|
|
|
<!-- :export-method="-->
|
|
|
<!-- ({ row, column, options }) => myStatus.get(row['status'])-->
|
|
|
<!-- "-->
|
|
|
<!-- >-->
|
|
|
<!-- <template #default="{ row }">-->
|
|
|
<!-- <el-tag-->
|
|
|
<!-- size="mini"-->
|
|
|
<!-- :type="statusColor.get(row.status)"-->
|
|
|
<!-- effect="dark"-->
|
|
|
<!-- >{{ myStatus.get(row.status) }}</el-tag-->
|
|
|
<!-- >-->
|
|
|
<!-- </template>-->
|
|
|
<!-- </vxe-column>-->
|
|
|
<vxe-column
|
|
|
width="200"
|
|
|
align="center"
|
|
|
field="created_at"
|
|
|
title="发起日期"
|
|
|
:formatter="
|
|
|
({ cellValue }) =>
|
|
|
$moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
|
|
|
"
|
|
|
:export-method="
|
|
|
({ row, column, options }) =>
|
|
|
$moment(row['created_at']).format('YYYY-MM-DD HH:mm:ss')
|
|
|
"
|
|
|
></vxe-column>
|
|
|
<vxe-column
|
|
|
min-width="80"
|
|
|
align="center"
|
|
|
field="operate"
|
|
|
title="操作"
|
|
|
fixed="right"
|
|
|
>
|
|
|
<template #default="{ row }">
|
|
|
<el-button plain type="success" size="mini" @click="detail(row)"
|
|
|
>查看</el-button>
|
|
|
</template>
|
|
|
</vxe-column>
|
|
|
</vxe-table>
|
|
|
|
|
|
<el-pagination
|
|
|
style="margin-top: 10px"
|
|
|
@size-change="
|
|
|
(e) => {
|
|
|
select.page_size = e;
|
|
|
select.page = 1;
|
|
|
getList();
|
|
|
}
|
|
|
"
|
|
|
@current-change="
|
|
|
(e) => {
|
|
|
select.page = e;
|
|
|
getList();
|
|
|
}
|
|
|
"
|
|
|
:current-page.sync="select.page"
|
|
|
:page-sizes="[10, 20, 30, 50, 100]"
|
|
|
:page-size.sync="select.page_size"
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
:total="total"
|
|
|
></el-pagination>
|
|
|
</card-container>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getOvertimeHoliday } from "@/api/flow"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
myStatus: new Map([
|
|
|
[-1, "已退回"],
|
|
|
[0, "办理中"],
|
|
|
[1, "已完成"],
|
|
|
]),
|
|
|
statusColor: new Map([
|
|
|
[-1, "warning"],
|
|
|
[0, ""],
|
|
|
[1, "success"],
|
|
|
]),
|
|
|
loading: false,
|
|
|
tableData: [],
|
|
|
select: {
|
|
|
page: 1,
|
|
|
page_size: 10,
|
|
|
start_date: this.$moment().subtract(1, 'months').format('YYYY-MM-DD'),
|
|
|
end_date: this.$moment().add(1, 'months').format('YYYY-MM-DD')
|
|
|
},
|
|
|
total: 0,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
toggleExpand (row) {
|
|
|
const $table = this.$refs.table
|
|
|
if ($table) {
|
|
|
$table.toggleRowExpand(row)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
detail(row) {
|
|
|
this.$router.push(
|
|
|
`/flow/detail?module_id=${row.custom_model_id||68}&flow_id=${row.belongs_id}`
|
|
|
);
|
|
|
},
|
|
|
async getList() {
|
|
|
this.loading = true;
|
|
|
try {
|
|
|
const res = await getOvertimeHoliday(this.select, false);
|
|
|
console.log(res);
|
|
|
this.tableData = res?.flows?.data || [];
|
|
|
this.total = res?.flows?.total ?? 0;
|
|
|
this.loading = false;
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
this.loading = false;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
created() {
|
|
|
this.getList()
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
if (this.$refs["table"] && this.$refs["toolbar"]) {
|
|
|
this.$refs["table"].connect(this.$refs["toolbar"]);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
</style>
|
