列表样式调整

src/views/lecturer/InsideTeaching.vue

@@ -1,9 +1,34 @@
 <!-- 内部授课页面 -->
 <template>
-  <div class="InsideTeaching">
+  <div >
+    <div class="tableBox ">
+        <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
+        :scroll="{ x: 100 }"
+             :data-source="tableData" 
+             :loading="tableLoading" 
+             @expand="expandTable" 
+             :pagination="false">
+          <template #bodyCell="{ record, column }">
+            <template v-if="column.key === 'operation'">
+              <a-space style="display:flex ;justify-content: space-around;  ">
+                <a-button type="link" @click="() => handleLook(record, String(record.courseform))">查看</a-button>
+                <a-button type="link" @click="() => handleModify(record, String(record.courseform))">修改</a-button>
+                <a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button>
+              </a-space>
+            </template>
+          </template>
+        </a-table>
+      </div>
+
+    <div class="tableBox ">
+      <div style="float: right;">
+        <a-pagination v-if="tableDataTotal > 10" :showSizeChanger="true" :hideOnSinglePage="true" :pageSize="pageSize"
+          v-model:current="searchParam.pageNo" :total="tableDataTotal" class="pagination" @change="changePagination" />
+      </div>
+    </div>
     <!-- 搜索框及按钮 -->
-    <div class="filter" style="min-width: 1380px;">
+    <div class="filter">
-      <a-form layout="inline">
+      <a-form layout="inline"  style="min-width: 1380px;">
         <a-form-item class="select">
           <!--  v-model:value="searchParam.name" -->
           <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
@@ -85,10 +110,15 @@
           <UploadOutlined /> 导出
         </a-button>
       </div>
+    </div>
       <!-- 表格 -->
-      <div style="padding: 10px 0">
+      <div class="tableBox ">
         <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
-          :data-source="tableData" :loading="tableLoading" @expand="expandTable" :pagination="false">
+        :scroll="{ x: 1300 }"
+             :data-source="tableData" 
+             :loading="tableLoading" 
+             @expand="expandTable" 
+             :pagination="false">
           <template #bodyCell="{ record, column }">
             <template v-if="column.key === 'operation'">
               <a-space style="display:flex ;justify-content: space-around;  ">
@@ -101,7 +131,6 @@
         </a-table>
       </div>
 
-    </div>
     <div class="tableBox ">
       <div style="float: right;">
         <a-pagination v-if="tableDataTotal > 10" :showSizeChanger="true" :hideOnSinglePage="true" :pageSize="pageSize"
@@ -134,11 +163,11 @@
             </a-form-item>
           </a-col>
         </a-row>
-        <!-- 讲师体系  departId  级别 levelId -->
+        <!-- 讲师体系  systemId  级别 levelId -->
         <a-row :gutter="16">
           <a-col :span="12">
-            <a-form-item label="讲师体系" name="departId">
+            <a-form-item label="讲师体系" name="systemId">
-              <a-select disabled  class="draitem" v-model:value="formParam.departId" placeholder="请选择讲师体系"
+              <a-select disabled  class="draitem" v-model:value="formParam.systemId" placeholder="请选择讲师体系"
                 :options="LecturerSystemList">
               </a-select>
             </a-form-item>
@@ -223,11 +252,6 @@
           </a-col>
         </a-row>
       </a-form>
-      <!-- <div class="del_btnbox"  v-if="teacherdialog1 == 0">
-                <a-button class="del_btn btn1" @click="cancelTeacherDialog" style="margin-right: 32px;">取消</a-button>
-                <a-button class="del_btn btn2" @click="createTeacherDialog" :loading="buttonLoading">保存
-                </a-button>
-              </div> -->
       <div :style="{
         position: 'absolute',
         right: 0,
@@ -244,7 +268,46 @@
         </a-button>
       </div>
     </a-drawer>
