252 lines
8.4 KiB
Vue
252 lines
8.4 KiB
Vue
<template>
|
|
<!-- 协议管理 新增、编辑 表单组件 -->
|
|
<div>
|
|
<el-form
|
|
label-width="100px"
|
|
size="medium"
|
|
ref="protocolParamsRef"
|
|
:model="protocolParams"
|
|
:rules="protocolParamsRules"
|
|
>
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="租赁单位" prop="customer">
|
|
<el-select
|
|
v-model="protocolParams.customer"
|
|
>
|
|
<el-option
|
|
v-for="item in unitSelRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="授权人" prop="authorizingPerson">
|
|
<el-input v-model="protocolParams.authorizingPerson" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="租赁工程" prop="project">
|
|
<el-select
|
|
v-model="protocolParams.project"
|
|
>
|
|
<el-option
|
|
v-for="item in projSelRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="联系电话" prop="authorizingPhone">
|
|
<el-input v-model="protocolParams.authorizingPhone" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="合同编号" prop="contractNumber">
|
|
<el-input v-model="protocolParams.contractNumber" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="12">
|
|
<el-form-item label="租赁期限" prop="pro_nature">
|
|
<el-select
|
|
v-model="protocolParams.pro_nature"
|
|
></el-select>
|
|
</el-form-item>
|
|
</el-col>-->
|
|
<el-col :span="12">
|
|
<el-form-item label="开始日期" prop="startTime">
|
|
<el-input v-model="protocolParams.startTime" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="12">
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="protocolParams.remark" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="合同附件" prop="url">
|
|
<el-input v-model="protocolParams.url" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <el-row :gutter="24">
|
|
<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 {
|
|
addProtocolApi,
|
|
editProtocolApi
|
|
} from '@/api/base/agreement'
|
|
import {
|
|
queryContactUnitsSelApi
|
|
} from '@/api/base/customer'
|
|
import {
|
|
queryProjectSelApi
|
|
} from '@/api/base/project'
|
|
import { addProjectApi, editProjectApi } from '@/api/base/project'
|
|
export default {
|
|
name: 'FormProtocol',
|
|
props: {
|
|
editParams: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
},
|
|
created() {
|
|
this.queryUnitSel()
|
|
this.queryProjSel()
|
|
},
|
|
mounted() {
|
|
if (this.editParams) {
|
|
Object.assign(this.protocolParams, this.editParams)
|
|
this.subSort = 2
|
|
} else {
|
|
this.subSort = 1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
subSort: '', // 提交类型：新增 1 / 修改 2
|
|
protocolParams: {
|
|
customer: '', // 租赁单位
|
|
authorizingPerson: '', // 授权人
|
|
project: '', // 租赁工程
|
|
authorizingPhone: '', // 联系电话
|
|
contractNumber: '', // 合同编号
|
|
startTime: '', // 开始日期
|
|
remark: '', // 备注
|
|
url: '', // 合同附件
|
|
},
|
|
// 租赁单位下拉框
|
|
unitSelRange: [],
|
|
// 租赁工程下拉框
|
|
projSelRange: [],
|
|
// 校验规则
|
|
protocolParamsRules: {
|
|
/* scrapNum: [
|
|
{
|
|
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',
|
|
},
|
|
], */
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
/** 查询往来单位下拉框 */
|
|
queryUnitSel() {
|
|
queryContactUnitsSelApi().then(res => {
|
|
console.log(res)
|
|
this.unitSelRange = res.data.map(item => {
|
|
return {
|
|
label: item.name,
|
|
value: item.id
|
|
}
|
|
})
|
|
}).catch(err => {})
|
|
},
|
|
/** 查询租赁工程下拉框 */
|
|
queryProjSel() {
|
|
queryProjectSelApi().then(res => {
|
|
console.log(res)
|
|
this.projSelRange = res.data.map(item => {
|
|
return {
|
|
label: item.name,
|
|
value: item.id
|
|
}
|
|
})
|
|
}).catch(err => {})
|
|
},
|
|
/** 确认按钮 */
|
|
onSubmit() {
|
|
this.$refs.protocolParamsRef.validate((valid) => {
|
|
if (valid) {
|
|
console.log('校验通过', this.protocolParams, this.subSort)
|
|
// 1. 表单校验通过后调后台 Api
|
|
if(this.subSort === 1) {
|
|
addProtocolApi(this.protocolParams).then(res => {
|
|
console.log(res)
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog')
|
|
history.go(0)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
} else if(this.subSort === 2) {
|
|
editProtocolApi(this.protocolParams).then(res => {
|
|
console.log(res)
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog')
|
|
history.go(0)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
// 2. 成功之后通知父组件关闭弹框
|
|
this.$emit('closeDialog')
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
</style>
|