yys 修改劳保统计表格

maven

4 天以前 9b36bf37924e7d9c665837c13832a033754974ae

 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 {
  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 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 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
  })
}

onMounted(() => {
  getList()
// 获取字典数据
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 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>