feat(高级价格管理): 优化商品和供应商选择逻辑并调整表单布局

ZN

4 天以前 9de19b44ef1648023571c959417115800a0ff649

 src/views/procurementManagement/advancedPriceManagement/index.vue

@@ -11,14 +11,6 @@
            <el-option v-for="supplier in supplierList" :key="supplier.id" :label="supplier.name" :value="supplier.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格状态：">
          <el-select v-model="searchForm.priceStatus" placeholder="请选择状态" clearable style="width: 150px">
            <el-option label="有效" value="active" />
            <el-option label="待生效" value="pending" />
            <el-option label="已过期" value="expired" />
            <el-option label="已暂停" value="suspended" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>
@@ -42,10 +34,6 @@
        <el-button type="success" @click="openBatchDiscountDialog">
          <el-icon><Discount /></el-icon>
          批量折扣
        </el-button>
        <el-button type="warning" @click="openPriceControlDialog">
          <el-icon><Setting /></el-icon>
          价格控制
        </el-button>
        <el-button type="info" @click="exportData">
          <el-icon><Download /></el-icon>
@@ -74,14 +62,14 @@
            <div class="product-info">
              <div class="product-name">{{ row.productName }}</div>
              <div class="product-spec">{{ row.specification }}</div>
              <div class="product-code">编码: {{ row.productCode }}</div>
              <!-- <div class="product-code">编码: {{ row.productCode }}</div> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商" prop="supplierName" width="150" />
        <el-table-column label="供应商" prop="supplierName" width="200" />
        <el-table-column label="基础价格" width="120" align="right">
          <template #default="{ row }">
            <span class="price-text">¥{{ row.basePrice.toFixed(2) }}</span>
            <span class="price-text">¥{{ row.basePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折扣信息" width="150">
@@ -97,17 +85,17 @@
        </el-table-column>
        <el-table-column label="实际价格" width="120" align="right">
          <template #default="{ row }">
            <span class="final-price">¥{{ calculateFinalPrice(row).toFixed(2) }}</span>
            <span class="final-price">¥{{ calculateFinalPrice(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格控制" width="120">
          <template #default="{ row }">
            <div class="price-control">
              <div v-if="row.priceControl?.minPrice" class="control-item">
                最低: ¥{{ row.priceControl.minPrice.toFixed(2) }}
              <div v-if="row.minPrice" class="control-item">
                最低: ¥{{ row.minPrice }}
              </div>
              <div v-if="row.priceControl?.maxPrice" class="control-item">
                最高: ¥{{ row.priceControl.maxPrice.toFixed(2) }}
              <div v-if="row.maxPrice" class="control-item">
                最高: ¥{{ row.maxPrice }}
              </div>
            </div>
          </template>
@@ -115,9 +103,9 @@
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
            <div v-if="isPriceWarning(row)" class="warning-indicator">
            <!-- <div v-if="isPriceWarning(row)" class="warning-indicator">
              <el-icon color="#F56C6C"><Warning /></el-icon>
            </div>
            </div> -->
          </template>
        </el-table-column>
        <el-table-column label="生效时间" prop="effectiveTime" width="180" />
@@ -127,10 +115,6 @@
            <el-button type="primary" link @click="openDialog('edit', row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button type="success" link @click="openDiscountDialog(row)">
              <el-icon><Discount /></el-icon>
              折扣
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
@@ -143,10 +127,10 @@
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -159,10 +143,20 @@
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productName">
              <el-select v-model="formData.productName" placeholder="请选择商品" style="width: 100%" filterable>
                <el-option v-for="product in productList" :key="product.id" :label="product.name" :value="product.name" />
              </el-select>
            <el-form-item label="商品名称" prop="productId">
              <el-tree-select
                v-model="formData.productId"
                placeholder="请选择商品"
                clearable
                filterable
                check-strictly
                @change="getModels"
                :data="productOptions"
                :props="{ label: 'productName', value: 'id', children: 'children' }"
                node-key="id"
                :render-after-expand="false"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -174,13 +168,35 @@
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="规格型号" prop="specification">
              <el-input v-model="formData.specification" placeholder="请输入规格型号" />
              <el-select
                v-model="formData.specification"
                placeholder="请选择"
                clearable
                @change="getProductModel"
              >
                <el-option
                  v-for="item in modelOptions"
                  :key="item.id"
                  :label="item.model"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierName">
              <el-select v-model="formData.supplierName" placeholder="请选择供应商" style="width: 100%">
                <el-option v-for="supplier in supplierList" :key="supplier.id" :label="supplier.name" :value="supplier.name" />
            <el-form-item label="供应商" prop="supplierId">
              <el-select
                v-model="formData.supplierId"
                placeholder="请选择供应商"
                clearable
                @change="handleSupplierChange"
              >
                <el-option
                  v-for="item in supplierList"
                  :key="item.id"
                  :label="item.supplierName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
@@ -201,20 +217,20 @@
        <!-- 折扣设置 -->
        <el-divider content-position="left">折扣设置</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
          <el-col :span="12">
            <el-form-item label="折扣类型">
              <el-select v-model="formData.discountType" placeholder="请选择折扣类型" style="width: 100%">
                <el-option label="无折扣" value="" />
                <el-option label="百分比折扣" value="percentage" />
                <el-option label="固定金额" value="fixed" />
                <el-option label="阶梯折扣" value="tiered" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣值" v-if="formData.discountType && formData.discountType !== 'tiered'">
          <el-col :span="12">
            <el-form-item label="折扣值">
              <el-input-number 
                v-model="formData.discountValue" 
                :disabled="!(formData.discountType && formData.discountType !== 'tiered')"
                :min="0" 
                :max="formData.discountType === 'percentage' ? 100 : undefined"
                :precision="2" 
@@ -223,10 +239,11 @@
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-col :span="12">
            <el-form-item label="折扣有效期">
              <el-date-picker 
                v-model="formData.discountEndTime" 
                :disabled="!(formData.discountType && formData.discountType !== 'tiered')"
                type="datetime" 
                placeholder="选择结束时间" 
                style="width: 100%" 
@@ -235,51 +252,17 @@
          </el-col>
        </el-row>

        <!-- 阶梯折扣设置 -->
        <div v-if="formData.discountType === 'tiered'">
          <el-form-item label="阶梯折扣">
            <el-table :data="formData.tieredDiscount" border size="small">
              <el-table-column label="最小数量" width="120">
                <template #default="{ row, $index }">
                  <el-input-number v-model="row.minQty" :min="0" size="small" />
                </template>
              </el-table-column>
              <el-table-column label="最大数量" width="120">
                <template #default="{ row, $index }">
                  <el-input-number v-model="row.maxQty" :min="0" size="small" />
                </template>
              </el-table-column>
              <el-table-column label="折扣率(%)" width="120">
                <template #default="{ row, $index }">
                  <el-input-number v-model="row.discount" :min="0" :max="100" :precision="2" size="small" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template #default="{ row, $index }">
                  <el-button type="danger" link @click="removeTieredRow($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="primary" link @click="addTieredRow" class="mt-2">添加阶梯</el-button>
          </el-form-item>
        </div>

        <!-- 价格控制 -->
        <el-divider content-position="left">价格控制</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
          <el-col :span="12">
            <el-form-item label="最低价格">
              <el-input-number v-model="formData.minPrice" :min="0" :precision="2" placeholder="最低价格" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-col :span="12">
            <el-form-item label="最高价格">
              <el-input-number v-model="formData.maxPrice" :min="0" :precision="2" placeholder="最高价格" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警阈值(%)">
              <el-input-number v-model="formData.warningThreshold" :min="0" :max="100" :precision="1" placeholder="预警阈值" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
@@ -378,13 +361,16 @@
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import {ref, reactive, computed, onMounted, getCurrentInstance} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { productTreeList, modelList } from "@/api/basicData/product.js";
import {
  Search, Refresh, Plus, Discount, Setting, Download, Delete, Edit, 
  Warning
} from '@element-plus/icons-vue'

import { listPage, update, del, add } from '@/api/procurementManagement/advancedPriceManagement'
import {
  getOptions,
} from "@/api/procurementManagement/procurementLedger.js";
// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
@@ -392,30 +378,35 @@
const batchDiscountVisible = ref(false)
const priceControlVisible = ref(false)
const dialogType = ref('add')
const productOptions = ref([]);
const modelOptions = ref([]);
const selectedRows = ref([])
const formRef = ref()

// 搜索表单
const searchForm = reactive({
  productName: '',
  supplierId: '',
  priceStatus: ''
  supplierId: ''
})

const total = ref(0)

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
  current: 1,
  size: 10
})


// 表单数据
const formData = reactive({
  productId: null,
  productName: '',
  productCode: '',
  specification: '',
  supplierId: null,
  supplierName: '',
  specificationId: null,
  basePrice: 0,
  unit: '',
  discountType: '',
@@ -430,6 +421,8 @@
  reason: '',
  remark: ''
})

const tableData = ref([])

// 批量折扣表单
const batchDiscountForm = reactive({
@@ -448,51 +441,17 @@

// 表单验证规则
const formRules = {
  productName: [{ required: true, message: '请选择商品名称', trigger: 'change' }],
  productId: [{ required: true, message: '请选择商品名称', trigger: 'change' }],
  productCode: [{ required: true, message: '请输入商品编码', trigger: 'blur' }],
  supplierName: [{ required: true, message: '请选择供应商', trigger: 'change' }],
  supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
  basePrice: [{ required: true, message: '请输入基础价格', trigger: 'blur' }],
  effectiveTime: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
  reason: [{ required: true, message: '请选择调价原因', trigger: 'change' }]
}

// 模拟数据
const tableData = ref([
  {
    id: 1,
    productName: '高强度螺栓',
    productCode: 'HQ001',
    specification: 'M12×80',
    supplierName: '优质五金供应商',
    basePrice: 2.50,
    discountType: 'percentage',
    discountValue: 10,
    priceControl: { minPrice: 2.00, maxPrice: 3.00 },
    status: 'active',
    effectiveTime: '2025-01-01 00:00:00',
    updateTime: '2025-09-17 10:30:00',
    unit: '个',
    reason: 'market',
    remark: '市场价格调整'
  },
  {
    id: 2,
    productName: '不锈钢管',
    productCode: 'BXG002',
    specification: 'Φ25×2.0',
    supplierName: '钢材贸易公司',
    basePrice: 45.80,
    discountType: 'fixed',
    discountValue: 5,
    priceControl: { minPrice: 40.00, maxPrice: 50.00 },
    status: 'pending',
    effectiveTime: '2025-10-01 00:00:00',
    updateTime: '2025-09-16 14:20:00',
    unit: '米',
    reason: 'cost',
    remark: '原材料成本上涨'
  }
])
getOptions().then((res) => {
    supplierList.value = res.data;
  });

const supplierList = ref([
  { id: 1, name: '优质五金供应商' },
@@ -507,17 +466,6 @@
])


// 计算属性
const finalTableData = computed(() => {
  return tableData.value.filter(item => {
    if (searchForm.productName && !item.productName.includes(searchForm.productName)) return false
    if (searchForm.supplierId && item.supplierId !== searchForm.supplierId) return false
    if (searchForm.priceStatus && item.status !== searchForm.priceStatus) return false
    
    return true
  })
})

// 方法
const calculateFinalPrice = (row) => {
  let finalPrice = row.basePrice
@@ -526,7 +474,8 @@
  } else if (row.discountType === 'fixed') {
    finalPrice = row.basePrice - row.discountValue
  }
  return Math.max(finalPrice, 0)
  let man = Math.max(finalPrice, 0)
  return man.toFixed(2)
}

const getDiscountTagType = (discountType) => {
@@ -541,52 +490,98 @@
const getDiscountText = (discountType) => {
  const textMap = {
    percentage: '百分比',
    fixed: '固定金额',
    tiered: '阶梯折扣'
    fixed: '固定金额'
  }
  return textMap[discountType] || '未知'
}

const getProductOptions = () => {
  productTreeList().then((res) => {
    productOptions.value = res;
  });
};

const findNodeById = (data, id) => {
  for (const item of data) {
    if (item.id === id) return item;
    if (item.children) {
      const found = findNodeById(item.children, id);
      if (found) return found;
    }
  }
  return null;
};

const getModels = (value) => {
  if (value) {
    const selectedProduct = findNodeById(productOptions.value, value);
    if (selectedProduct) {
      formData.productName = selectedProduct.productName;
      formData.productCode = selectedProduct.productCode;
    }
    modelList({ id: value }).then((res) => {
      modelOptions.value = res;
    });
  } else {
    formData.productName = "";
    formData.productCode = "";
    modelOptions.value = [];
  }
};

const getStatusType = (status) => {
  const statusMap = {
    active: 'success',
    pending: 'warning',
    expired: 'info',
    suspended: 'danger'
    expired: 'info'
  }
  return statusMap[status] || 'info'
}

const getProductModel = (value) => {
  const index = modelOptions.value.findIndex((item) => item.id === value);
  if (index !== -1) {
    formData.specification = modelOptions.value[index].model;
    formData.specificationId = modelOptions.value[index].id;
    formData.unit = modelOptions.value[index].unit;
  } else {
    formData.specification = null;
    formData.specificationId = null;
    formData.unit = null;
  }
};

const handleSupplierChange = (value) => {
  const supplier = supplierList.value.find(supplier => supplier.id === value)
  if (supplier) {
      formData.supplierId = supplier.id
      formData.supplierName = supplier.supplierName
  }
}

const getStatusText = (status) => {
  const statusMap = {
    active: '有效',
    pending: '待生效',
    expired: '已过期',
    suspended: '已暂停'
    expired: '已过期'
  }
  return statusMap[status] || '未知'
}

const isPriceWarning = (row) => {
  if (!row.priceControl) return false
  const finalPrice = calculateFinalPrice(row)
  return finalPrice < row.priceControl.minPrice || finalPrice > row.priceControl.maxPrice
}


const handleSearch = () => {
  loading.value = true
  // 模拟API调用
  setTimeout(() => {
  listPage({ ...searchForm, ...pagination}).then(res => {
    tableData.value = res.data.records
    total.value = res.data.total
    loading.value = false
  }, 500)
  })
}

const resetSearch = () => {
  Object.assign(searchForm, {
    productName: '',
    supplierId: '',
    priceStatus: ''
    supplierId: ''
  })
  handleSearch()
}
@@ -595,10 +590,14 @@
const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    // 复制行数据到表单
    Object.assign(formData, {
      ...row,
      minPrice: row.priceControl?.minPrice,
      maxPrice: row.priceControl?.maxPrice,
      // 兼容两种数据结构：平铺的字段或嵌套在 priceControl 中的字段
      minPrice: row.minPrice ?? row.priceControl?.minPrice,
      maxPrice: row.maxPrice ?? row.priceControl?.maxPrice,
      // 确保折扣有效期也被赋值 (如果 row.discountEndTime 存在的话)
      discountEndTime: row.discountEndTime || row.discountEndTime,
      tieredDiscount: row.tieredDiscount || []
    })
  } else {
@@ -609,9 +608,11 @@

const resetFormData = () => {
  Object.assign(formData, {
    productId: null,
    productName: '',
    productCode: '',
    specification: '',
    supplierId: null,
    supplierName: '',
    basePrice: 0,
    unit: '',
@@ -637,42 +638,38 @@
  })
}

const removeTieredRow = (index) => {
  formData.tieredDiscount.splice(index, 1)
}

const handleSubmit = async () => {
  if (!formRef.value) return
    formData.actualPrice = calculateFinalPrice(formData)
    if( formData.discountType === ''){
      formData.discountEndTime = '2099-12-31 23:59:59'
    }
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    // 模拟API调用
    setTimeout(() => {
      if (dialogType.value === 'add') {
        const newItem = {
          id: Date.now(),
          ...formData,
          priceControl: {
            minPrice: formData.minPrice,
            maxPrice: formData.maxPrice
          },
          status: 'pending',
          updateTime: new Date().toLocaleString()

    if (dialogType.value === 'add') {
      add(formData).then(res => {
        if (res.code === 200){
          ElMessage.success('新增成功')
          handleSearch()
        }
        tableData.value.unshift(newItem)
        ElMessage.success('新增成功')
      } else {
        // 编辑逻辑
        ElMessage.success('编辑成功')
      }
      
      dialogVisible.value = false
      submitLoading.value = false
    }, 1000)
      })
    } else {
      update(formData).then(res => {
        if (res.code === 200){
          ElMessage.success('编辑成功')
          handleSearch()
        }
      })
    }

  } catch (error) {
    console.error('表单验证失败:', error)
  }finally {
    dialogVisible.value = false
    submitLoading.value = false
  }
}

@@ -689,10 +686,13 @@
  selectedRows.value.forEach(row => {
    row.discountType = batchDiscountForm.discountType
    row.discountValue = batchDiscountForm.discountValue
    update(row).then(res => {
      handleSearch()
    })
  })
  
  ElMessage.success(`已为 ${selectedRows.value.length} 个商品设置折扣`)
  ElMessage.success('折扣设置成功')
  batchDiscountVisible.value = false

}

const openPriceControlDialog = () => {
@@ -704,23 +704,19 @@
  priceControlVisible.value = false
}

const openDiscountDialog = (row) => {
  // 单个商品折扣设置
  openDialog('edit', row)
}


const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
   let ids = [row.id]
    del(ids).then(res => {
      if(res.code === 200){
        ElMessage.success('删除成功')
        handleSearch()
      }
    })
  })
}

@@ -735,14 +731,12 @@
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    selectedRows.value.forEach(row => {
      const index = tableData.value.findIndex(item => item.id === row.id)
      if (index !== -1) {
        tableData.value.splice(index, 1)
     del(selectedRows.value.map(item => item.id)).then(i =>{
       if(i.code === 200){
        ElMessage.success('删除成功')
        handleSearch()
      }
    })
    ElMessage.success('批量删除成功')
    selectedRows.value = []
     })
  })
}

@@ -751,22 +745,34 @@
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.size = size
  handleSearch()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  pagination.current = page
  handleSearch()
}
const { proxy } = getCurrentInstance();

const exportData = () => {
  ElMessage.success('数据导出功能开发中...')
  ElMessageBox.confirm("内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/procurementPriceManagement/export", {}, "采购价格管理.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
}

// 生命周期
onMounted(() => {
  handleSearch()
  getProductOptions()
})
</script>