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

style:投票页面修改

Browse Source
This commit is contained in:
zhangyc
2022-11-13 22:28:23 +08:00
parent e0d474ad85
commit 307e53dbf0
14 changed files with 2462 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

529
src/components/drawers/EvList.vue Normal file
View File

@@ -0,0 +1,529 @@
<template>
<a-drawer
:visible="EvalListVisible"
class="drawerStyle addonlineDrawer"
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_items">
<div class="mi_ipts">
<div class="mii_ipt">
<div class="ipt_name">测评信息：</div>
<div class="fi_input">
<a-input
v-model:value="value1"
style="width: 240px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
/>
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="main_table">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns"
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div class="pa">
<a-pagination
v-if="total > 10"
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="total"
class="pagination"
@change="changePagination"
/>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="checkFinish">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
import * as api from "../../api/indexEval";
export default {
name: "EvList",
props: {
EvalListVisible: {
type: Boolean,
default: false,
},
evaluationTypeId: {
type: Number,
default: null,
},
evaluationTypeName:{
type: String,
default: "",
},
},
setup(props, ctx) {
const state = reactive({
tableData1: [
{
key: "1",
num: "JDF2022071100001",
name: "时间管理课程",
content: "通用力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "2",
num: "JDF2022071100001",
name: "管理能力课程",
content: "领导力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "3",
num: "JDF2022071100001",
name: "快速换模SMED",
content: "通用力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "4",
num: "JDF2022071100001",
name: "巧妙对话人见人夸",
content: "领导力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "5",
num: "JDF2022071100001",
name: "管理能力课程",
content: "领导力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "6",
num: "JDF2022071100001",
name: "时间管理课程",
content: "领导力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "7",
num: "JDF2022071100001",
name: "时间管理课程",
content: "领导力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "8",
num: "JDF2022071100001",
name: "时间管理课程",
content: "领导力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
{
key: "9",
num: "JDF2022071100001",
name: "时间管理课程",
content: "领导力",
teacher: "BOE教师",
creator: "管理员",
time: "2022-10-31 23:12:00",
},
],
currentPage: 1,
tableDataTotal: 100,
pageSize: 10,
vlue1:"",
tabledata: [
],
});
const options1 = ref([
{
value: "value1",
label: "请选择状态",
},
]);
const columns1 = [
{
title: "课程编号",
width: "20%",
dataIndex: "num",
key: "num",
align: "center",
},
{
title: "title",
width: "20%",
dataIndex: "name",
key: "name",
align: "center",
},
{
title: "备注",
width: "13%",
dataIndex: "content",
key: "content",
align: "center",
},
{
title: "状态",
width: "13%",
dataIndex: "teacher",
key: "teacher",
align: "center",
},
{
title: "价格",
width: "13%",
dataIndex: "creator",
key: "creator",
align: "center",
},
{
title: "可答题人数",
width: "20%",
dataIndex: "time",
key: "time",
align: "center",
},
];
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);
},
});
const closeDrawer = () => {
ctx.emit("update:EvalListVisible", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
getEvalList();
};
const checkFinish =() =>{
ctx.emit("update:evaluationTypeId", state.evaluationTypeId);
ctx.emit("update:evaluationTypeName", state.evaluationTypeName);
closeDrawer();
}
const changePagination = (page) => {
state.currentPage = page;
getEvalList();
};
const getTableDataList = (tableData) => {
let data = tableData;
let array = [];
data.map((value) => {
let obj = {
key: value.studentId,
projectId: value.projectId, //项目id
groupId: value.groupId, //小组id
group: value.groupName, //小组名
studentId: value.studentId, //学生id
currentStageId: value.currentStageId, //当前关卡id
name: value.name, //用户名
bum: value.userInfoBo.deptName, //部门
gangw: value.userInfoBo.jobName, //岗位
completeStageCnt: value.completeStageCnt, //当前完成阶段数
totalStageCnt: value.totalStageCnt, //总阶段数
progress: value.completeStageCnt + "/" + value.totalStageCnt,
};
array.push(obj);
});
state.tabledata = array;
};
const getEvalList =(o)=>{
let obj = o || {
evaluationTypeName:state.value1
}
api
.getEvalListByName(obj).then((res) => {
console.log(res.data.data, "获取测评");
let leng = res.data.data.rows.length;
state.total = res.data.data.total;
if (leng > 0) {
let arr = res.data.data.rows;
getTableDataList(arr);
}
});
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
options1,
columns1,
rowSelection,
checkFinish,
changePagination,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addonlineDrawer {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
padding-right: 12px;
.main_items {
display: flex;
margin-bottom: 12px;
flex-wrap: wrap;
.mi_ipts {
display: flex;
margin-bottom: 20px;
.mii_ipt {
display: flex;
align-items: center;
margin-right: 24px;
.ipt_name {
white-space: nowrap;
}
}
}
.mi_btns {
display: flex;
margin-left: 38px;
margin-bottom: 20px;
cursor: pointer;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-left: 14px;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background: rgb(64, 158, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/search0.png");
}
.btnText {
color: rgb(255, 255, 255);
}
}
.btn2 {
background: rgb(255, 255, 255);
.search {
width: 15px;
height: 17px;
background-image: url("@/assets/images/coursewareManage/reset1.png");
}
.btnText {
color: rgb(64, 158, 255);
}
}
.btn1:hover {
background: rgb(255, 255, 255);
.search {
background-image: url("@/assets/images/courseManage/search1.png");
}
.btnText {
color: #388be1;
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("@/assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.main_notice {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
height: 40px;
background-color: #e9f6fe;
.mntc_left {
display: flex;
align-items: center;
.notice_icon {
width: 14px;
height: 14px;
margin-right: 9px;
margin-left: 9px;
background-image: url(@/assets/images/coursewareManage/gan.png);
background-size: 100% 100%;
}
}
.mntc_right {
cursor: pointer;
}
}
.main_table {
position: relative;
padding-bottom: 80px;
.classify {
margin-left: 10px !important;
padding-left: 9px !important;
}
.ant-checkbox-wrapper {
align-items: center;
margin-top: -2px;
}
.ant-table-selection-column {
padding: 0px !important;
padding-left: 60px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
}
.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>