mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 20:06:47 +08:00
358 lines
8.6 KiB
Vue
358 lines
8.6 KiB
Vue
<template>
|
||
<div @click="openDrawer()">
|
||
<slot></slot>
|
||
</div>
|
||
<a-drawer
|
||
:visible="visible"
|
||
class="drawerStyle growth-invist"
|
||
width="70%"
|
||
title="添加评估"
|
||
placement="right"
|
||
>
|
||
<div class="drawerMain">
|
||
<div class="header">
|
||
<div v-if="formData.id" class="headerTitle">编辑评估</div>
|
||
<div v-else 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_item">
|
||
<div class="fi_input">
|
||
<a-input
|
||
v-model:value="params.assessmentName"
|
||
style="width: 424px; height: 40px; border-radius: 8px"
|
||
placeholder="请输入评估名称"
|
||
maxlength="20"
|
||
/>
|
||
</div>
|
||
<div class="btns" @click="search">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="btnsn" @click="reset">
|
||
<div class="search"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
<div class="btnsn" @click="reset">
|
||
<div class="search"></div>
|
||
<div class="btnText">刷新</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main_item">
|
||
<button class="xkbtn" style="margin: 0" @click="goResearchmanage">
|
||
新建评估
|
||
</button>
|
||
</div>
|
||
|
||
<div class="main_table">
|
||
<a-table
|
||
class="ant-table-striped"
|
||
:row-class-name="
|
||
(_, index) => (index % 2 === 1 ? 'table-striped' : null)
|
||
"
|
||
row-key="id"
|
||
:columns="columns"
|
||
:data-source="data"
|
||
:loading="loading"
|
||
:pagination="pagination"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.dataIndex === 'select'">
|
||
<a
|
||
:style="{
|
||
color: formData.taskId == record.id ? '#999' : null,
|
||
}"
|
||
@click="confirm(record)"
|
||
>选择</a
|
||
>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-drawer>
|
||
</template>
|
||
<script setup lang="jsx">
|
||
import { defineEmits, defineProps, ref, computed } from "vue";
|
||
import { Form, message } from "ant-design-vue";
|
||
import { useResetRef } from "@/utils/useCommon";
|
||
import { saveTask } from "@/api/growthpath";
|
||
// import { useRouter } from "vue-router";
|
||
import { useRowsPage } from "@/api/request";
|
||
import { ASSESSMENT_PAGE } from "@/api/apis";
|
||
import dialog from "@/utils/dialog";
|
||
const emit = defineEmits(["refresh"]);
|
||
const props = defineProps({
|
||
type: Number,
|
||
growId: String,
|
||
activeKey: String,
|
||
});
|
||
const visible = ref(false);
|
||
const formData = useResetRef({});
|
||
const initParams = {
|
||
assessmentName: "",
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
releaseStatus: 2,
|
||
};
|
||
// const router = useRouter();
|
||
const params = ref(initParams);
|
||
const { data, loading, total, fetch } = useRowsPage(
|
||
ASSESSMENT_PAGE,
|
||
params.value
|
||
);
|
||
const pagination = computed(() => ({
|
||
total: total.value,
|
||
showSizeChanger: false,
|
||
current: params.value.pageNo,
|
||
pageSize: params.value.pageSize,
|
||
onChange: changePagination,
|
||
}));
|
||
|
||
const changePagination = (e) => {
|
||
params.value.pageNo = e;
|
||
fetch();
|
||
};
|
||
|
||
function search() {
|
||
params.value.pageIndex = 1;
|
||
fetch();
|
||
}
|
||
|
||
function reset() {
|
||
params.value.pageIndex = 1;
|
||
params.value.keyWord = "";
|
||
params.value.assessmentName = "";
|
||
fetch();
|
||
}
|
||
|
||
const goResearchmanage = () => {
|
||
// router.push({ path: "/researchmanage" });
|
||
window.open(process.env.VUE_APP_BASE + "/researchmanage?openCreate=true");
|
||
};
|
||
const columns = ref([
|
||
{
|
||
title: "选择",
|
||
dataIndex: "select",
|
||
key: "select",
|
||
width: "100px",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "名称",
|
||
dataIndex: "assessmentName",
|
||
key: "assessmentName",
|
||
width: "40%",
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "题数",
|
||
dataIndex: "num",
|
||
key: "num",
|
||
width: "20%",
|
||
align: "center",
|
||
ellipsis: true,
|
||
customRender: (text) => {
|
||
return (
|
||
<div class="racona">
|
||
<span>
|
||
{" "}
|
||
{text.record.essayQuestionVoList.length +
|
||
text.record.multipleStemVoList.length +
|
||
text.record.scoringQuestionVoList.length +
|
||
text.record.singleStemVoList.length}
|
||
</span>
|
||
</div>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: "创建人",
|
||
dataIndex: "createName",
|
||
key: "createName",
|
||
width: "20%",
|
||
align: "center",
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "创建时间",
|
||
dataIndex: "createTime",
|
||
key: "createTime",
|
||
width: "20%",
|
||
align: "center",
|
||
ellipsis: true,
|
||
},
|
||
]);
|
||
|
||
const closeDrawer = () => {
|
||
visible.value = false;
|
||
formData.reset();
|
||
};
|
||
|
||
async function confirm(record) {
|
||
dialog({
|
||
content: "确定选择该评估吗？",
|
||
ok: async () => {
|
||
if (!formData?.value?.id) {
|
||
await saveTask({
|
||
growthId: props.growId,
|
||
taskName: record.assessmentName,
|
||
taskType: props.type,
|
||
taskId: record.id,
|
||
type: props.activeKey,
|
||
});
|
||
message.success("添加成功");
|
||
} else {
|
||
// 编辑
|
||
formData.value.taskName = record.assessmentName;
|
||
formData.value.taskId = record.id;
|
||
await saveTask(formData.value);
|
||
message.success("编辑成功");
|
||
}
|
||
closeDrawer();
|
||
emit("refresh");
|
||
},
|
||
});
|
||
}
|
||
|
||
function openDrawer(row) {
|
||
row && (formData.value = row);
|
||
visible.value = true;
|
||
}
|
||
|
||
defineExpose({ openDrawer });
|
||
</script>
|
||
<style lang="scss">
|
||
.ant-table-striped :deep(.table-striped) td {
|
||
background-color: #fafafa !important;
|
||
}
|
||
.growth-invist > .ant-drawer-content-wrapper {
|
||
min-width: 1300px !important;
|
||
width: 1300px !important;
|
||
}
|
||
.growth-invist {
|
||
.drawerMain {
|
||
.header {
|
||
height: 73px;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.headerTitle {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 25px;
|
||
margin-left: 24px;
|
||
}
|
||
}
|
||
|
||
.contentMain {
|
||
.main_item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
margin-top: 20px;
|
||
.fi_input {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.btns {
|
||
margin-right: 20px;
|
||
padding: 0px 26px 0px 26px;
|
||
height: 38px;
|
||
background: #4ea6ff;
|
||
border-radius: 8px;
|
||
//border: 1px solid rgba(64, 158, 255, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
background-image: url("../../assets/images/courseManage/search0.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 36px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.btnsn {
|
||
padding: 0px 26px 0px 26px;
|
||
height: 38px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
|
||
.search {
|
||
width: 16px;
|
||
height: 18px;
|
||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #4ea6ff;
|
||
line-height: 36px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.main_table {
|
||
position: relative;
|
||
padding-bottom: 80px;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|