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:
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

352
src/components/drawers/CorPowerlist.vue Normal file
View File

@@ -0,0 +1,352 @@
<template>
<a-drawer
:visible="corpowerlistVisible"
class="drawerStyle corpowerlistDrawer"
width="80%"
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="contentMain">
<div class="main_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">姓名：</div>
<div class="fi_input">
<a-input
v-model:value="inputV1"
style="width: 264px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="main_table">
<a-table
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:columns="columns1"
:data-source="tableData1"
:loading="tableDataTotal === -1 ? true : false"
: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()
// })
},
}"
>
<template #bodyCell="{ column }">
<template v-if="column.key === 'opacation'">
<a>取消授权</a>
</template>
</template>
</a-table>
</div>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
const columns1 = [
{
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 rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
export default {
name: "CorPoerlist",
props: {
corpowerlistVisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
tableData1: [
{
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: "管理权",
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
inputV1:'',
});
const closeDrawer = () => {
ctx.emit("update:corpowerlistVisible", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
columns1,
rowSelection,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.corpowerlistDrawer {
.drawerMain {
.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;
}
}
.contentMain {
margin-top: 32px;
.main_items {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
flex-wrap: wrap;
.mi_ipts {
display: flex;
margin-bottom: 20px;
.mii_ipt {
display: flex;
align-items: center;
margin-right: 24px;
.ipt_name {
white-space: nowrap;
}
}
}
.mi_btns {
display: flex;
margin-left: 38px;
margin-bottom: 20px;
cursor: pointer;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background: rgb(64, 158, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/search0.png");
}
.btnText {
color: rgb(255, 255, 255);
}
}
.btn2 {
background: rgb(255, 255, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/reset1.png");
}
.btnText {
color: rgb(64, 158, 255);
}
}
.btn1:hover {
background: rgb(255, 255, 255);
.search {
background-image: url("@/assets/images/courseManage/search1.png");
}
.btnText {
color: #388be1;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("@/assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
}
.main_btns {
height: 72px;
width: 100%;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>

1402
src/components/drawers/OwnPower.vue
View File

File diff suppressed because it is too large Load Diff

1
src/components/drawers/Ownership.vue
View File

@@ -765,6 +765,7 @@ export default {
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
cursor: pointer;
}
}
}

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;
}
}
}