1、优化设备领用 2、优化设备列表

zhang_12370

3 天以前 3e1fb69d30b38230988a102b651b464c05283675

 src/views/equipment/management/index.vue

@@ -30,23 +30,20 @@

      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button :icon="Plus" type="primary" @click="handleAdd"
          >新建</el-button
        <el-button :icon="Plus" type="primary" v-show="activeTab === 'management'" @click="handleAdd"
          >设备新增</el-button
        >
        <el-button :icon="Delete" type="danger" @click="handleDelete"
        <el-button :icon="Plus" type="primary" v-show="activeTab === 'equipmentRequisition'" @click="handleAdd"
          >领用</el-button
        >
        <el-button :icon="Delete" type="danger" v-show="activeTab === 'management'" @click="handleDelete"
          >删除</el-button
        >
        <!-- <el-button
          v-show="canExport"
          :icon="Download"
          type="info"
          @click="handleExport"
          >导出</el-button
        > -->
      </el-row>
      <!-- 表格组件 -->
      <div>
        <data-table
          :showOverflowTooltip="false"
          :border="true"
          :columns="columns"
          :loading="loading"
@@ -58,10 +55,11 @@
          @selection-change="handleSelectionChange"
          :operations="['edit', 'viewRow']"
          :operationsWidth="200"
          
        >
          <!-- 字段名称列的自定义插槽 - 显示为标签 -->
          <template
            v-if="tabName === 'coalQualityMaintenance'"
            v-if="activeTab === 'coalQualityMaintenance'"
            #fieldIds="{ row }"
          >
            <template
@@ -76,12 +74,10 @@
                style="margin-right: 4px; margin-bottom: 2px"
                type="primary"
              >
                {{ getFieldDisplayName(field.trim()) }}
              </el-tag>
            </template>
            <template v-else>
              <el-tag size="small" type="primary">
                {{ getFieldDisplayName(row.fieldIds) || "--" }}
              </el-tag>
            </template>
          </template>
@@ -96,465 +92,280 @@
        @pagination="handPagination"
      />
      <managementDialog
      
      v-if="activeTab == 'management'"
        v-model:copyForm="copyForm"
        v-model:managementFormDialog="manaDialog"
        :addOrEdit="addOrEdit"
        :form="form"
        @submit="getList"
      ></managementDialog>
      <EquipmentRequisition
        v-if="activeTab == 'equipmentRequisition'"
        v-model="equipmentRequisitionDialog"
        :formData="form"
        :maxQuantity="getMaxQuantity()"
        :addOrEdit="addOrEdit"
        @submit="onEquipmentRequisitionSubmit"
      />
      <!-- <UsageRecord
        v-if="activeTab == 'usageRecord'"
        v-model:copyForm="copyForm"
        v-model:usageRecordDialog="usageRecordDialog"
        :addOrEdit="addOrEdit"
        :form="form"
        @submit="getList"
      /> -->
    </el-card>
  </div>
</template>

<script setup>
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  nextTick,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Download, Plus } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { Delete, Plus } from "@element-plus/icons-vue";

// ===== 组件导入 =====
// 组件导入
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination";
import managementDialog from "./mould/managementDialog.vue";
// ===== API 服务导入 =====
import { delSupply, getSupply } from "@/api/basicInformation/supplier.js";
import { useDelete } from "@/hooks/useDelete.js";
import { testUserList } from "@/api/tool/publicInterface.js";
const { proxy } = getCurrentInstance();
import EquipmentRequisition from "./mould/equipmentRequisitionDialog.vue";
import UsageRecord from "./mould/usageRecord.vue";

// ===== 响应式状态管理 =====
const dialogFormVisible = ref(false);
// API 服务导入
import { useDelete } from "@/hooks/useDelete.js";
import { getManagementList, delEquipment } from "@/api/equipment/management/index.js";
import { getUsageRecordList } from "@/api/equipment/requisition/index.js";

// 响应式状态管理
const form = ref({});
const title = ref("");
const copyForm = ref({});
const addOrEdit = ref("add");

// 数据缓存映射
const userList = ref([]);
const userMap = ref({}); // 用户ID -> 用户名映射表
const addressMap = ref({}); // 地址ID -> 地址信息映射表
const coalFieldList = ref([]); // 煤质字段列表

// 页面状态控制
const tabName = ref("management");
const manaDialog = ref(false);
const equipmentRequisitionDialog = ref(false);
const usageRecordDialog = ref(false);
const loading = ref(false);
const activeTab = ref("management");
const selectedRows = ref([]);
const tableData = ref([]);

