feat:表格数据优化 和 点击弹窗功能

src/views/courselibrary/CoursewareManage.vue

@@ -385,8 +385,8 @@
         :pagination="false"
       /> -->
       <a-table
-        :columns="columns5"
+        :columns="columns1"
-        :data-source="tableData"
+        :data-source="tableData1"
         :loading="tableDataTotal === -1 ? true : false"
         :scroll="{ x: 800 }"
         expandRowByClick="true"
@@ -457,7 +457,7 @@
                 </div>
                 <div class="bm_table" style="margin-bottom:20px;">
                     <a-table
-                        :columns="columns1"
+                        :columns="columns2"
                         :data-source="tableData2"
                         :loading="tableDataTotal === -1 ? true : false"
                         :pagination="false"
@@ -526,7 +526,7 @@
                 </div>
                 <div class="bm_table" style="margin-bottom:20px;">
                     <a-table
-                        :columns="columns1"
+                        :columns="columns2"
                         :data-source="tableData3"
                         :loading="tableDataTotal === -1 ? true : false"
                         :pagination="false"
@@ -554,7 +554,7 @@
             </div>
             <div class="ftsr_table">
                     <a-table
-                        :columns="columns2"
+                        :columns="columns4"
                         :data-source="tableData4"
                         :loading="tableDataTotal === -1 ? true : false"
                         :pagination="false"
@@ -599,7 +599,7 @@
             </div>
             <div class="gpm_table">
                 <a-table
-                    :columns="columns3"
+                    :columns="columns5"
                     :data-source="tableData5"
                     :loading="tableDataTotal === -1 ? true : false"
                     :pagination="{
@@ -676,7 +676,7 @@
             </div>
             <div class="stm_table">
               <a-table
-                :columns="columns4"
+                :columns="columns6"
                 :data-source="tableData6"
                 :loading="tableDataTotal === -1 ? true : false"
                 :scroll="{ x: 700, y: 800 }"
@@ -901,7 +901,7 @@
               </div>
               <div class="stmm_i6">
                 <a-table
-                  :columns="columns6"
+                  :columns="columns7"
                   :data-source="tableData7"
                   :loading="tableDataTotal === -1 ? true : false"
                   :scroll="{ x: 800 }"
