学习路径添加项目

src/components/drawers/AddProject.vue

@@ -1,46 +1,97 @@
 <template>
 
-<div class="draw" style="position: relative">
-          <a-drawer
-            v-model:visible="addprojvisible"
-            class="drawerStyle ProjectDrawer"
-            title="关联项目"
-            placement="right"
-            width="80%"
-            @after-visible-change="afterProjVisibleChange"
-          >
-            <div class="drawerMain">
-              <div class="header">
-                <div class="headerTitle">关联项目</div>
-                <img
-                  style="width: 29px; height: 29px; cursor: pointer"
-                  src="../../assets/images/basicinfo/close.png"
-                  @click="leaveProjDrawer"
+<a-drawer
+    :visible="addprojvisible"
+    class="drawerStyle addonlineDrawer"
+    width="80%"
+    title="添加在线"
+    placement="right"
+    @after-visible-change="afterVisibleChange"
+>
+  <div class="drawerMain">
+     <div class="header">
+        <div v-if="edit" class="headerTitle">编辑项目</div>
+        <div v-else class="headerTitle">添加项目</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="contentMain">
+        <div class="main_items">
+          <div class="mi_ipts">
+            <div class="mii_ipt">
+              <div class="ipt_name">项目名称：</div>
+              <div class="fi_input">
+                <a-input
+                  v-model:value="inputV1"
+                  style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入项目名称"
                 />
               </div>
-              <div class="drawerbox">
-                <a-table
-                  :columns="drawertableColumns()"
-                  :data-source="drawertableData"
-                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-                  :loading="tableDataTotal === -1 ? true : false"
-                  :scroll="{ x: 700 }"
-                  @expand="expandTable"
-                  :pagination="false"
-                >
-                </a-table>
-              </div>
-              <div class="btnn">
-                <button @click="leaveProjDrawer" class="btn1">取消</button>
-                <button @click="updateTask" class="btn2">确定</button>
+            </div>
+            <div class="mii_ipt">
+              <div class="ipt_name">项目经理：</div>
+              <div class="fi_input">
+                <a-input
+                  v-model:value="inputV2"
+                  style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入项目经理"
+                />
               </div>
             </div>
-          </a-drawer>
+            <div class="mii_ipt">
+              <div class="ipt_name">创建人：</div>
+              <div class="fi_input">
+                <a-input
+                  v-model:value="inputV3"
+                  style="width: 240px; height: 40px; border-radius: 8px"
+                  placeholder="请输入创建人"
+                />
+              </div>
+            </div>
+      
+          </div>
+          <div class="mi_btns">
+            <div class="btn btn1">
+              <div class="search"></div>
+              <div class="btnText" @click="searchProjectList()">搜索</div>
+            </div>
+            <div class="btn btn2" @click="resetProjectList()">
+              <div class="search"></div>
+              <div class="btnText">重置</div>
+            </div>
+          </div>
         </div>
+        <div class="">
+        <div class="drawerbox">
+          <a-table
+            :columns="tableDataFunc()"
+            :data-source="drawertableData"
+            :row-selection="rowSelection"
+            :loading="tableDataTotal === -1 ? true : false"
+            :scroll="{ x: 700 }"
+            @expand="expandTable"
+            :pagination="false"
+          >
+          </a-table>
+        </div>
+        </div>
+      </div>
+    <div class="main_btns">
+      <button @click="closeDrawer" class="btn1">取消</button>
+      <button @click="updateTaskList" class="btn2">确定</button>
+    </div>
+
+ </div>
+</a-drawer>
+
+  
 </template>
 <script>
-import { reactive, toRefs } from "vue";
-import * as api from "../../api/indexDiscuss";
+import { reactive, toRefs,ref } from "vue";
+
 import * as apiTask from "../../api/indexTaskadd";
 import { RouterEditTask } from "@/api/indexTask";
 import { message } from "ant-design-vue";
