Merge remote-tracking branch 'refs/remotes/origin/dev_New' into dev_tide_mi...

zouyu

7 天以前 1c0863efe062af3ebcdecb8c10568d779f5c8295

 src/views/procurementManagement/advancedPriceManagement/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,773 @@
<template>
  <div class="app-container">
    <!-- æœç´¢åŒºåŸŸ -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" label-width="100px">
        <el-form-item label="商品名称：">
          <el-input v-model="searchForm.productName" placeholder="请输入商品名称" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="供应商：">
          <el-select v-model="searchForm.supplierId" placeholder="请选择供应商" clearable style="width: 200px">
            <el-option v-for="supplier in supplierList" :key="supplier.id" :label="supplier.name" :value="supplier.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>
            æœç´¢
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>
            é‡ç½®
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- åŠŸèƒ½æŒ‰é’®åŒºåŸŸ -->
    <el-card class="action-card" shadow="never">
      <div class="action-buttons">
        <el-button type="primary" @click="openDialog('add')">
          <el-icon><Plus /></el-icon>
          æ–°å¢žä»·æ ¼
        </el-button>
        <el-button type="success" @click="openBatchDiscountDialog">
          <el-icon><Discount /></el-icon>
          æ‰¹é‡æŠ˜æ‰£
        </el-button>
        <el-button type="info" @click="exportData">
          <el-icon><Download /></el-icon>
          å¯¼å‡ºæ•°æ®
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="selectedRows.length === 0">
          <el-icon><Delete /></el-icon>
          æ‰¹é‡åˆ é™¤
        </el-button>
      </div>
    </el-card>


    <!-- ä¸»è¡¨æ ¼ -->
    <el-card class="table-card" shadow="never">
      <el-table 
        :data="tableData" 
        border 
        v-loading="loading" 
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'updateTime', order: 'descending' }"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品信息" min-width="200">
          <template #default="{ row }">
            <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>
          </template>
        </el-table-column>
        <el-table-column label="供应商" prop="supplierName" width="150" />
        <el-table-column label="基础价格" width="120" align="right">
          <template #default="{ row }">
            <span class="price-text">Â¥{{ row.basePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折扣信息" width="150">
          <template #default="{ row }">
            <div v-if="row.discountType">
              <el-tag :type="getDiscountTagType(row.discountType)" size="small">
                {{ getDiscountText(row.discountType) }}
              </el-tag>
              <div class="discount-value">{{ row.discountValue }}{{ row.discountType === 'percentage' ? '%' : '元' }}</div>
            </div>
            <span v-else class="no-discount">无折扣</span>
          </template>
        </el-table-column>
        <el-table-column label="实际价格" width="120" align="right">
          <template #default="{ row }">
            <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.minPrice" class="control-item">
                æœ€ä½Ž: Â¥{{ row.minPrice }}
              </div>
              <div v-if="row.maxPrice" class="control-item">
                æœ€é«˜: Â¥{{ row.maxPrice }}
              </div>
            </div>
          </template>
        </el-table-column>
        <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">
              <el-icon color="#F56C6C"><Warning /></el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="生效时间" prop="effectiveTime" width="180" />
        <el-table-column label="更新时间" prop="updateTime" width="180" sortable />
        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog('edit', row)">
              <el-icon><Edit /></el-icon>
              ç¼–辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
              åˆ é™¤
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- åˆ†é¡µ -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- æ–°å¢ž/编辑对话框 -->
    <FormDialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增价格' : '编辑价格'" :width="'800px'" :operation-type="dialogType" @close="dialogVisible = false" @confirm="handleSubmit" @cancel="dialogVisible = false">
      <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>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品编码" prop="productCode">
              <el-input v-model="formData.productCode" placeholder="请输入商品编码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="规格型号" prop="specification">
              <el-input v-model="formData.specification" placeholder="请输入规格型号" />
            </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-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="基础价格" prop="basePrice">
              <el-input-number v-model="formData.basePrice" :min="0" :precision="2" placeholder="请输入基础价格" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input v-model="formData.unit" placeholder="请输入单位" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- æŠ˜æ‰£è®¾ç½® -->
        <el-divider content-position="left">折扣设置</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <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-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣值" v-if="formData.discountType && formData.discountType !== 'tiered'">
              <el-input-number 
                v-model="formData.discountValue" 
                :min="0" 
                :max="formData.discountType === 'percentage' ? 100 : undefined"
                :precision="2" 
                placeholder="请输入折扣值" 
                style="width: 100%" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折扣有效期">
              <el-date-picker 
                v-model="formData.discountEndTime" 
                type="datetime" 
                placeholder="选择结束时间" 
                style="width: 100%" 
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- ä»·æ ¼æŽ§åˆ¶ -->
        <el-divider content-position="left">价格控制</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <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-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>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生效时间" prop="effectiveTime">
              <el-date-picker v-model="formData.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="失效时间">
              <el-date-picker v-model="formData.expireTime" type="datetime" placeholder="选择失效时间" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="调价原因" prop="reason">
          <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="seasonal" />
            <el-option label="促销活动" value="promotion" />
            <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>
    </FormDialog>

    <!-- æ‰¹é‡æŠ˜æ‰£å¯¹è¯æ¡† -->
    <FormDialog v-model="batchDiscountVisible" title="批量设置折扣" :width="'600px'" @close="batchDiscountVisible = false" @confirm="handleBatchDiscount" @cancel="batchDiscountVisible = false">
      <el-form :model="batchDiscountForm" label-width="120px">
        <el-form-item label="折扣类型">
          <el-select v-model="batchDiscountForm.discountType" placeholder="请选择折扣类型" style="width: 100%">
            <el-option label="百分比折扣" value="percentage" />
            <el-option label="固定金额" value="fixed" />
          </el-select>
        </el-form-item>
        <el-form-item label="折扣值">
          <el-input-number 
            v-model="batchDiscountForm.discountValue" 
            :min="0" 
            :max="batchDiscountForm.discountType === 'percentage' ? 100 : undefined"
            :precision="2" 
            placeholder="请输入折扣值" 
            style="width: 100%" 
          />
        </el-form-item>
        <el-form-item label="生效时间">
          <el-date-picker v-model="batchDiscountForm.effectiveTime" type="datetime" placeholder="选择生效时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="失效时间">
          <el-date-picker v-model="batchDiscountForm.expireTime" type="datetime" placeholder="选择失效时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="适用商品">
          <div class="selected-items">
            å·²é€‰æ‹© {{ selectedRows.length }} ä¸ªå•†å“
          </div>
        </el-form-item>
      </el-form>
    </FormDialog>

    <!-- ä»·æ ¼æŽ§åˆ¶å¯¹è¯æ¡† -->
    <FormDialog v-model="priceControlVisible" title="价格控制设置" :width="'700px'" @close="priceControlVisible = false" @confirm="handlePriceControl" @cancel="priceControlVisible = false">
      <el-form :model="priceControlForm" label-width="120px">
        <el-form-item label="默认最低价格">
          <el-input-number v-model="priceControlForm.defaultMinPrice" :min="0" :precision="2" style="width: 200px" />
        </el-form-item>
        <el-form-item label="默认最高价格">
          <el-input-number v-model="priceControlForm.defaultMaxPrice" :min="0" :precision="2" style="width: 200px" />
        </el-form-item>
        <el-form-item label="价格变动阈值">
          <el-input-number v-model="priceControlForm.changeThreshold" :min="0" :max="100" :precision="1" style="width: 200px" />
        </el-form-item>
      </el-form>
    </FormDialog>

  </div>
</template>

<script setup>
import FormDialog from '@/components/Dialog/FormDialog.vue';
import {ref, reactive, computed, onMounted, getCurrentInstance} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search, Refresh, Plus, Discount, Setting, Download, Delete, Edit, 
  Warning
} from '@element-plus/icons-vue'
import { listPage, update, del, add } from '@/api/procurementManagement/advancedPriceManagement'

// å“åº”式数据
const loading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const batchDiscountVisible = ref(false)
const priceControlVisible = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])
const formRef = ref()

