taskEdit.vue

<template>
  <div class="assignment-edit" style="height: 70vh;overflow: auto;">
    <a-form-model ref="form" :model="formData" :rules="rules" class="from-table">
      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>研究项目</span>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          项目名称
        </a-col>
        <a-col :span="22" v-if="formData.projName != null">
          {{formData.projName}}
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>第一承担单位</span>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          名称
        </a-col>
        <a-col :span="10">
          {{formData.appUnitName}}
        </a-col>
        <a-col :span="2" class="bg-gray">
          联系电话
        </a-col>
        <a-col :span="10">
          {{formData.linkTel}}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          地址
        </a-col>
        <a-col :span="10">
          {{formData.linkAddress}}
        </a-col>
        <a-col :span="2" class="bg-gray">
          邮政编码
        </a-col>
        <a-col :span="10">
          {{formData.postcode}}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          主管部门
        </a-col>
        <a-col :span="22">
          {{formData.authority}}
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>项目负责人</span>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          姓名
        </a-col>
        <a-col :span="10">
          {{formData.appPersonName}}
        </a-col>
        <a-col :span="2" class="bg-gray">
          性别
        </a-col>
        <a-col :span="10">
          {{formData.sex}}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          出生年
        </a-col>
        <a-col :span="10">
          {{formData.birthYear}}
        </a-col>
        <a-col :span="2" class="bg-gray">
          联系电话
        </a-col>
        <a-col :span="10">
          {{formData.mobile}}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          学位
        </a-col>
        <a-col :span="10">
          {{formData.degreeName}}
        </a-col>
        <a-col :span="2" class="bg-gray">
          职称
        </a-col>
        <a-col :span="10">
          {{formData.titleName}}
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>项目组</span>
          </div>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div class="required">实施目标和主要内容</div>
          </div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="testContent">
            <a-textarea placeholder="实施目标和主要内容" v-model="formData.testContent" :maxLength="400" style="width: 80%;height: 160px;margin-top: 12px;" />
          </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">
          <a-form-model-item prop="target">
            <div style="display: flex;flex-wrap: wrap;line-height: 2.5;">
              <div v-for="(item, index) in formData.target" :key="index" style="margin-right: 20px;">
                <a-checkbox :checked="item.checked" :name="item.targetId" @change="onTargetChange(item)">{{item.targetName}}</a-checkbox>
                <a-input-number size="small" :min="0" :max="1000" v-model="item.resultCount" :disabled="!item.checked" />
              </div>
            </div>
          </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="budgetCount">
            <a-input-number :min="0" :max="10000000" v-model="formData.budgetCount" style="width: 10%" /> （万元）
          </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="budgetGovCount">
            <a-input-number :min="0" :max="10000000" v-model="formData.budgetGovCount" style="width: 30%" /> （万元）
          </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="startDate" style="flex-basis: 30%;">
            <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.startDate" style="width: 100%" @change="dateChange(formData)" />
          </a-form-model-item>
          <span style="margin: -12px 10px 0 10px;">~</span>
          <a-form-model-item prop="endDate" style="flex-basis: 30%;">
            <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="formData.endDate" style="width: 100%" @change="dateChange(formData)" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>一、项目要实现的目标和主要研发内容</span>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          （一）项目要实现的目标
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          序号
        </a-col>
        <a-col :span="20" class="bg-gray">
          内容
        </a-col>
        <a-col :span="2" class="bg-gray">
          操作
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in formData.cont1" :key="'cont1' + index">
        <a-col :span="2">
          ({{index + 1}})
        </a-col>
        <a-col :span="20">
          <a-form-model-item :prop="'cont1.' + index + '.contentInfo'" :rules="{ required: true, message: '内容不能为空' }">
            <a-input v-model="item.contentInfo" :maxLength="200" style="width: 90%;" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeCont(item, 'cont1')">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="dashed" style="width: 50%" @click="addCont('cont1')">
            <a-icon type="plus" /> 添加
          </a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          （二）主要研发内容
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          序号
        </a-col>
        <a-col :span="20" class="bg-gray">
          内容
        </a-col>
        <a-col :span="2" class="bg-gray">
          操作
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in formData.cont2" :key="'cont2' + index">
        <a-col :span="2">
          ({{index + 1}})
        </a-col>
        <a-col :span="20">
          <a-form-model-item :prop="'cont2.' + index + '.contentInfo'" :rules="{ required: true, message: '内容不能为空' }">
            <a-input v-model="item.contentInfo" :maxLength="200" style="width: 90%;" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeCont(item, 'cont2')">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="dashed" style="width: 50%" @click="addCont('cont2')">
            <a-icon type="plus" /> 添加
          </a-button>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>二、项目的考核指标</span>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          （一）主要技术及学术指标 (形成的专利、新技术、新产品、新装置、论文专著、软件等的数量、指标及其水平等)
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          序号
        </a-col>
        <a-col :span="20" class="bg-gray">
          内容
        </a-col>
        <a-col :span="2" class="bg-gray">
          操作
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in formData.cont3" :key="'cont3' + index">
        <a-col :span="2">
          ({{index + 1}})
        </a-col>
        <a-col :span="20">
          <a-form-model-item :prop="'cont3.' + index + '.contentInfo'" :rules="{ required: true, message: '内容不能为空' }">
            <a-input v-model="item.contentInfo" :maxLength="200" style="width: 90%;" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeCont(item, 'cont3')">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="dashed" style="width: 50%" @click="addCont('cont3')">
            <a-icon type="plus" /> 添加
          </a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          （二）人才培养
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          序号
        </a-col>
        <a-col :span="20" class="bg-gray">
          内容
        </a-col>
        <a-col :span="2" class="bg-gray">
          操作
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in formData.cont4" :key="'cont4' + index">
        <a-col :span="2">
          ({{index + 1}})
        </a-col>
        <a-col :span="20">
          <a-form-model-item :prop="'cont4.' + index + '.contentInfo'" :rules="{ required: true, message: '内容不能为空' }">
            <a-input v-model="item.contentInfo" :maxLength="200" style="width: 90%;" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeCont(item, 'cont4')">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="dashed" style="width: 50%" @click="addCont('cont4')">
            <a-icon type="plus" /> 添加
          </a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          （三）其他应考核的指标
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          序号
        </a-col>
        <a-col :span="20" class="bg-gray">
          内容
        </a-col>
        <a-col :span="2" class="bg-gray">
          操作
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in formData.cont5" :key="'cont5' + index">
        <a-col :span="2">
          ({{index + 1}})
        </a-col>
        <a-col :span="20">
          <a-form-model-item :prop="'cont5.' + index + '.contentInfo'" :rules="{ required: true, message: '内容不能为空' }">
            <a-input v-model="item.contentInfo" :maxLength="200" style="width: 90%;" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeCont(item, 'cont5')">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="dashed" style="width: 50%" @click="addCont('cont5')">
            <a-icon type="plus" /> 添加
          </a-button>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>三、项目阶段实施内容及目标</span>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="2" class="bg-gray">
          阶段
        </a-col>
        <a-col :span="12" class="bg-gray">
          阶段实施内容及阶段目标
        </a-col>
        <a-col :span="8" class="bg-gray">
          起止日期
        </a-col>
        <a-col :span="2" class="bg-gray">
          操作
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in formData.cont6" :key="'cont6' + index">
        <a-col :span="2">
          <div class="special-middle">({{index + 1}})</div>
        </a-col>
        <a-col :span="12">
          <a-form-model-item :prop="'cont6.' + index + '.contentInfo'" :rules="{ required: true, message: '内容不能为空' }">
            <a-textarea v-model="item.contentInfo" placeholder="项目阶段实施内容及目标" :maxLength="500" style="width: 90%;height: 140px;margin-top: 12px;" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <div class="flex-layout special-middle">
            <a-form-model-item :prop="'cont6.' + index + '.startTime'" :rules="{ required: true, message: '内容不能为空' }" style="flex-basis: 45%;">
              <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.startTime" style="width: 100%" @change="dateChange(item)" />
            </a-form-model-item>
            <span style="margin: -12px 10px 0 10px;">~</span>
            <a-form-model-item :prop="'cont6.' + index + '.endTime'" :rules="{ required: true, message: '内容不能为空' }" style="flex-basis: 45%;">
              <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="item.endTime" style="width: 100%" @change="dateChange(item)" />
            </a-form-model-item>
          </div>

        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removeCont(item, 'cont6')" class="special-middle">
              <a-button type="link" size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;">
          <a-button type="dashed" style="width: 50%" @click="addCont('cont6')">
            <a-icon type="plus" /> 添加
          </a-button>
        </a-col>
      </a-row>

      <proj-group-member :members.sync="formData.members" />

      <budget-edit :budget.sync="formData.budget" />

      <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 ProjGroupMember from "@/views/report/project/components/projectMemberEdit"
