优化
This commit is contained in:
524
src/views/biddingManagemen/listOfWinningBids/index copy 2.vue
Normal file
524
src/views/biddingManagemen/listOfWinningBids/index copy 2.vue
Normal file
@ -0,0 +1,524 @@
|
||||
<template>
|
||||
<div class="p-4 bg-gray-50 min-h-screen">
|
||||
<!-- 卡片容器：控制最大宽度+居中+圆角阴影 -->
|
||||
<el-card shadow="hover" class="max-w-6xl mx-auto rounded-xl overflow-hidden border-0" style="background-color: #ffffff">
|
||||
<!-- 卡片头部：项目信息展示区（非表单布局） -->
|
||||
<template #header>
|
||||
<div class="bg-blue-50 px-6 rounded-t-xl" style="padding: 10px 20px">
|
||||
<h3 class="el-card__header-title text-lg font-semibold text-blue-800">投标项目信息</h3>
|
||||
<h4>{{ currentProject.name }}</h4>
|
||||
<!-- 项目信息部分 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="project-info-item">
|
||||
<span>负责人：</span>
|
||||
<span> {{ projectInfo.principal || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>负责人电话：</span>
|
||||
<span> {{ projectInfo.principalPhone || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>项目类型：</span>
|
||||
<span> {{ getDictLabel(project_type, projectInfo.projectType) || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>项目阶段：</span>
|
||||
<span> {{ getDictLabel(project_stage, projectInfo.projectStage) || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>开工时间：</span>
|
||||
<span> {{ projectInfo.onStreamTime || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>经纬度：</span>
|
||||
<span> {{ projectInfo.lng || '-' }}，{{ projectInfo.lat || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item md:col-span-2 lg:col-span-3">
|
||||
<span>项目地址：</span>
|
||||
<span> {{ projectInfo.projectSite || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>计划容量(M)：</span>
|
||||
<span> {{ projectInfo.plan || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>实际容量(M)：</span>
|
||||
<span> {{ projectInfo.actual || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item">
|
||||
<span>设计总量(M)：</span>
|
||||
<span> {{ projectInfo.designTotal || '-' }}</span>
|
||||
</div>
|
||||
<div class="project-info-item md:col-span-2 lg:col-span-3">
|
||||
<span>备注：</span>
|
||||
<span> {{ projectInfo.remark || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 mb-6">
|
||||
<el-button @click="isDisabled = false" type="primary" class="px-8 py-2.5 transition-all duration-300 font-medium" v-if="isDisabled">
|
||||
点击编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 中标信息表单区域（保持原有逻辑） -->
|
||||
<el-form
|
||||
:disabled="isDisabled"
|
||||
ref="listOfWinningBidsFormRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="150px"
|
||||
class="p-6 pt-4"
|
||||
style="background-color: #ffffff"
|
||||
>
|
||||
<el-row :gutter="32">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="中标价(美元)" prop="winningBidOriginal" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model.number="form.winningBidOriginal" type="number" placeholder="请输入中标价" @input="calculateWinningBid" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="汇率" prop="exchangeRate" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model.number="form.exchangeRate" type="number" placeholder="请输入汇率" step="0.0001" @input="calculateWinningBid" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="币种" prop="currency" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.currency" placeholder="请输入币种" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="中标价(人民币)" prop="winningBid" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.winningBid" type="number" placeholder="根据美元中标价和汇率自动计算" readonly />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="中标日期" prop="bidWinningDate" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="form.bidWinningDate"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择中标日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="投标保证金(人民币)" prop="bidDeposit" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.bidDeposit" type="number" placeholder="请输入投标保证金" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否退还" prop="whetherSendBack" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-radio-group v-model="form.whetherSendBack">
|
||||
<el-radio label="是" border>是</el-radio>
|
||||
<el-radio label="否" border>否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属主体" prop="subject" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.subject" placeholder="请输入所属主体" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="建设单位" prop="construction" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.construction" placeholder="请输入建设单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="总造价" prop="totalCost" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.totalCost" placeholder="请输入总造价" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="立项申请人" prop="projectApplicant" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.projectApplicant" placeholder="请输入立项申请人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="立项部门" prop="projectApplicantDept" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.projectApplicantDept" placeholder="请输入立项部门" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="立项申请日期" prop="projectApplicantTime" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="form.projectApplicantTime"
|
||||
type="date"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择立项申请日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="项目编号" prop="projectNumbering" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<el-input v-model="form.projectNumbering" placeholder="请输入项目编号" />
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="中标通知书" prop="projectNumbering" class="rounded-lg border border-gray-100 p-1 mb-5">
|
||||
<file-upload v-model="form.bidFile" :limit="10" :file-type="['pdf']" :file-size="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 操作按钮区域 -->
|
||||
<el-row v-if="!isDisabled" class="mt-8">
|
||||
<el-col :span="24" class="text-center">
|
||||
<el-button
|
||||
:loading="buttonLoading"
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
v-hasPermi="['bidding:listOfWinningBids:add', 'bidding:listOfWinningBids:edit']"
|
||||
class="rounded-full px-8"
|
||||
size="large"
|
||||
>
|
||||
确认提交
|
||||
</el-button>
|
||||
<el-button type="default" @click="resetForm" class="ml-6 rounded-full px-8" size="large"> 重置 </el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="ListOfWinningBidsForm" lang="ts">
|
||||
import { ref, reactive, toRefs, watch, onMounted, onUnmounted, getCurrentInstance, ComponentInternalInstance, computed } from 'vue';
|
||||
import { addListOfWinningBids, updateListOfWinningBids, listListOfWinningBids, getListOfWinningBids } from '@/api/bidding/listOfWinningBids';
|
||||
import { ListOfWinningBidsVO, ListOfWinningBidsForm } from '@/api/bidding/listOfWinningBids/types';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { ElFormInstance, ElMessage } from 'element-plus';
|
||||
import { getProject, updateProject } from '@/api/project/project'; // 补充项目信息更新接口
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { project_type, project_stage } = toRefs<any>(proxy?.useDict('project_type', 'project_stage'));
|
||||
|
||||
// 用户状态管理
|
||||
const userStore = useUserStoreHook();
|
||||
// 当前选中项目（从store获取）
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
|
||||
// 项目信息（非表单绑定，直接响应式数据）
|
||||
const projectInfo = reactive({
|
||||
projectName: undefined,
|
||||
shortName: undefined,
|
||||
pId: undefined,
|
||||
status: undefined,
|
||||
picUrl: undefined,
|
||||
remark: undefined,
|
||||
projectType: undefined,
|
||||
projectCategory: undefined,
|
||||
deletedAt: undefined,
|
||||
projectSite: undefined,
|
||||
principal: undefined,
|
||||
principalPhone: undefined,
|
||||
actual: undefined,
|
||||
lng: undefined,
|
||||
lat: undefined,
|
||||
plan: undefined,
|
||||
onStreamTime: undefined,
|
||||
playCardStart: undefined,
|
||||
playCardEnd: undefined,
|
||||
designTotal: undefined,
|
||||
securityAgreement: undefined,
|
||||
sort: 0,
|
||||
showHidden: undefined,
|
||||
isDelete: undefined
|
||||
});
|
||||
|
||||
// 表单相关引用
|
||||
const listOfWinningBidsFormRef = ref<ElFormInstance>();
|
||||
// 加载状态
|
||||
const buttonLoading = ref(false);
|
||||
// 编辑/查看状态控制
|
||||
const isDisabled = ref(false);
|
||||
|
||||
// 表单初始数据
|
||||
const initFormData: ListOfWinningBidsForm = {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
projectStatus: undefined,
|
||||
projectName: undefined,
|
||||
winningBidOriginal: undefined,
|
||||
exchangeRate: undefined,
|
||||
currency: undefined,
|
||||
subject: undefined,
|
||||
winningBid: undefined,
|
||||
bidWinningDate: undefined,
|
||||
bidDeposit: undefined,
|
||||
whetherSendBack: undefined,
|
||||
construction: undefined,
|
||||
totalCost: undefined,
|
||||
projectApplicant: undefined,
|
||||
projectApplicantDept: undefined,
|
||||
projectApplicantTime: undefined,
|
||||
processStatus: undefined,
|
||||
projectNumbering: undefined
|
||||
};
|
||||
|
||||
// 表单数据与验证规则
|
||||
const data = reactive({
|
||||
form: { ...initFormData } as ListOfWinningBidsForm,
|
||||
rules: {
|
||||
projectId: [{ required: true, message: '项目ID不能为空', trigger: 'blur' }],
|
||||
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
||||
winningBidOriginal: [{ required: true, message: '请输入原始中标价', trigger: 'blur' }],
|
||||
exchangeRate: [
|
||||
{ required: true, message: '请输入汇率', trigger: 'blur' },
|
||||
{ type: 'number', min: 0.001, message: '汇率需大于0', trigger: 'blur' }
|
||||
],
|
||||
currency: [{ required: true, message: '请输入币种', trigger: 'blur' }],
|
||||
subject: [{ required: true, message: '请输入所属主体', trigger: 'blur' }],
|
||||
winningBid: [{ required: true, message: '请输入中标价', trigger: 'blur' }],
|
||||
bidWinningDate: [{ required: true, message: '请选择中标日期', trigger: 'blur' }],
|
||||
projectNumbering: [{ required: true, message: '请输入项目编号', trigger: 'blur' }]
|
||||
} as Record<string, any>
|
||||
});
|
||||
|
||||
// 解构响应式数据
|
||||
const { form, rules } = toRefs(data);
|
||||
|
||||
/**
|
||||
* 根据字典值获取字典标签（用于项目类型/阶段的文本展示）
|
||||
*/
|
||||
const getDictLabel = (dictList: any[], value: any) => {
|
||||
if (!dictList || !value) return '';
|
||||
const dictItem = dictList.find((item) => item.value === value);
|
||||
return dictItem ? dictItem.label : '';
|
||||
};
|
||||
|
||||
/**
|
||||
* 计算人民币中标价
|
||||
*/
|
||||
const calculateWinningBid = () => {
|
||||
const dollarAmount = Number(form.value.winningBidOriginal);
|
||||
const rate = Number(form.value.exchangeRate);
|
||||
|
||||
if (isNaN(dollarAmount) || isNaN(rate) || dollarAmount <= 0 || rate <= 0) {
|
||||
form.value.winningBid = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
const result = dollarAmount * rate;
|
||||
form.value.winningBid = Number(result.toFixed(2));
|
||||
};
|
||||
|
||||
/**
|
||||
* 页面初始化 - 获取已有数据（如存在）
|
||||
*/
|
||||
const initData = async () => {
|
||||
try {
|
||||
if (currentProject.value?.id) {
|
||||
const res = await listListOfWinningBids({ projectId: currentProject.value.id });
|
||||
if (res.code === 200) {
|
||||
resetForm();
|
||||
if (!res.data) {
|
||||
isDisabled.value = false;
|
||||
return;
|
||||
}
|
||||
Object.assign(form.value, res.data);
|
||||
isDisabled.value = true;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化中标数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 提交表单（含项目信息+中标信息同步提交）
|
||||
*/
|
||||
const submitForm = () => {
|
||||
listOfWinningBidsFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
try {
|
||||
// 1. 计算人民币中标价
|
||||
calculateWinningBid();
|
||||
// 2. 绑定项目ID和项目名称（从项目信息同步）
|
||||
form.value.projectId = currentProject.value?.id;
|
||||
form.value.projectName = projectInfo.projectName;
|
||||
|
||||
// 3. 先更新项目信息（若项目信息有修改）
|
||||
if (currentProject.value?.id) {
|
||||
await updateProject({ id: currentProject.value.id, ...projectInfo });
|
||||
}
|
||||
|
||||
// 4. 再提交中标信息（新增/编辑逻辑）
|
||||
const isEdit = !!form.value.id;
|
||||
if (isEdit) {
|
||||
await updateListOfWinningBids(form.value);
|
||||
} else {
|
||||
await addListOfWinningBids(form.value);
|
||||
}
|
||||
|
||||
// 5. 提交成功后切换为查看状态
|
||||
isDisabled.value = true;
|
||||
ElMessage.success(isEdit ? '编辑成功' : '提交成功');
|
||||
} catch (error) {
|
||||
ElMessage.error('提交失败，请重试');
|
||||
console.error('提交表单失败:', error);
|
||||
} finally {
|
||||
buttonLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取项目详细信息
|
||||
*/
|
||||
const getProjectDetail = async () => {
|
||||
try {
|
||||
if (currentProject.value?.id) {
|
||||
const res = await getProject(currentProject.value.id);
|
||||
Object.assign(projectInfo, res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取项目详情失败:', error);
|
||||
ElMessage.error('获取项目信息失败');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置表单（含项目信息重置）
|
||||
*/
|
||||
const resetForm = () => {
|
||||
// 重置中标表单
|
||||
form.value = { ...initFormData, projectId: currentProject.value?.id };
|
||||
listOfWinningBidsFormRef.value?.resetFields();
|
||||
|
||||
// 重置项目信息（恢复为当前项目的原始数据）
|
||||
getProjectDetail();
|
||||
};
|
||||
|
||||
/**
|
||||
* 监听项目ID变化 - 重新初始化数据
|
||||
*/
|
||||
const projectIdWatcher = watch(
|
||||
() => currentProject.value?.id,
|
||||
(newId) => {
|
||||
if (newId) {
|
||||
form.value.projectId = newId;
|
||||
getProjectDetail();
|
||||
initData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 页面挂载时初始化
|
||||
onMounted(() => {
|
||||
getProjectDetail();
|
||||
initData();
|
||||
});
|
||||
|
||||
// 页面卸载时清除监听
|
||||
onUnmounted(() => {
|
||||
projectIdWatcher();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全局背景色 */
|
||||
.bg-gray-50 {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* 项目信息项布局样式 */
|
||||
.project-info-item {
|
||||
transition: all 0.2s ease;
|
||||
padding: 4px 0;
|
||||
color: #696969;
|
||||
}
|
||||
|
||||
/* 输入框/选择器统一样式 */
|
||||
.el-input__wrapper,
|
||||
.el-date-editor .el-input__wrapper,
|
||||
.el-select__wrapper {
|
||||
border-radius: 6px !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 输入框hover效果 */
|
||||
.el-input__wrapper:hover,
|
||||
.el-date-editor .el-input__wrapper:hover,
|
||||
.el-select__wrapper:hover {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 卡片头部文字样式 */
|
||||
.el-card__header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.el-button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.el-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 表单项样式优化 */
|
||||
.el-form-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.el-form-item:hover {
|
||||
border-color: #e6f7ff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 响应式网格布局适配 */
|
||||
@media (max-width: 767px) {
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.md\:col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.lg\:col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* 间距样式 */
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.mt-8 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user