feat:增加项目列表页面查询、创建多层子项目数据整合、创建单层子项目、创建多层项目数据整合。

src/views/projectcenter/ProjectManage.vue

@@ -5,28 +5,31 @@
 		<div class="filter">
 			<div class="filterItems">
 				<div class="select">
-					<a-select v-model:value="projectName" style="width: 270px" placeholder="请输入项目名称" :options="projectNameList"
+					<a-input v-model:value="sProjectName" style="width: 270px; height: 40px; border-radius: 8px;"
-						@change="selectProjectName" allowClear showSearch></a-select>
+						placeholder="请输入项目名称" @change="sProjectNameChange" allowClear showSearch>
+					</a-input>
 				</div>
 				<div class="select">
-					<a-select v-model:value="projectName" style="width: 270px" placeholder="请输入项目经理" :options="projectNameList"
+					<a-input v-model:value="sProjectOrder" style="width: 270px; height: 40px; border-radius: 8px;"
-						@change="selectProjectName" allowClear showSearch></a-select>
+						placeholder="请输入项目经理" @change="sProjectOrderChange" allowClear showSearch>
+					</a-input>
 				</div>
 				<div class="select">
-					<a-select v-model:value="projectName" style="width: 270px" placeholder="请选择状态" :options="projectNameList"
+					<a-select v-model:value="sProjectState" style="width: 270px" placeholder="请选择状态" :options="sProjectStateList"
-						@change="selectProjectName" allowClear showSearch></a-select>
+						@change="sProjectStateChange" allowClear showSearch></a-select>
 				</div>
 				<div class="select">
-					<a-date-picker v-model="selectTime" type="date" placeholder="创建时间" style="width: 270px" />
+					<a-date-picker v-model:value="sProjectTime" @change="sProjectTimeChange" type="date" placeholder="创建时间"
+						style="width: 270px" />
 				</div>
 				<div style="display: flex; margin-bottom: 20px">
 					<div class="btnn btn1">
 						<div class="search"></div>
-						<div class="btnText">搜索</div>
+						<div class="btnText" v-on:click="searchSubmit">搜索</div>
 					</div>
 					<div class="btn btn2">
 						<div class="search"></div>
-						<div class="btnText">重置</div>
+						<div class="btnText" v-on:click="searchReset">重置</div>
 					</div>
 				</div>
 			</div>
@@ -103,7 +106,7 @@
 					</div>
 				</div>
 				<div class="modalMain">
-					<router-link to="/sonproject" class="taskbox" style="
+					<div @click="createChildProject" class="taskbox" style="
               margin-right: 24px;
               background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
             ">
@@ -119,7 +122,7 @@
 						<div class="centerbox" style="color: rgba(78, 166, 255, 1)">
 							单层子项目
 						</div>
-					</router-link>
+					</div>
 					<div class="taskbox" @click="showModal3" style="
               background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
             ">
@@ -240,7 +243,7 @@
 							<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
 						</div>
 						<div class="inname">分类:</div>
-						<div class="in">
+						<div class="in select">
 							<a-select v-model:value="value2" placeholder="四个养成" :options="classifyList" @change="classificationChange"
 								style="border-radius: 8px; height: 40px" />
 						</div>
@@ -251,7 +254,7 @@
 						</div>
 						<div class="inname">项目经理:</div>
 						<div class="in">
-							<a-select v-model:value="value3" placeholder="请选择项目经理" :options="classifyList1"
+							<a-select v-model:value="value3" mode="multiple" placeholder="请选择项目经理" :options="classifyList1"
 								@change="classificationChange1" style="border-radius: 8px; height: 40px" />
 						</div>
 					</div>
@@ -260,8 +263,9 @@
 							<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
 						</div>
 						<div class="inname">资源归属:</div>
-						<div class="in">
+						<div class="in select">
-							<a-input v-model:value="value5" style="border-radius: 8px; height: 40px" />
+							<a-select v-model:value="value5" placeholder="请选择资源归属" :options="classifyList5"
+								@change="classificationChange5" style="border-radius: 8px; height: 40px" />
 						</div>
 					</div>
 					<div class="pubtn">
@@ -293,7 +297,7 @@
 				<div class="modalMain">
 					<div style="margin-left: 40px; margin-top: 40px">
 						<span style="color: #000000; font-size: 14px">项目归属：</span>
-						<span style="color: #999999; font-size: 14px; margin-left: 10px">管理者进阶</span>
+						<span style="color: #999999; font-size: 14px; margin-left: 10px">{{ currentProjectName }}</span>
 					</div>
 					<div class="name">
 						<div class="star" style="margin-top: -4px">
@@ -301,7 +305,7 @@
 						</div>
 						<div class="inname">子项目名称:</div>
 						<div class="in">
-							<a-input v-model:value="value5" placeholder="请输入项目名称" style="border-radius: 8px; height: 40px" />
+							<a-input v-model:value="value6" placeholder="请输入项目名称" style="border-radius: 8px; height: 40px" />
 						</div>
 					</div>
 					<div class="name">
@@ -309,8 +313,9 @@
 							<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
 						</div>
 						<div class="inname">分类:</div>
-						<div class="in">
+						<div class="in select">
-							<a-select v-model:value="value6" placeholder="四个养成" style="border-radius: 8px; height: 40px" />
+							<a-select v-model:value="value7" @change="classificationChange2" :options="classifyList2"
+								placeholder="四个养成" style="border-radius: 8px; height: 40px" />
 						</div>
 					</div>
 					<div class="name">
