yys 修改劳保统计表格

maven

4 天以前 9b36bf37924e7d9c665837c13832a033754974ae

yys  修改劳保统计表格

 src/api/lavorissce/ledger.js

@@ -1,7 +1,7 @@
import request from '@/utils/request'

// åˆ†é¡µæŸ¥è¯¢
export function lavorIssueListPage(query) {
export function listPage(query) {
    return request({
        url: '/lavorIssue/listPage',
        method: 'get',
@@ -18,6 +18,14 @@
    })
}

export function statisticsList(params) {
    return request({
        url: '/lavorIssue/statisticsList',
        method: 'get',
        params
    })
}

// æ·»åŠ 
export function add(data) {
    return request({

 src/views/inventoryManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,309 @@
<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>

 src/views/lavorissue/ledger/index.vue

@@ -1,319 +1,300 @@
<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="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="发放季度:" 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: '第一季度'
    },
    {
        value: '2',
        label: '第二季度'
    },
    {
        value: '3',
        label: '第三季度'
    },
    {
        value: '4',
        label: '第四季度'
    }
  {
    value: '1',
    label: '第一季度'
  },
  {
    value: '2',
    label: '第二季度'
  },
  {
    value: '3',
    label: '第三季度'
  },
  {
    value: '4',
    label: '第四季度'
  }
])

// å¤šé€‰åŽåšä»€ä¹ˆ
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>


 src/views/lavorissue/statistics/index.vue

@@ -1,67 +1,141 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="发放季度:" prop="season">
    <div class="search_form">
      <div>
        <span class="search_title">发放季度：</span>
        <el-select
            :disabled="filters.issueDate ? true : false"
            style="width: 200px;"
            @change="getList"
            v-model="filters.season"
            @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="value" />
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in jidu" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="发放月份:" prop="issueDate">
        <span class="search_title ml10">发放月份：</span>
        <el-date-picker
            :disabled="filters.season ? true : false"
            v-model="filters.issueDate"
            @change="getList"
            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
            style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>
        <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="getList(1)">已领取劳保数量:{{statisticsObj.ylqNum}}</div>
        <div class="head" @click="getList(2)">未领取劳保数量: {{ statisticsObj.wlqNum }}</div>
        <div class="head" @click="getList(3)">超时已领取劳保数量: {{statisticsObj.csylqNum}}</div>
        <div class="head" @click="getList(4)">超时未领取劳保数量: {{statisticsObj.cswlqNum}}</div>
        <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>
      <PIMTable
          rowKey="id"
          isSelection
          :column="columns"
          :tableData="dataList"
          :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
      <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"
          @pagination="changePage"
      >
      </PIMTable>
        <!-- é€‰æ‹©åˆ— -->
        <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 { usePaginationApi } from "@/hooks/usePaginationApi";
import {lavorIssueListPage, statistics} from "@/api/lavorissce/ledger";
import { onMounted } from "vue";
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([
  {
@@ -81,148 +155,126 @@
    label: '第四季度'
  }
])
const clearSeason = () => {
  console.log("req")
  searchForm.value.season = ""
  searchForm.value.issueDate = dayjs().format("YYYY-MM-DD");
}

const {
  filters,
  columns,
  dataList,
  pagination,
  getTableData,
  resetFilters,
  onCurrentChange,
} = usePaginationApi(
    lavorIssueListPage,
    {
      season: '',
      issueDate: '',
      status: 0
    },
    [
      {
        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",

      }
    ]
);
const clearIssueDaten = () => {
  searchForm.value.issueDate = ""
  searchForm.value.season = getCurrentMonth()
}
const statisticsObj = ref({
  ylqNum: 0,  // å·²é¢†å–数量
  wlqNum: 0,  // æœªé¢†å–数量
  csylqNum: 0,  // è¶…时已领取数量
  cswlqNum: 0  // è¶…时未领取数量
})

const resetParams = () => {
  resetFilters();
  getStatistics();
};

// å¤šé€‰åŽåšä»€ä¹ˆ
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};
const getList = (status) => {
  switch (status){
    case 1:
      filters.status = 1
      break;
    case 2:
      filters.status = 2
      break;
    case 3:
      filters.status = 3
      break;
    case 4:
      filters.status = 4
      break;
    default:
      filters.status = 0
  }
  console.log(filters)
  getTableData();
  getStatistics();
const resetHandleQuery = () => {
  searchForm.value.issueDate = "";
  searchForm.value.season = getCurrentMonth();
  handleQuery(0)
};

/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
    pagination.current = 1;
  getTableData();
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 changePage = ({ page, limit }) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  onCurrentChange(page);
};

const getStatistics = () => {
  statistics(filters).then(res => {
  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(() => {
  getList()
});
  handleQuery()
})
</script>

<style lang="scss" scoped>
.table_list {
  margin-top: unset;
<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-top: 20px;
  margin-bottom: 30px;
}
.head{
@@ -231,4 +283,3 @@
  font-weight: 600;
}
</style>