// 分页状态管理
// 分页状态
const pageNum = ref(1);
const pageSizes = ref(10);
const total = ref(0);

// 表格状态管理
const selectedRows = ref([]);
const tableData = ref([]);
const columns = ref();

// 查询参数
const queryParams = reactive({});

// 地址选择数据
const addressSelectOptions = ref([]);

// ===== 配置常量 =====

// 标签页配置
const tabs = reactive([
  { name: "management", label: "供应商信息" },
  { name: "customer", label: "客户信息" },
]);

// ===== 工具函数 =====


/**
 * 构建地址映射表
 * @param {Array} areaData - 地址数据
 * @description 递归构建地址映射表，支持多级地址查找
 */
const buildAddressMap = (areaData) => {
  const buildMap = (list, pathList = []) => {
    list.forEach((item) => {
      const currentPath = [...pathList, item.label];
      addressMap.value[item.id] = {
        name: item.label,
        fullPath: currentPath.join(" / "),
      };
      if (item.children && item.children.length > 0) {
        buildMap(item.children, currentPath);
      }
    });
  };
  buildMap(areaData);
};

/**
 * 格式化地址数组为显示字符串
 * @param {Array} addressIds - 地址ID数组
 * @returns {string} 格式化后的地址字符串
 * @description 将地址ID数组转换为可读的地址字符串
 */
const formatAddressArray = (addressIds) => {
  if (
    !addressMap.value ||
    Object.keys(addressMap.value).length === 0 ||
    !addressIds ||
    !Array.isArray(addressIds) ||
    addressIds.length === 0 ||
    addressIds.every((id) => !id)
  ) {
    return "--";
  }

  const addressNames = addressIds.map(
    (id) => addressMap.value[id]?.name || "--"
  );

  if (addressNames.every((name) => name === "--")) {
    return "--";
  }

  return addressNames.filter((name) => name !== "--").join(" / ");
};

/**
 * 获取用户列表数据并构建映射表
 * @description 获取用户数据并构建ID到用户名的映射关系
 */
const getUserList = async () => {
  try {
    const res = await testUserList();
    console.log("获取用户列表数据:", res);
    console.log("userMap:", userMap.value);
    if (res && res.data) {
      userList.value = res.data;
      userList.value.forEach((user) => {
        userMap.value[user.userId] = user.nickName;
      });
    }
  } catch (error) {
    console.error("获取用户列表失败:", error);
  }
};

/**
 * 根据字段ID获取字段显示名称
 * @param {string|number} fieldId - 字段ID
 * @returns {string} 字段显示名称
 * @description 通过字段ID匹配对应的字段名称
 */
const getFieldDisplayName = (fieldId) => {
  if (!fieldId) return "--";

  const numId = parseInt(fieldId);
  const matchedField = coalFieldList.value.find((item) => item.id === numId);

  return matchedField ? matchedField.fieldName : numId;
};

/**
 * 当前标签页是否支持导出功能
 */
