mosr-web/src/views/project-management/implementation/updateTable.vue

<template>
  <baseTitle title="表格更新"></baseTitle>
  <el-form :model="tableForm" ref="form">
    <el-row>
      <el-col :span="24">
        <el-form-item prop="projectName" label="项目名称">
          <span>{{ tableForm.projectName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="projectChargePerson" label="项目负责人">
          {{tableForm.projectChargePersonName}}
          <el-button @click="showPersonnelPicker">
            {{ tableForm.projectChargePersonName ? '更改' : '请选择研发人员' }}
          </el-button>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="startTime" label="项目开始时间">
          <el-date-picker
              v-model="tableForm.startTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="选择项目开始时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="endTime" label="项目预计持续时间" :title="!tableForm.startTime?'请先选择项目开始时间!':''">
          <el-date-picker
              v-model="tableForm.endTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="选择项目预计持续时间"
              :disabled="!tableForm.startTime"
              :disabled-date="disabledDate"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="projectDevelopmentWay" label="项目开展方式" style="width: 100%">
          <el-input v-model="tableForm.projectDevelopmentWay" placeholder="请输入项目开展方式" clearable>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="projectBudgetDescription" label="项目预算" style="width: 100%">
          <el-input v-model="tableForm.projectBudgetDescription" placeholder="请输入项目预算" clearable>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item prop="projectCompletionRate" label="项目总体完成率（%）">
          <el-input-number v-model="tableForm.projectCompletionRate" placeholder="请输入项目总体完成率" min="0" max="100" :controls="false" style="width: 200px">
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="16" :offset="1">
        <el-form-item prop="completeWork" label="已完成工作量">
          <el-input v-model="tableForm.completeWork" placeholder="请输入已完成工作量" clearable>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <user-picker :multiple="false" ref="userPicker" title="请选择项目负责人" @ok="selected"/>
  <div class="oper-page-btn">
    <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
    <el-button @click="handleBack">返回</el-button>
  </div>
</template>

<script setup lang="jsx">
import {ElMessage, ElNotification} from "element-plus";
import {updateLedger} from "@/api/project-manage";
import {getBaseInfoApi} from "@/components/steps/api";
import {ref} from "vue";
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";

import {useTagsView} from '@/stores/tagsview.js'
import {searchUpdateLedgerData} from "@/api/project-manage";

const tagsViewStore = useTagsView()
const baseForm = ref()
const route = useRoute()
const router = useRouter()
const tableForm = ref({
  projectName: '',
  completeWork: '',
  endTime: '',
  projectBudgetDescription: '',
  projectChargePerson: '',
  projectChargePersonName:'',
  projectCompletionRate: '',
  projectDevelopmentWay: '',
  projectId: '',
  startTime: ''
})
const userPicker = ref()

const showPersonnelPicker = () => {
  userPicker.value.showUserPicker()
}
const selected = (select) => {
  if (!select || select.length === 0) {
    return
  }
  for (const selectElement of select) {
    tableForm.value.projectChargePerson = selectElement.id
    tableForm.value.projectChargePersonName = selectElement.name
  }
}
const disabledDate = (time) => {
  return time.getTime() < new Date(tableForm.value.startTime).getTime();
}
const handleBack = () => {
  history.back()
}
const handleSubmit = async () => {
  let params = {
    ...tableForm.value,
    projectId: route.query.id
  }
  updateLedger(params).then(res => {
    if (res.code === 1000) {
      tagsViewStore.delVisitedViews(router.currentRoute.value.path)
      router.push({
        name: 'Implementation/account',
        query: {
          id: route.query.id
        }
      })
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const getBaseInfo = async () => {
  const {code, data} = await getBaseInfoApi(route.query.id)
  tableForm.value.projectName = data?.projectName || ''
}
getBaseInfo()
const init = async () => {
  const {code, msg, data} = await searchUpdateLedgerData(route.query.id)
  tableForm.value = data
  if (code !== 1000) {
    ElNotification({
      title: '提示',
      message: msg,
      type: 'error'
    })
  }
}
init()
</script>

<style scoped>

</style>