销售和采购退货

yyb

5 天以前 b6a007d417bf5eea80ec807d3f1201e220e5f651

 src/views/procurementManagement/purchaseReturnOrder/index.vue

@@ -1,109 +1,470 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="退料单号：">
          <el-input v-model="searchForm.no"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
                    @change="handleQuery" />
          <el-input
            v-model="searchForm.no"
            placeholder="请输入"
            clearable
            prefix-icon="Search"
            @change="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery"> 搜索 </el-button>
          <el-button type="primary" @click="handleQuery"> 搜索 </el-button>
        </el-form-item>
      </el-form>

      <div>
        <el-button type="primary" @click="isShowNewModal = true">新增</el-button>
        <el-button type="primary" @click="isShowNewModal = true"
          >新增</el-button
        >
      </div>
    </div>

    <div class="table_list">
      <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" :row-key="row => row.id" style="width: 100%" height="calc(100vh - 18.5em)">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column label="退料单号" prop="no" show-overflow-tooltip />
        <el-table-column label="退货方式" prop="returnType" show-overflow-tooltip />
        <el-table-column label="供应商名称" prop="supplierName" show-overflow-tooltip />
        <el-table-column label="关联单号" prop="purchaseContractNumber" show-overflow-tooltip />
        <el-table-column label="退料人" prop="returnUserName" show-overflow-tooltip />
        <el-table-column label="备注" prop="remark"  show-overflow-tooltip />
        <el-table-column label="创建人" prop="createUserName"  show-overflow-tooltip />
        <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
        <el-table-column label="最近更新时间" prop="updateTime" show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" min-width="60" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper"
                  :page="page.current" :limit="page.size" @pagination="paginationChange" />
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :tableLoading="tableLoading"
        :isSelection="true"
        :page="page"
        :height="'calc(100vh - 18.5em)'"
        @selection-change="handleSelectionChange"
        @pagination="paginationChange"
      >
        <template #operation="{ row }">
          <el-button
            link
            type="primary"
            size="small"
            style="color: #67c23a"
            @click="handleDetail(row)"
            >详情</el-button
          >
          <el-button link size="small" @click="handleDelete(row)"
            >删除</el-button
          >
        </template>
      </PIMTable>
    </div>
    <new v-if="isShowNewModal"
         v-model:visible="isShowNewModal"
         @completed="handleQuery" />
    <new
      v-if="isShowNewModal"
      v-model:visible="isShowNewModal"
      @completed="handleQuery"
    />

    <el-dialog
      v-model="detailVisible"
      title="采购退货详情"
      width="1200"
      destroy-on-close
    >
      <div v-loading="detailLoading">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="退料单号">{{
            detailData.no || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="退货方式">{{
            getReturnTypeLabel(detailData.returnType)
          }}</el-descriptions-item>
          <el-descriptions-item label="供应商名称">{{
            detailData.supplierName || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="项目阶段">{{
            getProjectPhaseLabel(detailData.projectPhase)
          }}</el-descriptions-item>
          <el-descriptions-item label="关联的采购订单号">{{
            detailData.purchaseContractNumber || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="制作日期">{{
            detailData.preparedAt || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="制单人">{{
            detailData.preparedUserName || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="退料人">{{
            detailData.returnUserName || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="整单折扣额">{{
            formatAmount(detailData.totalDiscountAmount)
          }}</el-descriptions-item>
          <el-descriptions-item label="整单折扣率">{{
            detailData.totalDiscountRate ?? "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="成交金额">{{
            formatAmount(detailData.totalAmount)
          }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{
            detailData.createUserName || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            detailData.createTime || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="最近更新时间">{{
            detailData.updateTime || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="3">{{
            detailData.remark || "--"
          }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">产品列表</el-divider>

        <el-table
          :data="detailProducts"
          border
          max-height="420"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="60"
          />
          <el-table-column label="入库单号" prop="inboundBatches" width="150" />
          <el-table-column label="批次号" prop="batchNo" width="150" />
          <el-table-column
            label="产品大类"
            prop="productCategory"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            label="规格型号"
            prop="specificationModel"
            min-width="140"
            show-overflow-tooltip
          />
          <el-table-column label="单位" prop="unit" width="80" />
          <el-table-column label="数量" prop="stockInNum" width="80" />
          <el-table-column label="可退货数量"
                           prop="unQuantity"
                           width="100" />
          <el-table-column label="已退货数量"
                           prop="totalReturnNum"
                           width="100" />
          <!-- <el-table-column label="库存预警数量" prop="warnNum" width="120" /> -->
          <!-- <el-table-column label="税率(%)" prop="taxRate" width="90" /> -->
          <el-table-column
            label="含税单价(元)"
            prop="taxInclusiveUnitPrice"
            width="130"
          >
            <template #default="scope">{{
              formatAmount(scope.row.taxInclusiveUnitPrice)
            }}</template>
          </el-table-column>
          <!-- <el-table-column
            label="退货总价(元)"
            prop="taxInclusiveTotalPrice"
            width="130"
          >
            <template #default="scope">{{
              formatAmount(scope.row.taxInclusiveTotalPrice)
            }}</template>
          </el-table-column>
          <el-table-column
            label="不退货总价(元)"
            prop="taxExclusiveTotalPrice"
            width="140"
          >
            <template #default="scope">{{
              formatAmount(scope.row.taxExclusiveTotalPrice)
            }}</template>
          </el-table-column> -->
          <el-table-column
            label="是否质检"
            prop="isChecked"
            width="100"
            align="center"
          >
            <template #default="scope">
              <el-tag :type="scope.row.isChecked ? 'success' : 'info'">
                {{ scope.row.isChecked ? "是" : "否" }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref, reactive, toRefs, onMounted } from 'vue'
import {findPurchaseReturnOrderListPage} from "@/api/procurementManagement/purchase_return_order.js";
const New = defineAsyncComponent(() => import("@/views/procurementManagement/purchaseReturnOrder/New.vue"));
const tableData = ref([])
const selectedRows = ref([])
const tableLoading = ref(false)
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import {
  ref,
  reactive,
  toRefs,
  onMounted,
  defineAsyncComponent,
  getCurrentInstance,
} from "vue";
const { proxy } = getCurrentInstance();
import {
  findPurchaseReturnOrderListPage,
  getPurchaseReturnOrderDetail,
  deletePurchaseReturnOrder,
} from "@/api/procurementManagement/purchase_return_order.js";
const New = defineAsyncComponent(() =>
  import("@/views/procurementManagement/purchaseReturnOrder/New.vue")
);
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
})
const total = ref(0)
  total: 0,
});
const detailVisible = ref(false);
const detailLoading = ref(false);
const detailData = ref({});
const detailProducts = ref([]);
// 是否显示新增弹框
const isShowNewModal = ref(false)
const isShowNewModal = ref(false);
const returnTypeOptions = [
  { label: "退货退款", value: 0 },
  { label: "拒收", value: 1 },
];
const projectPhaseOptions = [
  { label: "立项", value: 0 },
  { label: "设计", value: 1 },
  { label: "采购", value: 2 },
  { label: "生产", value: 3 },
  { label: "出货", value: 4 },
];
const tableColumn = ref([
  {
    label: "退料单号",
    prop: "no",
  },
  {
    label: "退货方式",
    prop: "returnType",
    formatData: (val) =>
      returnTypeOptions.find((item) => item.value === val)?.label || "--",
  },
  {
    label: "供应商名称",
    prop: "supplierName",
    width: 180,
  },
  {
    label: "项目阶段",
    prop: "projectPhase",
    width: 100,
    formatData: (val) =>
      projectPhaseOptions.find((item) => String(item.value) === String(val))
        ?.label || "--",
  },
  {
    label: "关联的采购订单号",
    prop: "purchaseContractNumber",
    width: 160,
  },
  {
    label: "制作日期",
    prop: "preparedAt",
    width: 130,
  },
  {
    label: "制单人",
    prop: "preparedUserName",
    width: 110,
  },
  {
    label: "退料人",
    prop: "returnUserName",
    width: 110,
  },

  {
    label: "整单折扣额",
    prop: "totalDiscountAmount",
    width: 120,
  },
  {
    label: "整单折扣率",
    prop: "totalDiscountRate",
    width: 120,
  },
  {
    label: "成交金额",
    prop: "totalAmount",
    width: 120,
  },
  {
    label: "创建人",
    prop: "createUserName",
    width: 110,
  },
  {
    label: "创建时间",
    prop: "createTime",
    width: 170,
  },
  {
    label: "最近更新时间",
    prop: "updateTime",
    width: 170,
  },
  {
    label: "备注",
    prop: "remark",
    width: 180,
  },
  {
    dataType: "action",
    width: 120,
    label: "操作",
    align: "center",
    fixed: "right",
    operation: [
      {
        name: "详情",
        type: "text",
        clickFun: (row) => {
          handleDetail(row);
        },
      },
      {
        name: "删除",
        clickFun: (row) => {
          handleDelete(row);
        },
      },
    ],
  },
]);
const data = reactive({
  searchForm: {
    no: '',
  }
})
const { searchForm } = toRefs(data)
    no: "",
  },
});
const { searchForm } = toRefs(data);

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1
  getList()
}
  page.current = 1;
  getList();
};

// 删除操作
const handleDelete = (row) => {
  console.log("删除行数据：", row);
  proxy?.$modal
    ?.confirm("确定要删除吗？删除将无法恢复")
    .then(() => {
      // 这里调用删除接口，传入 row.id
      deletePurchaseReturnOrder(row.id)
        .then(() => {
          proxy?.$modal?.msgSuccess?.("删除成功");
          getList();
        })
        .catch(() => {
          proxy?.$modal?.msgError?.("删除失败");
        });
    })
    .catch(() => {
      // 取消删除
      proxy?.$modal?.msgInfo?.("已取消删除");
    });
};
// 查看详情
const handleDetail = (row) => {
  if (!row?.id) {
    proxy?.$modal?.msgWarning?.("未获取到单据ID");
    return;
  }
  detailVisible.value = true;
  detailLoading.value = true;
  getPurchaseReturnOrderDetail(row.id)
    .then((res) => {
      const payload = res?.data || {};
      detailData.value = payload;
      // 拼接连个对象成一个对象，方便展示 item 和 item.salesLedgerProduct 里的字段

      detailProducts.value =
        payload.purchaseReturnOrderProductsDetailVoList.map((item) => ({
          ...item,
          ...item.salesLedgerProduct,
        })) || [];
    })
    .catch(() => {
      proxy?.$modal?.msgError?.("获取详情失败");
    })
    .finally(() => {
      detailLoading.value = false;
    });
};

const paginationChange = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList()
}
  getList();
};