const canExport = computed(() => {
  return ["management"].includes(tabName.value);
const queryParams = reactive({
  searchAll: ""
});

/**
 * 搜索框占位符文本
 */
const searchPlaceholder = computed(() => {
  const placeholderMap = {
    management: "供应商/统一识别码/详细地址",
  };
  return placeholderMap[tabName.value] || "请输入搜索信息";
});
// 标签页配置 - 便于后续扩展
const tabsConfig = {
  management: {
    label: "设备列表",
    searchPlaceholder: "设备编号/设备名称/规格型号",
    showSearch: true,
    api: getManagementList,
    deleteApi: delEquipment,
    columns: [
      { prop: "equipmentNo", label: "设备编号", minWidth: 100 },
      { prop: "equipmentName", label: "设备名称", minWidth: 100 },
      { prop: "quantity", label: "总数量", minWidth: 100 },
      { prop: "usedNo", label: "已使用数量", minWidth: 100 },
      { prop: "specification", label: "规格型号", minWidth: 100 },
      { prop: "purchaseDate", label: "采购日期", minWidth: 100 },
      { prop: "purchasePrice", label: "采购价格", minWidth: 100 },
    ]
  },
  equipmentRequisition:{
    label: "设备领用",
    searchPlaceholder: "设备编号/设备名称/规格型号",
    showSearch: true,
    api: getUsageRecordList,
    deleteApi: null,
    columns: [
      { prop: "userName", label: "领用人", minWidth: 100 },
      { prop: "equipmentNo", label: "设备编号", minWidth: 100 },
      { prop: "equipmentName", label: "设备名称", minWidth: 100 },
      { prop: "usageQuantity", label: "领用数量", minWidth: 100 },
      { 
        prop: "equipmentStatus", 
        label: "使用状态", 
        minWidth: 100,
        formatter: (row) => row.equipmentStatus == "0" ? "使用中" : "已归还"
      },
      { prop: "usageStartTime", label: "使用开始时间", minWidth: 100 },
      { prop: "usageEndTime", label: "使用结束时间", minWidth: 100 },
      { prop: "remarks", label: "备注", minWidth: 100 },
    ]
  },
  // usageRecord:{
  //   label: "领用记录",
  //   searchPlaceholder: "设备编号/设备名称/规格型号",
  //   showSearch: true,
  //   api: getManagementList,
  //   deleteApi: delEquipment,
  //   columns: [
  //     { prop: "equipmentId", label: "设备编号", minWidth: 100 },
  //     { prop: "equipmentName", label: "设备名称", minWidth: 100 },
  //     { prop: "quantity", label: "数量", minWidth: 100 },
  //     { prop: "specification", label: "规格型号", minWidth: 100 },
  //     { 
  //       prop: "usageStatus", 
  //       label: "使用状态", 
  //       minWidth: 100,
  //       formatter: (row) => row.usageStatus == 1 ? "启用" : "禁用"
  //     },
  //     { prop: "purchaseDate", label: "采购日期", minWidth: 100 },
  //     { prop: "purchasePrice", label: "采购价格", minWidth: 100 },
  //   ]
  // },

/**
 * 是否显示搜索框
 */
const shouldShowSearch = computed(() => {
  return [
    "management",
  ].includes(tabName.value);
});
  // 后续可以在这里添加新的标签页配置
};

/**
 * 当前选中行数量
 */
// 标签页数据
const tabs = reactive(
  Object.entries(tabsConfig).map(([name, config]) => ({
    name,
    label: config.label
  }))
);

// 当前标签页配置
const currentTabConfig = computed(() => tabsConfig[activeTab.value]);

// 计算属性
const searchPlaceholder = computed(() => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息");
const shouldShowSearch = computed(() => currentTabConfig.value?.showSearch || false);
const columns = computed(() => currentTabConfig.value?.columns || []);
const selectedCount = computed(() => selectedRows.value.length);

// ===== 表格列配置 =====

/**
 * 供应商表格列配置
 */
const management = ref([
  { prop: "equipmentId", label: "设备编号", minWidth: 100 },
  { prop: "equipmentName", label: "设备名称", minWidth: 100 },
  { prop: "quantity", label: "数量", minWidth: 100 },
  { prop: "specification", label: "规格型号", minWidth: 100 },
  { prop: "usageStatus", label: "使用状态", minWidth: 100 },
  { prop: "usingDepartment", label: "使用部门", minWidth: 100 },
  { prop: "userId", label: "使用人", minWidth: 100 },
  { prop: "purchaseDate", label: "采购日期", minWidth: 100 },
  { prop: "purchasePrice", label: "采购价格", minWidth: 100 },
]);


// ===== 事件处理函数 =====

/**
 * 标签页切换事件处理
 * @param {Object} tab - 标签页对象
 * @description 处理标签页切换，重置表单和状态，加载对应数据
 */
// 事件处理函数
const handleTabClick = (tab) => {
  // 重置表单和状态
  activeTab.value = tab.props.name;
  resetState();
  getList();
};

const resetState = () => {
  form.value = {};
  addOrEdit.value = "add";
  loading.value = true;
  tabName.value = tab.props.name;
  tableData.value = [];
  pageNum.value = 1;
  pageSizes.value = 10;
  total.value = 0;
  queryParams.searchAll = "";
  // 根据标签页类型设置对应的列配置
  const tabConfig = {
    management: () => {
      columns.value = management.value;
      getList();
    },
  };

  // 执行对应的配置函数
  const configFn = tabConfig[tabName.value];
  if (configFn) {
    configFn();
  }
};

/**
 * 重置查询条件
 * @description 重置查询参数并重新加载数据
 */
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSizes") {
      queryParams[key] = "";
    }
  });
  queryParams.searchAll = "";
  pageNum.value = 1;
  getList();
};

/**
 * 搜索功能
 * @description 重置页码并执行搜索
 */
const search = () => {
  pageNum.value = 1;
  getList();
};

/**
 * 新增按钮点击处理
 */
const handleAdd = () => {
  addOrEdit.value = "add";
  handleAddEdit(tabName.value);
};