@@ -49,7 +100,7 @@ import dayjs from "dayjs";
 export default {
   name: "AddProject",
   props: {
-    adddiscussVisible: {
+    addprojvisible: {
       type: Boolean,
       default: false,
     },
@@ -98,11 +149,13 @@ export default {
     const state = reactive({
       inputV1: "",
       inputV2: "",
+      inputV3: "",
       textV1: "",
+      statu:0,
       checkedC1: false,
       discussSettings: "",
       addLoading: false,
-      drawertableData: [
+      tableData: [
         {
           key: 1,
           parentId:1,
@@ -147,12 +200,109 @@ export default {
         },
       ],
       selectedRowKeys: [],
+      selectedRows:[],
       currentPage: 1,
       tableDataTotal: 0,
       pageSize: 10,
+      //项目抽屉、列表参数
+      drawertableData: [
+        {
+          key: 1,
+          parentId:1,
+          name: '123',
+          manager:'afssfa',
+          children:[
+            {
+              key: 5,
+              parentId:1,
+              name: '123',
+              manager:'afssfa',
+            },
+          ]
+        },
+        {
+          key: 2,
+          parentId:2,
+          name: '123',
+          manager:'afssfa',
+          children:[
+            {
+              key: 7,
+              parentId:1,
+              name: '123',
+              manager:'afssfa',
+              children:[
+                {
+                  key: 9,
+                  parentId:1,
+                  name: '123',
+                  manager:'afssfa',
+                },
+              ]
+            },
+          ]
+        },
+        {
+          key: 3,
+          parentId:3,
+          name: '123',
+          manager:'afssfa',
+        },
+      ],
+      
     });
  
+    const tableDataFunc = () => {
+      const drawercolumns = [
+        {
+          title: "项目名称",
+          dataIndex: "name",
+          key: "projectName",
+          width: 200,
+          ellipsis: true,
+        },
+        {
+          title: "项目经理",
+          dataIndex: "manager",
+          key: "manager",
+          width: 100,
+          align: "center",
+        },
+        {
+          title: "创建人",
+          dataIndex: "creator",
+          key: "creater",
+          width: 100,
+          align: "center",
+        },
+        {
+          title: "创建时间",
+          dataIndex: "time",
+          key: "time",
+          width: 180,
+          align: "center",
+        },
+      ];
+      return drawercolumns;
+    };
+    const closeDrawer = () => {
+      ctx.emit("update:addprojvisible", false);
+      ctx.emit("update:edit", false);
+     
 
+    };
+    const rowSelection =()=> ref({
+      checkStrictly: false,
+      onChange: (selectedRowKeys, selectedRows) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+      },
+      onSelect: (record, selected, selectedRows) => {
+        console.log(record, selected, selectedRows);
+      },
+      onSelectAll: (selected, selectedRows, changeRows) => {
+        console.log(selected, selectedRows, changeRows);
+      },
+    });
     const start = () => {
       state.loading = true;
       // ajax request after empty completing
@@ -161,31 +311,31 @@ export default {
         state.selectedRowKeys = [];
       }, 1000);
     };
-    const onSelectChange = selectedRowKeys => {
+    const onSelectChange =(selectedRowKeys,selectedRows)  => {
       console.log('selectedRowKeys changed: ', selectedRowKeys);
       state.selectedRowKeys = selectedRowKeys;
+      this.selectedRows=selectedRows;
     };
-    const closeDrawer = () => {
-      ctx.emit("update:adddiscussVisible", false);
-      ctx.emit("update:edit", false);
-      state.inputV1 = "";
-      state.textV1 = "";
-      message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
-      localStorage.setItem("stageId", props.chooseStageId);
-      localStorage.setItem("chapterId", props.isactive);
-    };
+    const searchProjectList=()=>{
+      getAllProjText();
+    }
+    const resetProjectList=()=>{
+      state.inputV1="";
+      state.inputV2="";
+      state.inputV1="";
+      getAllProjText();
+    }
+
     //获取全部项目信息接口
     const getAllProjText = () => {
       apiProj
         .getProjectList({
-          "beginTime": 0,
-          "createName": "",
-          "endTime": "",
-          "manager": "",
-          "name": "",
-          "pageNo": 1,
-          "pageSize": 10,
-          "status": 0
+          "createName": state.inputV1,
+          "manager": state.inputV2,
+          "name":state.inputV3,
+          pageNo: state.currentPage,
+          pageSize: state.pageSize,
+          "status": state.status
         })
         .then((res) => {
           let arr = res.data.data.rows;
@@ -199,12 +349,17 @@ export default {
         });
     };
     const afterVisibleChange = (bool) => {
+      console.log("哈哈，我进来了")
       if (bool) {
         getAllProjText();
       }
     };
 
-    
+    const handelChangePage = (page, pageSize) => {
+      state.currentPage = page;
+      state.pageSize = pageSize;
+      getAllProjText();
+    };
     const getTableDate = (data) => {
       let array = []
       data.map((value)=>{
@@ -234,12 +389,17 @@ export default {
       return array
     };
  //项目抽屉用的
-
+    const updateTaskList =()=>{
+      //const resultArr = [];
+      state.selectedRows.forEach((item) => {
+        updateTask(item);
+      });
+    }
     const updateTask = (res) => {
       if (props.isLevel == 1) {
         RouterEditTask({
           chapterId: props.isactive,
-          courseId: res.data.data.discussId,
+          courseId: 0,
           name: res.data.data.discussName,
           routerId: props.routerId,
           routerTaskId: props.routerTaskId || 0,
@@ -265,50 +425,21 @@ export default {
         console.log("");
       }
     };
-    const updateDiscussInfo = () => {
-      if (!state.inputV1) {
-        message.destroy();
-        return message.warning("请输入讨论名称");
-      }
-      let obj = {
-        discussName: state.inputV1, //讨论名称
-        discussExplain: state.textV1, //讨论说明
-        discussSettings: state.discussSettings, //讨论设置
-        discussId: props.edit ? props.EditDiscussId : 0, //讨论Id
-        projectId: 0, //项目id,接口多余字段，
-      };
-      if (props.edit) {
-        api
-          .updateDiscuss(obj)
-          .then((res) => {
-            updateTask(res);
-            closeDrawer();
-            ctx.emit("changeData", false);
-          })
-          .catch(() => {
-          });
-      } else {
-        api
-          .createDiscuss(obj)
-          .then((res) => {
-            updateTask(res);
-            closeDrawer();
-            ctx.emit("changeData", false);
-          })
-          .catch(() => {
-          });
-      }
-    };
+
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
-      updateDiscussInfo,
       getTableDate,
       start,
       getAllProjText,
       onSelectChange,
-      
+      tableDataFunc,
+      updateTaskList,
+      searchProjectList,
+      resetProjectList,
+      handelChangePage,
+      rowSelection,
     
     };
   },