<template>
<div class="cardsDetails">
<div class="btnBox">
<n-space>
<n-button type="primary" @click="saveAll">保存</n-button>
<n-button type="primary" @click="handleClick('export ')">导出</n-button>
</n-space>
</div>
<div class="tableBox">
<div class="title">
<div class="name">{{ info.facilitiesName }}{{ title }}成绩一览表</div>
<div class="common score">
总成绩： <span class="font16">{{ totalScore }}</span
>分
</div>
<div class="common ques">
累计发现问题： <span class="font16">{{ totalNum }}</span
>处
</div>
</div>
<n-data-table
:data="data"
:columns="columns"
:single-line="false"
:max-height="650"
/>
</div>
<n-modal
v-model:show="showModal"
:show-icon="false"
preset="card"
title="问题情况"
:style="{ width: '800px' }"
>
<n-space>
<span>总体扣分:</span>
<n-input-number v-model:value="deductPoints" clearable />
<n-button style="margin-bottom: 10px" @click="handleClick('add')"
>新增问题</n-button
>
<n-button style="margin-bottom: 10px" @click="handleClick('save')"
>保存</n-button
>
</n-space>
<n-data-table
:data="modalData"
:columns="modalColumns"
:single-line="false"
/>
</n-modal>
<n-modal
v-model:show="showModal2"
:show-icon="false"
preset="card"
title="新增问题"
:style="{ width: '500px' }"
>
<n-form
ref="formRef"
:label-width="80"
label-placement="left"
:model="formValue"
:rules="rules"
>
<n-form-item label="问题描述" path="problemDes">
<n-input
v-model:value="formValue.problemDes"
placeholder="输入问题描述"
/>
</n-form-item>
<n-form-item label="问题图片" path="fileList">
<n-upload
v-model:file-list="formValue.fileList"
accept=".jpg,.png,.jpeg,.svg,.gif"
>
<n-button>上传照片</n-button>
</n-upload>
</n-form-item>
</n-form>
<template #action>
<n-space>
<n-button @click="() => (showModal2 = false)">取消</n-button>
<n-button
type="primary"
:loading="formBtnLoading"
@click="handleClick('sure')"
>确定</n-button
>
</n-space>
</template>
</n-modal>
</div>
</template>
<script>
import { reactive, ref, toRefs, h, onMounted } from "vue";
import { NButton, NTag, useDialog, NImage, NAvatar } from "naive-ui";
import {
getEvaluationDetail,
getProblemDetailList,
saveDetailProblem,
deleteDetailProblem,
saveDetailProblemList,
saveAllScores,
} from "@/services";
import { resetForm } from "../../../../utils/util";
export default {
name: "cardsDetails",
props: {
info: Object,
title: String,
},
setup(props, ctx) {
const dialog = useDialog();
const data = ref([]);
const state = reactive({
totalScore: null,
totalNum: null,
columns: [
{
title: "类别",
key: "evaluateType",
align: "center",
width: "120",
rowSpan: (rowData, rowIndex) => {
return rowData.rowSpan1;
},
},
{
title: "赋值",
key: "totalScore",
align: "center",
width: "80",
rowSpan: (rowData, rowIndex) => {
return rowData.rowSpan1;
},
},
{
title: "序号",
key: "evaluateProjectNo",
align: "center",
width: "80",
rowSpan: (rowData, rowIndex) => {
return rowData.rowSpan2;
},
},
{
title: "项目",
key: "evaluateProject",
align: "center",
width: "140",
rowSpan: (rowData, rowIndex) => {
return rowData.rowSpan2;
},
},
{
title: "标准分值",
key: "optionScore",
align: "center",
width: "90",
rowSpan: (rowData, rowIndex) => {
return rowData.rowSpan3;
},
},
{
title: "考核内容",
key: "optionContent",
align: "center",
rowSpan: (rowData, rowIndex) => {
return rowData.rowSpan3;
},
},
{
title: "评分标准",
key: "scoreStandard",
align: "center",
},
{
title: "实际得分",
key: "score",
align: "center",
width: "90",
},
{
title: "发现问题",
key: "problemNum",
align: "center",
width: "100",
render(row) {
return h(
NButton,
{
text: true,
size: "small",
style: {
margin: "10px",
},
type: "primary",
onClick: () => handleClick("show", row),
},
{ default: () => row.problemNum }
);
},
},
],
// 弹窗相关
showModal: false,
deductPoints: 0,
detailId: 0,
modalColumns: [
{
title: "问题描述",
key: "problem",
align: "center",
width: "200",
},
{
title: "现场图片",
key: "files",
align: "center",
width: "200",
render(row) {
const img = row.files.map((item, index) => {
return h(NImage, {
width: 48,
height: 48,
src: `data:image/jpg;base64, ${item}`,
style: {
marginRight: "10px",
},
});
});
return img;
},
},
{
title: "操作",
key: "actions",
align: "center",
width: "200",
render(row) {
return h(
NButton,
{
text: true,
size: "small",
type: "primary",
style: {
margin: "10px",
},
onClick: () => handleClick("remove", row),
},
{ default: () => "移除" }
);
},
},
],
modalData: [],
// 新增弹窗
showModal2: false,
actionUrl: null,
formValue: {
problemDes: "",
fileList: [],
},
rules: {
problemDes: [
{
required: true,
trigger: ["blur", "change"],
message: "请输入角色名称",
},
],
},
//查看图片弹窗
src: "",
standardId: null,
});
const getCardDetails = async () => {
let res = await getEvaluationDetail(
`?monthScoreId=${props.info.scoreMonthId}`
);
if (res.code === 0) {
data.value = res.result.list;
state.totalScore = res.result.totalScore;
state.totalNum = res.result.totalNum;
}
};
// 弹窗展示
const handleClick = (type, row, i) => {
switch (type) {
case "show":
state.showModal = true;
state.standardId = row.standardId;
getModalData();
break;
case "add":
state.formValue = {
problemDes: "",
fileList: [],
};
state.showModal2 = true;
break;
case "remove":
dialog.info({
title: "提示",
content: `您想移除“${row.problem}”吗?`,
positiveText: "确定",
negativeText: "取消",
onPositiveClick: () => {
removeProblem(row);
},
onNegativeClick: () => {},
});
break;
case "sure":
saveProblem();
break;
case "save":
saveProblemList();
break;
}
};
// 获取弹窗展示数据
const getModalData = async () => {
let pramas = {
scoreMonthId: props.info.scoreMonthId,
standardId: state.standardId,
};
let res = await getProblemDetailList(pramas);
if (res.code === 0) {
state.modalData = res.result.problems;
state.deductPoints = res.result.score;
state.detailId = res.result.scoreDetailId;
}
};
// 新增问题
const saveProblem = async () => {
let formData = new FormData();
state.formValue.fileList.forEach((v) => {
formData.append("files", v.file);
});
formData.append("scoreMonthId", props.info.scoreMonthId);
formData.append("standardId", state.standardId);
formData.append("content", state.formValue.problemDes);
let res = await saveDetailProblem(formData);
if (res.code === 0) {
state.showModal2 = false;
getModalData();
}
};
// 保存问题列表
const saveProblemList = async () => {
let pramas = {
id: state.detailId,
scoreMonthId: props.info.scoreMonthId,
standardId: state.standardId,
problemNum: state.modalData.length,
score: state.deductPoints,
};
let res = await saveDetailProblemList(pramas);
if (res.code === 0) {
state.showModal = false;
getCardDetails();
}
};
// 删除问题列表
const removeProblem = async (row) => {
console.log(row);
let pramas = {
detailId: state.detailId,
problemId: row.problemId,
};
let res = await deleteDetailProblem(pramas);
if (res.code === 0) {
state.showModal = false;
getModalData();
}
};
// 保存所有分数
const saveAll = async () => {
let scores = [];
data.value.forEach((v) => {
scores.push(v.score);
});
let pramas = {
scoreMonthId: props.info.scoreMonthId,
scores: scores,
};
let res = await saveAllScores(pramas);
if (res.code == 0) {
ctx.emit("getFlag", 1);
}
};
onMounted(() => {
getCardDetails();
});
return {
data,
...toRefs(state),
getCardDetails,
handleClick,
saveAll,
};
},
};
</script>
<style lang="less" scoped>
.cardsDetails {
position: relative;
height: 100;
.btnBox {
position: absolute;
top: 15px;
right: 10px;
display: flex;
justify-content: flex-end;
}
.tableBox {
margin-top: 10px;
padding: 10px;
width: 100%;
border: 1px solid;
border-color: var(--color-Invert);
.title {
padding: 0 20px;
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid;
border-color: var(--color-Invert);
.name {
font-size: 22px;
font-family: Source Han Sans CN;
}
.common {
width: 120px;
height: 46px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 5px;
font-size: 12px;
font-family: Source Han Sans CN;
color: #ffffff;
.font16 {
font-size: 16px;
}
}
.score {
margin: 0 10px 0 30px;
background: url("../../../../assets/Imgs/total_score_bg.png") no-repeat
center;
}
.ques {
background: url("../../../../assets/Imgs/ques_bg.png") no-repeat center;
}
}
}
}
</style>
