WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

子系统新增

Browse Source
This commit is contained in:
妖姐 2024-03-16 17:22:49 +08:00
parent 2af8bdb875
commit 4dc94cede5
1 changed files with 176 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
src/views/WorkLoadPage/I_Manage_ChildSystem.vue
View File

@ -1,78 +1,118 @@
<template> <template>
<div class="container ml-6"> <div class="container ml-6">
<a-breadcrumb class="mt-6 ml-6"> <a-breadcrumb class="mt-6 ml-6">
<a-breadcrumb-item><a href="/WorkLoad/I_Manage">我管理的项目</a></a-breadcrumb-item> <a-breadcrumb-item><a href="/workLoad/I_Manage">我管理的项目</a></a-breadcrumb-item>
<a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item> <a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
<div class="flex absolute right-8 mt-6 space-x-4"> <div class="flex absolute right-8 mt-6 space-x-4">
<button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button> <button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
<button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子系统</button> <button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子系统</button>
</div>
<div class="mt-12 ml-8 flex space-x-16 h-full" >
<div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
<p class="text-lg">项目名称：梁溪区纪委大数据管理平台{{ChildSystems.name}}</p>
<p>项目周期：3个月</p>
<p>项目开始时间：</p>
<p>项目完成时间：</p>
<div class="space-y-2">
<p>工作量：</p>
<p>20人/天</p>
</div> </div>
</div> <div class="mt-12 ml-8 flex space-x-16 h-full" >
<div class="flex flex-row justify-start space-x-5 container"> <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8" >
<div v-for="(ChildSystem, index) in ChildSystems" :key="index" class="flex flex-row justify-start space-x-5"> <p class="text-lg">项目名称：{{ChildProjects.data[0].name}}</p>
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-[260px] h-[300px] bg-cover bg-center bg-[url('@/assert/images/img44.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true"> <p>项目周期：{{ChildProjects.data[0].cycle}} /天</p>
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white"> <p>项目开始时间：</p>
<div class="flex flex-col"> <p>项目完成时间：</p>
<p class="ml-6 mt-4 text-3xl font-bold tracking-tight text-gray-900">01</p> <div class="space-y-2">
<p class="ml-3 text-xl">{{ChildSystem.name}}</p> <p>工作量：{{ChildProjects.data[0].workLoad}}人/天</p>
</div> </div>
<div class="ml-auto mr-10"> <a-button >子系统文档</a-button>
<button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" > </div>
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg"> <div class="flex flex-row justify-start space-x-5 container">
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <div v-for="(ChildSystem, index) in ChildSystems" :key="index" class="flex flex-row justify-start space-x-5">
</svg> <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[260px] h-[300px] bg-cover bg-center bg-[url('@/assert/images/img44.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
</button> <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
</div> <div class="flex flex-col">
<p class="ml-6 mt-4 text-3xl font-bold tracking-tight text-gray-900">{{ChildSystem.id}}</p>
<p class="ml-3 text-xl">{{ChildSystem.name}}</p>
</div>
<div class="ml-auto mr-10">
<button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
<svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
<path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</button>
</div>
</div>
</a-card>
</div>
</div> </div>
</a-card>
</div> </div>
</div>
</div> </div>
</div>
<!--新增子系统对话框--> <!--新增子系统对话框-->
<a-modal v-model:open="AddModule" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子系统"> <a-modal v-model:open="AddModule" @ok="handleAdd" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子系统">
<a-form> <a-form>
<div class="flex space-x-5"> <div class="flex space-x-5">
<a-form-item class="my-4" label="子系统名称："><a-input class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item> <a-form-item class="my-4" label="子系统名称："><a-input v-model:value="formData.name" class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
<a-form-item class="my-4" label="状态："> <a-form-item class="my-4" label="完成情况：">
<a-select <a-select
ref="select" ref="select"
style="width: 145px;margin-left: 1.7vw" style="width: 145px;margin-left: 1.7vw"
@focus="focus" @focus="focus"
> v-model:value="formData.isFinish"
<a-select-option value="jack">进行中</a-select-option> >
<a-select-option value="lucy">未开始</a-select-option> <a-select-option value="0">未开始</a-select-option>
<a-select-option value="disabled">已完成</a-select-option> <a-select-option value="2">进行中</a-select-option>
</a-select> <a-select-option value="-1">已暂停</a-select-option>
</a-form-item> <a-select-option value="1">已完成</a-select-option>
</div> </a-select>
<div class="flex space-x-5"> </a-form-item>
<a-form-item class="my-4" label="周期："><a-input class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item> </div>
<a-form-item class="my-4" label="工作量："><a-input class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item> <div class="flex space-x-5">
</div> <a-form-item class="my-4" label="周期："><a-input v-model:value="formData.cycle" class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
<div class="flex space-x-5"> <a-form-item class="my-4" label="工作量："><a-input v-model:value="formData.workLoad" type="number" class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
<a-form-item class="my-4" label="负责人："><a-input class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item> </div>
<a-form-item class="my-4" label="系统描述："> <!-- <div class="flex space-x-5">-->
<a-textarea :rows="1" class="w-36 h-8" /> <!-- <a-form-item class="my-4" label="负责人："><a-input v-model="formData.responsiblePerson" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
</a-form-item>
</div>
</a-form> <!-- <a-form-item class="my-4" label="发布情况：">-->
</a-modal > <!-- <a-select-->
<!-- ref="select"-->
<!-- style="width: 145px;margin-left: 1.7vw"-->
<!-- @focus="focus"-->
<!-- v-model="formData.responsiblePerson"-->
<!-- >-->
<!-- <a-select-option value="true">是</a-select-option>-->
<!-- <a-select-option value="false">否</a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </div>-->
<div class="flex space-x-5">
<a-form-item class="my-4" label="负责人Id："><a-input v-model:value="formData.principalId" type="number" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
<!-- <a-form-item class="my-4" label="项目id："><a-input v-model="formData.projectId" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
</div>
<!-- <div class="flex space-x-5">-->
<!-- <a-form-item class="my-4" label="开始时间："><a-input v-model="formData.beginTime" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
<!-- <a-form-item class="my-4" label="结束时间："><a-input v-model="formData.completeTime" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
<!-- </div>-->
<div class="flex space-x-8">
<!-- <a-form-item class="my-4" label="type："><a-input v-model="formData.type" class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>-->
<!--1已发布，0未发布-->
<a-form-item class="my-4" label="状态："><a-input type="number" v-model:value="formData.status" class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
<!-- <a-form-item class="my-4" label="是否删除：">-->
<!-- <a-select-->
<!-- ref="select"-->
<!-- style="width: 145px;margin-left: 1.7vw"-->
<!-- @focus="focus"-->
<!-- v-model="formData.isDelete"-->
<!-- >-->
<!-- <a-select-option value="true">是</a-select-option>-->
<!-- <a-select-option value="false">否</a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
</div>
<div class="flex space-x-5">
<a-form-item class="my-4" label="系统描述：">
<a-textarea :rows="1" class="w-[200px] h-[30px]" v-model:value="formData.description" />
</a-form-item>
</div>
</a-form>
</a-modal >
</template> </template>
<script setup> <script setup>
import {onMounted, reactive, ref} from "vue"; import {onMounted, reactive, ref, watch} from "vue";
import request from "@/js/request.js"; import request from "@/js/request.js";
import router from "@/router/index.js"; import router from "@/router/index.js";
@ -81,30 +121,88 @@ const AddModule = ref(false)
const token = window.localStorage.getItem('token') const token = window.localStorage.getItem('token')
const id = window.localStorage.getItem('id') const id = window.localStorage.getItem('id')
function showAddModal(){ function showAddModal(){
AddModule.value = true; AddModule.value = true;
} }
const ChildProjects = ref([]); // 使用ref创建响应式数据 const ChildProjects = reactive({
data:[{
name:'',
id:-1,
isFinish:'',
workLoad:'',
description:'',
cycle:'',
principalUser: ''
}]
}); // 使用ref创建响应式数据
const ChildSystems = ref([]); const ChildSystems = ref([]);
const data =reactive({ const data =reactive({
tags:[], is:1,
isFinish:[0,1,2,-1] id:null,
tags:[],
isFinish:[0,1,2,-1]
}) })
onMounted(() => { onMounted(() => {
request.projectWorkGet(data, token).then((res) => { request.projectWorkGet(data, token).then((res) => {
ChildProjects.value = res.data.data; ChildProjects.data = res.data.data;
}) console.log("res:",res)
request.moduleGetByProjectId(id, token).then((res) => { console.log('对应项目信息',ChildProjects.data[0])
console.log("childModules:", res)
ChildSystems.value = res.data.data console.log(ChildProjects.data)
}) })
request.moduleGetByProjectId(id, token).then((res) => {
console.log("childModules:", res)
ChildSystems.value = res.data.data
})
}) })
function EnterChildModule(ChildSystem){ function EnterChildModule(ChildSystem){
console.log(ChildSystem.id) console.log(ChildSystem.id)
window.localStorage.setItem('id',ChildSystem.id) window.localStorage.setItem('id',ChildSystem.id)
router.push('/WorkLoad/I_Manage/ChildModule') router.push('/workLoad/I_Manage/ChildModule')
} }
// 打开add窗口
watch(() => AddModule.value, () => {
// console.log("AddModule.value",AddModule.value)
console.log("formData",formData)
console.log("ChildProjects.data[0]",ChildProjects.data[0])
})
// 新增
const formData = reactive({
name: "",
status: "",
cycle: "",
workLoad: "",
description: "",
isFinish:'',
type:0, //0代表子系统，1代表子模块
principalId:'',
projectId: '',
// pid: ''
});
// const dataToSend = {
// name: formData.value.name,
// status: formData.value.status,
// cycle: formData.value.cycle,
// workLoad: formData.value.workLoad,
// responsiblePerson: formData.value.responsiblePerson,
// description: formData.value.description,
// };
const handleAdd = () => {
// 获取表单数据
// console.log(2222)
formData.projectId = ChildProjects.data[0].id
console.log("formData:",formData)
request.projectWorkAdd(formData,token).then((res)=>{
console.log(res)
})
// 关闭模态框
AddModule.value = false;
};
</script> </script>