@@ -319,7 +324,8 @@
 						</div>
 						<div class="inname">子项目经理:</div>
 						<div class="in">
-							<a-input v-model:value="value7" placeholder="自动带出 可编辑" style="border-radius: 8px; height: 40px" />
+							<a-select v-model:value="value8" mode="multiple" @change="classificationChange3" :options="classifyList3"
+								placeholder="自动带出 可编辑" style="border-radius: 8px; height: 40px" />
 						</div>
 					</div>
 					<div class="name">
@@ -327,13 +333,14 @@
 							<img style="width: 10px; height: 10px" src="../../assets/images/basicinfo/asterisk.png" />
 						</div>
 						<div class="inname">资源归属:</div>
-						<div class="in">
+						<div class="in select">
-							<a-input v-model:value="value8" style="border-radius: 8px; height: 40px" />
+							<a-select v-model:value="value9" @change="classificationChange4" :options="classifyList4"
+								placeholder="请选择资源归属" style="border-radius: 8px; height: 40px" />
 						</div>
 					</div>
 					<div class="pubtn">
 						<a-button class="pubtn1" @click="closeModal3">取消</a-button>
-						<a-button class="pubtn2" @click="closeModal3">确定</a-button>
+						<a-button class="pubtn2" @click="createChildsProject">确定</a-button>
 					</div>
 				</div>
 			</a-modal>
@@ -478,6 +485,7 @@
 <script>
 import { reactive, toRefs, onMounted, ref } from "vue";
 import { message } from 'ant-design-vue';
+import { useRouter } from "vue-router";
 import ProjOwnerShip from "../../components/drawers/ProjectOwn";
 import ProjPowerList from "../../components/drawers/ProjPowerList";
 import ProjCheckShip from "../../components/drawers/ProjCheckPower";
@@ -535,8 +543,95 @@ export default {
 			ProjPvisible: false,
 			ProjCheckvisible: false,
 			ProjManagevisible: false,
+
+			currentProjectId: '',
+			currentProjectName: '',
+
 		});
 		// 数据接入 - start -
