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

Merge branch 'develop'

Browse Source
This commit is contained in:
wyx
2022-12-30 18:46:02 +08:00
parent 396a4ce6cc e01298015c
commit 5f8b223ca1
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> <template>
<a-drawer <a-drawer :visible="EvalListVisible" class="drawerStyle addonlineDrawer" width="80%" title="选择测评" placement="right"
:visible="EvalListVisible" @after-visible-change="afterVisibleChange">
class="drawerStyle addonlineDrawer" <div class="drawerMain">
width="80%" <div class="header">
title="选择测评" <div class="headerTitle">选择测评</div>
placement="right" <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
@after-visible-change="afterVisibleChange" @click="closeDrawer" />
> </div>
<div class="drawerMain"> <div class="contentMain">
<div class="header"> <div class="main_items">
<div class="headerTitle">选择测评</div> <div class="mi_ipts">
<img <div class="mii_ipt">
style="width: 29px; height: 29px; cursor: pointer" <div class="ipt_name"></div>
src="../../assets/images/basicinfo/close.png" <div class="fi_input">
@click="closeDrawer" <a-input v-model:value="inputV1" style="width: 424px; height: 40px; border-radius: 8px"
/> placeholder="请输入项目名称" />
</div> </div>
<div class="contentMain"> </div>
<div class="main_items"> </div>
<div class="mi_ipts"> <div class="mi_btns">
<div class="mii_ipt"> <div class="btn btn1" @click="searchList">
<div class="ipt_name"></div> <div class="search"></div>
<div class="fi_input"> <div class="btnText">搜索</div>
<a-input </div>
v-model:value="inputV1" <div class="btn btn2" @click="resetData">
style="width: 424px; height: 40px; border-radius: 8px" <div class="search"></div>
placeholder="请输入项目名称" <div class="btnText">重置</div>
/> </div>
</div> </div>
</div> </div>
</div> <div class="main_table">
<div class="mi_btns"> <a-table style="border: 1px solid #f2f6fe" :columns="columns" :data-source="tableData"
<div class="btn btn1" @click="searchList"> :loading="tableDataTotal === -1 ? true : false" :pagination="false" :row-selection="{
<div class="search"></div> type: 'radio',
<div class="btnText">搜索</div> selectedRowKeys: selectedRowKeys,
</div> onChange: onSelectChange,
<div class="btn btn2" @click="resetData"> }" />
<div class="search"></div> <div class="tableBox" style="margin-top: 85px">
<div class="btnText">重置</div> <div class="pa">
</div> <a-pagination v-if="tableDataTotal > 10" :showSizeChanger="false" showQuickJumper="true"
</div> hideOnSinglePage="true" :pageSize="pageSize" :current="currentPage" :total="tableDataTotal"
</div> class="pagination" @change="changePagination" />
<div class="main_table"> </div>
<a-table </div>
style="border: 1px solid #f2f6fe" </div>
:columns="columns" </div>
:data-source="tableData" <div class="main_btns">
:loading="tableDataTotal === -1 ? true : false" <button class="btn1" @click="closeDrawer">取消</button>
:pagination="false" <button class="btn2" @click="checkFinish">确定</button>
:row-selection="{ </div>
type: 'radio', </div>
selectedRowKeys: selectedRowKeys, </a-drawer>
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> </template>
<script> <script>
import { reactive, toRefs } from "vue"; import { reactive, toRefs } from "vue";
import * as api from "../../api/indexEval"; import * as api from "../../api/indexEval";
export default { export default {
name: "EvList", name: "EvList",
props: { props: {
EvalListVisible: { EvalListVisible: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
evaluationTypeId: { evaluationTypeId: {
type: Number, type: Number,
default: null, default: null,
}, },
evaluationTypeName: { evaluationTypeName: {
type: String, type: String,
default: "", default: "",
}, },
}, },
setup(props, ctx) { setup(props, ctx) {
const state = reactive({ const state = reactive({
currentPage: 1, currentPage: 1,
tableDataTotal: 0, tableDataTotal: 0,
pageSize: 10, pageSize: 10,
inputV1: "", inputV1: "",
evaluationTypeId: null, evaluationTypeId: null,
evaluationTypeName: "", evaluationTypeName: "",
tableData: [], tableData: [],
selectedRowKeys: [], selectedRowKeys: [],
evListData: {}, evListData: {},
columns: [ columns: [
{ {
title: "测评编号", title: "测评编号",
width: "20%", width: "20%",
dataIndex: "quiz_code", dataIndex: "quiz_code",
key: "code", key: "code",
ellipsis: true, ellipsis: true,
}, },
{ {
title: "测评名称", title: "测评名称",
width: "20%", width: "20%",
dataIndex: "title", dataIndex: "title",
key: "title", key: "title",
align: "center", align: "center",
ellipsis: true, ellipsis: true,
}, },
{ {
title: "备注", title: "备注",
width: "40%", width: "40%",
dataIndex: "theme_desc", dataIndex: "theme_desc",
key: "content", key: "content",
align: "center", align: "center",
ellipsis: true, ellipsis: true,
}, },
// { // {
// title: "状态", // title: "状态",
// width: "13%", // width: "13%",
// dataIndex: "status", // dataIndex: "status",
// key: "status", // key: "status",
// align: "center", // align: "center",
// }, // },
// { // {
// title: "价格", // title: "价格",
// width: "13%", // width: "13%",
// dataIndex: "quiz_price", // dataIndex: "quiz_price",
// key: "price", // key: "price",
// align: "center", // align: "center",
// }, // },
{ {
title: "可答题人数", title: "可答题人数",
width: "20%", width: "20%",
dataIndex: "quiz_range", dataIndex: "quiz_range",
key: "time", key: "time",
align: "center", align: "center",
ellipsis: true, ellipsis: true,
}, },
], ],
}); });
const onSelectChange = (selectedRowKeys, selectedRows) => { const onSelectChange = (selectedRowKeys, selectedRows) => {
if (selectedRowKeys.length > 1) { if (selectedRowKeys.length > 1) {
return; return;
} }
state.selectedRowKeys = selectedRowKeys; state.selectedRowKeys = selectedRowKeys;
state.evListData = selectedRows[0] ? selectedRows[0] : {}; state.evListData = selectedRows[0] ? selectedRows[0] : {};
console.log("state.evListData", state.evListData); console.log("state.evListData", state.evListData);
}; };
const closeDrawer = () => { const closeDrawer = () => {
state.selectedRowKeys = []; state.selectedRowKeys = [];
state.evListData = {}; state.evListData = {};
state.inputV1 = ""; state.inputV1 = "";
ctx.emit("update:EvalListVisible", false); ctx.emit("update:EvalListVisible", false);
}; };
const afterVisibleChange = (bol) => { const afterVisibleChange = (bol) => {
if (bol == true) { if (bol == true) {
getAllEvalText(); getAllEvalText();
} }
}; };
const checkFinish = () => { const checkFinish = () => {
ctx.emit("getEvListData", state.evListData); ctx.emit("getEvListData", state.evListData);
closeDrawer(); closeDrawer();
}; };
const changePagination = (page) => { const changePagination = (page) => {
state.currentPage = page; state.currentPage = page;
getAllEvalText(); getAllEvalText();
}; };
//如果编辑情况会通过父亲传回来evaluationTypeId遍历出相同的那个选项 再将那个选项的key值赋给state.selectRowKeys //如果编辑情况会通过父亲传回来evaluationTypeId遍历出相同的那个选项 再将那个选项的key值赋给state.selectRowKeys
const getTableDataList = (tableData) => { const getTableDataList = (tableData) => {
let data = tableData; let data = tableData;
let array = []; let array = [];
let arrayKey = []; let arrayKey = [];
if (props.evaluationTypeName != "") { if (props.evaluationTypeName != "") {
data.map((value, index) => { data.map((value, index) => {
let obj = { let obj = {
key: index + 1, key: index + 1,
status: value.status, status: value.status,
quiz_code: value.quiz_code, quiz_code: value.quiz_code,
quiz_kid: value.quiz_kid, quiz_kid: value.quiz_kid,
title: value.title, title: value.title,
theme_desc: value.theme_desc, theme_desc: value.notes,
quiz_price: value.quiz_price, quiz_price: value.quiz_price,
quiz_range: value.quiz_range, quiz_range: value.limit_number,
quiz_type: value.quiz_type, quiz_type: value.quiz_type,
}; };
array.push(obj); array.push(obj);
if (obj.title == props.evaluationTypeName) { if (obj.title == props.evaluationTypeName) {
arrayKey.push(obj.key); arrayKey.push(obj.key);
} }
}); });
state.tableData = array; state.tableData = array;
state.selectedRowKeys = arrayKey; state.selectedRowKeys = arrayKey;
} else { } else {
data.map((value, index) => { data.map((value, index) => {
let obj = { let obj = {
key: index + 1, key: index + 1,
status: value.status, status: value.status,
quiz_code: value.quiz_code, quiz_code: value.quiz_code,
quiz_kid: value.quiz_kid, quiz_kid: value.quiz_kid,
title: value.title, title: value.title,
theme_desc: value.theme_desc, theme_desc: value.notes,
quiz_price: value.quiz_price, quiz_price: value.quiz_price,
quiz_range: value.quiz_range, quiz_range: value.limit_number,
quiz_type: value.quiz_type, quiz_type: value.quiz_type,
}; };
array.push(obj); array.push(obj);
}); });
state.tableData = array; state.tableData = array;
} }
}; };
//获取测评列表 //获取测评列表
const getAllEvalText = () => { const getAllEvalText = () => {
let objael = { let objael = {
keyword: state.inputV1, keyword: state.inputV1,
}; };
api api
.choiceEvaluation(objael) .choiceEvaluation(objael)
.then((res) => { .then((res) => {
state.tableDataTotal = 9; state.tableDataTotal = 9;
// console.log("测评列表", res.data.data); console.log("测评列表", res.data.data);
getTableDataList(res.data.data); getTableDataList(res.data.data);
}) })
.catch(() => {}); .catch(() => { });
}; };
//搜索测评列表 //搜索测评列表
const searchList = () => { const searchList = () => {
state.selectedRowKeys = []; state.selectedRowKeys = [];
if (state.inputV1 !== "") { if (state.inputV1 !== "") {
getAllEvalText(); getAllEvalText();
} else { } else {
resetData(); resetData();
} }
}; };
//重置测评列表 //重置测评列表
const resetData = () => { const resetData = () => {
state.currentPage = 1; state.currentPage = 1;
state.selectedRowKeys = []; state.selectedRowKeys = [];
state.evListData = {}; state.evListData = {};
getAllEvalText(); getAllEvalText();
}; };
return { return {
...toRefs(state), ...toRefs(state),
afterVisibleChange, afterVisibleChange,
closeDrawer, closeDrawer,
onSelectChange, onSelectChange,
getTableDataList, getTableDataList,
checkFinish, checkFinish,
changePagination, changePagination,
searchList, searchList,
resetData, resetData,
}; };
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.ant-table-striped :deep(.table-striped) td { .ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important; background-color: #fafafa !important;
} }
.addonlineDrawer { .addonlineDrawer {
.drawerMain { .drawerMain {
.header { .header {
height: 73px; height: 73px;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; 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; .headerTitle {
flex-wrap: wrap; font-size: 18px;
.mi_ipts { font-weight: 600;
display: flex; color: #333333;
margin-bottom: 20px; line-height: 25px;
.mii_ipt { margin-left: 24px;
display: flex; }
align-items: center; }
margin-right: 24px;
.ipt_name {
white-space: nowrap;
}
}
}
.mi_btns {
display: flex;
cursor: pointer; .contentMain {
.btn { padding-right: 12px;
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 .main_items {
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) display: flex;
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
}
}
}
.main_btns { margin-bottom: 12px;
height: 72px; flex-wrap: wrap;
width: 100%;
bottom: 0; .mi_ipts {
left: 0; display: flex;
display: flex; margin-bottom: 20px;
align-items: center;
justify-content: center; .mii_ipt {
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16); display: flex;
.btn1 { align-items: center;
width: 100px; margin-right: 24px;
height: 40px;
border: 1px solid #4ea6ff; .ipt_name {
border-radius: 8px; white-space: nowrap;
color: #4ea6ff; }
background-color: #fff; }
cursor: pointer; }
}
.btn2 { .mi_btns {
cursor: pointer; display: flex;
width: 100px;
height: 40px; cursor: pointer;
background: #4ea6ff;
border-radius: 8px; .btn {
border: 0; padding: 0px 26px 0px 26px;
margin-left: 15px; height: 38px;
color: #fff; 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> </style>