对库存管理视图进行重构，以支持动态产品类别和型号，并提升库存检索功能

yyb

9 小时以前 39f51cb984ac3ecd77f541ee7f73a75771109e65

 src/views/inventoryManagement/stockManagement/Qualified.vue

@@ -3,10 +3,31 @@
    <div class="search_form">
      <div>
        <span class="search_title ml10">产品大类：</span>
        <el-input v-model="searchForm.productName"
                  style="width: 240px"
                  placeholder="请输入"
                  clearable/>
        <el-tree-select
          v-model="searchForm.parentId"
          style="width: 240px"
          placeholder="请选择"
          clearable
          filterable
          check-strictly
          :data="productOptions"
          :render-after-expand="false"
          @change="handleParentChange"
        />
        <span class="search_title ml10">规格型号：</span>
        <el-select
          v-model="searchForm.productModelId"
          style="width: 240px"
          placeholder="请选择"
          clearable
          filterable
          @change="handleModelChange"
        >
          <el-option v-for="item in modelOptions"
                     :key="item.id"
                     :label="item.model"
                     :value="item.id" />
        </el-select>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
@@ -26,16 +47,26 @@
        <el-table-column label="产品大类" prop="productName" show-overflow-tooltip />
        <el-table-column label="规格型号" prop="model" show-overflow-tooltip />
        <el-table-column label="单位" prop="unit" show-overflow-tooltip />
        <el-table-column label="库存数量" prop="qualitity" show-overflow-tooltip />
        <el-table-column label="冻结数量" prop="lockedQuantity" show-overflow-tooltip />
        <el-table-column label="库存预警数量" prop="warnNum"  show-overflow-tooltip />
        <el-table-column label="合格库存数量" prop="qualifiedQuantity" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.qualifiedQuantity ?? scope.row.qualitity ?? scope.row.unLockedQuantity ?? 0 }}</template>
        </el-table-column>
        <el-table-column label="不合格库存数量" prop="unqualifiedQuantity" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.unqualifiedQuantity ?? 0 }}</template>
        </el-table-column>
        <el-table-column label="合格冻结数量" prop="qualifiedLockedQuantity" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.qualifiedLockedQuantity ?? scope.row.lockedQuantity ?? 0 }}</template>
        </el-table-column>
        <el-table-column label="不合格冻结数量" prop="unqualifiedLockedQuantity" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.unqualifiedLockedQuantity ?? 0 }}</template>
        </el-table-column>
        <el-table-column label="库存预警数量" prop="warnNum" show-overflow-tooltip />
        <el-table-column label="备注" prop="remark"  show-overflow-tooltip />
        <el-table-column label="最近更新时间" prop="updateTime" show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" min-width="60" align="center">
        <el-table-column fixed="right" label="操作" min-width="90" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="showSubtractModal(scope.row)" :disabled="scope.row.unLockedQuantity === 0">领用</el-button>
            <el-button link type="primary" size="small" v-if="scope.row.unLockedQuantity > 0" @click="showFrozenModal(scope.row)">冻结</el-button>
            <el-button link type="primary" size="small" v-if="scope.row.lockedQuantity > 0" @click="showThawModal(scope.row)">解冻</el-button>
            <el-button link type="primary" @click="showSubtractModal(scope.row)" :disabled="scope.row.unLockedQuantity === 0">领用</el-button>
            <el-button link type="primary" v-if="scope.row.unLockedQuantity > 0" @click="showFrozenModal(scope.row)">冻结</el-button>
            <el-button link type="primary" v-if="scope.row.lockedQuantity > 0" @click="showThawModal(scope.row)">解冻</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -45,6 +76,7 @@
    <new-stock-inventory v-if="isShowNewModal"
                 v-model:visible="isShowNewModal"
                 type="qualified"
                 :parent-id="props.parentId"
                 @completed="handleQuery" />

    <subtract-stock-inventory v-if="isShowSubtractModal"
@@ -69,15 +101,24 @@

<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { ref, reactive, toRefs, onMounted, getCurrentInstance, watch } from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import { getStockInventoryListPage } from "@/api/inventoryManagement/stockInventory.js";
import { modelList, productTreeList } from "@/api/basicData/product.js";
const NewStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/New.vue"));
const SubtractStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Subtract.vue"));
const ImportStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Import.vue"));
const FrozenAndThawStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/FrozenAndThaw.vue"));
const props = defineProps({
  parentId: {
    type: [Number, String],
    default: undefined,
  },
})
const { proxy } = getCurrentInstance()
const tableData = ref([])
const productOptions = ref([])
const modelOptions = ref([])
const selectedRows = ref([])
const record = ref({})
const tableLoading = ref(false)
@@ -99,6 +140,9 @@
const data = reactive({
  searchForm: {
    productName: '',
    parentId: undefined,
    productModelId: undefined,
    model: '',
  }
})
const { searchForm } = toRefs(data)
@@ -116,7 +160,12 @@
}
const getList = () => {
  tableLoading.value = true
  getStockInventoryListPage({ ...searchForm.value, ...page }).then(res => {
  const queryParentId = searchForm.value.parentId || props.parentId
  getStockInventoryListPage({
    ...searchForm.value,
    ...page,
    parentId: queryParentId,
  }).then(res => {
    tableLoading.value = false
    tableData.value = res.data.records
    total.value = res.data.total
@@ -125,6 +174,61 @@
  }).catch(() => {
    tableLoading.value = false
  })
}

const convertIdToValue = (data) => {
  return (data || []).map((item) => {
    const children = Array.isArray(item.children) ? item.children : []
    return {
      ...item,
      value: item.id,
      label: item.label || item.productName || '',
      children: convertIdToValue(children),
    }
  })
}

const findNodeById = (nodes, id) => {
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i]
    if (node.value === id) return node
    if (node.children?.length) {
      const found = findNodeById(node.children, id)
      if (found) return found
    }
  }
  return null
}

const loadProductOptions = async () => {
  try {
    const res = await productTreeList()
    productOptions.value = convertIdToValue(res || [])
  } catch (e) {
    productOptions.value = []
  }
}

const loadModelOptions = async (parentId) => {
  if (!parentId) {
    modelOptions.value = []
    return
  }
  const res = await modelList({ id: parentId })
  modelOptions.value = Array.isArray(res) ? res : []
}

const handleParentChange = async (value) => {
  searchForm.value.productModelId = undefined
  searchForm.value.model = ''
  const selected = findNodeById(productOptions.value, value)
  searchForm.value.productName = selected?.label || ''
  await loadModelOptions(value || props.parentId)
}

const handleModelChange = (value) => {
  const selected = modelOptions.value.find((item) => item.id === value)
  searchForm.value.model = selected?.model || ''
}

const handleFileSuccess = (response) => {
@@ -193,8 +297,21 @@
}

onMounted(() => {
  loadProductOptions()
  getList()
})

watch(
  () => props.parentId,
  async () => {
    searchForm.value.parentId = props.parentId
    searchForm.value.productModelId = undefined
    searchForm.value.model = ''
    await loadModelOptions(props.parentId)
    handleQuery()
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">