import BudgetEdit from '@/views/report/project/components/budgetEdit'
import { isEmptyParams } from "@/views/utils/common"

const cont1 = () => { return { id: null, testId: null, contentInfo: '', startTime: null, endTime: null, contentType: 'd37abeb6-14e0-4486-924d-e1e4baf67098', showIndex: 1 } }
const cont2 = () => { return { id: null, testId: null, contentInfo: '', startTime: null, endTime: null, contentType: 'b1fe4003-16ed-482f-8fd5-e34b1482c3d4', showIndex: 1 } }
const cont3 = () => { return { id: null, testId: null, contentInfo: '', startTime: null, endTime: null, contentType: 'b19cf66b-c1bb-4974-a524-114c1895dbd8', showIndex: 1 } }
const cont4 = () => { return { id: null, testId: null, contentInfo: '', startTime: null, endTime: null, contentType: 'cf3abeff-9f1a-420e-b375-6aad33f12080', showIndex: 1 } }
const cont5 = () => { return { id: null, testId: null, contentInfo: '', startTime: null, endTime: null, contentType: 'f1cea24c-d13d-48af-8abb-58eed9367c27', showIndex: 1 } }
const cont6 = () => { return { id: null, testId: null, contentInfo: '', startTime: null, endTime: null, contentType: 'ebcdf2b0-011c-4d40-a064-f22d6f7ec646', showIndex: 1 } }

