临期相关页面

gaoluyang

2025-09-29 530297eda34d030e9b3c8bd168ad818fde1a6ded

临期相关页面

 bin/build.bat

@@ -1,12 +1,12 @@
@echo off

echo.

echo [信息] æ‰“包Web工程，生成dist文件。

echo.



%~d0

cd %~dp0



cd ..

yarn build:prod



@echo off
echo.
echo [��Ϣ] ï¿½ï¿½ï¿½Web���̣�����dist�ļ���
echo.

%~d0
cd %~dp0

cd ..
yarn build:prod

pause

 src/api/customerService/index.js

@@ -40,4 +40,40 @@
    method: 'post',
    data: query,
  })
}

// ä¸´æœŸå”®åŽç®¡ç†-分页查询
export function expiryAfterSalesListPage(query) {
  return request({
    url: '/expiryAfterSales/listPage',
    method: 'get',
    params: query,
  })
}

// ä¸´æœŸå”®åŽç®¡ç†-新增
export function expiryAfterSalesAdd(query) {
  return request({
    url: '/expiryAfterSales/add',
    method: 'post',
    data: query,
  })
}

// ä¸´æœŸå”®åŽç®¡ç†-更新
export function expiryAfterSalesUpdate(query) {
  return request({
    url: '/expiryAfterSales/update',
    method: 'post',
    data: query,
  })
}

// ä¸´æœŸå”®åŽç®¡ç†-删除
export function expiryAfterSalesDelete(query) {
  return request({
    url: '/expiryAfterSales/delete',
    method: 'delete',
    data: query,
  })
}

 src/api/qualityManagement/nearExpiryReturn.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,45 @@
import request from '@/utils/request'

// æŸ¥è¯¢ä¸´æœŸé€€å›žå°è´¦åˆ—表
export function nearExpiryReturnListPage(query) {
    return request({
        url: '/quality/nearExpiryReturn/listPage',
        method: 'get',
        params: query,
    })
}

// æ–°å¢žä¸´æœŸé€€å›žå°è´¦
export function nearExpiryReturnAdd(data) {
    return request({
        url: '/quality/nearExpiryReturn/add',
        method: 'post',
        data: data,
    })
}

// ä¿®æ”¹ä¸´æœŸé€€å›žå°è´¦
export function nearExpiryReturnUpdate(data) {
    return request({
        url: '/quality/nearExpiryReturn/update',
        method: 'post',
        data: data,
    })
}

// åˆ é™¤ä¸´æœŸé€€å›žå°è´¦
export function nearExpiryReturnDel(ids) {
    return request({
        url: '/quality/nearExpiryReturn/del',
        method: 'delete',
        data: ids,
    })
}

// èŽ·å–临期退回台账详情
export function nearExpiryReturnDetail(id) {
    return request({
        url: '/quality/nearExpiryReturn/' + id,
        method: 'get',
    })
}

 src/views/customerService/expiryAfterSales/components/formDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,291 @@
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        :title="dialogTitle"
        width="70%"
        @close="closeDia"
    >
            <el-form
                :model="form"
                label-width="140px"
                label-position="top"
                :rules="rules"
                ref="formRef"
            >
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="临期产品名称：" prop="productName">
                            <el-input
                                v-model="form.productName"
                                placeholder="请输入产品名称"
                                clearable
                                :disabled="operationType === 'view'"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品批号：" prop="batchNumber">
                            <el-input
                                v-model="form.batchNumber"
                                placeholder="请输入产品批号"
                                clearable
                                :disabled="operationType === 'view'"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="临期日期：" prop="expiryDate">
                            <el-date-picker
                                style="width: 100%"
                                v-model="form.expiryDate"
                                value-format="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                type="date"
                                placeholder="请选择临期日期"
                                clearable
                                :disabled="operationType === 'view'"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="库存数量：" prop="stockQuantity">
                            <el-input-number
                                v-model="form.stockQuantity"
                                :min="0"
                                placeholder="请输入库存数量"
                                style="width: 100%"
                                :disabled="operationType === 'view'"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="客户名称：" prop="customerName">
                            <el-input
                                v-model="form.customerName"
                                placeholder="请输入客户名称"
                                clearable
                                :disabled="operationType === 'view'"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话：" prop="contactPhone">
                            <el-input
                                v-model="form.contactPhone"
                                placeholder="请输入联系电话"
                                clearable
                                :disabled="operationType === 'view'"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="问题描述：" prop="problemDesc">
                            <el-input
                                v-model="form.problemDesc"
                                placeholder="请输入问题描述"
                                clearable
                                :disabled="operationType === 'view'"
                                type="textarea"
                                :rows="3"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30" v-if="operationType !== 'add'">
                    <el-col :span="12">
                        <el-form-item label="处理人：" prop="handlerId">
                            <el-select
                                v-model="form.handlerId"
                                placeholder="请选择处理人"
                                clearable
                                :disabled="operationType === 'view'"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in userList"
                                    :key="item.userId"
                                    :label="item.nickName"
                                    :value="item.userId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="处理日期：" prop="handleDate">
                            <el-date-picker
                                style="width: 100%"
                                v-model="form.handleDate"
                                value-format="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                type="date"
                                placeholder="请选择处理日期"
                                clearable
                                :disabled="operationType === 'view'"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30" v-if="operationType !== 'add'">
                    <el-col :span="24">
                        <el-form-item label="处理结果：" prop="handleResult">
                            <el-input
                                v-model="form.handleResult"
                                placeholder="请输入处理结果"
                                clearable
                                :disabled="operationType === 'view'"
                                type="textarea"
                                :rows="3"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm" v-if="operationType !== 'view'">确认</el-button>
                    <el-button @click="closeDia">{{ operationType === 'view' ? '关闭' : '取消' }}</el-button>
                </div>
            </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, computed} from "vue";
