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

97
src/views/erp/purchase/evaluation/SupplierEvaluationForm.vue
View File

@@ -1,73 +1,63 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="100%" fullscreen class="mobile-eval-form-dialog">
<!-- 移动端布局 -->
<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-wrapper" v-loading="formLoading">
<el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
<div class="mobile-form-section">
<div class="mobile-form-section__title">基本信息</div>
<el-form-item label="供应商" prop="supplierName">
<el-input v-model="formData.supplierName" disabled />
</el-form-item>
<el-form-item label="订单单号" prop="orderNo">
<el-input v-model="formData.orderNo" disabled />
</el-form-item>
<el-form-item label="供应商" prop="supplierName"><el-input v-model="formData.supplierName" disabled /></el-form-item>
<el-form-item label="订单单号" prop="orderNo"><el-input v-model="formData.orderNo" disabled /></el-form-item>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">评分标准（满分10分）</div>
<el-form-item label="质量评分" prop="qualityScore">
<div class="rating-container">
<el-rate v-model="formData.qualityScore" :max="10" show-score score-template="{value}分" allow-half />
<div class="rating-desc">产品质量、规格符合度、缺陷率等</div>
</div>
</el-form-item>
<el-form-item label="服务评分" prop="serviceScore">
<div class="rating-container">
<el-rate v-model="formData.serviceScore" :max="10" show-score score-template="{value}分" allow-half />
<div class="rating-desc">售前售后服务、响应速度、专业程度等</div>
</div>
</el-form-item>
<el-form-item label="价格评分" prop="priceScore">
<div class="rating-container">
<el-rate v-model="formData.priceScore" :max="10" show-score score-template="{value}分" allow-half />
<div class="rating-desc">价格合理性、性价比、优惠政策等</div>
</div>
</el-form-item>
<el-form-item label="交付评分" prop="deliveryScore">
<div class="rating-container">
<el-rate v-model="formData.deliveryScore" :max="10" show-score score-template="{value}分" allow-half />
<div class="rating-desc">交付及时性、包装质量、物流配送等</div>
</div>
</el-form-item>
<el-form-item label="质量评分" prop="qualityScore"><div class="rating-container"><el-rate v-model="formData.qualityScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">产品质量、规格符合度、缺陷率等</div></div></el-form-item>
<el-form-item label="服务评分" prop="serviceScore"><div class="rating-container"><el-rate v-model="formData.serviceScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">售前售后服务、响应速度、专业程度等</div></div></el-form-item>
<el-form-item label="价格评分" prop="priceScore"><div class="rating-container"><el-rate v-model="formData.priceScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">价格合理性、性价比、优惠政策等</div></div></el-form-item>
<el-form-item label="交付评分" prop="deliveryScore"><div class="rating-container"><el-rate v-model="formData.deliveryScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">交付及时性、包装质量、物流配送等</div></div></el-form-item>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">综合评分</div>
<div class="total-score">
<span class="score-value">{{ totalScore.toFixed(1) }}分</span>
<span class="score-level">{{ getScoreLevel(totalScore) }}</span>
</div>
<div class="total-score"><span class="score-value">{{ totalScore.toFixed(1) }}分</span><span class="score-level">{{ getScoreLevel(totalScore) }}</span></div>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">评价备注</div>
<el-form-item prop="remark">
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入评价备注（可选）" maxlength="500" show-word-limit />
</el-form-item>
<el-form-item prop="remark"><el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入评价备注（可选）" maxlength="500" show-word-limit /></el-form-item>
</div>
</el-form>
</div>
<template #footer>
<div class="mobile-form-footer">
<el-button @click="dialogVisible = false" style="flex:1">取消</el-button>
<el-button type="primary" @click="submitForm" :loading="formLoading" style="flex:1">确定</el-button>
<div class="mobile-form__footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
</div>
</div>
</el-drawer>
<!-- PC端布局 -->
<Dialog v-else v-model="dialogVisible" :title="dialogTitle" width="600px">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
<el-form-item label="供应商" prop="supplierName"><el-input v-model="formData.supplierName" disabled /></el-form-item>
<el-form-item label="订单单号" prop="orderNo"><el-input v-model="formData.orderNo" disabled /></el-form-item>
<el-divider content-position="left">评分标准（满分10分）</el-divider>
<el-form-item label="质量评分" prop="qualityScore"><div class="rating-container"><el-rate v-model="formData.qualityScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">产品质量、规格符合度、缺陷率等</div></div></el-form-item>
<el-form-item label="服务评分" prop="serviceScore"><div class="rating-container"><el-rate v-model="formData.serviceScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">售前售后服务、响应速度、专业程度等</div></div></el-form-item>
<el-form-item label="价格评分" prop="priceScore"><div class="rating-container"><el-rate v-model="formData.priceScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">价格合理性、性价比、优惠政策等</div></div></el-form-item>
<el-form-item label="交付评分" prop="deliveryScore"><div class="rating-container"><el-rate v-model="formData.deliveryScore" :max="10" show-score score-template="{value}分" allow-half /><div class="rating-desc">交付及时性、包装质量、物流配送等</div></div></el-form-item>
<el-form-item label="综合评分" prop="totalScore"><div class="total-score"><span class="score-value">{{ totalScore.toFixed(1) }}分</span><span class="score-level">{{ getScoreLevel(totalScore) }}</span></div></el-form-item>
<el-form-item label="评价备注" prop="remark"><el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入评价备注（可选）" maxlength="500" show-word-limit /></el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm" :loading="formLoading">确定</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { SupplierEvaluationApi, SupplierEvaluationVO } from '@/api/erp/purchase/supplierEvaluation'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
interface SupplierEvaluationForm {
id?: number
@@ -222,10 +212,19 @@ defineExpose({ open })
border-bottom: 1px solid #f0f0f0;
}
}
.mobile-form-footer {
.mobile-form__footer {
position: sticky;
bottom: 0;
background: #fff;
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 0 4px;
z-index: 10;
margin: 0 -4px -12px;
.el-button { flex: 1; height: 40px; font-size: 15px; }
}
.rating-container {
display: flex;