feat(table): 统一表格日期字段展示格式为YYYY-MM-DD

gongchunyi

2026-08-12 fc62e83f73b4b8ff4714f995da4eafbb7f525d1a

 src/views/equipmentManagement/spareParts/index.vue

@@ -1,107 +1,204 @@
<template>
  <div class="spare-part-category">
      <div class="search_form">
         <el-form :inline="true" :model="queryParams" class="search-form">
            <el-form-item label="备件名称">
               <el-input
                  v-model="queryParams.name"
                  placeholder="请输入备件名称"
                  clearable
                  style="width: 240px"
               />
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="handleQuery">查询</el-button>
               <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
         </el-form>
         <div>
            <el-button type="primary" @click="addCategory" >新增</el-button>
         </div>
      </div>
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="备件列表" name="list">
        <div class="search_form">
          <el-form :inline="true" :model="queryParams" class="search-form">
            <el-form-item label="备件名称">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入备件名称"
                clearable
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="addCategory">新增</el-button>
          </div>
        </div>
            <div class="table_list">
               <PIMTable
                  rowKey="id"
                  :column="columns"
                  :tableData="renderTableData"
                  :tableLoading="loading"
                  :page="pagination"
                  :isShowPagination="true"
                  @pagination="handleSizeChange"
               >
                  <template #status="{ row }">
                     <el-tag type="success" size="small">{{ row.status }}</el-tag>
                  </template>
               </PIMTable>
            </div>

    <PIMTable
        rowKey="id"
        :column="columns"
        :tableData="renderTableData"
        :tableLoading="loading"
        :page="pagination"
        :isShowPagination="true"
        @pagination="handleSizeChange"
    >
      <template #status="{ row }">
        <el-tag type="success" size="small">{{ row.status }}</el-tag>
      </template>
    </PIMTable>
    
    <el-dialog title="分类管理" v-model="dialogVisible" width="60%">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="设备" prop="deviceLedgerIds">
        <el-dialog title="分类管理" v-model="dialogVisible" width="60%">
          <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="设备" prop="deviceLedgerIds">
              <el-select
                v-model="form.deviceLedgerIds"
                placeholder="请选择设备"
                filterable
                default-first-option
                :reserve-keyword="false"
                multiple
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in deviceOptions"
                  :key="index"
                  :label="item.deviceName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备件名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="备件编号" prop="sparePartsNo">
              <el-input v-model="form.sparePartsNo"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="quantity">
              <el-input type="number" v-model="form.quantity"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input-number
                v-model="form.price"
                placeholder="请输入价格"
                :min="0"
                :step="0.01"
                :precision="2"
                style="width: 100%"
              ></el-input-number>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="submitForm" :loading="formLoading">确定</el-button>
              <el-button @click="dialogVisible = false" :disabled="formLoading">取消</el-button>
            </span>
          </template>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane label="备件领用记录" name="usage">
        <div class="search_form">
          <el-form :inline="true" :model="usageQuery" class="search-form">
            <el-form-item label="备件名称">
              <el-input v-model="usageQuery.sparePartsName" placeholder="请输入备件名称" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="来源">
              <el-select v-model="usageQuery.sourceType" placeholder="请选择" clearable style="width: 200px">
                <el-option label="维修" :value="0" />
                <el-option label="保养" :value="1" />
                <el-option label="直接出库" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleUsageQuery">查询</el-button>
              <el-button @click="resetUsageQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="openRequisitionDialog">直接出库</el-button>
          </div>
        </div>
            <div class="table_list">
               <PIMTable
                  rowKey="rowKey"
                  :column="usageColumns"
                  :tableData="usageTableData"
                  :tableLoading="usageLoading"
                  :page="usagePagination"
                  :isShowPagination="true"
                  @pagination="handleUsagePageChange"
               />
            </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 直接出库弹窗 -->
    <el-dialog title="直接出库" v-model="requisitionDialogVisible" width="500px">
      <el-form :model="requisitionForm" :rules="requisitionRules" ref="requisitionFormRef" label-width="100px">
        <el-form-item label="设备选择" prop="deviceLedgerId">
          <el-select
            v-model="form.deviceLedgerIds"
            v-model="requisitionForm.deviceLedgerId"
            placeholder="请选择设备"
            filterable
            default-first-option
            :reserve-keyword="false"
            multiple
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in deviceOptions"
              :key="index"
              v-for="item in requisitionDeviceOptions"
              :key="item.id"
              :label="item.deviceName"
              :value="item.id"
            ></el-option>
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备件名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="备件编号" prop="sparePartsNo">
          <el-input v-model="form.sparePartsNo"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input type="number" v-model="form.quantity"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number
            v-model="form.price"
            placeholder="请输入价格"
            :min="0"
            :step="0.01"
            :precision="2"
        <el-form-item label="备件选择" prop="sparePartsId">
          <el-select
            v-model="requisitionForm.sparePartsId"
            placeholder="请选择备件"
            filterable
            clearable
            style="width: 100%"
          ></el-input-number>
            @change="onRequisitionSparePartChange"
          >
            <el-option
              v-for="item in requisitionSparePartsOptions"
              :key="item.id"
              :label="`${item.name}（库存: ${item.quantity}）`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="领用数量" prop="quantity">
          <el-input-number
            v-model="requisitionForm.quantity"
            :min="1"
            :max="selectedSparePartMaxQty"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="requisitionForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" :disabled="formLoading">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="formLoading">确定</el-button>
        </span>
        <el-button type="primary" @click="submitRequisition" :loading="requisitionLoading">确定</el-button>
        <el-button @click="requisitionDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from 'vue';
