From 9f4e449a4159c9debf5520a797393bd5df2e5908 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期一, 18 七月 2022 15:01:46 +0800 Subject: [PATCH] css --- src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue | 105 +++++++++++++++++++++++++++++++--------------------- 1 files changed, 63 insertions(+), 42 deletions(-) diff --git a/src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue b/src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue index 88ad9a9..89ce0d3 100644 --- a/src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue +++ b/src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue @@ -1,53 +1,62 @@ <template> - <el-dialog v-model="dialogVisible" title="奖惩类型" width="50%" draggable> + <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> - <el-input v-model="ruleForm.pass" placeholder="奖惩名称" /> - </el-form-item> - </el-col> - <!-- <el-col :span="6" :offset="1"> + <el-form ref="ruleFormRef" :model="ruleForm" status-icon> + <el-row> + <el-col :span="12"> + <el-form-item> + <el-input v-model="ruleForm.pass" 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 type="primary" @click="submitForm(ruleFormRef)">查询</el-button> - <el-button @click="resetForm(ruleFormRef)">重置</el-button> - </el-form-item> - </el-col> - </el-row> - </el-form> - <el-button size="default" :icon="Delete">清除选择</el-button> - <el-table :data="tableData" style="width: 100%;margin-top:20px"> - <el-table-column align="center" type="selection"/> - <el-table-column align="center" prop="date" label="奖惩名称" width="180" /> - <el-table-column align="center" prop="name" label="奖惩类型" width="180" /> - <el-table-column align="center" prop="address" 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="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </el-col> - <el-col :span="7"> - <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)"> + <el-col :span="11" :offset="1"> + <el-form-item> + <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button> + <el-button @click="resetForm(ruleFormRef)">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <el-button size="default" :icon="Delete">清除选择</el-button> + <el-table :data="tableData" style="width: 100%; margin-top: 20px"> + <el-table-column align="center" type="selection" /> + <el-table-column align="center" prop="date" label="奖惩名称" width="180" /> + <el-table-column align="center" prop="name" label="奖惩类型" width="180" /> + <el-table-column align="center" prop="address" 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="[100, 200, 300, 400]" + :small="small" + :disabled="disabled" + :background="background" + layout="total, sizes, prev, pager, next, jumper" + :total="400" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </el-col> + <el-col :span="7"> + <el-tag + v-for="tag in dynamicTags" + :key="tag" + class="mx-1" + style="margin: 5px" + closable + :disable-transitions="false" + @close="handleClose(tag)" + > {{ tag }} </el-tag> - </el-col> + </el-col> </el-row> <template #footer> <span class="dialog-footer"> @@ -59,7 +68,7 @@ </template> <script lang="ts"> import { defineComponent, reactive, ref } from 'vue'; -import { Delete } from '@element-plus/icons-vue'; +import { Delete, FullScreen } from '@element-plus/icons-vue'; export default defineComponent({ setup() { const dialogVisible = ref<boolean>(false); @@ -106,6 +115,15 @@ const handleClose = (tag: string) => { dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; return { dialogVisible, openDailog, @@ -117,6 +135,9 @@ dynamicTags, handleClose, Delete, + full, + toggleFullscreen, + FullScreen, }; }, }); -- Gitblit v1.9.2