From dc1a337bae00425ce6b1f68a96d3a7418d4a0926 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: 星期四, 07 七月 2022 17:57:09 +0800
Subject: [PATCH] 应急预案弹窗
---
src/components/DailogSearch/DailogSearch.vue | 4
src/views/contingencyManagement/contingency/component/openEdit.vue | 4
src/views/contingencyManagement/panManagement/component/DailogSearch.vue | 115 +++++++++++++++++++
src/views/contingencyManagement/panManagement/component/openAdd.vue | 39 +++++
src/components/userSelections/index.vue | 61 +++++++++
src/views/contingencyManagement/panManagement/component/regionsDialog.vue | 109 ++++++++++++++++++
src/views/contingencyManagement/contingency/component/openAdd.vue | 14 ++
7 files changed, 330 insertions(+), 16 deletions(-)
diff --git a/src/components/DailogSearch/DailogSearch.vue b/src/components/DailogSearch/DailogSearch.vue
index 239a164..9d297c8 100644
--- a/src/components/DailogSearch/DailogSearch.vue
+++ b/src/components/DailogSearch/DailogSearch.vue
@@ -1,7 +1,7 @@
<template>
<el-dialog v-model="dialogVisible" title="选择安全目标指标" width="50%" draggable>
<el-row>
- <el-col :span="18">
+ <el-col :span="17">
<el-form ref="ruleFormRef" :model="ruleForm" status-icon>
<el-row>
<el-col :span="6">
@@ -43,7 +43,7 @@
@current-change="handleCurrentChange"
/>
</el-col>
- <el-col :span="6">
+ <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>
diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue
index f543cd9..c71c9cf 100644
--- a/src/components/userSelections/index.vue
+++ b/src/components/userSelections/index.vue
@@ -18,7 +18,7 @@
:filter-node-method="filterNode"
/>
</el-aside>
- <el-container>
+ <el-container style="margin-right: 15px;min-width:560px;">
<el-header style="font-size: 12px">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
@@ -40,11 +40,19 @@
:data="tableData"
:header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
ref="multipleTableRef"
+ highlight-current-row
+ @row-click="rowClick"
+ @selection-change="handleCurrentChange"
>
+ <el-table-column
+ type="selection"
+ width="50"
+ >
+ </el-table-column>
<el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
<el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属机构" width="130" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属部门" width="130" show-overflow-tooltip sortable/>
+ <el-table-column prop="address" label="所属机构" width="110" show-overflow-tooltip sortable />
+ <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
<el-table-column label="状态"
prop="tag"
width="100"
@@ -66,8 +74,12 @@
</el-scrollbar>
</el-main>
</el-container>
+ <div>
+ <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>
+ </div>
</el-container>
-
<template #footer>
<span class="dialog-footer">
<el-button size="default" type="primary" @click="onCancel">确定</el-button>
@@ -95,6 +107,11 @@
id: number
label: string
children?: Tree[]
+}
+interface User {
+ date: string
+ name: string
+ address: string
}
export default defineComponent({
name: 'userSelections',
@@ -196,6 +213,25 @@
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+ // const currentRow = ref()
+
+ // 当某一行被点击时会触发该事件
+ // const handleRowClick = (row: any, column: any, event: Event) => {
+ // emit('row-click', row, column, event)
+ // }
+ // const singleTableRef = ref<InstanceType<typeof ElTable>>()
+ // const setCurrent = (row?: User) => {
+ // singleTableRef.value!.setCurrentRow(row)
+ // }
+ // const handleCurrentChange = (val: User | undefined) => {
+ // currentRow.value = val
+ // }
+
+ // 右方点击添加后显示标签
+ const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ };
return {
openDialog,
closeDialog,
@@ -207,7 +243,12 @@
tableData,
formInline,
onSubmit,
- multipleTableRef
+ // currentRow,
+ // setCurrent,
+ multipleTableRef,
+ handleClose,
+ dynamicTags,
+ // handleCurrentChange,
};
},
});
@@ -277,4 +318,14 @@
margin-right: 0;
border-radius: 4px 4px 0 0;
}
+//单选框圆形
+::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
+ display:none
+}
+::v-deep .el-table-column--selection .cell{
+ text-align: center;
+}
+::v-deep .el-checkbox__input .el-checkbox__inner{
+ border-radius: 50%;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/contingency/component/openAdd.vue b/src/views/contingencyManagement/contingency/component/openAdd.vue
index f09ff4c..16c05f2 100644
--- a/src/views/contingencyManagement/contingency/component/openAdd.vue
+++ b/src/views/contingencyManagement/contingency/component/openAdd.vue
@@ -36,7 +36,7 @@
class="input-with-select"
>
<template #append>
- <el-button :icon="Search"/>
+ <el-button :icon="Search" @click="openUser"/>
</template>
</el-input>
</el-form-item>
@@ -126,6 +126,7 @@
</template>
</el-dialog>
<AddEmergencyPersonnel ref="addRef" />
+ <UserSelections ref="userRef"/>
</div>
</template>
@@ -146,6 +147,7 @@
Search
} from '@element-plus/icons-vue'
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
+import UserSelections from "/@/components/userSelections/index.vue"
// 定义表格数据类型
interface User {
personnelName: string
@@ -156,7 +158,8 @@
export default defineComponent({
name: 'openAdd',
components: {
- AddEmergencyPersonnel
+ AddEmergencyPersonnel,
+ UserSelections,
},
setup() {
const isShowDialog = ref(false)
@@ -234,6 +237,11 @@
],
},
]
+ // 打开用户选择弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
//定义tabs切换
const activeName = ref('first')
@@ -324,6 +332,8 @@
submitForm,
rules,
addRef,
+ userRef,
+ openUser,
onAddEmergencyPersonnel,
};
},
diff --git a/src/views/contingencyManagement/contingency/component/openEdit.vue b/src/views/contingencyManagement/contingency/component/openEdit.vue
index dcafa12..80df2a9 100644
--- a/src/views/contingencyManagement/contingency/component/openEdit.vue
+++ b/src/views/contingencyManagement/contingency/component/openEdit.vue
@@ -140,7 +140,7 @@
import {
Search
} from '@element-plus/icons-vue'
-import userSelections from "/@/components/userSelections/index.vue"
+import UserSelections from "/@/components/userSelections/index.vue"
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import EditEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue";
// 定义表格数据类型
@@ -194,7 +194,7 @@
export default defineComponent({
name: 'openEdit',
components: {
- userSelections,
+ UserSelections,
AddEmergencyPersonnel,
EditEmergencyPersonnel
},
diff --git a/src/views/contingencyManagement/panManagement/component/DailogSearch.vue b/src/views/contingencyManagement/panManagement/component/DailogSearch.vue
new file mode 100644
index 0000000..ec434d3
--- /dev/null
+++ b/src/views/contingencyManagement/panManagement/component/DailogSearch.vue
@@ -0,0 +1,115 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择检查模板" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.pass" placeholder="id" style="max-width: 215px;"/>
+ </el-form-item>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.checkPass" placeholder="队伍名称" style="max-width: 215px;padding: 0 12px;"/>
+ </el-form-item>
+ <el-form-item>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
+ <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
+ </el-form-item>
+ </el-form>
+ <el-button size="default" :icon="Delete">清除选择</el-button>
+ <el-table :data="tableData" style="width: 100%;margin-top:20px">
+ <el-table-column type="selection" width="55" />
+ <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;"
+ 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="6">
+ <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: '6421cbc6cbb5493eabf9b27e83372d78',
+ name: '应急救援组',
+ },
+ {
+ date: '6421cbc6cbb5493eabf9b27e83372d78',
+ name: '工艺抢险组',
+ },
+ {
+ date: '6421cbc6cbb5493eabf9b27e83372d78',
+ name: '后勤保障组',
+ },
+ {
+ date: '6421cbc6cbb5493eabf9b27e83372d78',
+ name: '应急救援组',
+ },
+ ];
+ 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(['应急救援组', '工艺抢险组', '后勤保障组']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ };
+ return {
+ dialogVisible,
+ openDailog,
+ ruleForm,
+ tableData,
+ pageSize4,
+ handleSizeChange,
+ handleCurrentChange,
+ dynamicTags,
+ handleClose,
+ Delete,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-row {
+ padding: 0 0 20px 0;
+}
+</style>
diff --git a/src/views/contingencyManagement/panManagement/component/openAdd.vue b/src/views/contingencyManagement/panManagement/component/openAdd.vue
index 629340b..580eba3 100644
--- a/src/views/contingencyManagement/panManagement/component/openAdd.vue
+++ b/src/views/contingencyManagement/panManagement/component/openAdd.vue
@@ -58,14 +58,14 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="编写人" prop="telephone">
+ <el-form-item label="编写人" prop="telephone" >
<el-input
v-model="ruleForm.teamLeader"
placeholder="请选择"
class="input-with-select"
>
<template #append>
- <el-button :icon="Search"/>
+ <el-button :icon="Search" @click="openUser"/>
</template>
</el-input>
</el-form-item>
@@ -92,7 +92,7 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="应急队伍" prop="telephone">
+ <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
<el-input
v-model="ruleForm.teamLeader"
placeholder="请选择"
@@ -130,7 +130,7 @@
class="input-with-select"
>
<template #append>
- <el-button :icon="Search"/>
+ <el-button :icon="Search" @click="regionsDialog"/>
</template>
</el-input>
</el-form-item>
@@ -144,6 +144,9 @@
</span>
</template>
</el-dialog>
+ <DailogSearch ref="Shows"/>
+ <userSelections ref="userRef"/>
+ <RegionsDialog ref="openRef"/>
</div>
</template>
@@ -162,11 +165,16 @@
import {
Search
} from '@element-plus/icons-vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+import DailogSearch from '/@/views/contingencyManagement/panManagement/component/DailogSearch.vue'
+import RegionsDialog from '/@/views/contingencyManagement/panManagement/component/regionsDialog.vue'
export default defineComponent({
name: 'openAdd',
components: {
-
+ DailogSearch,
+ UserSelections,
+ RegionsDialog,
},
setup() {
const isShowDialog = ref(false)
@@ -372,6 +380,21 @@
}
})
}
+ // 应急队伍弹窗
+ const Shows=ref()
+ const daiInpt=()=>{
+ Shows.value.openDailog()
+ }
+ // 选择区域弹窗
+ const openRef=ref()
+ const regionsDialog=()=>{
+ openRef.value.openDailog()
+ }
+ // 打开用户选择弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
return {
openDialog,
closeDialog,
@@ -385,9 +408,15 @@
value1,
treeSelect,
tree,
+ daiInpt,
+ Shows,
ruleFormRef,
submitForm,
// rules,
+ openUser,
+ userRef,
+ regionsDialog,
+ openRef,
};
},
});
diff --git a/src/views/contingencyManagement/panManagement/component/regionsDialog.vue b/src/views/contingencyManagement/panManagement/component/regionsDialog.vue
new file mode 100644
index 0000000..0edce4a
--- /dev/null
+++ b/src/views/contingencyManagement/panManagement/component/regionsDialog.vue
@@ -0,0 +1,109 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择区域" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-form :inline="true" ref="ruleFormRef" :model="ruleForm" status-icon>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.checkPass" placeholder="风险区域名称" style="max-width: 215px;" />
+ </el-form-item>
+ <el-form-item>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)" style="padding-right: 12px;">查询</el-button>
+ <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
+ </el-form-item>
+ <el-button size="default" :icon="Delete" style="margin-left: 12px;">清除选择</el-button>
+ </el-form>
+ <el-table :data="tableData" style="width: 100%;margin-top:20px;">
+ <el-table-column type="selection" width="55" />
+ <el-table-column align="center" prop="name" label="风险区域名称"/>
+ </el-table>
+ <el-pagination
+ style="padding:20px 0;"
+ 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="6" style="padding-left: 15px;">
+ <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({
+ checkPass: '',
+ });
+ // 表格
+ const tableData = [
+ {
+ name: '1#LNG储罐单元',
+ },
+ {
+ name: 'LNG装车区',
+ },
+ {
+ name: '丙烷储罐区',
+ },
+ {
+ name: '4#LNG储罐单元',
+ },
+ ];
+ 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(['应急救援组', '工艺抢险组', '后勤保障组']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ };
+ return {
+ dialogVisible,
+ openDailog,
+ ruleForm,
+ tableData,
+ pageSize4,
+ handleSizeChange,
+ handleCurrentChange,
+ dynamicTags,
+ handleClose,
+ Delete,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-row {
+ padding: 0 0 20px 0;
+}
+.el-form--inline .el-form-item{
+ margin: 0;
+}
+</style>
--
Gitblit v1.9.2