@@ -945,169 +945,6 @@ function getBase64(img, callback) {
   reader.readAsDataURL(img);
 }
 const columns1 = [
-  {
-    title: "姓名",
-    dataIndex: "projectName",
-    key: "projectName",
-    width: "16%",
-    align: "center",
-  },
-  {
-    title: "工号",
-    dataIndex: "numb",
-    key: "numb",
-    width: "16%",
-    align: "center",
-  },
-  {
-    title: "报名时间",
-    dataIndex: "applytime",
-    key: "applytime",
-    width: "16%",
-    align: "center",
-  },
-  {
-    title: "签到时间",
-    dataIndex: "signtime",
-    key: "signtime",
-    width: "16%",
-    align: "center",
-  },
-  {
-    title: "状态",
-    dataIndex: "status",
-    key: "status",
-    width: "16%",
-    align: "center",
-  },
-  {
-    title: "操作",
-    dataIndex: "opacation",
-    key: "opacation",
-    width: "16%",
-    align: "center",
-  },
-];
-const columns2 = [
-  {
-    title: "开课名称",
-    dataIndex: "projectName",
-    key: "projectName",
-    width: "30%",
-    align: "center",
-  },
-  {
-    title: "地点",
-    dataIndex: "address",
-    key: "address",
-    width: "30%",
-    align: "center",
-  },
-  {
-    title: "状态",
-    dataIndex: "status",
-    key: "status",
-    width: "40%",
-    align: "center",
-  },
-];
-const columns3 = [
-  {
-    title: "姓名",
-    dataIndex: "name",
-    key: "name",
-    width: "18%",
-    align: "center",
-  },
-  {
-    title: "归属组织",
-    dataIndex: "organization",
-    key: "organization",
-    width: "18%",
-    align: "center",
-  },
-  {
-    title: "岗位",
-    dataIndex: "position",
-    key: "position",
-    width: "18%",
-    align: "center",
-  },
-  {
-    title: "拥有权限",
-    dataIndex: "authority",
-    key: "authority",
-    width: "18%",
-    align: "center",
-  },
-  {
-    title: "操作",
-    dataIndex: "opacation",
-    key: "opacation",
-    width: "30%",
-    align: "center",
-  },
-];
-const columns4 = [
-  {
-    title: "序号",
-    dataIndex: "num",
-    key: "num",
-    width: "10%",
-  },
-  {
-    title: "归属组织",
-    dataIndex: "organization",
-    key: "organization",
-    width: "12%",
-    align: "center",
-  },
-  {
-    title: "场地",
-    dataIndex: "address",
-    key: "saddress",
-    width: "12%",
-    align: "center",
-  },
-  {
-    title: "开始时间",
-    dataIndex: "starttime",
-    key: "starttime",
-    width: "20%",
-    align: "center",
-  },
-  {
-    title: "创建时间",
-    dataIndex: "createtime",
-    key: "createtime",
-    width: "20%",
-    align: "center",
-  },
-  {
-    title: "操作",
-    dataIndex: "opacation",
-    key: "opacation",
-    width: "26%",
-    align: "center",
-    scopedSlots: { customRender: "action" }, //引入的插槽
-    customRender: () => {
-      // console.log(text);
-      return (
-        <div class="opacation">
-          <span>签到</span>
-          <span style={{ "margin-left": "21px" }}>编辑</span>
-          <span style={{ "margin-left": "21px" }}>管理</span>
-          <span style={{ "margin-left": "21px" }} class="more">
-            <span>更多</span>
-            <div class="moreArrow"></div>
-            <div class="moreItems"></div>
-          </span>
-        </div>
-      );
-    },
-  },
-];
-const columns5 = [
         {
         title: '序号',
         width: 200,
@@ -1195,7 +1032,155 @@ const columns5 = [
         align: "center",
         },
 ];
+const columns2 = [
+  {
+    title: "姓名",
+    dataIndex: "projectName",
+    key: "projectName",
+    width: "16%",
+    align: "center",
+  },
+  {
+    title: "工号",
+    dataIndex: "numb",
+    key: "numb",
+    width: "16%",
+    align: "center",
+  },
+  {
+    title: "报名时间",
+    dataIndex: "applytime",
+    key: "applytime",
+    width: "16%",
+    align: "center",
+  },
+  {
+    title: "签到时间",
+    dataIndex: "signtime",
+    key: "signtime",
+    width: "16%",
+    align: "center",
+  },
+  {
+    title: "状态",
+    dataIndex: "status",
+    key: "status",
+    width: "16%",
+    align: "center",
+  },
+  {
+    title: "操作",
+    dataIndex: "opacation",
+    key: "opacation",
+    width: "16%",
+    align: "center",
+  },
+];
+const columns4 = [
+  {
+    title: "开课名称",
+    dataIndex: "projectName",
+    key: "projectName",
+    width: "30%",
+    align: "center",
+  },
+  {
+    title: "地点",
+    dataIndex: "address",
+    key: "address",
+    width: "30%",
+    align: "center",
+  },
+  {
+    title: "状态",
+    dataIndex: "status",
+    key: "status",
+    width: "40%",
+    align: "center",
+  },
+];
+const columns5 = [
+  {
+    title: "姓名",
+    dataIndex: "name",
+    key: "name",
+    width: "18%",
+    align: "center",
+  },
+  {
+    title: "归属组织",
+    dataIndex: "organization",
+    key: "organization",
+    width: "18%",
+    align: "center",
+  },
+  {
+    title: "岗位",
+    dataIndex: "position",
+    key: "position",
+    width: "18%",
+    align: "center",
+  },
+  {
+    title: "拥有权限",
+    dataIndex: "authority",
+    key: "authority",
+    width: "18%",
+    align: "center",
+  },
+  {
+    title: "操作",
+    dataIndex: "opacation",
+    key: "opacation",
+    width: "30%",
+    align: "center",
+  },
+];
 const columns6 = [
+  {
+    title: "序号",
+    dataIndex: "num",
+    key: "num",
+    width: "10%",
+    align: "center",
+  },
+  {
+    title: "归属组织",
+    dataIndex: "organization",
+    key: "organization",
+    width: "12%",
+    align: "center",
+  },
+  {
+    title: "场地",
+    dataIndex: "address",
+    key: "saddress",
+    width: "12%",
+    align: "center",
+  },
+  {
+    title: "开始时间",
+    dataIndex: "starttime",
+    key: "starttime",
+    width: "20%",
+    align: "center",
+  },
+  {
+    title: "创建时间",
+    dataIndex: "createtime",
+    key: "createtime",
+    width: "20%",
+    align: "center",
+  },
+  {
+    title: '操作',
+    width: '20%',
+    dataIndex: "operation",
+    key: 'operation',
+    align: "center",
+  },
+];
+const columns7 = [
         {
         title: '序号',
         width: 200,
@@ -1280,7 +1265,7 @@ export default defineComponent({
   setup() {
     const current = ref(["mail"]);
     const state = reactive({
-      tableData: [
+      tableData1: [
         {
           key: "1",
           num: 1,
@@ -1393,6 +1378,14 @@ export default defineComponent({
           signtime: "-",
           status: "已通过",
         },
+        {
+          key: 2,
+          projectName: "",
+          numb: "",
+          applytime: "2022-07-20 14:00:00",
+          signtime: "2022-09-26 13:30:30",
+          status: "已完成",
+        },
       ],
       tableData3: [
         {
@@ -1403,14 +1396,6 @@ export default defineComponent({
           signtime: "-",
           status: "已通过",
         },
-        {
-          key: 2,
-          projectName: "",
-          numb: "",
-          applytime: "2022-07-20 14:00:00",
-          signtime: "2022-09-26 13:30:30",
-          status: "已完成",
-        },
       ],
       tableData4: [
         {
@@ -1579,6 +1564,17 @@ export default defineComponent({
       currentPage: 1,
       tableDataTotal: 100,
       pageSize: 10,
+      of_hs: false,
+      hideshow: true,
+      bs_hs: true,
+      ft_hs:false,
+      om_1: false,
+      ftm_1:false,
+      om_ckxq: false,
+      gpm_hs:false,
+      stm_hs: false,
+      cstm_hs:false,
+      sm_hs:false,
     });
     // const tableDataFunc = () => {
     //   const columns = [
@@ -1747,22 +1743,31 @@ export default defineComponent({
     };
 
     const getTableDate = () => {
-      let data = state.tableData;
+      let datas = state.tableData1;
-      data.map((value) => {
+      datas.map((value) => {
         {
           //单层项目
-          value.operation = (
+          value.operation = ( 
             <div class="operation">
               <div class="nSelect">
                 {value.status === "已审核" ? (
                   <div class="nselect">
                     
                     <div class='ops1'>
-                      <div class="jc">开课</div>
+                      <div class="jc"
+                        onClick={() => {
+                          state.stm_hs = true;
+                        }}>开课</div>
                     </div>
 
                     <div class='ops2'>    
-                      <div class="jc">管理</div>
+                      <div class="jc" onClick={() => {
+                        if (value.courseform === '线上') {
+                          state.om_1 = true;
+                        } else if (value.courseform === '面授') {
+                          state.ftm_1 = true;
+                        }
+                      }}>管理</div>
                     </div>
 
                     <div class='ops3'>                   
@@ -1771,14 +1776,16 @@ export default defineComponent({
 
                     <div class="tableSelect">
                       <div class='ops4'> 
-                        <a-select
+                        <a-select 
                           style="width: 50px;margin-top:2px;margin-left:25px"
                           value="授权"
                           // options={state.projectNameList}
                           dropdownClassName="tabledropdown"
                         >
                           <a-select-option value="权限名单" label="权限名单">
-                            <div>权限名单</div>
+                            <div onClick={() => {
+                              state.gpm_hs = true;
+                            }}>权限名单</div>
                           </a-select-option>
                           <a-select-option value="归属权" label="归属权">
                             <div
@@ -1837,7 +1844,10 @@ export default defineComponent({
                   <div class="nselect">
 
                     <div class='ops1'>
-                      <div class="jc">开课</div>
+                      <div class="jc"
+                        onClick={() => {
+                          state.stm_hs = true;
+                        }}>开课</div>
                     </div>
 
                     <div class='ops5'> 
@@ -1853,7 +1863,9 @@ export default defineComponent({
                           dropdownClassName="tabledropdown"
                         >
                           <a-select-option value="权限名单" label="权限名单">
-                            <div>权限名单</div>
+                            <div onClick={() => {
+                              state.gpm_hs = true;
+                            }}>权限名单</div>
                           </a-select-option>
                           <a-select-option value="归属权" label="归属权">
                             <div
@@ -1881,7 +1893,10 @@ export default defineComponent({
                   <div class="nselect">
 
                     <div class='ops1'>
-                      <div class="jc">开课</div>
+                      <div class="jc"
+                        onClick={() => {
+                          state.stm_hs = true;
+                        }}>开课</div>
                     </div>
 
                     <div class='ops2'>
@@ -1898,7 +1913,10 @@ export default defineComponent({
                 {value.status === "审核未通过" ? (
                   <div class="nselect">
                     <div class='ops1'>
-                      <div class="jc">开课</div>
+                      <div class="jc"
+                        onClick={() => {
+                          state.stm_hs = true;
+                        }}>开课</div>
                     </div>
 
                     <div class='ops2'>
@@ -1919,7 +1937,9 @@ export default defineComponent({
                           dropdownClassName="tabledropdown"
                         >
                           <a-select-option value="权限名单" label="权限名单">
-                            <div>权限名单</div>
+                            <div onClick={() => {
+                              state.gpm_hs = true;
+                            }}>权限名单</div>
                           </a-select-option>
                           <a-select-option value="归属权" label="归属权">
                             <div
@@ -1952,7 +1972,7 @@ export default defineComponent({
           );
         }
       });
-      state.tableData = data;
+      state.tableData = datas;
     };
     getTableDate();
 
@@ -2002,34 +2022,70 @@ export default defineComponent({
           );
         }
       });
-      state.tableData2 = data2;
+      state.tableData = data2;
     };
     getTableDate2();
 
-    const onftvalue = ref();
+    const getTableDate3 = () => {
+      let datas = state.tableData6;
+      datas.map((value) => {
+        {
+          //单层项目
+          value.operation = ( 
+            <div class="operation">
+              <div class="nSelect">
+                <div class="nselect">
 
-    return {
+                      <div class="jc">签到</div>
-      onftvalue,
+
-      current,
+                      <div class="jc">编辑</div>
-      ...toRefs(state),
+
-      fileList,
+                      <div class="jc"
-      loading,
+                        onClick={() => {
-      imageUrl,
+                          state.sm_hs = true;
-      columns1,
+                        }}>管理</div>
-      columns2,
+
-      columns3,
+                    <div class="tableSelect">
-      columns4,
+                          <a-select
-      columns5,
+                            style="width: 50px;margin-top:2px;margin-left:25px"
-      columns6,
+                            value="更多"
-      // tableDataFunc,
+                            // options={state.projectNameList}
-      handleChange,
+                            dropdownClassName="tabledropdown"
-      beforeUpload,
+                          >
-      getTableDate,
+                            <a-select-option
-      getTableDate2,
+                              value="复制"
+                              label="复制"
+                              style="padding-left:35px"
+                            >
+                              <div>复制</div>
+                            </a-select-option>
+                            <a-select-option
+                              value="取消"
+                              label="取消"
+                              style="padding-left:35px"
+                            >
+                              <div
+                                onClick={() => {
+                                  console.log("点击了");
+                                }}
+                              >
+                                取消
+                              </div>
+                            </a-select-option>
+                          </a-select>
+                    </div>
+                </div>
+              </div>
+
+            </div>
+          );
+        }
+      });
+      state.tableData = datas;
     };
-  },
+    getTableDate3();
 
-  data() {
+    const onftvalue = ref();
     const options1 = ref([
       {
         value: "value1",
@@ -2072,19 +2128,6 @@ export default defineComponent({
       },
     ]);
 
-    const state = reactive({
-      of_hs: false,
-      hideshow: true,
-      bs_hs: true,
-      ft_hs:false,
-      om_1: false,
-      ftm_1:false,
-      om_ckxq: false,
-      gpm_hs:false,
-      stm_hs: false,
-      cstm_hs:false,
-      sm_hs:false,
-    });
 
     const of_hShow = () => {
       if (state.of_hs == false) {
@@ -2145,9 +2188,25 @@ export default defineComponent({
     const sm_exit = () => {
       state.sm_hs = false;
     };
-
     return {
+      onftvalue,
+      current,
       ...toRefs(state),
+      fileList,
+      loading,
+      imageUrl,
+      columns1,
+      columns2,
+
+      columns4,
+      columns5,
+      columns6,
+      columns7,
+      // tableDataFunc,
+      handleChange,
+      beforeUpload,
+      getTableDate,
+      getTableDate2,
       options1,
       options2,
       of_hShow,
@@ -2168,6 +2227,32 @@ export default defineComponent({
       sm_exit,
     };
   },
+
+  // data() {
+
+
+  //   // return {
+  //   //   ...toRefs(state),
+  //   //   options1,
+  //   //   options2,
+  //   //   of_hShow,
+  //   //   of_exit,
+  //   //   hideShow,
+  //   //   bs_hShow,
+  //   //   bs_unhShow,
+  //   //   createft,
+  //   //   ft_exit,
+  //   //   om_exit,
+  //   //   ftm_exit,
+  //   //   ckxq_hs,
+  //   //   ftsr_exit,
+  //   //   gpm_exit,
+  //   //   stm_exit,
+  //   //   createkk,
+  //   //   cstm_exit,
+  //   //   sm_exit,
+  //   // };
+  // },
 });
 </script>
 <style lang="scss">
@@ -2595,30 +2680,53 @@ export default defineComponent({
 
   .tableBox {
     margin: 20px 38px 30px;
-    .operation {
+    .operation{
-      display: flex;
-      justify-content: right;
-      .nSelect {
         display: flex;
-        .nselect {
+        justify-content: center;
+        align-items: center;
+        color:#4EA6FF;
+        .nselect{
+          justify-content: center;
+          align-items: center;
           display: flex;
-          color: #4ea6ff;
+          .jc{
-          font-size: 14px;
-          .ops1,.ops2,.ops3,.ops4,.ops5{
             margin-left: 20px;
+            cursor: pointer;
           }
-          // .jc {
+        }
-          //   margin-left: 20px;
+        .tableSelect {
-          // }
+          margin-right: 10px;
+          margin-left: -5px;
+          display: flex;
+          align-items: center;
+          justify-content: right;
         }
       }
-      .tableSelect {
+    // .operation {
-        margin-left: -30px;
+    //   display: flex;
-        display: flex;
+    //   justify-content: right;
-        align-items: center;
+    //   .nSelect {
-        justify-content: right;
+    //     display: flex;
-      }
+    //     .nselect {
-    }
+    //       display: flex;
+    //       color: #4ea6ff;
+    //       font-size: 14px;
+    //       .ops1,.ops2,.ops3,.ops4,.ops5{
+    //         margin-left: 20px;
+    //         cursor: pointer;
+    //       }
+    //       .jc {
+    //         margin-left: 20px;
+    //       }
+    //     }
+    //   }
+    //   .tableSelect {
+    //     margin-left: -30px;
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: right;
+    //   }
+    // }
   }
 
   .onlinemanage,
@@ -3084,44 +3192,30 @@ export default defineComponent({
           width: 90%;
           margin:30px auto;
           border: 1px solid #F0F4FE;
-        }
+          .operation{
-        .opacation {
+            display: flex;
-          font-size: 14px;
+            justify-content: center;
-          font-weight: 400;
+            align-items: center;
-          color: #4ea6ff;
+            color:#4EA6FF;
-          // line-height: 36px;
+            .nselect{
-          .more {
+              justify-content: center;
-            position: relative;
+              align-items: center;
-            .moreArrow {
+              display: flex;
-              width: 13px;
+              .jc{
-              height: 7px;
+                margin-left: 20px;
-              display: inline-block;
+                cursor: pointer;
-              background-image: url("../../assets/images/navtop/down.png");
+              }
-              background-size: 100%;
-              margin: 2px;
-              margin-left: 7px;
             }
-            .moreItems {
+            .tableSelect {
-              width: 80px;
+              margin-right: 10px;
-              height: 70px;
+              margin-left: -5px;
-              display: none;
+              display: flex;
-              background: #ffffff;
+              align-items: center;
-              box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+              justify-content: right;
-              border-radius: 3px;
-              border: 0px solid #dcdcdc;
-              position: absolute;
-              left: 0px;
-              top: 18px;
-              z-index: 100;
             }
           }
-          .more:hover .moreArrow {
-            background-image: url("../../assets/images/navtop/up.png");
-          }
-          .more:hover .moreItems {
-            display: block;
-          }
         }
+
       }
     }
   .createschooltime{