项目立项

web/package.json

@@ -26,6 +26,7 @@
         "jsencrypt": "^3.3.2",
         "marked": "4.3.0",
         "mitt": "^3.0.1",
+        "moment": "^2.30.1",
         "nprogress": "^0.2.0",
         "path": "^0.12.7",
         "pinia": "^2.1.4",

web/src/api/projectList.js

@@ -10,3 +10,13 @@ export const getProjectList = (data) => {
     // }
   })
 }
+
+// 项目立项
+export const createProject = (data) => {
+  return service({
+    url: '/project/createProject',
+    method: 'post',
+    data: data,
+  })
+}
+

web/src/api/user.js

@@ -164,7 +164,7 @@ export const resetPassword = (data) => {
   })
 }
 
-//返回公钥
+// 返回公钥
 
 export const routerPublicKey = () => {
   return service({
@@ -172,3 +172,12 @@ export const routerPublicKey = () => {
     method: 'get'
   })
 }
+
+// 用户列表
+export const getAllUsers = () => {
+  return service({
+    url: '/user/queryAllUsers',
+    method: 'get'
+  })
+}
+

web/src/view/projectManage/projectApproval/projectApproval.vue

@@ -1,49 +1,288 @@
 <template>
   <div>
-    <div style="height: 300px" class="bg-white">
+    <div
+      style="height: 300px"
+      class="bg-white"
+    >
       <div class="basicInformation">
         <div style="padding-top: 10px;margin-left: 90px">
-          <el-image :src="sign"></el-image>
+          <el-image :src="sign" />
         </div>
         <div style="display: flex;align-items: center">
-          <el-text style="margin-left: 10px" size="large" tag="b">项目基本信息</el-text>
+          <el-text
+            style="margin-left: 10px"
+            size="large"
+            tag="b"
+          >项目基本信息</el-text>
         </div>
       </div>
       <el-form>
-        <el-row style="margin:20px 0 0 90px;height: 50px" align="middle">
+        <el-row
+          style="margin:20px 0 0 90px;height: 50px"
+          align="middle"
+        >
           <el-col :span="5">
-            <el-form-item label="项目名称：" size="large">
-              <el-input  placeholder="请输入项目名称" size="large"></el-input>
+            <el-form-item
+              label="项目名称："
+              size="large"
+              prop="name"
+            >
+              <el-input
+                v-model="basicMessage.name"
+                placeholder="请输入项目名称"
+                size="large"
+              />
             </el-form-item>
           </el-col>
-          <el-col :span="5" :offset="2">
-            <el-form-item label="负责人：" size="large">
-              <el-input  placeholder="请输入项目负责人" size="large"></el-input>
+          <el-col
+            :span="5"
+            :offset="2"
+          >
+            <el-form-item
+              label="负责人："
+              size="large"
+              prop="principal"
+            >
+              <el-select
+                v-model="responsible"
+                placeholder="请选择负责人"
+                @change="headSelect"
+              >
+                <el-option
+                  v-for="item in userList"
+                  :key="item.ID"
+                  :label="item.nickName"
+                  :value="item.nickName"
+                />
+              </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="5" :offset="2">
-            <el-form-item label="相关客户：" size="large">
-              <el-input  placeholder="请输入项目相关客户" size="large"></el-input>
+          <el-col
+            :span="5"
+            :offset="2"
+          >
+            <el-form-item
+              label="相关客户："
+              size="large"
+              prop="customer"
+            >
+              <el-input
+                v-model="basicMessage.customer"
+                placeholder="请输入项目相关客户"
+                size="large"
+              />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row style="margin:20px 0 0 90px;height: 50px" align="middle">
+        <el-row
+          style="margin:20px 0 0 90px;height: 50px"
+          align="middle"
+        >
           <el-col :span="5">
-            <el-form-item label="紧急程度：">
-
+            <el-form-item
+              label="紧急程度："
+              size="large"
+            >
+              <el-radio-group
+                v-model="basicMessage.level"
+                @change="changeUrgency"
+              >
+                <el-radio :value="1">正常</el-radio>
+                <el-radio :value="2">重要</el-radio>
+                <el-radio :value="3">紧急</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col
+            :span="6"
+            :offset="2"
+          >
+            <el-form-item
+              label="项目金额："
+              size="large"
+            >
+              <el-input
+                v-model="basicMessage.price"
+                style="max-width: 600px"
+                placeholder="请输入项目的具体金额"
+                class="input-with-select"
+              >
+                <template #append>
+                  <el-select
+                    v-model="amountUnit"
+                    placeholder="元"
+                    style="width: 100px"
+                  >
+                    <el-option
+                      label="元"
+                      :value="1"
+                    />
+                    <el-option
+                      label="万元"
+                      :value="2"
+                    />
+                  </el-select>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row
+          style="margin:20px 0 0 90px;height: 70px"
+        >
+          <el-col :span="19">
+            <el-form-item
+              label="项目说明："
+              size="large"
+            >
+              <el-input
+                v-model="basicMessage.illustrate"
+                type="textarea"
+                placeholder="项目说明"
+                :rows="3"
+                size="large"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </div>
+    <div
+      style="height: 400px;margin-top: 20px"
+      class="bg-white"
+    >
+      <div class="basicInformation">
+        <div style="padding-top: 10px;margin-left: 90px">
+          <el-image :src="sign" />
+        </div>
+        <div style="display: flex;align-items: center">
+          <el-text
+            style="margin-left: 10px"
+            size="large"
+            tag="b"
+          >项目附属文件</el-text>
+        </div>
+      </div>
+      <el-row style="margin:20px 0 0 90px;">
+        <el-col :span="15">
+          <el-upload
+            class="upload-demo"
+            drag
+            multiple
+            :auto-upload="false"
+            :file-list="fileListData"
+            :on-change="changeFileData"
+            :on-remove="removeFileData"
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+              请选择需要上传的文件
+            </div>
+            <template #tip>
+              <div class="el-upload__tip">
+                选择的文件不要超过500MB
+              </div>
+            </template>
+          </el-upload>
+        </el-col>
+        <el-col
+          :span="4"
+          :offset="1"
+        >
+          <el-button
+            icon="Collection"
+            size="large"
+            type="primary"
+            @click="approval"
+          >项目立项</el-button>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref, reactive } from 'vue'
 import sign from '@/assets/sign.png'
