添加新增项目对话框
parent
c644e022fb
commit
58244c8af9
|
|
@ -4,6 +4,7 @@ import Home from '@/views/Home.vue'
|
|||
import {createWebHistory} from "vue-router/dist/vue-router.esm-browser"
|
||||
import Login from "@/views/Login.vue"
|
||||
import Project from "@/views/Project.vue";
|
||||
import Dialog from "@/views/Dialog.vue";
|
||||
import OngoingProject from "../views/OngoingProject";
|
||||
import ClosedProject from "../views/ClosedProject";
|
||||
const routes = [
|
||||
|
|
@ -27,7 +28,11 @@ const routes = [
|
|||
name: 'Login',
|
||||
component: Login,
|
||||
},
|
||||
|
||||
{
|
||||
path: '/dialog',
|
||||
name: 'dialog',
|
||||
component: Dialog,
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,350 @@
|
|||
<template>
|
||||
<div class="dialog">
|
||||
<h1>对话框</h1>
|
||||
<!-- Form -->
|
||||
<el-button @click="dialogFormVisible = true">新建项目</el-button>
|
||||
|
||||
<el-dialog title="新建项目" v-model="dialogFormVisible" :width="'1050px'" center>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="110px"
|
||||
class="demo-ruleForm">
|
||||
<!-- 第1行 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="项目名称" prop="project_name">
|
||||
<el-input v-model="ruleForm.project_name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第2行 -->
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="英文简称" prop="project_abbreviation">
|
||||
<el-input v-model="ruleForm.project_abbreviation"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="项目主类" prop="project_class_id">
|
||||
<el-select v-model="ruleForm.project_class_id" placeholder="请选择">
|
||||
<el-option label="项目主类1" value="项目主类1"></el-option>
|
||||
<el-option label="项目主类2" value="项目主类2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="项目子类" prop="project_subclass_id">
|
||||
<el-select v-model="ruleForm.project_subclass_id" placeholder="请选择">
|
||||
<el-option label="项目子类1" value="项目子类1"></el-option>
|
||||
<el-option label="项目子类2" value="项目子类2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="重要程度" prop="project_importance">
|
||||
<el-select v-model="ruleForm.project_importance" placeholder="请选择">
|
||||
<el-option label="极其重要" value="极其重要"></el-option>
|
||||
<el-option label="很重要" value="很重要"></el-option>
|
||||
<el-option label="较为重要" value="较为重要"></el-option>
|
||||
<el-option label="不太重要" value="不太重要"></el-option>
|
||||
<el-option label="不重要" value="不重要"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第3行 -->
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="合同额" prop="contract_amount">
|
||||
<el-input v-model="ruleForm.contract_amount" ></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预期完成度" prop="expected_completion" >
|
||||
<el-input v-model="ruleForm.expected_completion">
|
||||
<template #suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="计划总人月" prop="project_man_month">
|
||||
<el-input v-model="ruleForm.project_man_month"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="项目启动日期" required>
|
||||
<el-form-item prop="project_start_time">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.project_start_time"
|
||||
style="width: 100%;"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第4行 -->
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="计划上线日期" required>
|
||||
<el-form-item prop="project_online_time">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.project_online_time"
|
||||
style="width: 100%;"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="计划初验日期" required>
|
||||
<el-form-item prop="project_first_test_time">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.project_first_test_time"
|
||||
style="width: 100%;"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="计划终验日期" required>
|
||||
<el-form-item prop="project_final_test_time">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.project_final_test_time"
|
||||
style="width: 100%;"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="计划结项日期" required>
|
||||
<el-form-item prop="project_end_time">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.project_end_time"
|
||||
style="width: 100%;"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第5行 -->
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="财务编码" prop="financial_code">
|
||||
<el-input v-model="ruleForm.financial_code"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属部门" prop="project_department">
|
||||
<el-input v-model="ruleForm.project_department"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属区域" prop="project_area">
|
||||
<el-input v-model="ruleForm.project_area"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属公司" prop="project_company">
|
||||
<el-input v-model="ruleForm.project_company"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第6行 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="项目描述" prop="project_description">
|
||||
<el-input type="textarea" v-model="ruleForm.project_description"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 按钮 -->
|
||||
<template #footer>
|
||||
<span class="dialog-footer" >
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
let validateAbbreviation = (rule,value,callback) => {//定义英文简称只能输入英文和数字
|
||||
var reg = new RegExp("^[A-Za-z0-9]+$");
|
||||
if(!value){//没有值，直接callback,不校验
|
||||
return callback()
|
||||
}else{
|
||||
if(!reg.test(value)){
|
||||
callback(new Error("只能输入字母和数字"))
|
||||
}
|
||||
}
|
||||
}
|
||||
let validateAmount = (rule,value,callback) => {//定义合通额大于等于0,而且只到小数点后2位
|
||||
var reg = new RegExp("^(([0-9]|([1-9][0-9]{0,9}))((\\.[0-9]{1,2})?))$");
|
||||
if(!value){//没有值，直接callback,不校验
|
||||
return callback()
|
||||
}else{
|
||||
if(!reg.test(value)){
|
||||
callback(new Error("请输入正确的合同额"))
|
||||
}
|
||||
}
|
||||
}
|
||||
let validateFinancial = (rule,value,callback) => {//定义财务编码只能输入数字
|
||||
var reg = new RegExp("^\\d+$|^\\d+[.]?\\d+$");
|
||||
if(!value){//没有值，直接callback,不校验
|
||||
return callback()
|
||||
}else{
|
||||
if(!reg.test(value)){
|
||||
callback(new Error("请输入正确的财务编码"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dialogFormVisible: false,
|
||||
formLabelWidth: '120px',
|
||||
ruleForm: {
|
||||
project_name:'', //项目名称
|
||||
project_abbreviation: '',//英文简称
|
||||
project_class_id: '',//项目主类
|
||||
project_subclass_id: '',//项目子类
|
||||
project_importance:'' ,//重要程度
|
||||
|
||||
contract_amount: '',//合同额
|
||||
expected_completion: '',//预期完成度
|
||||
project_man_month: '',//计划总人月
|
||||
project_start_time: '',//项目启动日期
|
||||
|
||||
project_online_time: '',//计划上线日期
|
||||
project_first_test_time: '',//计划初验日期
|
||||
project_final_test_time: '',//计划终验日期
|
||||
project_end_time: '',//计划结项日期
|
||||
|
||||
financial_code: '',//财务编码
|
||||
project_department: '',//所属部门
|
||||
project_area: '',//所属区域
|
||||
project_company: '',//所属公司
|
||||
|
||||
project_description: '',//项目描述
|
||||
},
|
||||
rules: {
|
||||
project_name: [//项目名称
|
||||
{ required: true, message: '请输入项目名称', trigger: 'blur' }
|
||||
],
|
||||
project_abbreviation: [//英文简称
|
||||
{ validator: validateAbbreviation }
|
||||
//只能输入英文
|
||||
],
|
||||
project_class_id: [//项目主类
|
||||
{ required: true, message: '请选择项目主类', trigger: 'change' },
|
||||
],
|
||||
project_subclass_id: [//项目子类
|
||||
{ required: true, message: '请选择项目子类', trigger: 'change' },
|
||||
],
|
||||
project_importance: [//重要程度
|
||||
{ required: true, message: '请选择重要程度', trigger: 'change' },
|
||||
],
|
||||
contract_amount: [//合同额
|
||||
{ validator: validateAmount }//
|
||||
//大于等于0
|
||||
],
|
||||
expected_completion: [//预期完成度
|
||||
{ required: true, message: '请输入预期完成度', trigger: 'blur' },
|
||||
{ validator:function(rule,value,callback){
|
||||
//校验完成度为0-100
|
||||
if(!/(^[1-9]\d$)|(^\d$)|(^100$)/.test(value)){
|
||||
callback(new Error("请输入正确的完成度"));
|
||||
}else{
|
||||
//校验通过
|
||||
callback();
|
||||
}
|
||||
}, trigger: 'blur'
|
||||
},
|
||||
],
|
||||
project_man_month: [//计划总人月
|
||||
{ required: true, message: '请输入计划总人月', trigger: 'blur' },
|
||||
{ validator:function(rule,value,callback){
|
||||
//校验总人月>0（正整数）
|
||||
if(!/^[1-9]*[1-9][0-9]*$/.test(value)){
|
||||
callback(new Error("请输入正确的人月数"));
|
||||
}else{
|
||||
//校验通过
|
||||
callback();
|
||||
}
|
||||
}, trigger: 'blur'
|
||||
},
|
||||
],
|
||||
project_start_time: [//项目启动日期
|
||||
{ type: 'date',required: true, message: '请选择计划总人月', trigger: 'change' },
|
||||
],
|
||||
project_online_time: [//计划上线日期
|
||||
{ type: 'date',required: true, message: '请选择计划上线日期', trigger: 'change' },
|
||||
],
|
||||
project_first_test_time: [//计划初验日期
|
||||
{ type: 'date',required: true, message: '请选择计划初验日期', trigger: 'change' },
|
||||
],
|
||||
project_final_test_time: [//计划终验日期
|
||||
{ type: 'date',required: true, message: '请选择计划终验日期', trigger: 'change' },
|
||||
],
|
||||
project_end_time: [//计划结项日期
|
||||
{ type: 'date',required: true, message: '请选择计划结项日期', trigger: 'change' },
|
||||
],
|
||||
financial_code: [//财务编码
|
||||
{ validator: validateFinancial }
|
||||
//只能输入数字
|
||||
],
|
||||
project_department: [//所属部门
|
||||
{ required: true, message: '请输入所属部门', trigger: 'blur' },
|
||||
],
|
||||
project_area: [//所属区域
|
||||
{ required: true, message: '请输入所属区域', trigger: 'blur' },
|
||||
],
|
||||
project_company: [//所属公司
|
||||
{ required: true, message: '请输入所属公司', trigger: 'blur' },
|
||||
],
|
||||
project_description: [//项目描述
|
||||
//未想到
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//提交方法
|
||||
submitForm(formName){
|
||||
//对表单进行提交验证
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!')
|
||||
//请求
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//重置方法
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue