Merge remote-tracking branch 'refs/remotes/origin/dev_ZQHX' into dev

spring

2025-09-01 653120dde7588e5be464166d3c316dc80227dbb0

 src/views/procurementManagement/priceManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,276 @@
<template>
  <div class="app-container">
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="商品名称：">
          <el-input v-model="searchForm.productName" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="供应商名称：">
          <el-input v-model="searchForm.supplierName" placeholder="请输入供应商名称" clearable />
        </el-form-item>
        <el-form-item label="价格状态：">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="有效" value="active" />
            <el-option label="已过期" value="expired" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <el-button type="primary" @click="openDialog('add')">新增价格</el-button>
        <el-button type="success" @click="handleBatchUpdate">批量更新</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </div>

      <el-table :data="tableData" border v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品名称" prop="productName" />
        <el-table-column label="规格型号" prop="specification" />
        <el-table-column label="供应商名称" prop="supplierName" />
        <el-table-column label="原价格" prop="oldPrice" width="120">
          <template #default="{ row }">Â¥{{ row.oldPrice.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="新价格" prop="newPrice" width="120">
          <template #default="{ row }">Â¥{{ row.newPrice.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="调价幅度" prop="priceChange" width="120">
          <template #default="{ row }">
            <span :style="{ color: row.priceChange >= 0 ? '#f56c6c' : '#67c23a' }">
              {{ row.priceChange >= 0 ? '+' : '' }}{{ row.priceChange.toFixed(2) }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column label="生效时间" prop="effectiveTime" width="180" />
        <el-table-column label="状态" prop="status" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog('edit', row)">编辑</el-button>
            <el-button type="success" link @click="handleApply(row)" v-if="row.status === 'pending'">应用</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增价格' : '编辑价格'" width="600px">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="商品名称">
          <el-select v-model="formData.productName" placeholder="请选择商品" style="width: 100%">
            <el-option label="商品A" value="商品A" />
            <el-option label="商品B" value="商品B" />
            <el-option label="商品C" value="商品C" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="formData.specification" placeholder="请输入规格型号" />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-select v-model="formData.supplierName" placeholder="请选择供应商" style="width: 100%">
            <el-option label="供应商A" value="供应商A" />
            <el-option label="供应商B" value="供应商B" />
            <el-option label="供应商C" value="供应商C" />
          </el-select>
        </el-form-item>
        <el-form-item label="原价格">
          <el-input v-model="formData.oldPrice" placeholder="请输入原价格" type="number" />
        </el-form-item>
        <el-form-item label="新价格">
          <el-input v-model="formData.newPrice" placeholder="请输入新价格" type="number" />
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker v-model="formData.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="调价原因">
          <el-select v-model="formData.reason" placeholder="请选择调价原因" style="width: 100%">
            <el-option label="市场价格变动" value="market" />
            <el-option label="成本变化" value="cost" />
            <el-option label="供应商调整" value="supplier" />
            <el-option label="其他原因" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const dialogVisible = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])

const searchForm = reactive({
  productName: '',
  supplierName: '',
  status: ''
})

const formData = reactive({
  productName: '',
  specification: '',
  supplierName: '',
  oldPrice: 0,
  newPrice: 0,
  effectiveTime: '',
  reason: '',
  remark: ''
})

const mockData = [
  {
    id: 1,
    productName: '商品A',
    specification: '规格1',
    supplierName: '供应商A',
    oldPrice: 50.00,
    newPrice: 55.00,
    priceChange: 10.00,
    effectiveTime: '2025-12-01 00:00:00',
    status: 'active',
    reason: '市场价格变动',
    remark: '市场价格上涨'
  },
  {
    id: 2,
    productName: '商品B',
    specification: '规格2',
    supplierName: '供应商B',
    oldPrice: 80.00,
    newPrice: 75.00,
    priceChange: -6.25,
    effectiveTime: '2025-12-01 00:00:00',
    status: 'active',
    reason: '成本变化',
    remark: '成本下降'
  }
]

const tableData = ref([...mockData])

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

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

const handleSearch = () => {
  loading.value = true
  setTimeout(() => { loading.value = false }, 500)
}

const resetSearch = () => {
  Object.assign(searchForm, { productName: '', supplierName: '', status: '' })
}

const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    Object.assign(formData, {
      productName: row.productName,
      specification: row.specification,
      supplierName: row.supplierName,
      oldPrice: row.oldPrice,
      newPrice: row.newPrice,
      effectiveTime: row.effectiveTime,
      reason: row.reason,
      remark: row.remark
    })
  } else {
    Object.assign(formData, {
      productName: '',
      specification: '',
      supplierName: '',
      oldPrice: 0,
      newPrice: 0,
      effectiveTime: '',
      reason: '',
      remark: ''
    })
  }
  dialogVisible.value = true
}

const handleSubmit = () => {
  if (dialogType.value === 'add') {
    const priceChange = ((formData.newPrice - formData.oldPrice) / formData.oldPrice) * 100
    const newPrice = {
      id: Date.now(),
      productName: formData.productName,
      specification: formData.specification,
      supplierName: formData.supplierName,
      oldPrice: formData.oldPrice,
      newPrice: formData.newPrice,
      priceChange: priceChange,
      effectiveTime: formData.effectiveTime,
      status: 'pending',
      reason: formData.reason,
      remark: formData.remark
    }
    tableData.value.unshift(newPrice)
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

const handleApply = (row) => {
  row.status = 'active'
  ElMessage.success('价格已应用')
}

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('删除成功')
    }
  })
}

const handleBatchUpdate = () => {
  ElMessage.success('批量更新成功')
}

const handleBatchDelete = () => {
  ElMessage.success('批量删除成功')
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}
</script>

<style scoped>
.app-container { padding: 20px; }
.search-card { margin-bottom: 20px; }
.table-card { margin-bottom: 20px; }
.table-header { margin-bottom: 20px; }
</style>