hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-12 20:36:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

列表样式调整

Browse Source
This commit is contained in:
wangxuemei
2024-07-29 15:15:17 +08:00
parent aec896db63
commit 7ad55026d4
1 changed files with 180 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
src/views/lecturer/InsideTeaching.vue
View File

@@ -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;">
<a-form layout="inline">
<div class="filter">
<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-select disabled class="draitem" v-model:value="formParam.departId" placeholder="请选择讲师体系"
<a-form-item label="讲师体系" name="systemId">
<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: '课程编号 ',
dataIndex: 'userNo',
key: 'userNo',
elipsis: true,
width: 120,
},
// {
// title: '课程编号 ',
// dataIndex: 'userNo',
// key: 'userNo',
// elipsis: true, align: "center",
// 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,
width: 400,
elipsis: true, align: "center",
// 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,
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,
elipsis: true, align: "center",
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: '参训学员人数',
dataIndex: 'studys',
key: 'studys',
elipsis: true,
width: 120,
},
{
title: '评分',
dataIndex: 'score',
key: 'score',
elipsis: true,
title: '授课/课程日期 ',
dataIndex: 'beginTime',
key: 'beginTime',
elipsis: true, align: "center",
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,
width: 300,
elipsis: true, align: "center",
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.teacherdialog = true;
// state.teacherdialog1 = 1
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 TeacherSystem = (record) => {
// 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 cancelTeachingDialog =()=>{
state.teachingdialog = false;
}
//内部授课详情
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%);