gaoluyang
9 小时以前 ab264123941cd3d345687af92aab2a9e04968960
src/views/financialManagement/receivable/salesOut.vue
@@ -1,27 +1,33 @@
<template>
<!-- 销售出库 -->
  <!-- 销售出库 -->
  <div class="app-container">
    <el-form :model="filters" :inline="true">
    <el-form :model="filters"
             :inline="true">
      <el-form-item label="出库单号:">
        <el-input v-model="filters.outboundBatches" placeholder="请输入出库单号" clearable style="width: 200px;" />
        <el-input v-model="filters.outboundBatches"
                  placeholder="请输入出库单号"
                  clearable
                  style="width: 200px;" />
      </el-form-item>
      <el-form-item label="客户名称:">
        <el-input v-model="filters.customerName" placeholder="请输入客户名称" clearable style="width: 200px;" />
        <el-input v-model="filters.customerName"
                  placeholder="请输入客户名称"
                  clearable
                  style="width: 200px;" />
      </el-form-item>
      <el-form-item label="出库日期:">
        <el-date-picker
          v-model="filters.dateRange"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
        />
        <el-date-picker v-model="filters.dateRange"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="primary"
                   @click="onSearch">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
@@ -29,141 +35,146 @@
      <div class="actions">
        <div></div>
        <div>
          <el-button @click="handleOut" icon="Download">导出</el-button>
          <el-button @click="handleOut"
                     icon="Download">导出</el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        :column="columns"
        :tableData="dataList"
        :tableLoading="tableLoading"
        :page="{
      <PIMTable rowKey="id"
                :column="columns"
                :tableData="dataList"
                :tableLoading="tableLoading"
                :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @pagination="changePage"
      />
                @pagination="changePage" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { listPageAccountSales } from "@/api/financialManagement/accountSales";
  import { ref, reactive, onMounted, getCurrentInstance } from "vue";
  import { ElMessage } from "element-plus";
  import { listPageAccountSales } from "@/api/financialManagement/accountSales";
defineOptions({
  name: "销售出库",
});
  defineOptions({
    name: "销售出库",
  });
const { proxy } = getCurrentInstance();
  const { proxy } = getCurrentInstance();
const filters = reactive({
  outboundBatches: "",
  customerName: "",
  dateRange: [],
});
  const filters = reactive({
    outboundBatches: "",
    customerName: "",
    dateRange: [],
  });
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });
const columns = [
  { label: "出库单号", prop: "outboundBatches", minWidth: "150" },
  { label: "客户名称", prop: "customerName", minWidth: "180" },
  { label: "出库日期", prop: "shippingDate", width: "170" },
  { label: "产品名称", prop: "productName", minWidth: "140" },
  { label: "产品规格", prop: "specificationModel", minWidth: "140" },
  {
    label: "金额",
    prop: "outboundAmount",
    minWidth: "120",
    align: "right",
    formatData: (val) => (val === null || val === undefined || val === "" ? "" : Number(val).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })),
  },
  { label: "发货编号", prop: "shippingNo", minWidth: "140" },
  { label: "销售订单号", prop: "salesContractNo", minWidth: "150" },
];
  const columns = [
    { label: "出库单号", prop: "outboundBatches", minWidth: "150" },
    { label: "客户名称", prop: "customerName", minWidth: "180" },
    { label: "出库日期", prop: "shippingDate", width: "170" },
    { label: "产品名称", prop: "productName", minWidth: "140" },
    { label: "规格型号", prop: "specificationModel", minWidth: "140" },
    {
      label: "金额",
      prop: "outboundAmount",
      minWidth: "120",
      align: "right",
      formatData: val =>
        val === null || val === undefined || val === ""
          ? ""
          : Number(val).toLocaleString("zh-CN", {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            }),
    },
    { label: "发货编号", prop: "shippingNo", minWidth: "140" },
    { label: "销售订单号", prop: "salesContractNo", minWidth: "150" },
  ];
const dataList = ref([]);
const tableLoading = ref(false);
  const dataList = ref([]);
  const tableLoading = ref(false);
function buildFilterParams() {
  const params = {
    outboundBatches: filters.outboundBatches || undefined,
    customerName: filters.customerName || undefined,
  };
  if (filters.dateRange && filters.dateRange.length === 2) {
    params.startDate = filters.dateRange[0];
    params.endDate = filters.dateRange[1];
  function buildFilterParams() {
    const params = {
      outboundBatches: filters.outboundBatches || undefined,
      customerName: filters.customerName || undefined,
    };
    if (filters.dateRange && filters.dateRange.length === 2) {
      params.startDate = filters.dateRange[0];
      params.endDate = filters.dateRange[1];
    }
    return params;
  }
  return params;
}
const onSearch = () => {
  pagination.currentPage = 1;
  getTableData();
};
  const onSearch = () => {
    pagination.currentPage = 1;
    getTableData();
  };
const getTableData = () => {
  tableLoading.value = true;
  listPageAccountSales({
    ...buildFilterParams(),
    current: pagination.currentPage,
    size: pagination.pageSize,
  })
    .then((res) => {
      const ok = res.code === 200 || res.code === 0;
      if (ok && res.data) {
        pagination.total = res.data.total ?? 0;
        dataList.value = res.data.records ?? [];
      } else {
        ElMessage.error(res.msg || "查询失败");
  const getTableData = () => {
    tableLoading.value = true;
    listPageAccountSales({
      ...buildFilterParams(),
      current: pagination.currentPage,
      size: pagination.pageSize,
    })
      .then(res => {
        const ok = res.code === 200 || res.code === 0;
        if (ok && res.data) {
          pagination.total = res.data.total ?? 0;
          dataList.value = res.data.records ?? [];
        } else {
          ElMessage.error(res.msg || "查询失败");
          dataList.value = [];
        }
      })
      .catch(() => {
        dataList.value = [];
      }
    })
    .catch(() => {
      dataList.value = [];
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };
const resetFilters = () => {
  filters.outboundBatches = "";
  filters.customerName = "";
  filters.dateRange = [];
  pagination.currentPage = 1;
  getTableData();
};
  const resetFilters = () => {
    filters.outboundBatches = "";
    filters.customerName = "";
    filters.dateRange = [];
    pagination.currentPage = 1;
    getTableData();
  };
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  getTableData();
};
  const changePage = ({ page, limit }) => {
    pagination.currentPage = page;
    pagination.pageSize = limit;
    getTableData();
  };
const handleOut = () => {
  proxy.download(
    "/accountSales/exportAccountSalesOutbound",
    buildFilterParams(),
    `销售出库_${new Date().getTime()}.xlsx`
  );
};
  const handleOut = () => {
    proxy.download(
      "/accountSales/exportAccountSalesOutbound",
      buildFilterParams(),
      `销售出库_${new Date().getTime()}.xlsx`
    );
  };
onMounted(() => {
  getTableData();
});
  onMounted(() => {
    getTableData();
  });
</script>
<style lang="scss" scoped>
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
  .actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
</style>