import { ref, computed, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getSparePartsList, addSparePart, editSparePart, delSparePart } from "@/api/equipmentManagement/spareParts";
import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import { getSparePartsUsagePage, outboundSpareParts } from "@/api/equipmentManagement/sparePartsUsage";

// 加载状态
const loading = ref(false);
const formLoading = ref(false);
const activeTab = ref("list");
// 对话框显示状态
const dialogVisible = ref(false);
// 编辑 ID
@@ -126,6 +223,35 @@
  size: 10,
  total: 0
});

// 备件领用记录
const usageLoading = ref(false);
const usageQuery = reactive({
  sparePartsName: "",
  sourceType: "",
});
const usagePagination = reactive({
  current: 1,
  size: 10,
  total: 0,
});
const usageTableData = ref([]);
const usageColumns = ref([
  { label: "来源", prop: "sourceText" },
  { label: "单据/记录ID", prop: "sourceId" },
  { label: "设备名称", prop: "deviceName" },
  { label: "备件名称", prop: "sparePartsName" },
  { label: "领用数量", prop: "quantity" },
  { label: "操作人", prop: "operator" },
  { label: "时间", prop: "createTime" },
]);

const handleTabChange = async (name) => {
  if (name === "usage") {
    usagePagination.current = 1;
    await fetchUsageData();
  }
};
const columns = ref([
  {
    label: "设备名称",
@@ -268,6 +394,48 @@
  }
}

const fetchUsageData = async () => {
  usageLoading.value = true;
  try {
    const res = await getSparePartsUsagePage({
      current: usagePagination.current,
      size: usagePagination.size,
      sparePartsName: usageQuery.sparePartsName || undefined,
      sourceType: usageQuery.sourceType || undefined,
    });
    if (res?.code === 200) {
      const records = res?.data?.records || [];
      usagePagination.total = res?.data?.total || 0;
      usageTableData.value = records.map((r, idx) => ({
        rowKey: r.id ?? `${usagePagination.current}-${idx}`,
        ...r,
        sourceText: r.sourceText === "" ? "-" : r.sourceText,
      }));
    } else {
      usagePagination.total = 0;
      usageTableData.value = [];
    }
  } finally {
    usageLoading.value = false;
  }
};

const handleUsageQuery = () => {
  usagePagination.current = 1;
  fetchUsageData();
};
const resetUsageQuery = () => {
  usageQuery.sparePartsName = "";
  usageQuery.sourceType = "";
  usagePagination.current = 1;
  fetchUsageData();
};
const handleUsagePageChange = (obj) => {
  usagePagination.current = obj.page;
  usagePagination.size = obj.limit;
  fetchUsageData();
};

// 查询
const handleQuery = () => {
  pagination.current = 1;
@@ -281,16 +449,10 @@
  fetchListData();
}

// 分页大小改变
const handleSizeChange = (size) => {
  pagination.size = size;
  pagination.current = 1;
  fetchListData();
}

// 当前页改变
const handleCurrentChange = (current) => {
  pagination.current = current;
// 分页变化
const handleSizeChange = ({ page, limit }) => {
  pagination.current = page;
  pagination.size = limit;
  fetchListData();
}

@@ -407,6 +569,93 @@
  }
};

