mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-06 17:36:44 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage
This commit is contained in:
songwc
@@ -65,6 +65,7 @@ ExaminationCenter.vue:考试中心页面
|
||||
|
||||
```
|
||||
ResearchManage.vue:调研管理页面
|
||||
ResearchAdd.vue:创建调研页面
|
||||
|
||||
```
|
||||
|
||||
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
@@ -11,6 +11,7 @@
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.2.17",
|
||||
"jquery": "^3.6.1",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0"
|
||||
@@ -6824,6 +6825,11 @@
|
||||
"@sideway/pinpoint": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
|
||||
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
|
||||
},
|
||||
"node_modules/js-message": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
|
||||
@@ -16576,6 +16582,11 @@
|
||||
"@sideway/pinpoint": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
|
||||
"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
|
||||
},
|
||||
"js-message": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.2.17",
|
||||
"jquery": "^3.6.1",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0"
|
||||
|
||||
BIN
src/assets/images/basicinfo/asterisk.png
Normal file
BIN
src/assets/images/basicinfo/asterisk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
BIN
src/assets/images/basicinfo/close.png
Normal file
BIN
src/assets/images/basicinfo/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 695 B |
BIN
src/assets/images/coursewareManage/add0.png
Normal file
BIN
src/assets/images/coursewareManage/add0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 B |
BIN
src/assets/images/coursewareManage/add1.png
Normal file
BIN
src/assets/images/coursewareManage/add1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
BIN
src/assets/images/projectadd/close.png
Normal file
BIN
src/assets/images/projectadd/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
BIN
src/assets/images/projectadd/return.png
Normal file
BIN
src/assets/images/projectadd/return.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -111,6 +111,13 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
if (n === "/systemmanage" || n === "/SystemManage") {
|
||||
state.list = [
|
||||
{
|
||||
name: "系统管理",
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@@ -153,7 +153,7 @@
|
||||
src="../assets/images/navleft/system.png"
|
||||
/>
|
||||
</div>
|
||||
<span>系统管理</span>
|
||||
<router-link to="/systemmanage">系统管理</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
@@ -287,6 +287,18 @@ export default {
|
||||
selectedKeys: "sub3-2",
|
||||
pagename: "课程管理",
|
||||
},
|
||||
{
|
||||
href: "/systemmanage",
|
||||
openKeys: "sub9",
|
||||
selectedKeys: "sub9",
|
||||
pagename: "系统管理",
|
||||
},
|
||||
{
|
||||
href: "/researchmanage",
|
||||
openKeys: "sub5",
|
||||
selectedKeys: "sub5",
|
||||
pagename: "调研管理",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@@ -79,6 +79,7 @@ export default {
|
||||
overflow-x: auto;
|
||||
.openItems {
|
||||
width: 272px;
|
||||
// min-width: 250px;
|
||||
height: 50px;
|
||||
border: 1px solid #edf2fa;
|
||||
border-left: 0px;
|
||||
|
||||
245
src/views/TestPage.vue
Normal file
245
src/views/TestPage.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="testPage">
|
||||
<h2>div横向拖拽排序</h2>
|
||||
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li class="drag"><a href="#">导航一</a></li>
|
||||
<li class="drag"><a href="#">导航二导航</a></li>
|
||||
<li class="drag"><a href="#">导航导航导航三</a></li>
|
||||
<li class="drag"><a href="#">导航导航四</a></li>
|
||||
<li class="drag"><a href="#">导五</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import $ from "jquery";
|
||||
export default {
|
||||
name: "TestPage",
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
var range = { x: 0, y: 0 }; //鼠标元素偏移量
|
||||
var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
|
||||
|
||||
var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
|
||||
|
||||
var theDiv = null,
|
||||
move = false;
|
||||
|
||||
var choose = false; //拖拽对象 拖拽状态 选中状态
|
||||
|
||||
// var theDivId = 0;
|
||||
// var theDivHeight = 0;
|
||||
var theDivHalf = 0;
|
||||
|
||||
// var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
|
||||
|
||||
var tarDiv = null,
|
||||
tarFirst,
|
||||
tempDiv; //要插入的目标元素的对象, 临时的虚线对象
|
||||
|
||||
var initPos = { x: 0, y: 0 };
|
||||
|
||||
var theDivWidth; //拖拽对象的宽度
|
||||
|
||||
$(".drag").each(function () {
|
||||
$(this).mousedown(function (event) {
|
||||
choose = true;
|
||||
|
||||
//拖拽对象
|
||||
|
||||
theDiv = $(this);
|
||||
|
||||
//记录拖拽元素初始位置
|
||||
|
||||
initPos.x = theDiv.position().left;
|
||||
|
||||
initPos.y = theDiv.position().top;
|
||||
|
||||
//鼠标元素相对偏移量
|
||||
|
||||
range.x = event.pageX - theDiv.position().left;
|
||||
|
||||
range.y = event.pageY - theDiv.position().top;
|
||||
|
||||
// theDivId = theDiv.index();
|
||||
|
||||
theDivWidth = theDiv.width();
|
||||
|
||||
theDivHalf = theDivWidth / 2;
|
||||
|
||||
theDiv.removeClass("drag");
|
||||
|
||||
theDiv.addClass("drag-dash");
|
||||
|
||||
theDiv.css({ left: initPos.x + "px", top: initPos.y + "px" });
|
||||
|
||||
// 创建新元素 插入拖拽元素之前的位置(虚线框)
|
||||
|
||||
$("<div class='dash'></div>").insertBefore(theDiv);
|
||||
|
||||
tempDiv = $(".dash");
|
||||
|
||||
$(".dash").css("width", theDivWidth);
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
$(document)
|
||||
.mouseup(function () {
|
||||
if (!choose) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!move) {
|
||||
//恢复对象的初始样式
|
||||
|
||||
theDiv.removeClass("drag-dash");
|
||||
|
||||
theDiv.addClass("drag");
|
||||
|
||||
tempDiv.remove(); // 删除新建的虚线div
|
||||
|
||||
choose = false;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
|
||||
|
||||
//恢复对象的初始样式
|
||||
|
||||
theDiv.removeClass("drag-dash");
|
||||
|
||||
theDiv.addClass("drag");
|
||||
|
||||
tempDiv.remove(); // 删除新建的虚线div
|
||||
|
||||
move = false;
|
||||
|
||||
choose = false;
|
||||
|
||||
return false;
|
||||
})
|
||||
.mousemove(function (event) {
|
||||
if (!choose) {
|
||||
return false;
|
||||
}
|
||||
|
||||
move = true;
|
||||
|
||||
lastPos.x = event.pageX - range.x;
|
||||
|
||||
lastPos.y = event.pageY - range.y;
|
||||
|
||||
lastPos.x1 = lastPos.x + theDivWidth;
|
||||
|
||||
// 拖拽元素随鼠标移动
|
||||
|
||||
theDiv.css({ left: lastPos.x + "px", top: lastPos.y + "px" });
|
||||
|
||||
// 拖拽元素随鼠标移动 查找插入目标元素
|
||||
|
||||
var $main = $(".drag"); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
|
||||
|
||||
$main.each(function () {
|
||||
tarDiv = $(this);
|
||||
|
||||
tarPos.x = tarDiv.position().left;
|
||||
|
||||
tarPos.y = tarDiv.position().top;
|
||||
|
||||
tarPos.x1 = tarPos.x + tarDiv.width() / 2;
|
||||
|
||||
tarFirst = $main.eq(0); // 获得第一个元素\
|
||||
|
||||
let tarFirstX = tarFirst.position().left + theDivHalf; // 第一个元素对象的中心纵坐标
|
||||
|
||||
//拖拽对象 移动到第一个位置
|
||||
|
||||
if (lastPos.x <= tarFirstX) {
|
||||
tempDiv.insertBefore(tarFirst);
|
||||
}
|
||||
|
||||
//判断要插入目标元素的 坐标后， 直接插入
|
||||
|
||||
if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
|
||||
tempDiv.insertAfter(tarDiv);
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.testPage {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
|
||||
overflow-x: auto;
|
||||
.box {
|
||||
position: relative;
|
||||
|
||||
margin-left: 15px;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
padding-right: 0px;
|
||||
|
||||
width: 810px;
|
||||
|
||||
border: blue solid 1px;
|
||||
}
|
||||
|
||||
.box ul {
|
||||
list-style: none;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drag {
|
||||
float: left;
|
||||
|
||||
border: #000 solid 1px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box ul li a {
|
||||
display: block;
|
||||
|
||||
padding: 10px 25px;
|
||||
}
|
||||
|
||||
.drag-dash {
|
||||
position: absolute;
|
||||
|
||||
border: #000 solid 1px;
|
||||
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
.dash {
|
||||
float: left;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -16,22 +16,21 @@
|
||||
</div>
|
||||
<div class="select fitems">
|
||||
<a-select
|
||||
v-model:value="projectName"
|
||||
dropdownClassName="dropdown-style"
|
||||
style="width: 200px"
|
||||
placeholder="请选择状态"
|
||||
:options="projectNameList"
|
||||
@change="selectProjectName"
|
||||
:options="options1"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="select fitems">
|
||||
<a-select
|
||||
v-model:value="projectName"
|
||||
dropdownClassName="dropdown-style"
|
||||
style="width: 200px"
|
||||
placeholder="请选择内容分类"
|
||||
:options="projectNameList"
|
||||
@change="selectProjectName"
|
||||
:options="options2"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
@@ -63,15 +62,95 @@
|
||||
</div>
|
||||
<div class="btn btn4">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">新建课程</div>
|
||||
<div class="btnText" @click="ft_hShow">新建课程</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索框及按钮 -->
|
||||
</div>
|
||||
|
||||
<!-- 新建面授课弹窗 -->
|
||||
<div class="faceteach" :style="{display:ft_hs ? 'block' :'none' }">
|
||||
<div class="ft_header"></div>
|
||||
<div class="ft_main">
|
||||
<div class="m_header">
|
||||
<div class="add_icon"></div>
|
||||
<span>请选择课程类型</span>
|
||||
<div class="add_exit">x</div>
|
||||
</div>
|
||||
<div class="m_body">
|
||||
<div class="b_header">
|
||||
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
|
||||
<span style="margin-right:14px;">课程名称</span>
|
||||
<div class="b_input">
|
||||
<a-input v-model:value="value" style="width: 440px ;height:40px;border-radius: 8px;" placeholder="请输入课程名称" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="b_sub">
|
||||
<div class="bs_header">
|
||||
<div class="b_left">课程命名规则</div>
|
||||
<div class="b_right" @click="hideShow" >
|
||||
<div class="b_zk" :style="{display:hideshow ? 'block' :'none' }">
|
||||
<span style="color: #4EA6FF;">收起</span>
|
||||
</div>
|
||||
<div class="b_sq" :style="{display:hideshow ? 'none' :'block' }">
|
||||
<span style="color: #4EA6FF;">展开</span>
|
||||
</div>
|
||||
<div class="b_icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bl_detail" :style="{display:hideshow ? 'block' :'none' }">
|
||||
<span style="color: #999BA3;">
|
||||
1、课程名称统一不加书名号。<br/>
|
||||
2、项目名称、属地等信息如需体现在课程名称中，请放在课程名称信息
|
||||
之后，如“时间管理（GROW180项目）”或“时间管理（B*）”确保首先
|
||||
看到的是课程内容主题。<br/>
|
||||
3、同一课程如先后有多个版本，原则上仅开放最新版本，旧版本应停用
|
||||
版本如必须以年份标明，请以“沟通技巧（2022年）”的方式呈现。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b_center">
|
||||
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
|
||||
<span style="margin-right:14px;">授课形式</span>
|
||||
<div class="bc_boxl">
|
||||
<div class="ol_checkbox"><div class="checkbtn"></div></div>
|
||||
<span style="margin:auto 31px auto 5px;">线上</span>
|
||||
</div>
|
||||
<div class="bc_boxr" @click="bs_hShow">
|
||||
<div class="ol_checkbox"><div class="checkbtn"></div></div>
|
||||
<span style="margin:auto 31px auto 5px;">面授</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b_sup" :style="{display:bs_hs ? 'block' :'none' }">
|
||||
<div class="bs_box">
|
||||
<span style="font-weight: 900; color: red;margin-right: 6px;">⃰</span>
|
||||
<span style="margin-right:14px;">是否设置目录</span>
|
||||
<div class="ol_checkbox">
|
||||
<div class="checkbtn"></div>
|
||||
</div>
|
||||
<span style="margin:auto 31px auto 5px;">线上</span>
|
||||
<div class="ol_checkbox">
|
||||
<div class="checkbtn"></div>
|
||||
</div>
|
||||
<span style="margin:auto 31px auto 5px;">面授</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b_footer">
|
||||
<div class="btn btn5">
|
||||
<div class="btnText">取消</div>
|
||||
</div>
|
||||
<div class="btn btn6" >
|
||||
<div class="btnText">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 新建面授课弹窗 -->
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1300, y: 1000 }">
|
||||
<a-table :columns="columns" :data-source="data" :scroll="{ x: 800 }">
|
||||
<template #bodyCell="{ column }">
|
||||
<template v-if="column.key === 'operation'">
|
||||
<a>action</a>
|
||||
@@ -83,7 +162,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import { reactive, toRefs, defineComponent, ref } from 'vue';
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
width: 200,
|
||||
@@ -200,20 +279,93 @@ const data = [{
|
||||
pubtime: '2022-07-20 9:30',
|
||||
ynuse: '启用',
|
||||
kkty:true,
|
||||
}];
|
||||
}];
|
||||
export default defineComponent({
|
||||
data() {
|
||||
const options1 = ref([ {
|
||||
value: 'value1',
|
||||
label: '请选择状态',
|
||||
},{
|
||||
value: 'uncommitted',
|
||||
label: '未提交',
|
||||
}, {
|
||||
value: 'tocheck',
|
||||
label: '待审核',
|
||||
}, {
|
||||
value: 'checked',
|
||||
label: '已审核',
|
||||
}, {
|
||||
value: 'uncheck',
|
||||
label: '审核未通过',
|
||||
}]);
|
||||
|
||||
const options2 = ref([{
|
||||
value: 'value2',
|
||||
label: '请选择内容分类',
|
||||
}, {
|
||||
value: 'leadership',
|
||||
label: '领导力',
|
||||
}, {
|
||||
value: 'ingeneral',
|
||||
label: '通用力',
|
||||
}, {
|
||||
value: 'profession',
|
||||
label: '专业力',
|
||||
}]);
|
||||
|
||||
const state = reactive({
|
||||
ft_hs:false,
|
||||
hideshow: false,
|
||||
bs_hs:true,
|
||||
});
|
||||
|
||||
const ft_hShow = () => {
|
||||
if (state.ft_hs == false) {
|
||||
state.ft_hs = true
|
||||
}
|
||||
}
|
||||
|
||||
const hideShow = () => {
|
||||
if (state.hideshow == false) {
|
||||
state.hideshow = true
|
||||
} else {
|
||||
state.hideshow = false
|
||||
}
|
||||
}
|
||||
|
||||
const bs_hShow = () => {
|
||||
if (state.bs_hs == true) {
|
||||
state.bs_hs = false
|
||||
} else {
|
||||
state.bs_hs = true
|
||||
}
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
data,
|
||||
columns,
|
||||
options1,
|
||||
options2,
|
||||
ft_hShow,
|
||||
hideShow,
|
||||
bs_hShow,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .dropdown-style{
|
||||
// .ant-select-dropdown-menu{
|
||||
// background: #6767bd;
|
||||
// }
|
||||
// .ant-select-dropdown-menu-item {
|
||||
// color: #4EA6FF !important;
|
||||
// }
|
||||
// }
|
||||
.courseManage {
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -222,8 +374,8 @@ export default defineComponent({
|
||||
margin-left: 38px;
|
||||
margin-top: 30px;
|
||||
.filter {
|
||||
width: calc(69% - 34px);
|
||||
margin-right: 34px;
|
||||
width: calc(70% - 40px) ;
|
||||
margin-right: 30px ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
@@ -328,6 +480,131 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faceteach{
|
||||
z-index: 1000;
|
||||
width: 679px;
|
||||
height: 525px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
.ft_header{
|
||||
position: absolute;
|
||||
width:calc(100%);
|
||||
height: 40px;
|
||||
background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
|
||||
}
|
||||
.ft_main{
|
||||
width:calc(100%);
|
||||
position: relative;
|
||||
.m_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding-left: 26px;
|
||||
font-size: 16px;
|
||||
.add_icon{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
background-image: url(@/assets/images/coursewareManage/add1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.add_exit{
|
||||
position: absolute;
|
||||
right:42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.m_body{
|
||||
width: 88%;
|
||||
.checkbtn{
|
||||
width: 7.8px;
|
||||
height: 7.8px;
|
||||
border: 1px solid #4EA6FF;
|
||||
background-color: #4EA6FF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ol_checkbox{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.b_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 21px auto 14px 80px;
|
||||
}
|
||||
.b_sub{
|
||||
margin-left: 164px;
|
||||
.bs_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.b_right{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bl_detail{
|
||||
top: 24px;
|
||||
}
|
||||
.b_center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 21px auto 14px 80px;
|
||||
.bc_boxl,.bc_boxr{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.b_sup{
|
||||
margin: 21px auto 14px 52px;
|
||||
.bs_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.b_footer{
|
||||
width: 100%;
|
||||
margin-left: 212px;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
.btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14px;
|
||||
flex-shrink: 0;
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.btn5{
|
||||
border: 1px solid rgba(64, 158, 255, 1);
|
||||
color: #4EA6FF ;
|
||||
}
|
||||
.btn6{
|
||||
background-color: #4EA6FF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableBox {
|
||||
margin: 20px 38px 30px;
|
||||
}
|
||||
|
||||
@@ -2,100 +2,107 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<span class="title">创建/编辑单层项目</span>
|
||||
<span class="goback">返回</span>
|
||||
<div class="goback"><span class="return"></span><span class="returntext">返回</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="main">
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left: 140px">*</span>项目名称
|
||||
<a-input
|
||||
style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
|
||||
placeholder="请输入项目名称"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-input>
|
||||
<div class="main">
|
||||
<div class="name">
|
||||
<div class="d">*</div>
|
||||
<div class="inname">项目名称</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="valueE" placeholder="请输入项目名称"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="d" style="margin-left: 26px">*</div>
|
||||
<div class="inname" style="width: 50px">分类</div>
|
||||
<div class="in" style="margin-left: 2px">
|
||||
<a-select
|
||||
v-model:value="value1"
|
||||
placeholder="四个养成"
|
||||
:size="size"
|
||||
style="width: 100%"
|
||||
:options="options"
|
||||
></a-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left:166px">*</span>分类
|
||||
<a-select
|
||||
style="width: 505px; height: 40px; margin-left: 13px"
|
||||
placeholder="四个养成"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
<div class="name">
|
||||
<div class="d" style="margin-left: 9px">*</div>
|
||||
<div class="inname">封面图</div>
|
||||
<div class="box" style="width: 100px;height: 100px;border: 1px solid rgba(78, 166, 255, 1);border-radius: 5px">
|
||||
<div class="box1"></div>
|
||||
<div class="box2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left:152px">*</span>封面图
|
||||
<span class="photo"></span>
|
||||
<div class="name">
|
||||
<div class="d">*</div>
|
||||
<div class="inname">项目时间</div>
|
||||
<div class="in">
|
||||
<a-range-picker separator="至" style="width: 100%;height: 40px;border-radius: 5px" show-time />
|
||||
</div>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left:140px">*</span>项目时间
|
||||
<a-range-picker v-model:value="value2" show-time style="margin-left:10px;width: 505px"/>
|
||||
<div class="name">
|
||||
<div class="d">*</div>
|
||||
<div class="inname">项目经理</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="valueE" placeholder="请选择项目经理"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left: 140px">*</span>项目经理
|
||||
<a-input
|
||||
style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
|
||||
placeholder="请选择项目经理"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-input>
|
||||
<div class="name">
|
||||
<div class="d">*</div>
|
||||
<div class="inname">资源归属</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="valueE" placeholder="自动带出 可修改"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left: 140px">*</span>资源归属
|
||||
<a-input
|
||||
style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
|
||||
placeholder="自动带出 可修改"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-input>
|
||||
<div class="name" style="height: 80px">
|
||||
<div class="d"> </div>
|
||||
<div class="inname">项目说明</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="valueE" placeholder="请输入项目说明" style="height: 80px"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center;margin-left: 150px">
|
||||
项目说明
|
||||
<a-input
|
||||
style="width: 500px; height: 80px; border-radius: 8px;margin-left: 13px"
|
||||
placeholder="请输入说明"
|
||||
type="textarea"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-input>
|
||||
<div class="name">
|
||||
<div class="inname" style="width: 107px;margin-left: -15px">同步学习记录</div>
|
||||
<div class="in">
|
||||
<a-radio v-model:checked="checked"><span style="width: 100%;color: rgba(109, 117, 132, 1); font-size: 14px">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center;margin-left: 130px">
|
||||
同步学习记录
|
||||
<a-radio v-model:checked="checked" style="margin-left: 3px">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</a-radio>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left: 140px">*</span>项目级别
|
||||
<a-input
|
||||
style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
|
||||
placeholder="集团级/组织级/现地级/部门级"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-input>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left: 140px">*</span>培训体系
|
||||
<a-input
|
||||
style="width: 500px; height: 40px; border-radius: 8px;margin-left: 13px"
|
||||
placeholder="集团级/组织级/现地级/部门级"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-input>
|
||||
</div>
|
||||
<div class="select" style="margin-top: 20px;algin-items: center">
|
||||
<span class="star" style="margin-left: 110px">*</span>是否BOEU实施
|
||||
<a-radio v-model:checked="checked">BOEU实施</a-radio>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="d">*</div>
|
||||
<div class="inname">项目级别</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="d">*</div>
|
||||
<div class="inname">培训体系</div>
|
||||
<div class="in">
|
||||
<a-input v-model:value="valueE" placeholder="集团级/组织级/现地级/部门级"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="d" style="margin-left: -30px">*</div>
|
||||
<div class="inname" style="width: 107px;margin-left: 9px">是否BOEU实施</div>
|
||||
<div class="in">
|
||||
<a-radio v-model:checked="checked"><span style="width: 100%;color: rgba(109, 117, 132, 1); font-size: 14px">BOEU实施</span></a-radio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template">
|
||||
<div class="select" style="margin-top: 20px;margin-left: 43px;algin-items: center">
|
||||
模板<a-select
|
||||
style="width: 505px; height: 40px; margin-left: 13px"
|
||||
placeholder="请选择模板"
|
||||
allowClear
|
||||
showSearch
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="inname" style="width: 50px">模板</div>
|
||||
<div class="in" style="margin-left: 2px">
|
||||
<a-select
|
||||
v-model:value="value1"
|
||||
placeholder="请选择模板"
|
||||
:size="size"
|
||||
style="width: 100%"
|
||||
:options="options"
|
||||
></a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
@@ -127,37 +134,141 @@
|
||||
//font-weight: 500;
|
||||
}
|
||||
.goback {
|
||||
color: #4EA6FF;
|
||||
font-size: 14px;
|
||||
padding-right: 39px;
|
||||
padding-top: 37px;
|
||||
|
||||
padding-right: 70px;
|
||||
//padding-top: 37px;
|
||||
position: relative;
|
||||
.return {
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-top: 17px;
|
||||
margin-right: 10px;
|
||||
background-image: url("../../assets/images/projectadd/return.png");
|
||||
}
|
||||
.returntext {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
color: #4EA6FF;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
.template {
|
||||
float: right;
|
||||
}
|
||||
.main {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
float: left;
|
||||
border-right: 1px solid rgba(153, 155, 163, 0.3);
|
||||
.star {
|
||||
color: #FF4E4E;
|
||||
margin-right: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.photo {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-left: 13px;
|
||||
border: 1px solid #4EA6FF;
|
||||
border-radius: 8px;
|
||||
//text-align: center;
|
||||
//line-height: 100px;
|
||||
//color: #4EA6FF;
|
||||
}
|
||||
.name {
|
||||
width: 78%;
|
||||
// background-color: lightcoral;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
//height: 40px;
|
||||
// border: 1px solid black;
|
||||
.d {
|
||||
margin-top: 8px;
|
||||
font-size: 25px;
|
||||
color: #ff4e4e;
|
||||
}
|
||||
.box {
|
||||
position: relative;
|
||||
.box1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 50px;
|
||||
margin-left: -25px;
|
||||
margin-top: -5px;
|
||||
border-top: 2px solid rgba(78, 166, 255, 1);
|
||||
}
|
||||
.box2 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: 50px;
|
||||
//margin-left: -5px;
|
||||
margin-top: -25px;
|
||||
border-left: 2px solid rgba(78, 166, 255, 1);
|
||||
}
|
||||
}
|
||||
.inname {
|
||||
color: #6f6f6f;
|
||||
font-size: 14px;
|
||||
margin-left: 7px;
|
||||
width: 65px;
|
||||
}
|
||||
.in {
|
||||
margin-left: 14px;
|
||||
width: 81%;
|
||||
.ant-radio-wrapper {
|
||||
|
||||
}
|
||||
.ant-input {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.ant-select-selector {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.template {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
float: right;
|
||||
.name {
|
||||
width: 78%;
|
||||
// background-color: lightcoral;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
// border: 1px solid black;
|
||||
.d {
|
||||
margin-top: 8px;
|
||||
font-size: 25px;
|
||||
color: #ff4e4e;
|
||||
}
|
||||
.inname {
|
||||
color: #6f6f6f;
|
||||
font-size: 14px;
|
||||
margin-left: 7px;
|
||||
width: 65px;
|
||||
}
|
||||
.in {
|
||||
margin-left: 14px;
|
||||
width: 81%;
|
||||
.ant-input {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.ant-select-selector {
|
||||
border-radius: 5px;
|
||||
// height: 120%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
|
||||
@@ -155,6 +155,7 @@ const columns = [
|
||||
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>
|
||||
@@ -223,25 +224,9 @@ export default {
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -251,6 +236,7 @@ export default {
|
||||
state: "草稿",
|
||||
creater: "毛继禹",
|
||||
time: "2022-07-20 14:00:03",
|
||||
hasChildren: true,
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
@@ -268,24 +254,6 @@ export default {
|
||||
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,
|
||||
|
||||
0
src/views/research/ResearchAdd.vue
Normal file
0
src/views/research/ResearchAdd.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="systemManage">
|
||||
<div
|
||||
style="
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
background: #388be1;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="showDrawer"
|
||||
>
|
||||
添加投票
|
||||
</div>
|
||||
<div>
|
||||
<a-drawer
|
||||
v-model:visible="visible"
|
||||
class="drawerStyle"
|
||||
style="color: red"
|
||||
width="70%"
|
||||
title="添加投票"
|
||||
placement="right"
|
||||
@after-visible-change="afterVisibleChange"
|
||||
>
|
||||
<div class="drawerMain">
|
||||
<div class="header">
|
||||
<div class="headerTitle">添加投票</div>
|
||||
<img
|
||||
style="width: 29px; height: 29px; cursor: pointer"
|
||||
src="../../assets/images/basicinfo/close.png"
|
||||
@click="closeDrawer"
|
||||
/>
|
||||
</div>
|
||||
<!-- 投票名称 -->
|
||||
<div class="vote">
|
||||
<div style="font-size: 20px">*</div>
|
||||
<div>投票名称：</div>
|
||||
<div>
|
||||
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 投票名称 -->
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
|
||||
export default {
|
||||
name: "SystemManage",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
visible: true,
|
||||
});
|
||||
|
||||
const afterVisibleChange = (bool) => {
|
||||
console.log("visible", bool);
|
||||
};
|
||||
|
||||
const showDrawer = () => {
|
||||
state.visible = true;
|
||||
};
|
||||
const closeDrawer = () => {
|
||||
state.visible = false;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
afterVisibleChange,
|
||||
showDrawer,
|
||||
closeDrawer,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.systemManage {
|
||||
width: 100%;
|
||||
}
|
||||
.drawerStyle {
|
||||
.ant-drawer-content-wrapper {
|
||||
max-width: 1000px;
|
||||
.ant-drawer-header {
|
||||
display: none !important;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.drawerMain {
|
||||
min-width: 600px;
|
||||
margin: 0px 32px 0px 32px;
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header {
|
||||
height: 73px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.headerTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
.vote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user