shuili_manager/jwtech-h5-page/pages/capital/check/index.vue

<template>
  <view class="project">
    <!-- Tabs栏 -->
    <view class="cc-tabs tabs">
      <view class="tab" :class="{'active': activeTab === 0}" @click="changeTab(0)">
        <view class="tab-text">项目基本信息</view>
      </view>
      <view class="tab" :class="{'active': activeTab === 1}" @click="changeTab(1)">
        <view class="tab-text">资金下达</view>
      </view>
      <view class="tab" :class="{'active': activeTab === 2}" @click="changeTab(2)">
        <view class="tab-text">资金支付</view>
      </view>
    </view>

    <view class="tab-content">
      <!-- 基本信息 -->
      <!-- 项目新增表单卡片 -->
      <view v-if="activeTab === 0" class="base-info-box">
        <view class="cc-form-card form-card">
          <view class="form-item">
            <text class="form-label">项目名称</text>
            <view class="form-content">
              <input v-model="form.projectName" class="form-input" placeholder="请输入项目名称" />
            </view>
          </view>
          <view class="form-item">
            <text class="form-label">行政区划</text>
            <view class="form-content">
              <input v-model="form.adcd" class="form-input" placeholder="请选择行政区划" disabled/>
              <view style="position: relative;">
                <view class="form-select" @click="handleOpenSelect">
                  选择
                </view>
              </view>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">项目编码</text>
            <view class="form-content">
              <input v-model="form.proCode" class="form-input" placeholder="请输入项目编码" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">项目种类</text>
            <view class="form-content">
              <input v-model="form.projectKinds" class="form-input" placeholder="请选择项目种类" disabled/>
              <picker mode="selector" :range="projectKindsOptions" @change="onProjectCategoryPickerChange">
                <view class="form-select">
                  选择
                </view>
              </picker>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">项目法人单位</text>
            <view class="form-content">
              <input v-model="form.projectLegalPerson" class="form-input" placeholder="请输入项目法人单位" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">项目负责人</text>
            <view class="form-content">
              <input v-model="form.projectSuperintendent" class="form-input" placeholder="请输入项目负责人" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">项目负责人电话</text>
            <view class="form-content">
              <input v-model="form.projectLegalPhone" class="form-input" placeholder="请输入项目负责人电话" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">单位法定代表人</text>
            <view class="form-content">
              <input v-model="form.projectUnitLegal" class="form-input" placeholder="请输入单位法定代表人" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">单位法定代表人电话</text>
            <view class="form-content">
              <input v-model="form.projectUnitLegalPhone" class="form-input" placeholder="请输入单位法定代表人电话" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">项目类型</text>
            <view class="form-content">
              <input v-model="form.projectType" class="form-input" placeholder="请选择项目种类" disabled/>
              <picker mode="selector" :range="projectTypes" @change="onProjectTypePickerChange">
                <view class="form-select">
                  选择
                </view>
              </picker>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">工程等别</text>
            <view class="form-content">
              <input v-model="form.engineeringGrade" class="form-input" placeholder="请选择工程等别" disabled/>
              <picker mode="selector" :range="engineeringGradeOptions" @change="onProjectLevelPickerChange">
                <view class="form-select">
                  选择
                </view>
              </picker>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">工程用途</text>
            <view class="form-content">
              <input v-model="form.engineeringPurposes" class="form-input" placeholder="请选择工程用途" disabled/>
              <picker mode="selector" :range="engineeringPurposesOptions" @change="onProjectPurposesPickerChange">
                <view class="form-select">
                  选择
                </view>
              </picker>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">项目建设地址</text>
            <view class="form-content">
              <input v-model="form.constructionAddress" class="form-input" placeholder="请输入项目建设地址" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">建设模式</text>
            <view class="form-content">
              <input v-model="form.constructionMode" class="form-input" placeholder="请选择建设模式" disabled/>
              <picker mode="selector" :range="constructionModeOptions" @change="onProjectModesPickerChange">
                <view class="form-select">
                  选择
                </view>
              </picker>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">建设性质</text>
            <view class="form-content">
              <input v-model="form.constructionNature" class="form-input" placeholder="请选择建设性质" disabled/>
              <picker mode="selector" :range="constructionNatureOptions" @change="onProjectBuildTypesPickerChange">
                <view class="form-select">
                  选择
                </view>
              </picker>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">建设内容</text>
            <view class="form-content">
              <textarea v-model="form.constructionContent" class="form-input" placeholder="请输入建设内容" :rows="3"></textarea>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">中央资金（万元）</text>
            <view class="form-content">
              <input v-model="form.centralArrangedFunds" class="form-input" placeholder="请输入中央资金（万元）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">中央资金资金比例（%）</text>
            <view class="form-content">
              <input v-model="form.centralArrangedFundsRate" class="form-input" placeholder="请输入中央资金资金比例（%）" type="number"/>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">省级资金（万元）</text>
            <view class="form-content">
              <input v-model="form.provincialFunding" class="form-input" placeholder="请输入省级资金（万元）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">省级资金比例（%）</text>
            <view class="form-content">
              <input v-model="form.provincialFundingRate" class="form-input" placeholder="请输入省级资金比例（%）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">地市资金（万元）</text>
            <view class="form-content">
              <input v-model="form.cityLevelFunds" class="form-input" placeholder="请输入地市资金（万元）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">地市资金比例（%）</text>
            <view class="form-content">
              <input v-model="form.cityLevelFundsRate" class="form-input" placeholder="请输入地市资金比例（%）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">区县资金（万元）</text>
            <view class="form-content">
              <input v-model="form.countyLevelFunds" class="form-input" placeholder="请输入区县资金（万元）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">区县资金比例（%）</text>
            <view class="form-content">
              <input v-model="form.cityLevelFundsRate" class="form-input" placeholder="请输入区县资金比例（%）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">乡镇及群众自筹和其他投资（万元）</text>
            <view class="form-content">
              <input v-model="form.townshipInvestments" class="form-input" placeholder="请输入乡镇及群众自筹和其他投资（万元）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">乡镇及群众自筹和其他投资比例（%）</text>
            <view class="form-content">
              <input v-model="form.townshipInvestmentsRate" class="form-input" placeholder="请输入乡镇及群众自筹和其他投资比例（%）" type="number" />
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">是否省重大水利工程项目</text>
            <view class="form-content">
              <input v-model="form.isMajorProject" class="form-input" placeholder="请选择是否省重大水利工程项目" disabled/>
              <picker mode="selector" :range="isMajorProjectOptions" @change="onImportProjectPickerChange">
                <view class="form-select">
                  选择
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>

      <!-- 资金下达 -->
      <view v-if="activeTab === 1" class="capital-execute-box">
        <view class="query-part">
          <!-- 搜索框 -->
          <view class="cc-search search-bar">
            <view class="search-box">
              <image src="/static/images/icon/search.png" />
              <input v-model="searchQuery" type="text" placeholder="请输入标段名称或下达资金总金额" />
            </view>
          </view>
          <!-- 行政区划和项目类型下拉框 -->
          <view class="cc-query-dropdowns dropdowns">
            <picker mode="selector" :range="districts" v-model="selectedDistrict">
              <view class="dropdown">下达日期<image src="/static/images/icon/down.png" /></view>
            </picker>
          </view>
        </view>
        <!-- 项目列表 -->
        <view class="cc-project-list project-list">
          <view v-for="(project, index) in sourceFundsList" :key="index" class="project-card">
            <view class="attr-item project-title">{{ project.name }}</view>
            <view class="attr-item">
              <view class="attr-title">项目编号</view>
              <view class="attr-value">{{ project.code }}</view>
            </view>
            <view class="attr-item">
              <view class="attr-title">行政区划</view>
              <view class="attr-value">{{ project.district }}</view>
            </view>
            <view class="attr-item">
              <view class="attr-title">项目类型</view>
              <view class="attr-value">{{ project.type }}</view>
            </view>
            <view v-if="project.isExpand">
              <view class="attr-item">
                <view class="attr-title">项目编号</view>
                <view class="attr-value">{{ project.code }}</view>
              </view>
              <view class="attr-item">
                <view class="attr-title">行政区划</view>
                <view class="attr-value">{{ project.district }}</view>
              </view>
              <view class="attr-item">
                <view class="attr-title">项目类型</view>
                <view class="attr-value">{{ project.type }}</view>
              </view>
            </view>
            <view class="expand-btn" @click="handleItemExpand(project.isExpand, index)">
              <view v-if="!project.isExpand" class="btn">
                展开
                <image src="@/static/images/icon/arrow-down.png" />
                <!-- <uni-icons type="down" size="30" color="red"></uni-icons> -->
              </view>
              <view v-else class="btn no-open">
                收起
                <image src="@/static/images/icon/arrow-down.png" />
                <!-- <uni-icons type="up" size="30"></uni-icons> -->
              </view>
            </view>
            <view class="operate-buttons">
              <view class="buttons-group">
                <view class="primary-button__text button" @click="handleAddPassDown(project)">修改</view>
                <view class="error-button__text button" @click="handleDeletePassDown(project)">删除</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 资金下达 -->
      <view v-if="activeTab === 2" class="capital-execute-box">
        <view class="query-part">
          <!-- 搜索框 -->
          <view class="cc-search search-bar">
            <view class="search-box">
              <image src="/static/images/icon/search.png" />
              <input v-model="searchQuery" type="text" placeholder="请输入标段名称或合同名称" />
            </view>
          </view>
        </view>
        <!-- 项目列表 -->
        <view class="cc-project-list project-list">
          <view v-for="(project, index) in contractInfoList" :key="index" class="project-card">
            <view class="attr-item project-title">{{ project.name }}</view>
            <view class="attr-item">
              <view class="attr-title">合同名称</view>
              <view class="attr-value">{{ project.code }}</view>
            </view>
            <view class="attr-item">
              <view class="attr-title">合同工期</view>
              <view class="attr-value">{{ project.district }}</view>
            </view>
            <view class="attr-item">
              <view class="attr-title">开工时间</view>
              <view class="attr-value">{{ project.type }}</view>
            </view>
            <view class="attr-item">
              <view class="attr-title">合同金额（万元）</view>
              <view class="attr-value">{{ project.code }}</view>
            </view>
            <view class="attr-item">
              <view class="attr-title">应付金额（万元）</view>
              <view class="attr-value">{{ project.district }}</view>
            </view>
            <view class="attr-item">
              <view class="attr-title">实际金额（万元）</view>
              <view class="attr-value">{{ project.type }}</view>
            </view>
            <view class="operate-buttons">
              <view class="buttons-group">
                <view class="primary-button__text button" @click="handlePayment(project)">资金支付</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view v-if="activeTab === 1" class="cc-operation-buttons operation-buttons">
      <view class="buttons-group">
        <view class="primary-button button" @click="handleAddPassDown()">新增</view>
      </view>
    </view>
  </view>
