<template>
|
<div class="container2">
|
<div class="title" v-if="!editId">
|
新建项目时间
|
<span class="back" @click="back" v-if="showBack"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
<div class="title" v-else>
|
<span>修改项目时间</span>
|
<span class="back" @click="back" v-if="showBack"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
|
<div class="wrap">
|
<el-row>
|
<el-col :lg="16" :md="20" :sm="24" :xs="24">
|
<el-form :model="project" status-icon ref="form" label-width="auto" @submit.prevent :rules="rules">
|
<el-form-item label="项目计划开始时间" prop="pro_estimate_start_time" v-if="projectType === 'project'">
|
<el-date-picker
|
v-model="project.pro_estimate_start_time"
|
type="date"
|
placeholder="项目计划开始时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="项目计划完成时间" prop="pro_estimate_complete_time" v-if="projectType === 'project'">
|
<el-date-picker
|
v-model="project.pro_estimate_complete_time"
|
type="date"
|
placeholder="项目计划完成时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="项目实际开始时间" prop="pro_actual_start_time" v-if="projectType === 'project'">
|
<el-date-picker
|
v-model="project.pro_actual_start_time"
|
type="date"
|
placeholder="项目实际开始时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="项目实际结束时间" prop="pro_actual_complete_time" v-if="projectType === 'project'">
|
<el-date-picker
|
v-model="project.pro_actual_complete_time"
|
type="date"
|
placeholder="项目实际结束时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
|
<el-form-item label="商务计划开始时间" prop="bus_estimate_start_time" v-if="projectType === 'business'">
|
<el-date-picker
|
v-model="project.bus_estimate_start_time"
|
type="date"
|
placeholder="商务计划开始时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="商务计划完成时间" prop="bus_estimate_complete_time" v-if="projectType === 'business'">
|
<el-date-picker
|
v-model="project.bus_estimate_complete_time"
|
type="date"
|
placeholder="商务计划完成时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="商务实际开始时间" prop="bus_actual_start_time" v-if="projectType === 'business'">
|
<el-date-picker
|
v-model="project.bus_actual_start_time"
|
type="date"
|
placeholder="商务实际开始时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="商务实际结束时间" prop="bus_actual_complete_time" v-if="projectType === 'business'">
|
<el-date-picker
|
v-model="project.bus_actual_complete_time"
|
type="date"
|
placeholder="商务实际结束时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
|
<el-form-item class="submit">
|
<el-button type="primary" @click="submitForm">保 存</el-button>
|
<el-button @click="resetForm">重 置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reactive, ref, onMounted, computed, watch } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import Calendar from '@/model/calendar'
|
import CalendarHoliday from '@/model/calendarHoliday'
|
import SysDictItemModel from '@/model/sysDictItem'
|
import dayjs from 'dayjs'
|
import ProjectInfo from '@/model/projectInfo'
|
|
export default {
|
components: {},
|
props: {
|
editId: {
|
type: String,
|
default: null,
|
},
|
showBack: {
|
type: Boolean,
|
default: true,
|
},
|
projectType: {
|
type: String,
|
default: null,
|
},
|
},
|
setup(props, context) {
|
const form = ref(null)
|
const loading = ref(false)
|
const business_content = ref(null)
|
const calendarTypeList = ref([])
|
|
// watch(props.projectType){},
|
|
console.log(`projectType:${props.projectType}`)
|
|
const project = reactive({
|
id: '',
|
pro_estimate_start_time: '',
|
pro_estimate_complete_time: '',
|
pro_actual_start_time: '',
|
pro_actual_complete_time: '',
|
bus_estimate_start_time: '',
|
bus_estimate_complete_time: '',
|
bus_actual_start_time: '',
|
bus_actual_complete_time: '',
|
})
|
|
const listAssign = (a, b) => Object.keys(a).forEach(key => {
|
a[key] = b[key] || a[key]
|
})
|
|
/**
|
* 表单规则验证
|
*/
|
|
const { projectRules, businessRules } = getRules()
|
const rules = computed(() => {
|
if (props.projectType === 'project') {
|
return projectRules
|
}
|
if (props.projectType === 'business') {
|
return businessRules
|
}
|
})
|
|
onMounted(() => {
|
if (props.editId) {
|
getProjectInfo()
|
}
|
loadDictDitems()
|
})
|
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
calendarTypeList.value = await SysDictItemModel.getSysDictItemListByType('calendar_type')
|
}
|
|
const getProjectInfo = async () => {
|
loading.value = true
|
const res = await ProjectInfo.getProjectInfo(props.editId)
|
|
listAssign(project, res)
|
console.log('获取结果')
|
console.log(project)
|
|
loading.value = false
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
}
|
|
const submitForm = async formName => {
|
form.value.validate(async valid => {
|
if (valid) {
|
let res = {}
|
if (props.editId) {
|
res = await ProjectInfo.editProjectProBusDate(props.editId, project)
|
context.emit('editClose')
|
}
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
ElMessage.success(`${res.message}`)
|
}
|
} else {
|
console.error('error submit!!')
|
ElMessage.error('请将信息填写完整')
|
}
|
})
|
}
|
|
const back = () => {
|
context.emit('editClose')
|
}
|
|
const handleContentChange = val => {
|
project.business_content = val
|
}
|
|
return {
|
back,
|
form,
|
rules,
|
resetForm,
|
submitForm,
|
|
business_content,
|
handleContentChange,
|
calendarTypeList,
|
project,
|
}
|
},
|
}
|
|
/**
|
* 表单验证规则
|
*/
|
function getRules() {
|
/**
|
* 验证回调函数
|
*/
|
const checkInfo = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('信息不能为空'))
|
}
|
callback()
|
}
|
const projectRules = {
|
pro_estimate_start_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
pro_estimate_complete_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
pro_actual_start_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
pro_actual_complete_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
}
|
|
const businessRules = {
|
bus_estimate_start_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
bus_estimate_complete_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
bus_actual_start_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
bus_actual_complete_time: [{ message: '时间不能为空', trigger: 'blur', required: true }],
|
}
|
return { projectRules, businessRules }
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container2 {
|
.title {
|
width: 100%;
|
height: 59px;
|
line-height: 59px;
|
color: $parent-title-color;
|
font-size: 16px;
|
font-weight: 500;
|
text-indent: 40px;
|
border-bottom: 1px solid #dae1ec;
|
|
.back {
|
float: right;
|
margin-right: 40px;
|
cursor: pointer;
|
}
|
}
|
|
.wrap {
|
padding: 20px;
|
width: 100%;
|
}
|
|
.submit {
|
float: left;
|
}
|
}
|
</style>
|
