pms-iot-vue/src/views/pms/iotsapstock/SelectSapStock.vue

<template>
  <Dialog v-model="dialogVisible"
          title="选择SAP库存"
          style="width: 1100px; max-height: 800px" @close="handleClose">
    <div>
      <ContentWrap>
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="物料名称" prop="materialName">
            <el-input
              v-model="queryParams.materialName"
              placeholder="请输入物料名称"
              clearable
              @keyup.enter="handleQuery"
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item label="物料编码" prop="code">
            <el-input
              v-model="queryParams.materialCode"
              placeholder="请输入物料编码"
              clearable
              @keyup.enter="handleQuery"
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
            <el-button @click="handleConfirm" class="custom-green-button"><Icon icon="ep:check" class="mr-5px" /> 确认选择</el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <ContentWrap>
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          ref="tableRef"
          :show-overflow-tooltip="true"
          @row-click="handleRowClick"
        >
          <el-table-column width="60" label="选择">
            <template #default="{ row }">
              <el-checkbox
                :model-value="selectedRows.some(item => item.id === row.id)"
                @click.stop="toggleRow(row)"
                class="no-label-radio"
              />
            </template>
          </el-table-column>
          <el-table-column label="id" align="center" prop="id" width="120" v-if="false"/>
          <el-table-column
            label="物料编码"
            align="center"
            prop="materialCode"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="物料名称"
            align="center"
            prop="materialName"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="数量" align="center" prop="quantity" width="120" />
          <el-table-column label="单位" align="center" prop="unit" width="120" />
          <el-table-column label="单价" align="center" prop="unitPrice" width="120" />
          <el-table-column label="安全库存" align="center" prop="safetyStock">
            <template #default="scope">
              <el-input
                v-model="scope.row.safetyStock"
                @click.stop=""
                @focus="handleInputFocus(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </ContentWrap>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { DictDataVO } from '@/api/system/dict/dict.data'
import { dateFormatter } from '@/utils/formatTime'
import * as MaterialApi from '@/api/pms/material'
import * as SapStockApi from '@/api/pms/iotsapstock'
import {DICT_TYPE} from "@/utils/dict";
import {ContentWrap} from "@/components/ContentWrap";
import {IotSapStockApi, IotSapStockVO} from "@/api/pms/iotsapstock";

// 调整 emit 类型
const emit = defineEmits<{
  (e: 'choose', value: SapStockApi.IotSapStockVO[]): void
  (e: 'close'): void
}>()
const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const queryFormRef = ref() // 搜索的表单
const list = ref<DictDataVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const selectedRows = ref<SapStockApi.IotSapStockVO[]>([]); // 多选数据（存储所有选中行的数组）
const tableRef = ref();

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  label: '',
  materialName: undefined,
  materialCode: undefined,
  status: undefined,
})

const selectedRow = ref(null)

// 多选 切换行选中状态
const toggleRow = (row) => {
  const index = selectedRows.value.findIndex(item => item.id === row.id);
  if (index > -1) {
    selectedRows.value.splice(index, 1); // 取消选中
  } else {
    selectedRows.value.push(row); // 选中
  }
};

// 关闭时清空选择
const handleClose = () => {
  tableRef.value?.clearSelection();
  selectedRows.value = []
  emit('close')
};

// 处理单选逻辑
const selectRow = (row) => {
  selectedRow.value = selectedRow.value?.id === row.id ? null : row
  emit('choose', row)
  dialogVisible.value = false
}

// 确认选择
const handleConfirm = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一个库存')
    return
  }
  emit('choose', selectedRows.value.map(row => ({
    ...row,
    // 确保返回必要字段
    code: row.code,
    name: row.name,
    unit: row.unit
  })))
  dialogVisible.value = false;
  handleClose()
};

// 点击整行选中
const handleRowClick = (row) => {
  toggleRow(row);
}
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  await getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const getList = async () => {
  loading.value = true
  try {
    const data = await SapStockApi.IotSapStockApi.getIotSapStockPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// 处理输入框焦点事件（自动选中当前行）
const handleInputFocus = (row: MaterialApi.MaterialVO) => {
  // 如果未选中则添加到选中列表
  const exists = selectedRows.value.some(item => item.id === row.id)
  if (!exists) {
    selectedRows.value.push(row)
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
const choose = (row: DictDataVO) => {
  emit('choose', row)
  dialogVisible.value = false
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/** 初始化 **/

</script>
<style lang="scss" scoped>
.no-label-radio .el-radio__label {
  display: none;
}
.no-label-radio .el-radio__inner {
  margin-right: 0;
}

/* 自定义淡绿色按钮 */
:deep(.custom-green-button) {
  background-color: #e1f3d8;
  border-color: #e1f3d8;
  color: #67c23a;
}

/* 悬停效果 */
:deep(.custom-green-button:hover) {
  background-color: #d1e8c0;
  border-color: #d1e8c0;
  color: #5daf34;
}

/* 点击效果 */
:deep(.custom-green-button:active) {
  background-color: #c2dca8;
  border-color: #c2dca8;
}

</style>