checkEdit.vue

<template>
  <div class="assessment-edit" style="height: 70vh;overflow: auto;">
    <a-form-model ref="form" :model="formData" :rules="rules">
      <div class="tb-title">基本信息</div>
      <div class="from-table">
        <a-row>
          <a-col :span="4" class="bg-gray">
            项目名称
          </a-col>
          <a-col :span="8">
            {{formData.projName}}
          </a-col>
          <a-col :span="4" class="bg-gray">
            项目编号
          </a-col>
          <a-col :span="8">
            {{formData.projNo}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            申报人
          </a-col>
          <a-col :span="8">
            {{formData.appPersonName}}
          </a-col>
          <a-col :span="4" class="bg-gray">
            申报单位
          </a-col>
          <a-col :span="8">
            {{formData.appUnitName}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            项目起止时间
          </a-col>
          <a-col :span="20">
            {{formData.startDate}} 至 {{formData.endDate}}
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required special-middle">研究工作进展情况</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="workProgress">
              <a-textarea v-model="formData.workProgress" :auto-size="{ minRows: 5, maxRows: 8 }" :max-length="500" style="width: 80%" />
            </a-form-model-item>

            <div style="color: #D4380D;line-height: 1.5;">（注：对照原研究计划，说明实际工作进度。如不能预期完成研究计划，应说明原因）</div>
          </a-col>
        </a-row>
      </div>
      <div style="margin-top: 24px;"></div>
      <div class="tb-title required">现已取得的阶段性成果：<span>（仅填写本年度新获得的成果，并在备注栏填写具体成果类别）</span></div>
      <div class="from-table">
        <a-row>
          <a-col :span="4" class="bg-gray">
            成果名称
          </a-col>
          <a-col :span="20" class="flex-layout results-layout">
            <div v-for="(item, index) in formData.results" :key="index">
              {{item.resultName}}
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            数量
          </a-col>
          <a-col :span="20" class="flex-layout results-layout">
            <div v-for="(item, index) in formData.results" :key="index">
              <a-input-number v-model="item.resultCount" :min="0" :max="10000" style="width: 80%" />
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            备注
          </a-col>
          <a-col :span="20" class="flex-layout results-layout">
            <div v-for="(item, index) in formData.results" :key="index">
              <a-input v-model="item.remark" :max-length="100" style="width: 80%" />
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">其他（请做说明）</div>
          </a-col>
          <a-col :span="20" style="padding-top: 8px;">
            <a-textarea v-model="formData.otherResults" :auto-size="{ minRows: 5, maxRows: 8 }" :max-length="500" style="width: 80%" />
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">项目批准经费</div>
          </a-col>
          <a-col :span="8">
            <a-form-model-item prop="applyMoney">
              <a-input-number v-model="formData.applyMoney" :min="0" :max="1000000" style="width: 50%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4" class="bg-gray">
            <div class="required">已使用经费</div>
          </a-col>
          <a-col :span="8">
            <a-form-model-item prop="usingMoney">
              <a-input-number v-model="formData.usingMoney" :min="0" :max="1000000" style="width: 50%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required">现结余经费</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="surplusMoney">
              <a-input-number v-model="formData.surplusMoney" :min="0" :max="1000000" style="width: 20%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div class="required special-middle">经费具体使用情况说明</div>
          </a-col>
          <a-col :span="20" style="padding-top: 8px;">
            <a-form-model-item prop="moneyInstructions">
              <a-textarea v-model="formData.moneyInstructions" :auto-size="{ minRows: 5, maxRows: 8 }" :max-length="500" style="width: 80%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>

      <a-row style="margin-top: 20px;text-align:center;">
        <a-button style="margin-right: 50px;" @click="save">保存</a-button>
        <a-button type="primary" @click="submit">提交</a-button>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import { isEmptyParams } from "@/views/utils/common"
import moment from 'moment'

export default {
  name: "CheckEdit",
  data () {
    return {
      formData: {
        id: '',
        projId: '',
        checkYear: null,
        // 工作进展
        workProgress: '',

        // 其他（请做说明）
        otherResults: '',
        // 项目批准经费
        applyMoney: 0,
        // 已使用运费
        usingMoney: 0,
        // 现结余经费
        surplusMoney: 0,
        // 经费具体使用情况说明
        moneyInstructions: '',
        checkState: null,
        projName: '',
        projNo: '',
        appPersonName: '',
        appUnitName: '',
        startDate: '',
        endDate: '',
        // 成果
        results: [],
        auditList: [{ result: '', unit: '', time: '' }],
      },
      rules: {
        workProgress: { required: true, message: '请填写研究工作进展情况' },
        applyMoney: { required: true, message: '请填写项目批准经费' },
        usingMoney: { required: true, message: '请填写已使用运费' },
        surplusMoney: { required: true, message: '现结余经费' },
        moneyInstructions: { required: true, message: '经费具体使用情况说明' },
      }
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  created () {
    this.getCheckInfoById()
  },
  methods: {
    moment,
    getCheckInfoById () {
      let pars = { id: this.value }
      this.$api.checkReport.getCheckInfoById(pars).then(({ data = {} }) => {
        if (data) {
          this.formData = data
          this.formData.startDate = moment(this.formData.startDate).format('YYYY年MM月DD日')
          this.formData.endDate = moment(this.formData.endDate).format('YYYY年MM月DD日')
        }
      }).catch(() => {
      })
    },
    save () {
      this.loading = true
      this.formData.startDate = null
      this.formData.endDate = null
      let pars = isEmptyParams(this.formData)
      let par = { ...pars }
      this.$api.checkReport.save(par).then(({ data = {} }) => {
        if (data) {
          this.$message.success('保存成功！')
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.formData.startDate = null
          this.formData.endDate = null
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.checkReport.saveAndReport(par).then(({ data = {} }) => {
            if (data) {
              this.$message.success('上报成功！')
              this.$emit('close', 'edit')
            } else {
              this.$message.error('数据提交有误，请稍后再试!')
            }
          }).catch(() => {
          })
        } else {
          this.$message.info('上报信息未填写完整!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>