shuili_manager/jwtech-h5-page/pages/capital/payment/edit.vue

<template>
  <view class="project-add">
    <!-- 项目新增表单卡片 -->
    <view class="cc-card form-card">
      <view class="form-title">资金支付</view>
      <view class="form-item">
        <text class="form-label">支付条款</text>
        <view class="form-content">
          <input v-model="form.paymentTerms" class="form-input" placeholder="请输入支付条款" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">支付期数</text>
        <view class="form-content">
          <input v-model="form.paymentPeriods" class="form-input" placeholder="请输入支付期数" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">起始年月</text>
        <view class="form-content">
          <input v-model="timeRangeStr" class="form-input" placeholder="请选择起始年月" disabled/>
          <view style="position: relative;">
            <view class="form-select" @click="handleSelectTimeRange">
              选择
            </view>
          </view>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">支付日期</text>
        <view class="form-content">
          <input v-model="form.paymentTime" class="form-input" placeholder="请选择支付日期" disabled/>
          <picker mode="date" @change="handleChangePayTime">
            <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.payableAmount" class="form-input" placeholder="请输入本期应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.paidinAmount" class="form-input" placeholder="请输入本期实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期中央应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.centerPayableAmount" 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.centerPaidinAmount" class="form-input" placeholder="请输入本期中央实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期省级应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.provincialPayableAmount" class="form-input" placeholder="请输入本期省级应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期省级实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.provincialPaidinAmount" class="form-input" placeholder="请输入本期省级实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期市级应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.cityPayableAmount" class="form-input" placeholder="请输入本期市级应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期市级实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.cityPaidinAmount" class="form-input" placeholder="请输入本期市级实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期县级应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.countyPayableAmount" class="form-input" placeholder="请输入本期县级应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期县级实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.countyPaidinAmount" class="form-input" placeholder="请输入本期县级实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期地方应付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.townshipPayableAmount" class="form-input" placeholder="请输入本期地方应付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期地方实付金额（万元）</text>
        <view class="form-content">
          <input v-model="form.townshipPaidinAmount" class="form-input" placeholder="请输入本期地方实付金额（万元）" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">本期暂扣款（万元）</text>
        <view class="form-content">
          <input v-model="form.temporaryWithholding" class="form-input" placeholder="请输入本期暂扣款（万元）" />
        </view>
      </view>

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

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

    <view class="cc-operation-row operation-row">
      <view class="buttons-group">
        <view class="button primary-button" @click="handleConfirm">确定</view>
        <view class="button default-button" @click="handleCancel">取消</view>
      </view>
    </view>

    <wht-datetime-picker
      ref="rangePicker"
      :mode="rangeMode"
      :show-seconds="true"
      @confirm="handleRangeConfirm"
    />
  </view>
</template>

<script>
import { addFunds, getFunds, updateFunds } from '@/api/system/funds'
export default {
  data() {
    return {
      projectId: this.$route.query.projectId,
      contractNumber: this.$route.query.contractNumber,
      form: {
        "id": this.$route.query.funsId,
        "paymentTerms": "",
        "paymentPeriods": "",
        "startingYear": null,
        "paymentTime": "",
        "payableAmount": "",
        "paidinAmount": "",
        "temporaryWithholding": "",
        "auditor": "",
        "agent": "",
        "paymentBill": "",
        "timeScope": [],
        "centerPayableAmount": "",
        "centerPaidinAmount": "",
        "provincialPaidinAmount": "",
        "cityPaidinAmount": "",
        "countyPaidinAmount": "",
        "townshipPaidinAmount": "",
        "townshipPayableAmount": "",
        "countyPayableAmount": "",
        "cityPayableAmount": "",
        "provincialPayableAmount": "",
        "startYear": "",
        "endYear": "",
        "proNo": this.$route.query.projectId,
        "contractNumber": this.$route.query.contractNumber
      },
      projectTypes: ['请选择', '建筑', 'IT', '教育', '制造业'], // 可根据实际项目类型进行扩展
      rangeMode: 'datetime-range',
      rangeValue:  '',
      timeRangeStr: ''
    };
  },
  created() {
    if (this.form.id) {
      this.getSectionInfo()
    }
  },
  methods: {
    // 获取详情
    getSectionInfo() {
      getFunds(this.form.id).then(res => {
        this.form = res.data
        this.timeRangeStr = this.form.startYear + "  至  " + this.form.endYear
      })
    },
    
    handleSelectTimeRange() {
      this.$nextTick(() => {
        this.$refs.rangePicker.show(this.rangeValue)
      })
    },

    // 时间范围确认
    handleRangeConfirm({ value, formatted }) {
      const startDate = this.parseTime(value[0], "{y}-{m}-{d}")
      const endDate = this.parseTime(value[1], "{y}-{m}-{d}")
      this.timeRangeStr = startDate + "  至  " + endDate
      this.form.timeScope = [startDate, endDate]
      this.form.startYear = startDate
      this.form.endYear = endDate
    },

    handleChangePayTime(event) {
      this.form.paymentTime = event.detail.value
    },

    handleCancel() {
      uni.navigateBack()
    },

    handleConfirm() {
      if (!this.judgeAttrWrite()) {
        return
      }
      uni.showLoading({
        title: '提交中...',
        mask: true
      })
      console.log("提交的表单数据：", this.form);
      if (this.form.id) {
        updateFunds(this.form).then(res => {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          })
          uni.navigateTo({
            url: '/pages/capital/payment/list?tabNum=2&id=' + this.projectId
          })
          uni.hideLoading()
        })
      } else {
        addFunds(this.form).then(res => {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          })
          uni.hideLoading()
          uni.navigateTo({
            url: '/pages/capital/payment/list?tabNum=2&id=' + this.projectId
          })
        })
      }
    },

    // 判断必填项是否填写
    judgeAttrWrite() {
      const form = this.form
      if (!form.paymentTerms) {
        uni.showToast({
          title: `支付条款不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.paymentPeriods) {
        uni.showToast({
          title: `支付期数不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.startYear) {
        uni.showToast({
          title: `起始年月不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.paymentTime) {
        uni.showToast({
          title: `支付日期不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.payableAmount) {
        uni.showToast({
          title: `本期应付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.paidinAmount) {
        uni.showToast({
          title: `本期实付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.centerPayableAmount) {
        uni.showToast({
          title: `本期中央应付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.centerPaidinAmount) {
        uni.showToast({
          title: `本期中央实付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.provincialPayableAmount) {
        uni.showToast({
          title: `本期省级应付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.provincialPaidinAmount) {
        uni.showToast({
          title: `本期省级实付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.cityPayableAmount) {
        uni.showToast({
          title: `本期市级应付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.cityPaidinAmount) {
        uni.showToast({
          title: `本期市级实付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.countyPayableAmount) {
        uni.showToast({
          title: `本期县级应付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.countyPaidinAmount) {
        uni.showToast({
          title: `本期县级实付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.townshipPayableAmount) {
        uni.showToast({
          title: `本期地方应付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.townshipPaidinAmount) {
        uni.showToast({
          title: `本期地方实付金额不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.temporaryWithholding) {
        uni.showToast({
          title: `本期暂扣款不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.auditor) {
        uni.showToast({
          title: `项目法人审核人不能为空！`,
          icon: 'none'
        })
        return false
      }
      if (!form.agent) {
        uni.showToast({
          title: `项目法人经办人不能为空！`,
          icon: 'none'
        })
        return false
      }
      return true
    },
  }
};
</script>

<style lang="scss" scoped>
.project-add {
  padding: 16px 20px 96px;
  .cc-card {
    margin-bottom: 0;
  }
}



</style>