提交设备管理优化 以及防抖功能

张诺

2025-07-25 77bb73aaef8f85d961b373731a05361cbe6921de

提交设备管理优化 以及防抖功能

 src/components/dialog/DilogTable.vue

@@ -7,13 +7,19 @@
    @close="handleClose"
    class="dialog-table"
  >
    <div class="dialog-table-content">
      <div class="table-wrapper">
    <ETable
      :columns="columns"
      :table-data="tableData"
      :loading="loading"
          :loading="loadings"
      :show-selection="false"
      :show-operations="false"
          :height="height"
          :style="{ minHeight: height }"
    />
      </div>
    </div>
  </el-dialog>
</template>

@@ -22,44 +28,20 @@
import ETable from '@/components/Table/ETable.vue'

const props = defineProps({
  // 弹窗控制
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '数据表格'
  },
  width: {
    type: String,
    default: '80%'
  },
  
  // 表格数据
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
  modelValue: Boolean,
  title: String,
  width: String,
  tableData: Array,
  columns: Array,
  loading: Boolean,
  height: [String, Number]
})

const loadings = computed(() => props.loading || false)
const emit = defineEmits(['update:modelValue'])

// 弹窗显示控制
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 关闭弹窗
const handleClose = () => {
  emit('update:modelValue', false)
}
@@ -109,4 +91,92 @@
    }
  }
}

.dialog-table-content {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px dashed #d9d9d9;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 16px 0;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  
  :deep(.el-pagination) {
    --el-pagination-font-size: 14px;
    --el-pagination-bg-color: #ffffff;
    --el-pagination-text-color: #606266;
    --el-pagination-border-radius: 4px;
    
    .btn-prev,
    .btn-next {
      background-color: #f5f7fa;
      color: #606266;
      
      &:hover {
        color: #409eff;
      }
      
      &:disabled {
        color: #c0c4cc;
        background-color: #f5f7fa;
      }
    }
    
    .el-pager li {
      background-color: #f5f7fa;
      color: #606266;
      
      &:hover {
        color: #409eff;
      }
      
      &.is-active {
        background-color: #409eff;
        color: #ffffff;
      }
    }
    
    .el-pagination__sizes .el-select .el-input__wrapper {
      background-color: #f5f7fa;
    }
    
    .el-pagination__jump .el-input__wrapper {
      background-color: #f5f7fa;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-wrapper {
    :deep(.el-pagination) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}
</style>

 src/views/equipment/management/index.vue

@@ -142,7 +142,8 @@
        :title="dialogTableTitle"
        :table-data="dialogTableData"
        :columns="dialogTableColumns"
        width="60%"
        width="70%"
        height="500px"
      />
    </el-card>
  </div>
@@ -461,13 +462,10 @@
      
      // 调用详情接口获取数据
      const { data, code } = await getUsageDetailList(row.id);
      
      if (code === 200 && data) {
        console.log('设备操作记录:', data);
        
        // 处理数组数据，直接显示操作记录列表
        if (Array.isArray(data.records)) {
          dialogTableData.value = data.records;
        if (Array.isArray(data)) {
          dialogTableData.value = data;
          dialogTableColumns.value = [
            { prop: 'equipmentNo', label: '设备编号', minWidth: 100 },
            { prop: 'equipmentName', label: '设备名称', minWidth: 120 },
@@ -485,7 +483,6 @@
          ];
        } else {
          ElMessage.warning('暂无操作记录');
          dialogTableVisible.value = false;
        }
      } else {
        ElMessage.error('获取详情数据失败');
@@ -550,7 +547,6 @@
  if (formData.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
    ElMessage.success("设备已完全归还");
  } else if (formData.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN) {
    ElMessage.success("设备部分归还成功");
  } else if (formData.equipmentStatus === EQUIPMENT_STATUS.USING) {
    ElMessage.success("设备领用成功");
  } else {

 src/views/equipment/management/mould/equipmentRequisitionDialog.vue

@@ -134,7 +134,7 @@
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" v-if="!isViewMode"
      <el-button type="primary" @click="debouncedSubmit" v-if="!isViewMode"
        >确定</el-button
      >
    </template>
@@ -320,6 +320,21 @@
  emit("update:modelValue", false);
}

// 通用防抖函数
function debounce(fn, delay = 800) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

// 防抖后的提交方法
const debouncedSubmit = debounce(handleSubmit, 800);

function handleSubmit () {
  formRef.value.validate(async (valid) => {
    if (!valid) return;

 src/views/equipment/management/mould/managementDialog.vue

@@ -75,7 +75,7 @@
              </el-select>
            </el-form-item> -->
          <!-- </el-col> -->
          <el-col :span="11">
          <!-- <el-col :span="11">
            <el-form-item label="使用部门" prop="usingDepartment">
              <el-input
                v-model="formData.usingDepartment"
@@ -84,7 +84,7 @@
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          </el-col> -->
          <el-col :span="11">
            <el-form-item label="存放位置" prop="storageLocation">
              <el-input

 src/views/equipment/management/mould/usageRecord.vue

@@ -67,7 +67,7 @@
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
          <!-- <el-col :span="11">
            <el-form-item label="使用部门" prop="usingDepartment">
              <el-input
                v-model="formData.usingDepartment"
@@ -76,7 +76,7 @@
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          </el-col> -->
          <el-col :span="11">
            <el-form-item label="存放位置" prop="storageLocation">
              <el-input