shuili_manager/jwtech-h5-page/pages/project/edit/index.vue

<template>
  <view class="project-add">
    <!-- 项目新增表单卡片 -->
    <view class="form-card">
      <view class="form-title">基本信息</view>
      <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.projectName" class="form-input" placeholder="请选择行政区划" disabled/>
          <picker mode="region" v-model="form.region" @change="onRegionChange">
            <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.projectCode" class="form-input" placeholder="请输入项目编码" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目种类</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请选择项目种类" disabled/>
          <picker mode="selector" :range="projectTypes" v-model="form.projectType">
            <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.legalEntity" class="form-input" placeholder="请输入项目法人单位" />
        </view>
      </view>

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

      <view class="form-item">
        <text class="form-label">项目负责人电话</text>
        <view class="form-content">
          <input v-model="form.leaderPhone" 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.legalRep" class="form-input" placeholder="请输入单位法定代表人" />
        </view>
      </view>

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

      <view class="form-item">
        <text class="form-label">项目类型</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请选择项目类型" disabled/>
          <picker mode="selector" :range="projectTypes" v-model="form.projectType">
            <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.projectName" class="form-input" placeholder="请选择工程等别" disabled/>
          <picker mode="selector" :range="projectTypes" v-model="form.projectType">
            <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.projectName" class="form-input" placeholder="请选择工程用途" disabled/>
          <picker mode="selector" :range="projectTypes" v-model="form.projectType">
            <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.legalRep" class="form-input" placeholder="请输入项目建设地址" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">建设模式</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请选择建设模式" disabled/>
          <picker mode="selector" :range="projectTypes" v-model="form.projectType">
            <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.projectName" class="form-input" placeholder="请选择建设性质" disabled/>
          <picker mode="selector" :range="projectTypes" v-model="form.projectType">
            <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.legalRep" 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.legalRep" class="form-input" placeholder="请输入中央资金（万元）" />
        </view>
      </view>

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

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

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

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

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

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

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

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

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

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

    <view v-if="operateType==='examine'||operateType==='examineSee'" class="form-card" style="margin-top: 16px;">
      <view class="form-title">审核信息</view>
      <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.projectName" class="form-input" placeholder="请输入审批时间" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">审批意见</text>
        <view class="form-content">
          <textarea v-model="form.legalRep" class="form-input" placeholder="请输入审批意见" rows="3"></textarea>
        </view>
      </view>
    </view>

    <view v-if="operateType!=='see' && operateType!=='examineSee'" class="cc-operation-row operation-row">
      <view v-if="operateType==='edit'" class="buttons-group">
        <view class="button default-button">保存</view>
      </view>
      <view v-else-if="operateType==='add'" class="buttons-group">
        <view class="button primary-button">上报</view>
        <view class="button default-button">暂存</view>
      </view>
      <view v-else-if="operateType==='examine'" class="buttons-group">
        <view class="button primary-button">确定</view>
        <view class="button default-button">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        projectName: '',
        region: [],
        projectCode: '',
        projectType: 0,
        legalEntity: '',
        projectLeader: '',
        leaderPhone: '',
        legalRep: ''
      },
      projectTypes: ['请选择', '建筑', 'IT', '教育', '制造业'], // 可根据实际项目类型进行扩展
      operateType: ''
    };
  },
  methods: {
    // 处理选择行政区划的变化
    onRegionChange(e) {
      this.form.region = e.detail.value;
    },
    // 提交表单
    submitForm() {
      // 在这里处理表单提交的逻辑
      console.log("提交的表单数据：", this.form);
      // 你可以进行数据校验，提交到后端等操作
    }
  },
  mounted() {
    // 在这里进行组件初始化的操作
    this.operateType = this.$route.query.operateType;
  }
};
</script>

<style lang="scss" scoped>
.project-add {
  padding: 20px 20px 100px 20px;
  .form-card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    .form-title {
      font-size: 18px;
      padding-bottom: 16px;
    }
    .form-item {
      .form-label {
        font-size: 14px;
        color: #595959;
        margin-bottom: 6px;
        display: block;
      }
      margin-bottom: 20px;
      .form-content {
        position: relative;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f0f0;
        .form-input {
          width: 100%;
          height: 30px;
          border-radius: 5px;
          font-size: 14px;
          color: #333;
        }
        .form-select {
          position: absolute;
          bottom: 4px;
          right: 0;
          color: #00B39D;
        }
      }
    }
  }
}



</style>