// æœç´¢è¡¨å•
const searchForm = reactive({
  productName: '',
  supplierId: ''
})

const total = ref(0)

// åˆ†é¡µ
const pagination = reactive({
  current: 1,
  size: 10
})


// è¡¨å•æ•°æ®
const formData = reactive({
  productName: '',
  productCode: '',
  specification: '',
  supplierName: '',
  basePrice: 0,
  unit: '',
  discountType: '',
  discountValue: 0,
  discountEndTime: '',
  tieredDiscount: [],
  minPrice: null,
  maxPrice: null,
  warningThreshold: 10,
  effectiveTime: '',
  expireTime: '',
  reason: '',
  remark: ''
})

const tableData = ref([])

// æ‰¹é‡æŠ˜æ‰£è¡¨å•
const batchDiscountForm = reactive({
  discountType: 'percentage',
  discountValue: 0,
  effectiveTime: '',
  expireTime: ''
})

// ä»·æ ¼æŽ§åˆ¶è¡¨å•
const priceControlForm = reactive({
  defaultMinPrice: 0,
  defaultMaxPrice: 0,
  changeThreshold: 10,
})

// è¡¨å•éªŒè¯è§„则
const formRules = {
  productName: [{ required: true, message: '请选择商品名称', trigger: 'change' }],
  productCode: [{ required: true, message: '请输入商品编码', trigger: 'blur' }],
  supplierName: [{ required: true, message: '请选择供应商', trigger: 'change' }],
  basePrice: [{ required: true, message: '请输入基础价格', trigger: 'blur' }],
  effectiveTime: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
  reason: [{ required: true, message: '请选择调价原因', trigger: 'change' }]
}

