新疆_马铃薯 1.不合格管理添加拒收逻辑

gaoluyang

2026-08-06 377c0a70c094d024aeb0bb94f4b791c6d5530c1e

 src/views/customerService/expiryAfterSales/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,273 @@
<template>
   <div class="app-container">
      <div class="search_form mb20">
         <div>
            <span class="search_title">临期日期：</span>
            <el-date-picker
               v-model="searchForm.expiryDate"
               value-format="YYYY-MM-DD"
               format="YYYY-MM-DD"
               type="date"
               placeholder="请选择"
               clearable
               @change="handleQuery"
            />
            <span class="search_title ml10">处理日期：</span>
            <el-date-picker
               v-model="searchForm.handleDate"
               value-format="YYYY-MM-DD"
               format="YYYY-MM-DD"
               type="date"
               placeholder="请选择"
               clearable
               @change="handleQuery"
            />
        <span style = "margin-left: 10px;" class="search_title">处理状态：</span>
        <el-select v-model="searchForm.status" placeholder="请选择状态" @change="handleQuery" style="width: 140px" clearable>
          <el-option label="待处理" :value="1"></el-option>
          <el-option label="已处理" :value="2"></el-option>
        </el-select>
            <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
            >搜索</el-button
            >
            <el-button @click="resetQuery" style="margin-left: 10px"
            >重置</el-button
            >
         </div>
         <div class="table_actions">
            <el-button type="primary" @click="openForm('add')">新增</el-button>
            <el-button type="danger" @click="handleDelete" v-hasPermi="['customerService:expiryAfterSales:remove']">删除</el-button>
         </div>
      </div>

      <div class="table_list">
         <PIMTable
            rowKey="id"
            :column="tableColumn"
            :tableData="tableData"
            :page="page"
            :isSelection="true"
            @selection-change="handleSelectionChange"
            :tableLoading="tableLoading"
            @pagination="pagination"
         >
            <!-- è¡¨æ ¼æ’槽 -->
            <template #status="{ row }">
               <el-tag :type="row.status === 1 ? 'warning' : 'success'">
                  {{ row.status === 1 ? '待处理' : '已处理' }}
               </el-tag>
            </template>

            <template #operation="{ row }">
               <el-button type="primary" link @click="openForm('view', row)">查看</el-button>
               <el-button type="primary" link @click="openForm('handle', row)" v-if="row.status === 1">处理</el-button>
            </template>
         </PIMTable>
      </div>
      <form-dia ref="formDia" @close="handleQuery"></form-dia>
   </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import FormDia from "@/views/customerService/expiryAfterSales/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import {expiryAfterSalesDelete, expiryAfterSalesListPage} from "@/api/customerService/index.js";
import useUserStore from "@/store/modules/user.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore()

const data = reactive({
   searchForm: {
      expiryDate: "",
      handleDate: "",
      status: ""
   },
   tableData: [],
   page: {
      current: 1,
      size: 10,
      total: 0,
   },
   selectedRows: [],
   tableLoading: false,
   formDia: null,
   tableColumn: [
      {
         label: "临期产品名称",
         prop: "productName",
         width: "",
      },
      {
         label: "产品批号",
         prop: "batchNumber",
         width: "",
      },
      {
         label: "临期日期",
         prop: "expiryDate",
         width: "",
      },
      {
         label: "库存数量",
         prop: "stockQuantity",
         width: "",
      },
      {
         label: "客户名称",
         prop: "customerName",
         width: "",
      },
      {
         label: "问题描述",
         prop: "problemDesc",
         width: "",
      },
      {
         label: "处理状态",
         prop: "status",
         width: "",
         dataType: "slot",
         slot: "status",
      },
      {
         label: "处理人",
         prop: "handlerName",
         width: "",
      },
      {
         label: "处理日期",
         prop: "handleDate",
         width: "",
      },
      {
         label: "操作",
         prop: "operation",
         dataType: "slot",
         slot: "operation",
         width: "200",
      },
   ],
});

const {
   searchForm,
   tableData,
   page,
   selectedRows,
   tableLoading,
   formDia,
   tableColumn,
} = toRefs(data);

// æŸ¥è¯¢
const handleQuery = () => {
   page.value.current = 1;
   getList();
};

// é€‰æ‹©
const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
};

// é‡ç½®
const resetQuery = () => {
   proxy.resetForm("queryRef");
   searchForm.value = {
      expiryDate: "",
      handleDate: "",
      status: ""
   };
   handleQuery();
};

// åˆ†é¡µ
const pagination = (obj) => {
   page.value.current = obj.page;
   page.value.size = obj.limit;
   getList();
};

// èŽ·å–列表数据
const getList = () => {
   tableLoading.value = true;
   // æž„造查询参数，映射前端字段到后端字段
   const queryParams = {
      expireDate: searchForm.value.expiryDate,
      disDate: searchForm.value.handleDate,
      status: searchForm.value.status,
      current: page.value.current,
      size: page.value.size
   };

   expiryAfterSalesListPage(queryParams).then(res => {
      // æ˜ å°„后端返回数据到前端表格
      tableData.value = res.data.records.map(item => ({
         id: item.id,
         productName: item.productName,
         batchNumber: item.batchNumber,
         expiryDate: item.expireDate,
         stockQuantity: item.stockQuantity,
         customerName: item.customerName,
         contactPhone: item.contactPhone,
         problemDesc: item.disRes,
         status: item.status,
         handlerId: item.disposeUserId,
         handlerName: item.disposeNickName,
         handleResult: item.disposeResult,
         handleDate: item.disDate
      }));
      page.value.total = res.data.total;
      tableLoading.value = false;
   }).catch(error => {
      console.error('获取列表数据失败:', error);
      tableLoading.value = false;
      proxy.$modal.msgError('获取数据失败，请稍后重试');
   });
};

// æ‰“开弹框
const openForm = (type, row) => {
   nextTick(() => {
      formDia.value?.openDialog(type, row)
   })
};

// åˆ é™¤
const handleDelete = () => {
   let ids = [];
   if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map((item) => item.id);
   } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
   }
   ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
   })
      .then(() => {
         tableLoading.value = true;
         expiryAfterSalesDelete(ids).then(() => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
         }).finally(() => {
            tableLoading.value = false;
         });
      })
      .catch(() => {
         proxy.$modal.msg("已取消");
      });
};

onMounted(() => {
   getList();
});
</script>

<style scoped>

</style>