<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/management')"> </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="4">
<el-form-item>
<el-button type="primary" icon="Search" @click="getTableData(form)"> 查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
<el-col :span="16">
<el-button
type="primary"
icon="Plus"
style="float: right"
:disabled="type == 'view'"
@click="openDialog({}, '1', 'add', '一级指标')"
>
新增一级指标</el-button
>
</el-col>
</el-row>
</el-form>
<el-table
default-expand-all
ref="tableRef"
:data="treeData"
stripe
:max-height="670"
element-loading-text="数据加载中..."
row-key="id"
v-loading="tableLoading"
>
<el-table-column label="一级指标" align="left" prop="itemContent" width="150" show-overflow-tooltip>
<template #default="{ row }">
<span style="float: left;" v-html="ShowDae(row.itemLevel == '1' ? row.itemContent : '' )"></span>
</template>
</el-table-column>
<el-table-column label="二级指标" align="left" prop="itemContent" width="150" show-overflow-tooltip>
<template #default="{ row }">
<span style="float: left;" v-html="ShowDae(row.itemLevel == '2' ? row.itemContent : '') "></span>
</template>
</el-table-column>
<el-table-column label="三级指标" align="left" prop="itemContent" width="150" show-overflow-tooltip>
<template #default="{ row }">
<!-- <span style="color: #108ee9;float: left;" @click="openDialog(row, row.itemLevel, 'view')">{{
row.itemLevel == '3' ? row.itemContent : ''
}}</span> -->
<span style="color: #108ee9;float: left;" @click="openDialog(row, row.itemLevel, 'view')" v-html="ShowDae(row.itemLevel == '3' ? row.itemContent : '')"></span>
</template>
</el-table-column>
<el-table-column label="目标" prop="itemTarget" width="140px"> </el-table-column>
<el-table-column label="单位" prop="itemUnit" width="120px"> </el-table-column>
<el-table-column label="说明" align="center" prop="itemComment" width="110px"> </el-table-column>
<el-table-column label="分值" align="center" prop="itemScore" width="90px"> </el-table-column>
<el-table-column label="算法" align="center" prop="itemAlgorithm">
<template #default="{ row }">
<span>{{ row.itemAlgorithm === 'auto' ? '自动' : '手动' }}</span>
</template>
</el-table-column>
<el-table-column label="启用时间" align="center" prop="enableDatetime" show-overflow-tooltip width="160px" />
<el-table-column label="停用时间" align="center" prop="stopDatetime" show-overflow-tooltip width="160px" />
<el-table-column label="修改人" align="center" prop="updateBy" show-overflow-tooltip />
<el-table-column label="修改日期" align="center" prop="updateTime" show-overflow-tooltip width="160px" />
<el-table-column label="状态" align="center" prop="status" width="90px">
<template #default="{ row }">
<el-switch
v-model="row.status"
active-value="1"
inactive-value="0"
@change="
val => {
statusChange(row, val);
}
"
:disabled="row.statusDisabled || type == 'view'"
/>
</template>
</el-table-column>
<!-- <el-table-column label="排序" align="center" width="110px" fixed="right">
<template #default="{ row }">
<el-button
type="primary"
link
:disabled="getSortIsDisabled(row, 'ascending') || type == 'view'"
@click="ascHandle(row)"
>升序</el-button
>
<el-button
type="primary"
link
:disabled="getSortIsDisabled(row, 'descending') || type == 'view'"
@click="descHandle(row)"
>降序</el-button
>
</template>
</el-table-column> -->
<el-table-column label="操作" align="center" width="280" fixed="right">
<template #default="{ row }">
<el-button
type="primary"
link
v-if="row.itemLevel == '1'"
@click="openDialog(row, row.itemLevel * 1 + 1 + '', 'add', '二级指标')"
:disabled="type == 'view'"
>新增二级指标</el-button
>
<el-button
type="primary"
link
v-if="row.itemLevel == '2'"
@click="openDialog(row, row.itemLevel * 1 + 1 + '', 'add', '三级指标')"
:disabled="type == 'view'"
>新增三级指标</el-button
>
<el-button type="primary" link @click="openDialog(row, row.itemLevel, 'view')">查看</el-button>
<el-button type="warning" link @click="openDialog(row, row.itemLevel, 'edit')" :disabled="type == 'view'"
>修改</el-button
>
<el-button type="danger" link @click="delClick(row)" :disabled="type == 'view'">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog
v-model="visible"
:close-on-click-modal="false"
width="30%"
:before-close="close"
class="dialog"
:title="operateInfo.text"
>
<el-form
ref="dialogFormRef"
:model="dialogForm"
:rules="dialogFormRules"
:disabled="operateInfo.type == 'view' || type == 'view'"
label-width="auto"
>
<el-row>
<el-col :span="20" :offset="2" v-if="operateInfo.itemLevel == '1'">
<el-form-item label="一级指标:" prop="itemContent">
<el-input v-model="dialogForm.itemContent" placeholder="请输入一级指标" />
</el-form-item>
<!-- <el-form-item label="分值:" prop="itemScore">
<el-input v-model.number="dialogForm.itemScore" placeholder="请输入分值" />
</el-form-item> -->
</el-col>
</el-row>
<el-row :gutter="20" v-if="operateInfo.itemLevel == '2'">
<el-col :span="12">
<el-form-item label="二级指标:" prop="itemContent">
<el-input v-model="dialogForm.itemContent" placeholder="请输入二级指标" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="分值:" prop="itemScore">
<el-input v-model.number="dialogForm.itemScore" placeholder="请输入分值" />
</el-form-item>
</el-col> -->
</el-row>
<el-row :gutter="20" v-if="operateInfo.itemLevel == '3'">
<el-col :span="12">
<el-form-item label="三级指标:" prop="itemContent">
<el-input v-model="dialogForm.itemContent" placeholder="请输入三级指标" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分值:" prop="itemScore">
<el-input v-model.number="dialogForm.itemScore" placeholder="请输入分值" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标:" prop="itemTarget">
<el-input v-model="dialogForm.itemTarget" placeholder="请输入目标" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位:" prop="itemUnit">
<el-input v-model="dialogForm.itemUnit" placeholder="请输入单位" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="说明:" prop="itemComment">
<el-input v-model="dialogForm.itemComment" placeholder="请输入说明" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="算法:" prop="itemAlgorithm">
<el-select
clearable
v-model="dialogForm.itemAlgorithm"
placeholder="请选择算法"
style="width: 100%"
@change="ProjectChange"
>
<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="deptId">
<el-tree-select
v-model.number="dialogForm.deptId"
:data="deptOptions"
:props="{ value: 'id', label: 'label', children: 'children' }"
value-key="id"
placeholder="请选择归属部门"
check-strictly
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="关联菜单:" prop="itemDataType">
<el-select
clearable
v-model="dialogForm.itemDataType"
placeholder="请选关联菜单"
style="width: 100%"
@change="detailDataTypeListChange"
value-key="code"
>
<el-option v-for="i in detailDataTypeList" :key="i.code" :label="i.name" :value="i.code" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="关联目标:" prop="itemDataField">
<el-select clearable v-model="dialogForm.itemDataField" placeholder="请选关联目标" style="width: 100%">
<el-option v-for="i in sourceTypeList" :key="i.code" :label="i.name" :value="i.code" />
</el-select>
</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(1)">保存</el-button>
<!-- <el-button type="success" @click="submit(2)" v-if="dialogForm.status == '0'">启用</el-button>
<el-button type="danger" @click="submit(3)" v-if="dialogForm.status == '1'">停用</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,
assessTargetConfigOpen,
assessTargetConfigClose,
deleteConfigControllerItem,
detailDataType,
assessTargetConfigEdit,
performanceConfigCopy,
performanceConfigEnable,
performanceConfigEnableAndDisable,
} from '@/api/management/management.js';
import { deptTreeSelect } from '@/api/system/user';
import useTable from '../mixins';
import upload from '../upload.vue';
const route = useRoute();
const { proxy } = getCurrentInstance();
const { controlId } = route.params;
console.log(controlId, 'controlIdcontrolId');
let { type, status, name, engineeringType } = route.query;
const statusText = ref(status == '1' ? '停用' : '启用');
const {
form,
treeData,
visible,
curRow,
operateInfo,
getTreeCurRow,
search,
// resetQuery,
goBack,
// statusChange,
setStatusDisabled,
getSortIsDisabled,
ascHandle,
descHandle,
expand,
} = useTable(proxy, uuidv4);
const submitDate = ref();
const dialogForm = ref({});
const loading = ref(false);
const deptOptions = ref(undefined);
const tableLoading = ref(false);
const ProjectListData = reactive([
{ label: '自动', value: 'auto' },
{ label: '手填', value: 'manual' },
]);
const detailDataTypeList = ref([]);
const sourceTypeList = ref([]);
form.configId = controlId;
const dialogFormRules = reactive({
itemContent: [{ required: true, trigger: 'blur', message: '指标不能为空' }],
itemScore: [{ required: true, trigger: 'blur', message: '分值不能为空' }],
itemTarget: [{ required: true, trigger: 'blur', message: '目标不能为空' }],
});
// this.page.searchCode 是指的搜索的关键词
function ShowDae(val) {
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 openDialog = (row, level, type, text = '') => {
if (type != 'add') dialogForm.value = row;
curRow.value = row;
console.log('row', row);
submitDate.value = row;
operateInfo.itemLevel = level;
operateInfo.type = type;
operateInfo.text = (row?.itemContent || '') + text + (type == 'add' ? '新增' : type == 'view' ? '查看' : '编辑');
visible.value = true;
let arr=detailDataTypeList.value.filter((i)=>{
return i.code==row?.itemDataType
})
sourceTypeList.value = arr[0]?.childPerformanceConfigDataList;
};
function resetQuery() {
form.itemContent = '';
getTableData(form);
}
function getSourceTypeList(x,y){
let arr= x.filter((i)=>{
return i.code==y
})
return arr[0]
}
//保存
const submit = type => {
proxy.$refs.dialogFormRef.validate(async valid => {
if (valid && type == 1) {
const treeDataCurRow = getTreeCurRow(treeData.value, curRow.value);
const row = {
parentId: submitDate.value.id,
configId: controlId,
itemDataType: dialogForm.value.itemDataType?.code,
...dialogForm.value,
};
if (operateInfo.type == 'add') {
let { data, code } = await assessTargetConfigControllerItemBatchUpdate(row);
getTableData(form);
proxy.$refs.tableRef.toggleRowExpansion(treeDataCurRow, true);
} else if (operateInfo.type == 'edit') {
let { data, code } = await assessTargetConfigEdit(row);
getTableData(form);
}
close();
} else if (valid && type == 2) {
proxy.$modal
.confirm(`是否启用?`)
.then(async () => {
let { data } = await performanceConfigEnable(submitDate.value.id);
getTableData(form);
})
.catch(() => {});
} else {
proxy.$modal
.confirm(`是否停用?`)
.then(async () => {
let { data } = await performanceConfigDisable(submitDate.value.id);
getTableData(form);
})
.catch(() => {});
}
});
};
//删除
const delClick = async ({ id }) => {
proxy.$modal
.confirm(`是否确认删除${id}?`)
.then(async () => {
let { data } = await deleteConfigControllerItem(id);
getTableData(form);
})
.catch(() => {});
};
const getTableData = async p => {
tableLoading.value = true;
const res = await getAssessTargetConfigControllerItem(p);
tableLoading.value = false;
if (res?.code !== 200) return;
treeData.value = res?.data || [];
setFields(treeData.value, '0');
setSort(treeData.value);
setStatusDisabled(treeData.value);
nextTick(() => {
expand();
});
console.log(treeData.value);
};
const setFields = (data, level) => {
for (const item of data) {
item.level = level;
switch (level) {
case '0':
item.sort = item.evaluationTypeRank;
break;
case '1':
item.sort = item.controlItemRank;
break;
case '2':
item.sort = item.evaluationCriterionRank;
break;
default:
break;
}
if (item.children) {
setFields(item.children, level * 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 setParams = data => {
for (const item of data) {
if (item.level == '0') {
item.evaluationTypeRank = item.sort;
} else if (item.level == '1') {
item.controlItemRank = item.sort;
} else if (item.level == '2') {
item.evaluationCriterionRank = item.sort;
}
if (item.children) {
setParams(item.children);
}
}
};
const statusChange = (v, m) => {
console.log("v", v)
if (v.status == '1') {
statusText.value = '启用';
} else {
statusText.value = '停用';
}
proxy.$modal
.confirm(`是否确认${statusText.value}?`)
.then(async () => {
const {data,code} = await performanceConfigEnableAndDisable(v.id)
getTableData({
configId: controlId,
});
proxy.$modal.msgSuccess('操作成功！');
})
.catch(() => {
getTableData({
configId: controlId,
});
});
};
const detailDataTypeM = async () => {
let { data } = await detailDataType();
detailDataTypeList.value = data;
// detailDataTypeList.value.forEach((i)=>{
// i.label=i.name
// })
// console.log("detailDataTypeList", detailDataTypeList)
};
function detailDataTypeListChange(v) {
let arr=detailDataTypeList.value.filter((i)=>{
return i.code==v
})
sourceTypeList.value = arr[0].childPerformanceConfigDataList;
dialogForm.value.itemDataField=''
}
const close = () => {
visible.value = false;
proxy.$refs.dialogFormRef.resetFields();
getTableData(form);
};
/** 查询部门下拉树结构 */
function getDeptTree() {
deptTreeSelect().then(response => {
deptOptions.value = response.data;
});
}
//复制
async function copy({ configId, year }) {
let { data, code } = await performanceConfigCopy({ sourceConfigId: configId, targetYear: year });
if (code == 200) getTableData(form);
}
onMounted(() => {
getTableData({
configId: controlId,
});
getDeptTree();
detailDataTypeM();
});
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
