<template> <div class="examineManage"> <div class="top"> <el-form ref="ruleForm" :model="form"> <el-row :gutter="20"> <el-col :span="4"> <el-form-item label="考核年度:" prop="time"> <el-date-picker v-model="form.year" type="year" value-format="YYYY" placeholder="请选择年份" style="width: 100%" /> </el-form-item> </el-col> <el-col :span="3"> <el-form-item> <el-button type="primary" icon="Search" @click="search"> 搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-col> </el-row> </el-form> <el-row class="mb8"> <el-button class="mr10" type="primary" plain icon="Plus" @click="openDialog(_, 'add')">新增</el-button> </el-row> </div> <el-table :data="tableData" v-loading="loading" :max-height="600"> <el-table-column type="index" width="55" label="序号" /> <el-table-column label="年份" prop="year" show-overflow-tooltip /> <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip /> <el-table-column label="修改人" prop="updateBy" show-overflow-tooltip /> <el-table-column label="备注" prop="remark" show-overflow-tooltip /> <el-table-column label="操作" show-overflow-tooltip width="340"> <template #default="{ row }"> <el-button link type="primary" icon="View" @click="operateHandle(row, 'view')">查看</el-button> <el-button type="warning" icon="Edit" link @click="openDialog(row, 'edit')">编辑</el-button> <el-button type="success" icon="Edit" link @click="operateHandle(row, 'edit')">指标</el-button> <el-button type="danger" icon="Delete" link @click="del(row)">删除</el-button> </template> </el-table-column> </el-table> <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" /> <el-dialog v-model="visible" :title="`${opts.text}绩效评估`" :close-on-click-modal="false" width="30%" :before-close="close" class="dialog" > <el-form ref="dialogruleForm" :rules="ruleFormRules" :model="dialogform" label-width="auto"> <el-form-item label="考核年度:" prop="year"> <el-date-picker v-model="dialogform.year" type="year" placeholder="请选择年份" style="width: 100%" value-format="YYYY" :disabled="opts.type == 'edit'" /> </el-form-item> <el-form-item label="备注:" prop="remark"> <el-input v-model="dialogform.remark" type="textarea" placeholder="请输入备注"></el-input> </el-form-item> </el-form> <template #footer v-if="opts.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, reactive, onMounted } from 'vue'; import operate from './operate.vue'; import { getAssessTargetConfigPage, assessTargetConfigCopy, assessTargetConfigDel, performanceConfigAdd, performanceConfigEdit, } from '@/api/spongePerformance/examineManage.js'; import { optTextMap, statusMap } from '@/utils/map'; import { usePagination } from '@/hooks'; const { proxy } = getCurrentInstance(); // const route = useRoute(); const dialogform = ref({}); const router = useRouter(); const emit = defineEmits(['toggle']); const { sponge_engineering_type } = proxy.useDict('sponge_engineering_type'); const engineeringTypeText = itemType => { const item = sponge_engineering_type.value.find(it => it.value === itemType); return item?.label || ''; }; const { assess_type } = proxy.useDict('assess_type'); const assessTypeText = itemType => { const item = assess_type.value.find(it => it.value === itemType); return item?.label || ''; }; const ruleFormRules = { year: [{ required: true, message: '考核年度不能为空', trigger: ['change'] }], }; const form = ref({ status: '', time: [], }); const params = computed(() => { const args = JSON.parse(JSON.stringify(form.value)); const { time } = args; delete args.time; return { ...args, openStartTime: time[0] || '', openEndTime: time[1] || '', }; }); const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getAssessTargetConfigPage, params); const opts = reactive({ type: '', text: '', }); const visible = ref(false); const search = () => { pageNum.value = 1; getTableList(); }; const resetQuery = () => { form.value.year = ''; proxy.$refs.ruleForm.resetFields(); search(); }; const openDialog = (row, type) => { visible.value = true; opts.type = type; if (type == 'edit') dialogform.value = row; else dialogform.value = {}; }; const close = type => { visible.value = false; proxy.$refs.dialogruleForm.resetFields(); }; const submit = () => { proxy.$refs.dialogruleForm.validate(async (valid, fields) => { if (valid) { const params = { ...dialogform.value }; console.log('opts.type', opts.type); if (opts.type == 'add') { const res = await performanceConfigAdd(params); if (res?.code !== 200) return; proxy.$modal.msgSuccess('操作成功!'); visible.value = false; } else { const res = await performanceConfigEdit(params); if (res?.code !== 200) return; proxy.$modal.msgSuccess('操作成功!'); visible.value = false; } getTableList(); } else { console.log('error submit!', fields); } }); }; const operateHandle = (data, type) => { console.log('data', data); router.push(`/examinemanage/control/${data.id}?type=${type}&status=${data.status}&name=${data.configName}&year=${data.year}`); }; const copy = row => { proxy.$modal .confirm('是否确认复制?') .then(async () => { const formData = new FormData(); formData.append('assessTargetId', row.id); const res = await assessTargetConfigCopy(formData); if (res?.code !== 200) return; proxy.$modal.msgSuccess('操作成功!'); getTableList(); }) .catch(() => {}); }; const del = row => { proxy.$modal .confirm('是否确认删除?') .then(async () => { const res = await assessTargetConfigDel(row.id); if (res?.code !== 200) return; proxy.$modal.msgSuccess('操作成功!'); getTableList(); }) .catch(() => {}); }; onMounted(() => { getTableList(); }); </script> <style lang="scss" scoped> .examineManage { padding: 20px; height: 90vh; overflow-y: hidden; .top { margin-bottom: 15px; } } :deep(.dialog) { .el-dialog__body { padding-bottom: 20px !important; } .el-dialog__footer { padding-top: 0 !important; } } </style>