<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">发放季度：</span>
|
<el-select
|
style="width: 200px;"
|
@change="handleQuery"
|
v-model="searchForm.season"
|
placeholder="请选择"
|
@clear="clearSeason"
|
clearable
|
:disabled="searchForm.issueDate ? true : false"
|
|
>
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in jidu" :key="item.value" />
|
</el-select>
|
<span class="search_title ml10">发放月份：</span>
|
<el-date-picker
|
style="width: 200px;"
|
:disabled="searchForm.season ? true : false"
|
v-model="searchForm.issueDate"
|
@change="handleQuery"
|
@clear="clearIssueDaten"
|
type="month"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM"
|
placeholder="请选择月份"
|
clearable
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
|
>搜索</el-button
|
>
|
<el-button type="primary" @click="resetHandleQuery" style="margin-left: 10px"
|
>重置</el-button
|
>
|
</div>
|
<div>
|
<el-button @click="handleOut" icon="download">导出</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<div class="actions">
|
<div class="head" @click="handleQuery(1)">已领取劳保数量:{{statisticsObj.ylqNum}}</div>
|
<div class="head" @click="handleQuery(2)">未领取劳保数量: {{ statisticsObj.wlqNum }}</div>
|
<div class="head" @click="handleQuery(3)">超时已领取劳保数量: {{statisticsObj.csylqNum}}</div>
|
<div class="head" @click="handleQuery(4)">超时未领取劳保数量: {{statisticsObj.cswlqNum}}</div>
|
</div>
|
<el-table
|
ref="tableRef"
|
v-loading="tableLoading"
|
:data="tableData"
|
border
|
height="calc(100vh - 21em)"
|
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
>
|
<!-- 选择列 -->
|
<el-table-column
|
align="center"
|
type="selection"
|
width="55"
|
fixed="left"
|
/>
|
|
<!-- 序号列 -->
|
<el-table-column
|
align="center"
|
label="序号"
|
type="index"
|
width="60"
|
fixed="left"
|
/>
|
|
<!-- 固定列：姓名 -->
|
<el-table-column
|
label="姓名"
|
prop="staffName"
|
width="100"
|
show-overflow-tooltip
|
align="center"
|
fixed="left"
|
/>
|
|
<!-- 固定列：工号 -->
|
<el-table-column
|
label="工号"
|
prop="staffNo"
|
width="100"
|
show-overflow-tooltip
|
align="center"
|
fixed="left"
|
/>
|
|
<!-- 动态列：根据字典渲染 -->
|
<el-table-column
|
v-for="(dictItem, index) in sys_lavor_issue"
|
:key="dictItem.value"
|
:label="dictItem.label"
|
:prop="dictItem.value"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, reactive, toRefs, nextTick, getCurrentInstance } from 'vue'
|
import dayjs from "dayjs";
|
import {statisticsList, statistics} from "@/api/lavorissce/ledger.js";
|
import {ElMessageBox, ElMessage} from "element-plus";
|
const { proxy } = getCurrentInstance();
|
import { getCurrentMonth } from "@/utils/util"
|
|
const page = ref({
|
current: 1,
|
size: 100,
|
})
|
const total = ref(0)
|
// 响应式数据
|
const tableRef = ref(null)
|
const tableData = ref([])
|
const tableLoading = ref(false)
|
const { sys_lavor_issue } = proxy.useDict("sys_lavor_issue")
|
const data = reactive({
|
searchForm: {
|
season: getCurrentMonth(),
|
issueDate: "",
|
status: 0
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
const modalRef = ref();
|
const filesDia = ref();
|
const multipleList = ref([]);
|
const jidu = ref([
|
{
|
value: '1',
|
label: '第一季度'
|
},
|
{
|
value: '2',
|
label: '第二季度'
|
},
|
{
|
value: '3',
|
label: '第三季度'
|
},
|
{
|
value: '4',
|
label: '第四季度'
|
}
|
])
|
const clearSeason = () => {
|
console.log("req")
|
searchForm.value.season = ""
|
searchForm.value.issueDate = dayjs().format("YYYY-MM-DD");
|
}
|
|
const clearIssueDaten = () => {
|
searchForm.value.issueDate = ""
|
searchForm.value.season = getCurrentMonth()
|
}
|
const statisticsObj = ref({
|
ylqNum: 0, // 已领取数量
|
wlqNum: 0, // 未领取数量
|
csylqNum: 0, // 超时已领取数量
|
cswlqNum: 0 // 超时未领取数量
|
})
|
const resetHandleQuery = () => {
|
searchForm.value.issueDate = "";
|
searchForm.value.season = getCurrentMonth();
|
handleQuery(0)
|
};
|
|
/** 搜索按钮操作 */
|
const handleQuery = (status) => {
|
switch (status){
|
case 1:
|
searchForm.value.status = 1
|
break;
|
case 2:
|
searchForm.value.status = 2
|
break;
|
case 3:
|
searchForm.value.status = 3
|
break;
|
case 4:
|
searchForm.value.status = 4
|
break;
|
default:
|
searchForm.value.status = 0
|
}
|
getList();
|
getStatistics();
|
};
|
|
const getStatistics = () => {
|
statistics(searchForm.value).then(res => {
|
statisticsObj.value.cswlqNum = res.data.cswlqNum
|
statisticsObj.value.csylqNum = res.data.csylqNum
|
statisticsObj.value.ylqNum = res.data.ylqNum
|
statisticsObj.value.wlqNum = res.data.wlqNum
|
})
|
}
|
// 获取字典数据
|
const getList = async () => {
|
tableLoading.value = true;
|
const params = { ...searchForm.value};
|
statisticsList(params).then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data;
|
}).catch(err => {
|
tableLoading.value = false;
|
})
|
}
|
const handleOut = () => {
|
ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
proxy.download(`/lavorIssue/exportCopy`, {season: searchForm.value.season,issueDate: searchForm.value.issueDate}, "劳保台账.xlsx");
|
})
|
.catch(() => {
|
ElMessage.info("已取消");
|
});
|
};
|
|
// 事件处理函数
|
const handleSelectionChange = (selection) => {
|
multipleList.value = selection;
|
}
|
|
// 组件挂载时加载字典数据
|
onMounted(() => {
|
handleQuery()
|
})
|
</script>
|
|
<style scoped>
|
.dynamic-table-container {
|
width: 100%;
|
}
|
|
.pagination-container {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
:deep(.el-table .el-table__header-wrapper th) {
|
background-color: #F0F1F5 !important;
|
color: #333333;
|
font-weight: 600;
|
}
|
|
:deep(.el-table .el-table__body-wrapper td) {
|
padding: 8px 0;
|
}
|
|
:deep(.el-select) {
|
width: 100%;
|
}
|
|
:deep(.el-input) {
|
width: 100%;
|
}
|
.actions {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
margin-bottom: 30px;
|
}
|
.head{
|
cursor: pointer;
|
font-size: 18px;
|
font-weight: 600;
|
}
|
</style>
|
