yys 修改劳保统计表格

maven

4 天以前 9b36bf37924e7d9c665837c13832a033754974ae

 src/views/lavorissue/ledger/index.vue

@@ -1,33 +1,38 @@
<template>
   <div class="app-container">
      <div class="search_form">
         <div>
            <span class="search_title">发放季度：</span>
    <el-form :model="filters" :inline="true">
      <el-form-item label="发放季度:" prop="season">
            <el-select
               style="width: 200px;"
               @change="handleQuery"
               v-model="searchForm.season"
            v-model="filters.season"
               placeholder="请选择"
               :clearable="false"
            >
               <el-option :label="item.label" :value="item.value" v-for="(item,index) in jidu" :key="item.value" />
          <el-option :label="item.label" :value="item.value" v-for="(item,index) in jidu" :key="value" />
            </el-select>
            <span class="search_title ml10">员工名称：</span>
      </el-form-item>
      <el-form-item label="员工名称:">
            <el-input
               v-model="searchForm.staffName"
            v-model="filters.staffName"
               style="width: 240px"
               placeholder="请输入"
               @change="handleQuery"
               clearable
               prefix-icon="Search"
            />
            <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
            >搜索</el-button
            >
         </div>
      </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 @click="handleOut" icon="download">导出</el-button>-->
            <el-button
               type="danger"
               icon="Delete"
@@ -38,142 +43,130 @@
            </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%"
      <PIMTable
          rowKey="id"
          isSelection
          :column="columns"
          :tableData="dataList"
          :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
            @selection-change="handleSelectionChange"
          @pagination="changePage"
         >
            <!-- 选择列 -->
            <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)"
                  >
        <template #operation="{ row }">
          <el-button type="primary" text @click="edit(row)" icon="editPen">
                     编辑
                  </el-button>
                  <el-button
                     type="danger"
                     link
                     size="small"
                     :disabled="!!scope.row.adoptedDate"
                     @click="adopted(scope.row)"
                  >
          <el-button type="primary" :disabled="row.adoptedDate ? true : false" text @click="adopted(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" />
      </PIMTable>
      </div>
      <Modal ref="modalRef" @success="handleQuery"></Modal>
    <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 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 dayjs from "dayjs";
import FilesDia from "./filesDia.vue";
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',
@@ -193,58 +186,11 @@
   }
])

/** 搜索按钮操作 */
const handleQuery = () => {
   page.value.current = 1;
   getList();
// 多选后做什么
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};
// 获取字典数据
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: "删除成功",
         });
         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: "确定",
@@ -261,59 +207,94 @@
            type: "success",
            message: "领用成功",
         });
         getList();
      getTableData();
      }
   })
}

const add = () => {
  modalRef.value.openModal();
};
const edit = (row) => {
  modalRef.value.loadForm(row);
};

/** 搜索按钮操作 */
const handleQuery = () => {
  getTableData();
};
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: "删除成功",
      });
      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: filters.season}, "劳保台账.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
// 打开附件弹框
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()
})
  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;
.actions {
   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%;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>