const getList = () => {
  tableLoading.value = true
  findPurchaseReturnOrderListPage({ ...searchForm.value, ...page }).then(res => {
    tableLoading.value = false
    tableData.value = res.data.records
    total.value = res.data.total
  }).catch(() => {
    tableLoading.value = false
  })
}
  tableLoading.value = true;
  findPurchaseReturnOrderListPage({ ...searchForm.value, ...page })
    .then((res) => {
      tableLoading.value = false;
      tableData.value = res.data.records;
      page.total = res.data.total;
    })
    .catch(() => {
      tableLoading.value = false;
    });
};

// 表格选择数据
const handleSelectionChange = (selection) => {
  // 过滤掉子数据
  selectedRows.value = selection.filter(item => item.id);
}
  selectedRows.value = selection.filter((item) => item.id);
};

const getReturnTypeLabel = (value) => {
  return (
    returnTypeOptions.find((item) => String(item.value) === String(value))
      ?.label || "--"
  );
};

const getProjectPhaseLabel = (value) => {
  return (
    projectPhaseOptions.find((item) => String(item.value) === String(value))
      ?.label || "--"
  );
};

const formatAmount = (value) => {
  if (value === null || value === undefined || value === "") {
    return "--";
  }
  const num = Number(value);
  if (Number.isNaN(num)) {
    return value;
  }
  return num.toFixed(2);
};

onMounted(() => {
  getList()
})
  getList();
});
</script>
<style scoped>
.table_list {
  margin-top: unset;
}
</style>