1、完善表格逻辑 2、完善配煤计算器 3、完善设备管理 4、完善采购管理

zhang_12370

2025-07-23 2c9fbc6f1a3ccd1418efa9c348ec12faf1ab3258

 src/components/Table/ETable.vue

@@ -2,7 +2,7 @@
    v-loading="loading" 
    :data="tableData" 
    :border="border" 
    :show-selection="showSelection" 
    :show-selection="showSelection"
    :max-height="maxHeight"
    :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" 
    @selection-change="handleSelectionChange"
@@ -15,12 +15,16 @@
    :show-overflow-tooltip="showOverflowTooltip"
    ref="tableRef" 
    :row-key="rowKey"
    style="width: 100%"
    style="width: 100%;"
  >
    <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
    <el-table-column v-if="showIndex" label="序号" type="index" width="60" align="center" />
    <el-table-column v-if="showSelection" type="selection" width="55" align="center" :show-overflow-tooltip="false" />
    <el-table-column v-if="showIndex" label="序号" width="60" align="center" fixed="left" :show-overflow-tooltip="false">
      <template #default="scope">
        {{ getRowIndex(scope.$index) }}
      </template>
    </el-table-column>
    <template v-for="col in columns" :key="col.prop">
      <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
      <el-table-column v-bind="col"
        :formatter="col.formatter || defaultFormatter" align="center">
        <template v-if="col.slot" #default="scope">
          <slot :name="col.prop" :row="scope.row" :column="scope.column" :index="scope.$index"></slot>
@@ -28,18 +32,31 @@
      </el-table-column>
    </template>
    <!-- 操作列 -->
    <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
    <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" :show-overflow-tooltip="false" fixed="right" align="center">
      <template #default="scope">
        <slot name="operations" :row="scope.row">
          <!-- 自定义按钮 - 放在默认按钮之前 -->
          <el-button 
            v-for="button in customButtons" 
            :key="button.name"
            v-show="!button.show || button.show(scope.row)"
            :link="button.link !== false"
            :type="button.type || 'primary'" 
            :size="button.size || 'small'"
            :icon="button.icon"
            :disabled="button.disabled && button.disabled(scope.row)"
            @click="handleCustomClick(button.name, scope.row)"
          >
            {{ button.label }}
          </el-button>
          
          <!-- 默认操作按钮 -->
          <el-button v-if="operations.includes('edit')" link type="primary" size="small"
            @click="handleEdit(scope.row)">编辑</el-button>
          <!--            <el-button-->
          <!--              v-if="operations.includes('delete')"-->
          <!--              link-->
          <!--              type="danger"-->
          <!--              size="small"-->
          <!--              @click="handleDelete(scope.row)"-->
          <!--            >删除</el-button>-->
          <el-button v-if="operations.includes('viewRow')" link type="primary" size="small"
            @click="handleView(scope.row)">查看</el-button>
          <el-button v-if="operations.includes('viewFile')" link type="primary" size="small"
            @click="handleViewFile(scope.row)">查看附件</el-button>
        </slot>
      </template>
    </el-table-column>
@@ -125,7 +142,25 @@
  operations: {
    type: Array,
    default: () => ['edit', 'delete', 'export']
  },  // 删除确认信息
  },
  // 自定义按钮配置
  customButtons: {
    type: Array,
    default: () => []
    // 示例配置：
    // [
    //   {
    //     name: 'return',      // 按钮标识
    //     label: '归还',       // 按钮显示文本
    //     type: 'success',     // 按钮类型
    //     size: 'small',       // 按钮大小
    //     icon: '',            // 图标(可选)
    //     show: (row) => true, // 显示条件函数(可选)
    //     disabled: (row) => false, // 禁用条件函数(可选)
    //   }
    // ]
  },
  // 删除确认信息
  deleteConfirmText: {
    type: String,
    default: '确认删除该记录？'
@@ -139,24 +174,22 @@
  rowKey: {
    type: String,
    default: 'id'
  },
  showOverflowTooltip: {
  },  showOverflowTooltip: {
    type: Boolean,
    default: true
  },
  // 当前页码
  currentPage: {
    type: Number,
    default: 1
  },
  // 每页大小
  pageSize: {
    type: Number,
    default: 10
  }
})
const tableRef = ref(null)
// 检查列是否需要显示tooltip
const shouldShowTooltip = (col, data) => {
  // 如果列配置中明确设置了showOverflowTooltip，使用该设置
  if (col.hasOwnProperty('showOverflowTooltip')) {
    return col.showOverflowTooltip;
  }
  // 如果没有prop，直接返回false
  if (!col.prop) return false;
  // 检查该列在所有数据中是否有非空值，默认显示tooltip
  return data.some(row => row[col.prop] != null && row[col.prop] !== '');
};

// 默认的格式化函数
const defaultFormatter = (row, column, cellValue) => {
@@ -164,13 +197,25 @@
};

// 处理选择变化、编辑、删除和导出操作
const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
const emit = defineEmits(['selection-change', 'edit', 'delete', 'export', 'viewRow', 'viewFile', 'custom-click'])
const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}
const handleEdit = (row) => {
  emit('edit', row)
}
const handleView = (row) => {
  emit('viewRow', row)
}
const handleViewFile = (row) => {
  emit('viewFile', row)
}

// 处理自定义按钮点击
const handleCustomClick = (buttonName, row) => {
  emit('custom-click', { buttonName, row })
}

const handleDelete = (row) => {
  ElMessageBox.confirm(
    props.deleteConfirmText,
@@ -188,6 +233,11 @@
const handleExport = (row) => {
  emit('export', row)
}

// 计算分页序号
const getRowIndex = (index) => {
  return (props.currentPage - 1) * props.pageSize + index + 1;
};

// 正确的 toggleRowSelection 方法：针对单行
const toggleRowSelection = (row, selected) => {
@@ -270,6 +320,9 @@
</script>
  
  <style scoped>
  :deep(.el-tooltip) {
    justify-content: center !important;
  }
.el-table {
    margin: 20px 0 !important;
  }