maintenance_system/src/views/materialManagement/inventoryManagement.vue

<template>
    <div class="inventoryManagement">
        <!-- <TitleComponent title="出入库单管理" subtitle="管理光伏和风电设备备品备件的出入库记录" /> -->
        <el-row :gutter="20">
            <el-col :span="16" class="list" style="flex-grow: 1;display: flex;">
                <el-card style="border-radius: 10px;height: 100%;display: flex;flex-direction: column;flex: 1;">
                    <div style="height: 100%;flex: 1;">
                        <div class="top">
                            <div class="title">单据列表</div>
                            <div class="button-actions">
                                <button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
                                <button :class="{ active: type === 'ruku' }" @click="changeType('ruku')">入库单</button>
                            </div>
                        </div>
                        <div class="content" style="height: 100%;flex: 1;">
                            <!-- 第一排：四个输入项 -->
                            <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
                                :leave-active-class="proxy?.animate.searchAnimate.leave">
                                <div v-show="showSearch" class="mb-[10px]">
                                    <el-card shadow="hover">
                                        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                                            <el-form-item label="单据编号" prop="danjvNumber">
                                                <el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
                                                    clearable @keyup.enter="handleQuery" />
                                            </el-form-item>
                                            <el-form-item label="设备类型" prop="shebeiType">
                                                <el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型"
                                                    clearable>
                                                    <el-option v-for="dict in wz_device_type" :key="dict.value"
                                                        :label="dict.label" :value="dict.value" />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="审核状态" prop="auditStatus">
                                                <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态"
                                                    clearable>
                                                    <el-option v-for="dict in shenheStatus" :key="dict.value"
                                                        :label="dict.label" :value="dict.value" />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="开始日期" prop="startDate">
                                                <el-date-picker v-model="queryParams.startDate" type="date"
                                                    placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                                    style="width: 100%" />
                                            </el-form-item>
                                            <el-form-item label="结束日期" prop="endDate">
                                                <el-date-picker v-model="queryParams.endDate" type="date"
                                                    placeholder="请选择结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                                    style="width: 100%" />
                                            </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-card>
                                </div>
                            </transition>
                            <div style="margin-top: 10px; display: flex; justify-content: flex-end;">
                                <el-button type="primary" @click="handleAdd">+{{ type === 'chuku' ? '添加出库单'
                                    : '添加入库单' }}</el-button>
                            </div>
                            <el-table v-loading="loading" border :data="churukudanList"
                                style="width: 100%;margin-top: 15px;">
                                <el-table-column label="单据编号" align="center" prop="danjvNumber" />
                                <el-table-column label="设备类型" align="center" prop="shebeiType">
                                    <template #default="scope">
                                        <span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="经手人" align="center" prop="jingshourenName" />
                                <el-table-column label="操作时间" align="center" prop="updateTime" />
                                <el-table-column label="总数量" align="center" prop="zonNumber" width="80px" />
                                <el-table-column label="审核状态" align="center" prop="shenheStatus">
                                    <template #default="scope">
                                        <el-tag :type="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
                                            {{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="单据类型" align="center" prop="danjvType">
                                    <template #default="scope">
                                        <el-tag :type="getTagType(danjvType, scope.row.danjvType)">
                                            {{ getTagLabel(danjvType, scope.row.danjvType) }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                    <template #default="scope">
                                        <el-button link type="primary" @click="handleUpdate(scope.row)"
                                            v-hasPermi="['personnel:churukudan:edit']">修改</el-button>
                                        <el-button link type="primary" @click="handleDetail(scope.row)"
                                            v-hasPermi="['personnel:churukudan:query']">详情</el-button>
                                        <el-button link type="primary" @click="handleDelete(scope.row)"
                                            v-hasPermi="['personnel:churukudan:remove']">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="tool">
                                <div class="pagination-section">
                                    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                                        v-model:limit="queryParams.pageSize" @pagination="getList" />
                                </div>
                            </div>
                        </div>
                    </div>

                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="border-radius: 10px;">
                    <div class="item-box">
                        <div class="title">系统信息</div>
                        <div class="content">
                            <SystemInfo />
                        </div>
                    </div>
                    <div class="item-box">
                        <div class="title">数据分析</div>
                        <div class="content">
                            <DataAnalysis />
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 添加或修改运维-物资-出入库单管理对话框 -->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
            <el-form ref="churukudanFormRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="单据类型" prop="danjvType">
                    <el-select v-model="form.danjvType" placeholder="请选择单据类型">
                        <el-option v-for="dict in danjvType" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单据编号" prop="danjvNumber">
                    <el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
                </el-form-item>
                <el-form-item label="设备类型" prop="shebeiType">
                    <el-select v-model="form.shebeiType" placeholder="请选择设备类型">
                        <el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="经手人id" prop="jingshourenId">
                    <el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
                </el-form-item>
                <el-form-item label="经手人" prop="jingshourenName">
                    <el-input v-model="form.jingshourenName" placeholder="请输入经手人" />
                </el-form-item>
                <el-form-item label="联系电话" prop="contactNumber">
                    <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
                </el-form-item>
                <el-form-item label="总数量" prop="zonNumber">
                    <el-input v-model="form.zonNumber" placeholder="请输入总数量" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 详情对话框 -->
        <el-dialog title="出入库单详情" v-model="detailVisible" width="500px" append-to-body>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="单据类型">{{ getTagLabel(danjvType, detailData.danjvType)
                }}</el-descriptions-item>
                <el-descriptions-item label="单据编号">{{ detailData.danjvNumber }}</el-descriptions-item>
                <el-descriptions-item label="设备类型">{{ getTagLabel(wz_device_type, detailData.shebeiType)
                }}</el-descriptions-item>
                <el-descriptions-item label="经手人">{{ detailData.jingshourenName }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ detailData.contactNumber }}</el-descriptions-item>
                <el-descriptions-item label="总数量">{{ detailData.zonNumber }}</el-descriptions-item>
                <el-descriptions-item label="审核状态">
                    <dict-tag :options="shenheStatus" :value="detailData.shenheStatus"></dict-tag>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="detailVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<style scoped>
.inventoryManagement {
    background-color: #F2F8FC;
    padding: 20px;
}

.button-actions button {
    background: none;
    border: 1px solid #e0e0e0;
    padding: 5px 12px;
    border-radius: 4px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.button-actions button.active {
    background-color: #186DF5;
    color: white;
    border-color: #186DF5;
}

.top {
    display: flex;
    justify-content: space-between;

    .title {
        font-family: "Alibaba-PuHuiTi-Bold";
        color: rgba(0, 30, 59, 1);
        font-weight: bold;
    }
}

.list .content {
    margin-top: 20px;
}

.menu {
    background-color: #F2F2F2;
    padding: 20px;
}

/* 分页区域样式 */
.pagination-section {
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info {
    font-size: 14px;
    color: #606266;
}

.pagination-controls .el-pagination {
    margin: 0;
}


.pagination-controls .el-pagination button {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
}

.pagination-controls .el-pagination .el-pager li {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
}

.pagination-controls .el-pagination .el-pager li.active {
    background-color: #409eff;
    color: #fff;
}

.tool {

    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.item-box {
    .title {
        font-family: "Alibaba-PuHuiTi-Bold";
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(0, 30, 59, 1);
        margin-top: 10px;
    }
}

/* 详情弹窗样式 */
.detail-container {
    padding: 10px 0;
}

.detail-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-label {
    font-weight: 500;
    color: #606266;
    width: 120px;
}

.detail-value {
    color: #303133;
    flex: 1;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0;
}

::v-deep(.el-card__body) {
    height: 100%;
}
</style>
<script setup lang="ts">
import SystemInfo from './components/SystemInfo.vue';
import DataAnalysis from './components/DataAnalysis.vue';
import { ref, computed } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountBar } from '@/api/wuziguanli/churuku/index';
import { ChurukudanVO, ChurukudanQuery, ChurukudanForm } from '@/api/wuziguanli/churuku/types';
const { wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type'));

import { getCurrentMonthDates } from '@/utils/getDate';
const currentMonthDates = getCurrentMonthDates();
// 导入用户store
import { useUserStore } from '@/store/modules/user';
// 获取用户store
const userStore = useUserStore();

const churukudanList = ref<ChurukudanVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const total = ref(0);
// 单据类型切换变量 - 默认出库单
const type = ref<string>('chuku');

/** 切换单据类型 */
const changeType = (newType: string) => {
    type.value = newType;
    // 更新查询参数
    queryParams.value.pageNum = 1;
    queryParams.value.danjvType = newType === 'chuku' ? '1' : '2';
    // 重新加载数据
    getList();
}

// 单据类型
const danjvType = ref([
    {
        value: '1',
        label: '出库单',
        type: 'primary'
    },
    {
        value: '2',
        label: '入库单',
        type: 'success'
    }
]);
// 审核类型
const shenheStatus = ref([
    {
        value: 'draft',
        label: '草稿',
        type: 'primary'
    },
    {
        value: 'waiting',
        label: '待审核',
        type: 'warning',
    },
    {
        value: 'finish',
        label: '已完成',
        type: 'success'
    }
])
// 根据字典数组和值获取标签类型
const getTagType = (dictArray: any[], value: any): string => {
    if (!dictArray || !value) return '';
    const item = dictArray.find(item => item.value === value);
    return item?.type || '';
}

// 根据字典数组和值获取标签文本
const getTagLabel = (dictArray: any[], value: any): string => {
    if (!dictArray || !value) return '';
    const item = dictArray.find(item => item.value === value);
    return item?.label || value;
}

const queryFormRef = ref<ElFormInstance>();
const churukudanFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

// 详情弹窗显示状态
const detailVisible = ref(false);

// 详情数据
const detailData = ref<ChurukudanVO>({} as ChurukudanVO);

const initFormData: ChurukudanForm = {
    id: undefined,
    projectId: undefined,
    danjvNumber: undefined,
    shebeiType: undefined,
    jingshourenId: undefined,
    jingshourenName: undefined,
    contactNumber: undefined,
    zonNumber: undefined,
    shenheStatus: undefined,
    danjvType: undefined,
    updateTime: undefined,
    auditStatus: undefined,
}
const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        danjvNumber: undefined,
        shebeiType: undefined,
        shenheStatus: undefined,
        startDate: undefined,
        endDate: undefined,
        auditStatus: undefined,
        danjvType: '1', // 默认显示出库单
        params: {
        }
    },
    rules: {
        shebeiType: [
            { required: true, message: "设备类型不能为空", trigger: "change" }
        ],
        jingshourenId: [
            { required: true, message: "经手人id不能为空", trigger: "blur" }
        ],
        jingshourenName: [
            { required: true, message: "经手人不能为空", trigger: "blur" }
        ],
        zonNumber: [
            { required: true, message: "总数量不能为空", trigger: "blur" }
        ],
        danjvType: [
            { required: true, message: "单据状态不能为空", trigger: "change" }
        ],
    }
});

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

/** 查询运维-物资-出入库单管理列表 */
const getList = async () => {
    loading.value = true;
    try {
        const res = await listChurukudan(queryParams.value);
        churukudanList.value = res.rows || [];
        total.value = res.total || 0;
    } catch (error) {
        console.error('获取出入库单列表失败:', error);
        proxy?.$modal.msgError("获取数据失败，请稍后重试");
        churukudanList.value = [];
        total.value = 0;
    } finally {
        loading.value = false;
    }
}

/** 取消按钮 */
const cancel = () => {
    reset();
    dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
    form.value = { ...initFormData };
    churukudanFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
    // 检查日期范围筛选条件
    if ((queryParams.value.startDate && !queryParams.value.endDate) ||
        (!queryParams.value.startDate && queryParams.value.endDate)) {
        proxy?.$modal.msgWarning("时间范围筛选必须同时选择开始日期和结束日期");
        return;
    }
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}


/** 新增按钮操作 */
const handleAdd = () => {
    reset();
    if (userStore.selectedProject && userStore.selectedProject.id) {
        form.value.projectId = userStore.selectedProject.id;
    }
    // 根据当前选择的类型自动设置单据类型
    form.value.danjvType = type.value === 'chuku' ? '1' : '2';
    dialog.visible = true;
    dialog.title = type.value === 'chuku' ? "添加出库单" : "添加入库单";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: ChurukudanVO) => {
    reset();
    const _id = row?.id || ids.value[0];
    if (!_id) {
        proxy?.$modal.msgWarning("请选择要修改的数据");
        return;
    }
    try {
        const res = await getChurukudan(_id);
        Object.assign(form.value, res.data);
        dialog.visible = true;
        dialog.title = "修改运维-物资-出入库单管理";
    } catch (error) {
        console.error('获取出入库单详情失败:', error);
        proxy?.$modal.msgError("获取数据失败，请稍后重试");
    }
}

/** 提交按钮 */
const submitForm = () => {
    churukudanFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            try {
                if (form.value.id) {
                    await updateChurukudan(form.value);
                    proxy?.$modal.msgSuccess("修改成功");
                } else {
                    await addChurukudan(form.value);
                    proxy?.$modal.msgSuccess("添加成功");
                }
                dialog.visible = false;
                await getList();
            } catch (error) {
                console.error('保存出入库单失败:', error);
                proxy?.$modal.msgError("操作失败，请稍后重试");
            } finally {
                buttonLoading.value = false;
            }
        }
    });
}

