Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage

This commit is contained in:
dongwug
2022-10-08 18:28:24 +08:00
4 changed files with 498 additions and 387 deletions

BIN
src/assets/px.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View File

@@ -335,31 +335,46 @@ export default {
}
});
let openpages = store.state.openpages;
for (let i = 0; i < openpages.length; i++) {
openpages[i].active = false;
}
for (let i = 0; i < openpages.length; i++) {
openpages[i].active = false;
if (n.toLowerCase() === openpages[i].href) {
console.log("已存在", openpages[i]);
openpages[i].active = true;
break;
} else {
if (i === openpages.length - 1) {
let pagename = state.keysList.filter((a) => {
return a.href === n.toLowerCase();
});
if (pagename && pagename.length !== 0) {
let obj = {
pagename: pagename[0].pagename,
href: n.toLowerCase(),
active: true,
};
openpages.push(obj);
if (openpages.length === 0) {
let pagename = state.keysList.filter((a) => {
return a.href === n.toLowerCase();
});
if (pagename && pagename.length !== 0) {
let obj = {
pagename: pagename[0].pagename,
href: n.toLowerCase(),
active: true,
};
openpages.push(obj);
}
} else {
for (let i = 0; i < openpages.length; i++) {
openpages[i].active = false;
}
for (let i = 0; i < openpages.length; i++) {
openpages[i].active = false;
if (n.toLowerCase() === openpages[i].href) {
console.log("已存在", openpages[i]);
openpages[i].active = true;
break;
} else {
if (i === openpages.length - 1) {
let pagename = state.keysList.filter((a) => {
return a.href === n.toLowerCase();
});
if (pagename && pagename.length !== 0) {
let obj = {
pagename: pagename[0].pagename,
href: n.toLowerCase(),
active: true,
};
openpages.push(obj);
}
}
}
}
}
localStorage.setItem("openpages", JSON.stringify(openpages));
store.commit("chengeOpenpages", openpages);

View File

@@ -44,16 +44,19 @@ export default {
state.openList.map((item, key) => {
if (item.href === value.href) {
if (state.openList.length === 1) {
state.openList.splice(key, 1);
$router.push({ path: "/learningpath" });
} else {
if (key === state.openList.length - 1) {
$router.push({ path: state.openList[key - 1].href });
state.openList.splice(key, 1);
} else {
$router.push({ path: state.openList[key + 1].href });
if (state.openList[0].href !== "/learningpath") {
state.openList.splice(key, 1);
}
$router.push({ path: "/learningpath" });
} else {
if (value.active) {
if (key === state.openList.length - 1) {
$router.push({ path: state.openList[key - 1].href });
} else {
$router.push({ path: state.openList[key + 1].href });
}
}
state.openList.splice(key, 1);
}
}
});

View File

@@ -8,24 +8,14 @@
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="请输入项目名称"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
</div>
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="请输入项目经理"
placeholder="请输入路径名称"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
</div>
<div class="select">
<a-select
v-model:value="projectName"
@@ -38,11 +28,16 @@
></a-select>
</div>
<div class="select">
<a-date-picker
<!-- <a-date-picker
v-model="selectTime"
type="date"
placeholder="创建时间"
placeholder="时间"
style="width: 270px"
/> -->
<a-range-picker
v-model:value="value2"
separator="至"
:placeholder="['开始时间', '结束时间']"
/>
</div>
</div>
@@ -55,121 +50,107 @@
<div class="search"></div>
<div class="btnText">重置</div>
</div>
<router-link to="/projectadd">
<!-- <router-link to="/projectadd">
<div class="btn btn3">
<div class="search"></div>
<div class="btnText">创建项目</div>
<div class="btnText">创建路径</div>
</div>
</router-link>
</router-link> -->
<div class="btn btn3" @click="handleOut">
<div class="search"></div>
<div class="btnText">创建路径</div>
</div>
</div>
</div>
<!-- 搜索框及按钮 -->
<!-- 表格 -->
<div class="tableBox">
<a-table
:columns="columns"
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700, y: 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()
// })
},
}"
:pagination="
tableDataTotal > 10
? false
: {
// disabled: true,
display: false,
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 :class="out ? 'out' : 'unout'">
<div class="top">
<img class="topimg" src="../../assets/images/courseManage/add1.png" />
<div class="topc">创建路径</div>
<div @click="handleOut" style="margin-left: 500px; cursor: pointer">
x
</div>
</div>
<div class="mid clearfix">
<div class="name">
<div class="d">*</div>
<div class="inname">路径图名称</div>
<div class="in">
<a-input v-model:value="valueE" />
</div>
</div>
<div class="bac">
<div class="d">*</div>
<div class="inname">路径图背景</div>
<div class="in">
<!-- <img class="im" src="../../assets/px.jpg" />
<img class="im" src="../../assets/px.jpg" />
<img class="im" src="../../assets/px.jpg" /> -->
<div
@click="chooseImg(item.id)"
v-for="item in imgData"
:key="item.key"
>
<img class="im" :src="item.source" />
</div>
</div>
</div>
<div class="info">
<div class="inname">路径说明</div>
<div class="in">
<a-textarea v-model:value="valuei" />
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleOut">取消</button>
<button class="samtn btn2" @click="handleOut">确定</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
const columns = [
{
title: "项目名称",
dataIndex: "projectName",
key: "projectName",
width: 280,
// align: "center",
ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text, record) => {
// console.log(text, record);
// return <span>{text.text}</span>;
// },
},
{
title: "项目经理",
dataIndex: "manager",
key: "manager",
width: 100,
align: "center",
},
{
title: "状态",
dataIndex: "state",
// width: "30%",
key: "state",
width: 100,
align: "center",
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 180,
align: "center",
},
{
title: "操作",
dataIndex: "opacation",
key: "opacation",
width: 300,
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" }} class="more">
<span>更多</span>
<div class="moreArrow"></div>
<div class="moreItems"></div>
</span>
</div>
);
},
},
];
import { reactive, toRefs, onMounted, ref } from "vue";
export default {
name: "learningPath",
setup() {
const state = reactive({
projectNameList: [
@@ -194,251 +175,173 @@ export default {
label: "项目四",
},
],
projectName: null,
out: false,
number: null,
selectTime: null,
tableData: [
{
key: 1,
projectName:
"管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1管理者进阶1",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: 5,
projectName: "管理者进阶5",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: 7,
projectName:
"管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7管理者进阶7",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 8,
projectName: "管理者进阶8",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
{
key: 6,
projectName: "管理者进阶6",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
number: 1,
manager: "产品经理上升路径",
state: "已发布",
creater: "管理员",
pubtime: "2022-07-20 14:00:03",
cretime: "2022-07-20 14:00:03",
haspub: false,
},
{
key: 2,
projectName: "管理者进阶2",
manager: "黄华 刘俊",
number: 2,
manager: "程序员升级路径",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
creater: "管理员",
pubtime: "2022-07-20 14:00:03",
cretime: "2022-07-20 14:00:03",
haspub: true,
},
{
key: 3,
projectName: "管理者进阶3",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
hasChildren: true,
children: [
{
key: 35,
projectName: "管理者进阶35",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
{
key: 37,
projectName: "管理者进阶37",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 38,
projectName: "管理者进阶38",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
},
{
key: 36,
projectName: "管理者进阶36",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
],
number: 3,
manager: "ui成长之路",
state: "已停用",
creater: "管理员",
pubtime: "2022-07-20 14:00:03",
cretime: "2022-07-20 14:00:03",
haspub: false,
},
{
key: 4,
projectName: "管理者进阶4",
manager: "黄华 刘俊",
number: 4,
manager: "ui成长之路",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
creater: "管理员",
pubtime: "2022-07-20 14:00:03",
cretime: "2022-07-20 14:00:03",
haspub: true,
},
],
imgData: [
{
id: 1,
source: require("../../assets/px.jpg"),
},
{
key: 4,
projectName: "管理者进阶5",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
id: 2,
source: require("../../assets/px.jpg"),
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
},
{
key: 4,
projectName: "管理者进阶",
manager: "黄华 刘俊",
state: "草稿",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
id: 3,
source: require("../../assets/px.jpg"),
},
],
currentPage: 1,
tableDataTotal: 20,
pageSize: 10,
value1: " ",
value2: ref(),
valueE: ref(" "),
valueEE: ref(" "),
valuei: ref(" "),
});
const tableDataFunc = () => {
const columns = [
{
title: "序号",
dataIndex: "number",
key: "number",
width: 100,
align: "center",
className: "h",
// ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text, record) => {
// console.log(text, record);
// return <span>{text.text}</span>;
// },
},
{
title: "路径图名称",
dataIndex: "manager",
key: "manager",
width: 100,
align: "center",
ellipsis: true,
className: "h",
},
{
title: "状态",
dataIndex: "state",
// width: "30%",
key: "state",
width: 100,
align: "center",
className: "h",
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
align: "center",
className: "h",
},
{
title: "发布时间",
dataIndex: "pubtime",
key: "pubtime",
width: 180,
align: "center",
className: "h",
},
{
title: "创建时间",
dataIndex: "cretime",
key: "cretime",
width: 180,
align: "center",
className: "h",
},
{
title: "操作",
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 200,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
console.log(text);
return (
<div class="opa">
<div class="opacation">
<span class={text.record.haspub ? "activecls" : "errorCls"}>
发布
</span>
<span style={{ "margin-left": "25px" }}>编辑</span>
<span 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;
};
onMounted(() => {
// console.log("执行");
});
@@ -449,21 +352,36 @@ export default {
// console.log("惦记了");
console.log("e", e, a);
};
const handleOut = () => {
state.out = !state.out;
};
const chooseImg = (id) => {
console.log(id);
};
return {
...toRefs(state),
columns,
selectProjectName,
expandTable,
handleOut,
tableDataFunc,
chooseImg,
};
},
};
</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.learningPath {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
// position: relative;
.filter {
margin-left: 38px;
margin-right: 38px;
@@ -493,6 +411,7 @@ export default {
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
background-size: 100%;
}
@@ -557,42 +476,216 @@ export default {
}
.tableBox {
margin: 20px 38px 30px;
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
}
.opacation {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
// line-height: 36px;
.more {
position: relative;
.moreArrow {
width: 13px;
height: 7px;
.out {
display: block;
position: absolute;
top: 90px;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.d {
margin-top: 8px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
.bac {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// border: 1px solid black;
.d {
margin-top: 18px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
display: flex;
justify-content: space-between;
.im {
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #fff;
}
}
}
}
.unout {
display: none;
}
.opa {
display: flex;
justify-content: right;
.opacation {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
// line-height: 36px;
.activecls {
display: inline-block;
background-image: url("../../assets/images/navtop/down.png");
background-size: 100%;
margin: 2px;
margin-left: 7px;
}
.moreItems {
width: 80px;
height: 70px;
.errorCls {
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;
.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;
}
}
}
}