+		const router = useRouter();
+		// 搜索数据
+		const sProjectName = ref('');
+		const sProjectOrder = ref('');
+		const sProjectState = ref('');
+		const sProjectTime = ref('');
+
+		const sProjectStateList = ref([
+			{ value: 0, label: '草稿' },
+			{ value: 1, label: '进行中' },
+			{ value: 2, label: '未开始' },
+			{ value: 3, label: '已结束' },
+		]);
+
+		let name = '';
+		const sProjectNameChange = (key) => {
+			console.log('项目名称', key.target.value)
+			name = key.target.value
+		}
+		let managerid = '';
+		const sProjectOrderChange = (key) => {
+			console.log('项目经理', key.target.value)
+			managerid = key.target.value;
+		}
+		let status = '';
+		const sProjectStateChange = (key) => {
+			console.log('项目状态', key)
+			status = key;
+		}
+
+		let beginTime = '';
+		let endTime = '';
+		const sProjectTimeChange = (key, value) => {
+			console.log('项目时间', key)
+			console.log('项目时间', value)
+			console.log(new Date('2019-10-08 18:22:37').getTime())
+			beginTime = Math.ceil(new Date(value + ' ' + '00:00:00').getTime() / 1000);
+			endTime = Math.ceil(new Date(value + ' ' + '23:59:59').getTime() / 1000);
+		}
+
+		const searchReset = () => {
+			sProjectName.value = "";
+			sProjectOrder.value = "";
+			sProjectState.value = null;
+			sProjectTime.value = null;
+			name = "";
+			beginTime = "";
+			endTime = "";
+			status = null;
+			managerid = "";
+			getTableDate();
+		}
+
+		const searchSubmit = () => {
+			const obj = {
+				pageNo: 1,
+				pageSize: 10,
+				beginTime: beginTime,
+				endTime: endTime,
+				status: status,
+				name: name,
+				manager: managerid
+			}
+			let searchList = [];
+			for (let i in obj) {
+				if (obj[i] !== "") {
+					if (obj[i] !== null) {
+						searchList.push(1);
+					} else {
+						searchList.push(0);
+					}
+				} else {
+					searchList.push(0);
+				}
+			}
+			if (searchList.toString().indexOf("1") == -1) {
+				message.destroy();
+				message.warning("请输入搜索条件后进行搜索");
+			}
+			console.log('搜索的数据筛选条件', obj, searchList.toString())
+
+			getTableDate(obj);
+		}
 
 		// 项目分类
 		const classifyList = ref([
@@ -552,10 +647,22 @@ export default {
 		]);
 
 		const value1 = ref("");
-		const value2 = ref("");
+		const value2 = ref([]);
-		const value3 = ref("");
+		const value3 = ref([]);
 		const value4 = ref("");
-		const value5 = ref("");
+		const value5 = ref([]);
+
+		const classifyList5 = ref([
+			{ value: 1, label: '项目一' },
+			{ value: 2, label: '项目二' },
+			{ value: 3, label: '项目三' },
+		]);
+
+		let sourceBelongId = '';
+		const classificationChange5 = (key) => {
+			console.log(`selected ${key}`);
+			sourceBelongId = key;
+		}
 
 		let type = "";
 		const classificationChange = (key) => {
@@ -568,10 +675,21 @@ export default {
 		let managerId = "";
 
 		const classificationChange1 = (key) => {
-			console.log(`selected ${key}`);
+			console.log(`selected ${key}`, classifyList1);
-			console.log(classifyList1.value[key - 1].label);
+			let mstr = '';
-			manager = classifyList1.value[key - 1].label;
+			let midstr = '';
-			managerId = key;
+			for (let i = 0; i < key.length; i++) {
+				if (key.length - 1 !== i) {
+					midstr += key[i] + ',';
+					mstr += classifyList1.value[i].label + ',';
+				} else {
+					midstr += key[i];
+					mstr += classifyList1.value[i].label;
+				}
+			}
+			console.log(mstr, midstr)
+			manager = mstr;
+			managerId = midstr;
 		};
 
 		// 创建多层项目
@@ -590,7 +708,7 @@ export default {
 				category: type,
 				manager: manager,
 				managerId: managerId,
-				sourceBelongId: 2,
+				sourceBelongId: sourceBelongId,
 			};
 			console.log('创建多层项目提交的数据格式', obj);
 			for (let i in errorMsgs) {
@@ -606,12 +724,153 @@ export default {
 				console.log(res)
 				if (res.status == 200 && res.data.code == 200) {
 					// 创建成功 隐藏弹出框
+					value1.value = "";
+					type = "";
+					manager = "";
+					managerId = "";
+					sourceBelongId = "";
+					value2.value = [];
+					value3.value = [];
+					value4.value = "";
+					value5.value = [];
 					state.doublepro = false;
 				}
 			}).catch(err => {
 				console.log(err)
 			})
 		};
+		// 取消按钮 清空输入的数据
+		const closeModal2 = () => {
+			value1.value = "";
+			type = "";
+			manager = "";
+			managerId = "";
+			sourceBelongId = "";
+			value2.value = [];
+			value3.value = [];
+			value4.value = "";
+			value5.value = [];
+			state.doublepro = false;
+		};
+
+		// 创建单层子项目 (需要传入多层项目的ProjectID)
+		const createChildProject = () => {
+			console.log(state.currentProjectId)
+			router.push({
+				path: '/sonproject',
+				query: { projectId: state.currentProjectId, name: state.currentProjectName }
+			});
+		}
+
+		// 创建多层子项目
+		const value6 = ref("");
+		const value7 = ref([]);
+		const value8 = ref([]);
+		const value9 = ref([]);
+
+		const classifyList2 = ref([
+			{ value: 1, label: '管理者' },
+			{ value: 2, label: '领军者' },
+			{ value: 3, label: '产业人' },
+		]);
+
+		let categoryT = '';
+		const classificationChange2 = (key) => {
+			console.log(`selected ${key}`);
+			categoryT = key;
+		};
+
+		const classifyList3 = ref([
+			{ value: 1, label: '李俊国' },
+			{ value: 2, label: '将小米' },
+			{ value: 3, label: '刘孟君' },
+		]);
+
+		let managerT = '';
+		let managerIdT = '';
+		const classificationChange3 = (key) => {
+			console.log(`selected ${key}`);
+			console.log(`selected ${key}`, classifyList3);
+			let mstr = '';
+			let midstr = '';
+			for (let i = 0; i < key.length; i++) {
+				if (key.length - 1 !== i) {
+					midstr += key[i] + ',';
+					mstr += classifyList3.value[i].label + ',';
+				} else {
+					midstr += key[i];
+					mstr += classifyList3.value[i].label;
+				}
+			}
+			console.log(mstr, midstr)
+			managerT = mstr;
+			managerIdT = midstr;
+		};
+
+		const classifyList4 = ref([
+			{ value: 1, label: '项目一' },
+			{ value: 2, label: '项目二' },
+			{ value: 3, label: '项目三' },
+		]);
+
+		let sourceBelongIdT = '';
+		const classificationChange4 = (key) => {
+			console.log(`selected ${key}`);
+			sourceBelongIdT = key;
+		};
+
+		// 取消按钮 清空数据
+		const closeModal3 = () => {
+			value6.value = "";
+			categoryT = "";
+			managerT = "";
+			managerIdT = "";
+			sourceBelongIdT = "";
+			value7.value = [];
+			value8.value = [];
+			value9.value = [];
+			state.doublesonpro = false;
+		};
+
+		const createChildsProject = () => {
+
+			const errorMsgs = {
+				"name": "请输入子项目名称",
+				"category": "请选择子项目分类",
+				"manager": "请选择子项目经理",
+				"sourceBelongId": "请选择资源归属"
+			}
+
+			let obj = {
+				name: value6.value,
+				type: 2,
+				category: categoryT,
+				manager: managerT,
+				managerId: managerIdT,
+				sourceBelongId: sourceBelongIdT,
+			};
+
+			console.log('创建多层子项目提交的数据格式', obj);
+			for (let i in errorMsgs) {
+				console.log(obj[i])
+				if (obj[i] === "" || obj[i] === undefined) {
+					message.destroy()
+					message.warning(errorMsgs[i])
+					return
+				}
+			}
+
+			value6.value = "";
+			categoryT = "";
+			managerT = "";
+			managerIdT = "";
+			sourceBelongIdT = "";
+			value7.value = [];
+			value8.value = [];
+			value9.value = [];
+			state.doublesonpro = false;
+		}
+
 
 		// 数据接入 - end -
 
@@ -660,6 +919,20 @@ export default {
 				key: "status",
 				width: 100,
 				align: "center",
+				customRender: (value) => {
+					return (
+						<div>
+							{
+								value.record.status == 0 ?
+									"草稿" :
+									value.record.status == 1 ?
+										"进行中" :
+										value.record.status == 2 ?
+											"未开始" : "已结束"
+							}
+						</div>
+					)
+				}
 			},
 			{
 				title: "创建人",
@@ -745,6 +1018,8 @@ export default {
 									class="operation3"
 									style="cursor: pointer"
 									onClick={() => {
+										state.currentProjectId = value.record.projectId;
+										state.currentProjectName = value.record.name;
 										state.sonproject = true;
 									}}
 								>
@@ -2892,17 +3167,12 @@ export default {
 			state.doublepro = true;
 			state.estabish = false;
 		};
-		const closeModal2 = () => {
+
-			state.doublepro = false;
-		};
 
 		const showModal3 = () => {
 			state.doublesonpro = true;
 			state.sonproject = false;
 		};
-		const closeModal3 = () => {
-			state.doublesonpro = false;
-		};
 		const showCopyModal = () => {
 			state.copyModal = true;
 		};
@@ -2981,14 +3251,40 @@ export default {
 			createStoreyProject,
 			classifyList,
 			classifyList1,
+			classifyList2,
+			classifyList3,
+			classifyList4,
+			classifyList5,
 			classificationChange,
 			classificationChange1,
+			classificationChange2,
+			classificationChange3,
+			classificationChange4,
+			classificationChange5,
 			changePagination,
 			value1,
 			value2,
 			value3,
 			value4,
 			value5,
+			value6,
+			value7,
+			value8,
+			value9,
+
+			sProjectName,
+			sProjectOrder,
+			sProjectState,
+			sProjectTime,
+			sProjectStateList,
+			sProjectNameChange,
+			sProjectOrderChange,
+			sProjectStateChange,
+			sProjectTimeChange,
+			searchReset,
+			searchSubmit,
+			createChildProject,
+			createChildsProject
 		};
 	},
 };

src/views/projectcenter/SonProject.vue

@@ -4,124 +4,115 @@
 		<div class="header">
 			<span class="title">创建/编辑单层子项目</span>
 			<router-link to="/projectmanage" class="goback">
-        <span class="return"></span
+				<span class="return"></span><span class="returntext">返回</span>
-        ><span class="returntext">返回</span></router-link
+			</router-link>
-      >
 		</div>
 		<div class="content">
 			<div class="main">
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">项目归属</div>
 					</div>
 					<div class="in">
-            <div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0</div>
+						<div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">{{ projectAscription }}</div>
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">子项目名称</div>
 					</div>
 					<div class="in">
-            <div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0-band</div>
+						<a-input v-model:value="projectName" placeholder="请输入子项目名称" show-count :maxlength="30" />
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">分类</div>
 					</div>
 					<div class="in select">
-            <a-select
+						<a-select :getPopupContainer="
-              :value="classifySelect"
+							(triggerNode) => {
-              placeholder="四个养成"
+								return triggerNode.parentNode || document.body;
-              style="width: 100%"
+							}
-              :options="classifyList"
+						" v-model:value="classifySelect" placeholder="四个养成" style="width: 100%" :options="classifyList"
-              allowClear
+							@change="classificationChange" allowClear showSearch>
-              showSearch
+						</a-select>
-            ></a-select>
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">封面图</div>
 					</div>
-          <div
+					<div class="box" style="
-            class="box"
-            style="
               width: 100px;
               height: 100px;
               border: 1px solid rgba(78, 166, 255, 1);
               border-radius: 5px;
               cursor: pointer;
-            "
+              position: relative;
-          >
+              overflow: hidden;
+            ">
+						<a-upload v-model:file-list="fileList" name="file" list-type="picture-card" class="avatar-uploader"
+							:show-upload-list="false" action="/api/file/upload" :before-upload="beforeUpload" @change="handleChange">
+							<img style="
+                  width: 100px;
+                  height: 100px;
+                  margin-bottom: 4px;
+                  margin-right: 4px;
+                " v-if="imageUrl" :src="imageUrl" alt="avatar" />
+							<div v-else>
+								<!-- <loading-outlined v-if="loading"></loading-outlined> -->
+								<!-- <plus-outlined v-else></plus-outlined> -->
 								<div class="box1"></div>
 								<div class="box2"></div>
+								<!-- <div class="ant-upload-text"></div> -->
+							</div>
+						</a-upload>
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
+						<div class="inname">子项目时间</div>
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">项目时间</div>
 					</div>
 
 					<div class="in">
-            <a-range-picker
+						<a-range-picker separator="至" :placeholder="['      开始时间', '        结束时间']"
-              separator="至"
+							style="width: 100%; height: 40px; border-radius: 5px" show-time @change="onRangeChange" />
-              style="width: 100%; height: 40px; border-radius: 5px"
-              show-time
-            />
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
+						<div class="inname">子项目经理</div>
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
-            <div class="inname">项目经理</div>
 					</div>
-          <div class="in select">
+					<div class="in">
-            <a-select
+						<a-select :getPopupContainer="
-              :value="classifySelect"
+							(triggerNode) => {
-              placeholder="请选择项目经理"
+								return triggerNode.parentNode || document.body;
-              style="width: 100%"
+							}
-              :options="classifyList"
+						" :value="classifySelect1" mode="multiple" placeholder="请选择子项目经理" style="width: 100%" :options="classifyList1"
-              allowClear
+							@change="classificationChange1" allowClear showSearch>
-              showSearch
+						</a-select>
-            ></a-select>
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">资源归属</div>
 					</div>
 
-          <div class="in">
+					<div class="in select">
-            <a-input v-model:value="valueE" placeholder="自动带出 可修改" />
+						<a-select :getPopupContainer="
+							(triggerNode) => {
+								return triggerNode.parentNode || document.body;
+							}
+						" v-model:value="classifySelect2" placeholder="自动带出 可修改" :options="classifyList2"
+							@change="classificationChange2" />
 					</div>
 				</div>
 				<div class="name name2">
@@ -129,12 +120,7 @@
 						<div class="inname" style="margin-top: 13px">项目说明</div>
 					</div>
 					<div class="in">
-            <a-textarea
+						<a-textarea v-model:value="remark" style="height: 80px" placeholder="请输入说明" show-count :maxlength="200" />
-              v-model:value="valuei"
-              style="height: 80px"
-              placeholder="请输入项目说明"
-              show-count :maxlength="200"
-            />
 					</div>
 				</div>
 				<div class="name name2">
@@ -142,84 +128,70 @@
 						<div class="inname">同步学习记录</div>
 					</div>
 					<div class="in">
-            <a-radio v-model:checked="checked"
+						<a-radio @click="changeChecked" v-model:checked="checked"><span style="
-              ><span
-                style="
                   width: 100%;
                   color: rgba(109, 117, 132, 1);
                   font-size: 14px;
-                "
+                ">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
-                >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
-              ></a-radio
-            >
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">项目级别</div>
 					</div>
-          <div class="in">
+					<div class="in select">
-            <a-input
+						<a-select :getPopupContainer="
-              v-model:value="valueE"
+							(triggerNode) => {
-              placeholder="集团级/组织级/现地级/部门级"
+								return triggerNode.parentNode || document.body;
-            />
+							}
+						" v-model:value="classifySelect3" :options="classifyList3" @change="classificationChange3"
+							placeholder="集团级/组织级/现地级/部门级" />
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">培训体系</div>
 					</div>
-          <div class="in">
+					<div class="in select">
-            <a-input
+						<a-select :getPopupContainer="
-              v-model:value="valueE"
+							(triggerNode) => {
-              placeholder="集团级/组织级/现地级/部门级"
+								return triggerNode.parentNode || document.body;
-            />
+							}
+						" v-model:value="classifySelect4" :options="classifyList4" @change="classificationChange4"
+							placeholder="集团级/组织级/现地级/部门级" />
 					</div>
 				</div>
 				<div class="name">
 					<div class="namebox">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">是否BOEU实施</div>
 					</div>
 					<div class="in">
-            <a-radio v-model:checked="checked"
+						<a-radio @click="changeChecked1" v-model:checked="checked1"><span style="
-              ><span
-                style="
                   width: 100%;
                   color: rgba(109, 117, 132, 1);
                   font-size: 14px;
-                "
+                ">BOEU实施</span></a-radio>
-                >BOEU实施</span
-              ></a-radio
-            >
 					</div>
 				</div>
 				<div class="name name2">
 					<div class="namebox" style="margin-top: 8px">
-            <img
+						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
-              class="nameimg"
-              src="../../assets/images/basicinfo/asterisk.png"
-            />
 						<div class="inname">附件</div>
 					</div>
 					<div class="filebox">
-            <div style="cursor: pointer">
+						<div>
-              <img
+							<img v-if="fileList1.length < 6" class="fileimg" src="../../assets/images/projectadd/enclosure.png" />
-                class="fileimg"
+							<a-upload :disabled="fileList1.length > 5" :before-upload="beforeUpload1" v-model:file-list="fileList1"
-                src="../../assets/images/projectadd/enclosure.png"
+								@remove="removeFile" name="file" action="/api/file/upload" :headers="headers" @change="handleChange1">
-              />
+								<!-- <a-button> -->
-              <span class="filetext">上传附件</span>
+								<!-- <upload-outlined></upload-outlined> -->
+								<span v-if="fileList1.length > 5" class="filetext">上传数量已经达到最大值</span>
+								<span v-else class="filetext">上传附件</span>
+								<!-- </a-button> -->
+							</a-upload>
 						</div>
 						<div class="support">
 							支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
@@ -229,76 +201,381 @@
 			</div>
 			<div class="template">
 				<div class="name">
-          <div class="inname" style="width: 50px">模板</div>
+					<div class="inname" style="width: 50px">模版</div>
 					<div class="in select" style="margin-left: 2px">
-            <a-select
+						<a-select :getPopupContainer="
-              v-model:value="value1"
+							(triggerNode) => {
-              placeholder="请选择模板"
+								return triggerNode.parentNode || document.body;
-              :size="size"
+							}
-              style="width: 100%"
+						" v-model:value="classifySelect5" placeholder="请选择模版" :size="size" style="width: 100%" :options="classifyList5"
-              :options="options"
+							@change="classificationChange5">
-            ></a-select>
+						</a-select>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="footer">
 			<div class="btn">
-        <a-button
+				<a-button v-on:click="createProject" type="primary" class="btn1">确定</a-button>
-          type="primary"
+				<a-button class="btn2">取消</a-button>
-          style="width: 100px; height: 40px; border-radius: 8px"
-          >确认</a-button
-        >
-        <a-button
-          type="primary"
-          ghost
-          style="
-            width: 100px;
-            height: 40px;
-            margin-left: 14px;
-            border-radius: 8px;
-          "
-          >取消</a-button
-        >
 			</div>
 		</div>
 	</div>
 </template>
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, ref } from "vue";
+import { message } from 'ant-design-vue';
+import { useRouter, useRoute } from "vue-router";
+import * as api from "../../api/index";
+
 export default {
 	name: "sonProject",
 	setup() {
+		const router = useRouter();
+		const routers = useRoute();
 		const state = reactive({
-      classifyList: [
-        {
-          id: 1,
-          name: "分类一",
-          label: "分类一",
-        },
-        {
-          id: 2,
-          name: "分类二",
-          label: "分类二",
-        },
-        {
-          id: 3,
-          name: "分类三",
-          label: "分类三",
-        },
-        {
-          id: 4,
-          name: "分类四",
-          label: "分类四",
-        },
-      ],
 			classifySelect: null,
 			classifySelectId: null,
+			checked: false,
+			checked1: false,
+			valueE: null,
+			valueE1: null,
+			valueE2: null,
+
+			projectAscription:'',
 		});
+
+		const projectName = ref('');
+
+		state.projectAscription = routers.query.name;
+
+		const classifyList = ref([
+			{ value: 1, label: '管理者' },
+			{ value: 2, label: '领军者' },
+			{ value: 3, label: '产业人' },
+		]);
+
+		let projectType = "";
+
+		const classificationChange = (value) => {
+			console.log(`selected ${value}`);
+			projectType = value;
+		};
+
+		function getBase64(img, callback) {
+			const reader = new FileReader();
+			reader.addEventListener('load', () => callback(reader.result));
+			reader.readAsDataURL(img);
+		}
+
+		const fileList = ref([]);
+		const fileList1 = ref([]);
+		const loading = ref(false);
+		const imageUrl = ref('');
+		let picUrl = '';
+
+		const handleChange = (info) => {
+			if (info.file.status === 'uploading') {
+				loading.value = true;
+				return;
+			}
+			if (info.file.status === 'done') {
+				console.log('上传图片返回的信息 %o', info)
+				picUrl = info.file.response.data;
+				// Get this url from response in real world.
+				getBase64(info.file.originFileObj, (base64Url) => {
+					imageUrl.value = base64Url;
+					loading.value = false;
+				});
+			}
+			if (info.file.status === 'error') {
+				loading.value = false;
+				message.error('upload error');
+			}
+		};
+
+		let uplodaFileCount = false;
+
+		let attach = "";
+		let attachData = "";
+		const handleChange1 = (info) => {
+			if (info.file.status === 'uploading') {
+				loading.value = true;
+				return;
+			}
+			if (info.file.status === 'done') {
+				console.log('上传附件返回的信息 %o', info, info.fileList.length, uplodaFileCount)
+
+				let attachStr = "";
+				attachData = info.fileList;
+				for (let i = 0; i < attachData.length; i++) {
+					if (attachData.length - 1 == i) {
+						attachStr += attachData[i].response.data;
+					} else {
+						attachStr += attachData[i].response.data + ',';
+					}
+				}
+				console.log(attachStr)
+				attach = attachStr;
+
+				if (info.fileList.length > 5) {
+					uplodaFileCount = true;
+				} else {
+					uplodaFileCount = false;
+				}
+			}
+			if (info.file.status === 'error') {
+				loading.value = false;
+				message.error('upload error');
+			}
+		};
+
+		const beforeUpload = (file) => {
+			const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+			if (!isJpgOrPng) {
+				message.error('You can only upload JPG file!');
+			}
+			const isLt2M = file.size / 1024 / 1024 < 1;
+			if (!isLt2M) {
+				message.error('Image must smaller than 1MB!');
+			}
+			return isJpgOrPng && isLt2M;
+		};
+
+		const beforeUpload1 = () => {
+			return new Promise((resovle, reject) => {
+				if (uplodaFileCount) {
+					message.info("上传文件数量已达最大数量")
+					return reject(false);
+				}
+				return resovle(true);
+			})
+		};
+
+		let beginTime = "";
+		let endTime = "";
+		const onRangeChange = (value, dateString) => {
+			console.log('Selected Time: ', value);
+			// 项目时间选择函数
+			console.log('Formatted Selected Time: ', dateString);
+			console.log('Formatted Selected TimeStamp', new Date(dateString[0]).getTime())
+			beginTime = new Date(dateString[0]).getTime() / 1000;
+			endTime = new Date(dateString[1]).getTime() / 1000;
+		};
+
+
+		// 项目经理 后续接口调用
+		const classifyList1 = ref([
+			{ value: 1, label: '李俊国' },
+			{ value: 2, label: '将小米' },
+			{ value: 3, label: '刘孟君' },
+		]);
+
+		let manager = "";
+		let managerId = "";
+		const classificationChange1 = (key) => {
+			console.log(`selected ${key}`, classifyList1);
+			let mstr = '';
+			let midstr = '';
+			for (let i = 0; i < key.length; i++) {
+				if (key.length - 1 !== i) {
+					midstr += key[i] + ',';
+					mstr += classifyList1.value[i].label + ',';
+				} else {
+					midstr += key[i];
+					mstr += classifyList1.value[i].label;
+				}
+			}
+			console.log(mstr, midstr)
+			manager = mstr;
+			managerId = midstr;
+		};
+
+		// 资源归属 sourceBelongId 后续给接口
+		const classifyList2 = ref([
+			{ value: 1, label: '项目一' },
+			{ value: 2, label: '项目二' },
+			{ value: 3, label: '项目三' },
+		]);
+
+		const classificationChange2 = (key) => {
+			console.log(`selected ${key}`, classifyList2);
+		}
+
+		// 项目级别
+		const classifyList3 = ref([
+			{ value: 1, label: '集团级' },
+			{ value: 2, label: '组织级' },
+			{ value: 3, label: '现地级' },
+			{ value: 4, label: '部门级' },
+		]);
+		const classificationChange3 = (key) => {
+			console.log(`selected ${key}`, classifyList3);
+		}
+
+		// 培训体系
+		const classifyList4 = ref([
+			{ value: 1, label: '集团级' },
+			{ value: 2, label: '组织级' },
+			{ value: 3, label: '现地级' },
+			{ value: 4, label: '部门级' },
+		]);
+		const classificationChange4 = (key) => {
+			console.log(`selected ${key}`, classifyList4);
+		}
+
+		// 模版
+		const classifyList5 = ref([
+			{ value: 1, label: '模版一' },
+			{ value: 2, label: '模版二' },
+			{ value: 3, label: '模版三' },
+			{ value: 4, label: '模版四' },
+		]);
+		const classificationChange5 = (key) => {
+			console.log(`selected ${key}`, classifyList5);
+		}
+
+		// 项目说明
+		const remark = ref('');
+
+		let courseSyncFlag = 0;
+		const changeChecked = () => {
+			console.log(state.checked)
+			state.checked ? state.checked = false : state.checked = true;
+			courseSyncFlag = state.checked ? 1 : 0;
+		}
+
+		let boeFlag = 0;
+		const changeChecked1 = () => {
+			console.log(state.checked1)
+			state.checked1 ? state.checked1 = false : state.checked1 = true;
+			boeFlag = state.checked1 ? 1 : 0;
+		}
+
+		const removeFile = (file) => {
+			const index = fileList1.value.indexOf(file);
+			const newFileList = fileList1.value.slice();
+			newFileList.splice(index, 1);
+			fileList1.value = newFileList;
+
+			let attachStr = "";
+			if (newFileList.length == 0) {
+				attachStr = "";
+			}
+			for (let i = 0; i < fileList1["value"].length; i++) {
+				console.log(fileList1["value"][i].response.data)
+				if (fileList1["value"].length - 1 == i) {
+					attachStr += fileList1["value"][i].response.data;
+				} else {
+					attachStr += fileList1["value"][i].response.data + ',';
+				}
+			}
+			attach = attachStr;
+		}
+
+
+		const errorMsgs = {
+			"name": "请输入项目名称",
+			"category": "请选择项目分类",
+			"picUrl": "请上传项目封面图",
+			"beginTime": "请选择项目开始时间",
+			"endTime": "请选择项目结束时间",
+			"manager": "请选择项目经理",
+			"managerId": "请选择项目经理",
+			"sourceBelongId": "请选择资源归属",
+			"level": "请填写项目级别",
+			"systemId": "请填写项目培训体系",
+			"boeFlag": "请选择是否BOE实施",
+			"attach": "请上传附件"
+		}
+
+		const createProject = () => {
+			let obj = {
+				"name": projectName["value"],
+				"category": projectType,
+				"picUrl": picUrl,
+				"beginTime": beginTime,
+				"endTime": endTime,
+				"manager": manager,
+				"managerId": managerId,
+				"sourceBelongId": 11,
+				"remark": remark["value"],
+				"courseSyncFlag": courseSyncFlag,
+				"level": 3,
+				"systemId": 4,
+				"boeFlag": boeFlag,
+				"attach": attach,
+				"type": 3,
+				"templateId": 10,
+				"parentId": routers.query.projectId,
+				"notice": "",
+				"noticeFlag": 0,
+				"status": 0
+			}
+			console.log('提交的数据格式 %o', obj)
+			for (let i in errorMsgs) {
+				console.log(obj[i])
+				if (obj[i] === "" || obj[i] === undefined) {
+					message.destroy()
+					message.warning(errorMsgs[i])
+					return
+				}
+			}
+
+			api.createProject(obj).then(res => {
+				console.log(res)
+				if (res.status == 200 && res.data.code == 200) {
+					message.destroy();
+					message.success("创建成功")
+					setTimeout(() => {
+						router.push({
+							path: '/taskpage',
+							query: { id: res.data.data.projectId }
+						});
+					}, 1000);
+				} else {
+					message.destroy();
+					message.error("创建失败，请检查当前网络状态。")
+				}
+			}).catch(err => {
+				console.log(err)
+				message.destroy();
+				message.error("创建失败，请检查当前网络状态。")
+			})
+		};
+
 		return {
 			...toRefs(state),
+			projectName,
+			classifyList,
+			classificationChange,
+			classificationChange1,
+			classificationChange2,
+			classificationChange3,
+			classificationChange4,
+			classificationChange5,
+			fileList,
+			fileList1,
+			loading,
+			imageUrl,
+			handleChange,
+			handleChange1,
+			beforeUpload,
+			beforeUpload1,
+			onRangeChange,
+			classifyList1,
+			classifyList2,
+			classifyList3,
+			classifyList4,
+			classifyList5,
+			remark,
+			changeChecked,
+			changeChecked1,
+			uplodaFileCount,
+			createProject,
+			removeFile
 		};
-  },
+	}
 };
 </script>
 <style lang="scss">
@@ -313,6 +590,7 @@ export default {
 		width: 100%;
 		display: flex;
 		justify-content: space-between;
+
 		.title {
 			color: #000000;
 			font-size: 18px;
@@ -321,10 +599,12 @@ export default {
 			padding-left: 37px;
 			//font-weight: 500;
 		}
+
 		.goback {
 			padding-right: 70px;
 			//padding-top: 37px;
 			position: relative;
+
 			.return {
 				display: inline-block;
 				width: 42px;
@@ -333,6 +613,7 @@ export default {
 				margin-right: 10px;
 				background-image: url("../../assets/images/projectadd/return.png");
 			}
+
 			.returntext {
 				display: inline-block;
 				position: absolute;
@@ -342,8 +623,15 @@ export default {
 			}
 		}
 	}
+
+	// 修改 antd upload 样式
+	.ant-upload {
+		border-width: 0px;
+	}
+
 	.content {
 		display: flex;
+
 		.main {
 			width: 50%;
 			display: flex;
@@ -352,12 +640,14 @@ export default {
 			//justify-content: center;
 			float: left;
 			border-right: 1px solid rgba(153, 155, 163, 0.3);
+
 			.name {
 				width: 78%;
 				// background-color: lightcoral;
 				display: flex;
 				margin-top: 20px;
 				align-items: center;
+
 				//height: 40px;
 				// border: 1px solid black;
 				.namebox {
@@ -366,19 +656,23 @@ export default {
 					align-items: center;
 					justify-content: flex-end;
 					flex-shrink: 0;
+
 					.nameimg {
 						width: 10px;
 						height: 10px;
 					}
 				}
+
 				.d {
 					margin-top: 8px;
 					font-size: 25px;
 					color: #ff4e4e;
 				}
+
 				.box {
 					position: relative;
 					margin-left: 14px;
+
 					.box1 {
 						position: absolute;
 						left: 50%;
@@ -388,6 +682,7 @@ export default {
 						margin-top: -5px;
 						border-top: 2px solid rgba(78, 166, 255, 1);
 					}
+
 					.box2 {
 						position: absolute;
 						left: 50%;
@@ -398,31 +693,42 @@ export default {
 						border-left: 2px solid rgba(78, 166, 255, 1);
 					}
 				}
+
 				.inname {
 					color: #6f6f6f;
 					font-size: 14px;
 					margin-left: 7px;
 				}
+
 				.in {
 					margin-left: 14px;
 					flex: 1;
+
 					// .ant-radio-wrapper {
 					// }
 					.ant-input-textarea-show-count {
 						position: relative;
 						height: 88px;
 					}
+
 					.ant-input-textarea-show-count::after {
 						position: absolute;
 						right: 10px;
 						bottom: 0px;
 					}
+
 					.ant-input {
-            border-radius: 5px;
+						border-radius: 8px;
 						// height: 120%;
 						width: 100%;
 						height: 40px;
 					}
+
+					.ant-input-affix-wrapper {
+						padding: 0 11px;
+						border-radius: 8px;
+					}
+
 					.ant-select-selector {
 						border-radius: 5px;
 						// height: 120%;
@@ -430,33 +736,39 @@ export default {
 						height: 40px;
 					}
 				}
+
 				.filebox {
 					margin-left: 14px;
 					flex: 1;
+
 					.fileimg {
 						width: 15px;
 						height: 15px;
 						margin-right: 6px;
 					}
+
 					.filetext {
 						font-size: 14px;
 						font-weight: 400;
 						color: #4ea6ff;
 						line-height: 36px;
 					}
+
 					.support {
 						font-size: 14px;
 						font-weight: 400;
 						color: #999ba3;
 						line-height: 36px;
-            //margin-top: 8px;
+						margin-top: 8px;
 						word-break: break-all;
 					}
 				}
 			}
+
 			.name2 {
 				display: flex;
 				align-items: flex-start;
+
 				.ant-input-textarea {
 					.ant-input {
 						height: 88px;
@@ -464,6 +776,7 @@ export default {
 				}
 			}
 		}
+
 		.template {
 			width: 50%;
 			display: flex;
@@ -471,6 +784,7 @@ export default {
 			align-items: center;
 			//justify-content: center;
 			float: right;
+
 			.name {
 				width: 78%;
 				// background-color: lightcoral;
@@ -478,27 +792,32 @@ export default {
 				margin-top: 20px;
 				align-items: center;
 				height: 40px;
+
 				// border: 1px solid black;
 				.d {
 					margin-top: 8px;
 					font-size: 25px;
 					color: #ff4e4e;
 				}
+
 				.inname {
 					color: #6f6f6f;
 					font-size: 14px;
 					margin-left: 7px;
 					width: 65px;
 				}
+
 				.in {
 					margin-left: 14px;
 					width: 81%;
+
 					.ant-input {
 						border-radius: 5px;
 						// height: 120%;
 						width: 100%;
 						height: 40px;
 					}
+
 					.ant-select-selector {
 						border-radius: 5px;
 						// height: 120%;
@@ -509,15 +828,42 @@ export default {
 			}
 		}
 	}
+
 	.footer {
 		width: 100%;
 		margin-top: 31px;
 		margin-bottom: 14px;
 		padding-bottom: 20px;
+
 		.btn {
 			display: flex;
 			justify-content: center;
+
+			.btn1 {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 100px;
+				height: 40px;
+				border-radius: 8px;
+				background: #409eff;
+				color: #ffffff;
+				margin-right: 14px;
 			}
+
+			.btn2 {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 100px;
+				height: 40px;
+				border-radius: 8px;
+				border: 1px solid #409eff;
+				background: #ffffff;
+				color: #409eff;
+			}
+		}
+
 		.text {
 			color: rgba(153, 155, 163, 1);
 			font-size: 14px;
@@ -526,3 +872,4 @@ export default {
 	}
 }
 </style>
+