yaowanxin
5 天以前 be125538c6e9c17a923c9dbe1e4cca9962b0ed39
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 {listPage, 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 };
   listPage(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>