wms / wms4_zhangzhouhedian · Files

<template>
  <j-modal
    :title="'选择物料'"
    :width="1000"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-form layout="inline" class="mb-4">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="物料编码">
            <a-input v-model="materialCode" placeholder="请输入物料编码" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="物料名称">
            <a-input v-model="materialName" placeholder="请输入物料名称" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="物料规格">
            <a-input v-model="spec" placeholder="请输入物料规格" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="物料单位">
            <a-input v-model="unit" placeholder="请输入物料单位" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="材质">
            <a-input v-model="texture" placeholder="请输入材质" />
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item label="质保等级">
            <a-input v-model="qnc" placeholder="请输入质保等级" />
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item label="大类">
            <a-input v-model="categories" placeholder="请输入大类" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-button type="primary" @click="search">搜索</a-button>
          <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      :dataSource="materialList"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange">
      <template slot="action" slot-scope="record">
        <a-button type="primary" size="small" @click="selectMaterial(record)">选择</a-button>
      </template>
    </a-table>
  </j-modal>
</template>

<script>
import { searchMaterial } from '@/api/api'; // 后端接口

export default {
  name: 'MaterialSelectModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      materialCode: '',
      materialName: '',
      spec: '',
      unit: '',
      texture: '',
      categories: '',
      qnc: '',
      materialList: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['7', '20', '50']
      },
      columns: [
        {
          title: '物料编码',
          dataIndex: 'code',
          key: 'code'
        },
        {
          title: '物料名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '规格',
          dataIndex: 'spec',
          key: 'spec'
        },
        {
          title: '单位',
          dataIndex: 'unit',
          key: 'unit'
        },
        {
          title: '材质',
          align: "center",
          dataIndex: 'texture'
        },
        {
          title: '质保等级',
          align: 'center',
          dataIndex: 'qnc_dictText',
          scopedSlots: { customRender: 'qnc_dictText' }
        },
        {
          title: '大类',
          align: 'center',
          dataIndex: 'categories',
          scopedSlots: { customRender: 'categories' }
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  methods: {
    // 搜索物料
    search() {
      // 构建查询参数对象，与后端接口参数名保持一致
      const params = {
        code: this.materialCode,
        name: this.materialName,
        spec: this.spec,
        unit: this.unit,
        texture: this.texture,
        qnc: this.qnc,
        categories: this.categories,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      };

      searchMaterial(params).then(res => {
        if (res.success) {
          this.materialList = res.result.records || [];
          this.pagination.total = res.result.total || 0;
        } else {
          this.$message.warning(res.message || '查询失败');
          this.materialList = [];
          this.pagination.total = 0;
        }
      }).catch(error => {
        console.error('物料搜索出错:', error);
        this.$message.error('网络错误，请重试');
      });
    },

    // 重置搜索条件
    resetSearch() {
      this.materialCode = '';
      this.materialName = '';
      this.spec = '';
      this.unit = '';
      this.texture = '';
      this.qnc = '';
      this.categories = '';
      this.pagination.current = 1;
      this.search();
    },

    // 表格分页/排序/筛选
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.search();
    },

    // 选择物料并关闭弹窗
    selectMaterial(material) {
      // 返回完整的物料对象，包含编码、名称等信息
      this.$emit('select', material);
      this.$emit('', material);
      this.$emit('update:visible', false);
    },

    handleOk() {
      this.$message.warning('请选择一个物料');
    },

    handleCancel() {
      this.$emit('update:visible', false);
    }
  },
  watch: {
    visible(val) {
      if (val) this.resetSearch(); // 弹窗显示时重置并搜索
    }
  }
}
</script>