From 5421ae90e2fb0e153037f4a2ca4741de61d04cdd Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: 星期四, 14 七月 2022 18:02:25 +0800
Subject: [PATCH] 应急预案启动记录
---
src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue | 448 ++
src/views/contingencyManagement/processForm/component/formInformationTops.vue | 312 +
src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openSee.vue | 442 ++
src/views/contingencyManagement/panManagement/component/openSee.vue | 480 +-
src/views/contingencyManagement/panManagement/component/openAdd.vue | 19
src/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue | 164
src/components/userSelections/index.vue | 198
src/components/userCheckbox/index.vue | 406 ++
src/components/checkTemplate/index.vue | 172 +
src/views/contingencyManagement/abolishDialog/component/formInformationTop.vue | 144
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintainDialog.vue | 193 +
src/components/regionsDialog/index.vue | 2
src/views/contingencyManagement/processForm/processForm.vue | 137
src/views/contingencyManagement/releaseOfDrillStart/component/lowerPlate.vue | 120
src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue | 157
src/views/contingencyManagement/releaseOfDrillStart/releaseOfDrillStart.vue | 137
src/components/material/index.vue | 142
src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue | 265
src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue | 346 +
src/views/contingencyManagement/panManagement/component/abolishLibrary.vue | 223 +
src/views/contingencyManagement/abolishDialog/component/lowerPlate.vue | 120
src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue | 145
src/views/contingencyManagement/panManagement/index.vue | 135
src/views/contingencyManagement/emergencyPlanStartRecord/index.vue | 339 +
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue | 467 ++
src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue | 242
src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue | 98
src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTops.vue | 440 ++
src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue | 348 +
src/views/contingencyManagement/processForm/component/formInformationTop.vue | 144
src/components/emergencySupplies/index.vue | 147
src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue | 443 ++
src/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue | 176 +
src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue | 182 +
src/views/goalManagement/processForms/component/lowerPlate.vue | 2
src/views/contingencyManagement/abolishDialog/abolishDialog.vue | 137
src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue | 427 ++
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue | 193 +
/dev/null | 225 -
src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTop.vue | 144
src/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue | 138
src/views/contingencyManagement/abolishDialog/component/formInformationTops.vue | 318 +
src/views/contingencyManagement/contingency/index.vue | 22
src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue | 182 +
src/views/contingencyManagement/processForm/component/lowerPlate.vue | 120
src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue | 171 +
src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue | 214 +
47 files changed, 8,839 insertions(+), 1,387 deletions(-)
diff --git a/src/components/checkTemplate/index.vue b/src/components/checkTemplate/index.vue
new file mode 100644
index 0000000..235d5ea
--- /dev/null
+++ b/src/components/checkTemplate/index.vue
@@ -0,0 +1,172 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择检查模板" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-row>
+ <el-col :span="24">
+ <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" 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-col>
+ <el-col :span="24">
+ <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
+ </el-col>
+ </el-row>
+ <el-table
+ :data="tableData"
+ ref="multipleTableRef"
+ 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>
+ <div class="pages">
+ <el-pagination
+ 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"
+ />
+ </div>
+ </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';
+interface User {
+ date: string
+ name: string
+ address: string
+}
+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-form--inline .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+/*分页*/
+ .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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
+</style>
diff --git a/src/components/emergencySupplies/index.vue b/src/components/emergencySupplies/index.vue
new file mode 100644
index 0000000..4059b6b
--- /dev/null
+++ b/src/components/emergencySupplies/index.vue
@@ -0,0 +1,147 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择应急物资" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-row>
+ <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.pass" placeholder="物资名称" style="max-width: 215px;"/>
+ </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-button size="default" :icon="Delete">清除选择</el-button>
+ </el-form-item>
+ </el-form>
+ </el-row>
+ <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>
+ <div class="pages">
+ <el-pagination
+ 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"
+ />
+ </div>
+ </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: '',
+ });
+ // 表格
+ 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-form--inline .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+/*分页*/
+.pages{
+ margin-top: 15px;
+}
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+</style>
diff --git a/src/components/material/index.vue b/src/components/material/index.vue
new file mode 100644
index 0000000..d232437
--- /dev/null
+++ b/src/components/material/index.vue
@@ -0,0 +1,142 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择应急物资" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-row>
+ <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.pass" placeholder="物资名称" style="max-width: 215px;"/>
+ </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-button size="default" :icon="Delete">清除选择</el-button>
+ </el-form-item>
+ </el-form>
+ </el-row>
+ <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>
+ <div class="pages">
+ <el-pagination
+ 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"
+ />
+ </div>
+ </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: '',
+ });
+ // 表格
+ const tableData = [
+ {
+ name: '应急救援组',
+ },
+ {
+ name: '工艺抢险组',
+ },
+ {
+ name: '后勤保障组',
+ },
+ {
+ 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-form--inline .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+/*分页*/
+.pages{
+ margin-top: 15px;
+}
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+</style>
diff --git a/src/views/contingencyManagement/panManagement/component/regionsDialog.vue b/src/components/regionsDialog/index.vue
similarity index 97%
rename from src/views/contingencyManagement/panManagement/component/regionsDialog.vue
rename to src/components/regionsDialog/index.vue
index 0edce4a..0aa5c11 100644
--- a/src/views/contingencyManagement/panManagement/component/regionsDialog.vue
+++ b/src/components/regionsDialog/index.vue
@@ -7,7 +7,7 @@
<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" type="primary" @click="submitForm(ruleFormRef)" style="margin-left: 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>
diff --git a/src/components/userCheckbox/index.vue b/src/components/userCheckbox/index.vue
new file mode 100644
index 0000000..e11038f
--- /dev/null
+++ b/src/components/userCheckbox/index.vue
@@ -0,0 +1,406 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="用户选择"
+ v-model="isShowDialog"
+ width="1000px"
+ draggable
+ >
+ <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
+ <el-aside width="200px">
+ <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
+ <el-tree
+ ref="treeRef"
+ class="filter-tree"
+ :data="data"
+ :props="defaultProps"
+ default-expand-all
+ :filter-node-method="filterNode"
+ />
+ </el-aside>
+ <el-container style="margin: 0 15px;min-width:560px;">
+ <el-header style="font-size: 12px">
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item>
+ <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button size="default" type="primary" class="ml10" @click="onSubmit">
+ 查询
+ </el-button>
+ <el-button size="default" class="ml10" @click="submitReset">
+ 重置
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </el-header>
+ <el-main style="position: relative;">
+ <el-table
+ :data="tableData"
+ :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
+ >
+ <el-table-column type="selection" width="55"/>
+ <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="115" show-overflow-tooltip sortable />
+ <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
+ <el-table-column label="状态"
+ width="80"
+ prop="tag"
+ :filters="[
+ { text: '正常', value: 'Home' },
+ { text: '不正常', value: 'Office' },
+ ]"
+ :filter-method="filterTag"
+ filter-placement="bottom-end">
+ <template #default="scope">
+ <el-tag
+ :type="scope.row.tag === 'Home' ? '' : 'success'"
+ disable-transitions
+ >{{ scope.row.tag }}</el-tag
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </el-main>
+ </el-container>
+ <div style="width: 200px;">
+ <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>
+ <el-button size="default" @click="onCancel">关闭</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ ref,
+ defineComponent,
+ watch,
+ reactive,
+} from 'vue';
+
+import type {
+ ElTree,
+ // ElTable,
+} from 'element-plus'
+
+interface Tree {
+ id: number
+ label: string
+ children?: Tree[]
+}
+// interface User {
+// date: string
+// name: string
+// address: string
+// }
+export default defineComponent({
+ name: 'userSelections',
+ components: {
+ // Search,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+ // 打开弹窗
+ const openDialog = () => {
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+
+
+ const filterText = ref('')
+ const treeRef = ref<InstanceType<typeof ElTree>>() //实例化
+
+ const defaultProps = {
+ children: 'children',
+ label: 'label',
+ }
+
+ // 监听搜索关键字改变
+ watch(filterText, (val) => {
+ treeRef.value!.filter(val)
+ })
+
+ // 节点过滤模糊搜索
+ const filterNode = (value: string, data: Tree) => {
+ if (!value) return true
+ return data.label.includes(value)
+ }
+
+ // 树形结构内容
+ const data: Tree[] = [
+ {
+ id: 1,
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ id: 4,
+ label: '经营班子',
+ children: []
+ },
+ ],
+ },
+ {
+ id: 2,
+ label: '生产运行部',
+ children: [
+ {
+ id: 5,
+ label: '工艺二班',
+ },
+ {
+ id: 6,
+ label: '灌装一班',
+ },
+ ],
+ },
+ {
+ id: 3,
+ label: '设备部',
+ children: [
+ {
+ id: 7,
+ label: '仪表班',
+ },
+ {
+ id: 8,
+ label: '机修班',
+ },
+ ],
+ },
+ ]
+ // const item = {
+ // date: '孙刚',
+ // name: '龚赛健',
+ // address: '综合办公室',
+ // tag: '正常',
+ // }
+ // const tableData = ref(Array.from({ length: 7 }).fill(item))
+ const tableData = [
+ {
+ date: '孙刚',
+ name: '孙刚',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '谭柏',
+ name: '谭柏',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪威',
+ name: '倪威',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪玲婕',
+ name: '倪玲婕',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ ];
+ // 定义表单搜索
+ const formInline = reactive({
+ name: '',
+ })
+ // 搜索按钮
+ const onSubmit = () => {
+ console.log('submit!')
+ }
+
+ // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+ // 右方点击添加后显示标签
+ const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ };
+
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ defaultProps,
+ filterNode,
+ data,
+ tableData,
+ formInline,
+ onSubmit,
+ // multipleTableRef,
+ handleClose,
+ dynamicTags,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.layout-container-demo .el-header {
+ position: relative;
+ color: var(--el-text-color-primary);
+ line-height: 32px;
+ --el-header-height: 45px;
+ padding: 0;
+}
+.layout-container-demo .el-aside {
+ padding: 10px;
+ border: 1px solid #ebeef5;
+ color: var(--el-text-color-primary);
+}
+::v-deep .el-input--large .el-input__inner {
+ height: 32px!important;
+ line-height: 32px!important;
+}
+.layout-container-demo .el-menu {
+ border-right: none;
+}
+.layout-container-demo .el-main {
+ padding: 0;
+}
+.layout-container-demo .toolbar {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ right: 20px;
+}
+.el-input--large{
+ //width: 178px;
+ height: 32px;
+}
+.el-tree{
+ overflow: auto;
+}
+::-webkit-scrollbar {
+ height: 1px;
+
+}
+::-webkit-scrollbar-thumb {
+ background-color: transparent;
+}
+// 鼠标悬浮样式
+:hover::-webkit-scrollbar-thumb {
+ border-radius: 15px;
+ background-color: #d8d9db;
+}
+::v-deep .el-input__wrapper{
+ width: 215px;
+}
+::v-deep .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ 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%;
+//}
+/*分页*/
+.pages{
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 15px;
+ align-items: center;
+ //position: absolute;
+ //bottom: 0;
+}
+::v-deep .el-pagination{
+ width: 100%;
+}
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/userSelections/index.vue b/src/components/userSelections/index.vue
index c71c9cf..19458f2 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 style="margin-right: 15px;min-width:560px;">
+ <el-container style="margin: 0 15px;min-width:560px;">
<el-header style="font-size: 12px">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
@@ -34,28 +34,25 @@
</el-form-item>
</el-form>
</el-header>
- <el-main>
- <el-scrollbar>
+ <el-main style="position: relative;">
<el-table
: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 align="center" width="55">
+ <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 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="110" show-overflow-tooltip sortable />
- <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
+ <el-table-column prop="address" label="所属机构" width="115" show-overflow-tooltip sortable />
+ <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
<el-table-column label="状态"
+ width="80"
prop="tag"
- width="100"
:filters="[
{ text: '正常', value: 'Home' },
{ text: '不正常', value: 'Office' },
@@ -71,11 +68,33 @@
</template>
</el-table-column>
</el-table>
- </el-scrollbar>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</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)">
+ <div style="width: 200px;">
+ <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>
@@ -100,7 +119,7 @@
import type {
ElTree,
- ElTable,
+ // ElTable,
} from 'element-plus'
interface Tree {
@@ -108,11 +127,11 @@
label: string
children?: Tree[]
}
-interface User {
- date: string
- name: string
- address: string
-}
+// interface User {
+// date: string
+// name: string
+// address: string
+// }
export default defineComponent({
name: 'userSelections',
components: {
@@ -195,14 +214,43 @@
],
},
]
- const item = {
- date: '龚赛健',
- name: '龚赛健',
- address: '综合办公室',
- tag: '正常',
- }
- const tableData = ref(Array.from({ length: 5 }).fill(item))
-
+ // const item = {
+ // date: '孙刚',
+ // name: '龚赛健',
+ // address: '综合办公室',
+ // tag: '正常',
+ // }
+ // const tableData = ref(Array.from({ length: 7 }).fill(item))
+ const tableData = [
+ {
+ date: '孙刚',
+ name: '孙刚',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '谭柏',
+ name: '谭柏',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪威',
+ name: '倪威',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪玲婕',
+ name: '倪玲婕',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ ];
// 定义表单搜索
const formInline = reactive({
name: '',
@@ -212,25 +260,28 @@
console.log('submit!')
}
- 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 multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 右方点击添加后显示标签
- const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+ const dynamicTags = ref(['胡海涛']);
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ radio1.value=""
+ };
+ const radio1=ref('谭柏')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
};
return {
openDialog,
@@ -243,12 +294,15 @@
tableData,
formInline,
onSubmit,
- // currentRow,
- // setCurrent,
- multipleTableRef,
+ // multipleTableRef,
handleClose,
dynamicTags,
- // handleCurrentChange,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ radio1,
+ radio,
};
},
});
@@ -259,6 +313,7 @@
color: var(--el-text-color-primary);
line-height: 32px;
--el-header-height: 45px;
+ padding: 0;
}
.layout-container-demo .el-aside {
padding: 10px;
@@ -306,6 +361,7 @@
}
::v-deep .el-form-item{
margin-bottom: 0;
+ margin-right: 0;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
@@ -328,4 +384,44 @@
::v-deep .el-checkbox__input .el-checkbox__inner{
border-radius: 50%;
}
+/*分页*/
+.pages{
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 15px;
+ align-items: center;
+ //position: absolute;
+ //bottom: 0;
+}
+::v-deep .el-pagination{
+ width: 100%;
+}
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/abolishDialog/abolishDialog.vue b/src/views/contingencyManagement/abolishDialog/abolishDialog.vue
new file mode 100644
index 0000000..156771d
--- /dev/null
+++ b/src/views/contingencyManagement/abolishDialog/abolishDialog.vue
@@ -0,0 +1,137 @@
+<template>
+ <div class="system-user-container">
+ <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
+ <div class="box">
+ <el-menu
+ :default-active="activeIndex"
+ class="el-menu-demo"
+ background-color="#ebeef5"
+ text-color="#fff"
+ active-text-color="#fff"
+ mode="horizontal"
+ @select="handleSelect"
+ >
+ <el-menu-item index="1">表单信息</el-menu-item>
+ <el-menu-item index="2">流程图</el-menu-item>
+ </el-menu>
+ <div v-if="activeIndex == 1" class="navType">
+ <formInformationTop v-if="false"></formInformationTop>
+ <formInformationTops></formInformationTops>
+ </div>
+ <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
+ <div class="title2">流程图</div>
+ <div style="width:100%;height:400px"></div>
+ </div>
+ </div>
+ <lowerPlate></lowerPlate>
+ <div class="btns">
+ <el-button type="primary">启动</el-button>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref,onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import formInformationTop from './component/formInformationTop.vue'
+import formInformationTops from './component/formInformationTops.vue'
+import lowerPlate from './component/lowerPlate.vue'
+export default defineComponent({
+ components:{lowerPlate,formInformationTop,formInformationTops},
+ setup() {
+ const activeIndex = ref('1');
+ const handleSelect = (key: string, keyPath: string[]) => {
+ // console.log(key, keyPath);
+ activeIndex.value = key;
+ };
+ const form = reactive({
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+
+ const router=useRouter()
+ const Type=onMounted(()=>{
+ // console.log("xxxxxxx",router)
+ })
+
+ return {
+ activeIndex,
+ handleSelect,
+ form,
+ router,
+ Type
+ };
+ },
+});
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box{
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+ padding: 15px;
+}
+.tiao{
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0 ;
+ position: relative;
+}
+.typeS{
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor{
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns{
+ width: 100%;
+ padding:20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+
+}
+.title2{
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+
+/*弹窗底部边框线*/
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+/*弹窗顶部边框线*/
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+</style>
diff --git a/src/views/contingencyManagement/abolishDialog/component/formInformationTop.vue b/src/views/contingencyManagement/abolishDialog/component/formInformationTop.vue
new file mode 100644
index 0000000..ef75063
--- /dev/null
+++ b/src/views/contingencyManagement/abolishDialog/component/formInformationTop.vue
@@ -0,0 +1,144 @@
+<template>
+ <el-form ref="form" :model="form" label-width="120px">
+ <el-row>
+ <el-col :span="11">
+ <el-form-item label="安全目标指标">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" :offset="2">
+ <el-form-item label="目标指标编号">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="11">
+ <el-form-item label="年度">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" :offset="2">
+ <el-form-item label="指标值">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <el-tabs v-model="activeName" style="padding: 0 20px">
+ <el-tab-pane label="考核指标" name="1">
+ <el-table :data="tableData" style="width: 100%">
+ <el-table-column align="center" type="index" label="序号" width="70" />
+ <el-table-column align="center" prop="date" label="责任部门" />
+ <el-table-column align="center" prop="name" label="考核指标" />
+ <el-table-column align="center" prop="address" label="制定部门" />
+ <el-table-column align="center" prop="address" label="制定日期" />
+ <el-table-column align="center" label="检查值">
+ <template #default>
+ <el-input v-model="form.name" placeholder=""></el-input>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="address" label="检查人" />
+ <el-table-column align="center" prop="address" label="检查时间" />
+ </el-table>
+ <div class="tiao">
+ <div class="typeS">审批</div>
+ </div>
+ <el-row style="padding:20px 0">
+ <el-col :span="6" style="text-align:right">一级审批：</el-col>
+ <el-col :span="18">同意</el-col>
+ </el-row>
+ <el-row style="padding:0 0 20px 0">
+ <el-col :span="6"></el-col>
+ <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
+ </el-row>
+ </el-tab-pane>
+ </el-tabs>
+</template>
+<script lang="ts">
+import { defineComponent,ref,reactive } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const form = reactive({
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+ const tableData = [
+ {
+ date: '2016-05-03',
+ name: 'Tom',
+ address: 'No. 189, Grove St, Los Angeles',
+ },
+ ];
+ const activeName = ref('1');
+ return{
+ form,
+ tableData,
+ activeName
+ }
+ },
+})
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box{
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+}
+.tiao{
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0 ;
+ position: relative;
+}
+.typeS{
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor{
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns{
+ width: 100%;
+ padding:20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+
+}
+.title2{
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+.el-row{
+ padding:0 0 20px 0 ;
+}
+</style>
diff --git a/src/views/contingencyManagement/abolishDialog/component/formInformationTops.vue b/src/views/contingencyManagement/abolishDialog/component/formInformationTops.vue
new file mode 100644
index 0000000..68ae8a6
--- /dev/null
+++ b/src/views/contingencyManagement/abolishDialog/component/formInformationTops.vue
@@ -0,0 +1,318 @@
+<template>
+ <el-form ref="form" :model="form" label-width="120px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="预案名称">
+ <el-input v-model="form.name" disabled placeholder="请填写预案名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="适用部门">
+ <el-tree-select
+ class="select"
+ placeholder="请选择"
+ v-model="value"
+ :data="data"
+ :render-after-expand="false"
+ show-checkbox
+ multiple
+ clearable
+ disabled
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="预案类型">
+ <el-select class="select" v-model="form.region" disabled placeholder="请选择">
+ <el-option label="综合应急预案" value="shanghai" />
+ <el-option label="现场处置方案" value="beijing" />
+ <el-option label="专项应急预案" value="shanghai" />
+ <el-option label="其它预案" value="beijing" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="危险源关联">
+ <el-select class="select" v-model="form.region" disabled placeholder="请选择">
+ <el-option label="是" value="shanghai" />
+ <el-option label="否" value="beijing" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="预案级别">
+ <el-select class="select" v-model="form.region" disabled placeholder="请选择">
+ <el-option label="公司及" value="shanghai" />
+ <el-option label="分厂级" value="beijing" />
+ <el-option label="车间级" value="beijing" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="编写人">
+ <el-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser" disabled/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="编写部门" disabled placeholder="请选择">
+ <el-tree-select
+ class="select"
+ v-model="value2"
+ :data="dataSelect"
+ :render-after-expand="false"
+ multiple
+ check-strictly
+ check-on-click-node
+ clearable
+ disabled
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="发布实施日期">
+ <el-date-picker v-model="datetime" type="datetime" disabled placeholder="选择日期时间" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
+ <el-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" disabled/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="预案附件">
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ :on-change="handleChange"
+ disabled
+ >
+ <el-button type="primary" disabled
+ >点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip">
+ 添加相关附件
+ </div>
+ </template>
+ </el-upload>
+ </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-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" disabled @click="regionsDialog"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <checkTemplate ref="ShowRef"/>
+ <userSelections ref="userRef"/>
+ <RegionsDialog ref="openRef"/>
+</template>
+<script lang="ts">
+import {
+ defineComponent,
+ ref,
+ reactive
+} from 'vue';
+import {
+ Search
+} from '@element-plus/icons-vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+import CheckTemplate from "/@/components/checkTemplate/index.vue"
+import RegionsDialog from "/@/components/regionsDialog/index.vue";
+export default defineComponent({
+ components: {
+ CheckTemplate,
+ UserSelections,
+ RegionsDialog,
+ },
+ setup() {
+ const form = reactive({
+ name: '',
+ value: '',
+ value2: '',
+ teamLeader: '',
+
+ // data: '',
+ // dataSelect: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+
+ // 可选择树形选择框
+ const value = ref()
+
+ const data = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '生产运行部',
+ children: [
+ {
+ value: '1-1-1',
+ label: '工艺二班',
+ },
+ ],
+ },
+ ],
+ }
+ ]
+ // 树形选择框
+ const value2 = ref()
+
+ const dataSelect = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '生产运行部',
+ children: [
+ {
+ value: '1-1-1',
+ label: '工艺二班',
+ },
+ ],
+ },
+ ],
+ }
+ ]
+ // 应急队伍弹窗
+ const ShowRef=ref()
+ const daiInpt=()=>{
+ ShowRef.value.openDailog()
+ }
+ // 选择区域弹窗
+ const openRef=ref()
+ const regionsDialog=()=>{
+ openRef.value.openDailog()
+ }
+ // 打开编写人选择用户弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ // 日期选择
+ const datetime = ref('')
+ return {
+ form,
+ value,
+ data,
+ value2,
+ dataSelect,
+ openUser,
+ userRef,
+ Search,
+ ShowRef,
+ daiInpt,
+ openRef,
+ datetime,
+ regionsDialog,
+ };
+ },
+});
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box {
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+}
+.tiao {
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0;
+ position: relative;
+}
+.typeS {
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor {
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns {
+ width: 100%;
+ padding: 20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+}
+.title2 {
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+.el-row{
+ padding:0 0 20px 0;
+}
+.select{
+ width: 100%;
+}
+.select ::v-deep .el-select{
+ width: 100%;
+}
+</style>
diff --git a/src/views/contingencyManagement/abolishDialog/component/lowerPlate.vue b/src/views/contingencyManagement/abolishDialog/component/lowerPlate.vue
new file mode 100644
index 0000000..cbb82fb
--- /dev/null
+++ b/src/views/contingencyManagement/abolishDialog/component/lowerPlate.vue
@@ -0,0 +1,120 @@
+<template>
+ <div class="box">
+ <el-form ref="formS" :model="form" :rules="rules" label-width="120px">
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="流程标题">
+ <el-input v-model="form.names" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="下级审批日期">
+ <el-date-picker v-model="form.date1" type="date" placeholder="下级审批日期" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="">
+ <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-if="form.delivery">
+ <el-col :span="15">
+ <el-form-item label="抄送给" prop="resource">
+ <el-input v-model="form.resource" placeholder="">
+ <template #append> <el-button :icon="Search" @click="openDai" /> </template
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="">
+ <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-if="form.type">
+ <el-col :span="15">
+ <el-form-item label="指定" prop="desc">
+ <el-input v-model="form.desc" placeholder="">
+ <template #append> <el-button :icon="Search" @click="openDai" /> </template
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
+ <DailogSearchUser ref="ShowUser"></DailogSearchUser>
+</template>
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue';
+import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
+import { Search } from '@element-plus/icons-vue';
+import type { FormInstance, FormRules } from 'element-plus'
+export default defineComponent({
+ components:{DailogSearchUser},
+ setup() {
+ const formS=ref<FormInstance>()
+ let form = reactive({
+ names: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: "",
+ type: "",
+ resource: '',
+ desc: '',
+ });
+ const typeChang=()=>{
+ console.log('tag',form)
+ }
+ const rules = reactive<FormRules>({
+ resource: [
+ {
+ type: 'array',
+ required: true,
+ message: '用户不能为空',
+ trigger: 'change',
+ },
+ ],
+ desc: [
+ {
+ required: true,
+ message: '用户不能为空',
+ trigger: 'change',
+ },
+ ]})
+ const ShowUser=ref()
+ const openDai =()=>{
+ ShowUser.value.openDailog()
+ }
+ return {
+ form,
+ rules,
+ formS,
+ typeChang,
+ ShowUser,
+ openDai,
+ Search,
+ };
+ },
+});
+</script>
+
+<style scoped>
+.box {
+ margin: 30px 0 100px 0;
+ background-color: #fff;
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+ padding: 20px;
+}
+.el-row {
+ padding: 0 0 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/contingency/index.vue b/src/views/contingencyManagement/contingency/index.vue
index 595aa7c..197e49c 100644
--- a/src/views/contingencyManagement/contingency/index.vue
+++ b/src/views/contingencyManagement/contingency/index.vue
@@ -73,7 +73,7 @@
<el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip sortable></el-table-column>
<el-table-column prop="teamPhone" label="负责人手机" show-overflow-tooltip sortable></el-table-column>
<el-table-column prop="attachments" label="相关附件" show-overflow-tooltip sortable></el-table-column>
- <el-table-column label="操作" width="200" align="center">
+ <el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="scope">
<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
@@ -388,4 +388,24 @@
.el-form .el-form-item:last-of-type{
margin-bottom: 22px!important;
}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+//表头
+::v-deep .el-table th.el-table__cell {
+ background-color: #f6f7fa;
+ font-weight: 400;
+ color: #909399;
+}
+.el-table .sort-caret.ascending{
+ border-bottom-color: #c0c4cc;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue
new file mode 100644
index 0000000..1655473
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue
@@ -0,0 +1,443 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="新建应急预案管理"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="预案名称" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="适用部门" prop="responsibleDepartment">
+ <el-tree-select
+ v-model="treeSelect"
+ :data="tree"
+ multiple
+ :render-after-expand="true"
+ show-checkbox
+ />
+ <el-divider />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="预案类型" prop="teamLeader">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="综合应急预案" value="admin"></el-option>
+ <el-option label="现场处置方案" value="common"></el-option>
+ <el-option label="专项应急预案" value="common"></el-option>
+ <el-option label="其他预案" value="common"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="危险源关联" prop="teamLevel">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="是" value="admin"></el-option>
+ <el-option label="否" value="common"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="预案级别" prop="teamPhone">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="公司级" value="admin"></el-option>
+ <el-option label="分厂级" value="common"></el-option>
+ <el-option label="车间级" value="common"></el-option>
+ </el-select>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
+ </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-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"/>
+ </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-tree-select-->
+<!-- v-model="ruleForm.responsibleDepartment"-->
+<!-- :data="data" class="w100"-->
+<!-- placeholder="请选择"/>-->
+ <el-date-picker
+ v-model="value1"
+ type="datetime"
+ placeholder="选择日期时间"
+ />
+ </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" @click="daiInpt" >
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="相关附件">
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ :on-change="handleChange"
+ >
+ <el-button type="primary"
+ >点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip">
+ 添加相关附件
+ </div>
+ </template>
+ </el-upload>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="regionsDialog"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <CheckTemplate ref="Shows"/>
+ <userSelections ref="userRef"/>
+ <RegionsDialog ref="openRef"/>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
+import type {
+ UploadUserFile,
+ FormInstance,
+ // FormRules,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+import CheckTemplate from '/@/components/checkTemplate/index.vue'
+import RegionsDialog from '/@/components/regionsDialog/index.vue'
+
+export default defineComponent({
+ name: 'openAdd',
+ components: {
+ CheckTemplate,
+ UserSelections,
+ RegionsDialog,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ //日期选择器
+ const value1 = ref('')
+ // 上传附件
+ const fileList = ref<UploadUserFile[]>([])
+ // 可选择树
+ const treeSelect = ref()
+ const tree = [
+ {
+ value: '1',
+ label: 'Level one 1',
+ children: [
+ {
+ value: '1-1',
+ label: 'Level two 1-1',
+ children: [
+ {
+ value: '1-1-1',
+ label: 'Level three 1-1-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: 'Level one 2',
+ children: [
+ {
+ value: '2-1',
+ label: 'Level two 2-1',
+ children: [
+ {
+ value: '2-1-1',
+ label: 'Level three 2-1-1',
+ },
+ ],
+ },
+ {
+ value: '2-2',
+ label: 'Level two 2-2',
+ children: [
+ {
+ value: '2-2-1',
+ label: 'Level three 2-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: 'Level one 3',
+ children: [
+ {
+ value: '3-1',
+ label: 'Level two 3-1',
+ children: [
+ {
+ value: '3-1-1',
+ label: 'Level three 3-1-1',
+ },
+ ],
+ },
+ {
+ value: '3-2',
+ label: 'Level two 3-2',
+ children: [
+ {
+ value: '3-2-1',
+ label: 'Level three 3-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ //定义树形下拉框
+ const responsibleDepartment = ref()
+ const data = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '经营班子',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: '生产运行部',
+ children: [
+ {
+ value: '2-1',
+ label: '灌装一班',
+ children: []
+ },
+ {
+ value: '2-2',
+ label: '工艺四班',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: '设备部',
+ children: [
+ {
+ value: '3-1',
+ label: '仪表班',
+ children: [],
+ },
+ {
+ value: '3-2',
+ label: '机修班',
+ children: [],
+ },
+ ],
+ },
+ ]
+ // 必填项提示
+ // const rules = reactive<FormRules>({
+ // teamName: [
+ // {
+ // required: true,
+ // message: '队伍名称不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // teamLevel: [
+ // {
+ // required: true,
+ // message: '队伍级别不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // teamLeader: [
+ // {
+ // required: true,
+ // message: '队伍负责人不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // responsibleDepartment: [
+ // {
+ // required: true,
+ // message: '负责人部门不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // teamPhone: [
+ // {
+ // required: true,
+ // message: '负责人手机不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // telephone: [
+ // {
+ // required: true,
+ // message: '固定电话不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // })
+ // 表单提交验证必填项
+ const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+ // 应急队伍弹窗
+ 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,
+ isShowDialog,
+ onCancel,
+ fileList,
+ responsibleDepartment,
+ data,
+ Search,
+ ruleForm,
+ value1,
+ treeSelect,
+ tree,
+ daiInpt,
+ Shows,
+ ruleFormRef,
+ submitForm,
+ // rules,
+ openUser,
+ userRef,
+ regionsDialog,
+ openRef,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue
index 5583fcb..2b8d46d 100644
--- a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue
+++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue
@@ -1,20 +1,6 @@
<template>
<div class="system-user-container">
<el-card shadow="hover">
- <div class="system-user-search mb15">
- <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
- <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
- <el-option label="公司" value="shanghai"></el-option>
- <el-option label="分厂-车间" value="beijing"></el-option>
- <el-option label="工序-班组等" value="beijing"></el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10">
- 查询
- </el-button>
- <el-button size="default" class="ml10" @click="submitReset">
- 重置
- </el-button>
- </div>
<div class="button_Line">
<div class="button_Left">
<el-button size="default" type="primary" @click="onOpenAdd('新建')">
@@ -22,11 +8,11 @@
<Plus />
</el-icon>新建
</el-button>
- <el-button size="default" type="warning" plain disabled>
- <el-icon>
- <Edit />
- </el-icon>修改
- </el-button>
+<!-- <el-button size="default" type="warning" plain disabled>-->
+<!-- <el-icon>-->
+<!-- <Edit />-->
+<!-- </el-icon>修改-->
+<!-- </el-button>-->
<el-button size="default" type="danger" plain disabled>
<el-icon>
<Delete />
@@ -60,30 +46,29 @@
type="selection"
width="55"
/>
- <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
- <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="260" align="center">
+ <el-table-column prop="teamName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamLevel" label="演练地点" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="attachments" label="演练记录日期" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column label="操作" width="260" align="center" fixed="right">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
<el-icon style="margin-right: 5px;">
<VideoPlay />
</el-icon>启动
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
<el-icon style="margin-right: 5px;">
<VideoPause />
</el-icon>废止
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
<el-icon style="margin-right: 5px;">
<EditPen />
</el-icon>修改
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- 发起审批
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
<el-icon>
@@ -93,21 +78,7 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination-->
- <!-- @size-change="onHandleSizeChange"-->
- <!-- @current-change="onHandleCurrentChange"-->
- <!-- class="mt15"-->
- <!-- :pager-count="5"-->
- <!-- :page-sizes="[10, 20, 30]"-->
- <!-- v-model:current-page="tableData.param.pageNum"-->
- <!-- background-->
- <!-- v-model:page-size="tableData.param.pageSize"-->
- <!-- layout="total, sizes, prev, pager, next, jumper"-->
- <!-- :total="tableData.total"-->
- <!-- >-->
- <!-- </el-pagination>-->
</el-card>
- <OpenSee ref="seeRef" />
<OpenAdd ref="addRef" />
<OpenEdit ref="editRef" />
<upData ref="upShow"></upData>
@@ -128,19 +99,18 @@
ElTable,
} from 'element-plus';
import { Plus,
- Edit,
+ // Edit,
Delete,
Upload,
Download,
Refresh,
- View,
+ // View,
VideoPause,
VideoPlay,
EditPen,
} from '@element-plus/icons-vue'
-import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
+import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
-import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
// 定义表格数据类型
@@ -175,12 +145,11 @@
name: 'systemUser',
components: {
OpenAdd,
- OpenSee,
OpenEdit,
- View,
+ // View,
EditPen,
Plus,
- Edit,
+ // Edit,
Delete,
Upload,
Download,
@@ -190,7 +159,7 @@
UpData
},
setup() {
- const seeRef = ref();
+ // const seeRef = ref();
const editRef = ref();
// 选择框
// const value = ref('');
@@ -262,10 +231,6 @@
teamLeader: '王磊',
}
]
- //查看用户弹窗
- const onOpenSee = (row: TableDataRow) => {
- seeRef.value.openDialog(row);
- };
// 打开新增用户弹窗
const addRef = ref();
const onOpenAdd = () => {
@@ -287,18 +252,6 @@
})
.catch(() => {});
};
- // 分页改变
- // const onHandleSizeChange = (val: number) => {
- // state.tableData.param.pageSize = val;
- // };
- // // 分页改变
- // const onHandleCurrentChange = (val: number) => {
- // state.tableData.param.pageNum = val;
- // };
- // 页面加载时
- // onMounted(() => {
- // initTableData();
- // });
return {
// value,
// options,
@@ -307,16 +260,13 @@
upButton,
upShow,
tableData,
- onOpenSee, //查看
- seeRef,
+ // onOpenSee, //查看
+ // seeRef,
onOpenEdit, //编辑
editRef,
onOpenAdd, //新增
addRef,
onRowDel,
- // onHandleSizeChange,
- // onHandleCurrentChange,
- // ...toRefs(state),
};
},
});
diff --git a/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue
new file mode 100644
index 0000000..823a2aa
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue
@@ -0,0 +1,214 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="新建应急演练实施"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="演练名称" prop="teamName">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="regionsDialog"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="实际到场人员" prop="telephone" >
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="演练过程描述" prop="telephone">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请填写演练目的"
+ class="textarea"
+ type="textarea"
+ />
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </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-date-picker
+ class="w100"
+ v-model="value1"
+ type="datetime"
+ placeholder="选择日期时间"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <UserSelect ref="Shows"/>
+ <UserCheckbox ref="userRef"/>
+ <RegionsDialog ref="openRef"/>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
+import type {
+ FormInstance,
+ // FormRules,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+import UserCheckbox from "/@/components/userCheckbox/index.vue"
+import UserSelect from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue'
+import RegionsDialog from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue'
+
+export default defineComponent({
+ name: 'openAdd',
+ components: {
+ UserSelect,
+ UserCheckbox,
+ RegionsDialog,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ //日期选择器
+ const value1 = ref('')
+ // 表单提交验证必填项
+ const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+ // 应急队伍弹窗
+ const Shows=ref()
+ const daiInpt=()=>{
+ Shows.value.openDialog()
+ }
+ // 演练名称弹窗
+ const openRef=ref()
+ const regionsDialog=()=>{
+ openRef.value.openDailog()
+ }
+ // 实际到场人员弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ Search,
+ ruleForm,
+ value1,
+ daiInpt,
+ Shows,
+ ruleFormRef,
+ submitForm,
+ // rules,
+ openUser,
+ userRef,
+ regionsDialog,
+ openRef,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+.textarea{
+ height: 90px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 90px!important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue
new file mode 100644
index 0000000..b673e61
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue
@@ -0,0 +1,157 @@
+<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="margin-left: 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>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </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 pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ 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,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
+ dynamicTags,
+ handleClose,
+ Delete,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-row {
+ padding: 0 0 20px 0;
+}
+.el-form--inline .el-form-item{
+ margin: 0;
+}
+/*分页开始*/
+ .pages{
+ display: flex;
+ justify-content: flex-start;
+ margin-top: 15px;
+ }
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+/*分页结束*/
+</style>
diff --git a/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue
new file mode 100644
index 0000000..273a389
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue
@@ -0,0 +1,427 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="用户选择"
+ v-model="isShowDialog"
+ width="1000px"
+ draggable
+ >
+ <el-container class="layout-container-demo" style="height: 500px;overflow: auto;min-width: 960px">
+ <el-aside width="200px">
+ <el-input v-model="filterText" placeholder="请输入组织机构过滤" />
+ <el-tree
+ ref="treeRef"
+ class="filter-tree"
+ :data="data"
+ :props="defaultProps"
+ default-expand-all
+ :filter-node-method="filterNode"
+ />
+ </el-aside>
+ <el-container style="margin: 0 15px;min-width:560px;">
+ <el-header style="font-size: 12px">
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item>
+ <el-input size="default" v-model="formInline.name" placeholder="登录名"> </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button size="default" type="primary" class="ml10" @click="onSubmit">
+ 查询
+ </el-button>
+ <el-button size="default" class="ml10" @click="submitReset">
+ 重置
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </el-header>
+ <el-main style="position: relative;">
+ <el-table
+ :data="tableData"
+ :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
+ >
+ <el-table-column align="center" width="55">
+ <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 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="115" show-overflow-tooltip sortable />
+ <el-table-column prop="department" label="所属部门" width="115" show-overflow-tooltip sortable/>
+ <el-table-column label="状态"
+ width="80"
+ prop="tag"
+ :filters="[
+ { text: '正常', value: 'Home' },
+ { text: '不正常', value: 'Office' },
+ ]"
+ :filter-method="filterTag"
+ filter-placement="bottom-end">
+ <template #default="scope">
+ <el-tag
+ :type="scope.row.tag === 'Home' ? '' : 'success'"
+ disable-transitions
+ >{{ scope.row.tag }}</el-tag
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </el-main>
+ </el-container>
+ <div style="width: 200px;">
+ <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>
+ <el-button size="default" @click="onCancel">关闭</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ ref,
+ defineComponent,
+ watch,
+ reactive,
+} from 'vue';
+
+import type {
+ ElTree,
+ // ElTable,
+} from 'element-plus'
+
+interface Tree {
+ id: number
+ label: string
+ children?: Tree[]
+}
+// interface User {
+// date: string
+// name: string
+// address: string
+// }
+export default defineComponent({
+ name: 'userSelections',
+ components: {
+ // Search,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+ // 打开弹窗
+ const openDialog = () => {
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+
+
+ const filterText = ref('')
+ const treeRef = ref<InstanceType<typeof ElTree>>() //实例化
+
+ const defaultProps = {
+ children: 'children',
+ label: 'label',
+ }
+
+ // 监听搜索关键字改变
+ watch(filterText, (val) => {
+ treeRef.value!.filter(val)
+ })
+
+ // 节点过滤模糊搜索
+ const filterNode = (value: string, data: Tree) => {
+ if (!value) return true
+ return data.label.includes(value)
+ }
+
+ // 树形结构内容
+ const data: Tree[] = [
+ {
+ id: 1,
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ id: 4,
+ label: '经营班子',
+ children: []
+ },
+ ],
+ },
+ {
+ id: 2,
+ label: '生产运行部',
+ children: [
+ {
+ id: 5,
+ label: '工艺二班',
+ },
+ {
+ id: 6,
+ label: '灌装一班',
+ },
+ ],
+ },
+ {
+ id: 3,
+ label: '设备部',
+ children: [
+ {
+ id: 7,
+ label: '仪表班',
+ },
+ {
+ id: 8,
+ label: '机修班',
+ },
+ ],
+ },
+ ]
+ // const item = {
+ // date: '孙刚',
+ // name: '龚赛健',
+ // address: '综合办公室',
+ // tag: '正常',
+ // }
+ // const tableData = ref(Array.from({ length: 7 }).fill(item))
+ const tableData = [
+ {
+ date: '孙刚',
+ name: '孙刚',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '谭柏',
+ name: '谭柏',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪威',
+ name: '倪威',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ {
+ date: '倪玲婕',
+ name: '倪玲婕',
+ address: '',
+ department: '经营班子',
+ tag: '正常',
+ },
+ ];
+ // 定义表单搜索
+ const formInline = reactive({
+ name: '',
+ })
+ // 搜索按钮
+ const onSubmit = () => {
+ console.log('submit!')
+ }
+
+ // const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+ // 右方点击添加后显示标签
+ const dynamicTags = ref(['胡海涛']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ radio1.value=""
+ };
+ const radio1=ref('谭柏')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ defaultProps,
+ filterNode,
+ data,
+ tableData,
+ formInline,
+ onSubmit,
+ // multipleTableRef,
+ handleClose,
+ dynamicTags,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ radio1,
+ radio,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.layout-container-demo .el-header {
+ position: relative;
+ color: var(--el-text-color-primary);
+ line-height: 32px;
+ --el-header-height: 45px;
+ padding: 0;
+}
+.layout-container-demo .el-aside {
+ padding: 10px;
+ border: 1px solid #ebeef5;
+ color: var(--el-text-color-primary);
+}
+::v-deep .el-input--large .el-input__inner {
+ height: 32px!important;
+ line-height: 32px!important;
+}
+.layout-container-demo .el-menu {
+ border-right: none;
+}
+.layout-container-demo .el-main {
+ padding: 0;
+}
+.layout-container-demo .toolbar {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ right: 20px;
+}
+.el-input--large{
+ //width: 178px;
+ height: 32px;
+}
+.el-tree{
+ overflow: auto;
+}
+::-webkit-scrollbar {
+ height: 1px;
+
+}
+::-webkit-scrollbar-thumb {
+ background-color: transparent;
+}
+// 鼠标悬浮样式
+:hover::-webkit-scrollbar-thumb {
+ border-radius: 15px;
+ background-color: #d8d9db;
+}
+::v-deep .el-input__wrapper{
+ width: 215px;
+}
+::v-deep .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ 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%;
+}
+/*分页*/
+.pages{
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 15px;
+ align-items: center;
+ //position: absolute;
+ //bottom: 0;
+}
+::v-deep .el-pagination{
+ width: 100%;
+}
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue
index 5583fcb..e29f8a7 100644
--- a/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue
+++ b/src/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue
@@ -1,20 +1,6 @@
<template>
<div class="system-user-container">
<el-card shadow="hover">
- <div class="system-user-search mb15">
- <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
- <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
- <el-option label="公司" value="shanghai"></el-option>
- <el-option label="分厂-车间" value="beijing"></el-option>
- <el-option label="工序-班组等" value="beijing"></el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10">
- 查询
- </el-button>
- <el-button size="default" class="ml10" @click="submitReset">
- 重置
- </el-button>
- </div>
<div class="button_Line">
<div class="button_Left">
<el-button size="default" type="primary" @click="onOpenAdd('新建')">
@@ -22,11 +8,11 @@
<Plus />
</el-icon>新建
</el-button>
- <el-button size="default" type="warning" plain disabled>
- <el-icon>
- <Edit />
- </el-icon>修改
- </el-button>
+<!-- <el-button size="default" type="warning" plain disabled>-->
+<!-- <el-icon>-->
+<!-- <Edit />-->
+<!-- </el-icon>修改-->
+<!-- </el-button>-->
<el-button size="default" type="danger" plain disabled>
<el-icon>
<Delete />
@@ -60,29 +46,31 @@
type="selection"
width="55"
/>
- <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
- <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="260" align="center">
+ <el-table-column prop="teamName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamLevel" label="演练地点" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="attachments" label="演练记录时间" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column label="操作" width="260" align="center" fixed="right">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
<VideoPlay />
</el-icon>启动
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
<VideoPause />
</el-icon>废止
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
<el-icon style="margin-right: 5px;">
<EditPen />
</el-icon>修改
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
发起审批
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
@@ -93,19 +81,21 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination-->
- <!-- @size-change="onHandleSizeChange"-->
- <!-- @current-change="onHandleCurrentChange"-->
- <!-- class="mt15"-->
- <!-- :pager-count="5"-->
- <!-- :page-sizes="[10, 20, 30]"-->
- <!-- v-model:current-page="tableData.param.pageNum"-->
- <!-- background-->
- <!-- v-model:page-size="tableData.param.pageSize"-->
- <!-- layout="total, sizes, prev, pager, next, jumper"-->
- <!-- :total="tableData.total"-->
- <!-- >-->
- <!-- </el-pagination>-->
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-card>
<OpenSee ref="seeRef" />
<OpenAdd ref="addRef" />
@@ -128,17 +118,16 @@
ElTable,
} from 'element-plus';
import { Plus,
- Edit,
+ // Edit,
Delete,
Upload,
Download,
Refresh,
- View,
VideoPause,
VideoPlay,
EditPen,
} from '@element-plus/icons-vue'
-import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
+import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
@@ -177,10 +166,9 @@
OpenAdd,
OpenSee,
OpenEdit,
- View,
EditPen,
Plus,
- Edit,
+ // Edit,
Delete,
Upload,
Download,
@@ -287,18 +275,17 @@
})
.catch(() => {});
};
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
// 分页改变
- // const onHandleSizeChange = (val: number) => {
- // state.tableData.param.pageSize = val;
- // };
- // // 分页改变
- // const onHandleCurrentChange = (val: number) => {
- // state.tableData.param.pageNum = val;
- // };
- // 页面加载时
- // onMounted(() => {
- // initTableData();
- // });
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
return {
// value,
// options,
@@ -314,9 +301,10 @@
onOpenAdd, //新增
addRef,
onRowDel,
- // onHandleSizeChange,
- // onHandleCurrentChange,
- // ...toRefs(state),
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
};
},
});
@@ -335,4 +323,39 @@
flex-direction: row;
justify-content: space-between;
}
+//分页开始
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
+//分页结束
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue
new file mode 100644
index 0000000..4571039
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue
@@ -0,0 +1,448 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="新建应急演练计划发布"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练名称" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练地点" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练地点"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="主办部门" placeholder="请选择">
+ <el-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"/>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练方式" prop="teamLevel">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="综合" value="admin"></el-option>
+ <el-option label="桌面" value="common3"></el-option>
+ <el-option label="专项" value="common2"></el-option>
+ </el-select>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练级别" prop="teamPhone">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="公司级" value="admin"></el-option>
+ <el-option label="分厂级" value="common"></el-option>
+ <el-option label="车间级" value="common1"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划定制日期" prop="teamPhone">
+ <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划演练日期" prop="teamPhone">
+ <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="修改时间" prop="teamPhone">
+ <el-date-picker v-model="editDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划定制人" prop="teamPhone">
+ <el-input v-model="ruleForm.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
+ </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-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"/>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="演练目的" prop="telephone">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请填写演练目的"
+ class="input-with-select textarea"
+ type="textarea"
+ >
+ </el-input>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="保险措施" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练经费" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="备注信息" prop="telephone">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请填写备注信息"
+ class="input-with-select textarea"
+ type="textarea"
+ >
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
+ <el-form-item label="预案附件">
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ :on-change="handleChange"
+ >
+ <el-button type="primary"
+ >点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip">
+ 添加相关附件
+ </div>
+ </template>
+ </el-upload>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <RegionsDialog ref="Shows"/>
+ <UserCheckbox ref="userRef"/>
+ </div>
+</template>
+
+<script lang="ts">
+import { reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
+import type {
+ UploadUserFile,
+ FormInstance,
+ // FormRules,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+import UserCheckbox from "/@/components/userCheckbox/index.vue"
+import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"
+
+export default defineComponent({
+ name: 'openAdd',
+ components: {
+ RegionsDialog,
+ UserCheckbox,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ planCustomizer: '胡海涛', //计划定制人
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ //日期选择器
+ const value1 = ref('')
+ // 上传附件
+ const fileList = ref<UploadUserFile[]>([])
+ // 可选择树
+ const treeSelect = ref()
+ const tree = [
+ {
+ value: '1',
+ label: 'Level one 1',
+ children: [
+ {
+ value: '1-1',
+ label: 'Level two 1-1',
+ children: [
+ {
+ value: '1-1-1',
+ label: 'Level three 1-1-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: 'Level one 2',
+ children: [
+ {
+ value: '2-1',
+ label: 'Level two 2-1',
+ children: [
+ {
+ value: '2-1-1',
+ label: 'Level three 2-1-1',
+ },
+ ],
+ },
+ {
+ value: '2-2',
+ label: 'Level two 2-2',
+ children: [
+ {
+ value: '2-2-1',
+ label: 'Level three 2-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: 'Level one 3',
+ children: [
+ {
+ value: '3-1',
+ label: 'Level two 3-1',
+ children: [
+ {
+ value: '3-1-1',
+ label: 'Level three 3-1-1',
+ },
+ ],
+ },
+ {
+ value: '3-2',
+ label: 'Level two 3-2',
+ children: [
+ {
+ value: '3-2-1',
+ label: 'Level three 3-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ //定义树形下拉框
+ const responsibleDepartment = ref()
+ const data = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '经营班子',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: '生产运行部',
+ children: [
+ {
+ value: '2-1',
+ label: '灌装一班',
+ children: []
+ },
+ {
+ value: '2-2',
+ label: '工艺四班',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: '设备部',
+ children: [
+ {
+ value: '3-1',
+ label: '仪表班',
+ children: [],
+ },
+ {
+ value: '3-2',
+ label: '机修班',
+ children: [],
+ },
+ ],
+ },
+ ]
+
+ // 表单提交验证必填项
+ const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+ // 应急队伍弹窗
+ const Shows=ref()
+ const daiInpt=()=>{
+ Shows.value.openDailog()
+ }
+ // 打开用户选择弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ // 计划定制日期
+ const datetime = ref('')
+ // 计划演练日期
+ const drillDate = ref('')
+ // 修改时间
+ const editDate = ref('')
+
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ fileList,
+ responsibleDepartment,
+ data,
+ Search,
+ ruleForm,
+ value1,
+ treeSelect,
+ tree,
+ daiInpt,
+ Shows,
+ ruleFormRef,
+ submitForm,
+ // rules,
+ openUser,
+ userRef,
+ datetime,
+ drillDate,
+ editDate,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+//多行文本框
+.textarea{
+ height: 70px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 70px!important;
+}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openSee.vue b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openSee.vue
new file mode 100644
index 0000000..61cf6f3
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openSee.vue
@@ -0,0 +1,442 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="新建应急演练计划发布"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练名称" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练地点" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练地点" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="主办部门" placeholder="请选择" >
+ <el-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"
+ disabled
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练方式" prop="teamLevel">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择" disabled>
+ <el-option label="综合" value="admin"></el-option>
+ <el-option label="桌面" value="common3"></el-option>
+ <el-option label="专项" value="common2"></el-option>
+ </el-select>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" disabled @click="daiInpt" />
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练级别" prop="teamPhone">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择" disabled>
+ <el-option label="公司级" value="admin"></el-option>
+ <el-option label="分厂级" value="common"></el-option>
+ <el-option label="车间级" value="common1"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划定制日期" prop="teamPhone">
+ <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划演练日期" prop="teamPhone">
+ <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="修改时间" prop="teamPhone">
+ <el-date-picker v-model="editDate" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划定制人" prop="teamPhone">
+ <el-input v-model="ruleForm.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
+ </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-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择" disabled/>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser" disabled/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="演练目的" prop="telephone">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请填写演练目的"
+ class="input-with-select textarea"
+ type="textarea"
+ disabled
+ >
+ </el-input>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser" disabled/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="保险措施" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练经费" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="备注信息" prop="telephone">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请填写备注信息"
+ class="input-with-select textarea"
+ type="textarea"
+ disabled
+ >
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
+ <el-form-item label="预案附件">
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ :on-change="handleChange"
+ disabled
+ >
+ <el-button type="primary" disabled
+ >点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip">
+ 添加相关附件
+ </div>
+ </template>
+ </el-upload>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">关闭</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <RegionsDialog ref="Shows"/>
+ <UserCheckbox ref="userRef"/>
+ </div>
+</template>
+
+<script lang="ts">
+import { reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
+import type {
+ UploadUserFile,
+ FormInstance,
+ // FormRules,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+import UserCheckbox from "/@/components/userCheckbox/index.vue"
+import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"
+
+export default defineComponent({
+ name: 'openAdd',
+ components: {
+ RegionsDialog,
+ UserCheckbox,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ planCustomizer: '胡海涛', //计划定制人
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ //日期选择器
+ const value1 = ref('')
+ // 上传附件
+ const fileList = ref<UploadUserFile[]>([])
+ // 可选择树
+ const treeSelect = ref()
+ const tree = [
+ {
+ value: '1',
+ label: 'Level one 1',
+ children: [
+ {
+ value: '1-1',
+ label: 'Level two 1-1',
+ children: [
+ {
+ value: '1-1-1',
+ label: 'Level three 1-1-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: 'Level one 2',
+ children: [
+ {
+ value: '2-1',
+ label: 'Level two 2-1',
+ children: [
+ {
+ value: '2-1-1',
+ label: 'Level three 2-1-1',
+ },
+ ],
+ },
+ {
+ value: '2-2',
+ label: 'Level two 2-2',
+ children: [
+ {
+ value: '2-2-1',
+ label: 'Level three 2-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: 'Level one 3',
+ children: [
+ {
+ value: '3-1',
+ label: 'Level two 3-1',
+ children: [
+ {
+ value: '3-1-1',
+ label: 'Level three 3-1-1',
+ },
+ ],
+ },
+ {
+ value: '3-2',
+ label: 'Level two 3-2',
+ children: [
+ {
+ value: '3-2-1',
+ label: 'Level three 3-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ //定义树形下拉框
+ const responsibleDepartment = ref()
+ const data = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '经营班子',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: '生产运行部',
+ children: [
+ {
+ value: '2-1',
+ label: '灌装一班',
+ children: []
+ },
+ {
+ value: '2-2',
+ label: '工艺四班',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: '设备部',
+ children: [
+ {
+ value: '3-1',
+ label: '仪表班',
+ children: [],
+ },
+ {
+ value: '3-2',
+ label: '机修班',
+ children: [],
+ },
+ ],
+ },
+ ]
+ // 应急队伍弹窗
+ const Shows=ref()
+ const daiInpt=()=>{
+ Shows.value.openDailog()
+ }
+ // 打开用户选择弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ // 计划定制日期
+ const datetime = ref('')
+ // 计划演练日期
+ const drillDate = ref('')
+ // 修改时间
+ const editDate = ref('')
+
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ fileList,
+ responsibleDepartment,
+ data,
+ Search,
+ ruleForm,
+ value1,
+ treeSelect,
+ tree,
+ daiInpt,
+ Shows,
+ ruleFormRef,
+ // rules,
+ openUser,
+ userRef,
+ datetime,
+ drillDate,
+ editDate,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+//多行文本框
+.textarea{
+ height: 70px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 70px!important;
+}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue
new file mode 100644
index 0000000..d0ae9ee
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue
@@ -0,0 +1,171 @@
+<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 align="center" width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1" @change="radio">
+ <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
+ </el-radio-group>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="name" label="预案名称"/>
+ </el-table>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </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 pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+ // 右方点击添加后显示标签
+ const dynamicTags = ref(['LNG储罐单元']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ radio1.value=""
+ };
+ const radio1=ref('LNG装车区')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+ return {
+ dialogVisible,
+ openDailog,
+ ruleForm,
+ tableData,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ Delete,
+ handleClose,
+ radio1,
+ radio,
+ dynamicTags,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-row {
+ padding: 0 0 20px 0;
+}
+.el-form--inline .el-form-item{
+ margin: 0;
+}
+/*分页*/
+ .pages{
+ display: flex;
+ justify-content: flex-start;
+ margin-top: 15px;
+ }
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+</style>
diff --git a/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue
index 5583fcb..73bd9fe 100644
--- a/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue
+++ b/src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue
@@ -1,20 +1,6 @@
<template>
<div class="system-user-container">
<el-card shadow="hover">
- <div class="system-user-search mb15">
- <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
- <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
- <el-option label="公司" value="shanghai"></el-option>
- <el-option label="分厂-车间" value="beijing"></el-option>
- <el-option label="工序-班组等" value="beijing"></el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10">
- 查询
- </el-button>
- <el-button size="default" class="ml10" @click="submitReset">
- 重置
- </el-button>
- </div>
<div class="button_Line">
<div class="button_Left">
<el-button size="default" type="primary" @click="onOpenAdd('新建')">
@@ -22,11 +8,11 @@
<Plus />
</el-icon>新建
</el-button>
- <el-button size="default" type="warning" plain disabled>
- <el-icon>
- <Edit />
- </el-icon>修改
- </el-button>
+<!-- <el-button size="default" type="warning" plain disabled>-->
+<!-- <el-icon>-->
+<!-- <Edit />-->
+<!-- </el-icon>修改-->
+<!-- </el-button>-->
<el-button size="default" type="danger" plain disabled>
<el-icon>
<Delete />
@@ -60,30 +46,28 @@
type="selection"
width="55"
/>
- <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
- <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="name" label="演练名称" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="place" label="演练地点" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="mode" label="演练方式" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="level" label="演练级别" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="date" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="editDate" label="修改时间" show-overflow-tooltip sortable></el-table-column>
<el-table-column label="操作" width="260" align="center">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="releaseOfDrillPlan(0)">
<el-icon style="margin-right: 5px;">
<VideoPlay />
</el-icon>启动
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
- <VideoPause />
- </el-icon>废止
+ <View />
+ </el-icon>查看
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
+ <el-button size="small" text type="primary" @click="onOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
<EditPen />
</el-icon>修改
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- 发起审批
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
<el-icon>
@@ -93,23 +77,24 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination-->
- <!-- @size-change="onHandleSizeChange"-->
- <!-- @current-change="onHandleCurrentChange"-->
- <!-- class="mt15"-->
- <!-- :pager-count="5"-->
- <!-- :page-sizes="[10, 20, 30]"-->
- <!-- v-model:current-page="tableData.param.pageNum"-->
- <!-- background-->
- <!-- v-model:page-size="tableData.param.pageSize"-->
- <!-- layout="total, sizes, prev, pager, next, jumper"-->
- <!-- :total="tableData.total"-->
- <!-- >-->
- <!-- </el-pagination>-->
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-card>
- <OpenSee ref="seeRef" />
<OpenAdd ref="addRef" />
- <OpenEdit ref="editRef" />
+ <OpenSee ref="seeRef" />
<upData ref="upShow"></upData>
</div>
</template>
@@ -127,33 +112,30 @@
ElMessage,
ElTable,
} from 'element-plus';
-import { Plus,
- Edit,
+import {
+ Plus,
Delete,
Upload,
Download,
Refresh,
View,
- VideoPause,
VideoPlay,
EditPen,
} from '@element-plus/icons-vue'
-import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
-import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
-import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
+import {useRouter} from "vue-router"
+import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue';
+import OpenSee from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
// 定义表格数据类型
interface User {
- teamName: string
- teamLevel: string
- teamDescription: string
- teamPhone: string
+ name: string
+ place: string
+ mode: string
+ level: string
phone: string;
- describe: string;
- responsibleDepartment: string
- teamLeader: string
-
+ date: string;
+ editDate: string
}
// 定义接口来定义对象的类型
@@ -176,22 +158,17 @@
components: {
OpenAdd,
OpenSee,
- OpenEdit,
- View,
EditPen,
Plus,
- Edit,
+ View,
Delete,
Upload,
Download,
Refresh,
- VideoPause,
VideoPlay,
UpData
},
setup() {
- const seeRef = ref();
- const editRef = ref();
// 选择框
// const value = ref('');
// const options =
@@ -210,70 +187,51 @@
// 定义表格数据
const tableData: User[] = [
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
+ name: '应急救援组',
+ place: '公司',
+ mode: '实施抢险抢险的应急方案和措施实施 ；',
+ level: '051383830321',
phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ date: '2022-06-22 16:31:59',
+ editDate: '2022-06-22 16:31:59'
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
+ name: '应急救援组',
+ place: '公司',
+ mode: '实施抢险抢险的应急方案和措施实施 ；',
+ level: '051383830321',
phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ date: '2022-06-22 16:31:59',
+ editDate: '2022-06-22 16:31:59'
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
+ name: '应急救援组',
+ place: '公司',
+ mode: '实施抢险抢险的应急方案和措施实施 ；',
+ level: '051383830321',
phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ date: '2022-06-22 16:31:59',
+ editDate: '2022-06-22 16:31:59'
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
+ name: '应急救援组',
+ place: '公司',
+ mode: '实施抢险抢险的应急方案和措施实施 ；',
+ level: '051383830321',
phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ date: '2022-06-22 16:31:59',
+ editDate: '2022-06-22 16:31:59'
}
]
- //查看用户弹窗
- const onOpenSee = (row: TableDataRow) => {
- seeRef.value.openDialog(row);
- };
// 打开新增用户弹窗
const addRef = ref();
const onOpenAdd = () => {
addRef.value.openDialog();
};
// 打开修改用户弹窗
- const onOpenEdit = (row: TableDataRow) => {
- editRef.value.openDialog(row);
+ const seeRef = ref();
+ const onOpenSee = (row: TableDataRow) => {
+ seeRef.value.openDialog(row);
};
// 删除用户
const onRowDel = (row: TableDataRow) => {
@@ -287,36 +245,45 @@
})
.catch(() => {});
};
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
// 分页改变
- // const onHandleSizeChange = (val: number) => {
- // state.tableData.param.pageSize = val;
- // };
- // // 分页改变
- // const onHandleCurrentChange = (val: number) => {
- // state.tableData.param.pageNum = val;
- // };
- // 页面加载时
- // onMounted(() => {
- // initTableData();
- // });
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+ // 启动跳转
+ const router=useRouter()
+ const releaseOfDrillPlan=(data:string)=>{
+ router.push({
+ path:"/releaseOfDrillStart",
+ query:{
+ type:data
+ }
+ })
+ }
return {
- // value,
- // options,
multipleSelection,
multipleTableRef,
upButton,
upShow,
tableData,
- onOpenSee, //查看
+ onOpenSee, //查看
seeRef,
- onOpenEdit, //编辑
- editRef,
onOpenAdd, //新增
addRef,
onRowDel,
- // onHandleSizeChange,
- // onHandleCurrentChange,
- // ...toRefs(state),
+ View ,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
+ router,
+ releaseOfDrillPlan,
};
},
});
@@ -335,4 +302,38 @@
flex-direction: row;
justify-content: space-between;
}
+//分页
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue b/src/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue
new file mode 100644
index 0000000..a73b224
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue
@@ -0,0 +1,164 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog title="查看应急预案启动记录" v-model="isShowDialog" width="769px">
+ <el-form
+ ref="ruleFormRef"
+ :rules="rules"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="应急预案" prop="teamName">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="备注">
+ <el-input
+ class="textarea"
+ v-model="ruleForm.describe"
+ type="textarea"
+ maxlength="150"
+ placeholder="请填写备注"
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button size="default" @click="onCancel">关闭</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <userSelections ref="userRef"/>
+ <AddEmergencyPersonnel ref="addRef" />
+ <EditEmergencyPersonnel ref="editRef" />
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ reactive,
+ toRefs,
+ ref,
+ defineComponent
+} from 'vue';
+import type {
+ FormInstance,
+} from 'element-plus'
+import {
+ Search
+} from '@element-plus/icons-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";
+// 定义接口来定义对象的类型
+interface DeptData {
+ deptName: string;
+ createTime: string;
+ status: boolean;
+ sort: number | string;
+ describe: string;
+ id: number;
+ children?: DeptData[];
+}
+// 定义接口来定义对象的类型
+interface RuleFormRow {
+ // teamName: string;
+ // teamLevel: string;
+ // teamLeader: string;
+ // responsibleDepartment: any
+ // teamPhone: string;
+ // telephone: string;
+ // describe: string;
+ selectPeople:string
+ jobNumber: string;
+ personnelName: string;
+ personnelGender: string;
+ phone: string;
+ position: string;
+}
+interface UserState {
+ isShowDialog: boolean;
+ ruleForm: RuleFormRow;
+ deptData: Array<DeptData>;
+}
+
+export default defineComponent({
+ name: 'openEdit',
+ components: {
+ UserSelections,
+ AddEmergencyPersonnel,
+ EditEmergencyPersonnel
+ },
+ setup() {
+ const state = reactive<UserState>({
+ isShowDialog: false,
+ ruleForm: {
+ selectPeople:'111', //选择人员
+ jobNumber: '', // 人员工号
+ phone: '', // 手机号码
+ personnelGender: '', //人员性别
+ position: '', //职位
+ personnelName: '', // 人员名称
+ },
+ deptData: [], // 部门数据
+ });
+
+ // 关闭弹窗
+ const closeDialog = () => {
+ state.isShowDialog = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ // // 新增
+ // const onSubmit = () => {
+ // closeDialog();
+ // };
+
+ // 打开用户选择弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+
+ const ruleFormRef = ref<FormInstance>()
+ // 打开弹窗
+ const openDialog = (row: RuleFormRow) => {
+ state.ruleForm = row;
+ state.isShowDialog = true;
+ };
+ return {
+ openDialog,
+ closeDialog,
+ onCancel,
+ Search,
+ ruleFormRef,
+ openUser,
+ userRef,
+ ...toRefs(state),
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 50px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 50px!important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue b/src/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue
new file mode 100644
index 0000000..b6954a6
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue
@@ -0,0 +1,176 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择应急预案" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-row>
+ <el-col :span="24">
+ <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.pass" placeholder="预案名称" 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-col>
+ <el-col :span="24">
+ <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
+ </el-col>
+ </el-row>
+ <el-table :data="tableData" style="width: 100%;margin-top:20px">
+ <el-table-column width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1" @change="radio">
+ <el-radio :label="scope.row.pass" size="large">{{null}}</el-radio>
+ </el-radio-group>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="pass" label="预案名称" />
+ <el-table-column align="center" prop="checkPass" label="预案类型"/>
+ </el-table>
+ <div class="pages">
+ <el-pagination
+ 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"
+ />
+ </div>
+ </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 = [
+ {
+ pass: '生产安全事故应急预案202102',
+ checkPass: '1',
+ },
+ {
+ pass: '生产安全事故应急预案',
+ checkPass: '2',
+ },
+ {
+ pass: '作业人员触电事故现场处置方案',
+ checkPass: '4',
+ },
+ {
+ pass: '船舶碰撞码头事故专项应急预案',
+ checkPass: '2',
+ },
+ ];
+ 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);
+ radio1.value=""
+ };
+ const radio1=ref('生产安全事故应急预案202102')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+ return {
+ dialogVisible,
+ openDailog,
+ ruleForm,
+ tableData,
+ pageSize4,
+ handleSizeChange,
+ handleCurrentChange,
+ dynamicTags,
+ handleClose,
+ Delete,
+ radio1,
+ radio,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-form--inline .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+/*分页*/
+.pages{
+ margin-top: 15px;
+}
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+</style>
diff --git a/src/views/contingencyManagement/emergencyPlanStartRecord/index.vue b/src/views/contingencyManagement/emergencyPlanStartRecord/index.vue
index 5583fcb..d60ce4e 100644
--- a/src/views/contingencyManagement/emergencyPlanStartRecord/index.vue
+++ b/src/views/contingencyManagement/emergencyPlanStartRecord/index.vue
@@ -2,26 +2,34 @@
<div class="system-user-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
- <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
- <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
- <el-option label="公司" value="shanghai"></el-option>
- <el-option label="分厂-车间" value="beijing"></el-option>
- <el-option label="工序-班组等" value="beijing"></el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10">
- 查询
- </el-button>
- <el-button size="default" class="ml10" @click="submitReset">
- 重置
- </el-button>
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="80px"
+ :inline="true"
+ >
+ <el-form-item prop="telephone" >
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择应急预案"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ <el-button size="default" type="primary" class="ml10">
+ 查询
+ </el-button>
+ <el-button size="default" class="ml10" @click="submitReset">
+ 重置
+ </el-button>
+ </el-form>
</div>
<div class="button_Line">
<div class="button_Left">
- <el-button size="default" type="primary" @click="onOpenAdd('新建')">
- <el-icon>
- <Plus />
- </el-icon>新建
- </el-button>
<el-button size="default" type="warning" plain disabled>
<el-icon>
<Edit />
@@ -34,11 +42,6 @@
</el-button>
</div>
<div class="button_Right">
- <el-button @click="upButton">
- <el-icon>
- <Upload />
- </el-icon>
- </el-button>
<el-button>
<el-icon>
<Download />
@@ -60,30 +63,16 @@
type="selection"
width="55"
/>
- <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
- <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="260" align="center">
+ <el-table-column prop="teamName" label="应急预案" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamLevel" label="启动人" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamDescription" label="启动时间" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="materialClassification" label="备注" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="OnOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
- <VideoPlay />
- </el-icon>启动
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
- <el-icon style="margin-right: 5px;">
- <VideoPause />
- </el-icon>废止
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- <el-icon style="margin-right: 5px;">
- <EditPen />
- </el-icon>修改
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- 发起审批
+ <View />
+ </el-icon>查看
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
<el-icon>
@@ -93,23 +82,24 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination-->
- <!-- @size-change="onHandleSizeChange"-->
- <!-- @current-change="onHandleCurrentChange"-->
- <!-- class="mt15"-->
- <!-- :pager-count="5"-->
- <!-- :page-sizes="[10, 20, 30]"-->
- <!-- v-model:current-page="tableData.param.pageNum"-->
- <!-- background-->
- <!-- v-model:page-size="tableData.param.pageSize"-->
- <!-- layout="total, sizes, prev, pager, next, jumper"-->
- <!-- :total="tableData.total"-->
- <!-- >-->
- <!-- </el-pagination>-->
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-card>
- <OpenSee ref="seeRef" />
- <OpenAdd ref="addRef" />
- <OpenEdit ref="editRef" />
+ <SelectEmergencyPlan ref="showRef"/>
+ <OpenSee ref="editRef" />
<upData ref="upShow"></upData>
</div>
</template>
@@ -117,7 +107,7 @@
<script lang="ts">
import {
// toRefs,
- // reactive,
+ reactive,
// onMounted,
ref,
defineComponent
@@ -126,71 +116,59 @@
ElMessageBox,
ElMessage,
ElTable,
+ FormInstance,
} from 'element-plus';
-import { Plus,
- Edit,
+import {
+ Plus,
+ Search,
Delete,
- Upload,
+ // Upload,
Download,
Refresh,
View,
- VideoPause,
- VideoPlay,
EditPen,
} from '@element-plus/icons-vue'
-import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
-import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
-import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
+import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
+import SelectEmergencyPlan from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue'
// 定义表格数据类型
interface User {
teamName: string
teamLevel: string
teamDescription: string
- teamPhone: string
- phone: string;
- describe: string;
- responsibleDepartment: string
- teamLeader: string
-
+ materialClassification: string
}
// 定义接口来定义对象的类型
interface TableDataRow {
- // userName: string;
- // userNickname: string;
- // roleSign: string;
- // department: string[];
- // phone: string;
- // email: string;
- // sex: string;
- // password: string;
- // overdueTime: Date;
- // // describe: string;
- // createTime: string;
}
export default defineComponent({
name: 'systemUser',
components: {
- OpenAdd,
OpenSee,
- OpenEdit,
View,
EditPen,
Plus,
- Edit,
+ // Edit,
Delete,
- Upload,
+ SelectEmergencyPlan,
Download,
Refresh,
- VideoPause,
- VideoPlay,
UpData
},
setup() {
- const seeRef = ref();
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // const seeRef = ref();
const editRef = ref();
// 选择框
// const value = ref('');
@@ -210,71 +188,44 @@
// 定义表格数据
const tableData: User[] = [
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
}
]
- //查看用户弹窗
- const onOpenSee = (row: TableDataRow) => {
- seeRef.value.openDialog(row);
- };
- // 打开新增用户弹窗
- const addRef = ref();
- const onOpenAdd = () => {
- addRef.value.openDialog();
- };
- // 打开修改用户弹窗
- const onOpenEdit = (row: TableDataRow) => {
+ // // 打开新增用户弹窗
+ // const addRef = ref();
+ // const onOpenAdd = () => {
+ // addRef.value.openDialog();
+ // };
+ // // 打开修改用户弹窗
+ const OnOpenSee = (row: TableDataRow) => {
editRef.value.openDialog(row);
};
+ // 应急预案
+ const showRef=ref()
+ const daiInpt=()=>{
+ showRef.value.openDailog()
+ }
// 删除用户
const onRowDel = (row: TableDataRow) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
@@ -287,18 +238,17 @@
})
.catch(() => {});
};
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
// 分页改变
- // const onHandleSizeChange = (val: number) => {
- // state.tableData.param.pageSize = val;
- // };
- // // 分页改变
- // const onHandleCurrentChange = (val: number) => {
- // state.tableData.param.pageNum = val;
- // };
- // 页面加载时
- // onMounted(() => {
- // initTableData();
- // });
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
return {
// value,
// options,
@@ -307,15 +257,18 @@
upButton,
upShow,
tableData,
- onOpenSee, //查看
- seeRef,
- onOpenEdit, //编辑
+ OnOpenSee, //编辑
editRef,
- onOpenAdd, //新增
- addRef,
onRowDel,
- // onHandleSizeChange,
- // onHandleCurrentChange,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
+ ruleFormRef,
+ ruleForm,
+ Search,
+ daiInpt,
+ showRef,
// ...toRefs(state),
};
},
@@ -335,4 +288,58 @@
flex-direction: row;
justify-content: space-between;
}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+//表头
+::v-deep .el-table th.el-table__cell {
+ background-color: #f6f7fa;
+ font-weight: 400;
+ color: #909399;
+}
+.el-table .sort-caret.ascending{
+ border-bottom-color: #c0c4cc;
+}
+//分页
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue
new file mode 100644
index 0000000..16770d7
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue
@@ -0,0 +1,182 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="新建应急物资保养"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="应急物资" prop="teamName">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="保养结果" prop="teamLeader">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="正常" value="admin"></el-option>
+ <el-option label="异常" value="common"></el-option>
+ </el-select>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser" />
+ </template>
+ </el-input>
+ </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-date-picker
+ class="w100"
+ v-model="value1"
+ type="datetime"
+ placeholder="选择日期时间"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <Material ref="showRef"/>
+ <userSelections ref="userRef"/>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
+import type {
+ FormInstance,
+ // FormRules,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+import Material from '/@/components/material/index.vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+
+export default defineComponent({
+ name: 'openAdd',
+ components: {
+ UserSelections,
+ Material,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ //日期选择器
+ const value1 = ref('')
+ // 表单提交验证必填项
+ const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+ // 应急物资弹窗
+ const showRef=ref()
+ const daiInpt=()=>{
+ showRef.value.openDailog()
+ }
+ // 编写人弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ Search,
+ ruleForm,
+ value1,
+ daiInpt,
+ showRef,
+ ruleFormRef,
+ submitForm,
+ openUser,
+ userRef,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue
index 5583fcb..067f83c 100644
--- a/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue
+++ b/src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue
@@ -2,22 +2,35 @@
<div class="system-user-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
- <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
- <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
- <el-option label="公司" value="shanghai"></el-option>
- <el-option label="分厂-车间" value="beijing"></el-option>
- <el-option label="工序-班组等" value="beijing"></el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10">
- 查询
- </el-button>
- <el-button size="default" class="ml10" @click="submitReset">
- 重置
- </el-button>
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="80px"
+ :inline="true"
+ >
+ <el-form-item prop="telephone" >
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择应急物资"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ <el-button size="default" type="primary" class="ml10">
+ 查询
+ </el-button>
+ <el-button size="default" class="ml10" @click="submitReset">
+ 重置
+ </el-button>
+ </el-form>
</div>
<div class="button_Line">
<div class="button_Left">
- <el-button size="default" type="primary" @click="onOpenAdd('新建')">
+ <el-button size="default" type="primary" @click="onOpenAdd">
<el-icon>
<Plus />
</el-icon>新建
@@ -34,11 +47,6 @@
</el-button>
</div>
<div class="button_Right">
- <el-button @click="upButton">
- <el-icon>
- <Upload />
- </el-icon>
- </el-button>
<el-button>
<el-icon>
<Download />
@@ -60,30 +68,15 @@
type="selection"
width="55"
/>
- <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
- <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="260" align="center">
+ <el-table-column prop="teamName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamLevel" label="保养结果" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamDescription" label="保养日期" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="OnOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
- <VideoPlay />
- </el-icon>启动
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
- <el-icon style="margin-right: 5px;">
- <VideoPause />
- </el-icon>废止
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- <el-icon style="margin-right: 5px;">
- <EditPen />
- </el-icon>修改
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- 发起审批
+ <View />
+ </el-icon>查看
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
<el-icon>
@@ -93,31 +86,33 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination-->
- <!-- @size-change="onHandleSizeChange"-->
- <!-- @current-change="onHandleCurrentChange"-->
- <!-- class="mt15"-->
- <!-- :pager-count="5"-->
- <!-- :page-sizes="[10, 20, 30]"-->
- <!-- v-model:current-page="tableData.param.pageNum"-->
- <!-- background-->
- <!-- v-model:page-size="tableData.param.pageSize"-->
- <!-- layout="total, sizes, prev, pager, next, jumper"-->
- <!-- :total="tableData.total"-->
- <!-- >-->
- <!-- </el-pagination>-->
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-card>
- <OpenSee ref="seeRef" />
- <OpenAdd ref="addRef" />
- <OpenEdit ref="editRef" />
+ <EmergencySupplies ref="showRef"/>
+ <OpenSee ref="editRef" />
<upData ref="upShow"></upData>
+ <OpenAdd ref="addRef" />
</div>
</template>
<script lang="ts">
import {
// toRefs,
- // reactive,
+ reactive,
// onMounted,
ref,
defineComponent
@@ -126,79 +121,65 @@
ElMessageBox,
ElMessage,
ElTable,
+ FormInstance,
} from 'element-plus';
-import { Plus,
- Edit,
+import {
+ Plus,
+ Search,
Delete,
- Upload,
+ Edit,
Download,
Refresh,
View,
- VideoPause,
- VideoPlay,
EditPen,
} from '@element-plus/icons-vue'
-import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
-import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
-import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
+import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
-
+import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
+import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue';
// 定义表格数据类型
interface User {
teamName: string
teamLevel: string
teamDescription: string
- teamPhone: string
- phone: string;
- describe: string;
- responsibleDepartment: string
- teamLeader: string
-
}
// 定义接口来定义对象的类型
interface TableDataRow {
- // userName: string;
- // userNickname: string;
- // roleSign: string;
- // department: string[];
- // phone: string;
- // email: string;
- // sex: string;
- // password: string;
- // overdueTime: Date;
- // // describe: string;
- // createTime: string;
}
export default defineComponent({
- name: 'systemUser',
+ name: 'index',
components: {
- OpenAdd,
OpenSee,
- OpenEdit,
View,
+ OpenAdd,
EditPen,
Plus,
Edit,
Delete,
- Upload,
+ EmergencySupplies,
Download,
Refresh,
- VideoPause,
- VideoPlay,
UpData
},
setup() {
- const seeRef = ref();
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+
const editRef = ref();
- // 选择框
- // const value = ref('');
- // const options =
- // {
- // value: 'Option1',
- // label: 'Option1',
- // };
+ // 打开新建用户弹窗
+ const addRef = ref();
+ const onOpenAdd = () => {
+ addRef.value.openDialog();
+ };
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
@@ -210,71 +191,40 @@
// 定义表格数据
const tableData: User[] = [
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部'
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
}
]
- //查看用户弹窗
- const onOpenSee = (row: TableDataRow) => {
- seeRef.value.openDialog(row);
- };
- // 打开新增用户弹窗
- const addRef = ref();
- const onOpenAdd = () => {
- addRef.value.openDialog();
- };
- // 打开修改用户弹窗
- const onOpenEdit = (row: TableDataRow) => {
+ // // 打开新增用户弹窗
+ // const addRef = ref();
+ // const onOpenAdd = () => {
+ // addRef.value.openDialog();
+ // };
+ // // 打开修改用户弹窗
+ const OnOpenSee = (row: TableDataRow) => {
editRef.value.openDialog(row);
};
+ // 应急物资弹窗
+ const showRef=ref()
+ const daiInpt=()=>{
+ showRef.value.openDailog()
+ }
// 删除用户
const onRowDel = (row: TableDataRow) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
@@ -287,18 +237,17 @@
})
.catch(() => {});
};
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
// 分页改变
- // const onHandleSizeChange = (val: number) => {
- // state.tableData.param.pageSize = val;
- // };
- // // 分页改变
- // const onHandleCurrentChange = (val: number) => {
- // state.tableData.param.pageNum = val;
- // };
- // 页面加载时
- // onMounted(() => {
- // initTableData();
- // });
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
return {
// value,
// options,
@@ -307,16 +256,21 @@
upButton,
upShow,
tableData,
- onOpenSee, //查看
- seeRef,
- onOpenEdit, //编辑
+ OnOpenSee, //编辑
editRef,
+ Edit,
+ onRowDel,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
+ ruleFormRef,
+ ruleForm,
+ Search,
+ daiInpt,
+ showRef,
onOpenAdd, //新增
addRef,
- onRowDel,
- // onHandleSizeChange,
- // onHandleCurrentChange,
- // ...toRefs(state),
};
},
});
@@ -335,4 +289,58 @@
flex-direction: row;
justify-content: space-between;
}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+//表头
+::v-deep .el-table th.el-table__cell {
+ background-color: #f6f7fa;
+ font-weight: 400;
+ color: #909399;
+}
+.el-table .sort-caret.ascending{
+ border-bottom-color: #c0c4cc;
+}
+//分页
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintainDialog.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintainDialog.vue
new file mode 100644
index 0000000..80182a0
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintainDialog.vue
@@ -0,0 +1,193 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择岗位id" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-row>
+ <el-col :span="24">
+ <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.pass" placeholder="编号" 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-col>
+ <el-col :span="24">
+ <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
+ </el-col>
+ </el-row>
+ <el-table
+ :data="tableData"
+ ref="multipleTableRef"
+ style="width: 100%;margin-top:20px"
+ >
+ <el-table-column align="center" width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1" @change="radio">
+ <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
+ </el-radio-group>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="date" label="编号" />
+ <el-table-column align="center" prop="name" label="姓名"/>
+ </el-table>
+ <div class="pages">
+ <el-pagination
+ 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"
+ />
+ </div>
+ </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';
+interface User {
+ date: string
+ name: string
+ address: string
+}
+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);
+ radio1.value=""
+ };
+ const radio1=ref('金伟')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+ return {
+ dialogVisible,
+ openDailog,
+ ruleForm,
+ tableData,
+ pageSize4,
+ handleSizeChange,
+ handleCurrentChange,
+ dynamicTags,
+ handleClose,
+ Delete,
+ radio1,
+ radio,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-form--inline .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+/*分页*/
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
+</style>
diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue
new file mode 100644
index 0000000..e4c3e34
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue
@@ -0,0 +1,467 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="新建应急物资代码"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="物资名称" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写物资名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="物资编号" prop="responsibleDepartment">
+ <el-input v-model="ruleForm.responsibleDepartment" placeholder="请填写物资编号"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="物资用途" prop="teamLeader">
+ <el-input v-model="ruleForm.teamLeader" placeholder="请填写物资用途"></el-input>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="regionsDialog"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="物资型号" prop="teamPhone">
+ <el-input v-model="ruleForm.teamPhone" placeholder="请填写物资型号"></el-input>
+ </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-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data"
+ class="w100"
+ placeholder="请选择"/>
+ </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-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="事故气体吸收装置" value="admin"></el-option>
+ <el-option label="通讯设施" value="common"></el-option>
+ <el-option label="交通运输工具" value="common"></el-option>
+ <el-option label="照明装置" value="common"></el-option>
+ <el-option label="防护器材" value="common"></el-option>
+ <el-option label="其它" value="common"></el-option>
+ </el-select>
+ </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-input v-model="ruleForm.teamPhone" placeholder="请填写存放位置"></el-input>
+ </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-input v-model="ruleForm.teamPhone" placeholder="请填写存储数量"></el-input>
+ </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-date-picker
+ v-model="value1"
+ type="datetime"
+ class="w100"
+ placeholder="选择日期时间"
+ />
+ </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-input v-model="ruleForm.teamPhone" placeholder="请填写使用期限"></el-input>
+ </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-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="完好" value="admin"></el-option>
+ <el-option label="维修" value="common"></el-option>
+ </el-select>
+ </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-input v-model="ruleForm.teamPhone" placeholder="请填写使用期限"></el-input>
+ </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-date-picker
+ v-model="value1"
+ type="datetime"
+ class="w100"
+ placeholder="选择日期时间"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="使用说明" prop="telephone">
+ <el-input v-model="ruleForm.teamPhone" placeholder="请填写使用说明"></el-input>
+ </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-date-picker
+ v-model="value1"
+ type="datetime"
+ class="w100"
+ placeholder="选择日期时间"
+ />
+ </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-date-picker
+ v-model="value1"
+ type="datetime"
+ class="w100"
+ placeholder="选择日期时间"
+ />
+ </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-input v-model="ruleForm.teamPhone" placeholder="请填写经度（度）"></el-input>
+ </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-input v-model="ruleForm.teamPhone" placeholder="请填写纬度（度）"></el-input>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <PersonInCharge ref="Shows"/>
+ <userSelections ref="userRef"/>
+ <RegionsCheckbox ref="openRef"/>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
+import type {
+ FormInstance,
+ // FormRules,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+import PersonInCharge from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue'
+import RegionsCheckbox from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue'
+
+export default defineComponent({
+ name: 'openAdd',
+ components: {
+ PersonInCharge,
+ UserSelections,
+ RegionsCheckbox,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ //日期选择器
+ const value1 = ref('')
+ // 可选择树
+ const treeSelect = ref()
+ const tree = [
+ {
+ value: '1',
+ label: 'Level one 1',
+ children: [
+ {
+ value: '1-1',
+ label: 'Level two 1-1',
+ children: [
+ {
+ value: '1-1-1',
+ label: 'Level three 1-1-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: 'Level one 2',
+ children: [
+ {
+ value: '2-1',
+ label: 'Level two 2-1',
+ children: [
+ {
+ value: '2-1-1',
+ label: 'Level three 2-1-1',
+ },
+ ],
+ },
+ {
+ value: '2-2',
+ label: 'Level two 2-2',
+ children: [
+ {
+ value: '2-2-1',
+ label: 'Level three 2-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: 'Level one 3',
+ children: [
+ {
+ value: '3-1',
+ label: 'Level two 3-1',
+ children: [
+ {
+ value: '3-1-1',
+ label: 'Level three 3-1-1',
+ },
+ ],
+ },
+ {
+ value: '3-2',
+ label: 'Level two 3-2',
+ children: [
+ {
+ value: '3-2-1',
+ label: 'Level three 3-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ //定义树形下拉框
+ const responsibleDepartment = ref()
+ const data = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '经营班子',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: '生产运行部',
+ children: [
+ {
+ value: '2-1',
+ label: '灌装一班',
+ children: []
+ },
+ {
+ value: '2-2',
+ label: '工艺四班',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: '设备部',
+ children: [
+ {
+ value: '3-1',
+ label: '仪表班',
+ children: [],
+ },
+ {
+ value: '3-2',
+ label: '机修班',
+ children: [],
+ },
+ ],
+ },
+ ]
+ // 必填项提示
+ // const rules = reactive<FormRules>({
+ // teamName: [
+ // {
+ // required: true,
+ // message: '队伍名称不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // teamLevel: [
+ // {
+ // required: true,
+ // message: '队伍级别不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // teamLeader: [
+ // {
+ // required: true,
+ // message: '队伍负责人不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // responsibleDepartment: [
+ // {
+ // required: true,
+ // message: '负责人部门不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // teamPhone: [
+ // {
+ // required: true,
+ // message: '负责人手机不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // telephone: [
+ // {
+ // required: true,
+ // message: '固定电话不能为空',
+ // trigger: 'change',
+ // },
+ // ],
+ // })
+ // 表单提交验证必填项
+ const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+ // 应急队伍弹窗
+ 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,
+ isShowDialog,
+ onCancel,
+ responsibleDepartment,
+ data,
+ Search,
+ ruleForm,
+ value1,
+ treeSelect,
+ tree,
+ daiInpt,
+ Shows,
+ ruleFormRef,
+ submitForm,
+ // rules,
+ openUser,
+ userRef,
+ regionsDialog,
+ openRef,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue
new file mode 100644
index 0000000..80182a0
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue
@@ -0,0 +1,193 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="选择岗位id" width="900px" draggable>
+ <el-row>
+ <el-col :span="18">
+ <el-row>
+ <el-col :span="24">
+ <el-form ref="ruleFormRef" :model="ruleForm" :inline="true" status-icon>
+ <el-form-item>
+ <el-input size="default" v-model="ruleForm.pass" placeholder="编号" 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-col>
+ <el-col :span="24">
+ <el-button size="default" :icon="Delete" style="margin-top: 15px;">清除选择</el-button>
+ </el-col>
+ </el-row>
+ <el-table
+ :data="tableData"
+ ref="multipleTableRef"
+ style="width: 100%;margin-top:20px"
+ >
+ <el-table-column align="center" width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1" @change="radio">
+ <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
+ </el-radio-group>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="date" label="编号" />
+ <el-table-column align="center" prop="name" label="姓名"/>
+ </el-table>
+ <div class="pages">
+ <el-pagination
+ 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"
+ />
+ </div>
+ </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';
+interface User {
+ date: string
+ name: string
+ address: string
+}
+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);
+ radio1.value=""
+ };
+ const radio1=ref('金伟')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+ return {
+ dialogVisible,
+ openDailog,
+ ruleForm,
+ tableData,
+ pageSize4,
+ handleSizeChange,
+ handleCurrentChange,
+ dynamicTags,
+ handleClose,
+ Delete,
+ radio1,
+ radio,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-form--inline .el-form-item{
+ margin-bottom: 0;
+ margin-right: 0;
+}
+/*分页*/
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
+</style>
diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue
new file mode 100644
index 0000000..a0c6d5c
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue
@@ -0,0 +1,138 @@
+<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="margin-left: 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 align="center" width="55">
+ <template #default="scope">
+ <el-radio-group v-model="radio1" @change="radio">
+ <el-radio :label="scope.row.name" size="large">{{null}}</el-radio>
+ </el-radio-group>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="name" label="风险区域名称"/>
+ </el-table>
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </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 dynamicTags = ref(['LNG装车区']);
+ const handleClose = (tag: string) => {
+ dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+ radio1.value=""
+ };
+ const radio1=ref('1#LNG储罐单元')
+ const radio=(event:any)=>{
+ dynamicTags.value[0]=event
+ }
+
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+ return {
+ dialogVisible,
+ openDailog,
+ ruleForm,
+ tableData,
+ handleSizeChange,
+ handleCurrentChange,
+ pageIndex,
+ pageSize,
+ radio1,
+ radio,
+ dynamicTags,
+ handleClose,
+ Delete,
+ };
+ },
+});
+</script>
+<style scoped>
+.el-row {
+ padding: 0 0 20px 0;
+}
+.el-form--inline .el-form-item{
+ margin: 0;
+}
+</style>
diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue
index 5583fcb..6e76097 100644
--- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue
+++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue
@@ -2,12 +2,7 @@
<div class="system-user-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
- <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
- <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
- <el-option label="公司" value="shanghai"></el-option>
- <el-option label="分厂-车间" value="beijing"></el-option>
- <el-option label="工序-班组等" value="beijing"></el-option>
- </el-select>
+ <el-input size="default" placeholder="物资名称" style="max-width: 215px;"> </el-input>
<el-button size="default" type="primary" class="ml10">
查询
</el-button>
@@ -39,11 +34,11 @@
<Upload />
</el-icon>
</el-button>
- <el-button>
- <el-icon>
- <Download />
- </el-icon>
- </el-button>
+ <!-- <el-button>-->
+ <!-- <el-icon>-->
+ <!-- <Download />-->
+ <!-- </el-icon>-->
+ <!-- </el-button>-->
<el-button>
<el-icon>
<Refresh />
@@ -60,30 +55,33 @@
type="selection"
width="55"
/>
- <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
- <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="260" align="center">
+ <el-table-column prop="teamName" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamLevel" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamDescription" label="负责部门" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="materialClassification" label="物资分类" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="location" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="number" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
- <el-icon style="margin-right: 5px;">
- <VideoPlay />
- </el-icon>启动
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
- <el-icon style="margin-right: 5px;">
- <VideoPause />
- </el-icon>废止
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
+ <el-button size="small" text type="primary" @click="onMaintain(scope.row)">
<el-icon style="margin-right: 5px;">
<EditPen />
- </el-icon>修改
+ </el-icon>保养
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- 发起审批
+ <el-button size="small" text type="primary" @click="onMaintain(scope.row)">
+ <el-icon style="margin-right: 5px;">
+ <EditPen />
+ </el-icon>检查
+ </el-button>
+ <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
+ <el-icon style="margin-right: 5px;">
+ <View />
+ </el-icon>查看
+ </el-button>
+ <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
+ <el-icon style="margin-right: 5px;">
+ <EditPen />
+ </el-icon> 修改
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
<el-icon>
@@ -93,21 +91,23 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination-->
- <!-- @size-change="onHandleSizeChange"-->
- <!-- @current-change="onHandleCurrentChange"-->
- <!-- class="mt15"-->
- <!-- :pager-count="5"-->
- <!-- :page-sizes="[10, 20, 30]"-->
- <!-- v-model:current-page="tableData.param.pageNum"-->
- <!-- background-->
- <!-- v-model:page-size="tableData.param.pageSize"-->
- <!-- layout="total, sizes, prev, pager, next, jumper"-->
- <!-- :total="tableData.total"-->
- <!-- >-->
- <!-- </el-pagination>-->
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-card>
- <OpenSee ref="seeRef" />
+ <MaintainDialog ref="seeRef" />
<OpenAdd ref="addRef" />
<OpenEdit ref="editRef" />
<upData ref="upShow"></upData>
@@ -131,16 +131,14 @@
Edit,
Delete,
Upload,
- Download,
+ // Download,
Refresh,
View,
- VideoPause,
- VideoPlay,
EditPen,
} from '@element-plus/icons-vue'
-import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
+import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
-import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
+import MaintainDialog from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintainDialog.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
// 定义表格数据类型
@@ -148,12 +146,9 @@
teamName: string
teamLevel: string
teamDescription: string
- teamPhone: string
- phone: string;
- describe: string;
- responsibleDepartment: string
- teamLeader: string
-
+ location: string;
+ materialClassification: string
+ number: string
}
// 定义接口来定义对象的类型
@@ -175,7 +170,7 @@
name: 'systemUser',
components: {
OpenAdd,
- OpenSee,
+ MaintainDialog,
OpenEdit,
View,
EditPen,
@@ -183,15 +178,11 @@
Edit,
Delete,
Upload,
- Download,
+ // Download,
Refresh,
- VideoPause,
- VideoPlay,
UpData
},
setup() {
- const seeRef = ref();
- const editRef = ref();
// 选择框
// const value = ref('');
// const options =
@@ -210,61 +201,42 @@
// 定义表格数据
const tableData: User[] = [
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
+ location: '3#岗微型消防站',
+ number: '5',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
+ location: '3#岗微型消防站',
+ number: '5',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
+ location: '3#岗微型消防站',
+ number: '5',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
+ materialClassification: '事故气体吸收装置',
+ location: '3#岗微型消防站',
+ number: '5',
}
]
//查看用户弹窗
- const onOpenSee = (row: TableDataRow) => {
- seeRef.value.openDialog(row);
+ const seeRef = ref();
+ const onMaintain = (row: TableDataRow) => {
+ seeRef.value.openDailog(row);
};
// 打开新增用户弹窗
const addRef = ref();
@@ -272,6 +244,7 @@
addRef.value.openDialog();
};
// 打开修改用户弹窗
+ const editRef = ref();
const onOpenEdit = (row: TableDataRow) => {
editRef.value.openDialog(row);
};
@@ -299,6 +272,17 @@
// onMounted(() => {
// initTableData();
// });
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
return {
// value,
// options,
@@ -307,15 +291,17 @@
upButton,
upShow,
tableData,
- onOpenSee, //查看
+ onMaintain, //保养
seeRef,
onOpenEdit, //编辑
editRef,
onOpenAdd, //新增
addRef,
onRowDel,
- // onHandleSizeChange,
- // onHandleCurrentChange,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
// ...toRefs(state),
};
},
@@ -335,4 +321,38 @@
flex-direction: row;
justify-content: space-between;
}
+//分页
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue b/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue
new file mode 100644
index 0000000..16770d7
--- /dev/null
+++ b/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue
@@ -0,0 +1,182 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="新建应急物资保养"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="应急物资" prop="teamName">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="保养结果" prop="teamLeader">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="正常" value="admin"></el-option>
+ <el-option label="异常" value="common"></el-option>
+ </el-select>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser" />
+ </template>
+ </el-input>
+ </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-date-picker
+ class="w100"
+ v-model="value1"
+ type="datetime"
+ placeholder="选择日期时间"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <Material ref="showRef"/>
+ <userSelections ref="userRef"/>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
+import type {
+ FormInstance,
+ // FormRules,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+import Material from '/@/components/material/index.vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+
+export default defineComponent({
+ name: 'openAdd',
+ components: {
+ UserSelections,
+ Material,
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ //日期选择器
+ const value1 = ref('')
+ // 表单提交验证必填项
+ const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
+ }
+ // 应急物资弹窗
+ const showRef=ref()
+ const daiInpt=()=>{
+ showRef.value.openDailog()
+ }
+ // 编写人弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ Search,
+ ruleForm,
+ value1,
+ daiInpt,
+ showRef,
+ ruleFormRef,
+ submitForm,
+ openUser,
+ userRef,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue b/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue
index 5583fcb..a970373 100644
--- a/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue
+++ b/src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue
@@ -2,22 +2,35 @@
<div class="system-user-container">
<el-card shadow="hover">
<div class="system-user-search mb15">
- <el-input size="default" placeholder="队伍名称" style="max-width: 215px;"> </el-input>
- <el-select size="default" v-model="value" placeholder="请选择队伍级别" class="ml10" style="max-width: 215px;">
- <el-option label="公司" value="shanghai"></el-option>
- <el-option label="分厂-车间" value="beijing"></el-option>
- <el-option label="工序-班组等" value="beijing"></el-option>
- </el-select>
- <el-button size="default" type="primary" class="ml10">
- 查询
- </el-button>
- <el-button size="default" class="ml10" @click="submitReset">
- 重置
- </el-button>
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="80px"
+ :inline="true"
+ >
+ <el-form-item prop="telephone" >
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择应急物资"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ <el-button size="default" type="primary" class="ml10">
+ 查询
+ </el-button>
+ <el-button size="default" class="ml10" @click="submitReset">
+ 重置
+ </el-button>
+ </el-form>
</div>
<div class="button_Line">
<div class="button_Left">
- <el-button size="default" type="primary" @click="onOpenAdd('新建')">
+ <el-button size="default" type="primary" @click="onOpenAdd">
<el-icon>
<Plus />
</el-icon>新建
@@ -34,11 +47,6 @@
</el-button>
</div>
<div class="button_Right">
- <el-button @click="upButton">
- <el-icon>
- <Upload />
- </el-icon>
- </el-button>
<el-button>
<el-icon>
<Download />
@@ -60,30 +68,15 @@
type="selection"
width="55"
/>
- <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip></el-table-column>
- <el-table-column prop="teamDescription" label="队伍描述" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="负责人手机" show-overflow-tooltip></el-table-column>
- <el-table-column prop="attachments" label="相关附件" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="260" align="center">
+ <el-table-column prop="teamName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamLevel" label="保养结果" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="teamDescription" label="保养日期" min-width="120" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column label="操作" width="200" align="center" fixed="right">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
+ <el-button size="small" text type="primary" @click="OnOpenSee(scope.row)">
<el-icon style="margin-right: 5px;">
- <VideoPlay />
- </el-icon>启动
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSee(scope.row)">
- <el-icon style="margin-right: 5px;">
- <VideoPause />
- </el-icon>废止
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- <el-icon style="margin-right: 5px;">
- <EditPen />
- </el-icon>修改
- </el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEdit(scope.row)">
- 发起审批
+ <View />
+ </el-icon>查看
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
<el-icon>
@@ -93,31 +86,33 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination-->
- <!-- @size-change="onHandleSizeChange"-->
- <!-- @current-change="onHandleCurrentChange"-->
- <!-- class="mt15"-->
- <!-- :pager-count="5"-->
- <!-- :page-sizes="[10, 20, 30]"-->
- <!-- v-model:current-page="tableData.param.pageNum"-->
- <!-- background-->
- <!-- v-model:page-size="tableData.param.pageSize"-->
- <!-- layout="total, sizes, prev, pager, next, jumper"-->
- <!-- :total="tableData.total"-->
- <!-- >-->
- <!-- </el-pagination>-->
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-card>
- <OpenSee ref="seeRef" />
- <OpenAdd ref="addRef" />
- <OpenEdit ref="editRef" />
+ <EmergencySupplies ref="showRef"/>
+ <OpenSee ref="editRef" />
<upData ref="upShow"></upData>
+ <OpenAdd ref="addRef" />
</div>
</template>
<script lang="ts">
import {
// toRefs,
- // reactive,
+ reactive,
// onMounted,
ref,
defineComponent
@@ -126,79 +121,65 @@
ElMessageBox,
ElMessage,
ElTable,
+ FormInstance,
} from 'element-plus';
-import { Plus,
- Edit,
+import {
+ Plus,
+ Search,
Delete,
- Upload,
+ Edit,
Download,
Refresh,
View,
- VideoPause,
- VideoPlay,
EditPen,
} from '@element-plus/icons-vue'
-import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
-import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
-import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
+import OpenSee from '/@/views/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
-
+import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
+import OpenAdd from '/@/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue';
// 定义表格数据类型
interface User {
teamName: string
teamLevel: string
teamDescription: string
- teamPhone: string
- phone: string;
- describe: string;
- responsibleDepartment: string
- teamLeader: string
-
}
// 定义接口来定义对象的类型
interface TableDataRow {
- // userName: string;
- // userNickname: string;
- // roleSign: string;
- // department: string[];
- // phone: string;
- // email: string;
- // sex: string;
- // password: string;
- // overdueTime: Date;
- // // describe: string;
- // createTime: string;
}
export default defineComponent({
name: 'systemUser',
components: {
- OpenAdd,
OpenSee,
- OpenEdit,
View,
+ OpenAdd,
EditPen,
Plus,
Edit,
Delete,
- Upload,
+ EmergencySupplies,
Download,
Refresh,
- VideoPause,
- VideoPlay,
UpData
},
setup() {
- const seeRef = ref();
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
+ });
+
const editRef = ref();
- // 选择框
- // const value = ref('');
- // const options =
- // {
- // value: 'Option1',
- // label: 'Option1',
- // };
+ // 打开新建用户弹窗
+ const addRef = ref();
+ const onOpenAdd = () => {
+ addRef.value.openDialog();
+ };
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
@@ -210,71 +191,40 @@
// 定义表格数据
const tableData: User[] = [
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部'
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
},
{
- teamName: '应急救援组',
- teamLevel: '公司',
- teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
- teamPhone: '051383830321',
- phone: '13603812900',
- describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
- '(2)负责现场被困人员、受伤人员抢救工作；\n' +
- '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
- '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
- responsibleDepartment: '仪表班',
- teamLeader: '王磊',
+ teamName: '消防安全绳',
+ teamLevel: 'YJWZ20210208104332',
+ teamDescription: '安全管理部',
}
]
- //查看用户弹窗
- const onOpenSee = (row: TableDataRow) => {
- seeRef.value.openDialog(row);
- };
- // 打开新增用户弹窗
- const addRef = ref();
- const onOpenAdd = () => {
- addRef.value.openDialog();
- };
- // 打开修改用户弹窗
- const onOpenEdit = (row: TableDataRow) => {
+ // // 打开新增用户弹窗
+ // const addRef = ref();
+ // const onOpenAdd = () => {
+ // addRef.value.openDialog();
+ // };
+ // // 打开修改用户弹窗
+ const OnOpenSee = (row: TableDataRow) => {
editRef.value.openDialog(row);
};
+ // 应急物资弹窗
+ const showRef=ref()
+ const daiInpt=()=>{
+ showRef.value.openDailog()
+ }
// 删除用户
const onRowDel = (row: TableDataRow) => {
ElMessageBox.confirm(`此操作将永久删除账户名称：“${row}”，是否继续?`, '提示', {
@@ -287,18 +237,17 @@
})
.catch(() => {});
};
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
// 分页改变
- // const onHandleSizeChange = (val: number) => {
- // state.tableData.param.pageSize = val;
- // };
- // // 分页改变
- // const onHandleCurrentChange = (val: number) => {
- // state.tableData.param.pageNum = val;
- // };
- // 页面加载时
- // onMounted(() => {
- // initTableData();
- // });
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
return {
// value,
// options,
@@ -307,16 +256,21 @@
upButton,
upShow,
tableData,
- onOpenSee, //查看
- seeRef,
- onOpenEdit, //编辑
+ OnOpenSee, //编辑
editRef,
+ Edit,
+ onRowDel,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
+ ruleFormRef,
+ ruleForm,
+ Search,
+ daiInpt,
+ showRef,
onOpenAdd, //新增
addRef,
- onRowDel,
- // onHandleSizeChange,
- // onHandleCurrentChange,
- // ...toRefs(state),
};
},
});
@@ -335,4 +289,58 @@
flex-direction: row;
justify-content: space-between;
}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+//表头
+::v-deep .el-table th.el-table__cell {
+ background-color: #f6f7fa;
+ font-weight: 400;
+ color: #909399;
+}
+.el-table .sort-caret.ascending{
+ border-bottom-color: #c0c4cc;
+}
+//分页
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/panManagement/component/DailogSearch.vue b/src/views/contingencyManagement/panManagement/component/DailogSearch.vue
deleted file mode 100644
index ec434d3..0000000
--- a/src/views/contingencyManagement/panManagement/component/DailogSearch.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<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/abolishLibrary.vue b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue
new file mode 100644
index 0000000..51c8bec
--- /dev/null
+++ b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue
@@ -0,0 +1,223 @@
+<template>
+ <div class="system-edit-user-container">
+ <el-dialog
+ title="废止库"
+ v-model="isShowDialog"
+ width="769px"
+ draggable
+ >
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ :rules="rules"
+ label-width="120px"
+ >
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-table
+ :data="tableData"
+ style="width: 100%;margin-top: 15px;"
+ ref="multipleTableRef"
+ :model="formInline"
+ :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
+ >
+ <el-table-column prop="jobNo" label="预案名称" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="personnelName" label="预案类型" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="phone" label="编写人" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column prop="position" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
+ <el-table-column label="操作" width="200" align="center">
+ <template #default="scope">
+ <el-button disabled size="small" text="plain" >查看
+ </el-button>
+ <el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑
+ </el-button>
+ <el-button disabled size="small" text="plain" style="margin-right: 5px;">删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-col>
+ </el-row>
+ </el-form>
+ <div class="pages">
+<!-- <el-pagination-->
+<!-- @size-change="onHandleSizeChange"-->
+<!-- @current-change="onHandleCurrentChange"-->
+<!-- class="mt15"-->
+<!-- :pager-count="5"-->
+<!-- :page-sizes="[10, 20, 30]"-->
+<!-- v-model:current-page="formInline.pageIndex"-->
+<!-- background-->
+<!-- v-model:page-size="formInline.pageSize"-->
+<!-- layout="total, sizes, prev, pager, next, jumper"-->
+<!-- :total="tableData.total"-->
+<!-- >-->
+<!-- </el-pagination>-->
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel">取消</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import {
+ ref,
+ reactive,
+ defineComponent
+} from 'vue';
+
+import type {
+ FormInstance,
+} from 'element-plus'
+
+import {
+ Search
+} from '@element-plus/icons-vue'
+// 定义表格数据类型
+interface User {
+ personnelName: string
+ jobNo: string
+ phone: string;
+ position: string;
+}
+// 定义表单搜索
+const formInline = reactive({
+ pageIndex: 1,
+ pageSize: 10,
+ searchParams: {
+ teamName: "",
+ teamType: "",
+ }
+})
+export default defineComponent({
+ name: 'abolishLibrary',
+ components: {
+
+ },
+ setup() {
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ // 打开弹窗
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ isShowDialog.value = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ // 打开用户选择弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ // 分页改变
+ // const onHandleSizeChange = (val: number) => {
+ // formInline.pageSize = val;
+ // };
+ // const onHandleCurrentChange = (val: number) => {
+ // formInline.pageIndex = val;
+ // };
+ //定义表格数据
+ const multipleSelection = ref<User[]>([])
+ const tableData: User[] = []
+
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+ return {
+ openDialog,
+ closeDialog,
+ isShowDialog,
+ onCancel,
+ tableData,
+ multipleSelection,
+ Search,
+ ruleFormRef,
+ // submitForm,
+ userRef,
+ openUser,
+ // onHandleSizeChange,
+ // onHandleCurrentChange,
+ formInline,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
+ };
+ },
+});
+</script>
+<style scoped lang="scss">
+.textarea{
+ height: 168px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 168px!important;
+}
+::v-deep .el-table__cell {
+ font-weight: 400;
+}
+//分页
+.pages{
+ display: flex;
+ justify-content: flex-end;
+}
+::v-deep .el-pagination .el-pager li {
+ 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;
+}
+::v-deep .el-pagination .btn-prev {
+ 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 .btn-next{
+ margin: 0 5px;
+ background-color: #f4f4f5;
+ color: #606266;
+ min-width: 30px;
+ border-radius: 2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/panManagement/component/addEmergencyPersonnel.vue b/src/views/contingencyManagement/panManagement/component/addEmergencyPersonnel.vue
deleted file mode 100644
index 0188133..0000000
--- a/src/views/contingencyManagement/panManagement/component/addEmergencyPersonnel.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
- <div class="system-edit-user-container">
- <el-dialog
- title="新建应急队伍人员"
- v-model="isShowDialog"
- width="769px"
- draggable
- >
- <el-form
- ref="ruleFormRef"
- :model="ruleForm"
- size="default"
- :rules="rules"
- label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="选择人员" prop="selectPeople">
- <el-input
- v-model="ruleForm.selectPeople"
- placeholder="请选择"
- class="input-with-select"
- >
- <template #append>
- <el-button :icon="Search"/>
- </template>
- </el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="人员工号" prop="jobNumber">
- <el-input v-model="ruleForm.jobNumber" placeholder="请填写人员工号"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="人员名称" prop="personnelName">
- <el-input v-model="ruleForm.personnelName" placeholder="请填写人员名称"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="人员性别" prop="personnelGender">
- <el-radio-group v-model="ruleForm.personnelGender">
- <el-radio label="男" />
- <el-radio label="女" />
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号码" prop="phone">
- <el-input v-model="ruleForm.phone" placeholder="请填写手机号码"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="职位" prop="position">
- <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">继续添加</el-button>
- <el-button size="default" @click="onCancel">关闭</el-button>
- <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import {
- ref,
- reactive,
- defineComponent
-} from 'vue';
-
-import type {
- FormRules,
- FormInstance,
-} from 'element-plus'
-
-import {
- Search
-} from '@element-plus/icons-vue'
-
-export default defineComponent({
- name: 'addTeamLeader',
- components: {
- // Search,
- },
- setup() {
- const isShowDialog = ref(false)
- const ruleFormRef = ref<FormInstance>()
- const ruleForm = reactive({
- selectPeople: '', // 选择人员
- jobNumber: '', //人员工号
- personnelName: '', // 人员名称
- personnelGender: '', // 人员性别
- phone: '', // 手机号码
- position: '', // 职位
- });
- const rules = reactive<FormRules>({
- jobNumber: [
- {
- required: true,
- message: '人员工号不能为空',
- trigger: 'change',
- },
- ],
- personnelName: [
- {
- required: true,
- message: '人员名称不能为空',
- trigger: 'change',
- },
- ],
- personnelGender: [
- {
- required: true,
- message: '人员性别不能为空',
- trigger: 'change',
- },
- ],
- phone: [
- {
- required: true,
- message: '手机号码不能为空',
- trigger: 'change',
- },
- ],
- position: [
- {
- required: true,
- message: '职位不能为空',
- trigger: 'change',
- },
- ],
- })
- const submitForm = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log('submit!')
- } else {
- console.log('error submit!', fields)
- }
- })
- }
- // 打开弹窗
- const openDialog = () => {
- isShowDialog.value = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- isShowDialog.value = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- return {
- openDialog,
- closeDialog,
- isShowDialog,
- ruleFormRef,
- submitForm,
- onCancel,
- ruleForm,
- rules,
- Search,
- };
- },
-});
-</script>
-<style scoped lang="scss">
-.textarea{
- height: 168px!important;
-}
-.textarea ::v-deep .el-textarea__inner{
- height: 168px!important;
-}
-::v-deep .el-table__cell {
- font-weight: 400;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/panManagement/component/dialog.vue b/src/views/contingencyManagement/panManagement/component/dialog.vue
deleted file mode 100644
index add861a..0000000
--- a/src/views/contingencyManagement/panManagement/component/dialog.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<template>
- <div class="system-add-user-container">
- <el-dialog title="查看应急队伍管理" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户名称">
- <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户昵称">
- <el-input v-model="ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="关联角色">
- <el-select v-model="ruleForm.roleSign" placeholder="请选择" clearable class="w100">
- <el-option label="超级管理员" value="admin"></el-option>
- <el-option label="普通用户" value="common"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="部门">
- <el-cascader
- :options="deptData"
- :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="ruleForm.department"
- >
- <template #default="{ node, data }">
- <span>{{ data.deptName }}</span>
- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
- </template>
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号">
- <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="邮箱">
- <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="性别">
- <el-select v-model="ruleForm.sex" placeholder="请选择" clearable class="w100">
- <el-option label="男" value="男"></el-option>
- <el-option label="女" value="女"></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户密码">
- <el-input v-model="ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="账户过期">
- <el-date-picker v-model="ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="用户状态">
- <el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="用户描述">
- <el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">新 增</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: {
- userName: string;
- userNickname: string;
- roleSign: string;
- department: any;
- phone: string;
- email: string;
- sex: string;
- password: string;
- overdueTime: string;
- status: boolean;
- describe: string;
- };
- deptData: Array<DeptData>;
-}
-
-export default defineComponent({
- name: 'systemAddUser',
- setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- userName: '', // 账户名称
- userNickname: '', // 用户昵称
- roleSign: '', // 关联角色
- department: [], // 部门
- phone: '', // 手机号
- email: '', // 邮箱
- sex: '', // 性别
- password: '', // 账户密码
- overdueTime: '', // 账户过期
- status: true, // 用户状态
- describe: '', // 用户描述
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = () => {
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- closeDialog();
- };
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
-});
-</script>
diff --git a/src/views/contingencyManagement/panManagement/component/editEmergencyPersonnel.vue b/src/views/contingencyManagement/panManagement/component/editEmergencyPersonnel.vue
deleted file mode 100644
index d6092e1..0000000
--- a/src/views/contingencyManagement/panManagement/component/editEmergencyPersonnel.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
- <div class="system-edit-user-container">
- <el-dialog
- title="修改应急队伍人员"
- v-model="isShowDialog"
- width="769px"
- draggable
- >
- <el-form
- ref="ruleFormRef"
- :model="ruleForm"
- size="default"
- :rules="rules"
- label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="选择人员" prop="selectPeople">
- <el-input
- v-model="ruleForm.selectPeople"
- placeholder="请选择"
- class="input-with-select"
- >
- <template #append>
- <el-button :icon="Search"/>
- </template>
- </el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="人员工号" prop="jobNumber">
- <el-input v-model="ruleForm.jobNumber" placeholder="请填写人员工号"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="人员名称" prop="personnelName">
- <el-input v-model="ruleForm.personnelName" placeholder="请填写人员名称"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="人员性别" prop="personnelGender">
- <el-radio-group v-model="ruleForm.personnelGender">
- <el-radio label="男" />
- <el-radio label="女" />
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="手机号码" prop="phone">
- <el-input v-model="ruleForm.phone" placeholder="请填写手机号码"></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="职位" prop="position">
- <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">继续添加</el-button>
- <el-button size="default" @click="onCancel">关闭</el-button>
- <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
-</template>
-
-<script lang="ts">
-import {
- ref,
- reactive,
- toRefs,
- defineComponent
-} from 'vue';
-
-import type {
- FormRules,
- FormInstance,
-} from 'element-plus'
-
-import {
- Search
-} from '@element-plus/icons-vue'
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-
-interface RuleFormRow {
- // teamName: string;
- // teamLevel: string;
- // teamLeader: string;
- // responsibleDepartment: any
- // teamPhone: string;
- // telephone: string;
- // describe: string;
- // selectPeople: string
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: RuleFormRow;
- deptData: Array<DeptData>;
-}
-export default defineComponent({
- name: 'editTeamLeader',
- components: {
- // Search,
- },
- setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- selectPeople:'', //选择人员
- jobNumber: '', // 人员工号
- phone: '', // 手机号码
- personnelGender: '', //人员性别
- position: '', //职位
- personnelName: '', // 人员名称
- },
- deptData: [], // 部门数据
- });
- // const isShowDialog = ref(false)
- const ruleFormRef = ref<FormInstance>()
- // 打开弹窗
- const openDialog = (row: RuleFormRow) => {
- // isShowDialog.value = true;
- state.ruleForm = row;
- state.isShowDialog = true;
- };
- // 关闭弹窗
- const closeDialog = () => {
- // isShowDialog.value = false;
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- const rules = reactive<FormRules>({
- selectPeople:[
- {
- required: true,
- message: '人员不能为空',
- trigger: 'change',
- },
- ],
- jobNumber: [
- {
- required: true,
- message: '人员工号不能为空',
- trigger: 'change',
- },
- ],
- personnelName: [
- {
- required: true,
- message: '人员名称不能为空',
- trigger: 'change',
- },
- ],
- personnelGender: [
- {
- required: true,
- message: '人员性别不能为空',
- trigger: 'change',
- },
- ],
- phone: [
- {
- required: true,
- message: '手机号码不能为空',
- trigger: 'change',
- },
- ],
- position: [
- {
- required: true,
- message: '职位不能为空',
- trigger: 'change',
- },
- ],
- })
- const submitForm = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- await formEl.validate((valid, fields) => {
- if (valid) {
- console.log('submit!')
- } else {
- console.log('error submit!', fields)
- }
- })
- }
- return {
- openDialog,
- closeDialog,
- // isShowDialog,
- ruleFormRef,
- submitForm,
- onCancel,
- rules,
- Search,
- ...toRefs(state),
- };
- },
-});
-</script>
-<style scoped lang="scss">
-.textarea{
- height: 168px!important;
-}
-.textarea ::v-deep .el-textarea__inner{
- height: 168px!important;
-}
-::v-deep .el-table__cell {
- font-weight: 400;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/panManagement/component/openAdd.vue b/src/views/contingencyManagement/panManagement/component/openAdd.vue
index 580eba3..87df549 100644
--- a/src/views/contingencyManagement/panManagement/component/openAdd.vue
+++ b/src/views/contingencyManagement/panManagement/component/openAdd.vue
@@ -74,19 +74,17 @@
<el-form-item label="编写部门" prop="telephone">
<el-tree-select
v-model="ruleForm.responsibleDepartment"
- :data="data" class="w100"
+ :data="data"
+ class="w100"
placeholder="请选择"/>
</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-tree-select-->
-<!-- v-model="ruleForm.responsibleDepartment"-->
-<!-- :data="data" class="w100"-->
-<!-- placeholder="请选择"/>-->
<el-date-picker
v-model="value1"
type="datetime"
+ class="w100"
placeholder="选择日期时间"
/>
</el-form-item>
@@ -144,14 +142,15 @@
</span>
</template>
</el-dialog>
- <DailogSearch ref="Shows"/>
+ <CheckTemplate ref="Shows"/>
<userSelections ref="userRef"/>
<RegionsDialog ref="openRef"/>
</div>
</template>
<script lang="ts">
-import { reactive,
+import {
+ reactive,
ref,
defineComponent
} from 'vue';
@@ -166,13 +165,13 @@
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'
+import CheckTemplate from '/@/components/checkTemplate/index.vue'
+import RegionsDialog from '/@/components/regionsDialog/index.vue'
export default defineComponent({
name: 'openAdd',
components: {
- DailogSearch,
+ CheckTemplate,
UserSelections,
RegionsDialog,
},
diff --git a/src/views/contingencyManagement/panManagement/component/openSee.vue b/src/views/contingencyManagement/panManagement/component/openSee.vue
index d5f5ff3..1ad35be 100644
--- a/src/views/contingencyManagement/panManagement/component/openSee.vue
+++ b/src/views/contingencyManagement/panManagement/component/openSee.vue
@@ -1,34 +1,51 @@
<template>
<div class="system-edit-user-container">
<el-dialog
- title="查看应急队伍管理"
+ title="新建应急演练计划发布"
v-model="isShowDialog"
width="769px"
draggable
>
- <el-form :model="ruleForm" size="default" label-width="90px">
+ <el-form
+ ref="ruleFormRef"
+ :model="ruleForm"
+ size="default"
+ label-width="120px"
+ >
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="队伍名称">
- <el-input v-model="ruleForm.teamName" :disabled="true"></el-input>
+ <el-form-item label="演练名称" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="队伍级别">
- <el-select v-model="ruleForm.teamLevel" :disabled="true" class="w100">
- <el-option label="公司" value="admin"></el-option>
- <el-option label="分厂-车间" value="common"></el-option>
- <el-option label="工序-班组等" value="shang"></el-option>
+ <el-form-item label="演练地点" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练地点"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="主办部门" placeholder="请选择">
+ <el-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"/>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练方式" prop="teamLevel">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="综合" value="admin"></el-option>
+ <el-option label="桌面" value="common3"></el-option>
+ <el-option label="专项" value="common2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="队伍负责人">
+ <el-form-item label="应急预案" prop="telephone" @click="daiInpt" >
<el-input
v-model="ruleForm.teamLeader"
- placeholder="Please input"
+ placeholder="请选择"
class="input-with-select"
- :disabled="true"
>
<template #append>
<el-button :icon="Search"/>
@@ -37,34 +54,109 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="负责人部门">
- <el-tree-select v-model="ruleForm.responsibleDepartment" :data="data" :disabled="true" class="w100"/>
+ <el-form-item label="演练级别" prop="teamPhone">
+ <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
+ <el-option label="公司级" value="admin"></el-option>
+ <el-option label="分厂级" value="common"></el-option>
+ <el-option label="车间级" value="common1"></el-option>
+ </el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="负责人手机">
- <el-input v-model="ruleForm.teamPhone" :disabled="true"></el-input>
+ <el-form-item label="计划定制日期" prop="teamPhone">
+ <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="固定电话">
- <el-input v-model="ruleForm.telephone" :disabled="true"></el-input>
+ <el-form-item label="计划演练日期" prop="teamPhone">
+ <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="修改时间" prop="teamPhone">
+ <el-date-picker v-model="editDate" type="datetime" placeholder="选择日期时间" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划定制人" prop="teamPhone">
+ <el-input v-model="ruleForm.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
+ </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-tree-select
+ v-model="ruleForm.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"/>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="队伍描述">
- <el-input class="textarea" v-model="ruleForm.describe" type="textarea" :disabled="true" maxlength="150"></el-input>
+ <el-form-item label="演练目的" prop="telephone">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请填写演练目的"
+ class="input-with-select textarea"
+ type="textarea"
+ >
+ </el-input>
+ </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-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="保险措施" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练经费" prop="teamName">
+ <el-input v-model="ruleForm.teamName" placeholder="请填写演练名称"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="相关附件">
+ <el-form-item label="备注信息" prop="telephone">
+ <el-input
+ v-model="ruleForm.teamLeader"
+ placeholder="请填写备注信息"
+ class="input-with-select textarea"
+ type="textarea"
+ >
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
+ <el-form-item label="预案附件">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:on-change="handleChange"
>
- <el-button type="primary" disabled
+ <el-button type="primary"
>点击上传</el-button>
<template #tip>
<div class="el-upload__tip">
@@ -74,165 +166,146 @@
</el-upload>
</el-form-item>
</el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
- <el-tab-pane label="应急队伍人员" name="first">
- <el-button type="primary" size="default" disabled>新增</el-button>
- <el-table
- :data="tableData"
- style="width: 100%;margin-top: 15px;"
- ref="multipleTableRef"
- :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
- >
- <el-table-column prop="jobNo" label="人员工号" show-overflow-tooltip></el-table-column>
- <el-table-column prop="personnelName" label="人员名称" show-overflow-tooltip></el-table-column>
- <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
- <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
- <el-table-column label="操作" width="200" align="center">
- <template #default="scope">
- <el-button disabled size="small" text="plain" >查看
- </el-button>
- <el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑
- </el-button>
- <el-button disabled size="small" text="plain" style="margin-right: 5px;">删除
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- </el-tab-pane>
- </el-tabs>
- </el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">关闭</el-button>
+ <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
</span>
</template>
</el-dialog>
-<!-- <AddTeamLeader ref="addRef" />-->
+ <RegionsDialog ref="Shows"/>
+ <UserSelections ref="userRef"/>
</div>
</template>
<script lang="ts">
-import { reactive, toRefs, ref, onMounted, defineComponent } from 'vue';
+import { reactive,
+ ref,
+ defineComponent
+} from 'vue';
+
import type {
UploadUserFile,
- TabsPaneContext,
+ FormInstance,
+ // FormRules,
} from 'element-plus'
+
import {
Search
} from '@element-plus/icons-vue'
-// import AddTeamLeader from '/@/views/contingency/component/addEmergencyPersonnel.vue';
-// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
- id: number;
- children?: DeptData[];
-}
-interface RuleFormRow {
- teamName: string;
- teamLevel: string;
- teamLeader: string;
- department: any;
- phone: string;
- telephone: string;
- describe: string;
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: RuleFormRow;
- deptData: Array<DeptData>;
-}
-// 定义表格数据类型
-interface User {
- personnelName: string
- jobNo: string
- phone: string;
- position: string;
-}
-// // 定义表格数据类型
-// interface Team {
-// personnelName: string
-// teamLevel: string
-// teamDescription: string
-// teamPhone: string
-// phone: string;
-// describe: string;
-// responsibleDepartment: string
-// }
+import UserSelections from "/@/components/userSelections/index.vue"
+import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"
+
export default defineComponent({
- name: 'openSee',
+ name: 'openAdd',
components: {
- // Search,
+ RegionsDialog,
+ UserSelections,
},
setup() {
- const state = reactive<UserState>({
- isShowDialog: false,
- ruleForm: {
- teamName: '', // 队伍名称
- teamLevel: '', // 队伍级别
- teamLeader: '', //队伍负责人
- department: [], // 负责人部门
- phone: '', // 负责人手机
- telephone: '', // 固定电话
- describe: '', // 队伍描述
- },
- deptData: [], // 部门数据
+ const isShowDialog = ref(false)
+
+ const ruleFormRef = ref<FormInstance>()
+ //定义表单
+ const ruleForm = reactive({
+ teamName: '', // 队伍名称
+ planCustomizer: '胡海涛', //计划定制人
+ teamLeader: '', //队伍负责人
+ department: [], // 负责人部门
+ phone: '', // 负责人手机
+ telephone: '', // 固定电话
});
// 打开弹窗
- const openDialog = (row: RuleFormRow) => {
- state.ruleForm = row;
- state.isShowDialog = true;
+ const openDialog = () => {
+ // state.ruleForm = row;
+ isShowDialog.value = true;
};
// 关闭弹窗
const closeDialog = () => {
- state.isShowDialog = false;
+ isShowDialog.value = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
- // 初始化部门数据
- const initTableData = () => {
- state.deptData.push({
- deptName: 'vueNextAdmin',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '顶级部门',
- id: Math.random(),
- children: [
- {
- deptName: 'IT外包服务',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '总部',
- id: Math.random(),
- },
- {
- deptName: '资本控股',
- createTime: new Date().toLocaleString(),
- status: true,
- sort: Math.random(),
- describe: '分部',
- id: Math.random(),
- },
- ],
- });
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
+ //日期选择器
+ const value1 = ref('')
// 上传附件
const fileList = ref<UploadUserFile[]>([])
-
+ // 可选择树
+ const treeSelect = ref()
+ const tree = [
+ {
+ value: '1',
+ label: 'Level one 1',
+ children: [
+ {
+ value: '1-1',
+ label: 'Level two 1-1',
+ children: [
+ {
+ value: '1-1-1',
+ label: 'Level three 1-1-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: 'Level one 2',
+ children: [
+ {
+ value: '2-1',
+ label: 'Level two 2-1',
+ children: [
+ {
+ value: '2-1-1',
+ label: 'Level three 2-1-1',
+ },
+ ],
+ },
+ {
+ value: '2-2',
+ label: 'Level two 2-2',
+ children: [
+ {
+ value: '2-2-1',
+ label: 'Level three 2-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: 'Level one 3',
+ children: [
+ {
+ value: '3-1',
+ label: 'Level two 3-1',
+ children: [
+ {
+ value: '3-1-1',
+ label: 'Level three 3-1-1',
+ },
+ ],
+ },
+ {
+ value: '3-2',
+ label: 'Level two 3-2',
+ children: [
+ {
+ value: '3-2-1',
+ label: 'Level three 3-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ ]
//定义树形下拉框
const responsibleDepartment = ref()
const data = [
@@ -280,63 +353,58 @@
],
},
]
- //定义tabs切换
- const activeName = ref('first')
- const handleClick = (tab: TabsPaneContext, event: Event) => {
- console.log(tab, event)
+ // 表单提交验证必填项
+ const submitForm = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!', fields)
+ }
+ })
}
+ // 应急队伍弹窗
+ const Shows=ref()
+ const daiInpt=()=>{
+ Shows.value.openDailog()
+ }
+ // 打开用户选择弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ // 计划定制日期
+ const datetime = ref('')
+ // 计划演练日期
+ const drillDate = ref('')
+ // 修改时间
+ const editDate = ref('')
- //定义表格数据
- const multipleSelection = ref<User[]>([])
- const tableData: User[] = [
- {
- personnelName: '张志刚',
- jobNo: '1037',
- position: '副组长',
- phone: '13673321356',
- },
- {
- personnelName: '张志刚',
- jobNo: '1037',
- position: '副组长',
- phone: '13673321356',
- },
- {
- personnelName: '张志刚',
- jobNo: '1037',
- position: '副组长',
- phone: '13673321356',
- },
- {
- personnelName: '张志刚',
- jobNo: '1037',
- position: '副组长',
- phone: '13673321356',
- }
- ]
-
- // //添加队伍负责人
- // const addRef = ref();
- // //添加队伍负责人弹窗
- // const onAddTeamLeader = () => {
- // addRef.value.openDialog();
- // };
return {
openDialog,
closeDialog,
+ isShowDialog,
onCancel,
fileList,
responsibleDepartment,
data,
- activeName,
- handleClick,
- tableData,
- multipleSelection,
Search,
- // addRef,
- // onAddTeamLeader,
- ...toRefs(state),
+ ruleForm,
+ value1,
+ treeSelect,
+ tree,
+ daiInpt,
+ Shows,
+ ruleFormRef,
+ submitForm,
+ // rules,
+ openUser,
+ userRef,
+ datetime,
+ drillDate,
+ editDate,
};
},
});
@@ -351,4 +419,30 @@
::v-deep .el-table__cell {
font-weight: 400;
}
+.el-divider--horizontal{
+ height: 0;
+ margin: 0;
+ border-top: transparent;
+}
+.el-select{
+ width: 100%;
+}
+//多行文本框
+.textarea{
+ height: 70px!important;
+}
+.textarea ::v-deep .el-textarea__inner{
+ height: 70px!important;
+}
+//弹窗底部边框线
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+//弹窗顶部边框线
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/panManagement/index.vue b/src/views/contingencyManagement/panManagement/index.vue
index 05980d0..fecf1bd 100644
--- a/src/views/contingencyManagement/panManagement/index.vue
+++ b/src/views/contingencyManagement/panManagement/index.vue
@@ -33,7 +33,7 @@
<Delete />
</el-icon>删除
</el-button>
- <el-button size="default" type="primary" @click="onOpenAdd">
+ <el-button size="default" type="primary" @click="onabolishLibrary">
废止库
</el-button>
</div>
@@ -68,24 +68,24 @@
<el-table-column prop="teamLevel" label="预案类型" show-overflow-tooltip sortable></el-table-column>
<el-table-column prop="teamDescription" label="预案级别" show-overflow-tooltip sortable></el-table-column>
<el-table-column prop="phone" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
- <el-table-column label="操作" width="260" align="center">
+ <el-table-column label="操作" width="260" align="center" fixed="right">
<template #default="scope">
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="dialogFormVisible = true">
+ <el-button size="small" text type="primary" @click="dialogFormVisible = true">
<el-icon style="margin-right: 5px;">
<VideoPlay />
</el-icon>启动
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary">
+ <el-button size="small" text type="primary" @click="abolish(0)">
<el-icon style="margin-right: 5px;">
<VideoPause />
</el-icon>废止
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary">
+ <el-button size="small" text type="primary" @click="jumpFrom(0)">
<el-icon style="margin-right: 5px;">
<EditPen />
</el-icon>修改
</el-button>
- <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary">
+ <el-button size="small" text type="primary" @click="abolish(0)">
发起审批
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
@@ -109,9 +109,24 @@
<!-- :total="tableData.total"-->
<!-- >-->
<!-- </el-pagination>-->
+ <div class="pages">
+ <el-pagination
+ v-model:currentPage="pageIndex"
+ v-model:page-size="pageSize"
+ :page-sizes="[10, 20, 30]"
+ :pager-count="5"
+ :small="small"
+ :disabled="disabled"
+ :background="background"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</el-card>
-<!-- <OpenSee ref="seeRef" />-->
<OpenAdd ref="addRef" />
+ <AbolishLibrary ref="abolishRef"/>
<OpenEdit ref="editRef" />
<upData ref="upShow"></upData>
<el-dialog v-model="dialogFormVisible" width="30%" title="启动">
@@ -145,6 +160,7 @@
ElMessage,
ElTable,
} from 'element-plus';
+import {useRouter} from "vue-router"
import { Plus,
Edit,
Delete,
@@ -157,8 +173,8 @@
EditPen,
} from '@element-plus/icons-vue'
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
+import AbolishLibrary from '/@/views/contingencyManagement/panManagement/component/abolishLibrary.vue';
import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
-import OpenSee from '/@/views/contingencyManagement/panManagement/component/openSee.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
// 定义表格数据类型
@@ -193,7 +209,7 @@
name: 'systemUser',
components: {
OpenAdd,
- OpenSee,
+ AbolishLibrary,
OpenEdit,
View,
EditPen,
@@ -280,10 +296,6 @@
teamLeader: '王磊',
}
]
- //查看用户弹窗
- // const onOpenSee = (row: TableDataRow) => {
- // seeRef.value.openDialog(row);
- // };
// 启动弹窗
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
@@ -294,6 +306,11 @@
const addRef = ref();
const onOpenAdd = () => {
addRef.value.openDialog();
+ };
+ //打开废止库弹窗
+ const abolishRef = ref();
+ const onabolishLibrary = () => {
+ abolishRef.value.openDialog();
};
// 打开修改用户弹窗
const onOpenEdit = (row: TableDataRow) => {
@@ -311,18 +328,41 @@
})
.catch(() => {});
};
- // 分页改变
- // const onHandleSizeChange = (val: number) => {
- // state.tableData.param.pageSize = val;
- // };
- // // 分页改变
- // const onHandleCurrentChange = (val: number) => {
- // state.tableData.param.pageNum = val;
- // };
// 页面加载时
// onMounted(() => {
// initTableData();
// });
+ // 分页
+ const pageIndex = ref(4);
+ const pageSize = ref(10);
+ // 分页改变
+ const handleSizeChange = (val: number) => {
+ console.log(`${val} items per page`);
+ };
+ // 分页未改变
+ const handleCurrentChange = (val: number) => {
+ console.log(`current page: ${val}`);
+ };
+
+ const router=useRouter()
+ // 修改跳转
+ const jumpFrom=(data:string)=>{
+ router.push({
+ path:"/processForm",
+ query:{
+ type:data
+ }
+ })
+ }
+ // 发起审批跳转
+ const abolish=(data:string)=>{
+ router.push({
+ path:"/abolishDialog",
+ query:{
+ type:data
+ }
+ })
+ }
return {
// value,
// options,
@@ -331,7 +371,6 @@
upButton,
upShow,
tableData,
- // onOpenSee, //查看
dialogTableVisible,
dialogFormVisible,
form,
@@ -339,8 +378,17 @@
onOpenEdit, //编辑
editRef,
onOpenAdd, //新增
+ onabolishLibrary,
addRef,
+ abolishRef,
onRowDel,
+ pageIndex,
+ pageSize,
+ handleSizeChange,
+ handleCurrentChange,
+ jumpFrom,
+ abolish,
+ router,
// onHandleSizeChange,
// onHandleCurrentChange,
// ...toRefs(state),
@@ -386,4 +434,47 @@
margin-right: 0;
border-radius: 4px 4px 0 0;
}
+//表头
+::v-deep .el-table th.el-table__cell {
+ background-color: #f6f7fa;
+ font-weight: 400;
+ color: #909399;
+}
+.el-table .sort-caret.ascending{
+ border-bottom-color: #c0c4cc;
+}
+//分页
+.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;
+}
+::v-deep .el-pagination .el-pager li.is-active {
+ 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;
+}
+::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;
+}
</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/processForm/component/formInformationTop.vue b/src/views/contingencyManagement/processForm/component/formInformationTop.vue
new file mode 100644
index 0000000..ef75063
--- /dev/null
+++ b/src/views/contingencyManagement/processForm/component/formInformationTop.vue
@@ -0,0 +1,144 @@
+<template>
+ <el-form ref="form" :model="form" label-width="120px">
+ <el-row>
+ <el-col :span="11">
+ <el-form-item label="安全目标指标">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" :offset="2">
+ <el-form-item label="目标指标编号">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="11">
+ <el-form-item label="年度">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" :offset="2">
+ <el-form-item label="指标值">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <el-tabs v-model="activeName" style="padding: 0 20px">
+ <el-tab-pane label="考核指标" name="1">
+ <el-table :data="tableData" style="width: 100%">
+ <el-table-column align="center" type="index" label="序号" width="70" />
+ <el-table-column align="center" prop="date" label="责任部门" />
+ <el-table-column align="center" prop="name" label="考核指标" />
+ <el-table-column align="center" prop="address" label="制定部门" />
+ <el-table-column align="center" prop="address" label="制定日期" />
+ <el-table-column align="center" label="检查值">
+ <template #default>
+ <el-input v-model="form.name" placeholder=""></el-input>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="address" label="检查人" />
+ <el-table-column align="center" prop="address" label="检查时间" />
+ </el-table>
+ <div class="tiao">
+ <div class="typeS">审批</div>
+ </div>
+ <el-row style="padding:20px 0">
+ <el-col :span="6" style="text-align:right">一级审批：</el-col>
+ <el-col :span="18">同意</el-col>
+ </el-row>
+ <el-row style="padding:0 0 20px 0">
+ <el-col :span="6"></el-col>
+ <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
+ </el-row>
+ </el-tab-pane>
+ </el-tabs>
+</template>
+<script lang="ts">
+import { defineComponent,ref,reactive } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const form = reactive({
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+ const tableData = [
+ {
+ date: '2016-05-03',
+ name: 'Tom',
+ address: 'No. 189, Grove St, Los Angeles',
+ },
+ ];
+ const activeName = ref('1');
+ return{
+ form,
+ tableData,
+ activeName
+ }
+ },
+})
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box{
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+}
+.tiao{
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0 ;
+ position: relative;
+}
+.typeS{
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor{
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns{
+ width: 100%;
+ padding:20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+
+}
+.title2{
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+.el-row{
+ padding:0 0 20px 0 ;
+}
+</style>
diff --git a/src/views/contingencyManagement/processForm/component/formInformationTops.vue b/src/views/contingencyManagement/processForm/component/formInformationTops.vue
new file mode 100644
index 0000000..53eed6a
--- /dev/null
+++ b/src/views/contingencyManagement/processForm/component/formInformationTops.vue
@@ -0,0 +1,312 @@
+<template>
+ <el-form ref="form" :model="form" label-width="120px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="预案名称">
+ <el-input v-model="form.name" placeholder="请填写预案名称"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="适用部门">
+ <el-tree-select
+ class="select"
+ placeholder="请选择"
+ v-model="value"
+ :data="data"
+ :render-after-expand="false"
+ show-checkbox
+ multiple
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="预案类型">
+ <el-select class="select" v-model="form.region" placeholder="请选择">
+ <el-option label="综合应急预案" value="shanghai" />
+ <el-option label="现场处置方案" value="beijing" />
+ <el-option label="专项应急预案" value="shanghai" />
+ <el-option label="其它预案" value="beijing" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="危险源关联">
+ <el-select class="select" v-model="form.region" placeholder="请选择">
+ <el-option label="是" value="shanghai" />
+ <el-option label="否" value="beijing" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="预案级别">
+ <el-select class="select" v-model="form.region" placeholder="请选择">
+ <el-option label="公司及" value="shanghai" />
+ <el-option label="分厂级" value="beijing" />
+ <el-option label="车间级" value="beijing" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="编写人">
+ <el-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="编写部门" placeholder="请选择">
+ <el-tree-select
+ class="select"
+ v-model="value2"
+ :data="dataSelect"
+ :render-after-expand="false"
+ multiple
+ check-strictly
+ check-on-click-node
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="发布实施日期">
+ <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
+ <el-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="预案附件">
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ :on-change="handleChange"
+ >
+ <el-button type="primary"
+ >点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip">
+ 添加相关附件
+ </div>
+ </template>
+ </el-upload>
+ </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-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ >
+ <template #append>
+ <el-button :icon="Search" @click="regionsDialog"/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <checkTemplate ref="ShowRef"/>
+ <userSelections ref="userRef"/>
+ <RegionsDialog ref="openRef"/>
+</template>
+<script lang="ts">
+import {
+ defineComponent,
+ ref,
+ reactive
+} from 'vue';
+import {
+ Search
+} from '@element-plus/icons-vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+import CheckTemplate from "/@/components/checkTemplate/index.vue"
+import RegionsDialog from "/@/components/regionsDialog/index.vue";
+export default defineComponent({
+ components: {
+ CheckTemplate,
+ UserSelections,
+ RegionsDialog,
+ },
+ setup() {
+ const form = reactive({
+ name: '',
+ value: '',
+ value2: '',
+ teamLeader: '',
+
+ // data: '',
+ // dataSelect: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+
+ // 可选择树形选择框
+ const value = ref()
+
+ const data = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '生产运行部',
+ children: [
+ {
+ value: '1-1-1',
+ label: '工艺二班',
+ },
+ ],
+ },
+ ],
+ }
+ ]
+ // 树形选择框
+ const value2 = ref()
+
+ const dataSelect = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '生产运行部',
+ children: [
+ {
+ value: '1-1-1',
+ label: '工艺二班',
+ },
+ ],
+ },
+ ],
+ }
+ ]
+ // 应急队伍弹窗
+ const ShowRef=ref()
+ const daiInpt=()=>{
+ ShowRef.value.openDailog()
+ }
+ // 选择区域弹窗
+ const openRef=ref()
+ const regionsDialog=()=>{
+ openRef.value.openDailog()
+ }
+ // 打开编写人选择用户弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ // 日期选择
+ const datetime = ref('')
+ return {
+ form,
+ value,
+ data,
+ value2,
+ dataSelect,
+ openUser,
+ userRef,
+ Search,
+ ShowRef,
+ daiInpt,
+ openRef,
+ datetime,
+ regionsDialog,
+ };
+ },
+});
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box {
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+}
+.tiao {
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0;
+ position: relative;
+}
+.typeS {
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor {
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns {
+ width: 100%;
+ padding: 20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+}
+.title2 {
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+.el-row{
+ padding:0 0 20px 0;
+}
+.select{
+ width: 100%;
+}
+.select ::v-deep .el-select{
+ width: 100%;
+}
+</style>
diff --git a/src/views/contingencyManagement/processForm/component/lowerPlate.vue b/src/views/contingencyManagement/processForm/component/lowerPlate.vue
new file mode 100644
index 0000000..cbb82fb
--- /dev/null
+++ b/src/views/contingencyManagement/processForm/component/lowerPlate.vue
@@ -0,0 +1,120 @@
+<template>
+ <div class="box">
+ <el-form ref="formS" :model="form" :rules="rules" label-width="120px">
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="流程标题">
+ <el-input v-model="form.names" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="下级审批日期">
+ <el-date-picker v-model="form.date1" type="date" placeholder="下级审批日期" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="">
+ <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-if="form.delivery">
+ <el-col :span="15">
+ <el-form-item label="抄送给" prop="resource">
+ <el-input v-model="form.resource" placeholder="">
+ <template #append> <el-button :icon="Search" @click="openDai" /> </template
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="">
+ <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-if="form.type">
+ <el-col :span="15">
+ <el-form-item label="指定" prop="desc">
+ <el-input v-model="form.desc" placeholder="">
+ <template #append> <el-button :icon="Search" @click="openDai" /> </template
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
+ <DailogSearchUser ref="ShowUser"></DailogSearchUser>
+</template>
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue';
+import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
+import { Search } from '@element-plus/icons-vue';
+import type { FormInstance, FormRules } from 'element-plus'
+export default defineComponent({
+ components:{DailogSearchUser},
+ setup() {
+ const formS=ref<FormInstance>()
+ let form = reactive({
+ names: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: "",
+ type: "",
+ resource: '',
+ desc: '',
+ });
+ const typeChang=()=>{
+ console.log('tag',form)
+ }
+ const rules = reactive<FormRules>({
+ resource: [
+ {
+ type: 'array',
+ required: true,
+ message: '用户不能为空',
+ trigger: 'change',
+ },
+ ],
+ desc: [
+ {
+ required: true,
+ message: '用户不能为空',
+ trigger: 'change',
+ },
+ ]})
+ const ShowUser=ref()
+ const openDai =()=>{
+ ShowUser.value.openDailog()
+ }
+ return {
+ form,
+ rules,
+ formS,
+ typeChang,
+ ShowUser,
+ openDai,
+ Search,
+ };
+ },
+});
+</script>
+
+<style scoped>
+.box {
+ margin: 30px 0 100px 0;
+ background-color: #fff;
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+ padding: 20px;
+}
+.el-row {
+ padding: 0 0 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/processForm/processForm.vue b/src/views/contingencyManagement/processForm/processForm.vue
new file mode 100644
index 0000000..98218a0
--- /dev/null
+++ b/src/views/contingencyManagement/processForm/processForm.vue
@@ -0,0 +1,137 @@
+<template>
+ <div class="system-user-container">
+ <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
+ <div class="box">
+ <el-menu
+ :default-active="activeIndex"
+ class="el-menu-demo"
+ background-color="#ebeef5"
+ text-color="#fff"
+ active-text-color="#fff"
+ mode="horizontal"
+ @select="handleSelect"
+ >
+ <el-menu-item index="1">表单信息</el-menu-item>
+ <el-menu-item index="2">流程图</el-menu-item>
+ </el-menu>
+ <div v-if="activeIndex == 1" class="navType">
+ <formInformationTop v-if="false"></formInformationTop>
+ <formInformationTops></formInformationTops>
+ </div>
+ <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
+ <div class="title2">流程图</div>
+ <div style="width:100%;height:400px"></div>
+ </div>
+ </div>
+ <lowerPlate></lowerPlate>
+ <div class="btns">
+ <el-button type="primary">启动</el-button>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref,onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import formInformationTop from './component/formInformationTop.vue'
+import formInformationTops from './component/formInformationTops.vue'
+import lowerPlate from './component/lowerPlate.vue'
+export default defineComponent({
+ components:{lowerPlate,formInformationTop,formInformationTops},
+ setup() {
+ const activeIndex = ref('1');
+ const handleSelect = (key: string, keyPath: string[]) => {
+ // console.log(key, keyPath);
+ activeIndex.value = key;
+ };
+ const form = reactive({
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+
+ const router=useRouter()
+ const Type=onMounted(()=>{
+ // console.log("xxxxxxx",router)
+ })
+
+ return {
+ activeIndex,
+ handleSelect,
+ form,
+ router,
+ Type
+ };
+ },
+});
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box{
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+ padding: 15px;
+}
+.tiao{
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0 ;
+ position: relative;
+}
+.typeS{
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor{
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns{
+ width: 100%;
+ padding:20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+
+}
+.title2{
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+
+/*弹窗底部边框线*/
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+/*弹窗顶部边框线*/
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+</style>
diff --git a/src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTop.vue b/src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTop.vue
new file mode 100644
index 0000000..ef75063
--- /dev/null
+++ b/src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTop.vue
@@ -0,0 +1,144 @@
+<template>
+ <el-form ref="form" :model="form" label-width="120px">
+ <el-row>
+ <el-col :span="11">
+ <el-form-item label="安全目标指标">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" :offset="2">
+ <el-form-item label="目标指标编号">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="11">
+ <el-form-item label="年度">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="11" :offset="2">
+ <el-form-item label="指标值">
+ <el-input v-model="form.name"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <el-tabs v-model="activeName" style="padding: 0 20px">
+ <el-tab-pane label="考核指标" name="1">
+ <el-table :data="tableData" style="width: 100%">
+ <el-table-column align="center" type="index" label="序号" width="70" />
+ <el-table-column align="center" prop="date" label="责任部门" />
+ <el-table-column align="center" prop="name" label="考核指标" />
+ <el-table-column align="center" prop="address" label="制定部门" />
+ <el-table-column align="center" prop="address" label="制定日期" />
+ <el-table-column align="center" label="检查值">
+ <template #default>
+ <el-input v-model="form.name" placeholder=""></el-input>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" prop="address" label="检查人" />
+ <el-table-column align="center" prop="address" label="检查时间" />
+ </el-table>
+ <div class="tiao">
+ <div class="typeS">审批</div>
+ </div>
+ <el-row style="padding:20px 0">
+ <el-col :span="6" style="text-align:right">一级审批：</el-col>
+ <el-col :span="18">同意</el-col>
+ </el-row>
+ <el-row style="padding:0 0 20px 0">
+ <el-col :span="6"></el-col>
+ <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
+ </el-row>
+ </el-tab-pane>
+ </el-tabs>
+</template>
+<script lang="ts">
+import { defineComponent,ref,reactive } from 'vue'
+
+export default defineComponent({
+ setup() {
+ const form = reactive({
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+ const tableData = [
+ {
+ date: '2016-05-03',
+ name: 'Tom',
+ address: 'No. 189, Grove St, Los Angeles',
+ },
+ ];
+ const activeName = ref('1');
+ return{
+ form,
+ tableData,
+ activeName
+ }
+ },
+})
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box{
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+}
+.tiao{
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0 ;
+ position: relative;
+}
+.typeS{
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor{
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns{
+ width: 100%;
+ padding:20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+
+}
+.title2{
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+.el-row{
+ padding:0 0 20px 0 ;
+}
+</style>
diff --git a/src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTops.vue b/src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTops.vue
new file mode 100644
index 0000000..8a1f2a5
--- /dev/null
+++ b/src/views/contingencyManagement/releaseOfDrillStart/component/formInformationTops.vue
@@ -0,0 +1,440 @@
+<template>
+ <el-form ref="form" :model="form" label-width="120px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="演练名称">
+ <el-input v-model="form.name" placeholder="请填写预案名称" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="演练地点">
+ <el-input v-model="form.teamName" placeholder="请填写演练地点" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="主办部门">
+ <el-tree-select
+ v-model="form.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"
+ disabled
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="演练方式" prop="teamLevel">
+ <el-select v-model="form.teamLevel" class="w100" placeholder="请选择" disabled>
+ <el-option label="综合" value="admin"></el-option>
+ <el-option label="桌面" value="common3"></el-option>
+ <el-option label="专项" value="common2"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="应急预案" prop="telephone" >
+ <el-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" @click="daiInpt" disabled/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="演练级别" prop="teamPhone">
+ <el-select v-model="form.teamLevel" class="w100" placeholder="请选择" disabled>
+ <el-option label="公司级" value="admin"></el-option>
+ <el-option label="分厂级" value="common"></el-option>
+ <el-option label="车间级" value="common1"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="计划定制日期" prop="teamPhone">
+ <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="计划演练日期" prop="teamPhone">
+ <el-date-picker v-model="drillDate" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="修改时间" prop="teamPhone">
+ <el-date-picker v-model="editDate" class="w100" type="datetime" placeholder="选择日期时间" disabled style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="计划定制人" prop="teamPhone">
+ <el-input v-model="form.planCustomizer" disabled placeholder="请填写演练地点"></el-input>
+ </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-tree-select
+ v-model="form.responsibleDepartment"
+ :data="data" class="w100"
+ placeholder="请选择"
+ disabled
+ />
+ </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-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser" disabled/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="演练目的" prop="telephone">
+ <el-input
+ v-model="form.teamLeader"
+ placeholder="请填写演练目的"
+ class="input-with-select textarea"
+ type="textarea"
+ disabled
+ >
+ </el-input>
+ </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-input
+ v-model="form.teamLeader"
+ placeholder="请选择"
+ class="input-with-select"
+ disabled
+ >
+ <template #append>
+ <el-button :icon="Search" @click="openUser" disabled/>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="保险措施" prop="teamName">
+ <el-input v-model="form.teamName" placeholder="请填写演练名称" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+ <el-form-item label="演练经费" prop="teamName">
+ <el-input v-model="form.teamName" placeholder="请填写演练名称" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="备注信息" prop="telephone">
+ <el-input
+ v-model="form.teamLeader"
+ placeholder="请填写备注信息"
+ class="input-with-select textarea"
+ type="textarea"
+ disabled
+ >
+ </el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="margin-bottom: 0!important;">
+ <el-form-item label="预案附件">
+ <el-upload
+ v-model:file-list="fileList"
+ class="upload-demo"
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ :on-change="handleChange"
+ disabled
+ >
+ <el-button type="primary" disabled
+ >点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip">
+ 添加相关附件
+ </div>
+ </template>
+ </el-upload>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <checkTemplate ref="ShowRef"/>
+ <userSelections ref="userRef"/>
+ <RegionsDialog ref="openRef"/>
+</template>
+<script lang="ts">
+import {
+ defineComponent,
+ ref,
+ reactive
+} from 'vue';
+import {
+ Search
+} from '@element-plus/icons-vue'
+import type {
+ UploadUserFile,
+ // FormRules,
+} from 'element-plus'
+import UserSelections from "/@/components/userSelections/index.vue"
+import CheckTemplate from "/@/components/checkTemplate/index.vue"
+import RegionsDialog from "/@/components/regionsDialog/index.vue";
+export default defineComponent({
+ components: {
+ CheckTemplate,
+ UserSelections,
+ RegionsDialog,
+ },
+ setup() {
+ const form = reactive({
+ name: '',
+ teamName: '',
+ responsibleDepartment: '',
+ teamLevel: '',
+ teamLeader: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+ // 上传附件
+ const fileList = ref<UploadUserFile[]>([])
+ // 可选择树
+ const treeSelect = ref()
+ const tree = [
+ {
+ value: '1',
+ label: 'Level one 1',
+ children: [
+ {
+ value: '1-1',
+ label: 'Level two 1-1',
+ children: [
+ {
+ value: '1-1-1',
+ label: 'Level three 1-1-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: 'Level one 2',
+ children: [
+ {
+ value: '2-1',
+ label: 'Level two 2-1',
+ children: [
+ {
+ value: '2-1-1',
+ label: 'Level three 2-1-1',
+ },
+ ],
+ },
+ {
+ value: '2-2',
+ label: 'Level two 2-2',
+ children: [
+ {
+ value: '2-2-1',
+ label: 'Level three 2-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: 'Level one 3',
+ children: [
+ {
+ value: '3-1',
+ label: 'Level two 3-1',
+ children: [
+ {
+ value: '3-1-1',
+ label: 'Level three 3-1-1',
+ },
+ ],
+ },
+ {
+ value: '3-2',
+ label: 'Level two 3-2',
+ children: [
+ {
+ value: '3-2-1',
+ label: 'Level three 3-2-1',
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ //定义树形下拉框
+ const responsibleDepartment = ref()
+ const data = [
+ {
+ value: '1',
+ label: '广汇能源综合物流发展有限责任公司',
+ children: [
+ {
+ value: '1-1',
+ label: '经营班子',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '2',
+ label: '生产运行部',
+ children: [
+ {
+ value: '2-1',
+ label: '灌装一班',
+ children: []
+ },
+ {
+ value: '2-2',
+ label: '工艺四班',
+ children: [],
+ },
+ ],
+ },
+ {
+ value: '3',
+ label: '设备部',
+ children: [
+ {
+ value: '3-1',
+ label: '仪表班',
+ children: [],
+ },
+ {
+ value: '3-2',
+ label: '机修班',
+ children: [],
+ },
+ ],
+ },
+ ]
+ // 计划定制日期
+ const datetime = ref('')
+ // 计划演练日期
+ const drillDate = ref('')
+ // 修改时间
+ const editDate = ref('')
+ // 应急队伍弹窗
+ const ShowRef=ref()
+ const daiInpt=()=>{
+ ShowRef.value.openDailog()
+ }
+ // 选择区域弹窗
+ const openRef=ref()
+ const regionsDialog=()=>{
+ openRef.value.openDailog()
+ }
+ // 打开编写人选择用户弹窗
+ const userRef = ref();
+ const openUser = () => {
+ userRef.value.openDialog();
+ };
+ return {
+ form,
+ data,
+ treeSelect,
+ tree,
+ drillDate,
+ editDate,
+ openUser,
+ userRef,
+ Search,
+ ShowRef,
+ daiInpt,
+ responsibleDepartment,
+ openRef,
+ datetime,
+ regionsDialog,
+ fileList,
+ };
+ },
+});
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box {
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+}
+.tiao {
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0;
+ position: relative;
+}
+.typeS {
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor {
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns {
+ width: 100%;
+ padding: 20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+}
+.title2 {
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+.el-row{
+ padding:0 0 20px 0;
+}
+.select{
+ width: 100%;
+}
+.select ::v-deep .el-select{
+ width: 100%;
+}
+</style>
diff --git a/src/views/contingencyManagement/releaseOfDrillStart/component/lowerPlate.vue b/src/views/contingencyManagement/releaseOfDrillStart/component/lowerPlate.vue
new file mode 100644
index 0000000..cbb82fb
--- /dev/null
+++ b/src/views/contingencyManagement/releaseOfDrillStart/component/lowerPlate.vue
@@ -0,0 +1,120 @@
+<template>
+ <div class="box">
+ <el-form ref="formS" :model="form" :rules="rules" label-width="120px">
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="流程标题">
+ <el-input v-model="form.names" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="下级审批日期">
+ <el-date-picker v-model="form.date1" type="date" placeholder="下级审批日期" style="width: 100%" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="">
+ <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-if="form.delivery">
+ <el-col :span="15">
+ <el-form-item label="抄送给" prop="resource">
+ <el-input v-model="form.resource" placeholder="">
+ <template #append> <el-button :icon="Search" @click="openDai" /> </template
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="15">
+ <el-form-item label="">
+ <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-if="form.type">
+ <el-col :span="15">
+ <el-form-item label="指定" prop="desc">
+ <el-input v-model="form.desc" placeholder="">
+ <template #append> <el-button :icon="Search" @click="openDai" /> </template
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ </div>
+ <DailogSearchUser ref="ShowUser"></DailogSearchUser>
+</template>
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue';
+import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
+import { Search } from '@element-plus/icons-vue';
+import type { FormInstance, FormRules } from 'element-plus'
+export default defineComponent({
+ components:{DailogSearchUser},
+ setup() {
+ const formS=ref<FormInstance>()
+ let form = reactive({
+ names: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: "",
+ type: "",
+ resource: '',
+ desc: '',
+ });
+ const typeChang=()=>{
+ console.log('tag',form)
+ }
+ const rules = reactive<FormRules>({
+ resource: [
+ {
+ type: 'array',
+ required: true,
+ message: '用户不能为空',
+ trigger: 'change',
+ },
+ ],
+ desc: [
+ {
+ required: true,
+ message: '用户不能为空',
+ trigger: 'change',
+ },
+ ]})
+ const ShowUser=ref()
+ const openDai =()=>{
+ ShowUser.value.openDailog()
+ }
+ return {
+ form,
+ rules,
+ formS,
+ typeChang,
+ ShowUser,
+ openDai,
+ Search,
+ };
+ },
+});
+</script>
+
+<style scoped>
+.box {
+ margin: 30px 0 100px 0;
+ background-color: #fff;
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+ padding: 20px;
+}
+.el-row {
+ padding: 0 0 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contingencyManagement/releaseOfDrillStart/releaseOfDrillStart.vue b/src/views/contingencyManagement/releaseOfDrillStart/releaseOfDrillStart.vue
new file mode 100644
index 0000000..98218a0
--- /dev/null
+++ b/src/views/contingencyManagement/releaseOfDrillStart/releaseOfDrillStart.vue
@@ -0,0 +1,137 @@
+<template>
+ <div class="system-user-container">
+ <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
+ <div class="box">
+ <el-menu
+ :default-active="activeIndex"
+ class="el-menu-demo"
+ background-color="#ebeef5"
+ text-color="#fff"
+ active-text-color="#fff"
+ mode="horizontal"
+ @select="handleSelect"
+ >
+ <el-menu-item index="1">表单信息</el-menu-item>
+ <el-menu-item index="2">流程图</el-menu-item>
+ </el-menu>
+ <div v-if="activeIndex == 1" class="navType">
+ <formInformationTop v-if="false"></formInformationTop>
+ <formInformationTops></formInformationTops>
+ </div>
+ <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
+ <div class="title2">流程图</div>
+ <div style="width:100%;height:400px"></div>
+ </div>
+ </div>
+ <lowerPlate></lowerPlate>
+ <div class="btns">
+ <el-button type="primary">启动</el-button>
+ </div>
+ </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref,onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import formInformationTop from './component/formInformationTop.vue'
+import formInformationTops from './component/formInformationTops.vue'
+import lowerPlate from './component/lowerPlate.vue'
+export default defineComponent({
+ components:{lowerPlate,formInformationTop,formInformationTops},
+ setup() {
+ const activeIndex = ref('1');
+ const handleSelect = (key: string, keyPath: string[]) => {
+ // console.log(key, keyPath);
+ activeIndex.value = key;
+ };
+ const form = reactive({
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: '',
+ });
+
+ const router=useRouter()
+ const Type=onMounted(()=>{
+ // console.log("xxxxxxx",router)
+ })
+
+ return {
+ activeIndex,
+ handleSelect,
+ form,
+ router,
+ Type
+ };
+ },
+});
+</script>
+<style scoped>
+.title {
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 20px;
+}
+.box{
+ border: 1px solid #dcdfe6;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
+}
+.navType {
+ background-color: #fff;
+ padding: 15px;
+}
+.tiao{
+ width: 100%;
+ height: 1px;
+ background-color: #dcdfe6;
+ margin: 30px 0 ;
+ position: relative;
+}
+.typeS{
+ width: 80px;
+ background-color: #fff;
+ position: absolute;
+ left: 30px;
+ top: -9px;
+ font-size: 14px;
+ text-align: center;
+}
+.logoColor{
+ background-color: #67c23a;
+ color: #fff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ margin-right: 5px;
+}
+.btns{
+ width: 100%;
+ padding:20px 0;
+ background-color: #fff;
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ text-align: center;
+ box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
+
+}
+.title2{
+ padding: 20px 0 20px 10px;
+ width: 100%;
+ border: 1px solid #dcdfe6;
+}
+
+/*弹窗底部边框线*/
+::v-deep .el-dialog__footer{
+ border-top: 1px solid #e8e8e8;
+ border-radius: 0 0 4px 4px;
+}
+/*弹窗顶部边框线*/
+::v-deep .el-dialog__header {
+ border-bottom: 1px solid #e8e8e8;
+ margin-right: 0;
+ border-radius: 4px 4px 0 0;
+}
+</style>
diff --git a/src/views/goalManagement/processForms/component/lowerPlate.vue b/src/views/goalManagement/processForms/component/lowerPlate.vue
index 2f45412..2c8c822 100644
--- a/src/views/goalManagement/processForms/component/lowerPlate.vue
+++ b/src/views/goalManagement/processForms/component/lowerPlate.vue
@@ -70,7 +70,7 @@
resource: '',
desc: '',
});
- const typeChang=()=>{
+ const typeChang=()=>{
console.log('tag',form)
}
const rules = reactive<FormRules>({
--
Gitblit v1.9.2