From 988558aaa309068fd393cc654be537434b0a15ea Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 11 八月 2022 19:11:18 +0800 Subject: [PATCH] 修改 --- src/components/checkTemplate/index.vue | 434 +++++++++++++++++++++++++---------------------------- 1 files changed, 207 insertions(+), 227 deletions(-) diff --git a/src/components/checkTemplate/index.vue b/src/components/checkTemplate/index.vue index 24f6c25..7dcd7eb 100644 --- a/src/components/checkTemplate/index.vue +++ b/src/components/checkTemplate/index.vue @@ -1,250 +1,230 @@ <template> - <el-dialog v-model="dialogVisible" title="选择检查模板" width="900px" draggable :fullscreen="full"> - <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-row> - <el-col :span="18"> - <el-row> - <el-col :span="24"> - <el-form ref="ruleFormRef" :inline="true" status-icon> - <el-form-item> - <el-input size="default" v-model="listQuery.searchParams.id" placeholder="id" style="max-width: 215px;"/> - </el-form-item> - <el-form-item> - <el-input size="default" v-model="listQuery.searchParams.teamName" placeholder="队伍名称" style="max-width: 215px;padding: 0 12px;"/> - </el-form-item> - <el-form-item> - <el-button size="default" type="primary" @click="onSubmit">查询</el-button> - <el-button size="default" @click="submitReset">重置</el-button> - </el-form-item> - </el-form> - </el-col> - <el-col :span="24"> - <el-button size="default" :icon="Delete" style="margin-top: 15px;" @click="submitReset">清除选择</el-button> - </el-col> - </el-row> - <el-table - :data="tableData" - ref="multipleTableRef" - style="width: 100%;margin-top:20px" - @selection-change="handleSelectionChange" - > - <el-table-column type="selection" width="55" v-if="types==0"> - <template #default="scope" v-if="types!=0"> - <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="id" label="id" /> - <el-table-column align="center" prop="teamName" label="队伍名称"/> - </el-table> - <div class="pages"> - <el-pagination - v-model:currentPage="pageIndex" - v-model:page-size="pageSize" - :page-sizes="[10, 20, 30, 40]" - layout="total, sizes, prev, pager, next, jumper" - :total="total" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </div> - </el-col> - <el-col :span="6" style="padding-left: 15px"> - <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.teamName }} - </el-tag> - </div> - </el-col> - </el-row> - <template #footer> + <el-dialog v-model="dialogVisible" title="选择应急队伍" width="900px" draggable :fullscreen="full"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-row> + <el-col :span="18"> + <el-row> + <el-col :span="24"> + <el-form ref="ruleFormRef" :inline="true" status-icon> + <el-form-item> + <el-input size="default" v-model="listQuery.searchParams.teamName" placeholder="队伍名称" style="max-width: 215px; padding: 0 12px" /> + </el-form-item> + <el-form-item> + <el-button size="default" type="primary" @click="onSubmit">查询</el-button> + <el-button size="default" @click="submitReset">重置</el-button> + </el-form-item> + </el-form> + </el-col> + <el-col :span="24"> + <el-button size="default" :icon="Delete" style="margin-top: 15px" @click="submitReset">清除选择</el-button> + </el-col> + </el-row> + <el-table :data="tableData" ref="multipleTableRef" style="width: 100%; margin-top: 20px" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" v-if="types == 0"> + <template #default="scope" v-if="types != 0"> + <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="id" label="id" /> + <el-table-column align="center" prop="teamName" label="队伍名称" /> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="pageIndex" + v-model:page-size="pageSize" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </el-col> + <el-col :span="6" style="padding-left: 15px"> + <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.teamName }} + </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> + </el-dialog> </template> <script lang="ts"> -import { - defineComponent, - reactive, - ref, - onMounted, -} from 'vue'; -import { - Delete, - FullScreen -} from '@element-plus/icons-vue'; -import { - ElMessage, -} from 'element-plus'; -import {contingencyApi} from "/@/api/contingencyManagement/contingency"; +import { defineComponent, reactive, ref, onMounted } from 'vue'; +import { Delete, FullScreen } from '@element-plus/icons-vue'; +import { ElMessage } from 'element-plus'; +import { contingencyApi } from '/@/api/contingencyManagement/contingency'; export default defineComponent({ - setup(props, { emit }) { - const types=ref() - const dialogVisible = ref<boolean>(false); - const openDailog = (type:any) => { - types.value=type - dialogVisible.value = true; - // onSubmit(); - }; - // 搜索条件 - const listQuery = reactive({ - pageIndex: 1, - pageSize: 10, - searchParams: { - teamName: "", - id: "", - } - }); - // 列表数据请求 - const onSubmit = async () => { - let res = await contingencyApi().getTeamManagementList(listQuery) - if(res.data.code === '200'){ - tableData.value = res.data.data; - pageIndex.value = res.data.pageIndex; - pageSize.value = res.data.pageSize; - total.value = res.data.total; - }else{ - ElMessage({ - showClose: true, - type:'error', - message:res.data.msg - }) - } - } - const submitForm = () => { - if(types.value==0){ - emit('SearchUser',dynamicTags.value,types.value); - } - else { - emit('SearchUser',dynamicTags.value[0],types.value); - } - dialogVisible.value = false; - }; - const handleSelectionChange = (val:any) => { - dynamicTags.value=val - } - // 重置 - const submitReset = () => { - listQuery.searchParams.teamName = ''; - listQuery.searchParams.id = ''; - radio1.value="" - dynamicTags.value[0]="" - onSubmit(); - }; - // 表格 - const tableData = ref(); - // 分页 - const pageIndex = ref(); - const pageSize = ref(); - const total = ref(); - const handleSizeChange = (val: number) => { - listQuery.pageSize = val; - onSubmit(); - }; - const handleCurrentChange = (val: number) => { - listQuery.pageIndex = val; - onSubmit(); - } - // 右方点击添加后显示标签 - const dynamicTags = ref(['']); - const handleClose = (tag: string) => { - dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); - radio1.value = ''; - }; - const radio1 = ref(''); - const radio = (event: any) => { - console.log(event) - dynamicTags.value[0] = event; - }; - onMounted(() => { - onSubmit(); - }); - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - dialogVisible, - openDailog, - tableData, - pageSize, - pageIndex, - handleSizeChange, - handleCurrentChange, - dynamicTags, - handleClose, - Delete, - toggleFullscreen, - FullScreen, - full, - onSubmit, - listQuery, - submitReset, - total, - radio, - radio1, - submitForm, - types, - handleSelectionChange, - }; - }, + setup(props, { emit }) { + const types = ref(); + const dialogVisible = ref<boolean>(false); + const openDailog = (type: any) => { + types.value = type; + dialogVisible.value = true; + // onSubmit(); + }; + // 搜索条件 + const listQuery = reactive({ + pageIndex: 1, + pageSize: 10, + searchParams: { + teamName: '', + }, + }); + // 列表数据请求 + const onSubmit = async () => { + let res = await contingencyApi().getTeamManagementList(listQuery); + if (res.data.code === '200') { + tableData.value = res.data.data; + pageIndex.value = res.data.pageIndex; + pageSize.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage({ + showClose: true, + type: 'error', + message: res.data.msg, + }); + } + }; + const submitForm = () => { + if (types.value == 0) { + emit('SearchUser', dynamicTags.value, types.value); + } else { + emit('SearchUser', dynamicTags.value[0], types.value); + } + dialogVisible.value = false; + }; + const handleSelectionChange = (val: any) => { + dynamicTags.value = val; + }; + // 重置 + const submitReset = () => { + listQuery.searchParams.teamName = ''; + listQuery.searchParams.id = ''; + radio1.value = ''; + dynamicTags.value[0] = ''; + onSubmit(); + }; + // 表格 + const tableData = ref(); + // 分页 + const pageIndex = ref(); + const pageSize = ref(); + const total = ref(); + const handleSizeChange = (val: number) => { + listQuery.pageSize = val; + onSubmit(); + }; + const handleCurrentChange = (val: number) => { + listQuery.pageIndex = val; + onSubmit(); + }; + // 右方点击添加后显示标签 + const dynamicTags = ref(['']); + const handleClose = (tag: string) => { + dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); + radio1.value = ''; + }; + const radio1 = ref(''); + const radio = (event: any) => { + console.log(event); + dynamicTags.value[0] = event; + }; + onMounted(() => { + onSubmit(); + }); + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + dialogVisible, + openDailog, + tableData, + pageSize, + pageIndex, + handleSizeChange, + handleCurrentChange, + dynamicTags, + handleClose, + Delete, + toggleFullscreen, + FullScreen, + full, + onSubmit, + listQuery, + submitReset, + total, + radio, + radio1, + submitForm, + types, + handleSelectionChange, + }; + }, }); </script> <style scoped> -.el-form--inline .el-form-item{ - margin-bottom: 0; - margin-right: 0; +.el-form--inline .el-form-item { + margin-bottom: 0; + margin-right: 0; } /*分页*/ - .pages{ - /*display: flex;*/ - /*justify-content: flex-end;*/ - margin-top: 15px; - } +.pages { + /*display: flex;*/ + /*justify-content: flex-end;*/ + margin-top: 15px; +} ::v-deep .el-pagination .el-pager li { - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; } ::v-deep .el-pagination .el-pager li.is-active { - background-color: #409eff; - color: #fff; + background-color: #409eff; + color: #fff; } ::v-deep .el-pagination .btn-prev { - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; } -::v-deep .el-pagination button:disabled{ - color: #c0c4cc; +::v-deep .el-pagination button:disabled { + color: #c0c4cc; } -::v-deep .el-pagination .btn-next{ - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; +::v-deep .el-pagination .btn-next { + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; } </style> -- Gitblit v1.9.2