yavii/mom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PC端和手机端端双端适配

Browse Source
This commit is contained in:
如初
2026-03-14 10:22:48 +08:00
parent cb13784141
commit 5a1923d9ca
92 changed files with 9011 additions and 3149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/views/erp/purchase/inquiry/InquiryForm.vue
View File

@@ -1,132 +1,81 @@
<template>
<el-drawer
v-model="dialogVisible"
:title="dialogTitle"
direction="rtl"
size="100%"
:close-on-press-escape="true"
:destroy-on-close="true"
:append-to-body="true"
class="mobile-form-drawer"
>
<!-- 移动端布局 -->
<el-drawer v-if="isMobile" v-model="dialogVisible" :title="dialogTitle" direction="rtl" size="100%" :close-on-press-escape="true" :destroy-on-close="true" :append-to-body="true" class="mobile-form-drawer">
<div class="mobile-form" v-loading="formLoading">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-position="top"
:disabled="disabled"
>
<!-- 基本信息 -->
<el-form ref="formRef" :model="formData" :rules="formRules" label-position="top" :disabled="disabled">
<div class="mobile-form__section">
<div class="mobile-form__section-title">基本信息</div>
<el-form-item label="比价单号" prop="no">
<el-input disabled v-model="formData.no" placeholder="保存时自动生成" />
</el-form-item>
<el-form-item label="询价时间" prop="inquiryTime">
<el-date-picker
v-model="formData.inquiryTime"
type="date"
value-format="x"
placeholder="选择询价时间"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="截止日期" prop="deadline">
<el-date-picker
v-model="formData.deadline"
type="date"
value-format="x"
placeholder="选择截止日期"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="产品" prop="productId">
<el-select
v-model="formData.productId"
clearable
filterable
placeholder="请选择产品"
style="width: 100%"
@change="onChangeProduct"
>
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="比价单号" prop="no"><el-input disabled v-model="formData.no" placeholder="保存时自动生成" /></el-form-item>
<el-form-item label="询价时间" prop="inquiryTime"><el-date-picker v-model="formData.inquiryTime" type="date" value-format="x" placeholder="选择询价时间" style="width: 100%" /></el-form-item>
<el-form-item label="截止日期" prop="deadline"><el-date-picker v-model="formData.deadline" type="date" value-format="x" placeholder="选择截止日期" style="width: 100%" /></el-form-item>
<el-form-item label="产品" prop="productId"><el-select v-model="formData.productId" clearable filterable placeholder="请选择产品" style="width: 100%" @change="onChangeProduct"><el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
<div class="mobile-form__input-group">
<el-form-item label="需求数量" prop="requireCount">
<el-input-number
v-model="formData.requireCount"
controls-position="right"
:min="0.0001"
:precision="4"
placeholder="需求数量"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="预算金额" prop="budgetPrice">
<el-input-number
v-model="formData.budgetPrice"
controls-position="right"
:min="0"
:precision="2"
placeholder="预算金额"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="需求数量" prop="requireCount"><el-input-number v-model="formData.requireCount" controls-position="right" :min="0.0001" :precision="4" placeholder="需求数量" style="width: 100%" /></el-form-item>
<el-form-item label="预算金额" prop="budgetPrice"><el-input-number v-model="formData.budgetPrice" controls-position="right" :min="0" :precision="2" placeholder="预算金额" style="width: 100%" /></el-form-item>
</div>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" :rows="2" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" :rows="2" placeholder="请输入备注" /></el-form-item>
</div>
<!-- 供应商报价 -->
<div class="mobile-form__section">
<div class="mobile-form__section-title">供应商报价</div>
<InquiryQuoteForm ref="quoteFormRef" :quotes="formData.quotes" :disabled="disabled" :require-count="formData.requireCount" />
</div>
<!-- 比价汇总 -->
<div class="mobile-form__section" v-if="formData.quotes && formData.quotes.length > 0">
<div class="mobile-form__section-title">比价汇总</div>
<div class="mobile-form__info-row">
<span class="mobile-form__info-label">报价数量</span>
<span class="mobile-form__info-value">{{ formData.quotes.length }}</span>
</div>
<div class="mobile-form__info-row">
<span class="mobile-form__info-label">最低报价</span>
<span class="mobile-form__info-value" style="color: #67c23a">{{ erpPriceInputFormatter(minQuotePrice) }}</span>
</div>
<div class="mobile-form__info-row">
<span class="mobile-form__info-label">最高报价</span>
<span class="mobile-form__info-value" style="color: #e6a23c">{{ erpPriceInputFormatter(maxQuotePrice) }}</span>
</div>
<div class="mobile-form__info-row"><span class="mobile-form__info-label">报价数量</span><span class="mobile-form__info-value">{{ formData.quotes.length }}</span></div>
<div class="mobile-form__info-row"><span class="mobile-form__info-label">最低报价</span><span class="mobile-form__info-value" style="color: #67c23a">{{ erpPriceInputFormatter(minQuotePrice) }}</span></div>
<div class="mobile-form__info-row"><span class="mobile-form__info-label">最高报价</span><span class="mobile-form__info-value" style="color: #e6a23c">{{ erpPriceInputFormatter(maxQuotePrice) }}</span></div>
</div>
</el-form>
<!-- 底部操作按钮 -->
<div class="mobile-form__footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
</div>
</div>
</el-drawer>
<!-- PC端布局 -->
<Dialog v-else :title="dialogTitle" v-model="dialogVisible" width="1200">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading" :disabled="disabled">
<el-row :gutter="20">
<el-col :span="8"><el-form-item label="比价单号" prop="no"><el-input disabled v-model="formData.no" placeholder="保存时自动生成" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="询价时间" prop="inquiryTime"><el-date-picker v-model="formData.inquiryTime" type="date" value-format="x" placeholder="选择询价时间" class="!w-1/1" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="截止日期" prop="deadline"><el-date-picker v-model="formData.deadline" type="date" value-format="x" placeholder="选择截止日期" class="!w-1/1" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="产品" prop="productId"><el-select v-model="formData.productId" clearable filterable placeholder="请选择产品" class="!w-1/1" @change="onChangeProduct"><el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col>
<el-col :span="8"><el-form-item label="需求数量" prop="requireCount"><el-input-number v-model="formData.requireCount" controls-position="right" :min="0.0001" :precision="4" placeholder="请输入需求数量" class="!w-1/1" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="预算金额" prop="budgetPrice"><el-input-number v-model="formData.budgetPrice" controls-position="right" :min="0" :precision="2" placeholder="请输入预算金额" class="!w-1/1" /></el-form-item></el-col>
<el-col :span="24"><el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" :rows="2" placeholder="请输入备注" /></el-form-item></el-col>
</el-row>
<ContentWrap>
<el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
<el-tab-pane label="供应商报价" name="quote"><InquiryQuoteForm ref="quoteFormRef" :quotes="formData.quotes" :disabled="disabled" :require-count="formData.requireCount" /></el-tab-pane>
</el-tabs>
</ContentWrap>
<el-row :gutter="20" v-if="formData.quotes && formData.quotes.length > 0">
<el-col :span="8"><el-form-item label="报价数量"><el-input disabled :value="formData.quotes.length" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="最低报价"><el-input disabled :value="minQuotePrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
<el-col :span="8"><el-form-item label="最高报价"><el-input disabled :value="maxQuotePrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { nextTick } from 'vue'
import { nextTick, computed } from 'vue'
import { PurchaseInquiryApi, PurchaseInquiryVO } from '@/api/erp/purchase/inquiry'
import InquiryQuoteForm from './components/InquiryQuoteForm.vue'
import { ProductApi, ProductVO } from '@/api/erp/product/product'
import { erpPriceInputFormatter } from '@/utils'
import { useWindowSize } from '@vueuse/core'
/** ERP 采购比价表单 */
defineOptions({ name: 'InquiryForm' })
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@@ -166,7 +115,7 @@ const formRules = reactive({
const disabled = computed(() => formType.value === 'detail')
const formRef = ref() // 表单 Ref
const productList = ref<ProductVO[]>([]) // 产品列表
const subTabsName = ref('quote') // PC端子表标签
const quoteFormRef = ref()
/** 计算最低报价 */

63
src/views/erp/purchase/inquiry/components/InquiryQuoteForm.vue
View File

@@ -1,13 +1,6 @@
<template>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
v-loading="formLoading"
label-position="top"
:inline-message="true"
:disabled="disabled"
>
<!-- 移动端布局 -->
<el-form v-if="isMobile" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-position="top" :inline-message="true" :disabled="disabled">
<div class="mobile-quote-list">
<div
v-for="(row, $index) in formData"
@@ -118,20 +111,50 @@
</div>
<!-- 添加按钮 -->
<div class="mobile-quote-add" v-if="!disabled">
<el-button @click="handleAdd" round>+ 添加供应商报价</el-button>
</div>
<div class="mobile-quote-add" v-if="!disabled"><el-button @click="handleAdd" round>+ 添加供应商报价</el-button></div>
</div>
</el-form>
<!-- PC端布局 -->
<template v-else>
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="0px" :inline-message="true" :disabled="disabled">
<el-table :data="formData" show-summary :summary-method="getSummaries" class="-mt-10px" :row-class-name="tableRowClassName">
<el-table-column label="序号" type="index" align="center" width="60" />
<el-table-column label="选中" width="70" align="center"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.isSelected`" class="mb-0px!"><el-checkbox v-model="row.isSelected" @change="onSelectChange(row, $index)" /></el-form-item></template></el-table-column>
<el-table-column label="供应商" min-width="200"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.supplierId`" :rules="formRules.supplierId" class="mb-0px!"><el-select v-model="row.supplierId" clearable filterable @change="onChangeSupplier($event, row)" placeholder="请选择供应商" class="!w-full"><template #prefix v-if="!disabled"><el-button type="primary" link size="small" @click.stop="openQuickSupplierForm($index)" title="快速新增供应商" class="!p-0 !m-0"><Icon icon="ep:plus" /></el-button></template><el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></template></el-table-column>
<el-table-column label="联系人" min-width="120"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.contactName`" class="mb-0px!"><el-input v-model="row.contactName" placeholder="联系人" /></el-form-item></template></el-table-column>
<el-table-column label="联系电话" min-width="140"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.contactPhone`" class="mb-0px!"><el-input v-model="row.contactPhone" placeholder="联系电话" /></el-form-item></template></el-table-column>
<el-table-column label="报价日期" min-width="160"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.quoteDate`" class="mb-0px!"><el-date-picker v-model="row.quoteDate" type="date" value-format="x" placeholder="报价日期" class="!w-100%" /></el-form-item></template></el-table-column>
<el-table-column label="单价" prop="unitPrice" min-width="140"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.unitPrice`" :rules="formRules.unitPrice" class="mb-0px!"><el-input-number v-model="row.unitPrice" controls-position="right" :min="0" :precision="4" class="!w-100%" placeholder="单价" /></el-form-item></template></el-table-column>
<el-table-column label="总价" prop="totalPrice" min-width="120"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.totalPrice`" class="mb-0px!"><el-input disabled v-model="row.totalPrice" :formatter="erpPriceInputFormatter" /></el-form-item></template></el-table-column>
<el-table-column label="付款条件" min-width="150"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.paymentTerms`" class="mb-0px!"><el-select v-model="row.paymentTerms" placeholder="付款条件" clearable><el-option label="款到发货" value="款到发货" /><el-option label="货到付款" value="货到付款" /><el-option label="月结30天" value="月结30天" /><el-option label="月结60天" value="月结60天" /><el-option label="月结90天" value="月结90天" /><el-option label="预付30%" value="预付30%" /><el-option label="预付50%" value="预付50%" /><el-option label="其他" value="其他" /></el-select></el-form-item></template></el-table-column>
<el-table-column label="交货周期(天)" min-width="130"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.deliveryCycle`" class="mb-0px!"><el-input-number v-model="row.deliveryCycle" controls-position="right" :min="0" :precision="0" class="!w-100%" placeholder="天数" /></el-form-item></template></el-table-column>
<el-table-column label="资质文件" min-width="150"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.qualificationFile`" class="mb-0px!"><UploadFile :is-show-tip="false" v-model="row.qualificationFile" :limit="1" /></el-form-item></template></el-table-column>
<el-table-column label="备注" min-width="150"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.remark`" class="mb-0px!"><el-input v-model="row.remark" placeholder="请输入备注" /></el-form-item></template></el-table-column>
<el-table-column label="质量评分" width="100"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.qualityScore`" class="mb-0px!"><el-input-number v-model="row.qualityScore" controls-position="right" :min="0" :max="100" :precision="0" class="!w-100%" placeholder="0-100" /></el-form-item></template></el-table-column>
<el-table-column label="服务评分" width="100"><template #default="{ row, $index }"><el-form-item :prop="`${$index}.serviceScore`" class="mb-0px!"><el-input-number v-model="row.serviceScore" controls-position="right" :min="0" :max="100" :precision="0" class="!w-100%" placeholder="0-100" /></el-form-item></template></el-table-column>
<el-table-column label="价格得分" width="90" align="center"><template #default="{ row }"><span :class="row.priceScore >= 100 ? 'text-green-600 font-bold' : ''">{{ row.priceScore?.toFixed(2) ?? '-' }}</span></template></el-table-column>
<el-table-column label="交付得分" width="90" align="center"><template #default="{ row }"><span :class="row.deliveryScore >= 100 ? 'text-green-600 font-bold' : ''">{{ row.deliveryScore?.toFixed(2) ?? '-' }}</span></template></el-table-column>
<el-table-column label="综合得分" width="100" align="center"><template #default="{ row }"><el-tag v-if="row.totalScore != null" :type="row.isSelected ? 'success' : 'info'">{{ row.totalScore?.toFixed(2) }}</el-tag><span v-else class="text-gray-400">-</span></template></el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="60"><template #default="{ $index }"><el-button @click="handleDelete($index)" link>—</el-button></template></el-table-column>
</el-table>
</el-form>
<el-row justify="center" class="mt-3" v-if="!disabled"><el-button @click="handleAdd" round>+ 添加供应商报价</el-button></el-row>
</template>
<!-- 快速新增供应商弹窗 -->
<QuickSupplierForm ref="quickSupplierFormRef" @success="onQuickSupplierSuccess" />
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { SupplierEvaluationApi } from '@/api/erp/purchase/supplierEvaluation'
import { erpPriceInputFormatter, erpPriceMultiply, getSumValue } from '@/utils'
import { PurchaseInquiryQuoteVO } from '@/api/erp/purchase/inquiry'
import QuickSupplierForm from './QuickSupplierForm.vue'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const props = withDefaults(
defineProps<{
@@ -241,11 +264,25 @@ watch(
}
)
/** 合计总价 */
/** 合计总价 - 移动端 */
const summaryTotalPrice = computed(() => {
return getSumValue(formData.value.map((item) => Number(item.totalPrice || 0)))
})
/** 合计 - PC端 */
const getSummaries = (param: any) => {
const { columns, data } = param
const sums: string[] = []
columns.forEach((column, index: number) => {
if (index === 0) { sums[index] = '合计'; return }
if (['totalPrice'].includes(column.property)) {
const sum = getSumValue(data.map((item) => Number(item[column.property])))
sums[index] = erpPriceInputFormatter(sum)
} else { sums[index] = '' }
})
return sums
}
/** 新增按钮操作 */
const handleAdd = () => {
const row: PurchaseInquiryQuoteVO = {

57
src/views/erp/purchase/inquiry/components/QuickSupplierForm.vue
View File

@@ -1,34 +1,13 @@
<template>
<el-drawer
v-model="dialogVisible"
title="快速新增供应商"
direction="rtl"
size="100%"
:close-on-press-escape="true"
:destroy-on-close="true"
>
<!-- 移动端布局 -->
<el-drawer v-if="isMobile" v-model="dialogVisible" title="快速新增供应商" direction="rtl" size="100%" :close-on-press-escape="true" :destroy-on-close="true">
<div class="mobile-quick-supplier" v-loading="formLoading">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-position="top"
>
<el-form-item label="供应商名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入供应商名称" />
</el-form-item>
<el-form-item label="联系人" prop="contact">
<el-input v-model="formData.contact" placeholder="请输入联系人" />
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input v-model="formData.mobile" placeholder="请输入手机号码" />
</el-form-item>
<el-form-item label="联系电话" prop="telephone">
<el-input v-model="formData.telephone" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" />
</el-form-item>
<el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
<el-form-item label="供应商名称" prop="name"><el-input v-model="formData.name" placeholder="请输入供应商名称" /></el-form-item>
<el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item>
<el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item>
<el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item>
<el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" /></el-form-item>
</el-form>
</div>
<template #footer>
@@ -36,14 +15,34 @@
<el-button @click="submitForm" type="primary" :loading="formLoading">确 定</el-button>
</template>
</el-drawer>
<!-- PC端布局 -->
<Dialog v-else title="快速新增供应商" v-model="dialogVisible" width="500px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<el-form-item label="供应商名称" prop="name"><el-input v-model="formData.name" placeholder="请输入供应商名称" /></el-form-item>
<el-form-item label="联系人" prop="contact"><el-input v-model="formData.contact" placeholder="请输入联系人" /></el-form-item>
<el-form-item label="手机号码" prop="mobile"><el-input v-model="formData.mobile" placeholder="请输入手机号码" /></el-form-item>
<el-form-item label="联系电话" prop="telephone"><el-input v-model="formData.telephone" placeholder="请输入联系电话" /></el-form-item>
<el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="2" /></el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button @click="submitForm" type="primary" :loading="formLoading">确 定</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { CommonStatusEnum } from '@/utils/constants'
import { useWindowSize } from '@vueuse/core'
defineOptions({ name: 'QuickSupplierForm' })
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const message = useMessage()
const dialogVisible = ref(false)

197
src/views/erp/purchase/inquiry/index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="mobile-purchase-inquiry">
<!-- 移动端布局 -->
<div v-if="isMobile" class="mobile-purchase-inquiry">
<!-- 顶部操作栏 -->
<div class="mobile-header">
<div class="mobile-header__search">
@@ -12,41 +13,15 @@
</div>
<div class="mobile-header__quick-filter">
<div
class="quick-filter-item"
:class="{ active: queryParams.status === undefined }"
@click="handleQuickFilter(undefined)"
>
全部订单
</div>
<div
class="quick-filter-item"
:class="{ active: queryParams.status === 10 }"
@click="handleQuickFilter(10)"
>
待询价
</div>
<div
class="quick-filter-item"
:class="{ active: queryParams.status === 20 }"
@click="handleQuickFilter(20)"
>
询价中
</div>
<div
class="quick-filter-item"
:class="{ active: queryParams.status === 30 }"
@click="handleQuickFilter(30)"
>
已完成
</div>
<div class="quick-filter-item" :class="{ active: queryParams.status === undefined }" @click="handleQuickFilter(undefined)">全部订单</div>
<div class="quick-filter-item" :class="{ active: queryParams.status === 10 }" @click="handleQuickFilter(10)">待询价</div>
<div class="quick-filter-item" :class="{ active: queryParams.status === 20 }" @click="handleQuickFilter(20)">询价中</div>
<div class="quick-filter-item" :class="{ active: queryParams.status === 30 }" @click="handleQuickFilter(30)">已完成</div>
</div>
<!-- 卡片列表 -->
<div class="mobile-list" v-loading="loading">
<div v-if="list.length === 0 && !loading" class="mobile-empty">
<el-empty description="暂无比价记录" />
</div>
<div v-if="list.length === 0 && !loading" class="mobile-empty"><el-empty description="暂无比价记录" /></div>
<div v-for="item in list" :key="item.id" class="mobile-card" @click="handleCardClick(item)">
<div class="mobile-card__header">
<span class="mobile-card__no">{{ item.no }}</span>
@@ -55,39 +30,15 @@
<el-tag v-else-if="item.status === 30" type="success" size="small">已完成</el-tag>
</div>
<div class="mobile-card__body">
<div class="mobile-card__row">
<span class="mobile-card__label">产品</span>
<span class="mobile-card__value">{{ item.productName || '-' }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">询价时间</span>
<span class="mobile-card__value">{{ formatDate2(item.inquiryTime) }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">截止日期</span>
<span class="mobile-card__value">{{ formatDate2(item.deadline) }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">创建人</span>
<span class="mobile-card__value">{{ item.creatorName || '-' }}</span>
</div>
<div class="mobile-card__row"><span class="mobile-card__label">产品</span><span class="mobile-card__value">{{ item.productName || '-' }}</span></div>
<div class="mobile-card__row"><span class="mobile-card__label">询价时间</span><span class="mobile-card__value">{{ formatDate2(item.inquiryTime) }}</span></div>
<div class="mobile-card__row"><span class="mobile-card__label">截止日期</span><span class="mobile-card__value">{{ formatDate2(item.deadline) }}</span></div>
<div class="mobile-card__row"><span class="mobile-card__label">创建人</span><span class="mobile-card__value">{{ item.creatorName || '-' }}</span></div>
<div class="mobile-card__nums">
<div class="mobile-card__num-item">
<div class="mobile-card__num-val">{{ erpCountInputFormatter(item.requireCount) }}</div>
<div class="mobile-card__num-label">需求数量</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val mobile-card__num-val--price">¥{{ erpPriceInputFormatter(item.budgetPrice) }}</div>
<div class="mobile-card__num-label">预算金额</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val">{{ item.quoteCount || 0 }}</div>
<div class="mobile-card__num-label">报价数</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" style="color:#67c23a">¥{{ erpPriceInputFormatter(item.minQuotePrice) }}</div>
<div class="mobile-card__num-label">最低报价</div>
</div>
<div class="mobile-card__num-item"><div class="mobile-card__num-val">{{ erpCountInputFormatter(item.requireCount) }}</div><div class="mobile-card__num-label">需求数量</div></div>
<div class="mobile-card__num-item"><div class="mobile-card__num-val mobile-card__num-val--price">¥{{ erpPriceInputFormatter(item.budgetPrice) }}</div><div class="mobile-card__num-label">预算金额</div></div>
<div class="mobile-card__num-item"><div class="mobile-card__num-val">{{ item.quoteCount || 0 }}</div><div class="mobile-card__num-label">报价数</div></div>
<div class="mobile-card__num-item"><div class="mobile-card__num-val" style="color:#67c23a">¥{{ erpPriceInputFormatter(item.minQuotePrice) }}</div><div class="mobile-card__num-label">最低报价</div></div>
</div>
</div>
<div class="mobile-card__footer">
@@ -109,26 +60,10 @@
<!-- 筛选抽屉 -->
<el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="60%">
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
<el-form-item label="产品" prop="productId">
<el-select v-model="queryParams.productId" clearable filterable placeholder="请选择产品" style="width:100%">
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="询价时间" prop="inquiryTime">
<el-date-picker v-model="queryParams.inquiryTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" start-placeholder="开始" end-placeholder="结束" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" style="width:100%" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%">
<el-option label="待询价" :value="10" />
<el-option label="询价中" :value="20" />
<el-option label="已完成" :value="30" />
</el-select>
</el-form-item>
<el-form-item label="创建人" prop="creator">
<el-select v-model="queryParams.creator" clearable filterable placeholder="请选择创建人" style="width:100%">
<el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="产品" prop="productId"><el-select v-model="queryParams.productId" clearable filterable placeholder="请选择产品" style="width:100%"><el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
<el-form-item label="询价时间" prop="inquiryTime"><el-date-picker v-model="queryParams.inquiryTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" start-placeholder="开始" end-placeholder="结束" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" style="width:100%" /></el-form-item>
<el-form-item label="状态" prop="status"><el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%"><el-option label="待询价" :value="10" /><el-option label="询价中" :value="20" /><el-option label="已完成" :value="30" /></el-select></el-form-item>
<el-form-item label="创建人" prop="creator"><el-select v-model="queryParams.creator" clearable filterable placeholder="请选择创建人" style="width:100%"><el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" /></el-select></el-form-item>
</el-form>
<template #footer>
<el-button @click="resetQuery">重置</el-button>
@@ -141,11 +76,73 @@
<!-- 自动比价弹窗 -->
<AutoCompareDialog ref="autoCompareRef" @success="getList" />
</div>
<!-- PC端布局 -->
<div v-else>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="比价单号" prop="no"><el-input v-model="queryParams.no" placeholder="请输入比价单号" clearable @keyup.enter="handleQuery" class="!w-240px" /></el-form-item>
<el-form-item label="产品" prop="productId"><el-select v-model="queryParams.productId" clearable filterable placeholder="请选择产品" class="!w-240px"><el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
<el-form-item label="询价时间" prop="inquiryTime"><el-date-picker v-model="queryParams.inquiryTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" /></el-form-item>
<el-form-item label="状态" prop="status"><el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px"><el-option label="待询价" :value="10" /><el-option label="询价中" :value="20" /><el-option label="已完成" :value="30" /></el-select></el-form-item>
<el-form-item label="创建人" prop="creator"><el-select v-model="queryParams.creator" clearable filterable placeholder="请选择创建人" class="!w-240px"><el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" /></el-select></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 type="primary" plain @click="openForm('create')" v-hasPermi="['erp:purchase-inquiry:create']"><Icon icon="ep:plus" class="mr-5px" /> 新增</el-button>
<el-button type="success" plain @click="handleExport" :loading="exportLoading" v-hasPermi="['erp:purchase-inquiry:export']"><Icon icon="ep:download" class="mr-5px" /> 导出</el-button>
<el-button type="danger" plain @click="handleDelete(selectionList.map((item) => item.id))" v-hasPermi="['erp:purchase-inquiry:delete']" :disabled="selectionList.length === 0"><Icon icon="ep:delete" class="mr-5px" /> 删除</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @selection-change="handleSelectionChange" @row-click="handleRowClick">
<el-table-column width="30" label="选择" type="selection" />
<el-table-column min-width="180" label="比价单号" align="center" prop="no" />
<el-table-column label="产品名称" align="center" prop="productName" min-width="150" />
<el-table-column label="需求数量" align="center" prop="requireCount" :formatter="erpCountTableColumnFormatter" width="100" />
<el-table-column label="预算金额" align="center" prop="budgetPrice" :formatter="erpPriceTableColumnFormatter" width="120" />
<el-table-column label="询价时间" align="center" prop="inquiryTime" :formatter="dateFormatter2" width="120" sortable />
<el-table-column label="截止日期" align="center" prop="deadline" :formatter="dateFormatter2" width="120" sortable />
<el-table-column label="报价数量" align="center" prop="quoteCount" width="100" />
<el-table-column label="最低报价" align="center" prop="minQuotePrice" :formatter="erpPriceTableColumnFormatter" width="120" />
<el-table-column label="创建人" align="center" prop="creatorName" width="100" />
<el-table-column label="状态" align="center" fixed="right" width="100" prop="status">
<template #default="scope">
<el-tag v-if="scope.row.status === 10" type="info">待询价</el-tag>
<el-tag v-else-if="scope.row.status === 20" type="warning">询价中</el-tag>
<el-tag v-else-if="scope.row.status === 30" type="success">已完成</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="300">
<template #default="scope">
<el-button link @click="openForm('detail', scope.row.id)" v-hasPermi="['erp:purchase-inquiry:query']">详情</el-button>
<el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['erp:purchase-inquiry:update']" :disabled="scope.row.status === 30">编辑</el-button>
<el-button link type="primary" @click="handleUpdateStatus(scope.row.id, 20)" v-hasPermi="['erp:purchase-inquiry:update-status']" v-if="scope.row.status === 10">询价</el-button>
<el-button link type="warning" @click="openAutoCompare(scope.row.id)" v-hasPermi="['erp:purchase-inquiry:update']" v-if="scope.row.status === 20 && scope.row.quoteCount >= 2">比价</el-button>
<el-button link type="success" @click="handleUpdateStatus(scope.row.id, 30)" v-hasPermi="['erp:purchase-inquiry:update-status']" v-if="scope.row.status === 20">完成</el-button>
<el-button link type="danger" @click="handleDelete([scope.row.id])" v-hasPermi="['erp:purchase-inquiry:delete']">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<InquiryForm ref="formRef" @success="getList" />
<!-- 自动比价弹窗 -->
<AutoCompareDialog ref="autoCompareRef" @success="getList" />
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { Search, Filter, Plus } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/formatTime'
import { formatDate, dateFormatter2 } from '@/utils/formatTime'
import download from '@/utils/download'
import { PurchaseInquiryApi, PurchaseInquiryVO } from '@/api/erp/purchase/inquiry'
import InquiryForm from './InquiryForm.vue'
@@ -153,11 +150,15 @@ import AutoCompareDialog from './AutoCompareDialog.vue'
import { ProductApi, ProductVO } from '@/api/erp/product/product'
import { UserVO } from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import { erpCountInputFormatter, erpPriceInputFormatter } from '@/utils'
import { erpCountInputFormatter, erpPriceInputFormatter, erpCountTableColumnFormatter, erpPriceTableColumnFormatter } from '@/utils'
import { useWindowSize } from '@vueuse/core'
/** ERP 采购比价列表 */
defineOptions({ name: 'ErpPurchaseInquiry' })
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const message = useMessage()
const { t } = useI18n()
@@ -251,7 +252,10 @@ const handleExport = async () => {
try {
await message.exportConfirm()
exportLoading.value = true
const data = await PurchaseInquiryApi.exportPurchaseInquiry(queryParams)
const exportParams = selectionList.value.length > 0
? { ids: selectionList.value.map(item => item.id) }
: queryParams
const data = await PurchaseInquiryApi.exportPurchaseInquiry(exportParams)
download.excel(data, '采购比价.xls')
} catch {
} finally {
@@ -259,6 +263,25 @@ const handleExport = async () => {
}
}
/** 选中操作 */
const selectionList = ref<PurchaseInquiryVO[]>([])
const handleSelectionChange = (rows: PurchaseInquiryVO[]) => {
selectionList.value = rows
}
/** 行点击操作 */
const handleRowClick = (row: PurchaseInquiryVO, column: any, event: MouseEvent) => {
const target = event.target as HTMLElement
if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'I' || target.tagName === 'svg' || target.closest('button') || target.closest('a') || target.closest('.el-button') || target.closest('.el-checkbox')) {
return
}
if (row.status === 30) {
openForm('detail', row.id)
} else {
openForm('update', row.id)
}
}
onMounted(async () => {
await getList()
productList.value = await ProductApi.getProductSimpleList()