// 直接出库
const requisitionDialogVisible = ref(false);
const requisitionLoading = ref(false);
const requisitionFormRef = ref(null);
const requisitionDeviceOptions = ref([]);
const requisitionSparePartsOptions = ref([]);
const selectedSparePartMaxQty = ref(1);
const requisitionForm = reactive({
  deviceLedgerId: null,
  sparePartsId: null,
  quantity: 1,
  remark: '',
});
const requisitionRules = {
  sparePartsId: [{ required: true, message: '请选择备件', trigger: 'change' }],
  quantity: [{ required: true, message: '请输入领用数量', trigger: 'blur' }],
};

const loadRequisitionOptions = async () => {
  try {
    const [deviceRes, spareRes] = await Promise.all([
      getDeviceLedger(),
      getSparePartsList({ current: 1, size: 9999 }),
    ]);
    requisitionDeviceOptions.value = deviceRes.data || [];
    requisitionSparePartsOptions.value = spareRes.data?.records || [];
  } catch (e) {
    ElMessage.error('加载选项失败');
  }
};

const openRequisitionDialog = async () => {
  requisitionForm.deviceLedgerId = null;
  requisitionForm.sparePartsId = null;
  requisitionForm.quantity = 1;
  requisitionForm.remark = '';
  selectedSparePartMaxQty.value = 1;
  await loadRequisitionOptions();
  requisitionDialogVisible.value = true;
};

const onRequisitionSparePartChange = (val) => {
  const selected = requisitionSparePartsOptions.value.find(item => item.id === val);
  selectedSparePartMaxQty.value = selected ? selected.quantity : 1;
  if (requisitionForm.quantity > selectedSparePartMaxQty.value) {
    requisitionForm.quantity = selectedSparePartMaxQty.value;
  }
};

const submitRequisition = async () => {
  if (!requisitionFormRef.value) return;
  try {
    await requisitionFormRef.value.validate();
  } catch {
    return;
  }
  if (requisitionForm.quantity <= 0) {
    ElMessage.warning('领用数量必须大于0');
    return;
  }
  const selected = requisitionSparePartsOptions.value.find(item => item.id === requisitionForm.sparePartsId);
  if (selected && requisitionForm.quantity > selected.quantity) {
    ElMessage.warning(`库存不足，当前库存为 ${selected.quantity}`);
    return;
  }
  requisitionLoading.value = true;
  try {
    const res = await outboundSpareParts({
      deviceLedgerId: requisitionForm.deviceLedgerId || undefined,
      sparePartsId: requisitionForm.sparePartsId,
      quantity: requisitionForm.quantity,
      remark: requisitionForm.remark || undefined,
    });
    if (res.code === 200) {
      ElMessage.success('领用成功');
      requisitionDialogVisible.value = false;
      fetchUsageData();
    } else {
      ElMessage.error(res.msg || '领用失败');
    }
  } catch {
    ElMessage.error('领用失败');
  } finally {
    requisitionLoading.value = false;
  }
};

// 组件挂载时获取列表数据
onMounted(() => {
  fetchListData();
@@ -430,7 +679,6 @@
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}

.el-table__header-wrapper th {