From 9b36bf37924e7d9c665837c13832a033754974ae Mon Sep 17 00:00:00 2001 From: maven <2163098428@qq.com> Date: 星期三, 20 八月 2025 13:16:50 +0800 Subject: [PATCH] yys 修改劳保统计表格 --- src/views/lavorissue/ledger/index.vue | 559 +++++++++++++++++++++++++++---------------------------- 1 files changed, 270 insertions(+), 289 deletions(-) diff --git a/src/views/lavorissue/ledger/index.vue b/src/views/lavorissue/ledger/index.vue index 33a1461..6b7e5a8 100644 --- a/src/views/lavorissue/ledger/index.vue +++ b/src/views/lavorissue/ledger/index.vue @@ -1,319 +1,300 @@ <template> - <div class="app-container"> - <div class="search_form"> - <div> - <span class="search_title">鍙戞斁瀛e害锛�</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="deptName"--> -<!-- width="120"--> -<!-- show-overflow-tooltip--> -<!-- align="center"--> -<!-- 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> + <div class="app-container"> + <el-form :model="filters" :inline="true"> + <el-form-item label="鍙戞斁瀛e害:" prop="season"> + <el-select + style="width: 200px;" + @change="handleQuery" + v-model="filters.season" + placeholder="璇烽�夋嫨" + :clearable="false" + > + <el-option :label="item.label" :value="item.value" v-for="(item,index) in jidu" :key="value" /> + </el-select> + </el-form-item> + <el-form-item label="鍛樺伐鍚嶇О:"> + <el-input + v-model="filters.staffName" + style="width: 240px" + placeholder="璇疯緭鍏�" + @change="handleQuery" + clearable + prefix-icon="Search" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="getTableData">鎼滅储</el-button> + <el-button @click="resetFilters">閲嶇疆</el-button> + </el-form-item> + </el-form> + <div class="table_list"> + <div class="actions"> + <div></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> + <PIMTable + rowKey="id" + isSelection + :column="columns" + :tableData="dataList" + :page="{ + current: pagination.currentPage, + size: pagination.pageSize, + total: pagination.total, + }" + @selection-change="handleSelectionChange" + @pagination="changePage" + > + <template #operation="{ row }"> + <el-button type="primary" text @click="edit(row)" icon="editPen"> + 缂栬緫 + </el-button> + <el-button type="primary" :disabled="row.adoptedDate ? true : false" text @click="adopted(row)"> + 棰嗙敤 + </el-button> + </template> + </PIMTable> + </div> + <Modal ref="modalRef" @success="getTableData"></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 { usePaginationApi } from "@/hooks/usePaginationApi"; +import { listPage,deleteLedger,update } from "@/api/lavorissce/ledger"; +import { onMounted, getCurrentInstance } from "vue"; import Modal from "./Modal.vue"; +import { ElMessageBox, ElMessage } from "element-plus"; +import dayjs from "dayjs"; 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 { proxy } = getCurrentInstance(); +const modalRef = ref(); +const { payment_methods } = proxy.useDict("payment_methods"); +const { income_types } = proxy.useDict("income_types"); +const filesDia = ref() + +const { + filters, + columns, + dataList, + pagination, + getTableData, + resetFilters, + onCurrentChange, +} = usePaginationApi( + listPage, + { + staffName: '', + season: getCurrentMonth(), + }, + [ + { + label: "鍔充繚鍗曞彿", + align: "center", + prop: "orderNo", + }, + { + label: "鍛樺伐鍚嶇О", + align: "center", + prop: "staffName", + }, + { + label: "鍛樺伐缂栧彿", + align: "center", + prop: "staffNo" + }, + + { + label: "鍔充繚绫诲瀷", + align: "center", + prop: "dictTypeName", + + }, + { + label: "鍔充繚闃插叿", + align: "center", + prop: "dictName", + + }, + { + label: "鍙戞斁鏁伴噺", + align: "center", + prop: "num", + + }, + { + label: "杩涘巶鏃ユ湡", + align: "center", + prop: "factoryDate", + + }, + { + label: "鍙戞斁鏃ユ湡", + align: "center", + prop: "issueDate", + + }, + { + label: "棰嗙敤鏃ユ湡", + align: "center", + prop: "adoptedDate", + + }, + { + fixed: "right", + label: "鎿嶄綔", + dataType: "slot", + slot: "operation", + align: "center", + width: "200px", + }, + ] +); + const jidu = ref([ - { - value: '1', - label: '绗竴瀛e害' - }, - { - value: '2', - label: '绗簩瀛e害' - }, - { - value: '3', - label: '绗笁瀛e害' - }, - { - value: '4', - label: '绗洓瀛e害' - } + { + value: '1', + label: '绗竴瀛e害' + }, + { + value: '2', + label: '绗簩瀛e害' + }, + { + value: '3', + label: '绗笁瀛e害' + }, + { + value: '4', + label: '绗洓瀛e害' + } ]) + +// 澶氶�夊悗鍋氫粈涔� +const handleSelectionChange = (selectionList) => { + multipleList.value = selectionList; +}; + +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: "棰嗙敤鎴愬姛", + }); + getTableData(); + } + }) +} + +const add = () => { + modalRef.value.openModal(); +}; +const edit = (row) => { + modalRef.value.loadForm(row); +}; /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { - page.value.current = 1; - getList(); + getTableData(); }; -// 鑾峰彇瀛楀吀鏁版嵁 -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 changePage = ({ page, limit }) => { + pagination.currentPage = page; + pagination.pageSize = limit; + onCurrentChange(page); }; const deleteRow = (id) => { - ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ暟鎹�, 鏄惁缁х画?", "鎻愮ず", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning", - }).then(async () => { - const { code } = await deleteLedger(id); - if (code == 200) { - ElMessage({ - type: "success", - message: "鍒犻櫎鎴愬姛", - }); - getList(); - } - }); + ElMessageBox.confirm("姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ暟鎹�, 鏄惁缁х画?", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }).then(async () => { + const { code } = await deleteLedger(id); + if (code == 200) { + ElMessage({ + type: "success", + message: "鍒犻櫎鎴愬姛", + }); + getTableData(); + } + }); }; + +const changeDaterange = (value) => { + if (value) { + filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD"); + filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD"); + } else { + filters.entryDateStart = undefined; + filters.entryDateEnd = undefined; + } + getTableData(); +}; + const handleOut = () => { - ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", { - confirmButtonText: "纭", - cancelButtonText: "鍙栨秷", - type: "warning", - }) - .then(() => { - proxy.download(`/lavorIssue/exportCopy`, {season: searchForm.value.season}, "鍔充繚鍙拌处.xlsx"); - }) - .catch(() => { - ElMessage.info("宸插彇娑�"); - }); + ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", { + confirmButtonText: "纭", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(() => { + proxy.download(`/lavorIssue/exportCopy`, {season: filters.season}, "鍔充繚鍙拌处.xlsx"); + }) + .catch(() => { + proxy.$modal.msg("宸插彇娑�"); + }); }; -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: "棰嗙敤鎴愬姛", - }); - getList(); - } - }) -} // 鎵撳紑闄勪欢寮规 const openFilesFormDia = (row) => { - nextTick(() => { - filesDia.value?.openDialog( 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() -}) + filters.entryDate = [ + dayjs().format("YYYY-MM-DD"), + dayjs().add(1, "day").format("YYYY-MM-DD"), + ] + filters.entryDateStart = dayjs().format("YYYY-MM-DD") + filters.entryDateEnd = dayjs().add(1, "day").format("YYYY-MM-DD") + getTableData(); +}); </script> -<style scoped> -.dynamic-table-container { - width: 100%; +<style lang="scss" scoped> +.table_list { + margin-top: unset; } - -.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-between; + margin-bottom: 10px; } </style> + -- Gitblit v1.9.3