/**
 * 新增/编辑弹窗处理
 * @param {string} currentTabName - 当前标签页名称
 * @description 根据标签页类型设置弹窗标题并打开弹窗
 */
const handleAddEdit = (currentTabName) => {
  const actionText =
    addOrEdit.value === "add"
      ? "新增"
      : addOrEdit.value === "edit"
      ? "编辑"
      : "查看";

  const tabTitleMap = {
    supplier: "供应商信息",
    customer: "客户信息",
  };

  title.value = `${actionText}${tabTitleMap[currentTabName] || ""}`;
  openDialog();
};

/**
 * 打开弹窗
 * @description 根据编辑状态决定是否复制表单数据
 */
const openDialog = () => {
  if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
    copyForm.value = JSON.parse(JSON.stringify(form.value));
  form.value = {};
  title.value = `新增${currentTabConfig.value.label}`;
  // 通用的
  copyForm.value = {};
  if (activeTab.value === "equipmentRequisition") {
    equipmentRequisitionDialog.value = true;
  } else if (activeTab.value === "usageRecord") {
    usageRecordDialog.value = true;
  } else {
    form.value = {};
    manaDialog.value = true;
  }
  dialogFormVisible.value = true;
};

/**
 * 分页处理
 * @param {Object} val - 分页参数对象
 */
const handleEdit = (row) => {
  form.value = { ...row };
  addOrEdit.value = "edit";
  title.value = `编辑${currentTabConfig.value.label}`;
  copyForm.value = { ...row };
  if (activeTab.value === "equipmentRequisition") {
    equipmentRequisitionDialog.value = true;
  } else if (activeTab.value === "usageRecord") {
    usageRecordDialog.value = true;
  } else {
    manaDialog.value = true;
  }
};

const handleView = (row) => {
  form.value = { ...row };
  addOrEdit.value = "viewRow";
  title.value = `查看${currentTabConfig.value.label}`;
  copyForm.value = { ...row };
  if (activeTab.value === "equipmentRequisition") {
    equipmentRequisitionDialog.value = true;
  } else if (activeTab.value === "usageRecord") {
    usageRecordDialog.value = true;
  } else {
    manaDialog.value = true;
  }
};

const handPagination = (val) => {
  pageNum.value = val.page;
  pageSizes.value = val.limit;
  getList();
};

/**
 * 表单提交处理
 * @param {Object} val - 提交结果对象
 */
const handleSubmit = async (val) => {
  if (val.result.code !== 200) {
    ElMessage.error("操作失败：" + val.result.msg);
    return;
  }
  ElMessage.success(val.title + val.result.msg);
  dialogFormVisible.value = false;
  getList();
};

/**
 * 弹窗显示状态处理
 * @param {boolean} value - 显示状态
 */
const handleDialogFormVisible = (value) => {
  dialogFormVisible.value = value;
};

/**
 * 表格行选择处理
 * @param {Array} selection - 选中的行数据
 */
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
/**
 * 编辑按钮点击处理
 * @param {Object} row - 行数据
 * @description 处理编辑操作，构建地址数组并打开编辑弹窗
 */
const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row));

  // 构建供应商业务地址数组
  if (form.value.bprovinceId && form.value.bdistrictId && form.value.bcityId) {
    form.value.bids = [row.bprovinceId, row.bcityId, row.bdistrictId];
  }

  // 构建供应商联系地址数组
  if (form.value.cprovinceId && form.value.cdistrictId && form.value.ccityId) {
    form.value.cids = [row.cprovinceId, row.ccityId, row.cdistrictId];
  }

  // 构建客户业务地址数组
  if (
    form.value.businessCityId &&
    form.value.businessDistrictId &&
    form.value.businessProvinceId
  ) {
    form.value.bids = [
      row.businessProvinceId,
      row.businessCityId,
      row.businessDistrictId,
    ];
  }

  // 构建客户联系地址数组
  if (form.value.cityId && form.value.districtId && form.value.provinceId) {
    form.value.cids = [row.provinceId, row.cityId, row.districtId];
  }

  addOrEdit.value = "edit";
  handleAddEdit(tabName.value);
};


/**
 * 批量删除处理
 * @description 批量删除选中的记录
 */
  const deleteApiMap = {
      management: delSupply,
    };
const {handleDeleteBatch :handleDelete} = useDelete({
  deleteApi: () => deleteApiMap[tabName.value],
// 删除处理
const { handleDeleteBatch: handleDelete } = useDelete({
  deleteApi: () => currentTabConfig.value.deleteApi,
  selectedRows: selectedRows,
  getList: () => getList,
  getList: () => getList(),
  tableData: tableData,
  total: total,
  confirmText: "确认删除选中的数据吗？",
  successText: "删除成功",
})
});

