patrol-wzgl-web/src/views/floodEntry/components/selectMaterial.vue

<template>
  <el-dialog
    title="选择物资"
    :visible.sync="isShow"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div>
      <!-- 搜索条件 -->
      <div style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 10px;">
        <el-input
          v-model="searchForm.keyword"
          placeholder="关键词搜索"
          style="width: 200px;"
          clearable
          @keyup.enter.native="handleSearch"
        />
        <el-select v-model="searchForm.guanliancangku" placeholder="所在仓库" clearable style="width: 200px;">
          <el-option
            v-for="item in cangkuList"
            :key="item.id"
            :label="item.cangkumingcheng"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>

      <!-- 物资列表 -->
      <el-table
        v-loading="loading"
        :data="materialList"
        border
        style="width: 100%"
        max-height="400"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="cangkumingcheng" label="仓库名称" align="center" />
        <el-table-column prop="xianwuzimingcheng" label="现物资名称" width="150" align="center" />
        <el-table-column prop="yuanwuzimingcheng" label="原物资名称" width="150" align="center" />
        <el-table-column prop="wuzidaima" label="物资代码" width="120" align="center" />
        <el-table-column prop="guigexinghao" label="规格型号" width="120" align="center" />
        <el-table-column prop="shuliang" label="库存数量" width="100" align="center" />
        <el-table-column prop="danwei" label="单位" width="80" align="center" />
        <el-table-column prop="jiazhiyuan" label="价值(元)" width="100" align="center" />
        <el-table-column prop="quyu" label="区域" width="100" align="center" />
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 15px; text-align: right;">
        <el-pagination
          :current-page="pagination.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { index } from '@/api/system/baseForm.js'
import { index as getCangkuList } from '@/api/system/baseForm.js'
import { Message } from 'element-ui'

export default {
  name: 'SelectMaterial',
  data() {
    return {
      isShow: false,
      loading: false,
      materialList: [],
      selectedMaterials: [], // 选中的物资
      cangkuList: [],
      searchForm: {
        keyword: '',
        guanliancangku: ''
      },
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.getCangku()
  },
  methods: {
    async getCangku() {
      const res = await getCangkuList({
        page_size: 999,
        page: 1,
        table_name: 'materialstorages'
      })
      this.cangkuList = res.data || []
    },
    show() {
      this.isShow = true
      this.searchForm = {
        keyword: '',
        guanliancangku: ''
      }
      this.selectedMaterials = []
      this.getMaterialList()
    },
    handleClose() {
      this.selectedMaterials = []
    },
    async getMaterialList() {
      this.loading = true
      const filters = []
      
      if (this.searchForm.keyword) {
        filters.push({
          'key': 'xianwuzimingcheng',
          'op': 'like',
          'value': this.searchForm.keyword
        })
      }
      
      if (this.searchForm.guanliancangku) {
        filters.push({
          'key': 'guanliancangku',
          'op': 'eq',
          'value': this.searchForm.guanliancangku
        })
      }

      try {
        const res = await index({
          page_size: this.pagination.pageSize,
          page: this.pagination.page,
          table_name: 'flood_materials',
          filter: filters
        })
        this.materialList = res.data || []
        this.pagination.total = res.total || 0
      } catch (error) {
        Message({
          type: 'error',
          message: '获取物资列表失败'
        })
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.pagination.page = 1
      this.getMaterialList()
    },
    handleSelectionChange(selection) {
      this.selectedMaterials = selection
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getMaterialList()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getMaterialList()
    },
    handleConfirm() {
      if (this.selectedMaterials.length === 0) {
        Message({
          type: 'warning',
          message: '请至少选择一条物资'
        })
        return
      }
      
      // 触发事件，返回选中的物资列表
      this.$emit('materials-selected', this.selectedMaterials)
      this.isShow = false
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>