ah-jjzhgd-web/src/views/dataManage/projectProgress/components/addAndEditForm.vue

297 lines
10 KiB
Vue

<template>
<div>
<el-form
:model="addAndEditForm"
label-width="auto"
ref="addAndEditFormRef"
:rules="addAndEditFormRules"
>
<el-row>
<el-col :span="24">
<el-form-item label="工程名称" prop="bidCode">
<el-select
v-model="addAndEditForm.bidCode"
placeholder="请选择工程名称"
style="width: 100%"
>
<el-option
v-for="item in projectList"
:key="item.bidCode"
:label="item.proName"
:value="item.bidCode"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工序类型" prop="gxType">
<!-- <el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入工程类型"
v-model.trim="addAndEditForm.gxType"
/> -->
<el-select
clearable
style="width: 100%"
v-model="addAndEditForm.gxType"
placeholder="请选择工序"
>
<el-option label="土建" value="1" />
<el-option label="电器" value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工序" prop="gx">
<el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入工序"
v-model.trim="addAndEditForm.gx"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划开始时间" prop="planStartTime">
<el-date-picker
type="date"
clearable
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="请选择计划开始时间"
v-model="addAndEditForm.planStartTime"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划结束时间" prop="planEndTime">
<el-date-picker
type="date"
clearable
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="请选择计划结束时间"
v-model="addAndEditForm.planEndTime"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="投入人员" prop="inUser">
<el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入投入人员"
v-model.trim="addAndEditForm.inUser"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="投入设备" prop="inDevice">
<el-input
clearable
show-word-limit
:maxlength="50"
placeholder="请输入投入设备"
v-model.trim="addAndEditForm.inDevice"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="实际结束时间" prop="endTime">
<el-date-picker
type="date"
clearable
style="width: 100%"
value-format="yyyy-MM-dd"
placeholder="请选择实际结束时间"
v-model="addAndEditForm.endTime"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import {
addProjectProgressAPI,
editProjectProgressAPI,
} from '@/api/dataManage/projectProgress'
import { getProjectSelectListAPI } from '@/api/dataManage/common'
export default {
name: 'AddAndEditForm',
props: {
detailsId: {
type: [Number, String],
default: '',
},
editRow: {
type: Object,
default: () => {},
},
},
data() {
return {
addAndEditForm: {
bidCode: '',
gxType: '',
gx: '',
planStartTime: '',
planEndTime: '',
endTime: '',
inUser: '',
inDevice: '',
},
addAndEditFormRules: {
bidCode: [
{
required: true,
message: '请选择工程名称',
trigger: 'blur',
},
],
gxType: [
{
required: true,
message: '请输入工序类型',
trigger: 'blur',
},
],
gx: [
{
required: true,
message: '请输入工序',
trigger: 'blur',
},
],
inUser: [
{
required: true,
message: '请输入投入人员',
trigger: 'blur',
},
],
inDevice: [
{
required: true,
message: '请输入投入设备',
trigger: 'blur',
},
],
planStartTime: [
{
required: true,
message: '请选择计划开始时间',
trigger: 'blur',
},
],
planEndTime: [
{
required: true,
message: '请选择计划结束时间',
trigger: 'blur',
},
],
endTime: [
{
required: true,
message: '请选择实际结束时间',
trigger: 'blur',
},
],
},
projectList: [],
}
},
methods: {
submitForm() {
return new Promise((resolve, reject) => {
this.$refs.addAndEditFormRef.validate(async (valid) => {
if (valid) {
const params = this.addAndEditForm
if (this.detailsId) {
params.id = this.detailsId
}
const API = this.detailsId
? editProjectProgressAPI
: addProjectProgressAPI
const res = await API(params)
if (res.code === 200) {
resolve(true)
} else {
reject(false)
}
} else {
reject(false)
}
})
})
},
async getProjectSelectList() {
const res = await getProjectSelectListAPI()
if (res.code === 200) {
this.projectList = res.data
}
},
},
created() {
this.getProjectSelectList()
},
watch: {
editRow: {
handler(newVal) {
if (Object.keys(newVal).length > 0) {
const {
gxType,
gx,
planStartTime,
planEndTime,
endTime,
inUser,
inDevice,
bidCode,
} = newVal
this.addAndEditForm.gxType = gxType
this.addAndEditForm.gx = gx
this.addAndEditForm.planStartTime = planStartTime
this.addAndEditForm.planEndTime = planEndTime
this.addAndEditForm.endTime = endTime
this.addAndEditForm.inUser = inUser
this.addAndEditForm.inDevice = inDevice
this.addAndEditForm.bidCode = bidCode
}
},
immediate: true,
},
},
}
</script>