feat:合并

This commit is contained in:
李晓鸽
2022-10-10 18:13:01 +08:00
3 changed files with 816 additions and 169 deletions

View File

@@ -48,13 +48,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>
@@ -380,13 +378,33 @@
<!-- 表格 -->
<div class="tableBox">
<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
: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>
@@ -395,141 +413,6 @@
import { reactive, toRefs, defineComponent, ref } from "vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
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,
key: "operation",
fixed: "right",
align: "center",
},
];
const data = [
{
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,
},
];
function getBase64(img, callback) {
const reader = new FileReader();
@@ -543,6 +426,285 @@ 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("");
@@ -585,9 +747,11 @@ export default defineComponent({
};
return {
...toRefs(state),
fileList,
loading,
imageUrl,
tableDataFunc,
handleChange,
beforeUpload,
};
@@ -647,7 +811,6 @@ export default defineComponent({
state.of_hs = true;
}
};
const hideShow = () => {
if (state.hideshow == false) {
state.hideshow = true;
@@ -655,7 +818,6 @@ export default defineComponent({
state.hideshow = false;
}
};
const bs_hShow = () => {
if (state.bs_hs == true) {
state.bs_hs = false;
@@ -670,8 +832,6 @@ export default defineComponent({
};
return {
...toRefs(state),
data,
columns,
options1,
options2,
of_hShow,
@@ -938,7 +1098,7 @@ export default defineComponent({
}
.faceteach {
// display: none;
display: none;
z-index: 1000;
width: 1358px;
min-width: 1000px;
@@ -1090,6 +1250,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>