feat: 综合业务模块页面重构与交互完善

hsy

4 小时以前 2d3530a7c11557a40807ad7c0b9e302ce6ce3a9f

 src/views/inventoryManagement/vehicleFuelManagement/index.vue

@@ -1,281 +1,179 @@
<template>
  <div class="app-container">


    <!-- 查询条件 -->
    <div class="search_form">
      <div>
        <span class="search_title">车辆编号：</span>
        <el-input
          v-model="searchForm.vehicleCode"
          style="width: 200px"
          placeholder="请输入车辆编号"
          clearable
          @keyup.enter.native="handleQuery"
        />

        <span class="search_title ml10">加油时间：</span>
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          clearable
          @change="handleQuery"
        />

        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
          搜索
        </el-button>
        <el-button @click="resetSearch">重置</el-button>
        <div class="search_form">
      <div style="flex: 1; padding-right: 20px;">
        <el-row :gutter="16" style="margin-bottom: 16px;">
          <el-col :span="6" style="display: flex; align-items: center;">
            <span class="search_title" style="white-space: nowrap;">所属部门：</span>
            <el-tree-select v-model="queryParams.deptId" :data="deptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择部门" check-strictly clearable filterable style="flex: 1;" />
          </el-col>
          <el-col :span="6" style="display: flex; align-items: center;">
            <span class="search_title" style="white-space: nowrap;">加油车辆：</span>
            <el-select v-model="queryParams.vehicleId" placeholder="按车辆筛选" clearable filterable style="flex: 1;">
              <el-option v-for="item in vehicleList" :key="item.id" :label="item.plateNumber" :value="item.id" />
            </el-select>
          </el-col>
          <el-col :span="6" style="display: flex; align-items: center;">
            <span class="search_title" style="white-space: nowrap;">加油卡：</span>
            <el-select v-model="queryParams.fuelCardId" placeholder="请选择加油卡" clearable style="flex: 1;">
              <el-option v-for="item in fuelCardList" :key="item.id" :label="item.cardNumber + ' - ' + item.issuer" :value="item.id" />
            </el-select>
          </el-col>
          <el-col :span="6" style="display: flex; align-items: center;">
            <span class="search_title" style="white-space: nowrap;">状态：</span>
            <el-select v-model="queryParams.status" placeholder="状态筛选" clearable style="flex: 1;">
              <el-option label="草稿" value="0" />
              <el-option label="已提交" value="1" />
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="6" style="display: flex; align-items: center;">
            <span class="search_title" style="white-space: nowrap;">加油时间：</span>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" clearable style="flex: 1; width: 100%;" />
          </el-col>
          <el-col :span="18" style="display: flex; align-items: center;">
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-button type="primary" icon="Plus" @click="openAdd">
          新增加油记录
        </el-button>
      <div style="display: flex; align-items: flex-start; height: 100%;">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增加油记录</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table_list">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        height="calc(100vh - 18.5em)"
        height="calc(100vh - 22em)"
        :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column
          prop="vehicleCode"
          label="车辆编号"
          width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="plateNumber"
          label="车牌号码"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="fuelDate"
          label="加油日期"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="gunNo"
          label="油枪号"
          width="90"
          align="center"
        />
        <el-table-column
          prop="amount"
          label="金额(元)"
          width="100"
          align="right"
        >
        <el-table-column prop="fuelDate" label="加油日期" width="120" />
        <el-table-column prop="deptName" label="所属部门" min-width="150" show-overflow-tooltip />
        <el-table-column prop="plateNumber" label="加油车辆(牌照)" width="140" />
        <el-table-column prop="cardNumber" label="加油卡号" min-width="150" />
        <el-table-column prop="amount" label="金额(元)" width="100" align="right" />
        <el-table-column prop="liters" label="升数(L)" width="100" align="right" />
        <el-table-column prop="startMileage" label="起始里程(km)" width="120" align="right" />
        <el-table-column prop="endMileage" label="结束里程(km)" width="120" align="right" />
        <el-table-column prop="invoiceNo" label="发票号码" width="140" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <span>{{ scope.row.amount?.toFixed(2) }}</span>
            <el-tag v-if="scope.row.status === '0'" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === '1'" type="success">已提交</el-tag>
            <el-tag v-else type="info">草稿</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="liters"
          label="升数(L)"
          width="90"
          align="right"
        >
        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template #default="scope">
            <span>{{ scope.row.liters?.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="startMileage"
          label="起始里程(km)"
          width="120"
          align="right"
        />
        <el-table-column
          prop="endMileage"
          label="结束里程(km)"
          width="120"
          align="right"
        />
        <el-table-column
          prop="distance"
          label="行驶里程(km)"
          width="120"
          align="right"
        />
        <el-table-column
          prop="fuelConsumption"
          label="油耗(L/100km)"
          width="130"
          align="center"
        >
          <template #default="scope">
            <span
              :style="scope.row.isAbnormal ? 'color:#F56C6C;font-weight:600;' : ''"
            >
              {{ scope.row.fuelConsumption != null ? scope.row.fuelConsumption.toFixed(2) : '-' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="avgConsumption"
          label="车辆平均油耗"
          width="130"
          align="center"
        >
          <template #default="scope">
            <span>
              {{ scope.row.avgConsumption != null ? scope.row.avgConsumption.toFixed(2) : '-' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="异常预警" width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.isAbnormal" type="danger" size="small">
              异常
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="140" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="openEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              link
              size="small"
              @click="removeRow(scope.row)"
            >
              删除
            </el-button>
            <el-button v-if="scope.row.status === '0' || !scope.row.status" type="success" link size="small" @click="handleSubmitRow(scope.row)">提交</el-button>
            <el-button v-if="scope.row.status === '0' || !scope.row.status" type="primary" link size="small" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status === '0' || !scope.row.status" type="danger" link size="small" @click="handleDelete(scope.row)">删除</el-button>
            <el-button v-if="scope.row.status === '1'" type="warning" link size="small" @click="handleRevokeRow(scope.row)">撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="640px"
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="110px"
        label-position="right"
      >
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.size"
        @pagination="getList"
      />
    </div>
<!-- 弹窗 -->
    <el-dialog :title="title" v-model="open" width="640px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车辆编号：" prop="vehicleCode">
              <el-input
                v-model="form.vehicleCode"
                placeholder="请输入车辆编号"
              />
            <el-form-item label="加油车辆" prop="vehicleId">
              <el-select v-model="form.vehicleId" placeholder="请选择车辆(牌照)" style="width: 100%" filterable>
                <el-option
                  v-for="item in vehicleList"
                  :key="item.id"
                  :label="item.plateNumber"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号码：" prop="plateNumber">
              <el-input
                v-model="form.plateNumber"
                placeholder="请输入车牌号码"
              />
            <el-form-item label="关联加油卡" prop="fuelCardId">
              <el-select v-model="form.fuelCardId" placeholder="请选择加油卡" style="width: 100%" filterable>
                <el-option
                  v-for="item in availableFuelCardList"
                  :key="item.id"
                  :label="item.cardNumber + ' - ' + item.issuer"
                  :value="item.id"
                />
              </el-select>
              <div v-if="form.fuelCardId" style="font-size: 12px; color: #999; margin-top: 5px;">
                当前余额: {{ getFuelCardBalance(form.fuelCardId) }} 元
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="加油日期：" prop="fuelDate">
            <el-form-item label="加油日期" prop="fuelDate">
              <el-date-picker
                v-model="form.fuelDate"
                type="date"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                placeholder="请选择加油日期"
                placeholder="请选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="油枪号：" prop="gunNo">
              <el-input
                v-model="form.gunNo"
                placeholder="请输入油枪号"
              />
            <el-form-item label="发票号码" prop="invoiceNo">
              <el-input v-model="form.invoiceNo" placeholder="请输入发票号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="金额(元)：" prop="amount">
              <el-input-number
                v-model="form.amount"
                :min="0"
                :step="0.01"
                :precision="2"
                placeholder="请输入金额"
                style="width: 100%"
              />
            <el-form-item label="金额(元)" prop="amount">
              <el-input-number v-model="form.amount" :min="0" :precision="2" :step="100" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="升数(L)：" prop="liters">
              <el-input-number
                v-model="form.liters"
                :min="0"
                :step="0.01"
                :precision="2"
                placeholder="请输入升数"
                style="width: 100%"
              />
            <el-form-item label="升数(L)" prop="liters">
              <el-input-number v-model="form.liters" :min="0" :precision="2" :step="10" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="起始里程(km)：" prop="startMileage">
              <el-input-number
                v-model="form.startMileage"
                :min="0"
                :step="1"
                placeholder="请输入起始里程"
                style="width: 100%"
              />
            <el-form-item label="起始里程(km)" prop="startMileage">
              <el-input-number v-model="form.startMileage" :min="0" :precision="2" :step="100" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束里程(km)：" prop="endMileage">
              <el-input-number
                v-model="form.endMileage"
                :min="0"
                :step="1"
                placeholder="请输入结束里程"
                style="width: 100%"
              />
            <el-form-item label="结束里程(km)" prop="endMileage">
              <el-input-number v-model="form.endMileage" :min="0" :precision="2" :step="100" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">保 存</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
@@ -283,274 +181,229 @@
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/utils/request';
import { 
  listFuelRecord, 
  addFuelRecord, 
  updateFuelRecord, 
  delFuelRecord,
  listVehicleInfo,
  listAllFuelCard,
  submitFuelRecord,
  revokeFuelRecord
} from '@/api/inventoryManagement/vehicle';

// 模拟加油记录数据
const rawRecords = ref([
  {
    id: 1,
    vehicleCode: "CL-202401",
    plateNumber: "粤A12345",
    fuelDate: "2024-12-01",
    gunNo: "01",
    amount: 500,
    liters: 70,
    startMileage: 12000,
    endMileage: 12600,
  },
  {
    id: 2,
    vehicleCode: "CL-202401",
    plateNumber: "粤A12345",
    fuelDate: "2024-12-15",
    gunNo: "02",
    amount: 520,
    liters: 72,
    startMileage: 12600,
    endMileage: 13250,
  },
  {
    id: 3,
    vehicleCode: "CL-202402",
    plateNumber: "粤B67890",
    fuelDate: "2024-12-05",
    gunNo: "03",
    amount: 430,
    liters: 60,
    startMileage: 8000,
    endMileage: 8520,
  },
  {
    id: 4,
    vehicleCode: "CL-202402",
    plateNumber: "粤B67890",
    fuelDate: "2024-12-20",
    gunNo: "01",
    amount: 450,
    liters: 63,
    startMileage: 8520,
    endMileage: 9000,
  },
  {
    id: 5,
    vehicleCode: "CL-202401",
    plateNumber: "粤A12345",
    fuelDate: "2025-01-05",
    gunNo: "01",
    amount: 700,
    liters: 90,
    startMileage: 13250,
    endMileage: 13600, // 明显异常油耗
  },
]);
const loading = ref(true);
const tableData = ref([]);
const total = ref(0);
const open = ref(false);
const title = ref("");
const formRef = ref(null);

// 查询表单
const searchForm = reactive({
  vehicleCode: "",
  dateRange: [],
const vehicleList = ref([]);
const fuelCardList = ref([]);
const deptOptions = ref([]);
const dateRange = ref([]);

const availableFuelCardList = computed(() => {
  return fuelCardList.value.filter(item => item.status !== 'CANCELLED');
});

// 表格数据（包含计算字段）
const tableData = ref([]);
const queryParams = reactive({
  current: 1,
  size: 10,
  deptId: undefined,
  vehicleId: undefined,
  fuelCardId: undefined,
  beginDate: undefined,
  endDate: undefined
});

// 弹窗 & 表单
const dialogVisible = ref(false);
const dialogTitle = ref("新增加油记录");
const isEdit = ref(false);
const formRef = ref(null);
const form = reactive({
  id: null,
  vehicleCode: "",
  plateNumber: "",
  fuelDate: "",
  gunNo: "",
  amount: null,
  liters: null,
  startMileage: null,
  endMileage: null,
  id: undefined,
  vehicleId: undefined,
  fuelCardId: undefined,
  fuelDate: undefined,
  amount: undefined,
  liters: undefined,
  startMileage: undefined,
  endMileage: undefined,
  invoiceNo: undefined,
  remark: undefined
});

const rules = {
  vehicleCode: [{ required: true, message: "请输入车辆编号", trigger: "blur" }],
  plateNumber: [{ required: true, message: "请输入车牌号码", trigger: "blur" }],
  fuelDate: [{ required: true, message: "请选择加油日期", trigger: "change" }],
  gunNo: [{ required: true, message: "请输入油枪号", trigger: "blur" }],
  amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
  liters: [{ required: true, message: "请输入升数", trigger: "blur" }],
  startMileage: [{ required: true, message: "请输入起始里程", trigger: "blur" }],
  endMileage: [{ required: true, message: "请输入结束里程", trigger: "blur" }],
  vehicleId: [{ required: true, message: "加油车辆不能为空", trigger: "change" }],
  fuelCardId: [{ required: true, message: "加油卡不能为空", trigger: "change" }],
  fuelDate: [{ required: true, message: "加油日期不能为空", trigger: "change" }],
  amount: [{ required: true, message: "金额不能为空", trigger: "blur" }]
};

// 重新计算油耗、平均油耗和异常预警
const recomputeTable = () => {
  const records = rawRecords.value;

  // 1. 先按车辆统计平均油耗
  const stats = {};
  records.forEach((r) => {
    const distance = r.endMileage - r.startMileage;
    if (distance <= 0 || !r.liters) return;
    const cons = (r.liters / distance) * 100; // L/100km
    if (!stats[r.vehicleCode]) {
      stats[r.vehicleCode] = { totalCons: 0, count: 0 };
    }
    stats[r.vehicleCode].totalCons += cons;
    stats[r.vehicleCode].count += 1;
function getDictData() {
  request({url: '/system/user/deptTree', method: 'get'}).then(res => {
    deptOptions.value = res.data || [];
  });

  const avgMap = {};
  Object.keys(stats).forEach((key) => {
    avgMap[key] = stats[key].totalCons / stats[key].count;
  listVehicleInfo({current: 1, size: 1000}).then(res => {
    vehicleList.value = res.data.records;
  });
  listAllFuelCard().then(res => {
    fuelCardList.value = res.data;
  });
}

  // 2. 按筛选条件过滤并补充计算字段
  const filtered = records
    .filter((r) => {
      if (
        searchForm.vehicleCode &&
        !r.vehicleCode.includes(searchForm.vehicleCode.trim())
      ) {
        return false;
      }
      if (Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
        const [start, end] = searchForm.dateRange;
        if (r.fuelDate < start || r.fuelDate > end) {
          return false;
function getFuelCardBalance(id) {
  const c = fuelCardList.value.find(item => item.id === id);
  return c ? c.currentBalance : 0;
}


const statTotalAmount = ref(0);
const statTotalLiters = ref(0);

function getStats() {
  const query = { ...queryParams, current: 1, size: 10000 };
  listFuelRecord(query).then(res => {
    const arr = res.data.records || [];
    statTotalAmount.value = arr.reduce((sum, item) => sum + (item.amount || 0), 0);
    statTotalLiters.value = arr.reduce((sum, item) => sum + (item.liters || 0), 0);
  });
}

function getList() {
  loading.value = true;
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.beginDate = dateRange.value[0];
    queryParams.endDate = dateRange.value[1];
  } else {
    queryParams.beginDate = undefined;
    queryParams.endDate = undefined;
  }
  listFuelRecord(queryParams).then(response => {
    tableData.value = response.data.records;
    total.value = response.data.total;
    loading.value = false;
    getStats();
  }).catch(() => {
    loading.value = false;
    getStats();
  });
}

function handleQuery() {
  queryParams.current = 1;
  getList();
}

function resetQuery() {
  queryParams.deptId = undefined;
  queryParams.vehicleId = undefined;
  queryParams.fuelCardId = undefined;
  dateRange.value = [];
  handleQuery();
}

function reset() {
  Object.assign(form, {
    id: undefined,
    vehicleId: undefined,
    fuelCardId: undefined,
    fuelDate: undefined,
    amount: undefined,
    liters: undefined,
    startMileage: undefined,
    endMileage: undefined,
    invoiceNo: undefined,
    remark: undefined
  });
  if (formRef.value) formRef.value.resetFields();
}

function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增加油记录";
}

function handleUpdate(row) {
  reset();
  Object.assign(form, row);
  open.value = true;
  title.value = "修改加油记录";
}

function submitForm() {
  formRef.value.validate(valid => {
    if (valid) {
      if (!form.id) {
        const bal = getFuelCardBalance(form.fuelCardId);
        if (bal < form.amount) {
          ElMessage.warning("该加油卡余额不足！当前余额: " + bal);
        }
      }
      return true;
    })
    .map((r) => {
      const distance = r.endMileage - r.startMileage;
      const fuelConsumption =
        distance > 0 && r.liters
          ? (r.liters / distance) * 100
          : null;
      const avgConsumption =
        avgMap[r.vehicleCode] != null ? avgMap[r.vehicleCode] : null;
      const isAbnormal =
        avgConsumption != null &&
        fuelConsumption != null &&
        fuelConsumption > avgConsumption * 1.2;

      return {
        ...r,
        distance,
        fuelConsumption,
        avgConsumption,
        isAbnormal,
      };
    });

  tableData.value = filtered;
};

// 查询
const handleQuery = () => {
  recomputeTable();
};

const resetSearch = () => {
  searchForm.vehicleCode = "";
  searchForm.dateRange = [];
  recomputeTable();
};

// 行样式（异常高亮）
const tableRowClassName = ({ row }) => {
  if (row.isAbnormal) {
    return "row-abnormal";
  }
  return "";
};

// 新增
const openAdd = () => {
  dialogTitle.value = "新增加油记录";
  isEdit.value = false;
  Object.assign(form, {
    id: null,
    vehicleCode: "",
    plateNumber: "",
    fuelDate: "",
    gunNo: "",
    amount: null,
    liters: null,
    startMileage: null,
    endMileage: null,
  });
  dialogVisible.value = true;
};

// 编辑
const openEdit = (row) => {
  dialogTitle.value = "编辑加油记录";
  isEdit.value = true;
  Object.assign(form, row);
  dialogVisible.value = true;
};

// 保存
const handleSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (!valid) return;

    if (form.endMileage <= form.startMileage) {
      ElMessage.warning("结束里程必须大于起始里程");
      return;
    }

    if (isEdit.value) {
      const index = rawRecords.value.findIndex((r) => r.id === form.id);
      if (index !== -1) {
        rawRecords.value[index] = { ...form };
      
      if (form.id != null) {
        updateFuelRecord(form).then(response => {
          ElMessage.success("修改成功");
          open.value = false;
          getList();
          getDictData();
        });
      } else {
        addFuelRecord(form).then(response => {
          ElMessage.success("新增成功");
          open.value = false;
          getList();
          getDictData();
        });
      }
      ElMessage.success("加油记录已更新");
    } else {
      const newId = rawRecords.value.length
        ? Math.max(...rawRecords.value.map((r) => r.id)) + 1
        : 1;
      rawRecords.value.push({ ...form, id: newId });
      ElMessage.success("加油记录已新增");
    }
    dialogVisible.value = false;
    recomputeTable();
  });
};
}

const handleCancel = () => {
  dialogVisible.value = false;
};

// 删除
const removeRow = (row) => {
  ElMessageBox.confirm("是否确认删除该加油记录？", "删除提示", {
    confirmButtonText: "确认",
function handleDelete(row) {
  ElMessageBox.confirm('是否确认删除该草稿记录？', "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      rawRecords.value = rawRecords.value.filter((r) => r.id !== row.id);
      recomputeTable();
      ElMessage.success("删除成功");
    })
    .catch(() => {});
};
    type: "warning"
  }).then(function() {
    return delFuelRecord(row.id);
  }).then(() => {
    getList();
    getDictData();
    ElMessage.success("删除成功");
  });
}

function cancel() {
  open.value = false;
  reset();
}

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

<style scoped lang="scss">
.dialog-footer {
  text-align: right;
function handleSubmitRow(row) {
  ElMessageBox.confirm('确认提交该笔加油记录吗？提交后将从加油卡中扣除余额', '提示', { type: 'warning' }).then(() => {
    return submitFuelRecord(row.id);
  }).then(() => {
    ElMessage.success('提交成功');
    getList();
    getStats();
  }).catch(() => {});
}

:deep(.row-abnormal) {
  background-color: #fff5f5;
function handleRevokeRow(row) {
  ElMessageBox.confirm('确认撤回该笔加油记录吗？撤回后将退还加油卡余额', '提示', { type: 'warning' }).then(() => {
    return revokeFuelRecord(row.id);
  }).then(() => {
    ElMessage.success('撤回成功');
    getList();
    getStats();
  }).catch(() => {});
}
</style>

</script>