xgy-oa/klp-ui/src/views/wms/delivery/mycoil/index.vue

<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="卷号">
        <el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="物料">
        <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
      </el-form-item>
      <el-form-item label="规格">
        <memo-input storageKey="coilSpec" v-model="queryParams.specification" placeholder="请输入规格" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="材质">
        <muti-select v-model="queryParams.itemMaterial" :options="dict.type.coil_material" placeholder="请选择材质"
          clearable />
      </el-form-item>
      <el-form-item label="厂家">
        <muti-select v-model="queryParams.itemManufacturer" :options="dict.type.coil_manufacturer" placeholder="请选择厂家"
          clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 增加 row-class-name 绑定，动态设置行样式 -->
    <el-table v-loading="loading" :data="coilList" highlight-current-row height="400px"
      style="width: 100%" :row-class-name="tableRowClassName"> <!-- 新增行类名绑定 -->
      <!-- 自定义列 -->
      <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
        :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
    </el-table>

    <!-- 分页 -->
    <pagination v-if="!rangeMode" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { listMaterialCoil } from '@/api/wms/coil';
import MemoInput from '@/components/MemoInput/index.vue';
import MutiSelect from '@/components/MutiSelect/index.vue';

export default {
  name: 'CoilSelector',
  components: {
    MemoInput,
    MutiSelect
  },
  dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer'],
  data() {
    return {
      loading: false,
      coilList: [],
      total: 0,
      // 内部显隐控制变量（触发器模式下使用）
      innerVisible: false,
      // 选中的钢卷数据
      selectedCoil: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        currentCoilNo: null,
        grade: null,
        materialType: '成品',
        selectType: 'raw_material',
        dataType: 1 // 只查询当前数据，不查询历史数据
      },
      columns: [
        {
          label: '卷号',
          align: 'center',
          prop: 'currentCoilNo',
          showOverflowTooltip: true
        },
        { label: '质量状态', prop: 'qualityStatus' },
        { label: '打包状态', prop: 'packingStatus' },
        // 对应edgeType
        { label: '切边要求', prop: 'edgeRequirement' },
        // 对应packaging
        { label: '包装要求', prop: 'packagingRequirement' },
        {
          label: '存储位置',
          align: 'center',
          prop: 'actualWarehouseName',
          width: '120',
          showOverflowTooltip: true
        },
        {
          label: '物料',
          align: 'center',
          prop: 'itemName',
          width: '100'
        },
        {
          label: '规格',
          align: 'center',
          prop: 'specification',
          width: '100'
        },
        {
          label: '材质',
          align: 'center',
          prop: 'material',
          width: '100'
        },
        {
          label: '厂家',
          align: 'center',
          prop: 'manufacturer',
          width: '100'
        },
        {
          label: '重量(t)',
          align: 'center',
          prop: 'netWeight',
          width: '100'
        },
        {
          label: '库区',
          align: 'center',
          prop: 'warehouseName',
          width: '120',
          showOverflowTooltip: true
        },
      ],
    };
  },
  computed: {
    currentUserId() {
      return this.$store.getters.id;
    },
    renderColumns() {
      // 如果有自定义列配置，使用它；否则使用默认列
      return this.columns;
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 表格行类名动态生成 - 核心：区分权限行/禁用行
    tableRowClassName({ row }) {
      
      return '';
    },

    // 获取钢卷列表
    async getList() {
      try {
        this.loading = true;
        // 设置筛选条件
        const queryPayload = {
          ...this.queryParams,
        };
        const response = await listMaterialCoil(queryPayload);
        if (response.code === 200) {
          this.coilList = response.rows || [];
          this.total = response.total || 0;
        } else {
          this.$message.warning(`获取钢卷列表失败：${response.msg || '未知错误'}`);
        }
      } catch (error) {
        console.error('获取钢卷列表异常', error);
        this.$message.error('获取钢卷列表失败，请重试');
      } finally {
        this.loading = false;
      }
    },

    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 重置搜索条件
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        currentCoilNo: null,
        grade: null,
        dataType: 1,
        selectType: 'raw_material',
      };
      this.getList();
    },
  }
};
</script>

<style scoped lang="scss">
.coil-selector-container {
  width: 100%;
}

.trigger-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

// 未选择状态样式
.no-selection {
  padding: 8px 12px;
  border: 1px dashed #dcdcdc;
  border-radius: 4px;
  color: #999;
  background-color: #f9f9f9;
  width: fit-content;
}

// 已选择状态样式
.selected-coil-info {
  padding: 12px;
  border: 1px solid #e6f7ff;
  border-radius: 6px;
  background-color: #f0f9ff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  width: fit-content;
  max-width: 100%;

  .info-item {
    display: flex;
    align-items: center;
    gap: 6px;

    .label {
      color: #666;
      font-size: 13px;
    }

    .value {
      color: #333;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .clear-selection {
    color: #f56c6c;
    margin-left: 12px;
    padding: 0 8px;

    &:hover {
      color: #ff4d4f;
      background-color: transparent;
    }
  }
}

// 选择按钮样式
.select-button {
  margin-top: 4px;
}

.search-form {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

::v-deep .el-dialog__body {
  padding: 20px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

::v-deep .el-table {
  --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
}

::v-deep .el-table__row.current-row {
  background-color: var(--el-color-primary-light-8) !important;
}

// 核心：禁用行样式（销售权限受限）
::v-deep .el-table .disabled-coil-row {
  background-color: #f8f8f8 !important;
  color: #c0c4cc !important;
  cursor: not-allowed !important;

  // 覆盖hover高亮
  &:hover>td {
    background-color: #f8f8f8 !important;
  }

  // 覆盖当前行高亮
  &.current-row {
    background-color: #f8f8f8 !important;
  }

  // 禁止单元格交互
  td {
    pointer-events: none;
    user-select: none; // 禁止文本选中
  }
}

.dialog-footer {
  text-align: right;
}

// 响应式调整
@media (max-width: 768px) {
  .selected-coil-info {
    gap: 12px;
    padding: 10px;
  }

  .info-item {
    flex: 1 1 calc(50% - 12px);
  }
}
</style>