feat:完善列表表格操作

This commit is contained in:
Ggysh-7
2022-10-09 22:20:51 +08:00
2 changed files with 877 additions and 758 deletions

File diff suppressed because it is too large Load Diff

View File

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