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

fix:选择测评表格备注/可答题人数字段修改

Browse Source
This commit is contained in:
wuyx
2022-12-30 18:44:28 +08:00
parent 15bec4c197
commit e01298015c
1 changed files with 461 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

914
src/components/drawers/EvList.vue
View File

@@ -1,472 +1,480 @@
<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="inputV1"
style="width: 424px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称"
/>
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1" @click="searchList">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2" @click="resetData">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="main_table">
<a-table
style="border: 1px solid #f2f6fe"
:columns="columns"
:data-source="tableData"
:loading="tableDataTotal === -1 ? true : false"
:pagination="false"
:row-selection="{
type: 'radio',
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div class="tableBox" style="margin-top: 85px">
<div class="pa">
<a-pagination
v-if="tableDataTotal > 10"
:showSizeChanger="false"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="changePagination"
/>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="checkFinish">确定</button>
</div>
</div>
</a-drawer>
<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="inputV1" style="width: 424px; height: 40px; border-radius: 8px"
placeholder="请输入项目名称" />
</div>
</div>
</div>
<div class="mi_btns">
<div class="btn btn1" @click="searchList">
<div class="search"></div>
<div class="btnText">搜索</div>
</div>
<div class="btn btn2" @click="resetData">
<div class="search"></div>
<div class="btnText">重置</div>
</div>
</div>
</div>
<div class="main_table">
<a-table style="border: 1px solid #f2f6fe" :columns="columns" :data-source="tableData"
:loading="tableDataTotal === -1 ? true : false" :pagination="false" :row-selection="{
type: 'radio',
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}" />
<div class="tableBox" style="margin-top: 85px">
<div class="pa">
<a-pagination v-if="tableDataTotal > 10" :showSizeChanger="false" showQuickJumper="true"
hideOnSinglePage="true" :pageSize="pageSize" :current="currentPage" :total="tableDataTotal"
class="pagination" @change="changePagination" />
</div>
</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 } 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({
currentPage: 1,
tableDataTotal: 0,
pageSize: 10,
inputV1: "",
evaluationTypeId: null,
evaluationTypeName: "",
tableData: [],
selectedRowKeys: [],
evListData: {},
columns: [
{
title: "测评编号",
width: "20%",
dataIndex: "quiz_code",
key: "code",
ellipsis: true,
},
{
title: "测评名称",
width: "20%",
dataIndex: "title",
key: "title",
align: "center",
ellipsis: true,
},
{
title: "备注",
width: "40%",
dataIndex: "theme_desc",
key: "content",
align: "center",
ellipsis: true,
},
// {
// title: "状态",
// width: "13%",
// dataIndex: "status",
// key: "status",
// align: "center",
// },
// {
// title: "价格",
// width: "13%",
// dataIndex: "quiz_price",
// key: "price",
// align: "center",
// },
{
title: "可答题人数",
width: "20%",
dataIndex: "quiz_range",
key: "time",
align: "center",
ellipsis: true,
},
],
});
const onSelectChange = (selectedRowKeys, selectedRows) => {
if (selectedRowKeys.length > 1) {
return;
}
state.selectedRowKeys = selectedRowKeys;
state.evListData = selectedRows[0] ? selectedRows[0] : {};
console.log("state.evListData", state.evListData);
};
const closeDrawer = () => {
state.selectedRowKeys = [];
state.evListData = {};
state.inputV1 = "";
ctx.emit("update:EvalListVisible", false);
};
const afterVisibleChange = (bol) => {
if (bol == true) {
getAllEvalText();
}
};
const checkFinish = () => {
ctx.emit("getEvListData", state.evListData);
closeDrawer();
};
const changePagination = (page) => {
state.currentPage = page;
getAllEvalText();
};
//如果编辑情况会通过父亲传回来evaluationTypeId遍历出相同的那个选项 再将那个选项的key值赋给state.selectRowKeys
const getTableDataList = (tableData) => {
let data = tableData;
let array = [];
let arrayKey = [];
if (props.evaluationTypeName != "") {
data.map((value, index) => {
let obj = {
key: index + 1,
status: value.status,
quiz_code: value.quiz_code,
quiz_kid: value.quiz_kid,
title: value.title,
theme_desc: value.theme_desc,
quiz_price: value.quiz_price,
quiz_range: value.quiz_range,
quiz_type: value.quiz_type,
};
array.push(obj);
if (obj.title == props.evaluationTypeName) {
arrayKey.push(obj.key);
}
});
state.tableData = array;
state.selectedRowKeys = arrayKey;
} else {
data.map((value, index) => {
let obj = {
key: index + 1,
status: value.status,
quiz_code: value.quiz_code,
quiz_kid: value.quiz_kid,
title: value.title,
theme_desc: value.theme_desc,
quiz_price: value.quiz_price,
quiz_range: value.quiz_range,
quiz_type: value.quiz_type,
};
array.push(obj);
});
state.tableData = array;
}
};
name: "EvList",
props: {
EvalListVisible: {
type: Boolean,
default: false,
},
evaluationTypeId: {
type: Number,
default: null,
},
evaluationTypeName: {
type: String,
default: "",
},
},
setup(props, ctx) {
const state = reactive({
currentPage: 1,
tableDataTotal: 0,
pageSize: 10,
inputV1: "",
evaluationTypeId: null,
evaluationTypeName: "",
tableData: [],
selectedRowKeys: [],
evListData: {},
columns: [
{
title: "测评编号",
width: "20%",
dataIndex: "quiz_code",
key: "code",
ellipsis: true,
},
{
title: "测评名称",
width: "20%",
dataIndex: "title",
key: "title",
align: "center",
ellipsis: true,
},
{
title: "备注",
width: "40%",
dataIndex: "theme_desc",
key: "content",
align: "center",
ellipsis: true,
},
// {
// title: "状态",
// width: "13%",
// dataIndex: "status",
// key: "status",
// align: "center",
// },
// {
// title: "价格",
// width: "13%",
// dataIndex: "quiz_price",
// key: "price",
// align: "center",
// },
{
title: "可答题人数",
width: "20%",
dataIndex: "quiz_range",
key: "time",
align: "center",
ellipsis: true,
},
],
});
const onSelectChange = (selectedRowKeys, selectedRows) => {
if (selectedRowKeys.length > 1) {
return;
}
state.selectedRowKeys = selectedRowKeys;
state.evListData = selectedRows[0] ? selectedRows[0] : {};
console.log("state.evListData", state.evListData);
};
const closeDrawer = () => {
state.selectedRowKeys = [];
state.evListData = {};
state.inputV1 = "";
ctx.emit("update:EvalListVisible", false);
};
const afterVisibleChange = (bol) => {
if (bol == true) {
getAllEvalText();
}
};
const checkFinish = () => {
ctx.emit("getEvListData", state.evListData);
closeDrawer();
};
const changePagination = (page) => {
state.currentPage = page;
getAllEvalText();
};
//如果编辑情况会通过父亲传回来evaluationTypeId遍历出相同的那个选项 再将那个选项的key值赋给state.selectRowKeys
const getTableDataList = (tableData) => {
let data = tableData;
let array = [];
let arrayKey = [];
if (props.evaluationTypeName != "") {
data.map((value, index) => {
let obj = {
key: index + 1,
status: value.status,
quiz_code: value.quiz_code,
quiz_kid: value.quiz_kid,
title: value.title,
theme_desc: value.notes,
quiz_price: value.quiz_price,
quiz_range: value.limit_number,
quiz_type: value.quiz_type,
};
array.push(obj);
if (obj.title == props.evaluationTypeName) {
arrayKey.push(obj.key);
}
});
state.tableData = array;
state.selectedRowKeys = arrayKey;
} else {
data.map((value, index) => {
let obj = {
key: index + 1,
status: value.status,
quiz_code: value.quiz_code,
quiz_kid: value.quiz_kid,
title: value.title,
theme_desc: value.notes,
quiz_price: value.quiz_price,
quiz_range: value.limit_number,
quiz_type: value.quiz_type,
};
array.push(obj);
});
state.tableData = array;
}
};
//获取测评列表
const getAllEvalText = () => {
let objael = {
keyword: state.inputV1,
};
api
.choiceEvaluation(objael)
.then((res) => {
state.tableDataTotal = 9;
// console.log("测评列表", res.data.data);
getTableDataList(res.data.data);
})
.catch(() => {});
};
//搜索测评列表
const searchList = () => {
state.selectedRowKeys = [];
if (state.inputV1 !== "") {
getAllEvalText();
} else {
resetData();
}
};
//重置测评列表
const resetData = () => {
state.currentPage = 1;
state.selectedRowKeys = [];
state.evListData = {};
getAllEvalText();
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
onSelectChange,
getTableDataList,
checkFinish,
changePagination,
searchList,
resetData,
};
},
//获取测评列表
const getAllEvalText = () => {
let objael = {
keyword: state.inputV1,
};
api
.choiceEvaluation(objael)
.then((res) => {
state.tableDataTotal = 9;
console.log("测评列表", res.data.data);
getTableDataList(res.data.data);
})
.catch(() => { });
};
//搜索测评列表
const searchList = () => {
state.selectedRowKeys = [];
if (state.inputV1 !== "") {
getAllEvalText();
} else {
resetData();
}
};
//重置测评列表
const resetData = () => {
state.currentPage = 1;
state.selectedRowKeys = [];
state.evListData = {};
getAllEvalText();
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
onSelectChange,
getTableDataList,
checkFinish,
changePagination,
searchList,
resetData,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
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;
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
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;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
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: #4ea6ff;
}
}
.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: 5px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
th.h {
background-color: #eff4fc !important;
}
.contentMain {
padding-right: 12px;
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
}
.main_items {
display: flex;
.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;
}
}
}
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;
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: #4ea6ff;
}
}
.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: 5px !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%;
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>