<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="请选择"
|
:clearable="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-input
|
v-model="searchForm.staffName"
|
style="width: 240px"
|
placeholder="请输入"
|
@change="handleQuery"
|
clearable
|
prefix-icon="Search"
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px"
|
>搜索</el-button
|
>
|
</div>
|
<div>
|
<el-button type="primary" @click="add" icon="Plus"> 新增 </el-button>
|
<el-button @click="handleOut" icon="download">导出</el-button>
|
<el-button
|
type="danger"
|
icon="Delete"
|
:disabled="multipleList.length <= 0"
|
@click="deleteRow(multipleList.map((item) => item.id))"
|
>
|
批量删除
|
</el-button>
|
</div>
|
</div>
|
<div class="table_list">
|
<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-column
|
label="操作"
|
width="150"
|
align="center"
|
fixed="right"
|
>
|
<template #default="scope">
|
<el-button
|
type="primary"
|
link
|
size="small"
|
@click="edit(scope.row)"
|
>
|
编辑
|
</el-button>
|
<el-button
|
type="danger"
|
link
|
size="small"
|
:disabled="!!scope.row.adoptedDate"
|
@click="adopted(scope.row)"
|
>
|
领用
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination :total="total" layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current" :limit="page.size" @pagination="paginationChange" />
|
</div>
|
<Modal ref="modalRef" @success="handleQuery"></Modal>
|
<files-dia ref="filesDia"></files-dia>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, reactive, toRefs, nextTick, getCurrentInstance } from 'vue'
|
import dayjs from "dayjs";
|
import Modal from "./Modal.vue";
|
import FilesDia from "./filesDia.vue";
|
import Pagination from "@/components/Pagination/index.vue";
|
import {lavorIssueListPage, deleteLedger, update} 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: "",
|
staffName: "",
|
},
|
});
|
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 handleQuery = () => {
|
page.value.current = 1;
|
getList();
|
};
|
// 获取字典数据
|
const getList = async () => {
|
tableLoading.value = true;
|
const params = { ...searchForm.value, ...page.value };
|
lavorIssueListPage(params).then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data.records;
|
total.value = res.data.total;
|
}).catch(err => {
|
tableLoading.value = false;
|
})
|
}
|
const add = () => {
|
modalRef.value.openModal();
|
};
|
const edit = (row) => {
|
modalRef.value.loadForm(row);
|
};
|
const deleteRow = (id) => {
|
ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(async () => {
|
const { code } = await deleteLedger(id);
|
if (code == 200) {
|
ElMessage({
|
type: "success",
|
message: "删除成功",
|
});
|
await getList();
|
}
|
});
|
};
|
const handleOut = () => {
|
ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
proxy.download(`/lavorIssue/exportCopy`, {season: searchForm.value.season}, "劳保台账.xlsx");
|
})
|
.catch(() => {
|
ElMessage.info("已取消");
|
});
|
};
|
const adopted = (row) => {
|
ElMessageBox.confirm("是否确认领用?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(async () => {
|
const params = {
|
id: row.id,
|
adoptedDate: dayjs().format("YYYY-MM-DD")
|
}
|
const { code } = await update(params);
|
if (code == 200) {
|
ElMessage({
|
type: "success",
|
message: "领用成功",
|
});
|
await getList();
|
}
|
})
|
}
|
// 打开附件弹框
|
const openFilesFormDia = (row) => {
|
nextTick(() => {
|
filesDia.value?.openDialog( row,'收入')
|
})
|
};
|
// 事件处理函数
|
const handleSelectionChange = (selection) => {
|
multipleList.value = selection;
|
}
|
|
const paginationChange = (pagination) => {
|
page.value.current = pagination.page;
|
page.value.size = pagination.limit;
|
getList();
|
}
|
|
// 组件挂载时加载字典数据
|
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%;
|
}
|
</style>
|