+import moment from 'moment/moment'
+import { createProject } from '@/api/project'
+import { getAllUsers } from '@/api/user'
 defineOptions({
-  name: 'projectApproval'
+  name: 'ProjectApproval'
+})
+// 表单验证规则
+// const fromRules = {
+//   name: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
+//   principal: [{ required: true, message: '项目负责人不能为空', trigger: 'blur' }],
+//   customer: [{ required: true, message: '项目相关用户不能为空', trigger: 'blur' }]
+// }
+// 项目基本信息
+const basicMessage = reactive({
+  code: '',
+  name: '',
+  principal: '',
+  price: 0,
+  level: 1,
+  customer: '',
+  illustrate: '',
+  progress: 0,
+  state: 1
 })
+// 项目用户列表
+const userList = reactive([])
+getAllUsers().then(res => {
+  if (res.code === 0) {
+    userList.push(...res.data)
+  }
+})
+// 选择的责任人
+const responsible = ref('')
+// 项目文件列表
+let fileListData = reactive([])
+// 金额单位
+const amountUnit = ref('元')
+// 修改负责人
+const headSelect = (value) => {
+  responsible.value = value
+  userList.forEach(item => {
+    if (value === item.nickName) {
+      basicMessage.principal = item.ID
+    }
+  })
+}
+// 修改文件数据
+const changeFileData = (file, fileList) => {
+  fileListData.push(...fileList)
+  console.log(fileListData)
+}
+const removeFileData = (file, fileList) => {
+  fileListData = fileList
+  console.log(fileListData)
+}
+// 项目紧急程度
+function changeUrgency(value) {
+  basicMessage.level = value
+}
+// 项目立项
+const approval = () => {
+  const basic = basicMessage
+  basic.code = 'LCZM' + createCode()
+  if (amountUnit.value === '万元') {
+    basic.price = parseInt(basic.price) * 10000
+  }
+  console.log(basic)
+  const forData = new FormData()
+  forData.append('file', fileListData)
+  forData.append('project', basic)
+  createProject(forData).then(res => {
+    console.log(res)
+  })
+}
+
+const createCode = () => {
+  console.log(moment().format('YYYYMMDDHHmm'))
+  return moment().format('YYYYMMDDHHmm')
+}
 </script>
 
 <style scoped lang="less">

web/src/view/projectManage/projectList/projectList.vue

@@ -62,7 +62,7 @@
         >
           <el-table
             :data="projectListData"
-            height="650"
+            height="580"
           >
             <el-table-column
               prop="code"
@@ -103,18 +103,47 @@
         </el-col>
       </el-row>
     </el-form>
+    <el-row>
+      <el-col
+        :span="23"
+        style="display: flex;justify-content: end"
+      >
+        <el-pagination
+          :page-size="10"
+          background
+          layout="prev, pager, next"
+          :total="1000"
+          @change="changePage"
+        />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup>
 import { Search } from '@element-plus/icons-vue'
-import { getProjectList } from '@/api/projectList'
+import { getProjectList } from '@/api/project'
 import { reactive, ref } from 'vue'
 
 defineOptions({
   name: 'ProjectList'
 })
-
+// const listData = [
+//   {
+//     ID: 6,
+//     CreatedAt: '2024-07-09',
+//     UpdatedAt: '2024-07-09T16:47:37.586+08:00',
+//     code: 'LCZH202407091518',
+//     name: '路灯局',
+//     principal: 1,
+//     price: '200000',
+//     illustrate: 'non',
+//     source: '内部',
+//     progress: 20,
+//     state: 1,
+//     files: null
+//   }
+// ]
 const approvalTime = ref('')
 const projectListData = reactive([])
 const listTotal = ref(0)
@@ -156,6 +185,10 @@ getProjectList(data).then(res => {
 function initializedData() {
 
 }
+
+function changePage(value) {
+  console.log(value)
+}
 </script>
 
 <style scoped lang="less">