-
+<!--查看授课详情 -->
+<a-drawer v-model:visible="teachingdialog" placement="right"
+@closa="cancelTeachingDialog" :maskClosable="true"  width="60%" title="查看讲师授课记录">
+<span class="line"></span>
+<span>讲师信息</span>
+<a-descriptions bordered :column="2" :contentStyle="rowCenter" :labelStyle="rowCenter">
+    <a-descriptions-item label="讲师名称">{{formParam.teacher}}</a-descriptions-item>
+    <a-descriptions-item label="讲师工号">{{formParam.userNo}}</a-descriptions-item>
+    <a-descriptions-item label="讲师组织" :span="2">{{formParam.departId}}</a-descriptions-item>
+    <a-descriptions-item label="讲师体系">{{formParam.systemId}}</a-descriptions-item>
+    <a-descriptions-item label="讲师级别">{{formParam.levelId }}</a-descriptions-item>
+    <a-descriptions-item label="录入方式(未命名)">"未命名"</a-descriptions-item>
+    <a-descriptions-item label="课程类型">{{formParam.type==1?'项目开课' :formParam.type==2 ?'路径开课':formParam.type==3 ?'面授开课':''}}</a-descriptions-item>
+    <a-descriptions-item label="课程名称">{{formParam.name}}</a-descriptions-item>
+    <a-descriptions-item label="开课状态">{{formParam.status==0?'未开课' :formParam.status==1 ?'已开课':''}}</a-descriptions-item>
+    <a-descriptions-item label="授课时长  ">{{formParam.duration}}</a-descriptions-item>
+    <a-descriptions-item label="授课/课程日期  ">{{formParam.beginTime}}</a-descriptions-item>
+    <a-descriptions-item label="参训人数  ">{{formParam.studys}}</a-descriptions-item>
+    <a-descriptions-item label="评分  ">{{formParam.score}}</a-descriptions-item>
+    <a-descriptions-item label="内容分类  ">{{formParam.teaching}}</a-descriptions-item>
+    <a-descriptions-item label="备注  ">{{formParam.remark}}</a-descriptions-item>
+  </a-descriptions>
+  <span class="line"></span>
+<span>讲师费发放情况</span>
+  <div :style="{
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        borderTop: '1px solid #e9e9e9',
+        padding: '10px 16px',
+        background: '#fff',
+        textAlign: 'right',
+        zIndex: 1,
+      }">
+        <a-button  class="drabtn"  @click="cancelTeachingDialog">取消</a-button>
+        <a-button   class="drabtn" type="primary" @click="cancelTeachingDialog" :loading="buttonLoading">返回
+        </a-button>
+      </div>
+</a-drawer>
     <!-- 删除功能弹窗 -->
     <div>
       <a-modal v-model:visible="deleteTeacherdialog" :footer="null" :closable="close" wrapClassName="canclestu1"
@@ -260,7 +323,7 @@
               <span>您确定要删除此条记录吗</span>
             </div>
             <div class="del_btnbox">
-              <div class="del_btn btn2" @click="cancelTeacherDialog" style="margin-right: 32px">
+              <div class="del_btn btn2" @click="cancelTeachDialog" style="margin-right: 32px">
                 <div class="btnText">取消</div>
               </div>
               <div class="del_btn btn2" @click="closeDeleteTeacher">