import useUserStore from "@/store/modules/user.js";
// import {userListNoPageByTenantId} from "@/api/system/user.js"; // æš‚时注释掉，使用假数据
// import {expiryAfterSalesAdd, expiryAfterSalesUpdate} from "@/api/customerService/index.js"; // æš‚时注释掉，使用假数据
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const dialogFormVisible = ref(false);
const operationType = ref('')
const userStore = useUserStore();

const dialogTitle = computed(() => {
    switch (operationType.value) {
        case 'add':
            return '新增临期售后';
        case 'edit':
            return '编辑临期售后';
        case 'view':
            return '查看临期售后';
        default:
            return '临期售后管理';
    }
});

const data = reactive({
    form: {
        id: "",
        productName: "",
        batchNumber: "",
        expiryDate: "",
        stockQuantity: 0,
        customerName: "",
        contactPhone: "",
        problemDesc: "",
        handlerId: "",
        handleDate: "",
        handleResult: "",
        status: 1
    },
    rules: {
        productName: [{required: true, message: "请输入产品名称", trigger: "blur"}],
        batchNumber: [{required: true, message: "请输入产品批号", trigger: "blur"}],
        expiryDate: [{required: true, message: "请选择临期日期", trigger: "change"}],
        stockQuantity: [{required: true, message: "请输入库存数量", trigger: "blur"}],
        customerName: [{required: true, message: "请输入客户名称", trigger: "blur"}],
        contactPhone: [
            {required: true, message: "请输入联系电话", trigger: "blur"},
            {pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur"}
        ],
        problemDesc: [{required: true, message: "请输入问题描述", trigger: "blur"}],
    }
})
const { form, rules } = toRefs(data);
const userList = ref([])

// æ‰“开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  dialogFormVisible.value = true;
	
    // æ¨¡æ‹ŸèŽ·å–用户列表
    userList.value = [
        { userId: 1, nickName: "张三" },
        { userId: 2, nickName: "李四" },
        { userId: 3, nickName: "王五" },
        { userId: 4, nickName: "赵六" },
        { userId: 5, nickName: "孙八" }
    ];

    if (type === 'add') {
        // æ–°å¢žæ—¶é‡ç½®è¡¨å•
        form.value = {
            id: "",
            productName: "",
            batchNumber: "",
            expiryDate: "",
            stockQuantity: 0,
            customerName: "",
            contactPhone: "",
            problemDesc: "",
            handlerId: "",
            handleDate: "",
            handleResult: "",
            status: 1
        };
    } else {
        // ç¼–辑或查看时填充数据
        form.value = { ...row };
        if (type === 'edit' && !form.value.handlerId) {
            form.value.handlerId = userStore.id;
            form.value.handleDate = getCurrentDate();
        }
    }
}

const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            // æ¨¡æ‹Ÿæäº¤æ“ä½œ
            setTimeout(() => {
                console.log("模拟提交的数据:", form.value);
                proxy.$modal.msgSuccess(operationType.value === 'add' ? "新增成功" : "更新成功");
                closeDia();
            }, 300);
        }
    });
}

