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

feat:授权名单 授权弹窗样式 二维码退出清除状态

Browse Source
This commit is contained in:
dongwug
2022-10-21 10:47:59 +08:00
parent 66e81e988c
commit ad174acb30
4 changed files with 1246 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,9 +79,11 @@
<!-- 选择线上还是面授课弹窗 -->
<a-modal
v-model:visible="of_hs"
:closable="false"
:closable="closableQR"
wrapClassName="sofModal"
:footer="null"
style="margin-top: 400px"
@cancel="of_exit"
>
<div
class="selectonlineface"
@@ -841,7 +843,7 @@
</a-modal>
<!-- 面授课程管理查看详情页面 -->
<!-- 操作授权页面 -->
<a-modal
<!-- <a-modal
v-model:visible="gpm_hs"
title="Title"
@ok="closeModal"
@@ -938,7 +940,7 @@
</div>
</div>
</div>
</a-modal>
</a-modal> -->
<!--操作授权页面 -->
<!--开课页面 -->
<a-modal
@@ -1014,20 +1016,30 @@
</div>
</div>
<!-- 无数据样式 -->
<div class="notable" :style="{ display: stm_hs ? 'none' : 'block' }">
<div
class="notable"
:style="{ display: stm_hs ? 'none' : 'block' }"
>
<div class="notablebox">
<div class="boxbody">
<div class="boximg"></div>
<div class="boxtitle"><span style="color:#FFB64E;font-size: 20px;">无课程</span></div>
<div class="boxtitle2"><span style="color:#878B92;">请点击新建开课，创建课程</span></div>
<div class="boxtitle">
<span style="color: #ffb64e; font-size: 20px">无课程</span>
</div>
<div class="boxtitle2">
<span style="color: #878b92">请点击新建开课，创建课程</span>
</div>
</div>
<div class="smallleft"></div>
<div class="smallright"></div>
<div class="smallright"></div>
</div>
</div>
<!-- 无数据样式 -->
<!-- 有数据表格 -->
<div class="stm_table" :style="{ display: stm_hs ? 'block' : 'none' }">
<div
class="stm_table"
:style="{ display: stm_hs ? 'block' : 'none' }"
>
<a-table
:columns="columns6"
:data-source="tableData6"
@@ -1406,17 +1418,28 @@
:closable="closableQR"
wrapClassName="QRModal"
style="margin-top: 400px"
destroyOnClose
@cancel="qr_exit"
>
<div class="QR" :style="{ display: QR_hs ? 'block' : 'none' }">
<div class="qr_header"></div>
<div class="qr_main">
<div class="qrm_header">
<div class="qr_icon"></div>
<div :style="{ display: qrQR_hs ? 'block' : 'none' }"><span>二维码</span></div>
<div :style="{ display: olQR_hs ? 'block' : 'none' }"><span>在线课</span></div>
<div :style="{ display: ftQR_hs ? 'block' : 'none' }"><span>面授课</span></div>
<div :style="{ display: ftsQR_hs ? 'block' : 'none' }"><span>面授课签到</span></div>
<div :style="{ display: qrQR_hs ? 'block' : 'none' }">
<span>二维码</span>
</div>
<div :style="{ display: olQR_hs ? 'block' : 'none' }">
<span>在线课</span>
</div>
<div :style="{ display: ftQR_hs ? 'block' : 'none' }">
<span>面授课</span>
</div>
<div :style="{ display: ftsQR_hs ? 'block' : 'none' }">
<span>面授课签到</span>
</div>
<div :style="{ display: vipftQR_hs ? 'block' : 'none' }">
<span>管理者面授课</span>
</div>
<div class="close_exit" @click="qr_exit"></div>
</div>
<div class="qrm_body"><div class="QR_img"></div></div>
@@ -1707,12 +1730,18 @@
<!-- 学员管理课程库-归属权抽屉 -->
<own-power v-model:ownpowervisible="ownpowervisible" />
<!-- 学员管理课程库-归属权抽屉 -->
<!-- 添加授权侧弹窗 -->
<div>
<corpowerlist v-model:corpowerlistVisible="corpowerlistvisible"/>
</div>
<!-- 添加授权侧弹窗 -->
</div>
</template>
<script>
import { reactive, toRefs, defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import OwnPower from "../../components/drawers/OwnPower.vue";
import Corpowerlist from "../../components/drawers/CorPowerlist.vue";
const columns1 = [
{
title: "序号",
@@ -1884,43 +1913,44 @@ const columns4 = [
align: "center",
},
];
const columns5 = [
{
title: "姓名",
dataIndex: "name",
key: "name",
width: "10%",
align: "left",
},
{
title: "归属组织",
dataIndex: "organization",
key: "organization",
width: "19%",
align: "center",
},
{
title: "岗位",
dataIndex: "position",
key: "position",
width: "19%",
align: "center",
},
{
title: "拥有权限",
dataIndex: "authority",
key: "authority",
width: "19%",
align: "center",
},
{
title: "操作",
dataIndex: "opacation",
key: "opacation",
width: "34%",
align: "center",
},
];
//授权弹窗的数据
// const columns5 = [
// {
// title: "姓名",
// dataIndex: "name",
// key: "name",
// width: "10%",
// align: "left",
// },
// {
// title: "归属组织",
// dataIndex: "organization",
// key: "organization",
// width: "19%",
// align: "center",
// },
// {
// title: "岗位",
// dataIndex: "position",
// key: "position",
// width: "19%",
// align: "center",
// },
// {
// title: "拥有权限",
// dataIndex: "authority",
// key: "authority",
// width: "19%",
// align: "center",
// },
// {
// title: "操作",
// dataIndex: "opacation",
// key: "opacation",
// width: "34%",
// align: "center",
// },
// ];
const columns6 = [
{
title: "序号",
@@ -2055,6 +2085,7 @@ const columns7 = [
export default defineComponent({
components: {
OwnPower,
Corpowerlist,
},
setup() {
const state = reactive({
@@ -2192,43 +2223,44 @@ export default defineComponent({
status: "已通过",
},
],
tableData5: [
{
key: 1,
name: "李明",
organization: "-",
position: "产品经理",
authority: "归属权",
},
{
key: 2,
name: "李洋",
organization: "-",
position: "产品经理",
authority: "查看权",
},
{
key: 3,
name: "小李",
organization: "-",
position: "产品经理",
authority: "管理权",
},
{
key: 4,
name: "雄安名",
organization: "-",
position: "产品经理",
authority: "管理权",
},
{
key: 5,
name: "王哥",
organization: "-",
position: "产品经理",
authority: "管理权",
},
],
//授权弹窗的数据
// tableData5: [
// {
// key: 1,
// name: "李明",
// organization: "-",
// position: "产品经理",
// authority: "归属权",
// },
// {
// key: 2,
// name: "李洋",
// organization: "-",
// position: "产品经理",
// authority: "查看权",
// },
// {
// key: 3,
// name: "小李",
// organization: "-",
// position: "产品经理",
// authority: "管理权",
// },
// {
// key: 4,
// name: "雄安名",
// organization: "-",
// position: "产品经理",
// authority: "管理权",
// },
// {
// key: 5,
// name: "王哥",
// organization: "-",
// position: "产品经理",
// authority: "管理权",
// },
// ],
tableData6: [
{
key: 1,
@@ -2358,7 +2390,7 @@ export default defineComponent({
om_1: false,
ft_1: false,
om_ckxq: false,
gpm_hs: false,
// gpm_hs: false,
stm_hs: false,
cstm_hs: false,
sm_hs: false,
@@ -2372,12 +2404,14 @@ export default defineComponent({
copy_hs: false,
nouse_hs: false,
// 二维码标题状态
qrQR_hs:false,
olQR_hs:false,
ftQR_hs:false,
ftsQR_hs:false,
qrQR_hs: false,
olQR_hs: false,
ftQR_hs: false,
ftsQR_hs: false,
vipftQR_hs:false,
//抽屉状态
ownpowervisible: false,
corpowerlistvisible: false,
value: "",
value5: "",
@@ -2454,7 +2488,7 @@ export default defineComponent({
<a-select-option value="权限名单" label="权限名单">
<div
onClick={() => {
state.gpm_hs = true;
state.corpowerlistvisible = true;
}}
>
权限名单
@@ -2500,7 +2534,6 @@ export default defineComponent({
state.QR_hs = true;
state.ftQR_hs = true;
}
}}
>
二维码
@@ -2556,7 +2589,7 @@ export default defineComponent({
<a-select-option value="权限名单" label="权限名单">
<div
onClick={() => {
state.gpm_hs = true;
state.corpowerlistvisible = true;
}}
>
权限名单
@@ -2564,7 +2597,7 @@ export default defineComponent({
</a-select-option>
<a-select-option value="归属权" label="归属权">
<div
onClick={() => {
onClick={() => {
state.ownpowervisible = true;
}}
>
@@ -2662,7 +2695,7 @@ export default defineComponent({
<a-select-option value="权限名单" label="权限名单">
<div
onClick={() => {
state.gpm_hs = true;
state.corpowerlistvisible = true;
}}
>
权限名单
@@ -2670,7 +2703,7 @@ export default defineComponent({
</a-select-option>
<a-select-option value="归属权" label="归属权">
<div
onClick={() => {
onClick={() => {
state.ownpowervisible = true;
}}
>
@@ -2787,6 +2820,7 @@ export default defineComponent({
class="jc"
onClick={() => {
state.QR_hs = true;
state.ftsQR_hs = true;
}}
>
签到
@@ -2841,6 +2875,7 @@ export default defineComponent({
<div
onClick={() => {
state.QR_hs = true;
state.vipftQR_hs = true;
}}
>
二维码
@@ -2999,6 +3034,7 @@ export default defineComponent({
};
const of_exit = () => {
state.of_hs = false;
state.valueE1 = "";
};
const hideShow = () => {
if (state.hideshow == true) {
@@ -3014,6 +3050,7 @@ export default defineComponent({
if (state.bs_hs == false) {
state.of_hs = false;
state.ft_hs = true;
state.valueE1 = "";
}
};
const ft_exit = () => {
@@ -3054,6 +3091,7 @@ export default defineComponent({
state.olQR_hs = false;
state.ftQR_hs = false;
state.ftsQR_hs = false;
state.vipftQR_hs = false;
};
const rg_exit = () => {
state.rg_hs = false;
@@ -3103,7 +3141,7 @@ export default defineComponent({
columns1,
columns2,
columns4,
columns5,
// columns5,
columns6,
columns7,
getTableDate,
@@ -3299,6 +3337,7 @@ export default defineComponent({
}
}
}
.selectonlineface {
z-index: 999;
width: 679px;
@@ -3439,6 +3478,7 @@ export default defineComponent({
}
}
}
.createschooltime {
z-index: 999;
width: 679px;
@@ -4612,51 +4652,51 @@ export default defineComponent({
}
}
}
.notable{
width:100%;
height:100%;
.notable {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
.notablebox{
.notablebox {
width: 412px;
height:212px;
background:linear-gradient(180deg, #FEF3DD 0%, #FFFAF0 100%);
height: 212px;
background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
border-radius: 10px;
display: flex;
justify-content: center;
display: flex;
justify-content: center;
text-align: center;
margin-top:77px;
margin-bottom:109px;
margin-top: 77px;
margin-bottom: 109px;
cursor: pointer;
position: relative;
.smallleft{
.smallleft {
position: absolute;
top:18px;
left:0px;
width:8px;
height:21px;
top: 18px;
left: 0px;
width: 8px;
height: 21px;
border-radius: 0px 4px 4px 0px;
background-color:#FFB64E;
background-color: #ffb64e;
}
.smallright{
.smallright {
position: absolute;
bottom:18px;
right:0px;
width:8px;
height:21px;
bottom: 18px;
right: 0px;
width: 8px;
height: 21px;
border-radius: 4px 0px 0px 4px;
background-color:#FFB64E;
background-color: #ffb64e;
}
.boxbody{
.boximg{
.boxbody {
.boximg {
width: 72px;
height:72px;
margin:32px auto 20px auto;
height: 72px;
margin: 32px auto 20px auto;
background-image: url(@/assets/images/coursewareManage/nostate.png);
background-size: 100% 100%;
}
.boxtitle{
margin-bottom:4px;
.boxtitle {
margin-bottom: 4px;
}
}
}