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

feat：添加外链接口对接 完善添加直播

Browse Source
This commit is contained in:
songwc
2022-11-01 12:21:18 +08:00
parent 2c3edeaf24
commit 06633222be
4 changed files with 1167 additions and 912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

510
src/components/drawers/AddRef.vue
View File

@@ -1,268 +1,300 @@
<template>
<a-drawer
:visible="addrefVisible"
class="drawerStyle addrefDrawer"
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_left">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">外链名称：</span>
<a-drawer
:visible="addrefVisible"
class="drawerStyle addrefDrawer"
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_left">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 424px; height: 32px"
placeholder="请输入外链名称"
<span style="margin-right: 3px">外链名称：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 424px; height: 32px"
placeholder="请输入外链名称"
maxlength="20"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">链接：</span>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">链接：</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV2"
style="width: 424px; height: 32px"
placeholder="请输入链接"
/>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV2"
style="width: 424px; height: 32px"
placeholder="请输入链接"
/>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">外链说明：</span>
</div>
<div class="textarea">
<a-textarea
v-model:value="textV1"
placeholder="请输入外链说明"
allow-clear
/>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">外链说明：</span>
</div>
<div class="textarea">
<a-textarea
v-model:value="textV1"
placeholder="请输入外链说明"
allow-clear
/>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</a-drawer>
</template>
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="createExternalChain">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
const rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
"selectedRows: ",
selectedRows
);
import { reactive, toRefs, ref } from "vue";
import * as api from "../../api/indexExternalChain";
import { message } from "ant-design-vue";
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: "AddRef",
// components: {
// },
props: {
addrefVisible: {
type: Boolean,
default: false,
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
export default {
name: "AddRef",
// components: {
// },
props: {
addrefVisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
inputV2: "",
textV1:"",
});
const closeDrawer = () => {
ctx.emit("update:addrefVisible", false);
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
inputV2: "",
textV1: "",
});
const closeDrawer = () => {
ctx.emit("update:addrefVisible", false);
state.inputV2 = "";
state.inputV1 = "";
state.textV1 = "";
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
const createExternalChain = () => {
console.log(Object.prototype.toString.call(state.inputV1));
console.log(Object.prototype.toString.call(state.inputV2));
console.log(Object.prototype.toString.call(state.textV1));
let obj = {
createUser: 0,
createTime: "",
linkAddress: state.inputV2,
linkDescription: state.textV1,
linkFlag: "",
linkId: 0,
linkName: state.inputV1,
linkTag: "",
updateTime: "",
updateUser: 0,
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
rowSelection,
};
},
};
</script>
api
.createExternalChain(obj)
.then((res) => {
console.log(res.data.data);
message.success("提交成功");
closeDrawer();
})
.catch((err) => {
console.log(err);
});
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
rowSelection,
createExternalChain,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addrefDrawer {
.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;
}
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addrefDrawer {
.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 {
display: flex;
justify-content: space-between;
.main_left {
padding-right: 30px;
flex: 1;
border-right: 1px solid #e8e8e8;
.main_item {
}
.contentMain {
display: flex;
justify-content: space-between;
.main_left {
padding-right: 30px;
flex: 1;
border-right: 1px solid #e8e8e8;
.main_item {
display: flex;
align-items: center;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
.sign {
margin-right: 5px;
}
}
.main_item2 {
.btnbox {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.kqszbox {
.qdqtbox {
margin-left: 56px;
}
.setbox {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 24px;
.timerbox {
margin-top: 6px;
margin-right: 32px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
.btnbox2 {
display: flex;
flex-direction: column;
justify-content: flex-start;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
}
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
}
}
.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;
.main_item2 {
display: flex;
align-items: flex-start;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.kqszbox {
.qdqtbox {
margin-left: 56px;
}
.setbox {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 24px;
.timerbox {
margin-top: 6px;
margin-right: 32px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
.btnbox2 {
display: flex;
flex-direction: column;
justify-content: flex-start;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
}
}
}
}
}
.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>
}
</style>