im-uniapp/pages/workbench/project/detail.vue

<template>
  <view class="detail-page">
    <view class="detail-header">
      <text class="header-title">{{ projectDetail.projectName }}</text>
      <text class="header-subtitle">{{ projectDetail.projectNum }}</text>
    </view>
    <view class="detail-content">
			<view style="display: flex; justify-content: flex-start; gap: 10rpx">
        <uni-tag v-if="projectDetail.projectStatus == 1" size="normal" type="success" text="进度完成"></uni-tag>
        <uni-tag v-else-if="projectDetail.projectStatus == 0" size="normal" type="warning" text="进行中"></uni-tag>
        <uni-tag v-if="projectDetail.tradeType == 0" size="normal" type="warning" text="内贸"></uni-tag>
        <uni-tag v-else-if="projectDetail.tradeType == 1" size="normal" type="success" text="外贸"></uni-tag>
      </view>  
      <view class="info-item">
        <text class="info-label">项目类型：</text>
        <text class="info-value">{{ projectDetail.projectType || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">项目地址：</text>
        <text class="info-value">{{ projectDetail.address || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">项目总金额：</text>
        <text class="info-value">{{ projectDetail.funds || '-' }}元</text>
      </view>
      <view class="info-item">
        <text class="info-label">负责人：</text>
        <text class="info-value">{{ projectDetail.functionary || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">项目周期：</text>
        <text class="info-value">{{ projectDetail.beginTime || '-' }} 至 {{ projectDetail.finishTime || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">交付时间：</text>
        <text class="info-value">{{ projectDetail.delivery || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">保证期：</text>
        <text class="info-value">{{ projectDetail.guarantee || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">备注：</text>
        <text class="info-value">{{ projectDetail.remark || '-' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">延期原因：</text>
        <text class="info-value">{{ projectDetail.postponeReason || '无' }}</text>
      </view>
      <view class="info-item" v-if="projectDetail.prePay > 0">
        <text class="info-label">预付款：</text>
        <text class="info-value">{{ projectDetail.prePay }}元</text>
      </view>
    </view>

    <!-- 合同管理 -->
    <view class="contract-management">
      <text class="contract-title">合同管理</text>
      <view v-if="contractDetail && contractDetail.length > 0">
        <view class="info-item">
          <text class="info-label">合同类型：</text>
          <text class="info-value">{{ getContractType(contractDetail.contractType) }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">合同编号：</text>
          <text class="info-value">{{ contractDetail.contractNum || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">合同金额：</text>
          <text class="info-value">{{ contractDetail.amount || '-' }}元</text>
        </view>
      </view>
			<view v-else>
				暂无合同
			</view>
    </view>

		<view v-if="projectDetail.projectStatus == 0" style="margin-top: 20px; text-align: center;">
			<button @click="handleClosure">结项</button>
		</view>
  </view>
</template>

<script>
import { getProject, updateProject } from '@/api/oa/project.js'; // 确保导入正确的 API 方法
import { selectContractByProjectId } from '@/api/oa/oaContract.js';

export default {
  data() {
    return {
      projectDetail: {}, // 存储项目详情
      contractDetail: null, // 存储合同详情
    };
  },
  onLoad(options) {
    this.fetchProjectDetail(options.id); // 获取项目 ID
  },
  methods: {
    fetchProjectDetail(projectId) {
      getProject(projectId).then(res => {
        if (res.code === 200) {
          this.projectDetail = res.data; // 将返回的数据存储到 projectDetail 中
          this.fetchContractDetail(projectId); // 获取合同信息
        } else {
          console.error('获取项目详情失败:', res.msg);
        }
      }).catch(error => {
        console.error('获取项目详情失败:', error);
      });
    },
		handleClosure() {
			// uniapp二次确认
			uni.showModal({
				title: '提示',
				content: '确定要结项吗？',
				success: (res) => {
					if (res.confirm) {
						updateProject({...this.projectDetail, projectStatus: 1}).then(res => {
							this.fetchProjectDetail(this.projectDetail.projectId);
						});
					}
				}
			});
		},
    fetchContractDetail(projectId) {
      selectContractByProjectId({ projectId }).then(res => {
        if (res.code === 200) {
          this.contractDetail = res.data; // 将返回的合同信息存储到 contractDetail 中
        } else {
          console.error('获取合同信息失败:', res.msg);
        }
      }).catch(error => {
        console.error('获取合同信息失败:', error);
      });
    },
    getContractType(contractType) {
      const contractTypes = {
        1: '采购合同',
        2: '项目合同',
      };
      return contractTypes[contractType] || '未知类型';
    },
  },
};
</script>

<style scoped>
.detail-page {
  padding: 20px; /* 添加内边距 */
}

.detail-header {
  margin-bottom: 15px; /* 下边距 */
}

.header-title {
  font-size: 24px; /* 标题字号 */
  font-weight: bold; /* 加粗 */
}

.header-subtitle {
  font-size: 18px; /* 副标题字号 */
  color: #666; /* 较淡的字体颜色 */
}

.detail-content {
  border: 1px solid #ccc; /* 边框 */
  border-radius: 10px; /* 圆角 */
  padding: 15px; /* 内边距 */
  background-color: #f9f9f9; /* 背景色 */
}

.info-item {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 在一行内均匀分布 */
  margin-top: 10px; /* 上边距 */
}

.info-label {
  color: #333; /* 标签颜色 */
  font-weight: bold; /* 标签加粗 */
}

.info-value {
  color: #666; /* 值的颜色 */
}

.contract-management {
  margin-top: 20px; /* 上边距 */
}

.contract-title {
  font-size: 20px; /* 合同标题字号 */
  font-weight: bold; /* 加粗 */
  margin-bottom: 10px; /* 下边距 */
}
</style>