From 9245fae41fc9cb35b1f1feb3c66f5bb135874650 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期五, 15 七月 2022 09:17:22 +0800 Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut --- src/views/facilityManagement/InstrumentationInformation/component/regionDailog.vue | 143 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 143 insertions(+), 0 deletions(-) diff --git a/src/views/facilityManagement/InstrumentationInformation/component/regionDailog.vue b/src/views/facilityManagement/InstrumentationInformation/component/regionDailog.vue new file mode 100644 index 0000000..b28ffe1 --- /dev/null +++ b/src/views/facilityManagement/InstrumentationInformation/component/regionDailog.vue @@ -0,0 +1,143 @@ +<template> + <el-dialog v-model="dialogVisible" title="选择区域名称" width="50%" draggable> + <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="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" width="80"> + <template #default="scope"> + <el-radio-group v-model="radio1" @change="radio"> + <el-radio :label="scope.row.date" size="large">{{null}}</el-radio> + </el-radio-group> + </template> + </el-table-column> + <!-- <el-table-column align="center" prop="date" label="id"/> --> + <el-table-column align="center" prop="name" 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-row> + <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> +</template> +<script lang="ts"> +import { defineComponent, reactive, ref } from 'vue'; +import { Delete } from '@element-plus/icons-vue'; +export default defineComponent({ + setup() { + const dialogVisible = ref<boolean>(false); + const openDailog = () => { + dialogVisible.value = true; + }; + // 搜索条件 + const ruleForm = reactive({ + pass: '', + checkPass: '', + }); + // 表格 + const tableData = [ + { + date: '2016-05-03', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-02', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-04', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + { + date: '2016-05-01', + name: 'Tom', + address: 'No. 189, Grove St, Los Angeles', + }, + ]; + const pageSize4 = ref(100); + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`); + }; + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`); + }; + // 右方点击添加后显示标签 + const dynamicTags = ref(['2016-05-03']); + const handleClose = (tag: string) => { + dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); + radio1.value="" + }; + const radio1=ref('2016-05-03') + const radio=(event:any)=>{ + dynamicTags.value[0]=event + } + return { + dialogVisible, + openDailog, + ruleForm, + tableData, + pageSize4, + handleSizeChange, + handleCurrentChange, + dynamicTags, + handleClose, + radio1, + radio, + Delete, + }; + }, +}); +</script> +<style scoped> +.el-row { + padding: 0 0 20px 0; +} +</style> \ No newline at end of file -- Gitblit v1.9.2