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

feat:完善列表表格操作

Browse Source
This commit is contained in:
Ggysh-7
2022-10-09 22:08:27 +08:00
parent 53072721d0
commit fbe0452802
1 changed files with 384 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
src/views/courselibrary/CoursewareManage.vue
View File

@@ -36,13 +36,11 @@
></a-select>
</div>
<div class="select fitems">
<a-time-range-picker />
<!-- <a-date-picker
v-model="selectTime"
type="date"
placeholder="创建时间"
style="width: 286px"
/> -->
<a-range-picker
v-model:value="value2"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</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>