- <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')">
- <template #content>
- <span class="title">{{ year }}年</span>
- </template></el-page-header
- >
- <div class="body">
- <el-form ref="ruleForm" :model="form">
- <!-- {{ year }} -->
- <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>
- <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-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"
- :max-height="700"
- element-loading-text="数据加载中..."
- row-key="id"
- v-loading="tableLoading"
- :span-method="objectSpanMethod"
- >
- <el-table-column label="一级指标" prop="itemContent" width="120" 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="二级指标" prop="itemContent" width="120" 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="三级指标" prop="itemContent" width="150" show-overflow-tooltip>
- <template #default="{ row }">
- <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="说明" prop="itemComment" width="110px"> </el-table-column>
- <el-table-column label="分值" prop="itemScore" width="90px"> </el-table-column>
- <el-table-column label="算法" prop="itemAlgorithm">
- <template #default="{ row }">
- <span>{{ row.itemAlgorithm === 'auto' ? '自动' : '手动' }}</span>
- </template>
- </el-table-column>
- <el-table-column label="启用时间" prop="enableDatetime" show-overflow-tooltip width="160px" />
- <el-table-column label="停用时间" prop="stopDatetime" show-overflow-tooltip width="160px" />
- <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip />
- <el-table-column label="修改日期" prop="updateTime" show-overflow-tooltip width="160px" />
- <el-table-column label="状态" 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="操作" 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-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-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/spongePerformance/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, year } = 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, '111');
- };
- 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({ configId: controlId });
- };
- /** 搜索部门下拉树结构 */
- 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({ configId: controlId });
- }
- // 表数据合并
- const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
- if (columnIndex === 6) {
- if ([2, 3].includes(rowIndex)) {
- return {
- rowspan: rowIndex === 2 ? 2 : 0,
- colspan: 1,
- };
- } else {
- return {
- rowspan: 1,
- colspan: 1,
- };
- }
- }
- };
- onMounted(() => {
- getTableData({
- configId: controlId,
- });
- getDeptTree();
- detailDataTypeM();
- });
- </script>
- <style lang="scss" scoped>
- @import './index.scss';
- .title {
- font-size: 16px;
- color: #c6c6c6;
- }
- </style>