@@ -318,6 +381,7 @@ export default {
       teacherdialog1: null,
       teacherdialog: false,  //控制讲师弹窗
       teacherdialogtitle: '',//讲师弹框title内容
+      teachingdialog:false,//控制查看抽屉
       pageSizeOptions: ['10', '20', '30', '50'], //下拉选择每页显示多少条
       pageSize: 10,
       tableDataTotal: -1,//table列表总条数
@@ -417,33 +481,40 @@ export default {
     ])
     const columns = ref([
 
-      {
+      // {
-        title: '课程编号 ',
+      //   title: '课程编号 ',
-        dataIndex: 'userNo',
+      //   dataIndex: 'userNo',
-        key: 'userNo',
+      //   key: 'userNo',
-        elipsis: true,
+      //   elipsis: true, align: "center",
-        width: 120,
+      //   width: 120,
-      },
+      // },
       {
         title: '讲师姓名 ',
+        fixed: 'left',
         dataIndex: 'teacher',
         key: 'teacher',
-        elipsis: true,
+        elipsis: true, align: "center",
         width: 120,
       },
       {
         title: '讲师工号 ',
         dataIndex: 'userNo',
         key: 'userNo',
-        elipsis: true,
+        elipsis: true, align: "center",
+        width: 120,
+      },
+      {
+        title: '讲师体系 ',
+        dataIndex: 'systemName',
+        key: 'systemName',
+        elipsis: true, align: "center",
         width: 120,
       },
       {
         title: '所属组织 ',
         dataIndex: 'orgName',
         key: 'orgName',
-        elipsis: true,
+        elipsis: true, align: "center",
-        width: 400,
         //  customRender: (value, record) => {
         //   return (
         //     <div>
@@ -453,45 +524,24 @@ export default {
         // }
       },
       {
-        title: '讲师体系 ',
+        title: '数据来源(未命名) ',
         dataIndex: 'systemName',
         key: 'systemName',
-        elipsis: true,
+        elipsis: true, align: "center",
         width: 120,
       },
       {
         title: '课程名称 ',
         dataIndex: 'name',
         key: 'name ',
-        elipsis: true,
+        elipsis: true, align: "center",
-        width: 120,
-      },
-      {
-        title: '授课/课程日期 ',
-        dataIndex: 'beginTime',
-        key: 'beginTime',
-        elipsis: true,
-        width: 120,
-      },
-      {
-        title: '授课时长(H) ',
-        dataIndex: 'duration',
-        key: 'duration',
-        elipsis: true,
-        width: 120,
-      },
-      {
-        title: '内容分类',
-        dataIndex: 'teaching',
-        key: 'teaching',
-        elipsis: true,
         width: 120,
       },
       {
         title: '课程类型 ',
         dataIndex: 'type',
         key: 'type',
-        elipsis: true,
+        elipsis: true, align: "center",
         width: 120,
         customRender: (value) => {
           return (
@@ -508,24 +558,17 @@ export default {
         }
       },
       {
-        title: '参训学员人数',
+        title: '授课/课程日期 ',
-        dataIndex: 'studys',
+        dataIndex: 'beginTime',
-        key: 'studys',
+        key: 'beginTime',
-        elipsis: true,
+        elipsis: true, align: "center",
-        width: 120,
-      },
-      {
-        title: '评分',
-        dataIndex: 'score',
-        key: 'score',
-        elipsis: true,
         width: 120,
       },
       {
         title: '开课状态 ',
         dataIndex: 'status',
         key: 'status',
-        elipsis: true,
+        elipsis: true, align: "center",
         width: 120,
         customRender: (value) => {
           return (
@@ -540,11 +583,39 @@ export default {
           )
         }
       },
+      {
+        title: '内容分类',
+        dataIndex: 'teaching',
+        key: 'teaching',
+        elipsis: true, align: "center",
+        width: 120,
+      },
+      {
+        title: '授课时长(H) ',
+        dataIndex: 'duration',
+        key: 'duration',
+        elipsis: true, align: "center",
+        width: 120,
+      },
+      {
+        title: '参训人数',
+        dataIndex: 'studys',
+        key: 'studys',
+        elipsis: true, align: "center",
+        width: 120,
+      },
+      {
+        title: '评分',
+        dataIndex: 'score',
+        key: 'score',
+        elipsis: true, align: "center",
+        width: 120,
+      },
       {
         title: '是否生成课时费 ',
         dataIndex: 'feeCreated',
         key: 'feeCreated',
-        elipsis: true,
+        elipsis: true, align: "center",
         width: 120,
         customRender: (value) => {
           return (
@@ -563,8 +634,9 @@ export default {
         title: '操作 ',
         dataIndex: 'operation',
         key: 'operation',
-        elipsis: true,
+        elipsis: true, align: "center",
-        width: 300,
+       
+        fixed: "right",
         scopedSlots: { customRender: "action" },
       },
     ])
@@ -639,23 +711,21 @@ export default {
       state.pageSize1 = pageSize;
       getTableDate();
     };
-    // 新增讲师
+    // 新增授课
     const addTeacher = () => {
       state.teacherdialog1 = 0
       state.teacherdialog = true;
       state.teacherdialogtitle = '添加授课记录'
       //获取内部讲师级别
-      LecturerSystemLista()
-      getTeacherExpertiseLista()
-      getTeacherExpertisea()
 
     }
     //修改信息弹窗
     const handleModify = (record) => {
-      state.teacherdialog1 = 0
+      // state.teacherdialog1 = 0
       state.teacherdialog = true;
       state.teacherdialogtitle = '修改授课记录'
-      TeacherSystem(record)
+      state.lookTeacherId = record.teacherId
+      TeacherSystem()
     }
     //保存
     const createTeacherDialog = () => {
@@ -735,45 +805,45 @@ export default {
 
     //表格内查看数据操作
     const handleLook = (record) => {
-      state.teacherdialog1 = 1
+      // state.teacherdialog1 = 1
-      state.teacherdialog = true;
+      state.teachingdialog = true;
       state.teacherdialogtitle = '查看详情'
-      state.userNoid = record.userNo
+      // state.userNoid = record.userNo
       state.lookTeacherId = record.teacherId
       // // alert(record.grade)
-      TeacherSystem(record)
+      TeacherSystem()
       // let id = record.userNo
       // router.push({ path: '/insideteachingdetail', query: { id  } })
       // router.push({ path: '/InsideTeachingDetail' })
     }
-    //内部讲师详情
+    const cancelTeachingDialog =()=>{
-    const TeacherSystem = (record) => {
+      state.teachingdialog = false;
-      // getTeacherCourseList( state.lookTeacherId).then((res) => {
-      //     console.log("内部讲师详情", res.data);
-      //     state.formParam= res.data.data
-      // }) 
-      // .catch((err) => {
-      //     console.log("内部讲师详情", err);
-      //   });
-      state.formParam = {
-        teacher: record.teacher,
-        userNo: record.userNo,
-        departId: record.departId,
-        defaultTeachingTime: record.defaultTeachingTime,
-        tlevelName: record.tlevelName,
-        name: record.name,
-        beginTime: moment(record.beginTime, 'YYYY-MM-DD'),
-        // ref< moment.Moment >(moment(record.beginTime,'YYYY-MM-DD')),
-        //  record.beginTime,
-        duration: record.duration,
-        studys: record.studys,
-        score: record.score,
-        type: record.type,
-        remark: record.remark,
-        userNo: record.userNo,
-        type1: record.type1,
-        offcourseId: record.offcourseId,
     }
+    //内部授课详情
+    const TeacherSystem = () => {
+      getTeacherCourseList( state.lookTeacherId).then((res) => {
+          console.log("内部授课详情", res.data);
+          state.formParam= res.data.data
+      }) 
+      .catch((err) => {
+          console.log("内部授课详情", err);
+        });
+      // state.formParam = {
+      //   name: record.name,
+      //   userNo: record.userNo,
+      //   orgName:record.orgName,
+      //   departId: record.departId,
+      //   levelId: record.levelId,
+      //   tlevelName: record.tlevelName,
+      //   teacherNo: record.teacherNo,
+      //   beginTime: moment(record.beginTime, 'YYYY-MM-DD'),
+      //   // ref< moment.Moment >(moment(record.beginTime,'YYYY-MM-DD')),
+      //   //  record.beginTime,
+      //   status: record.status,
+      //   defaultTeachingTime: record.defaultTeachingTime,
+      //   studys: record.studys,
+      //   remark: record.remark,
+      // }
     }
     //导出功能
     const handleExport = () => {
@@ -819,7 +889,8 @@ export default {
       LecturerSystemLista,
       TeacherSystem,
       getOrganizationLista,
-      getOrganizationList,searchTimeChange
+      getOrganizationList,searchTimeChange,
+      cancelTeachingDialog
     }
   },
 };
@@ -903,11 +974,10 @@ export default {
   text-align: center;
 }
 
-.InsideLecturer {
+.InsideTeaching {
   width: 100%;
   height: 100%;
-  display: flex;
+
-  flex-direction: column;
 
   .filter {
     margin-left: 38px;
@@ -931,7 +1001,7 @@ export default {
   box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
   border-radius: 4px;
   position: absolute;
-  left: 50%;
+  left: 30%;
   top: 10%;
   // transform: translate(-50%, -50%);