hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-11 11: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); background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px; right: -8px;
top: -8px; top: -8px;
cursor: pointer;
} }
} }
} }

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

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