| | |
| | | <template> |
| | | <el-dialog v-model="dialogVisible" :fullscreen="full" title="目标考核" width="70%" draggable> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form :model="form" label-width="120px"> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="安全目标指标" size="default"> |
| | | <el-input v-model="form.qName" :disabled="disabled"> |
| | | <template #append> <el-button :icon="Search" @click="daiInpt" /> </template |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="目标指标编号" size="default"> |
| | | <el-input v-model="form.indexNum" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="年度" size="default"> |
| | | <el-input v-model="form.year" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="指标值" size="default"> |
| | | <el-input v-model="form.value" disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
| | | <el-tab-pane label="目标指标分解" name="1"> |
| | | <el-button type="primary" size="default" @click="daiAdd('新增')" :disabled="disabled">新增</el-button> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <el-table :data="tableData" style="width: 100%"> |
| | | <el-table-column align="center" type="index" label="序号" width="70" /> |
| | | <el-table-column align="center" prop="date" label="责任部门" /> |
| | | <el-table-column align="center" prop="name" label="考核指标" /> |
| | | <el-table-column align="center" prop="address" label="制定部门" /> |
| | | <el-table-column align="center" prop="address" label="制定日期" /> |
| | | <el-table-column align="center" prop="address" label="上报值" /> |
| | | <el-table-column align="center" prop="address" label="上报时间" /> |
| | | <el-table-column align="center" prop="address" label="考核结果" /> |
| | | <el-table-column align="center" prop="address" label="考核人" /> |
| | | <el-table-column align="center" prop="address" label="考核时间" /> |
| | | <el-table-column align="center" label="操作"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="daiAdd('修改', scope.row)">查看</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false" size="default">关闭</el-button> |
| | | <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch> |
| | | <DailogAdd ref="Show" @onAdd="add"></DailogAdd> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, ref, reactive } from 'vue'; |
| | | import { Search, FullScreen } from '@element-plus/icons-vue'; |
| | | import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus'; |
| | | import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue'; |
| | | import DailogAdd from './DailogAdd.vue'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | import {deepClone} from "/@/utils/other"; |
| | | export default defineComponent({ |
| | | components: { DailogSearch ,DailogAdd}, |
| | | setup() { |
| | | const dialogVisible = ref<boolean>(false); |
| | | const form = ref({}); |
| | | const targetType = ref(); |
| | | const disabled = ref(false); |
| | | const titles = ref(); |
| | | const openDailog = (title: string, type: any, id: number) => { |
| | | dialogVisible.value = true; |
| | | titles.value = title; |
| | | targetType.value = type; |
| | | disabled.value = title == '查看' ? true : false; |
| | | if (title == '查看' || title == '修改') { |
| | | goalManagementApi() |
| | | .getTargetMngDetail(id) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | form.value = res.data.data; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | const onNumber = (e: object) => { |
| | | form.value = e; |
| | | }; |
| | | // 导航 |
| | | const activeName = ref('1'); |
| | | // 表格 |
| | | const tableData = ref([]); |
| | | // 安全目标指标弹窗 |
| | | const Shows = ref(); |
| | | const daiInpt = () => { |
| | | Shows.value.openDailog(targetType.value); |
| | | }; |
| | | |
| | | // 新增弹窗 |
| | | const index=ref<any>() |
| | | const Show = ref(); |
| | | const daiAdd = (title: string, data: any) => { |
| | | // index.value = formUp.targetDivideDetailList.indexOf(data); |
| | | Show.value.openDailog(title, data); |
| | | }; |
| | | const formUp = reactive({ |
| | | targetId: '', //关联的目标指标/外键 |
| | | delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开 |
| | | // targetDivideDetailList: [], //目标指标分解列表 |
| | | }); |
| | | |
| | | const add = (val: any) => { |
| | | const item = deepClone(val) |
| | | if(index.value==-1){ |
| | | formUp.targetDivideDetailList.push(item); |
| | | }else{ |
| | | formUp.targetDivideDetailList[index.value] = item; |
| | | } |
| | | |
| | | // let obj=JSON.parse(JSON.stringify(form.value)) |
| | | }; |
| | | |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | | if (full.value == false) { |
| | | full.value = true; |
| | | } else { |
| | | full.value = false; |
| | | } |
| | | }; |
| | | return { |
| | | form, |
| | | dialogVisible, |
| | | openDailog, |
| | | targetType, |
| | | onNumber, |
| | | disabled, |
| | | titles, |
| | | activeName, |
| | | tableData, |
| | | Shows, |
| | | daiInpt, |
| | | Search, |
| | | full, |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | daiAdd, |
| | | index, |
| | | Show, |
| | | formUp, |
| | | add, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | <style scoped> |
| | | .el-row { |
| | | padding: 0 0 20px 0; |
| | | } |
| | | </style> |