| | |
| | | <template> |
| | | <el-dialog v-model="dialogVisible" :fullscreen="full" title="选择安全目标指标" width="50%" draggable> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-row> |
| | | <el-col :span="17"> |
| | | <el-form ref="ruleFormRef" :model="ruleForm" status-icon> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item size="default"> |
| | | <el-input v-model="ruleForm.searchParams.title" placeholder="标准标题" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <!-- <el-col :span="6" :offset="1"> |
| | | <el-form-item> |
| | | <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" /> |
| | | </el-form-item> |
| | | </el-col> --> |
| | | <el-col :span="11" :offset="1"> |
| | | <el-form-item> |
| | | <el-button size="default" type="primary" @click="listApi()">查询</el-button> |
| | | <el-button size="default" @click="reset">重置</el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button> |
| | | <el-table :data="tableData" style="width: 100%; margin-top: 20px" > |
| | | <el-table-column align="center" width="70px"> |
| | | <template #default="scope"> |
| | | <el-radio-group v-model="radio1"> |
| | | <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio> |
| | | </el-radio-group> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" prop="title" label="标准标题" /> |
| | | </el-table> |
| | | <el-pagination |
| | | style="padding: 20px 0; border-bottom: 1px solid #dedede" |
| | | v-model:currentPage="currentPage4" |
| | | v-model:page-size="pageSize4" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </el-col> |
| | | <el-col :span="7"> |
| | | <div v-if="dynamicTags[0]==''?false:true"> |
| | | <el-tag |
| | | v-for="tag in dynamicTags" |
| | | :key="tag" |
| | | class="mx-1" |
| | | style="margin: 5px" |
| | | closable |
| | | :disable-transitions="false" |
| | | @close="handleClose(tag)" |
| | | > |
| | | {{ tag.title }} |
| | | </el-tag> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false" size="default">关闭</el-button> |
| | | <el-button type="primary" @click="submitForm" size="default">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, reactive, ref } from 'vue'; |
| | | import { Delete, FullScreen } from '@element-plus/icons-vue'; |
| | | import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | export default defineComponent({ |
| | | setup(props,{emit}) { |
| | | const dialogVisible = ref<boolean>(false); |
| | | const openDailog = () => { |
| | | dialogVisible.value = true; |
| | | listApi() |
| | | }; |
| | | // 搜索条件 |
| | | const ruleForm = reactive({ |
| | | pageSize: 10, |
| | | pageIndex: 1, |
| | | searchParams: { |
| | | title: '', //标准标题 |
| | | }, |
| | | }); |
| | | const listApi = () => { |
| | | goalManagementApi() |
| | | .getexamineTemplateList(ruleForm) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | tableData.value = res.data.data; |
| | | currentPage4.value = res.data.pageIndex; |
| | | pageSize4.value = res.data.pageSize; |
| | | total.value = res.data.total; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | }; |
| | | // 重置 |
| | | const reset=()=>{ |
| | | ruleForm.searchParams.title="" |
| | | listApi() |
| | | } |
| | | const tableData = ref(); |
| | | const currentPage4 = ref(); |
| | | const pageSize4 = ref(); |
| | | const total = ref(); |
| | | const handleSizeChange = (val: number) => { |
| | | // console.log(`${val} items per page`); |
| | | ruleForm.pageSize = val; |
| | | listApi(); |
| | | }; |
| | | const handleCurrentChange = (val: number) => { |
| | | // console.log(`current page: ${val}`); |
| | | ruleForm.pageIndex = val; |
| | | listApi(); |
| | | }; |
| | | // 提交 |
| | | const submitForm=()=>{ |
| | | dialogVisible.value = false |
| | | emit("typeDome",dynamicTags.value[0],list.value) |
| | | clear() |
| | | } |
| | | // 右方点击添加后显示标签 |
| | | const dynamicTags = ref(['']); |
| | | const handleClose = (tag: string) => { |
| | | dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); |
| | | radio1.value = ''; |
| | | }; |
| | | const radio1 = ref(''); |
| | | const list=ref([]) |
| | | const radio = (event: any) => { |
| | | |
| | | goalManagementApi() |
| | | .getexamineTemplateDetail(event.id) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | list.value = res.data.data; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | dynamicTags.value[0] = event; |
| | | }; |
| | | const clear=()=>{ |
| | | dynamicTags.value=[''] |
| | | radio1.value="" |
| | | } |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | | if (full.value == false) { |
| | | full.value = true; |
| | | } else { |
| | | full.value = false; |
| | | } |
| | | }; |
| | | return { |
| | | submitForm, |
| | | list, |
| | | reset, |
| | | dialogVisible, |
| | | listApi, |
| | | openDailog, |
| | | ruleForm, |
| | | tableData, |
| | | currentPage4, |
| | | pageSize4, |
| | | total, |
| | | handleSizeChange, |
| | | handleCurrentChange, |
| | | dynamicTags, |
| | | handleClose, |
| | | Delete, |
| | | full, |
| | | toggleFullscreen, |
| | | radio1, |
| | | radio, |
| | | clear, |
| | | FullScreen, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | <style scoped> |
| | | .el-row { |
| | | padding: 0 0 20px 0; |
| | | } |
| | | </style> |