/** 详情按钮操作 */
const handleDetail = async (row?: ChurukudanVO) => {
    if (!row?.id) {
        proxy?.$modal.msgWarning("请选择要查看详情的数据");
        return;
    }
    try {
        const res = await getChurukudan(row.id);
        detailData.value = res.data || {} as ChurukudanVO;
        detailVisible.value = true;
    } catch (error) {
        console.error('获取出入库单详情失败:', error);
        proxy?.$modal.msgError("获取详情失败，请稍后重试");
    }
}

/** 删除按钮操作 */
const handleDelete = async (row?: ChurukudanVO) => {
    const _ids = row?.id || ids.value;
    if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
        proxy?.$modal.msgWarning("请选择要删除的数据");
        return;
    }
    try {
        const confirmed = await proxy?.$modal.confirm('是否确认删除运维-物资-出入库单管理编号为"' + _ids + '"的数据项？');
        if (!confirmed) return;
        loading.value = true;
        await delChurukudan(_ids);
        proxy?.$modal.msgSuccess("删除成功");
        await getList();
    } catch (error) {
        console.error('删除出入库单失败:', error);
        proxy?.$modal.msgError("删除失败，请稍后重试");
    } finally {
        loading.value = false;
    }
}

// 柱状图数据获取
const fetchChuRuKuCountBarData = async () => {
    if (!queryParams.value.projectId) {
        return;
    }
    let data = {
        projectId: queryParams.value.projectId,
        startDate: currentMonthDates[0].fullDate,
        endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
    }
    try {
        const res = await getChuRuKuCountBar(data);
        console.log(res);
        // 这里可以添加数据处理和图表更新的逻辑
    } catch (error) {
        console.error('获取柱状图数据失败:', error);
        // 可以选择是否显示错误提示，根据UI需求决定
        // proxy?.$modal.msgError("获取统计数据失败");
    }
}

// 监听用户选择的项目变化
watch(() => userStore.selectedProject, (newProject) => {
    if (newProject && newProject.id) {
        queryParams.value.projectId = newProject.id;
        // 只在新增表单时设置projectId，编辑表单保留原有值
        if (!form.value.id) {
            form.value.projectId = newProject.id;
        }
        // 调用getList刷新数据
        getList();
        fetchChuRuKuCountBarData();
    }
}, { immediate: true, deep: true });
onMounted(() => {
    getList();
    fetchChuRuKuCountBarData();
});

// 组件卸载时清空projectId
onUnmounted(() => {
    queryParams.value.projectId = undefined;
    form.value.projectId = undefined;
});
</script>