spring
8 天以前 ba01c8bd58bea9acbb98c2097765b939a81b21cd
src/views/lavorissue/ledger/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,300 @@
<template>
  <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 { 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 { getCurrentMonth } from "@/utils/util"
// è¡¨æ ¼å¤šé€‰æ¡†é€‰ä¸­é¡¹
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: '第四季度'
  }
])
// å¤šé€‰åŽåšä»€ä¹ˆ
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 = () => {
  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,'收入')
  })
};
onMounted(() => {
  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 lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>