</template>

<script>
import { projectInfoApi, projectSourceFundsListApi, projectContractInfoListApi } from '@/api/system/project'
export default {
  data() {
    return {
      // 传递的ID
      id: this.$route.query.id,
      activeTab: 0,  // 当前选中的Tab索引
      searchQuery: '',  // 搜索框的内容
      selectedDistrict: 0,  // 行政区划选择的索引
      selectedProjectType: 0,  // 项目类型选择的索引
      districts: ['请选择', '北京市', '上海市', '广州市'],  // 行政区划数据
      projectTypes: ['请选择', '建筑', 'IT', '教育'],  // 项目类型数据
      projectKindsOptions: [],
      engineeringGradeOptions: [],
      // 工程用途字典
      engineeringPurposesOptions: [],
      // 建设模式字典
      constructionModeOptions: [],
      // 建设性质字典
      constructionNatureOptions: [],
      isMajorProjectOptions: [],
      projects: [  // 项目列表
        { name: '项目1', code: 'P001', district: '北京市', type: '建筑', status: 1, isExpand: false },
        { name: '项目2', code: 'P002', district: '上海市', type: 'IT', status: 0, isExpand: false},
        { name: '项目3', code: 'P003', district: '广州市', type: '教育', status: 1, isExpand: false},
        { name: '项目4', code: 'P004', district: '北京市', type: '建筑', status: 1, isExpand: false}
      ],
      form: {
        projectName: '',
        region: [],
        projectCode: '',
        projectType: 0,
        legalEntity: '',
        projectLeader: '',
        leaderPhone: '',
        legalRep: ''
      },
      operateType: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {orderBy: "create_time", sortBy: "desc"},
        data: {}
      },
      sourceFundsList: [],

      payQueryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {orderBy: "create_time", sortBy: "desc"},
        data: {
          proNo: "42448d4b-3be9-41a2-bcb4-546e75056097"
        },
        ids: null
      },
      contractInfoList: []
    };
  },
  computed: {
    // filteredProjects() {
    //   return this.projects.filter(project => {
    //     // 根据搜索内容、行政区划和项目类型进行筛选
    //     const matchesSearch = project.name.toLowerCase().includes(this.searchQuery.toLowerCase());
    //     const matchesDistrict = this.selectedDistrict === 0 || project.district === this.districts[this.selectedDistrict];
    //     const matchesType = this.selectedProjectType === 0 || project.type === this.projectTypes[this.selectedProjectType];
    //     return matchesSearch && matchesDistrict && matchesType;
    //   });
    // }
  },
  created() {
    this.getProjectInfo()
  },
  mounted() {
    // 在这里进行组件初始化的操作
    this.activeTab = Number(this.$route.query.operateType)
    console.log(this.activeTab)
  },
  methods: {
    getProjectInfo() {
      projectInfoApi(this.id).then(res => {
        this.form = res.data
      })
    },

    changeTab(index) {
      this.activeTab = index
      this.judgeGetList()
    },

    // 判断获取哪个列表
    judgeGetList() {
      if (this.activeTab === 0) {
      } else if (this.activeTab === 1) {
        this.getSourceFundsList()
      } else {
        this.getContractInfoList()
      }
    },

    // 获取资金下达列表
    getSourceFundsList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      projectSourceFundsListApi(this.queryParams).then(res => {
        this.projects = [...this.projects, ...res.records]
        this.pages = res.pages
        // this.projects.forEach(projectItem => {
        //   projectItem.adcdName = this.formatAdcd(projectItem)
        //   projectItem.projectTypeName = this.projectTypeFormat(projectItem)
        // })
        uni.hideLoading()
      })
    },

    // 获取资金支付列表
    getContractInfoList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      projectContractInfoListApi(this.payQueryParams).then(res => {
        this.contractInfoList = [...this.projects, ...res.records]
        this.pages = res.pages
        // this.projects.forEach(projectItem => {
        //   projectItem.adcdName = this.formatAdcd(projectItem)
        //   projectItem.projectTypeName = this.projectTypeFormat(projectItem)
        // })
        uni.hideLoading()
      })
    },

    handleAddProject() {
      // 跳转到新增项目页面
      this.$tab.navigateTo(`/pages/project/edit/index`);
    },
    handleItemExpand(isExpand, index) {
      this.projects[index].isExpand = !isExpand
    },
    handleAddPassDown() {
      // 跳转到新增项目页面
      this.$tab.navigateTo(`/pages/capital/passdown/edit`);
    },
    handleDeletePassDown() {},
    handlePayment() {
      // 跳转到资金支付页面
      this.$tab.navigateTo(`/pages/capital/payment/list`);
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-content {
  // padding: 16px 20px;
  .base-info-box {
    padding: 20px 16px;
  }
}
</style>