zouyu
2026-01-10 8bc17a9ea84a6af0b7d01e451c702f404a3ff895
src/views/productionManagement/productionCosting/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,166 @@
<template>
   <div class="app-container">
      <div class="search_form">
         <div>
            <span class="search_title">生产日期:</span>
            <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                                    placeholder="请选择" clearable @change="changeDaterange" />
            <span class="search_title ml10">生产人:</span>
            <el-input
               v-model="searchForm.schedulingUserName"
               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 @click="handleOut">导出</el-button>
         </div>
      </div>
      <div class="table_list">
         <PIMTable
            rowKey="id"
            :column="tableColumn"
            :tableData="tableData"
            :page="page"
            :tableLoading="tableLoading"
            @pagination="pagination"
         ></PIMTable>
      </div>
   </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {
   listCustomer,
} from "@/api/basicData/customerFile.js";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import {productionAccountingListPage} from "@/api/productionManagement/productionCosting.js";
const { proxy } = getCurrentInstance();
const tableColumn = ref([
   {
      label: "生产日期",
      prop: "schedulingDate",
      width: 120,
   },
   {
      label: "生产人",
      prop: "schedulingUserName",
      width: 90,
   },
   {
      label: "产品大类",
      prop: "productCategory",
      width: 160,
   },
   {
      label: "规格型号",
      prop: "specificationModel",
      width: 160,
   },
   {
      label: "单位",
      prop: "unit",
   },
   {
      label: "工序",
      prop: "process",
   },
   {
      label: "生产数量",
      prop: "finishedNum",
      width: 100,
   },
   {
      label: "工时定额",
      prop: "workHours",
      width: 100,
   },
   {
      label: "工资",
      prop: "wages",
      width: 100,
   },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const page = reactive({
   current: 1,
   size: 100,
   total: 0,
});
const data = reactive({
   searchForm: {
      schedulingUserName: "",
      entryDate: [
         dayjs().format("YYYY-MM-DD"),
         dayjs().add(1, "day").format("YYYY-MM-DD"),
      ], // å½•入日期
      entryDateStart: dayjs().format("YYYY-MM-DD"),
      entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"),
   },
});
const { searchForm } = toRefs(data);
// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
   page.current = 1;
   getList();
};
const pagination = (obj) => {
   page.current = obj.page;
   page.size = obj.limit;
   getList();
};
const changeDaterange = (value) => {
   if (value) {
      searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
      searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
   } else {
      searchForm.value.entryDateStart = undefined;
      searchForm.value.entryDateEnd = undefined;
   }
   handleQuery();
};
const getList = () => {
   tableLoading.value = true;
   const params = { ...searchForm.value, ...page };
   params.entryDate = undefined
   productionAccountingListPage(params).then((res) => {
      tableLoading.value = false;
      tableData.value = res.data.records;
      page.total = res.data.total;
   });
};
// å¯¼å‡º
const handleOut = () => {
   ElMessageBox.confirm("选中的内容将被导出,是否确认导出?", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
   })
      .then(() => {
         proxy.download("/basic/customer/export", {}, "生产核算.xlsx");
      })
      .catch(() => {
         proxy.$modal.msg("已取消");
      });
};
onMounted(() => {
   getList();
});
</script>
<style scoped lang="scss"></style>