mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 10:56:46 +08:00
feat:完善列表表格操作
This commit is contained in:
Ggysh-7
File diff suppressed because it is too large
Load Diff
@@ -134,7 +134,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="2" tab="学员管理" force-render
|
<a-tab-pane key="2" tab="学员管理" force-render
|
||||||
><div class="sametab">
|
><div class="sametab"></div
|
||||||
|
></a-tab-pane>
|
||||||
|
<a-tab-pane key="3" tab="设置">
|
||||||
|
<div class="sametab">
|
||||||
<div class="Gcon">
|
<div class="Gcon">
|
||||||
<div class="pad"></div>
|
<div class="pad"></div>
|
||||||
<div class="Gin">
|
<div class="Gin">
|
||||||
@@ -143,14 +146,111 @@
|
|||||||
<div class="onetitle">关卡内容可见可学设置</div>
|
<div class="onetitle">关卡内容可见可学设置</div>
|
||||||
<div class="oneedi">编辑</div>
|
<div class="oneedi">编辑</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="onemain">fewfew</div>
|
<div class="onemain clearfix">
|
||||||
|
<div class="checkcon">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="cb1"
|
||||||
|
value="yulan"
|
||||||
|
class="in"
|
||||||
|
/>
|
||||||
|
<span class="yulan">预览其他关卡</span><br />
|
||||||
|
<div style="width: 10px; height: 4px"></div>
|
||||||
|
<span class="yulan2">学员可预览第</span
|
||||||
|
><span style="color: #4ea6ff">1</span><span>关-第</span
|
||||||
|
><span style="color: #4ea6ff">4</span><span>关内容</span>
|
||||||
|
</div>
|
||||||
|
<div class="checkcon" style="margin-top: 20px">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="cb1"
|
||||||
|
value="xuexi"
|
||||||
|
class="in"
|
||||||
|
/>
|
||||||
|
<span class="yulan">学习其他关卡</span><br />
|
||||||
|
<div style="width: 10px; height: 4px"></div>
|
||||||
|
<span class="yulan2">学员可预览第</span
|
||||||
|
><span style="color: #4ea6ff">1</span><span>关-第</span
|
||||||
|
><span style="color: #4ea6ff">4</span><span>关内容</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Gcon">
|
||||||
|
<div class="pad"></div>
|
||||||
|
<div class="Gin" style="margin-top: 0px">
|
||||||
|
<div class="headone">
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="onetitle">关卡晋级规则</div>
|
||||||
|
</div>
|
||||||
|
<div class="twomain">
|
||||||
|
<a-switch size="small" v-model:checked="checked2" />
|
||||||
|
<span class="info">启用关卡自动规则加入</span>
|
||||||
|
<div class="infor">
|
||||||
|
若开启“新建/编辑关卡-添加学员”支持设定自动加入规则，将于每日8点同步数据
|
||||||
|
</div>
|
||||||
|
<div :class="[checked2 ? 'chooseshow' : 'choo']">
|
||||||
|
<div class="fane">选择范围</div>
|
||||||
|
<div class="select">
|
||||||
|
<a-select
|
||||||
|
v-model:value="projectName"
|
||||||
|
style="
|
||||||
|
width: 250px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
"
|
||||||
|
placeholder="请选择部门"
|
||||||
|
:options="projectNameList"
|
||||||
|
@change="selectProjectName"
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
|
<div class="select">
|
||||||
|
<a-select
|
||||||
|
v-model:value="projectName2"
|
||||||
|
style="
|
||||||
|
width: 250px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
"
|
||||||
|
placeholder="请选择岗位"
|
||||||
|
:options="projectNameList2"
|
||||||
|
@change="selectProjectName2"
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btm">
|
||||||
|
<div class="bmo">关卡学习方案展示设置</div>
|
||||||
|
<div class="bmt">仅支持移动端</div>
|
||||||
|
<div class="chosecon">
|
||||||
|
<div class="chose">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="cb1"
|
||||||
|
value="lieb"
|
||||||
|
class="inl"
|
||||||
|
/><span class="sh">列表展示</span>
|
||||||
|
</div>
|
||||||
|
<div class="chose" style="margin-left: 20px">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="cb1"
|
||||||
|
value="lieb"
|
||||||
|
class="inl"
|
||||||
|
/><span class="sh">路径展示</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div></a-tab-pane
|
</div></a-tab-pane
|
||||||
>
|
>
|
||||||
<a-tab-pane key="3" tab="设置">
|
|
||||||
<div class="sametab">eee</div></a-tab-pane
|
|
||||||
>
|
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -164,8 +264,53 @@ export default {
|
|||||||
methods: {},
|
methods: {},
|
||||||
setup() {
|
setup() {
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
|
projectNameList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
value: "项目一",
|
||||||
|
label: "项目一",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
value: "项目二",
|
||||||
|
label: "项目二",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
value: "项目三",
|
||||||
|
label: "项目三",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
value: "项目四",
|
||||||
|
label: "项目四",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
projectNameList2: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
value: "项目一",
|
||||||
|
label: "项目一",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
value: "项目二",
|
||||||
|
label: "项目二",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
value: "项目三",
|
||||||
|
label: "项目三",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
value: "项目四",
|
||||||
|
label: "项目四",
|
||||||
|
},
|
||||||
|
],
|
||||||
activeKey: ref("1"),
|
activeKey: ref("1"),
|
||||||
value: ref(" "),
|
value: ref(" "),
|
||||||
|
checked2: false,
|
||||||
level: [
|
level: [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
@@ -191,8 +336,16 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
const selectProjectName = (value, index) => {
|
||||||
|
console.log("value", value, index);
|
||||||
|
};
|
||||||
|
const selectProjectName2 = (value, index) => {
|
||||||
|
console.log("value", value, index);
|
||||||
|
};
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
|
selectProjectName,
|
||||||
|
selectProjectName2,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -571,8 +724,7 @@ export default {
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
.Gin {
|
.Gin {
|
||||||
background-color: #bfa;
|
// background-color: #bfa;
|
||||||
|
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
.headone {
|
.headone {
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
@@ -595,8 +747,86 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.onemain {
|
.onemain {
|
||||||
margin-top: 30px;
|
margin-top: 20px;
|
||||||
margin-left: 55px;
|
margin-left: 55px;
|
||||||
|
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 14px;
|
||||||
|
.checkcon {
|
||||||
|
position: relative;
|
||||||
|
.in {
|
||||||
|
position: absolute;
|
||||||
|
// margin-top: 10px;
|
||||||
|
left: 0;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
.yulan {
|
||||||
|
// color: yellow;
|
||||||
|
margin-left: 22px;
|
||||||
|
// display: inline-block;
|
||||||
|
}
|
||||||
|
.yulan2 {
|
||||||
|
margin-left: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.twomain {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
.info {
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.infor {
|
||||||
|
margin-left: 38px;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #c7cbd2;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.chooseshow {
|
||||||
|
// background-color: red;
|
||||||
|
margin-left: 38px;
|
||||||
|
margin-top: 12px;
|
||||||
|
.fane {
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.choo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.btm {
|
||||||
|
margin-left: 38px;
|
||||||
|
margin-top: 20px;
|
||||||
|
.bmo {
|
||||||
|
color: #6f6f6f;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.bmt {
|
||||||
|
color: #c7cbd2;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.chosecon {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.chose {
|
||||||
|
position: relative;
|
||||||
|
.inl {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
.sh {
|
||||||
|
margin-left: 23px;
|
||||||
|
color: #6f6f6f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user