完成新建项目对话框

src/components/CreateProjectDialog.vue

@@ -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>

src/router/index.js

@@ -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({

src/views/Dialog.vue

@@ -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>

src/views/OngoingProject.vue

@@ -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">
@@ -19,15 +19,18 @@
         <el-table-column prop="projectImportance" label="重要程度" min-width="10%"/>
         <el-table-column prop="projectClassName" label="项目分类" min-width="10%"/>
         <el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
-        <el-table-column label="项目进度" min-width="35%" >
+        <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
@@ -87,22 +100,27 @@ export default {
     this.$watch(
         () => this.$route.query,
         () => {
-          if(this.$route.query.currentPage)
+          if (this.$route.query.currentPage)
             this.currentPage = parseInt(this.$route.query.currentPage)
-          if(this.$route.query.pageSize)
+          if (this.$route.query.pageSize)
             this.pageSize = parseInt(this.$route.query.pageSize)
 
           this.getProjects()
         },
         // 组件创建完后获取数据，
         // 此时 data 已经被 observed 了
-        { immediate: true }
+        {immediate: true}
     )
   },
   mounted() {
   },
   methods: {
+    onCreateProject() {
+      this.getProjectClass()
 
+      this.dialogFormVisible = true
+
+    },
     // 选择一页显示多少条数据
     handleSizeChange(val) {
       this.redirect()
@@ -119,7 +137,7 @@ export default {
           projectId: row.projectId,
         }
       }).then(response => {
-        if(response.data.code===200) {
+        if (response.data.code === 200) {
           //console.log(response.data.data.records)
           ElMessage({
             message: '结项成功',
@@ -132,7 +150,7 @@ export default {
       })
     },
     redirect() {
-      router.push({path: '/', query: { currentPage: this.currentPage, pageSize: this.pageSize }})
+      router.push({path: '/', query: {currentPage: this.currentPage, pageSize: this.pageSize}})
     },
     getProjects() {
       const that = this;
@@ -147,9 +165,9 @@ export default {
           }
         }
       }).then(response => {
-        if(response.data.code===200) {
+        if (response.data.code === 200) {
           //console.log(response.data.data.records)
-          that.total =  response.data.data.total
+          that.total = response.data.data.total
           that.tableData = response.data.data.records
         }
       }).catch(function (error) {
@@ -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)
@@ -170,7 +197,7 @@ export default {
     },
 
     priceFormatter(row, column) {
-      return row[column.property]/10000 + '万';
+      return row[column.property] / 10000 + '万';
     },
 
   }