任务抽屉样式修改

src/components/drawers/AddInvist.vue

@@ -18,51 +18,38 @@
         />
       </div>
       <div class="contentMain">
+      <div class="main">
         <div class="main_left">
+          <div class="main_notice">
+          <div class="mntc_left">
+            <div class="notice_icon"></div>
+           <div v-if="assessment==null"> 
+            <span class="title">已选择 <span class ="data">0</span> 条</span>
+           </div>
+           <div v-else> 
+            <span class="title">已选择 <span class ="data">1</span> 条;</span>
+            <span class="title">名称： <span class ="data">{{assessment.name}}</span> </span>
+            <span class="title">题数： <span class ="data">{{assessment.num}}</span> </span>
+            <span class="title">创建人： <span class ="data">{{assessment.creator}}</span> </span>
+            <span class="title">创建时间： <span class ="data">{{assessment.time}}</span> </span>
+           </div>
+          </div>
+           
+          </div>
           <div class="main_item">
             <div class="fi_input">
-              <a-input
-                v-model:value="inputV1"
-                style="width: 424px; height: 40px"
-                placeholder="请输入评估名称"
-                maxlength="20"
-              />
-            </div>
-            <div class="btns" @click="getAllInvistText">
+        
+            <div class="btns" @click="checkAssDrawer">
               <div class="search"></div>
-              <div class="btnText">搜索</div>
+              <div class="btnText">选择评估</div>
+              <div class="main_item2">
+              <AssessmentList 
+              v-model:assessmentVisible="assessmentVisible"
+              @checkedAss="getCheckedAss"/>
             </div>
-            <div class="btnsn" @click="resetInvist">
-              <div class="search"></div>
-              <div class="btnText">重置</div>
-            </div>
-          </div>
-          <div class="main_item2">
-            <a-table
-              style="border: 1px solid #f2f6fe"
-              :columns="tableDataFunc()"
-              :data-source="tableData"
-              :loading="tableDataTotal === -1 ? true : false"
-              expandRowByClick="true"
-              @expand="expandTable"
-              :pagination="false"
-              :row-selection="rowSelection"
-              filterMultiple:false
-            />
-
-            <div class="pa">
-              <a-pagination
-                showSizeChanger="true"
-                showQuickJumper="true"
-                hideOnSinglePage="true"
-                :pageSize="pageSize"
-                :current="currentPage"
-                :total="tableDataTotal"
-                class="pagination"
-                @change="handelChangePage"
-              />
             </div>
           </div>
+         
         </div>
       </div>
       <div class="main_btns">
@@ -70,19 +57,21 @@
         <button class="btn2" @click="updateTask">确定</button>
       </div>
     </div>
+  </div>
+  </div>
   </a-drawer>
 </template>
 <script>
-import { reactive, toRefs, onMounted } from "vue";
-import * as api from "../../api/indexInvist.js";
+import { reactive, toRefs} from "vue";
 import * as apiTask from "../../api/indexTaskadd";
 import { message } from "ant-design-vue";