/**
 * 关闭弹窗处理
 */
const handleBeforeClose = () => {
  dialogFormVisible.value = false;
  form.value = {};
// 获取设备最大可领用数量
const getMaxQuantity = () => {
  if (form.value.equipmentId) {
    const equipment = tableData.value.find(item => item.equipmentId === form.value.equipmentId);
    return equipment ? equipment.quantity : null;
  }
  return null;
};

/**
 * 导出数据
 * @param {string} api - 导出接口路径
 * @param {string} name - 导出文件名前缀
 */
const exportData = (api, name) => {
  proxy.download(
    api,
    { ...queryParams },
    `${name}${new Date().getTime()}.xlsx`
  );
  ElMessage.success("导出数据：" + name);
};
// ===== 数据获取函数 =====

/**
 * 根据当前标签页选择对应的API接口
 * @returns {Promise} API调用Promise
 * @description 统一的接口选择函数，根据标签页类型调用对应的API
 */
const selectInterface = () => {
  const apiParams = {
    current: pageNum.value,
    pageSize: pageSizes.value,
    searchAll: queryParams.searchAll,
  };

  const apiMap = {
    management: () => getSupply(apiParams),
    customer: () => getCustomerList(apiParams),
    coal: () => getCoalInfo(apiParams),
    coalQualityMaintenance: () => getCoalPlanList(apiParams),
    coalMeiZhiZiDuanWeiHu: () => coalField(apiParams),
  };

  const apiFunction = apiMap[tabName.value];
  return apiFunction
    ? apiFunction()
    : Promise.reject(new Error("未找到对应的API接口"));
// 设备领用弹窗提交处理
const onEquipmentRequisitionSubmit = (formData) => {
  console.log("提交的领用数据：", formData);
  ElMessage.success('设备领用成功');
  equipmentRequisitionDialog.value = false;
  nextTick(() => {
    form.value = {};
    getList();
  });
};

/**
 * 获取列表数据
 * @description 统一的数据获取函数，处理加载状态和错误处理
 */
// 数据获取
const getList = async () => {
  try {
    loading.value = true;
    const { data, code } = await selectInterface();
    const apiParams = {
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    };

    const { data, code } = await currentTabConfig.value.api(apiParams);

    if (code !== 200) {
      ElMessage.error("获取数据失败：" + (data?.msg || "未知错误"));
@@ -564,63 +375,15 @@
    tableData.value = data.records || [];
    total.value = data.total || 0;
  } catch (error) {
    console.error("获取列表数据失败:", error);
    ElMessage.error("获取数据失败，请稍后再试");
  } finally {
    loading.value = false;
  }
};

const handleView = (row) => {
  form.value = JSON.parse(JSON.stringify(row));
  // 构建供应商业务地址数组
  if (form.value.bprovinceId && form.value.bdistrictId && form.value.bcityId) {
    form.value.bids = [row.bprovinceId, row.bcityId, row.bdistrictId];
  }

  // 构建供应商联系地址数组
  if (form.value.cprovinceId && form.value.cdistrictId && form.value.ccityId) {
    form.value.cids = [row.cprovinceId, row.ccityId, row.cdistrictId];
  }

  // 构建客户业务地址数组
  if (
    form.value.businessCityId &&
    form.value.businessDistrictId &&
    form.value.businessProvinceId
  ) {
    form.value.bids = [
      row.businessProvinceId,
      row.businessCityId,
      row.businessDistrictId,
    ];
  }

  // 构建客户联系地址数组
  if (form.value.cityId && form.value.districtId && form.value.provinceId) {
    form.value.cids = [row.provinceId, row.cityId, row.districtId];
  }
  addOrEdit.value = "viewRow";
  handleAddEdit(tabName.value);
};


// ===== 生命周期钩子 =====

/**
 * 组件挂载后的初始化操作
 */
onMounted(async () => {
  try {
    // 并行执行初始化操作
    await Promise.all([
      handleTabClick({ props: { name: "management" } }),
      getUserList(),
    ]);
  } catch (error) {
    console.error("组件初始化失败:", error);
    ElMessage.error("页面初始化失败，请刷新重试");
  }
// 组件挂载
onMounted(() => {
  handleTabClick({ props: { name: "management" } });
});
</script>

@@ -644,7 +407,9 @@
  flex-wrap: wrap;
  gap: 10px;
}

.app-container{
  padding: 18px !important;
}
/* 响应式表格 */
@media screen and (max-width: 768px) {
  .table-toolbar {