// å…³é—­å¼¹æ¡†
const closeDia = () => {
    proxy.resetForm("formRef");
  dialogFormVisible.value = false;
  emit('close')
};

// èŽ·å–当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0");
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
}

defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>

 src/views/customerService/expiryAfterSales/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,330 @@
<template>
    <div class="app-container">
        <div class="search_form">
            <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>
        <div class="table_actions" style="margin-bottom: 10px;">
            <el-button type="primary" @click="openForm('add')">新增</el-button>
            <el-button type="danger" @click="handleDelete">删除</el-button>
        </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('edit', 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: "",
            slot: true,
        },
        {
            label: "处理人",
            prop: "handlerName",
            width: "",
        },
        {
            label: "处理日期",
            prop: "handleDate",
            width: "",
        },
        {
            label: "操作",
            prop: "operation",
            slot: true,
            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;
	
    // æ¨¡æ‹Ÿå¼‚步请求
    setTimeout(() => {
        // å‡æ•°æ®
        const mockData = [
            {
                id: 1,
                productName: "维生素C片",
                batchNumber: "VC20240801",
                expiryDate: "2024-12-15",
                stockQuantity: 150,
                customerName: "张三药店",
                problemDesc: "临近保质期需要处理",
                status: 1,
                handlerName: "",
                handleDate: "",
            },
            {
                id: 2,
                productName: "阿莫西林胶囊",
                batchNumber: "AM20240715",
                expiryDate: "2024-11-20",
                stockQuantity: 80,
                customerName: "李四医院",
                problemDesc: "库存积压，临期处理",
                status: 2,
                handlerName: "王五",
                handleDate: "2024-09-25",
            },
            {
                id: 3,
                productName: "感冒灵颗粒",
                batchNumber: "GM20240620",
                expiryDate: "2024-10-30",
                stockQuantity: 200,
                customerName: "赵六诊所",
                problemDesc: "季节性药品，需要清理库存",
                status: 1,
                handlerName: "",
                handleDate: "",
            },
            {
                id: 4,
                productName: "复合维生素片",
                batchNumber: "FH20240510",
                expiryDate: "2024-12-01",
                stockQuantity: 300,
                customerName: "钱七连锁",
                problemDesc: "临期产品退换申请",
                status: 2,
                handlerName: "孙八",
                handleDate: "2024-09-20",
            },
            {
                id: 5,
                productName: "板蓝根颗粒",
                batchNumber: "BL20240430",
                expiryDate: "2024-11-10",
                stockQuantity: 120,
                customerName: "周九药房",
                problemDesc: "批次问题，需要召回",
                status: 1,
                handlerName: "",
                handleDate: "",
            }
        ];

        // ç®€å•çš„搜索过滤
        let filteredData = mockData;
		
        if (searchForm.value.status !== "" && searchForm.value.status !== null) {
            filteredData = filteredData.filter(item => item.status === searchForm.value.status);
        }
		
        if (searchForm.value.expiryDate) {
            filteredData = filteredData.filter(item => item.expiryDate === searchForm.value.expiryDate);
        }
		
        if (searchForm.value.handleDate) {
            filteredData = filteredData.filter(item => item.handleDate === searchForm.value.handleDate);
        }

        // åˆ†é¡µå¤„理
        const start = (page.value.current - 1) * page.value.size;
        const end = start + page.value.size;
        const paginatedData = filteredData.slice(start, end);

        tableLoading.value = false;
        tableData.value = paginatedData;
        page.value.total = filteredData.length;
    }, 500); // æ¨¡æ‹Ÿç½‘络延迟
};

// æ‰“开弹框
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;
			
            // æ¨¡æ‹Ÿåˆ é™¤æ“ä½œ
            setTimeout(() => {
                tableLoading.value = false;
                proxy.$modal.msgSuccess("删除成功");
                console.log("模拟删除的数据ID:", ids);
                getList(); // é‡æ–°èŽ·å–数据
            }, 300);
        })
        .catch(() => {
            proxy.$modal.msg("已取消");
        });
};

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

<style scoped>

