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

<template>
  <div style="padding: 0 30px">
    <baseTitle title="表格更新"></baseTitle>
    <el-form :model="tableForm" ref="form">
      <el-row gutter="30">
        <el-col :span="6">
          <el-form-item prop="projectName" label="项目名称" label-width="95">
            <span>{{ tableForm.projectName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="projectChargePerson" label="项目负责人">
            <!--          <el-button color="#DED0B2" @click="showPersonnelPicker" style="margin-right: 10px">-->
            <!--            {{ tableForm.projectChargePersonName ? '更改' : '请选择项目负责人' }}-->
            <!--          </el-button>-->
            {{ tableForm.projectChargePersonName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <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="6">
          <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%" label-width="95">
            <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="完成率(%)" label-width="95">
            <el-input-number v-model="tableForm.projectCompletionRate" placeholder="请输入项目总体完成率" min="0" max="100"
                             :controls="false">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <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>
    <div class="oper-page-btn">
      <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="jsx">
import {ElNotification} from "element-plus";
import {updateLedger} from "@/api/project-manage";
import {getBaseInfoApi} from "@/components/steps/api";
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 userList = ref([])

const showPersonnelPicker = () => {
  userPicker.value.showUserPicker()
}
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 (data.projectChargePersonName) {
    let userObj = {
      id: data.projectChargePerson,
      name: data.projectChargePersonName,
      companyName: data.companyName,
      accountType: data.accountType,
    }
    userList.value.push(userObj)
  }
  if (code !== 1000) {
    ElNotification({
      title: '提示',
      message: msg,
      type: 'error'
    })
  }
}
init()
</script>

<style scoped lang="scss">
:deep(.el-input-number) {
  width: 100%;

  .el-input__inner {
    text-align: left;
  }
}
:deep(.el-date-editor--date) {
  width: 100%;
}

</style>