<template>
<div
class="control"
v-loading.fullscreen.lock="loading"
element-loading-text="加载中..."
element-loading-background="rgba(0, 0, 0, 0.6)"
>
<el-page-header class="header" @back="goBack(route, '/spongePerformance/examinemanage')">
<template #content>
<span class="title">{{ year }}年</span>
</template>
</el-page-header>
<div class="body">
<el-form ref="ruleForm" :model="form">
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="指标名称:" prop="itemContent">
<el-input
style="width: 240px"
clearable
v-model="form.itemContent"
placeholder="请输入指标名称"
></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="考核年度:" prop="time">
<el-date-picker
v-model="form.time"
type="year"
placeholder="请选择年份"
style="width: 100%"
/>
</el-form-item>
</el-col> -->
<!-- <el-col :span="5">
<el-form-item label="修改时间:" prop="time">
<el-date-picker
v-model="form.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 100%"
/>
</el-form-item>
</el-col> -->
<el-col :span="3">
<el-form-item>
<el-button type="primary" icon="Search" @click="getTableData( {configId:controlId})">
查询</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
ref="tableRef"
:data="tableData"
stripe
:max-height="670"
element-loading-text="数据加载中..."
:span-method="objectSpanMethod"
v-loading="tableLoading"
row-key="2"
>
<el-table-column label="一级指标" prop="firstItemContent" width="150" show-overflow-tooltip>
<template #default="{ row }">
<!-- <span style="float: left;">{{ row.firstItemContent}}</span> -->
<span style="float: left;" v-html="ShowDae( row.firstItemContent)"></span>
</template>
</el-table-column>
<el-table-column label="二级指标" prop="secondItemContent" width="150" show-overflow-tooltip>
<template #default="{ row }">
<!-- <span style="float: left;">{{ row.secondItemContent}}</span> -->
<span style="float: left;" v-html="ShowDae( row.secondItemContent)"></span>
</template>
</el-table-column>
<el-table-column label="三级指标" prop="itemContent" width="150" show-overflow-tooltip>
<template #default="{ row }">
<!-- <span style="float: left;">{{ row.itemContent}}</span> -->
<span style="float: left;" v-html="ShowDae( row.itemContent)"></span>
</template>
</el-table-column>
<el-table-column label="年份" align="center" prop="year" show-overflow-tooltip />
<el-table-column label="目标" align="center" prop="itemTarget" show-overflow-tooltip />
<el-table-column label="说明" align="center" prop="itemComment" show-overflow-tooltip />
<el-table-column label="算法" align="center" prop="itemAlgorithm" show-overflow-tooltip >
<template #default="{ row }">
<span>{{ row.itemAlgorithm === 'auto' ? '自动' : '手动'}}</span>
</template>
</el-table-column>
<el-table-column label="实际完成值" align="center" prop="realValue" show-overflow-tooltip />
<el-table-column label="单位" align="center" prop="itemUnit" show-overflow-tooltip />
<el-table-column label="是否达标" align="center" prop="standardFlag" show-overflow-tooltip >
<template #default="{ row }">
<el-tag v-if="row.standardFlag==''" type="warning">未填报</el-tag>
<el-tag v-else :type="row.standardFlag === '1' ? 'success' : 'error'">{{row.standardFlag === '1' ? '达标' : '未达标' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="③预估分值" align="center" prop="realScore" show-overflow-tooltip >
</el-table-column>
<el-table-column label="②预估分值" align="center" prop="secondRealScore" show-overflow-tooltip >
</el-table-column>
<el-table-column label="①预估分值" align="center" prop="firstRealScore" show-overflow-tooltip >
</el-table-column>
<el-table-column label="修改日期" align="center" prop="updateTime" show-overflow-tooltip />
<el-table-column label="责任单位" align="center" prop="deptName" show-overflow-tooltip />
<el-table-column label="修改人" align="center" prop="updateBy" show-overflow-tooltip />
<el-table-column label="佐证材料" align="center" prop="attachFileList" show-overflow-tooltip>
<template #default="{ row }">
<span @click="handlePreview(k)" style="color: #4285F4" v-for="k in row?.attachFileList">{{ k.originalName }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="260" fixed="right">
<template #default="{ row }">
<el-button
type="primary"
link
@click="openDialog(row, row.itemLevel, 'edit')"
:disabled="type === 'view' ||row.itemAlgorithm === 'auto'"
>修改</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
v-model="visible"
:title="`${operateInfo.text}`"
:close-on-click-modal="false"
width="50%"
:before-close="close"
class="dialog"
>
<el-form
ref="dialogFormRef"
:model="dialogForm"
:rules="dialogFormRules"
label-width="auto"
:disabled="operateInfo.type === 'view' || type === 'view'"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="三级指标:" prop="itemContent">
<el-input
v-model="dialogForm.itemContent"
placeholder="请输入三级指标"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标:" prop="itemTarget">
<el-input
disabled
v-model="dialogForm.itemTarget"
placeholder="请输入目标"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="算法:" prop="itemAlgorithm">
<el-select
disabled
v-model="dialogForm.itemAlgorithm"
placeholder="请选择算法"
style="width: 100%"
>
<el-option
v-for="dict in ProjectListData"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="实际完成:" prop="realValue">
<el-select
v-model="dialogForm.realValue"
placeholder="请选择实际完成"
style="width: 100%"
@change="realValueChange"
>
<el-option
v-for="dict in IsTrue"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否达标:" prop="standardFlag">
<template #default="{ row }">
<el-tag v-if="dialogForm.realValue==''" type="warning">未填报</el-tag>
<el-tag v-else :type="dialogForm.realScore>0 ? 'success' : 'error'">{{ dialogForm.realScore>0 ? '达标' : '未达标' }}</el-tag>
</template>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分值:" prop="itemScore">
<el-input
disabled
v-model="dialogForm.itemScore"
placeholder="分值"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="得分:" prop="realScore">
<el-input-number
disabled
v-model="dialogForm.realScore"
placeholder="得分"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer v-if="operateInfo.type !== 'view'">
<div class="dialog-footer">
<el-button type="primary" @click="submit">保存</el-button>
<el-button @click="close">取消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, nextTick, onMounted, reactive } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import useUserStore from "@/store/modules/user"
import { ElMessage, ElMessageBox } from "element-plus";
import {
getAssessTargetConfigControllerItem,
assessTargetConfigControllerItemBatchUpdate,
assessTargetConfigDel,
assessTargetConfigClose,
performanceEvaluateItemEdit
}
from '@/api/examineManage/examineManage.js'
import { optTextMap} from '@/utils/map'
import { inheritAttr } from '@/utils/v3'
import useTable from '../mixins'
import upload from '../upload.vue'
const route = useRoute();
const { proxy } = getCurrentInstance();
const { controlId } = route.params
let { type, status, name, year } = route.query
const {
form,
visible,
curRow,
operateInfo,
getTreeCurRow,
// search,
// resetQuery,
goBack,
// del,
expand,
checkData,
setMergeData,
tableData,
treeData,
// handleData
} = useTable(proxy, uuidv4)
const dialogForm = ref({
evaluationType: '',
controlItem: '',
evaluationCriterion: ''
})
form.configId=controlId
const loading = ref(false)
const tableLoading = ref(false)
const ProjectListData = reactive([
{ label: "自动", value: "auto" },
{ label: "手填", value: "manual" },
]);
const IsTrue = reactive([
{ label: "落实", value: "1" },
{ label: "未落实", value: "0" },
]);
const dialogFormRules = reactive({
realValue: [
{ required: true, trigger: "blur", message: "实际完成不能为空" }
],
})
const openDialog = (row, itemLevel, type) => {
console.log(row)
dialogForm.value = row
operateInfo.type = type
visible.value = true
}
function resetQuery() {
form.itemContent=''
// getTableData(form)
getTableData({configId:controlId})
}
function ShowDae(val) {
console.log("object", form.itemContent)
if (
val.indexOf(form.itemContent) !== -1 &&
form.itemContent !== ''
) {
return val.replace(
form.itemContent,
'<font color="#000" style="background:#ffff00">' + form.itemContent + '</font>'
)
} else {
return val
}
}
const submit = () => {
console.log(operateInfo, dialogForm)
let arr=null
if(dialogForm.value.realScore>0)arr=1
else arr=0
dialogForm.value.standardFlag=arr
proxy.$refs.dialogFormRef.validate(async(valid) => {
if(valid) {
if(operateInfo.type === 'add'){
} else if(operateInfo.type === 'edit'){
let {data}=await performanceEvaluateItemEdit(dialogForm.value)
getTableData({configId:controlId})
}
close()
getTableData(p)
}
})
}
const getTableData = async (p) => {
tableLoading.value = true
const res = await getAssessTargetConfigControllerItem(p)
tableLoading.value = false
if(res?.code !== 200) return
treeData.value = res?.data || []
// console.log("treeData.value", treeData.value)
setMergeData(treeData.value)
nextTick(() => {
expand()
})
}
const setFields = (data, itemLevel) => {
for (const item of data) {
item.itemLevel = itemLevel
switch (itemLevel) {
case '1':
item.sort = item.evaluationTypeRank
break;
case '2':
item.sort = item.controlItemRank
break;
case '3':
item.sort = item.evaluationCriterionRank
break;
default:
break;
}
if(item.children) {
setFields(item.children, itemLevel * 1 + 1 + '')
}
}
}
const setSort = (data) => {
data.sort((a, b) => {
return b.sort - a.sort
})
for (const item of data) {
if(item.children) {
setSort(item.children)
}
}
}
const save = async () => {
loading.value = true
let params = JSON.parse(JSON.stringify(tableData.value))
const flag = checkData(params)
if(flag) return proxy.$modal.msgError('表格数据至少要填写到评价标准')
setParams(params)
console.log(params)
const res = await assessTargetConfigControllerItemBatchUpdate(params)
loading.value = false
if(res?.code !== 200) return
proxy.$modal.msgSuccess('操作成功！')
}
const setParams = (data) => {
for (const item of data) {
if(item.itemLevel === '1'){
item.evaluationTypeRank = item.sort
item.realScore1 = 11
} else if(item.itemLevel === '2') {
item.controlItemRank = item.sort
item.realScore2 = 22
} else if(item.itemLevel === '3') {
item.evaluationCriterionRank = item.sort
item.realScore3 = 33
}
if(item.children) {
setParams(item.children)
}
}
}
const close=()=>{
visible.value=false
proxy.$refs.dialogFormRef.resetFields()
getTableData({configId:controlId})
}
// 表数据合并
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if([0, 13].includes(columnIndex)){
const rowspan = row.length1 - rowIndex === row.sum1 ? row.sum1 : 0
return {
rowspan,
colspan: 1
}
} else if([1,12].includes(columnIndex)) {
const rowspan = row.length2 - rowIndex === row.sum2 ? row.sum2 : 0
return {
rowspan,
colspan: 1
}
}
}
const del = (row) => {
proxy.$modal
.confirm("是否确认删除？")
.then(async () => {
const res = await assessTargetConfigDel(row.id);
if (res?.code !== 200) return;
proxy.$modal.msgSuccess("操作成功！");
getTableList();
})
.catch(() => {});
};
function handlePreview(file) {
return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
() => window.open(file.url),
() => false
);
}
// const isStand=computed(()=>{
// return dialogForm.value.realScore-dialogForm.value.itemScore
// })
function realValueChange(v){
console.log("v", v)
if(v==1) dialogForm.value.realScore=dialogForm.value.itemScore
else dialogForm.value.realScore=0
}
onMounted(() => {
getTableData({configId:controlId})
})
</script>
<style lang="scss" scoped>
.control {
padding: 10px;
height: 92vh;
overflow-y: hidden;
.header {
padding: 10px;
border-radius: 4px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
border: 1px solid #e4e7ed;
margin-bottom: 10px;
.title {
font-size: 16px;
}
::v-deep(.el-page-header__header) {
.el-page-header__left {
.el-page-header__back {
.el-page-header__icon {
font-size: 20px;
font-weight: 700;
}
.el-page-header__title {
font-size: 16px;
}
}
}
}
}
.body {
height: calc(100% - 74px);
overflow: auto;
overflow-x: hidden;
background-color: #fff;
border-radius: 4px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
border: 1px solid #e4e7ed;
padding: 20px;
::v-deep(.el-table) {
.light {
background-color: rgb(252, 247, 0);
}
}
}
}
::v-deep(.dialog) {
.el-dialog__body {
padding-bottom: 20px !important;
}
.el-dialog__footer {
padding-top: 0 !important;
}
}
</style>