export default {
  name: "TestEdit",
  data () {
    return {
      formData: {
        id: '',
        projId: '',
        // 实施目标和主要内容
        testContent: '',
        // 总经费
        budgetCount: 0,
        // 市卫计委资助
        budgetGovCount: 0,
        // 起止日期
        startDate: null,
        endDate: null,
        // 申报人
        appPersonName: null,
        sex: null,
        birthYear: null,
        mobile: null,
        degreeName: null,
        titleName: null,
        // 依托单位
        appUnitName: null,
        linkEmail: null,
        linkTel: null,
        linkAddress: null,
        postcode: null,
        authority: null,
        // 项目内容
        cont1: [cont1()],
        cont2: [cont2()],
        cont3: [cont3()],
        cont4: [cont4()],
        cont5: [cont5()],
        cont6: [cont6()],
        // 成员
        members: [],
        // 预期成果形式
        target: [],
        // 经费
        budget: [],
      },
      rules: {
        testContent: { required: true, message: '请填写实施目标和主要内容', trigger: 'blur' },
        target: { required: true, message: '请选择预期成果形式' },
        budgetCount: { required: true, message: '请填写总经费', trigger: 'blur' },
        budgetGovCount: { required: true, message: '请填写市卫计委资助', trigger: 'blur' },
        startDate: { required: true, message: '请选择起始日期', trigger: 'change' },
        endDate: { required: true, message: '请选择结束日期', trigger: 'change' },
      }
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  components: {
    ProjGroupMember,BudgetEdit
  },
  created () {
    this.getTestInfoByProjId()
  },
  methods: {
    getTestInfoByProjId () {
      let pars = { projId: this.value }
      this.$api.taskReport.getTestInfoByProjId(pars).then(({ data = {} }) => {
        if (data) {
          this.formData = data
          if (this.formData.cont1 === null) {
            this.formData.cont1 = [cont1()];
            this.formData.cont2 = [cont2()];
            this.formData.cont3 = [cont3()];
            this.formData.cont4 = [cont4()];
            this.formData.cont5 = [cont5()];
            this.formData.cont6 = [cont6()];
          }
        }
      }).catch(() => {
      })
    },
    save () {
      let state = this.formData.testState
      if (state == null)
        this.formData.testState = -20
      let pars = isEmptyParams(this.formData)
      let par = { ...pars }
      this.$api.taskReport.save(par).then(({ data = {} }) => {
        if (data) {
          this.formData.id = data
          this.$message.success('保存成功！')
        }
      }).catch(() => {
      })
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid && this.checkApplyMoney()) {
          let state = this.formData.testState
          if (state != 30)
            this.formData.testState = -10
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.taskReport.save(par).then(({ data = {} }) => {
            if (data) {
              this.formData.id = data
              this.$message.success('填写完成！')
              this.$emit('close', 'edit')
            }
          }).catch(() => {
          })
        } else {
          this.$message.success('任务书信息未填写完全,请检查!')
          return false
        }
      })
    },
    checkApplyMoney () {
      if (this.formData.budgetCount != null && this.formData.budgetCount != this.formData.budget[0].totalBudget) {
        alert('项目经费与总经费不一致！')
        return false
      } else {
        return true
      }
    },
    onTargetChange (item) {
      item.checked = !item.checked
      if (item.checked) {
        item.result = 'True'
      } else {
        item.result = 'False'
      }
    },
    // 添加项目内容
    addCont (key) {
      switch (key) {
        case 'cont1':
          this.formData[key].push(cont1())
          break
        case 'cont2':
          this.formData[key].push(cont2())
          break
        case 'cont3':
          this.formData[key].push(cont3())
          break
        case 'cont4':
          this.formData[key].push(cont4())
          break
        case 'cont5':
          this.formData[key].push(cont5())
          break
        case 'cont6':
          this.formData[key].push(cont6())
          break
      }
    },
    // 删除项目内容
    removeCont (item, key) {
      let index = this.formData[key].indexOf(item)
      if (index !== -1) {
        this.formData[key].splice(index, 1)
      }
    },
    // 起止日期选择处理
    dateChange (t) {
      let statr = t.start_date
      let end = t.end_date
      if (!statr || !end) {
        return
      }
      if (statr > end) {
        t.start_date = end
        t.end_date = statr
      }
    }
  }
}
</script>

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