完成新建项目对话框
parent
58244c8af9
commit
a07b43605b
|
|
@ -0,0 +1,401 @@
|
|||
<template>
|
||||
<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="projectName">
|
||||
<el-input v-model="ruleForm.projectName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第2行 -->
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="英文简称" prop="projectAbbreviation">
|
||||
<el-input v-model="ruleForm.projectAbbreviation"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="项目主类" prop="projectClassId" >
|
||||
<el-select v-model="ruleForm.projectClassId" placeholder="请选择" @change="onProjectClassChange">
|
||||
<el-option
|
||||
v-for="item in projectClasses"
|
||||
:label="item.projectClassName"
|
||||
:value="item.projectClassId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="项目子类" prop="projectSubclassId">
|
||||
<el-select v-model="ruleForm.projectSubclassId" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in currentProjectSubClasses"
|
||||
:label="item.projectClassName"
|
||||
:value="item.projectClassId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="重要程度" prop="projectImportance">
|
||||
<el-select v-model="ruleForm.projectImportance" 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="contractAmount">
|
||||
<el-input v-model="ruleForm.contractAmount"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="预期完成度" prop="expectedCompletion">
|
||||
<el-input v-model="ruleForm.expectedCompletion">
|
||||
<template #suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="计划总人月" prop="projectManMonth">
|
||||
<el-input v-model="ruleForm.projectManMonth"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="项目启动日期" required>
|
||||
<el-form-item prop="projectStartTime">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.projectStartTime"
|
||||
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="projectOnlineTime">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.projectOnlineTime"
|
||||
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="projectFirstTestTime">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.projectFirstTestTime"
|
||||
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="projectFinalTestTime">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.projectFinalTestTime"
|
||||
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="projectEndTime">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="ruleForm.projectEndTime"
|
||||
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="financialCode">
|
||||
<el-input v-model="ruleForm.financialCode"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属部门" prop="projectDepartment">
|
||||
<el-input v-model="ruleForm.projectDepartment"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属区域" prop="projectArea">
|
||||
<el-input v-model="ruleForm.projectArea"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属公司" prop="projectCompany">
|
||||
<el-input v-model="ruleForm.projectCompany"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第6行 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="项目描述" prop="projectDescription">
|
||||
<el-input type="textarea" v-model="ruleForm.projectDescription"></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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ElMessage} from "element-plus";
|
||||
import request from "../utils/request";
|
||||
|
||||
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',
|
||||
|
||||
currentProjectSubClasses: [],
|
||||
|
||||
ruleForm: {
|
||||
projectName: '', //项目名称
|
||||
projectAbbreviation: '',//英文简称
|
||||
projectClassId: '',//项目主类
|
||||
projectSubclassId: '',//项目子类
|
||||
projectImportance: '',//重要程度
|
||||
|
||||
contractAmount: '',//合同额
|
||||
expectedCompletion: '',//预期完成度
|
||||
projectManMonth: '',//计划总人月
|
||||
projectStartTime: '',//项目启动日期
|
||||
|
||||
projectOnlineTime: '',//计划上线日期
|
||||
projectFirstTestTime: '',//计划初验日期
|
||||
projectFinalTestTime: '',//计划终验日期
|
||||
projectEndTime: '',//计划结项日期
|
||||
|
||||
financialCode: '',//财务编码
|
||||
projectDepartment: '',//所属部门
|
||||
projectArea: '',//所属区域
|
||||
projectCompany: '',//所属公司
|
||||
|
||||
projectDescription: '',//项目描述
|
||||
},
|
||||
rules: {
|
||||
projectName: [//项目名称
|
||||
{required: true, message: '请输入项目名称', trigger: 'blur'}
|
||||
],
|
||||
projectAbbreviation: [//英文简称
|
||||
{validator: validateAbbreviation}
|
||||
//只能输入英文
|
||||
],
|
||||
projectClassId: [//项目主类
|
||||
{required: true, message: '请选择项目主类', trigger: 'change'},
|
||||
],
|
||||
projectSubclassId: [//项目子类
|
||||
{required: true, message: '请选择项目子类', trigger: 'change'},
|
||||
],
|
||||
projectImportance: [//重要程度
|
||||
{required: true, message: '请选择重要程度', trigger: 'change'},
|
||||
],
|
||||
contractAmount: [//合同额
|
||||
{validator: validateAmount}//
|
||||
//大于等于0
|
||||
],
|
||||
expectedCompletion: [//预期完成度
|
||||
{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'
|
||||
},
|
||||
],
|
||||
projectManMonth: [//计划总人月
|
||||
{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'
|
||||
},
|
||||
],
|
||||
projectStartTime: [//项目启动日期
|
||||
{type: 'date', required: true, message: '请选择计划总人月', trigger: 'change'},
|
||||
],
|
||||
projectOnlineTime: [//计划上线日期
|
||||
{type: 'date', required: true, message: '请选择计划上线日期', trigger: 'change'},
|
||||
],
|
||||
projectFirstTestTime: [//计划初验日期
|
||||
{type: 'date', required: true, message: '请选择计划初验日期', trigger: 'change'},
|
||||
],
|
||||
projectFinalTestTime: [//计划终验日期
|
||||
{type: 'date', required: true, message: '请选择计划终验日期', trigger: 'change'},
|
||||
],
|
||||
projectEndTime: [//计划结项日期
|
||||
{type: 'date', required: true, message: '请选择计划结项日期', trigger: 'change'},
|
||||
],
|
||||
financialCode: [//财务编码
|
||||
{validator: validateFinancial}
|
||||
//只能输入数字
|
||||
],
|
||||
projectDepartment: [//所属部门
|
||||
{required: true, message: '请输入所属部门', trigger: 'blur'},
|
||||
],
|
||||
projectArea: [//所属区域
|
||||
{required: true, message: '请输入所属区域', trigger: 'blur'},
|
||||
],
|
||||
projectCompany: [//所属公司
|
||||
{required: true, message: '请输入所属公司', trigger: 'blur'},
|
||||
],
|
||||
projectDescription: [//项目描述
|
||||
//未想到
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
props: {
|
||||
dialogFormVisible: Boolean,
|
||||
projectClasses: Array,
|
||||
projectSubClasses: Array
|
||||
},
|
||||
methods: {
|
||||
onProjectClassChange(val) {
|
||||
this.ruleForm.projectSubclassId = ''
|
||||
this.currentProjectSubClasses = []
|
||||
for (const record of this.projectSubClasses) {
|
||||
if (record.classFatherId === val)
|
||||
this.currentProjectSubClasses.push(record)
|
||||
}
|
||||
},
|
||||
//提交方法
|
||||
submitForm(formName) {
|
||||
console.log(this.projectClasses)
|
||||
let form = this.ruleForm
|
||||
form.projectFinalTestTime = form.projectFinalTestTime.getTime() / 1000
|
||||
form.projectEndTime = form.projectEndTime.getTime() / 1000
|
||||
form.projectFirstTestTime = form.projectFirstTestTime.getTime() / 1000
|
||||
form.projectOnlineTime = form.projectOnlineTime.getTime() / 1000
|
||||
form.projectStartTime = form.projectStartTime.getTime() / 1000
|
||||
request({
|
||||
url: 'project/create',
|
||||
method: 'post',
|
||||
data: form
|
||||
}).then(response => {
|
||||
console.log(response)
|
||||
if (response.data.code === 200) {
|
||||
//console.log(response.data.data.records)
|
||||
ElMessage({
|
||||
message: '成功',
|
||||
type: 'success',
|
||||
})
|
||||
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
})
|
||||
//对表单进行提交验证
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit')
|
||||
ElMessage({
|
||||
message: 'submit',
|
||||
type: 'success',
|
||||
})
|
||||
//请求
|
||||
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//重置方法
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,7 +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 = [
|
||||
|
|
@ -28,11 +28,7 @@ const routes = [
|
|||
name: 'Login',
|
||||
component: Login,
|
||||
},
|
||||
{
|
||||
path: '/dialog',
|
||||
name: 'dialog',
|
||||
component: Dialog,
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -1,350 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div style="margin: 0 40px 0 40px;
|
||||
display: flex;flex-direction: row;justify-content: space-between">
|
||||
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">在途项目</p>
|
||||
<el-button type="primary">新增项目</el-button>
|
||||
<el-button type="primary" @click.native="onCreateProject">新增项目</el-button>
|
||||
</div>
|
||||
<div style="flex: 1; margin: 30px 30px 10px 30px; background-color: white; border-radius: 10px;padding: 20px;
|
||||
display: flex;flex-direction: column;justify-content: space-between">
|
||||
|
|
@ -21,13 +21,16 @@
|
|||
<el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
|
||||
<el-table-column label="项目进度" min-width="35%">
|
||||
<template #default="scope">
|
||||
<el-progress :text-inside="true" :stroke-width="18" :status="scope.row.completeNum===scope.row.totalNum ? 'success' : ''"
|
||||
<el-progress :text-inside="true" :stroke-width="18"
|
||||
:status="scope.row.completeNum===scope.row.totalNum ? 'success' : ''"
|
||||
:percentage="scope.row.completeNum*100/scope.row.totalNum"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="10%" align="right">
|
||||
<template #default="scope">
|
||||
<el-button :v-show=" this.$store.state.staff.staffId===scope.row.projectCreator" type="primary" plain @click="onCloseProject(scope.row)">结项</el-button>
|
||||
<el-button :v-show=" this.$store.state.staff.staffId===scope.row.projectCreator" type="primary" plain
|
||||
@click="onCloseProject(scope.row)">结项
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -44,6 +47,9 @@
|
|||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<CreateProjectDialog v-model:dialogFormVisible="dialogFormVisible" :projectClasses="projectClasses"
|
||||
:projectSubClasses="projectSubClasses"></CreateProjectDialog>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
// table元素
|
||||
|
|
@ -66,17 +72,24 @@ onMounted(() => {
|
|||
import router from "../router";
|
||||
import request from "../utils/request";
|
||||
import {ElMessage} from "element-plus";
|
||||
import CreateProjectDialog from "../components/CreateProjectDialog"
|
||||
|
||||
export default {
|
||||
name: "OngoingProject",
|
||||
components: {
|
||||
CreateProjectDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogFormVisible: false,
|
||||
|
||||
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
|
||||
projectClass: [],
|
||||
projectClasses: [],
|
||||
projectSubClasses: [],
|
||||
tableData: [],
|
||||
|
||||
staffId: Number
|
||||
|
|
@ -102,7 +115,12 @@ export default {
|
|||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onCreateProject() {
|
||||
this.getProjectClass()
|
||||
|
||||
this.dialogFormVisible = true
|
||||
|
||||
},
|
||||
// 选择一页显示多少条数据
|
||||
handleSizeChange(val) {
|
||||
this.redirect()
|
||||
|
|
@ -157,12 +175,21 @@ export default {
|
|||
})
|
||||
},
|
||||
getProjectClass() {
|
||||
const that = this;
|
||||
request({
|
||||
url: 'projectType',
|
||||
url: 'project/type',
|
||||
method: 'get',
|
||||
}).then(response => {
|
||||
if(response.code===200) {
|
||||
|
||||
if (response.data.code === 200) {
|
||||
console.log(response.data.data.records)
|
||||
that.projectClasses = []
|
||||
that.projectSubClasses = []
|
||||
for (const record of response.data.data.records) {
|
||||
if (record.classFatherId === 0)
|
||||
that.projectClasses.push(record)
|
||||
else
|
||||
that.projectSubClasses.push(record)
|
||||
}
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error)
|
||||
|
|
|
|||
Loading…
Reference in New Issue