add I_ResponsibleChild.vue and modified I_Responsible

src/views/WorkLoadPage/I_Responsible.vue

@@ -28,13 +28,29 @@
             <a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
         </div>
     </div>
-    <div>
-        <a-card hoverable style="width: 240px">
+    <div class="flex flex-row flex-wrap justify-around">
+        <a-card hoverable
+        v-for="proj in projList"
+        class="w-80 mb-4"
+        @click="handleCardClick(proj.id)"
+        >
           <template #cover>
-            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
+            <img alt="example" class="h-40" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
           </template>
-          <a-card-meta title="Europe Street beat">
-            <template #description>www.instagram.com</template>
+          <a-card-meta :title="proj.name">
+
+            <template #description>
+              <div class="flex flex-row justify-between">
+                <div>
+                  <p>周期: {{proj.cycle}}</p>
+                  <p>工作量: {{proj.workload}}</p>
+                </div>
+                <div>
+                  <p>状态: {{proj.isFinish}}</p>
+                  <p>负责人: {{proj.principalId}}</p>
+                </div>
+              </div>
+            </template>
           </a-card-meta>
         </a-card>
 
@@ -45,13 +61,13 @@
          size="large"
          class="bg-sky-300 flex flex-row items-center justify-center"
          shape="circle"
-         @click="open = true"
+         @click="addModalOpen = true"
          >
          <template #icon>
           <PlusOutlined class=""/>
         </template>
         </a-button>
-        <a-modal v-model:open="open" title="添加项目" @ok="handleOk">
+        <a-modal v-model:open="addModalOpen" title="添加项目" @ok="handleOk">
           <a-form
             :label-col="labelCol"
             :wrapper-col="wrapperCol"
@@ -61,8 +77,8 @@
             <a-form-item label="项目名称">
               <a-input v-model:value="addForm.name"/>
             </a-form-item>
-            <a-form-item label="周期" v-model:value="addForm.cycle">
-              <a-input />
+            <a-form-item label="周期" >
+              <a-input v-model:value="addForm.cycle"/>
             </a-form-item>   
             <a-form-item label="工作量">
               <a-input />
@@ -70,19 +86,19 @@
             <a-form-item label="状态">
               <a-select
                 ref="select"
-                v-model:value="value1"
+                v-model:value="addForm.isFinish"
                 style="width: 120px"
                 @focus="focus"
                 @change="handleChange"
               >
-                <a-select-option value="jack">Jack</a-select-option>
-                <a-select-option value="lucy">Lucy</a-select-option>
-                <a-select-option value="disabled" disabled>Disabled</a-select-option>
-                <a-select-option value="Yiminghe">yiminghe</a-select-option>
+                <a-select-option value="0">未开始</a-select-option>
+                <a-select-option value="2">进行中</a-select-option>
+                <a-select-option value="1">已完成</a-select-option>
+                <a-select-option value="-1">暂停</a-select-option>
               </a-select>
             </a-form-item>
             <a-form-item label="项目描述">
-              <a-textarea v-model:value="value" placeholder="Basic usage" :rows="4" />
+              <a-textarea v-model:value="addForm.description" placeholder="Basic usage" :rows="4" />
             </a-form-item>
             <a-form-item label="上传文档">
               <a-upload
@@ -90,27 +106,30 @@
                 :customRequest="customRequest"
                 :showUploadList="false"
               >
-                <a-button icon="upload">Upload</a-button>
+                <a-button icon="upload">上传</a-button>
               </a-upload>
             </a-form-item>
 
         
           </a-form>
           <template #footer>
-              <a-button key="back" @click="handleCancel">取消</a-button>
-              <a-button key="submit" type="primary" @click="handleAdd">新增</a-button>
-              <a-button key="submit" type="primary" @click="handleAddPublish">新增并发布</a-button>
+              <a-button key="back" @click="addModalOpen=false">取消</a-button>
+              <a-button key="submit" type="primary" 
+              class="bg-sky-600"
+              @click="handleAdd(0)">新增</a-button>
+              <a-button key="submit" class="bg-sky-600" type="primary" @click="handleAdd(1)">新增并发布</a-button>
             </template>
         </a-modal>
     </a-tooltip>
 </template>
-<script setup lang="ts">
+<script setup>
 import { reactive, ref ,computed,onMounted} from 'vue';
 import { h } from 'vue';
 import { SearchOutlined,StarOutlined,PlusOutlined } from '@ant-design/icons-vue';
+import {useRouter} from "vue-router";
 
 import request from '@/js/request';
-
+const router=useRouter()
 const tagsData = ref([]);
 const selectTags = ref([false, false, false, false]);
 
@@ -121,13 +140,19 @@ const token = window.localStorage.getItem('token')
 
 const projList=ref([])
 
+const addModalOpen=ref(false)
+ // 得到用户信息
+ const uinfo=JSON.parse(window.localStorage.getItem('uinfo'))
+
 const addForm=ref({
   name:'',
   cycle:'',
   workload:'',
   status:'',
+  isFinish:'',
   description:'',
-  file:''
+  file:'',
+  principalId:''
 })
 
 
@@ -164,14 +189,27 @@ const handleChange = (tag, checked) => {
 
 
 
-// 有关新增
-const handleAdd=()=>{
-  console.log('新增')
 
+const handleAdd=(publish)=>{
+  console.log(addForm.value)
+  //添加是否发布 和 负责人id
+  addForm.value.status=publish
+
+  addForm.value.principalId=uinfo.user.id
+
+  //todo 文件bug 必须传{} 否则报错
+  addForm.value.file='{}'
+
+  request.projectAdd(token,addForm.value).then(res=>{
+    console.log(res)
+  })
 }
 
 
-
+const handleCardClick=(id)=>{
+  console.log(id)
+  router.push('/WorkLoad/I_Responsible/'+id)
+}
 
 
 // 当组件挂载时 请求tag数据
@@ -186,6 +224,7 @@ onMounted(
     // 默认获取全部数据
     request.projectGet(token).then(res=>{
       console.log(res)
+      projList.value=res.data.data
 
     })
   }

src/views/WorkLoadPage/I_ResponsibleChild.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="bg-sky-200 h-full flex flex-row">
+        <div class="w-1/3 bg-yellow-200 flex items-center justify-center">
+            <div class="bg-green-200">
+                <span>项目名称: {{projectMetadata.name}}</span><br/>
+                <span>周期: {{projectMetadata.cycle}}</span><br/>
+                <span>工作量: {{projectMetadata.workload}}</span><br/>
+                <span>状态: {{projectMetadata.isFinish}}</span><br/>
+                <span>负责人: {{projectMetadata.principalId}}</span>
+
+
+            </div>
+        </div>
+        <div class="w-2/3">
+           right
+        </div>
+    </div>
+
+</template>
+
+<script setup>
+import request from '@/js/request';
+import { useRoute } from 'vue-router';
+import { onMounted, ref } from 'vue';
+const route=useRoute()
+const projId=route.params.projId
+const token = window.localStorage.getItem('token')
+
+const projectMetadata = ref({
+    name: '',
+    cycle: '',
+    workload: '',
+    isFinish: '',
+    principalId: ''
+});
+
+
+// 开始时 获取元信息
+onMounted(()=>{
+    request.projectGet(token).then(res=>{
+        projectMetadata.value = res.data.data; 
+        console.log(res.data.data)
+    })
+    // console.log(projId);
+    request.moduleGetByProjectId(projId,token).then(res=>{
+        console.log(res.data.data)
+    })
+})
+</script>