feat:完善列表表格操作

src/views/courselibrary/CoursewareManage.vue

@@ -36,13 +36,11 @@
             ></a-select>
           </div>
           <div class="select fitems">
-            <a-time-range-picker />
+            <a-range-picker
-            <!-- <a-date-picker
+            v-model:value="value2"
-              v-model="selectTime"
+            separator="至"
-              type="date"
+            :placeholder="['        开始时间', '        结束时间']"
-              placeholder="创建时间"
+          />
-              style="width: 286px"
-            /> -->
           </div>
         </div>
       </div>
@@ -301,13 +299,40 @@
 
     <!-- 表格 -->
     <div class="tableBox">
-      <a-table :columns="columns" :data-source="data" :scroll="{ x: 800 }">
+      <!-- <a-table :columns="columns" :data-source="data" :scroll="{ x: 800 }">
         <template #bodyCell="{ column }">
           <template v-if="column.key === 'operation'">
             <a>action</a>
           </template>
         </template>
-      </a-table>
+      </a-table> -->
+      <a-table
+        :columns="tableDataFunc()"
+        :data-source="tableData"
+        :loading="tableDataTotal === -1 ? true : false"
+        :scroll="{ x: 800 }"
+        expandRowByClick="true"
+        @expand="expandTable"
+        :pagination="{
+          showSizeChanger: true,
+          showQuickJumper: true,
+          hideOnSinglePage: true,
+          pageSizeOptions: [],
+          pageSize: pageSize,
+          current: currentPage,
+          total: tableDataTotal,
+          onChange: (page, pageSize) => {
+            currentPage = page;
+            // console.log('page', page)
+            // 加翻页查找代码
+            // 	this.setState({
+            // 		currentPage: page,
+            // 	}, () => {
+            // 		this.getMilitaryDeployment()
+            // 	})
+          },
+        }"
+      />
     </div>
     <!-- 表格 -->
   </div>