</style>

 src/views/qualityManagement/nearExpiryReturn/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,519 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="批次号" prop="batchNumber">
        <el-input
          v-model="queryParams.batchNumber"
          placeholder="请输入批次号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="退回日期" prop="returnDate">
        <el-date-picker
          clearable
          v-model="queryParams.returnDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择退回日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="nearExpiryReturnList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column label="产品名称" prop="productName" />
      <el-table-column label="产品规格" prop="productSpec" />
      <el-table-column label="批次号" prop="batchNumber" />
      <el-table-column label="生产日期" prop="productionDate" align="center">
        <template #default="scope">
          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到期日期" prop="expiryDate" align="center">
        <template #default="scope">
          <span>{{ parseTime(scope.row.expiryDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退回数量" prop="returnQuantity" />
      <el-table-column label="退回原因" prop="returnReason" />
      <el-table-column label="退回日期" prop="returnDate" align="center">
        <template #default="scope">
          <span>{{ parseTime(scope.row.returnDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理状态" prop="status" align="center">
        <template #default="scope">
          <dict-tag :options="statusOptions" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="mini" type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- æ·»åŠ æˆ–修改临期退回台账对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="form.productName" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品规格" prop="productSpec">
              <el-input v-model="form.productSpec" placeholder="请输入产品规格" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="批次号" prop="batchNumber">
              <el-input v-model="form.batchNumber" placeholder="请输入批次号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退回数量" prop="returnQuantity">
              <el-input-number v-model="form.returnQuantity" controls-position="right" :min="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产日期" prop="productionDate">
              <el-date-picker
                clearable
                v-model="form.productionDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择生产日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期日期" prop="expiryDate">
              <el-date-picker
                clearable
                v-model="form.expiryDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择到期日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="退回日期" prop="returnDate">
              <el-date-picker
                clearable
                v-model="form.returnDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择退回日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择处理状态">
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="退回原因" prop="returnReason">
              <el-input v-model="form.returnReason" type="textarea" placeholder="请输入退回原因" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">ç¡® å®š</el-button>
          <el-button @click="cancel">取 æ¶ˆ</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="NearExpiryReturn">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import {
  nearExpiryReturnListPage,
  nearExpiryReturnAdd,
  nearExpiryReturnUpdate,
  nearExpiryReturnDel,
  nearExpiryReturnDetail
} from "@/api/qualityManagement/nearExpiryReturn";

const { proxy } = getCurrentInstance();
const { parseTime } = proxy;

const nearExpiryReturnList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

// çŠ¶æ€å­—å…¸
const statusOptions = ref([
  { label: "待处理", value: "0" },
  { label: "处理中", value: "1" },
  { label: "已完成", value: "2" }
]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    productName: null,
    batchNumber: null,
    returnDate: null
  },
  rules: {
    productName: [
      { required: true, message: "产品名称不能为空", trigger: "blur" }
    ],
    productSpec: [
      { required: true, message: "产品规格不能为空", trigger: "blur" }
    ],
    batchNumber: [
      { required: true, message: "批次号不能为空", trigger: "blur" }
    ],
    returnQuantity: [
      { required: true, message: "退回数量不能为空", trigger: "blur" }
    ],
    productionDate: [
      { required: true, message: "生产日期不能为空", trigger: "blur" }
    ],
    expiryDate: [
      { required: true, message: "到期日期不能为空", trigger: "blur" }
    ],
    returnDate: [
      { required: true, message: "退回日期不能为空", trigger: "blur" }
    ],
    returnReason: [
      { required: true, message: "退回原因不能为空", trigger: "blur" }
    ],
    status: [
      { required: true, message: "处理状态不能为空", trigger: "change" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** æŸ¥è¯¢ä¸´æœŸé€€å›žå°è´¦åˆ—表 */
function getList() {
  loading.value = true;
  // ä½¿ç”¨å‡æ•°æ®
  const mockData = {
    records: [
      {
        id: 1,
        productName: "维生素C片",
        productSpec: "100mg×30片",
        batchNumber: "VC20240315001",
        productionDate: "2024-03-15",
        expiryDate: "2024-09-15",
        returnQuantity: 50,
        returnReason: "临近保质期",
        returnDate: "2024-09-10",
        status: "1",
        remark: "退回仓库处理"
      },
      {
        id: 2,
        productName: "阿莫西林胶囊",
        productSpec: "250mg×24粒",
        batchNumber: "AMX20240220002",
        productionDate: "2024-02-20",
        expiryDate: "2024-08-20",
        returnQuantity: 30,
        returnReason: "包装破损且临期",
        returnDate: "2024-08-18",
        status: "2",
        remark: "已销毁处理"
      },
      {
        id: 3,
        productName: "感冒灵颗粒",
        productSpec: "10g×12袋",
        batchNumber: "GML20240110003",
        productionDate: "2024-01-10",
        expiryDate: "2024-07-10",
        returnQuantity: 25,
        returnReason: "临近保质期",
        returnDate: "2024-07-08",
        status: "0",
        remark: "待重新包装"
      },
      {
        id: 4,
        productName: "复合维生素片",
        productSpec: "60片/瓶",
        batchNumber: "VB20240405004",
        productionDate: "2024-04-05",
        expiryDate: "2025-04-05",
        returnQuantity: 80,
        returnReason: "临近保质期",
        returnDate: "2024-09-25",
        status: "1",
        remark: "正在联系销售渠道"
      },
      {
        id: 5,
        productName: "钙片",
        productSpec: "600mg×100片",
        batchNumber: "CA20240301005",
        productionDate: "2024-03-01",
        expiryDate: "2024-09-01",
        returnQuantity: 120,
        returnReason: "包装问题且临期",
        returnDate: "2024-08-30",
        status: "2",
        remark: "已完成退货处理"
      }
    ],
    total: 5
  };

  // æ¨¡æ‹Ÿè¿‡æ»¤é€»è¾‘
  let filteredRecords = mockData.records;
  
  if (queryParams.value.productName) {
    filteredRecords = filteredRecords.filter(item => 
      item.productName.includes(queryParams.value.productName)
    );
  }
  
  if (queryParams.value.batchNumber) {
    filteredRecords = filteredRecords.filter(item => 
      item.batchNumber.includes(queryParams.value.batchNumber)
    );
  }
  
  if (queryParams.value.returnDate) {
    filteredRecords = filteredRecords.filter(item => 
      item.returnDate === queryParams.value.returnDate
    );
  }

  nearExpiryReturnList.value = filteredRecords;
  total.value = filteredRecords.length;
  loading.value = false;
}

// å–消按钮
function cancel() {
  open.value = false;
  reset();
}

// è¡¨å•é‡ç½®
function reset() {
  form.value = {
    id: null,
    productName: null,
    productSpec: null,
    batchNumber: null,
    productionDate: null,
    expiryDate: null,
    returnQuantity: null,
    returnReason: null,
    returnDate: null,
    status: null,
    remark: null
  };
  proxy.resetForm("formRef");
}

/** æœç´¢æŒ‰é’®æ“ä½œ */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** é‡ç½®æŒ‰é’®æ“ä½œ */
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

// å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}

/** æ–°å¢žæŒ‰é’®æ“ä½œ */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加临期退回台账";
}

/** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
function handleUpdate(row) {
  reset();
  const id = row.id || ids.value;
  
  // ä½¿ç”¨å‡æ•°æ®èŽ·å–详情
  const mockDetail = nearExpiryReturnList.value.find(item => item.id === (Array.isArray(id) ? id[0] : id));
  if (mockDetail) {
    form.value = { ...mockDetail };
    open.value = true;
    title.value = "修改临期退回台账";
  }
}

/** æäº¤æŒ‰é’® */
function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        // æ¨¡æ‹Ÿæ›´æ–°
        const index = nearExpiryReturnList.value.findIndex(item => item.id === form.value.id);
        if (index !== -1) {
          nearExpiryReturnList.value[index] = { ...form.value };
        }
        proxy.$modal.msgSuccess("修改成功");
        open.value = false;
        getList();
      } else {
        // æ¨¡æ‹Ÿæ–°å¢ž
        const newId = Math.max(...nearExpiryReturnList.value.map(item => item.id)) + 1;
        nearExpiryReturnList.value.push({ ...form.value, id: newId });
        total.value = nearExpiryReturnList.value.length;
        proxy.$modal.msgSuccess("新增成功");
        open.value = false;
        getList();
      }
    }
  });
}

/** åˆ é™¤æŒ‰é’®æ“ä½œ */
function handleDelete(row) {
  const deleteIds = row.id || ids.value;
  ElMessageBox.confirm('是否确认删除临期退回台账编号为"' + deleteIds + '"的数据项？', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(function() {
    // æ¨¡æ‹Ÿåˆ é™¤
    if (Array.isArray(deleteIds)) {
      deleteIds.forEach(id => {
        const index = nearExpiryReturnList.value.findIndex(item => item.id === id);
        if (index !== -1) {
          nearExpiryReturnList.value.splice(index, 1);
        }
      });
    } else {
      const index = nearExpiryReturnList.value.findIndex(item => item.id === deleteIds);
      if (index !== -1) {
        nearExpiryReturnList.value.splice(index, 1);
      }
    }
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
function handleExport() {
  proxy.download('quality/nearExpiryReturn/export', {
    ...queryParams.value
  }, `临期退回台账_${new Date().getTime()}.xlsx`);
}

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