feat:修改单选框不能取消问题 部分弹窗退出清除状态

This commit is contained in:
dongwug
2022-10-21 15:45:09 +08:00
10 changed files with 649 additions and 430 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 862 B

View File

@@ -266,6 +266,7 @@ textarea {
//抽屉--------------------------------------------------------
.drawerStyle {
// transform: translateX(0px) !important;
.ant-drawer-content-wrapper {
max-width: 1050px;

View File

@@ -220,9 +220,11 @@ export default {
gang: "产品经理",
cur: "-",
jin: "-",
time: "缺勤",
state: "异常",
signIn: false, //签到
signOut: false, //签退
leave: false, //请假
},
{
key: 2,
@@ -231,8 +233,11 @@ export default {
gang: "产品经理",
cur: "2022-10-31 23:12",
jin: "-",
time: "签到",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 3,
@@ -241,8 +246,11 @@ export default {
gang: "产品经理",
cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "常",
time: "迟到",
state: "常",
signIn: false, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 4,
@@ -251,8 +259,11 @@ export default {
gang: "产品经理",
cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "常",
time: "退",
state: "常",
signIn: true, //签到
signOut: false, //签退
leave: false, //请假
},
{
key: 5,
@@ -263,6 +274,9 @@ export default {
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 6,
@@ -273,6 +287,9 @@ export default {
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
name: "张三",
@@ -282,6 +299,9 @@ export default {
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 8,
@@ -292,6 +312,9 @@ export default {
jin: "2022-10-31 23:12",
time: "请假",
state: "正常",
signIn: false, //签到
signOut: false, //签退
leave: true, //请假
},
],
options: [
@@ -328,6 +351,43 @@ export default {
state.selectedRowKeys = selectedRowKeys;
};
const getTableData = () => {
let arr = state.tableData;
arr.map((value) => {
// console.log("value", value);
value.opacation = (
<div class="opa">
<a-checkbox
checked={value.signIn}
onChange={(e) => {
console.log("点击签到", e);
}}
>
签到
</a-checkbox>
<a-checkbox
checked={value.signOut}
onChange={(e) => {
console.log("点击签退", e);
}}
>
签退
</a-checkbox>
<a-checkbox
checked={value.leave}
onChange={(e) => {
console.log("点击请假", e);
}}
>
请假
</a-checkbox>
</div>
);
});
state.tableData = arr;
};
getTableData();
const tableDataFunc = () => {
const columns = [
{
@@ -402,16 +462,16 @@ export default {
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 210,
width: 130,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
return (
<div class="opa">
<a-checkbox-group />
</div>
);
},
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: () => {
// return (
// <div class="opa">
// <a-checkbox-group />
// </div>
// );
// },
},
];
return columns;

View File

@@ -2,7 +2,7 @@
<a-drawer
:visible="addfaceteachVisible"
class="drawerStyle addfaceteachDrawer"
width="80%"
width="90%"
title="添加面授"
placement="right"
@after-visible-change="afterVisibleChange"
@@ -116,7 +116,7 @@
v-model:value="inputV3"
style="width: 384px; height: 32px"
/>
<span style="margin-left: 5px">分钟</span>
<span style="margin-left: 5px; width: 30px">分钟</span>
</div>
</div>
<div class="main_item">
@@ -142,24 +142,37 @@
<span style="margin-right: 3px">考勤设置</span>
</div>
<div class="kqszbox">
<div class="qdqtbox"><div class="qdbtn"><div class="btntext">签到</div></div></div>
<div class="qdqtbox">
<div class="qdbtn"><div class="btntext">签到</div></div>
</div>
<div class="setbox">
<div class="timerbox">
<span>开始前</span>
<a-input style="width: 88px; height: 32px" :v-model:value="inputV5"></a-input>
<a-input
style="width: 88px; height: 32px"
:v-model:value="inputV5"
></a-input>
<span style="color: #999999; margin-left: 8px">分钟</span>
</div>
<div class="timerbox">
<span>开始后</span>
<a-input style="width: 88px; height: 32px" :v-model:value="inputV6"></a-input>
<a-input
style="width: 88px; height: 32px"
:v-model:value="inputV6"
></a-input>
<span style="color: #999999; margin-left: 8px">分钟</span>
</div>
</div>
<div class="qdqtbox"><div class="qtbtn"><div class="btntext">签退</div></div></div>
<div class="qdqtbox">
<div class="qtbtn"><div class="btntext">签退</div></div>
</div>
<div class="setbox">
<div class="timerbox">
<span>结束前</span>
<a-input style="width: 88px; height: 32px" :v-model:value="inputV7"></a-input>
<a-input
style="width: 88px; height: 32px"
:v-model:value="inputV7"
></a-input>
<span style="color: #999999; margin-left: 8px"
>分钟提前签退则记为早退</span
>
@@ -373,6 +386,7 @@ export default {
display: flex;
justify-content: space-between;
.main_left {
height: 1080px;
padding-right: 30px;
flex: 1;
border-right: 1px solid #e8e8e8;

View File

@@ -55,7 +55,6 @@
</div>
</div>
</a-drawer>
</template>
<script>

View File

@@ -224,9 +224,11 @@ export default {
gang: "产品经理",
cur: "-",
jin: "-",
time: "缺勤",
state: "异常",
signIn: false, //签到
signOut: false, //签退
leave: false, //请假
},
{
key: 2,
@@ -235,8 +237,11 @@ export default {
gang: "产品经理",
cur: "2022-10-31 23:12",
jin: "-",
time: "签到",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 3,
@@ -245,8 +250,11 @@ export default {
gang: "产品经理",
cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "常",
time: "迟到",
state: "常",
signIn: false, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 4,
@@ -255,8 +263,11 @@ export default {
gang: "产品经理",
cur: "2022-10-31 23:12",
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "常",
time: "退",
state: "常",
signIn: true, //签到
signOut: false, //签退
leave: false, //请假
},
{
key: 5,
@@ -267,6 +278,9 @@ export default {
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 6,
@@ -277,6 +291,9 @@ export default {
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
name: "张三",
@@ -286,6 +303,9 @@ export default {
jin: "2022-10-31 23:12",
time: "签到/签退",
state: "正常",
signIn: true, //签到
signOut: true, //签退
leave: false, //请假
},
{
key: 8,
@@ -296,22 +316,26 @@ export default {
jin: "2022-10-31 23:12",
time: "请假",
state: "正常",
signIn: false, //签到
signOut: false, //签退
leave: true, //请假
},
],
options: [
tableOptions: [
{
label: "Apple",
value: "Apple",
label: "签到",
value: "1",
},
{
label: "Pear",
value: "Pear",
label: "签退",
value: "2",
},
{
label: "Orange",
value: "Orange",
label: "请假",
value: "3",
},
],
// selectOption: [],
});
const selectProjectName = (value, index) => {
console.log("value", value, index);
@@ -332,6 +356,42 @@ export default {
state.selectedRowKeys = selectedRowKeys;
};
const getTableData = () => {
let arr = state.tableData;
arr.map((value) => {
// console.log("value", value);
value.opacation = (
<div class="opa">
<a-checkbox
checked={value.signIn}
onChange={(e) => {
console.log("点击签到", e);
}}
>
签到
</a-checkbox>
<a-checkbox
checked={value.signOut}
onChange={(e) => {
console.log("点击签退", e);
}}
>
签退
</a-checkbox>
<a-checkbox
checked={value.leave}
onChange={(e) => {
console.log("点击请假", e);
}}
>
请假
</a-checkbox>
</div>
);
});
state.tableData = arr;
};
getTableData();
const tableDataFunc = () => {
const columns = [
{
@@ -406,16 +466,25 @@ export default {
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 210,
width: 130,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
return (
<div class="opa">
<a-checkbox-group />
</div>
);
},
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: () => {
// return (
// <div class="opa">
// <a-checkbox-group
// // value={state.selectOption}
// name="checkboxgroup"
// options={state.tableOptions}
// onChange={(e) => {
// console.log("eee", e);
// // state.selectOption = e;
// }}
// />
// </div>
// );
// },
},
];
return columns;
@@ -428,6 +497,7 @@ export default {
onSelectChange,
showEntryScore,
tableDataFunc,
getTableData,
};
},
};
@@ -678,7 +748,14 @@ export default {
background: #f6f9fd;
}
.opa {
background-color: #bfa;
background-color: rgba(255, 255, 255, 0);
.ant-checkbox + span {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
line-height: 22px;
margin-top: 5px;
}
}
}
// .tab {

View File

@@ -33,7 +33,7 @@
<!-- 导入学员上传 -->
<!-- 导入学员上传有状态-正在上传 -->
<div class="alreadybox">
<div class="alimg"></div>
<div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div>
<div class="uping">正在上传</div>
<div class="progress">
@@ -48,7 +48,7 @@
<div class="uploadstate">上传失败</div>
<!-- 导入学员上传有状态-上传失败 -->
<div class="alreadybox">
<div class="alimg"></div>
<div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div>
<div class="uping" style="color: #FF7474">上传失败</div>
<div class="progress">
@@ -64,7 +64,7 @@
<div class="uploadstate" style="margin-top: 74px">上传成功</div>
<!-- 导入学员上传有状态-上传成功 -->
<div class="alreadybox">
<div class="alimg"></div>
<div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div>
<div class="uping" style="color: #35AE69">上传成功</div>
<div class="progress">
@@ -221,12 +221,12 @@ export default {
cursor: pointer;
}
.alimg {
width: 28px;
height: 32px;
width: 32px;
height: 34px;
position: absolute;
top: 66px;
left: 24px;
background: green;
//background: green;
}
.upproject {
position: absolute;

View File

@@ -168,12 +168,30 @@
</div>
</div>
<div class="selecteds">
<div class="chose">李明</div>
<div class="chose"></div>
<div class="chose">李二明</div>
<div class="chose">李明</div>
<div class="chose">李大明</div>
<div class="chose"></div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
</div>
</div>
</div>
@@ -448,20 +466,17 @@ export default {
};
</script>
<style scoped lang="scss" >
<style lang="scss" >
.stuadd {
.ant-pagination-options {
margin-top: 10px !important;
}
.ant-drawer-content-wrapper {
// max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
// .ant-drawer-content-wrapper {
// // max-width: 1000px;
// .ant-drawer-header {
// display: none !important;
// }
// .ant-drawer-body {
// padding: 0;
// }
// }
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
@@ -488,6 +503,7 @@ export default {
display: flex;
height: 80%;
.left {
// overflow-y: auto;
width: 65%;
height: 100%;
border-right: 1px solid rgba(233, 233, 233, 1);
@@ -502,9 +518,19 @@ export default {
align-items: center;
margin-top: 10px;
.namee {
color: rgba(0, 0, 0, 0.8500);
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
}
.ant-select {
height: 40px;
}
.ant-select-selector {
height: 100%;
border-radius: 8px;
}
.ant-select-selection-search-input {
height: 40px;
}
}
.btns {
display: flex;
@@ -516,11 +542,11 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
color: #ffffff;
font-size: 14px;
background: #409EFF;
background: #409eff;
border-radius: 8px;
border: 1px solid #409EFF;
border: 1px solid #409eff;
cursor: pointer;
.wz {
margin-left: 10px;
@@ -532,12 +558,12 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: #409EFF;
color: #409eff;
font-size: 14px;
background: #FFFFFF;
background: #ffffff;
border-radius: 8px;
cursor: pointer;
border: 1px solid #409EFF;
border: 1px solid #409eff;
.wz {
margin-left: 10px;
}
@@ -618,9 +644,19 @@ export default {
> td {
background: rgba(250, 250, 250, 1);
}
.ant-table-selection-column {
padding: 0 !important;
}
// table tr td.ant-table-selection-column {
// text-align: right;
// }
// .ant-checkbox-wrapper {
// align-items: center;
// margin-top: -2px;
// }
.pa {
// left: 0;
margin-top: 15px;
margin-top: 5px;
width: 100%;
// height: 20px;
// background-color: red;
@@ -628,21 +664,38 @@ export default {
justify-content: center;
// position: absolute;
// bottom: 20px;
.ant-pagination-prev {
margin-top: 10px;
}
.ant-pagination-next {
margin-top: 10px;
}
.ant-pagination-item {
margin-top: 10px;
}
.ant-pagination-options {
margin-top: 10px;
}
}
}
.tab2 {
display: flex;
align-items: center;
margin-top: 10px;
.organize {
color: rgba(0, 0, 0, 0.8500);
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
}
.ant-select {
border-radius: 8px !important;
}
.ant-cascader {
width: 264px;
height: 40px;
border-radius: 8px;
border-radius: 8px !important;
.ant-select-selector {
height: 100%;
border-radius: 8px;
}
.ant-select-selection-search-input {
height: 40px;
@@ -657,13 +710,18 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 40px;
flex-wrap: wrap;
.already {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
margin-left: 32px;
white-space: nowrap;
// margin-bottom: 20px;
}
.clbox {
margin-left: 30px;
display: flex;
justify-content: center;
align-items: center;
@@ -671,13 +729,16 @@ export default {
width: 104px;
height: 32px;
border-radius: 4px;
background: #409EFF;
background: #409eff;
.colose {
width: 16px;
height: 16px;
border-radius: 8px;
background: #FFFFFF;
position: relative;
width: 18px;
height: 18px;
// border-radius: 8px;
// background: #ffffff;
// position: relative;
background-image: url(../../assets/images/basicinfo/ch.png);
background-size: 100%;
margin-right: 4px;
}
.allclear {
color: rgba(255, 255, 255, 1);
@@ -701,6 +762,16 @@ export default {
border: 1px solid rgba(56, 139, 225, 1);
color: rgba(56, 139, 225, 1);
font-size: 12px;
position: relative;
.ch {
position: absolute;
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
cursor: pointer;
}
}
}
}

View File

@@ -35,7 +35,6 @@
<div class="delete">删除</div>
</div>
<div class="groupin">
<a-input
v-model:value="value"
placeholder="宇宙第一最强小组"
@@ -156,7 +155,7 @@ export default {
}
}
.groupl {
color: rgba(0, 0, 0, 0.8500);
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
margin-top: 36px;
}
@@ -177,7 +176,6 @@ export default {
color: #ffffff;
margin-left: 5px;
font-size: 14px;
}
}
.zhu {

View File

@@ -3122,4 +3122,3 @@ export default {
}
}
</style>