{{}}可以直接取data里面某个属性的值，也可以取methods里面的方法，这个可以方便进行计算什么的。
1.{{}}在计算场景的运用
<!--表格开始-->
<el-table :data="tableData" style="width: 100%" height="100%">
<el-table-column label="不适用总分" width="60" align="center">
<template slot-scope="scope">
<span>{{calculateScore(scope.row).bsyzf}}</span>
</template>
</el-table-column>
<el-table-column label="实际总分" width="60" align="center">
<template slot-scope="scope">
<span>{{calculateScore(scope.row).sjzf}}</span>
</template>
</el-table-column>
<el-table-column label="实际得分" width="60" align="center">
<template slot-scope="scope">
<span>{{calculateScore(scope.row).sjdf}}</span>
</template>
</el-table-column>
<el-table-column label="最终得分" width="60" align="center">
<template slot-scope="scope">
<span>{{calculateScore(scope.row).val}}</span>
</template>
</el-table-column>
</el-table>
export default {
//import引入的组件需要注入到对象中才能使用
components: {
},
props: {},
data() {
//这里存放数据
return {
dcLoading:false,
tableheight: document.documentElement.clientHeight - 186 + 'px;',
options: [],
tableData: [],
year: "2022",
batchId: '',
//分页查询
page: 0,
size: 10,
//总记录条数
tableTotal: 0,
dialogVisible: false,
loading: true
};
},
//计算属性 类似于data概念
computed: {},
//过滤器
filters: {
},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
//自适应
const that = this
window.onresize = function temp() {
that.tableheight = document.documentElement.clientHeight - 180 + 'px;'
}
//获取批次下拉数据
this.getBacthTreeList();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeCreate() { }, //生命周期 - 创建之前
beforeMount() { }, //生命周期 - 挂载之前
beforeUpdate() { }, //生命周期 - 更新之前
updated() { }, //生命周期 - 更新之后
beforeDestroy() { }, //生命周期 - 销毁之前
destroyed() { }, //生命周期 - 销毁完成
activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
//方法集合
methods: {
//计算得分
calculateScore(row) {
var obj = {}
//计算实际得分
obj.sjdf = row.numA * 1 + row.numB * 0.5 + row.numAj * 0.5 + row.numBj * 0.25
//计算不适用总分
obj.bsyzf = row.numABsy * 1 + row.numBBsy * 0.5
obj.sjzf = row.totalA * 1 + row.totalB * 0.5 - row.numABsy * 1 - row.numBBsy * 0.5
//最终得分
var zf = row.totalA * 1 + row.totalB * 0.5
obj.val = 0
if (obj.sjzf != 0) {
obj.val = (obj.sjdf / obj.sjzf * zf).toFixed(2) * 100 / 100
}
return obj
}
}2.{{}}过滤器的应用
<template>
<div class="app-container">
<div class="head-container">
<!-- <span >年度 </span>
<el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="选择年度">
</el-date-picker> -->
<span>评审批次 </span>
<batchSelect @change="handleChange" />
<span>评审人 </span>
<el-select v-model="reviewZj" clearable placeholder="请选择">
<el-option v-for="item in reviewZjList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span>评审小组 </span>
<el-select v-model="reviewTeam" clearable placeholder="请选择">
<el-option v-for="item in reviewTeamList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span>核心条款 </span>
<el-switch v-model="isHxtx" active-color="#13ce66" inactive-color="#C0C4CC" active-value="true"
inactive-value="false">
</el-switch>
<buttonAss type="success" icon="el-icon-search" size="mini" text='搜索' params='查询用~户信息' class="butstyle"
@buttonClick="queryList" />
<buttonAss style="margin-top: 10px" type="primary" v-if="roleName=='评审机构'" icon="el-icon-finished" size="mini"
text='提交' params='提交上传资料' class="butstyle" @buttonClick="submit()" />
</div>
<el-divider />
<el-row :style="'height:'+ tableheight">
<!-- <span style="margin-left:35%;font-size: 19px;">(总分:100分)</span> -->
<!--表格开始-->
<el-table height="100%" ref="singleTable" :data="pstkTableData" border highlight-current-row style="width: 100%"
v-loading="loading" :cell-style="tableRowStyleItemDm" @row-dblclick="toScore">
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column property="itemDm" label="项目编号" width="100">
</el-table-column>
<el-table-column property="itemMc" label="评审项目" :show-overflow-tooltip="true" width="700">
</el-table-column>
<el-table-column property="reviewResultSelf" label="自评结果" width="150">
</el-table-column>
<el-table-column property="zrks" label="责任科室" width="150">
</el-table-column>
<el-table-column property="reviewNoteSelf" label="自评备注说明" :show-overflow-tooltip="true" width="315">
</el-table-column>
<el-table-column label="自评得分" width="100">
<template slot-scope="scope">
<span>{{scope.row.reviewResultSelf|formatScore}}</span>
</template>
</el-table-column>
</el-table>
<!--分页开始-->
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="this.page" :page-sizes="[10, 20, 30, 40]" :page-size="this.size"
layout="total, sizes, prev, pager, next, jumper" :total="this.tableTotal">
</el-pagination>
</el-row>
<!-- 打分弹框 -->
<el-dialog :title="doScoreTitle" :visible.sync="dialogVisible" :fullscreenfullscreen="true" width="65%" center
@close="closeDialog()">
<el-table :data="doScoreTableData" border style="width: 100%" height="250">
<el-table-column prop="itemDm" label="项目编号" width="150">
</el-table-column>
<el-table-column prop="itemMc" label="评审项目" width="870">
</el-table-column>
<el-table-column prop="score" label="评分分值" width="150">
</el-table-column>
</el-table>
<el-divider />
<div class="head-container">
<label>评审结果:</label>
<!-- <el-input v-model="inputScore" placeholder="请输入内容"></el-input> -->
<template>
<el-select v-model="inputScore" placeholder="请选择">
<el-option v-for="item in scoreMoldeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
<label>责任科室:</label>
<el-input v-model="inputZrks" placeholder="请输入内容"></el-input>
<label>备注说明:</label>
<el-input v-model="inputBz" placeholder="请输入内容"></el-input>
</div>
<div style="margin: 110px 0px 0px 350px">
<buttonAss type="primary" size="small" icon="el-icon-arrow-left" text='上一页' params='上一页' class="butstyle"
@buttonClick="itemUp" />
<buttonAss type="success" size="small" icon="el-icon-check" text='保存' params='保存打分' class="butstyle"
@buttonClick="saveScore()" />
<buttonAss type="info" size="small" icon="el-icon-close" text='取消' params='取消' class="butstyle"
@buttonClick="dialogVisible = false" />
<!-- <buttonAss type="info" size="small" icon="el-icon-close" text='取消' params='取消' class="butstyle"
@buttonClick="closeDialog()" /> -->
<buttonAss type="primary" size="small" icon="el-icon-arrow-right" text='下一页' params='下一页' class="butstyle"
@buttonClick="itemLower" />
</div>
</el-dialog>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Cookies from 'js-cookie'
import Config from '@/settings'
import {
getPstkTableDataList,
saveScore,
submit,
getUserSels,
getTeamSels
} from '@/api/review/jgSelfReview';
export default {
//import引入的组件需要注入到对象中才能使用
components: {
},
props: {},
data() {
//这里存放数据
return {
reviewZj: '',
reviewZjList: [],
reviewTeam: '',
reviewTeamList: '',
isHxtx: 'true',
roleName: Cookies.get('roleName'),
jgdm: "",
scoreId: "",
scoreMoldeList: [],
inputZrks: "",
inputBz: "",
inputScore: "",
tableheight: document.documentElement.clientHeight - 186 + 'px;',
options: [],
pstkTableData: [],
year: "",
batchId: '',
//分页查询
page: 1,
size: 10,
//总记录条数
tableTotal: 0,
dialogVisible: false,
loading: true,
doScoreTitle: "",
doScoreTableData: [],
query: {
batchNo: '',
userNo: '',
teamNo: '',
cxjg: '全部',
//分页查询
page: 1,
size: 10,
},
};
},
//计算属性 类似于data概念
computed: {},
//过滤器
filters: {
//自评得分过滤器
formatScore: function (score) {
var rel = ""
if (score == 'A') {
rel = '1'
} else if (score == 'B') {
rel = '0.5'
} else if (score == 'A-') {
rel = '0.5'
} else if (score == 'B-') {
rel = '0.25'
} else if (score == '-' || score == '不适用') {
rel = '0'
}
return rel
}
},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
//自适应
const that = this
window.onresize = function temp() {
that.tableheight = document.documentElement.clientHeight - 180 + 'px;'
}
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeCreate() { }, //生命周期 - 创建之前
beforeMount() { }, //生命周期 - 挂载之前
beforeUpdate() { }, //生命周期 - 更新之前
updated() { }, //生命周期 - 更新之后
beforeDestroy() { }, //生命周期 - 销毁之前
destroyed() { }, //生命周期 - 销毁完成
activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
//方法集合
methods: {
//提交
submit() {
submit(this.batchId).then(res => {
console.log(res.status)
if (200 == res.status) {
if ("200" == res.data.code) {
this.$notify({
title: res.data.msg,
type: 'success'
});
} else if ("-200" == res.data.code) {
this.$notify({
title: res.data.msg,
type: 'warning'
});
} else if ("400" == res.data.code) {
this.$notify({
title: res.data.msg,
type: 'warning'
});
}
} else {
this.$notify({
title: "系统错误!",
type: 'error'
});
}
})
},
//关闭弹框
closeDialog() {
//清空数据
this.inputScore = ""
//刷新表格数据
this.getPstkTableDataList()
},
//保存打分结果
saveScore() {
debugger
var data = this.doScoreTableData[0]
data.reviewResultSelf = this.inputScore
data.reviewNoteSelf = this.inputBz
data.batchNo = this.batchId
data.zrks = this.inputZrks
data.orgId = this.jgdm
console.log(data)
saveScore(data).then(res => {
console.log(res.data)
if ('1' == res.data) {
this.$notify({
title: "保存成功",
type: 'success'
});
}
})
},
//下一页
async itemLower() {
// if (player != undefined && player != null) {
// qxbfMp3()
// }
var maxPage = Math.ceil(this.tableTotal / this.size)
for (var i = 0; i < this.pstkTableData.length; i++) {
if (this.scoreId === this.pstkTableData[i].id) {
if (this.page == maxPage && i == this.pstkTableData.length - 1) {
this.$notify({
title: "已经是最后一条了",
type: 'warning'
});
return;
} else {
if (i == this.pstkTableData.length - 1) { //如果是最后一条， 则翻页
this.page = this.page + 1
await this.getPstkTableDataList()
i = -1
}
// 获取下一条数据
var itemUp = this.pstkTableData[i + 1];
//判断是否是父级
if (itemUp.itemDm && itemUp.itemDm.indexOf('.') > 0) {//不是父级
} else {//为父级的 就要继续找上级
if (this.page == maxPage && i + 2 > this.pstkTableData.length - 1) {
this.$notify({
title: "已经是最后一条了",
type: 'warning'
});
return false;
} else {
//判断是不是本页最后一条
if (i + 1 == this.pstkTableData.length - 1) { //如果是最后一条， 则翻页
this.page = this.page + 1
await this.getPstkTableDataList()
i = -1
itemUp = this.pstkTableData[i + 1];
} else {
itemUp = this.pstkTableData[i + 2];
}
}
}
//
//清空数据
this.inputScore = ''
//生成打分下拉数据
if (itemUp.score != "" && itemUp.score != null) {
this.scoreMoldeList = [{ label: itemUp.score, value: itemUp.score }, { label: itemUp.score + "-", value: itemUp.score + "-" }, { label: "-", value: "-" }, { label: "不适用", value: "不适用" }]
}
//回显数
if (itemUp.reviewResultSelf != "" && itemUp.reviewResultSelf != null) {
this.inputScore = itemUp.reviewResultSelf
}
// else {
// //让下拉框选定第一个
// this.inputScore = itemUp.score
// }
//获取到弹窗标题
this.doScoreTitle = "评审项目打分 " + itemUp.itemDm
this.doScoreTableData = [{ itemDm: itemUp.itemDm, itemMc: itemUp.itemMc, score: itemUp.score }]
this.inputZrks = itemUp.zrks
this.inputBz = itemUp.reviewNoteSelf
this.scoreId = itemUp.id
debugger;
return;
}
}
}
},
//上一条
async itemUp() {
// if (player != undefined && player != null) {
// qxbfMp3()
// }
for (var i = 0; i < this.pstkTableData.length; i++) {
debugger
if (this.scoreId === this.pstkTableData[i].id) {
if (this.page == 1 && i == 0) {
this.$notify({
title: "已经是第一条了",
type: 'warning'
});
return;
} else {
if (i == 0) { // 如果是第一条， 就往前翻一页
this.page = this.page - 1
await this.getPstkTableDataList()
i = this.size
}
// 获取上一条数据
var itemUp = this.pstkTableData[i - 1];
//判断是否是父级
if (itemUp.itemDm && itemUp.itemDm.indexOf('.') > 0) {//不是父级
} else {//为父级的 就要继续找上级
if (this.page == 1 && i - 2 < 0) {
this.$notify({
title: "已经是第一条了",
type: 'warning'
});
return;
} else {
if (i - 1 == 0) { // 如果是第一条， 就往前翻一页
this.page = this.page - 1
await this.getPstkTableDataList()
i = this.size
itemUp = this.pstkTableData[i - 1];
} else {
itemUp = this.pstkTableData[i - 2];
}
}
}
//清空数据
this.inputScore = ''
//生成打分下拉数据
if (itemUp.score != "" && itemUp.score != null) {
this.scoreMoldeList = [{ label: itemUp.score, value: itemUp.score }, { label: itemUp.score + "-", value: itemUp.score + "-" }, { label: "-", value: "-" }, { label: "不适用", value: "不适用" }]
}
//回显数
if (itemUp.reviewResultSelf != "" && itemUp.reviewResultSelf != null) {
this.inputScore = itemUp.reviewResultSelf
}
// else {
// //让下拉框选定第一个
// this.inputScore = itemUp.score
// }
//获取到弹窗标题
this.doScoreTitle = "评审项目打分 " + itemUp.itemDm
this.doScoreTableData = [{ itemDm: itemUp.itemDm, itemMc: itemUp.itemMc, score: itemUp.score }]
this.inputZrks = itemUp.zrks
this.inputBz = itemUp.reviewNoteSelf
this.scoreId = itemUp.id
debugger;
return;
}
}
}
},
//给父级条款添加背景色
tableRowStyleItemDm({ row }) {
if (!row.itemDm.includes(".")) {
return 'background-color: #E0E0E0 !important;';
}
},
//去到打分弹框
toScore(row, column, event) {
//获取到弹窗标题
this.doScoreTitle = "评审项目打分 " + row.itemDm
console.log(row)
//判断itemDm是否是父级
if (row.itemDm.includes('.')) {//不是父级
this.dialogVisible = true
}
debugger
console.log(row)
var itemDm = row.itemDm
var itemMc = row.itemMc
var score = row.score
this.inputZrks = row.zrks
this.inputBz = row.reviewNoteSelf
this.scoreId = row.id
this.jgdm = row.orgId
this.doScoreTableData = [{ itemDm: itemDm, itemMc: itemMc, score: score }]
// this.doScoreTableData = [{ itemDm: itemDm, itemMc: itemMc, score: score ,reviewResultSelf: this.inputScore, reviewNoteSelf: this.inputBz, batchNo: this.batchId, zrks: this.inputZrks }]
console.log(this.doScoreTableData)
//生成打分下拉数据
if (score != "" && score != null) {
this.scoreMoldeList = [{ label: score, value: score }, { label: score + "-", value: score + "-" }, { label: "-", value: "-" }, { label: "不适用", value: "不适用" }]
}
//回显数
if (row.reviewResultSelf != "" && row.reviewResultSelf != null) {
this.inputScore = row.reviewResultSelf
}
// else {
// //让下拉框选定第一个
// this.inputScore = score
// }
},
//获取机构自评数据
async getPstkTableDataList() {
await getPstkTableDataList(this.batchId, this.page, this.size).then(res => {
debugger
console.log(res)
this.pstkTableData = res.data.data
this.tableTotal = res.data.total
//关闭遮罩层
this.loading = false
})
},
//点击搜索按钮，带条件分页查询列表。
queryList() {
// debugger
this.page = 1
this.getPstkTableDataList()
},
//分页方法，设置每页显示的记录条数
handleSizeChange(size) {
this.size = size
this.getPstkTableDataList()
},
//分页方法，设置当前页
handleCurrentChange(page) {
this.page = page
this.getPstkTableDataList()
},
//获取批次下拉数据
handleChange(item) {
//赋值
this.query.batchNo = item.id
debugger
getUserSels(this.query.batchNo).then(res => {
this.reviewZjList = res.data
if (res.data && res.data.length > 0) {
this.query.userNo = res.data[0].id
}
this.userSeleClick(this.query.userNo)
})
},
//评审人选中
userSeleClick(userNo) {
getTeamSels(this.query.batchNo, userNo).then(res => {
this.reviewTeamList = res.data
if (res.data && res.data.length > 0) {
this.query.teamNo = res.data[0].id
}
// 调用查询接口
this.getPstkTableDataList()
})
},
},
}
</script>
<style>
</style>版权声明：本文为weixin_45907672原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。