<template>
|
<div class="container">
|
|
<div class="title" v-if="!editId">新建项目{{ editId }}
|
<span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
<div class="title" v-else>
|
<span>修改项目</span> <span class="back" @click="back"> <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="project_name">
|
|
<el-input v-model="project.project_name" placeholder="请输入项目名称" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="项目类型" prop="project_type">
|
<el-select
|
v-model="project.project_type" placeholder="项目类型" clearable filterable>
|
<el-option
|
v-for="item in projectTypeArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="项目阶段" prop="project_stage">
|
<el-select
|
v-model="project.project_stage" placeholder="项目阶段" clearable filterable>
|
<el-option
|
v-for="item in projectStageArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="项目状态" prop="project_status">
|
<el-select
|
v-model="project.project_status" placeholder="项目状态" clearable filterable>
|
<el-option
|
v-for="item in projectStatusArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
|
|
|
<el-form-item label="客户" prop="company_id">
|
<el-select
|
v-model="project.company_id" placeholder="请选择客户"
|
@change="handlerCompanyChange"
|
clearable filterable >
|
<el-option
|
v-for="item in companyArr"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="联系人" prop="contact_id">
|
<el-select
|
v-model="project.contact_id" placeholder="请选择联系人" clearable filterable >
|
<el-option
|
v-for="item in contactArr"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="项目经理" prop="manager_id">
|
<el-select
|
v-model="project.manager_id" placeholder="请选择项目经理" clearable filterable>
|
<el-option
|
v-for="item in managersArr"
|
:key="item.id"
|
:label="item.nickname"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-switch v-model="need_price"
|
active-text="需要报价"
|
inactive-text="需要报价"
|
inline-prompt
|
/>
|
<el-switch v-model="need_design"
|
active-text="需要设计"
|
inactive-text="需要设计"
|
inline-prompt
|
/>
|
<el-switch v-model="need_develop"
|
active-text="需要开发测试"
|
inactive-text="需要开发测试"
|
inline-prompt
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="项目描述" prop="project_desc">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
placeholder="请输入备注"
|
v-model="project.project_desc"
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
placeholder="请输入备注"
|
v-model="project.remark"
|
>
|
</el-input>
|
</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 } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import ProjectInfo from '@/model/projectInfo'
|
import sysDictItemModel from '@/model/sysDictItem'
|
import ProjectDaily from '@/model/projectDaily'
|
import CompanyInfo from '@/model/companyInfo'
|
import ContactInfo from '@/model/contactInfo'
|
|
export default {
|
props: {
|
editId: {
|
type: String,
|
default: null,
|
},
|
},
|
setup(props, context) {
|
const form = ref(null)
|
const loading = ref(false)
|
|
|
const need_price=ref(true)
|
const need_design=ref(true)
|
const need_develop=ref(true)
|
|
const project = reactive({
|
id:''
|
,project_type:''
|
,project_stage:''
|
,project_status:''
|
,project_name:''
|
,contact_id:''
|
,company_id:''
|
,manager_id:''
|
,project_desc:''
|
,need_price:0
|
,need_design:0
|
,need_develop:0
|
, remark: ''
|
})
|
|
|
|
const companyArr=ref([])
|
const contactArr=ref([])
|
const projectTypeArr=ref([])
|
const projectStageArr=ref([])
|
const projectStatusArr=ref([])
|
const managersArr=ref([])
|
|
const listAssign = (a, b) => Object.keys(a).forEach(key => {
|
a[key] = b[key] || a[key]
|
})
|
|
|
|
const handlerCompanyChange = async () => {
|
let param={company_id:project.company_id}
|
contactArr.value=await ContactInfo.getContactInfoList(param)
|
|
}
|
/**
|
* 表单规则验证
|
*/
|
const { rules } = getRules()
|
|
onMounted(() => {
|
|
loadDictDitems()
|
|
|
})
|
|
//根据字典类型查询字典
|
const loadDictDitems =async () =>{
|
|
if (props.editId) {
|
await getProjectInfo()
|
|
}
|
|
companyArr.value=await CompanyInfo.getCompanyInfoList(null)
|
projectTypeArr.value=await sysDictItemModel.getSysDictItemListByType("project_type")
|
projectStageArr.value=await sysDictItemModel.getSysDictItemListByType("project_stage")
|
projectStatusArr.value=await sysDictItemModel.getSysDictItemListByType("project_status")
|
managersArr.value=await ProjectDaily.getAllUsers()
|
|
handlerCompanyChange()
|
|
}
|
|
const getProjectInfo = async () => {
|
loading.value = true
|
const res = await ProjectInfo.getProjectInfo(props.editId)
|
|
listAssign(project, res)
|
project.value=res
|
need_price.value=project.need_price===0?false:true
|
need_design.value=project.need_design===0?false:true
|
need_develop.value=project.need_develop===0?false:true
|
|
if(res.project_status){
|
project.project_status=String(res.project_status)
|
}else{
|
project.project_status=""
|
}
|
|
project.manager_id=Number(res.manager_id)
|
|
if(res.contact_id){
|
project.contact_id=String(res.contact_id)
|
}else{
|
project.contact_id=""
|
}
|
|
|
loading.value = false
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
}
|
|
const submitForm = async formName => {
|
form.value.validate(async valid => {
|
project.need_design=need_design.value?1:0
|
project.need_price=need_price.value?1:0
|
project.need_develop=need_develop.value?1:0
|
|
if (valid) {
|
let res = {}
|
if (props.editId) {
|
res = await ProjectInfo.editProjectInfo(props.editId, project)
|
context.emit('editClose')
|
} else {
|
res = await ProjectInfo.createProjectInfo(project)
|
resetForm(formName)
|
}
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
ElMessage.success(`${res.message}`)
|
}
|
} else {
|
console.error('error submit!!')
|
ElMessage.error('请将信息填写完整')
|
}
|
})
|
}
|
|
const back = () => {
|
context.emit('editClose')
|
}
|
|
return {
|
back,
|
project,
|
form,
|
rules,
|
resetForm,
|
submitForm,
|
|
companyArr,
|
contactArr,
|
projectTypeArr,
|
projectStageArr,
|
projectStatusArr,
|
managersArr,
|
|
handlerCompanyChange,
|
need_price,
|
need_design,
|
need_develop,
|
}
|
},
|
}
|
|
/**
|
* 表单验证规则
|
*/
|
function getRules() {
|
/**
|
* 验证回调函数
|
*/
|
const checkInfo = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('信息不能为空'))
|
}
|
callback()
|
}
|
const rules = {
|
project_type: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
project_name: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
project_status: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
company_id: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
contact_id: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
manager_id: [{ validator: checkInfo, trigger: 'blur', required: true }],
|
}
|
return { rules }
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
.title {
|
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;
|
}
|
|
.submit {
|
float: left;
|
}
|
}
|
</style>
|
