200 lines
6.5 KiB
Vue
200 lines
6.5 KiB
Vue
<template>
|
|
<!-- 工程管理 新增、编辑 表单组件 -->
|
|
<div>
|
|
<el-form
|
|
label-width="100px"
|
|
size="medium"
|
|
ref="projectParamsRef"
|
|
:model="projectParams"
|
|
:rules="projectParamsRules"
|
|
>
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="工程名称" prop="projectName">
|
|
<el-input v-model="projectParams.projectName" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="工程编号" prop="pcNo">
|
|
<el-input v-model="projectParams.pcNo" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="实施单位" prop="pro_unit">
|
|
<el-select v-model="projectParams.pro_unit"></el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="工程类型" prop="pro_type_of">
|
|
<el-select
|
|
v-model="projectParams.pro_type_of"
|
|
></el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="工程状态" prop="pro_type">
|
|
<el-select v-model="projectParams.pro_type"></el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="工程性质" prop="pro_nature">
|
|
<el-select
|
|
v-model="projectParams.pro_nature"
|
|
></el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="项目经理" prop="pro_user">
|
|
<el-input v-model="projectParams.pro_user" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="联系电话" prop="pro_phone">
|
|
<el-input v-model="projectParams.pro_phone" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="合同主体单位">
|
|
<el-input />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="所属项目中心">
|
|
<el-input />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="i8工程ID">
|
|
<el-input />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="关联i8工程">
|
|
<el-input />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="备注">
|
|
<el-input type="textarea" :rows="6" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12"> </el-col>
|
|
</el-row>
|
|
|
|
<el-form-item>
|
|
<el-button type="success" @click="onSubmit">确认</el-button>
|
|
<el-button
|
|
@click="
|
|
() => {
|
|
this.$emit('closeDialog')
|
|
}
|
|
"
|
|
>取消</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { addProjectApi } from '@/api/base/project.js'
|
|
export default {
|
|
name: 'FormProject',
|
|
props: {
|
|
editParams: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.editParams) {
|
|
Object.assign(this.projectParams, this.editParams)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
projectParams: {
|
|
projectName: '', // 工程名称
|
|
pcNo: '', // 工程编号
|
|
pro_unit: '',
|
|
pro_type_of: '',
|
|
pro_type: '',
|
|
pro_nature: '',
|
|
pro_user: '',
|
|
pro_phone: '',
|
|
},
|
|
// 校验规则
|
|
projectParamsRules: {
|
|
projectName: [
|
|
{
|
|
required: true,
|
|
message: '请输入工程名称',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
pro_unit: [
|
|
{
|
|
required: true,
|
|
message: '请选择施工单位',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
pro_type_of: [
|
|
{
|
|
required: true,
|
|
message: '请选择工程类型',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
pro_type: [
|
|
{
|
|
required: true,
|
|
message: '请选择工程状态',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
pro_nature: [
|
|
{
|
|
required: true,
|
|
message: '请选择工程性质',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
/** 确认按钮 */
|
|
onSubmit() {
|
|
this.$refs.projectParamsRef.validate(valid => {
|
|
if (valid) {
|
|
console.log('校验通过')
|
|
// 1. 表单校验通过后调后台 Api
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog')
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
</style>
|