@@ -396,9 +421,26 @@ const columns = [{
 }, {
   title: '操作',
   width: 400,
+  dataIndex: "opacation",
   key: 'operation',
   fixed: 'right',
   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 data = [{
   key: '1',
@@ -432,6 +474,70 @@ const data = [{
   pubtime: '2022-07-20 9:30',
   ynuse: '启用',
   kkty:true,
+  }, {
+  key: '3',
+  num:3,
+  name: '产业必备技能',
+  content: '专业力',
+  courseform: '线上',
+  project: '-',
+  stunum: '200',
+  grade: '5',
+  status: '已审核',
+  ynpub: '未发布',
+  creator: '管理员',
+  createtime: '2022-07-20 9:30',
+  pubtime: '2022-07-20 9:30',
+  ynuse: '启用',
+  kkty:true,
+  }, {
+  key: '4',
+  num:4,
+  name: 'B11入模培训',
+  content: '专业力',
+  courseform: '线上',
+  project: '-',
+  stunum: '200',
+  grade: '5',
+  status: '审核未通过',
+  ynpub: '未发布',
+  creator: '管理员',
+  createtime: '2022-07-20 9:30',
+  pubtime: '2022-07-20 9:30',
+  ynuse: '停用',
+  kkty:true,
+  }, {
+  key: '5',
+  num:5,
+  name: '入职培训',
+  content: '通用力',
+  courseform: '面授',
+  project: '-',
+  stunum: '5',
+  grade: '5',
+  status: '未提交',
+  ynpub: '未发布',
+  creator: '管理员',
+  createtime: '2022-07-20 9:30',
+  pubtime: '2022-07-20 9:30',
+  ynuse: '启用',
+  kkty:true,
+  }, {
+  key: '6',
+  num:6,
+  name: '入职培训',
+  content: '通用力',
+  courseform: '面授',
+  project: '-',
+  stunum: '5',
+  grade: '6',
+  status: '已审核',
+  ynpub: '未发布',
+  creator: '管理员',
+  createtime: '2022-07-20 9:30',
+  pubtime: '2022-07-20 9:30',
+  ynuse: '启用',
+  kkty:true,
   }];
 
   function getBase64(img, callback) {
@@ -446,6 +552,225 @@ export default defineComponent({
   },
 
   setup() {
+    const state = reactive({
+    tableData : [{
+      key: '1',
+      num:1,
+      name: '时间管理',
+      content: '领导力',
+      courseform: '线上',
+      project: '管理者进阶-腾飞班1',
+      stunum: '50',
+      grade: '5',
+      status: '未提交',
+      ynpub: '未发布',
+      creator: '管理员',
+      createtime: '2022-07-20 9:30',
+      pubtime: '2022-07-20 9:30',
+      ynuse: '启用',
+      kkty:false,
+    }, {
+      key: '2',
+      num:2,
+      name: '智能制造初级课程',
+      content: '专业力',
+      courseform: '线上',
+      project: '-',
+      stunum: '200',
+      grade: '5',
+      status: '待审核',
+      ynpub: '未发布',
+      creator: '管理员',
+      createtime: '2022-07-20 9:30',
+      pubtime: '2022-07-20 9:30',
+      ynuse: '启用',
+      kkty:true,
+      }, {
+      key: '3',
+      num:3,
+      name: '产业必备技能',
+      content: '专业力',
+      courseform: '线上',
+      project: '-',
+      stunum: '200',
+      grade: '5',
+      status: '已审核',
+      ynpub: '已发布',
+      creator: '管理员',
+      createtime: '2022-07-20 9:30',
+      pubtime: '2022-07-20 9:30',
+      ynuse: '启用',
+      kkty:true,
+      }, {
+      key: '4',
+      num:4,
+      name: 'B11入模培训',
+      content: '专业力',
+      courseform: '线上',
+      project: '-',
+      stunum: '200',
+      grade: '5',
+      status: '审核未通过',
+      ynpub: '未发布',
+      creator: '管理员',
+      createtime: '2022-07-20 9:30',
+      pubtime: '2022-07-20 9:30',
+      ynuse: '停用',
+      kkty:true,
+      }, {
+      key: '5',
+      num:5,
+      name: '入职培训',
+      content: '通用力',
+      courseform: '面授',
+      project: '-',
+      stunum: '5',
+      grade: '5',
+      status: '未提交',
+      ynpub: '未发布',
+      creator: '管理员',
+      createtime: '2022-07-20 9:30',
+      pubtime: '2022-07-20 9:30',
+      ynuse: '启用',
+      kkty:true,
+      }, {
+      key: '6',
+      num:6,
+      name: '入职培训',
+      content: '通用力',
+      courseform: '面授',
+      project: '-',
+      stunum: '5',
+      grade: '6',
+      status: '已审核',
+      ynpub: '已发布',
+      creator: '管理员',
+      createtime: '2022-07-20 9:30',
+      pubtime: '2022-07-20 9:30',
+      ynuse: '启用',
+      kkty:true,
+      }],
+    });
+    const tableDataFunc = () => {
+      const columns = [
+        {
+        title: '序号',
+        width: 200,
+        dataIndex: 'num',
+        key: 'num',
+        align: "center",
+      }, {
+        title: '名称',
+        width: 200,
+        dataIndex: 'name',
+        key: 'name',
+      }, {
+        title: '内容分类',
+        width: 200,
+        dataIndex: 'content',
+        key: '1',
+        align: "center",
+      }, {
+        title: '课程形式',
+        width: 200,
+        dataIndex: 'courseform',
+        key: '2',
+        align: "center",
+      }, {
+        title: ' 所属项目',
+        width: 300,
+        dataIndex: 'project',
+        key: '3',
+        align: "center",
+      }, {
+        title: '学习人数',
+        width: 200,
+        dataIndex: 'stunum',
+        key: '4',
+        align: "center",
+      }, {
+        title: '评分',
+        width: 200,
+        dataIndex: 'grade',
+        key: '5',
+        align: "center",
+      }, {
+        title: '状态',
+        width: 200,
+        dataIndex: 'status',
+        key: '6',
+        align: "center",
+      }, {
+        title: '是否发布',
+        width: 200,
+        dataIndex: 'ynpub',
+        key: '7',
+        align: "center",
+      }, {
+        title: '创建人',
+        width: 200,
+        dataIndex: 'creator',
+        key: '8',
+        align: "center",
+      }, {
+        title: '创建时间',
+        width: 280,
+        dataIndex: 'createtime',
+        key: '9',
+        align: "center",
+      }, {
+        title: '上线时间',
+        width: 280,
+        dataIndex: 'pubtime',
+        key: '10',
+        align: "center",
+      }, {
+        title: '是否停用',
+        width: 200,
+        key: 'either',
+        dataIndex: 'ynuse',
+        align: "center",
+      }, {
+        title: '操作',
+        width: 400,
+        className: "h",
+        dataIndex: "opacation",
+        key: 'operation',
+        fixed: 'right',
+        align: "center",
+        scopedSlots: { customRender: "action" }, 
+        customRender: (text) => {
+            // console.log(text);
+            return (
+              <div class="op_box">
+                <div class="opacation">
+                  <span class={text.record.courseform === '面授' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >开课</span>
+                  <span class={text.record.ynuse === '停用' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >停用</span>
+                  <span class={text.record.status === '未提交' || text.record.status === '审核未通过' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >编辑</span>
+                  <span class={text.record.status === '已审核' ? "activecls" : "errorCls"} style={{ "margin-left": "25px" }} >管理</span>
+                  <span class={text.record.status === '待审核' ?  "errorCls" : "activecls"} style={{ "margin-left": "25px" }} >复制</span>
+                  <span style={{ "margin-left": "25px" }} class="more">
+                    <span>授权</span>
+                    <div class="moreArrow"></div>
+                    <div class="moreItems"></div>
+                  </span>
+                  <span
+                    style={{ "margin-left": "21px", "margin-right": "30px" }}
+                    class="more"
+                  >
+                    <span>更多</span>
+                    <div class="moreArrow"></div>
+                    <div class="moreItems"></div>
+                  </span>
+                </div>
+              </div>
+              
+              );
+          },
+      }];
+      return columns;
+    }
+
     const fileList = ref([]);
     const loading = ref(false);
     const imageUrl = ref('');
@@ -487,9 +812,11 @@ export default defineComponent({
     };
 
     return {
+      ...toRefs(state),
       fileList,
       loading,
       imageUrl,
+      tableDataFunc,
       handleChange,
       beforeUpload,
     };
@@ -539,7 +866,6 @@ export default defineComponent({
         state.of_hs = true
       } 
     }
-
     const hideShow = () => {
       if (state.hideshow == false) {
         state.hideshow = true
@@ -547,7 +873,6 @@ export default defineComponent({
         state.hideshow = false
       }
     }
-
     const bs_hShow = () => {
       if (state.bs_hs == true) {
         state.bs_hs = false
@@ -827,7 +1152,7 @@ export default defineComponent({
   }  
 
   .faceteach{
-    // display: none;
+    display: none;
     z-index: 1000;
     width: 1358px;
     min-width: 1000px;
@@ -976,6 +1301,53 @@ export default defineComponent({
 
   .tableBox {
     margin: 20px 38px 30px;
+    .op_box{
+      display: flex;
+      justify-content: right;
+      .opacation {
+        font-size: 14px;
+        font-weight: 400;
+        color: #4ea6ff;
+        // line-height: 36px;
+        .activecls {
+          display: inline-block;
+        }
+        .errorCls {
+          display: none;
+        }
+        .more {
+          position: relative;
+          .moreArrow {
+            width: 13px;
+            height: 7px;
+            display: inline-block;
+            background-image: url("@/assets/images/navtop/down.png");
+            background-size: 100%;
+            margin: 2px;
+            margin-left: 7px;
+          }
+          .moreItems {
+            width: 80px;
+            height: 70px;
+            display: none;
+            background: #ffffff;
+            box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+            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;
+        }
+      }
+    }
   }
 }
 </style>