mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-07 01:46:43 +08:00
feat:完善列表表格操作
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -134,7 +134,10 @@
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<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="pad"></div>
|
||||
<div class="Gin">
|
||||
@@ -143,14 +146,111 @@
|
||||
<div class="onetitle">关卡内容可见可学设置</div>
|
||||
<div class="oneedi">编辑</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></a-tab-pane
|
||||
>
|
||||
<a-tab-pane key="3" tab="设置">
|
||||
<div class="sametab">eee</div></a-tab-pane
|
||||
>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,8 +264,53 @@ export default {
|
||||
methods: {},
|
||||
setup() {
|
||||
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"),
|
||||
value: ref(" "),
|
||||
checked2: false,
|
||||
level: [
|
||||
{
|
||||
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 {
|
||||
...toRefs(state),
|
||||
selectProjectName,
|
||||
selectProjectName2,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -571,8 +724,7 @@ export default {
|
||||
width: 40px;
|
||||
}
|
||||
.Gin {
|
||||
background-color: #bfa;
|
||||
|
||||
// background-color: #bfa;
|
||||
margin-top: 30px;
|
||||
.headone {
|
||||
// background-color: red;
|
||||
@@ -595,8 +747,86 @@ export default {
|
||||
}
|
||||
}
|
||||
.onemain {
|
||||
margin-top: 30px;
|
||||
margin-top: 20px;
|
||||
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