-import dayjs from "dayjs";
+import AssessmentList from "./ AssessmentList.vue";
 import { RouterEditTask } from "@/api/indexTask";
 export default {
   name: "AddInvist",
-  // components: {
-  // },
+  components: {
+    AssessmentList,
+  },
   props: {
     addinvistVisible: {
       type: Boolean,
@@ -134,118 +123,36 @@ export default {
       pageSize: 10,
       tableDataTotal: 0,
       tableData: [
-
       ],
       assessmentId:null,
       assessmentName:"",
-
-
+      assessment:null,
+      assessmentVisible:false,
      
     });
+    const getCheckedAss = (ass) =>{
+      state.assessment = ass
+      console.log("checed===",state.assessment);
+    }
     const closeDrawer = () => {
       ctx.emit("update:addinvistVisible", false);
       ctx.emit("update:edit", false);
       state.inputV1 = "";
     };
+    const checkAssDrawer =() =>{
+      state.assessmentVisible = true;
+    }
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
     };
-    const tableDataFunc = () => {
-      const columns = [
-        {
-          title: "名称",
-          dataIndex: "name",
-          // width: "30%",
-          key: "name",
-          width: "150px",
-          align: "left",
-          className: "classify",
-        },
-        {
-          title: "题数",
-          dataIndex: "num",
-          key: "num",
-          width: "80px",
-          align: "center",
-        },
-        {
-          title: "创建人",
-          dataIndex: "creator",
-          key: "creator",
-          width: "150px",
-          align: "center",
-        },
-        {
-          title: "创建时间",
-          dataIndex: "time",
-          key: "time",
-          width: "200px",
-          align: "center",
-        },
-      ];
-      return columns;
-    };
-    const rowSelection = {
-      type: "radio",
-      onSelect: (selectedRows, selected, selectedRowKeys) => {
-        console.log(
-          "selectedRowKeys",selectedRowKeys,"selectedRows",selectedRows, "selected",selected );
-        console.log(selectedRows.assessmentId);
-        state.assessmentId =selectedRows.assessmentId;
-        state.assessmentName = selectedRows.name;
-      },
-     
-    };
-    const handelChangePage = (page, pageSize) => {
-      state.currentPage = page;
-      state.pageSize = pageSize;
-      getAllInvistText();
-    };
-    const getTableDate = (tableData) => {
-      let data = tableData;
-      let array = [];
-      data.map((value, index) => {
-        let obj = {
-          key: index,
-          assessmentId:value.assessmentId,
-          num: value.essayQuestionVoList.length,
-          name: value.assessmentName ? value.assessmentName : "-",
-          creator: value.createUser ? value.createUser : "-",
-          time: dayjs(value.createTime).format("YYYY-MM-DD"),
-        };
-        array.push(obj);
-      });
-      state.tableData = array;
-    };
-    //获取全部评估信息接口
-    const getAllInvistText = () => {
-    
-      api
-        .queryAssessmentDetailList({
-        assessmentName:state.inputV1,
-        pageNo: state.currentPage,
-        pageSize: state.pageSize,
-      })
-        .then((res) => {
-          let arr = res.data.data.rows;
-          if (res.status === 200) {
-            // console.log("获取全部评估信息", res.data.data);
-            getTableDate(arr);
-            state.tableDataTotal = Number(res.data.data.total);
-          }
-        })
-        .catch((err) => {
-          console.log("获取全部评估信息接口失败", err);
-          // state.createLoading = false;
-        });
-    };
+
     const updateTask =()=>{
-      console.log("jinlaile=================",state.assessmentName)
+      console.log("jinlaile=================",state.assessment.assessmentName)
       if(props.isLevel){
         RouterEditTask({
               chapterId: props.isactive,
-              courseId: state.assessmentId,
-              name: state.assessmentName,
+              courseId: state.assessment.assessmentId,
+              name: state.assessment.assessmentName,
               routerId: props.routerId,
               routerTaskId: props.routerTaskId || 0,
               type: 11,
@@ -264,8 +171,8 @@ export default {
         console.log("=========projectTaskId",props.projectTaskId);
         apiTask
             .addTask({
-              courseId: state.assessmentId,
-              name: state.assessmentName,
+              courseId: state.assessment.assessmentId,
+              name: state.assessment.assessmentName,
               projectId: props.projectId,
               projectTaskId: props.projectTaskId || 0,
               stageId: props.chooseStageId,
@@ -282,25 +189,15 @@ export default {
       }
     }
  
-    //重置评估信息
-    const resetInvist = () => {
-      state.inputV1 = "";
-      getAllInvistText();
-    };
-    onMounted(() => {
-      // createInvist();
-      getAllInvistText();
-    });
+
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
-      tableDataFunc,
-      rowSelection,
-      getAllInvistText,
       updateTask,
-      resetInvist,
-      handelChangePage,
+      AssessmentList,
+      checkAssDrawer,
+      getCheckedAss,
     };
   },
 };
@@ -328,14 +225,18 @@ export default {
     .contentMain {
       display: flex;
       justify-content: space-between;
+      .main{
+        width:100%;
       .main_left {
         padding-right: 30px;
+        margin-top:32px;
         .main_item {
           display: flex;
           align-items: center;
-          margin-bottom: 32px;
+          margin-bottom: 64px;
           .fi_input {
             margin-right: 20px;
+         
           }
           .btns {
             margin-right: 20px;
@@ -391,19 +292,45 @@ export default {
             }
           }
         }
-        .main_item2 {
-          .pa {
-            width: 100%;
-            margin: 15px auto;
+        .main_notice {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 32px;
+          height: 40px;
+          background-color: #e9f6fe;
+          .mntc_left {
             display: flex;
-            justify-content: center;
+            align-items: center;
+            .title{
+              color: rgba(0, 0, 0, 0.65);
+               margin-right: 17px
+            }
+            .data{
+              color: #388be1
+            }
+            .notice_icon {
+              width: 14px;
+              height: 14px;
+              margin-right: 9px;
+              margin-left: 9px;
+              background-image: url(@/assets/images/coursewareManage/gan.png);
+              background-size: 100% 100%;
+            }
+          }
+          .mntc_right {
+            cursor: pointer;
           }
         }
+     
       }
+      }
+     
     }
     .main_btns {
       height: 72px;
       width: 100%;
+      margin-top: 180px;
       bottom: 0;
       left: 0;
       display: flex;