Merge branch 'refs/heads/dev_huangjin' into dev

spring

8 天以前 ba01c8bd58bea9acbb98c2097765b939a81b21cd

 src/views/lavorissue/statistics/index.vue

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