const supplierList = ref([
  { id: 1, name: '优质五金供应商' },
  { id: 2, name: '钢材贸易公司' },
  { id: 3, name: '建材批发商' }
])

const productList = ref([
  { id: 1, name: '高强度螺栓' },
  { id: 2, name: '不锈钢管' },
  { id: 3, name: '铝合金型材' }
])


// æ–¹æ³•
const calculateFinalPrice = (row) => {
  let finalPrice = row.basePrice
  if (row.discountType === 'percentage') {
    finalPrice = row.basePrice * (1 - row.discountValue / 100)
  } else if (row.discountType === 'fixed') {
    finalPrice = row.basePrice - row.discountValue
  }
  return Math.max(finalPrice, 0)
}

const getDiscountTagType = (discountType) => {
  const typeMap = {
    percentage: 'success',
    fixed: 'warning',
    tiered: 'info'
  }
  return typeMap[discountType] || 'info'
}

const getDiscountText = (discountType) => {
  const textMap = {
    percentage: '百分比',
    fixed: '固定金额'
  }
  return textMap[discountType] || '未知'
}

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

const getStatusText = (status) => {
  const statusMap = {
    active: '有效',
    pending: '待生效',
    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调用
  listPage({ ...searchForm, ...pagination}).then(res => {
    tableData.value = res.data.records
    total.value = res.data.total
    loading.value = false
  })
}

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


const openDialog = (type, row = {}) => {
  dialogType.value = type
  if (type === 'edit' && row.id) {
    Object.assign(formData, {
      ...row,
      minPrice: row.priceControl?.minPrice,
      maxPrice: row.priceControl?.maxPrice,
      tieredDiscount: row.tieredDiscount || []
    })
  } else {
    resetFormData()
  }
  dialogVisible.value = true
}

const resetFormData = () => {
  Object.assign(formData, {
    productName: '',
    productCode: '',
    specification: '',
    supplierName: '',
    basePrice: 0,
    unit: '',
    discountType: '',
    discountValue: 0,
    discountEndTime: '',
    tieredDiscount: [],
    minPrice: null,
    maxPrice: null,
    warningThreshold: 10,
    effectiveTime: '',
    expireTime: '',
    reason: '',
    remark: ''
  })
}

const addTieredRow = () => {
  formData.tieredDiscount.push({
    minQty: 0,
    maxQty: 0,
    discount: 0
  })
}

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

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true

    if (dialogType.value === 'add') {
      add(formData).then(res => {
        if (res.code === 200){
          ElMessage.success('新增成功')
          handleSearch()
        }
      })
    } else {
      update(formData).then(res => {
        if (res.code === 200){
          ElMessage.success('编辑成功')
          handleSearch()
        }
      })
    }

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

const openBatchDiscountDialog = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要设置折扣的商品')
    return
  }
  batchDiscountVisible.value = true
}

const handleBatchDiscount = () => {
  // æ‰¹é‡è®¾ç½®æŠ˜æ‰£é€»è¾‘
  selectedRows.value.forEach(row => {
    row.discountType = batchDiscountForm.discountType
    row.discountValue = batchDiscountForm.discountValue
    update(row).then(res => {
      handleSearch()
    })
  })
  ElMessage.success('折扣设置成功')
  batchDiscountVisible.value = false

}

const openPriceControlDialog = () => {
  priceControlVisible.value = true
}

const handlePriceControl = () => {
  ElMessage.success('价格控制设置已保存')
  priceControlVisible.value = false
}

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

const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要删除的记录')
    return
  }
  
  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} æ¡è®°å½•å—？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
     del(selectedRows.value.map(item => item.id)).then(i =>{
       if(i.code === 200){
        ElMessage.success('删除成功')
        handleSearch()
      }
     })
  })
}

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

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

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

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

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  handleSearch()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-card, .action-card, .table-card {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.product-info {
  line-height: 1.4;
}

.product-name {
  font-weight: bold;
  color: #303133;
}

.product-spec, .product-code {
  font-size: 12px;
  color: #909399;
}

.price-text {
  font-weight: bold;
  color: #409EFF;
}

.final-price {
  font-weight: bold;
  color: #67C23A;
  font-size: 16px;
}

.discount-value {
  font-size: 12px;
  color: #E6A23C;
  margin-top: 2px;
}

.no-discount {
  color: #C0C4CC;
  font-size: 12px;
}

.price-control {
  font-size: 12px;
  line-height: 1.3;
}

.control-item {
  color: #909399;
}

.warning-indicator {
  margin-top: 2px;
}

.pagination-wrapper {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

.selected-items {
  color: #409EFF;
  font-weight: bold;
}


.mt-2 {
  margin-top: 8px;
}

.ml-2 {
  margin-left: 8px;
}

:deep(.el-table) {
  font-size: 13px;
}

:deep(.el-table th) {
  background-color: #fafafa;
}

:deep(.el-card__body) {
  padding: 15px;
}

:deep(.el-divider__text) {
  font-weight: bold;
  color: #409EFF;
}
</style>