应急预案弹窗

13937891274

2022-07-07 dc1a337bae00425ce6b1f68a96d3a7418d4a0926

应急预案弹窗

 src/components/DailogSearch/DailogSearch.vue

@@ -1,7 +1,7 @@
<template>
    <el-dialog v-model="dialogVisible" title="选择安全目标指标" width="50%" draggable>
        <el-row>
            <el-col :span="18">
            <el-col :span="17">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
            <el-row>
                <el-col :span="6">
@@ -43,7 +43,7 @@
            @current-change="handleCurrentChange"
        />
        </el-col>
        <el-col :span="6">
        <el-col :span="7">
            <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>

 src/components/userSelections/index.vue

@@ -18,7 +18,7 @@
            :filter-node-method="filterNode"
          />
        </el-aside>
        <el-container>
        <el-container style="margin-right: 15px;min-width:560px;">
          <el-header style="font-size: 12px">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item>
@@ -40,11 +40,19 @@
                  :data="tableData"
                  :header-cell-style="{background:'#f6f7fa',color:'#909399',fontWeight:400}"
                  ref="multipleTableRef"
                  highlight-current-row
                  @row-click="rowClick"
                  @selection-change="handleCurrentChange"
              >
                <el-table-column
                  type="selection"
                  width="50"
                >
                </el-table-column>
                <el-table-column prop="date" label="登录名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="name" label="用户名" width="100" show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属机构" width="130"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="130" show-overflow-tooltip sortable/>
                <el-table-column prop="address" label="所属机构" width="110"  show-overflow-tooltip sortable />
                <el-table-column prop="address" label="所属部门" width="100" show-overflow-tooltip sortable/>
                <el-table-column  label="状态"
                  prop="tag"
                  width="100"
@@ -66,8 +74,12 @@
            </el-scrollbar>
          </el-main>
        </el-container>
        <div>
          <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
        </div>
      </el-container>

      <template #footer>
                <span class="dialog-footer">
                    <el-button size="default" type="primary"  @click="onCancel">确定</el-button>
@@ -95,6 +107,11 @@
  id: number
  label: string
  children?: Tree[]
}
interface User {
  date: string
  name: string
  address: string
}
export default defineComponent({
  name: 'userSelections',
@@ -196,6 +213,25 @@
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
    // const currentRow = ref()

    // 当某一行被点击时会触发该事件
    // const handleRowClick = (row: any, column: any, event: Event) => {
    //   emit('row-click', row, column, event)
    // }
    // const singleTableRef = ref<InstanceType<typeof ElTable>>()
    // const setCurrent = (row?: User) => {
    //   singleTableRef.value!.setCurrentRow(row)
    // }
    // const handleCurrentChange = (val: User | undefined) => {
    //   currentRow.value = val
    // }

    // 右方点击添加后显示标签
    const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    };
    return {
      openDialog,
      closeDialog,
@@ -207,7 +243,12 @@
      tableData,
      formInline,
      onSubmit,
      multipleTableRef
      // currentRow,
      // setCurrent,
      multipleTableRef,
      handleClose,
      dynamicTags,
      // handleCurrentChange,
    };
  },
});
@@ -277,4 +318,14 @@
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//单选框圆形
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox {
  display:none
}
::v-deep .el-table-column--selection .cell{
  text-align: center;
}
::v-deep .el-checkbox__input .el-checkbox__inner{
  border-radius: 50%;
}
</style>

 src/views/contingencyManagement/contingency/component/openAdd.vue

@@ -36,7 +36,7 @@
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
@@ -126,6 +126,7 @@
      </template>
    </el-dialog>
        <AddEmergencyPersonnel ref="addRef" />
        <UserSelections ref="userRef"/>
  </div>
</template>

@@ -146,6 +147,7 @@
  Search
} from '@element-plus/icons-vue'
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import UserSelections from "/@/components/userSelections/index.vue"
// 定义表格数据类型
interface User {
  personnelName: string
@@ -156,7 +158,8 @@
export default defineComponent({
  name: 'openAdd',
  components: {
    AddEmergencyPersonnel
    AddEmergencyPersonnel,
    UserSelections,
  },
  setup() {
    const isShowDialog = ref(false)
@@ -234,6 +237,11 @@
        ],
      },
    ]
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    //定义tabs切换
    const activeName = ref('first')

@@ -324,6 +332,8 @@
      submitForm,
      rules,
      addRef,
      userRef,
      openUser,
      onAddEmergencyPersonnel,
    };
  },

 src/views/contingencyManagement/contingency/component/openEdit.vue

@@ -140,7 +140,7 @@
import {
  Search
} from '@element-plus/icons-vue'
import userSelections from "/@/components/userSelections/index.vue"
import UserSelections from "/@/components/userSelections/index.vue"
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import EditEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue";
// 定义表格数据类型
@@ -194,7 +194,7 @@
export default defineComponent({
  name: 'openEdit',
  components: {
    userSelections,
    UserSelections,
    AddEmergencyPersonnel,
    EditEmergencyPersonnel
  },

 src/views/contingencyManagement/panManagement/component/DailogSearch.vue

对比新文件
@@ -0,0 +1,115 @@
<template>
    <el-dialog v-model="dialogVisible" title="选择检查模板" width="900px" draggable>
        <el-row>
            <el-col :span="18">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
      <el-form-item>
        <el-input size="default" v-model="ruleForm.pass" placeholder="id"  style="max-width: 215px;"/>
      </el-form-item>
      <el-form-item>
        <el-input size="default" v-model="ruleForm.checkPass" placeholder="队伍名称"  style="max-width: 215px;padding: 0 12px;"/>
      </el-form-item>
      <el-form-item>
        <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
        <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
        </el-form>
        <el-button size="default" :icon="Delete">清除选择</el-button>
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
      <el-table-column type="selection" width="55" />
            <el-table-column align="center" prop="date" label="id" />
            <el-table-column align="center" prop="name" label="队伍名称"/>
        </el-table>
        <el-pagination
            style="padding:20px 0;"
            v-model:currentPage="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        </el-col>
        <el-col :span="6">
            <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
        </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = [
            {
                date: '6421cbc6cbb5493eabf9b27e83372d78',
                name: '应急救援组',
            },
            {
                date: '6421cbc6cbb5493eabf9b27e83372d78',
                name: '工艺抢险组',
            },
            {
                date: '6421cbc6cbb5493eabf9b27e83372d78',
                name: '后勤保障组',
            },
            {
                date: '6421cbc6cbb5493eabf9b27e83372d78',
                name: '应急救援组',
            },
        ];
        const pageSize4 = ref(100);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['应急救援组', '工艺抢险组', '后勤保障组']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/contingencyManagement/panManagement/component/openAdd.vue

@@ -58,14 +58,14 @@
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="编写人" prop="telephone">
            <el-form-item label="编写人" prop="telephone" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
@@ -92,7 +92,7 @@
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急队伍" prop="telephone">
            <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
              <el-input
                  v-model="ruleForm.teamLeader"
                  placeholder="请选择"
@@ -130,7 +130,7 @@
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                  <el-button :icon="Search" @click="regionsDialog"/>
                </template>
              </el-input>
            </el-form-item>
@@ -144,6 +144,9 @@
                </span>
      </template>
    </el-dialog>
    <DailogSearch ref="Shows"/>
    <userSelections ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
</template>

@@ -162,11 +165,16 @@
import {
  Search
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import DailogSearch from '/@/views/contingencyManagement/panManagement/component/DailogSearch.vue'
import RegionsDialog from '/@/views/contingencyManagement/panManagement/component/regionsDialog.vue'

export default defineComponent({
  name: 'openAdd',
  components: {

    DailogSearch,
    UserSelections,
    RegionsDialog,
  },
  setup() {
    const isShowDialog = ref(false)
@@ -372,6 +380,21 @@
        }
      })
    }
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    return {
      openDialog,
      closeDialog,
@@ -385,9 +408,15 @@
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      regionsDialog,
      openRef,
    };
  },
});

 src/views/contingencyManagement/panManagement/component/regionsDialog.vue

对比新文件
@@ -0,0 +1,109 @@
<template>
    <el-dialog v-model="dialogVisible" title="选择区域" width="900px" draggable>
        <el-row>
            <el-col :span="18">
        <el-form :inline="true" ref="ruleFormRef" :model="ruleForm" status-icon>
            <el-form-item>
                <el-input size="default" v-model="ruleForm.checkPass" placeholder="风险区域名称" style="max-width: 215px;" />
            </el-form-item>
            <el-form-item>
                <el-button size="default" type="primary" @click="submitForm(ruleFormRef)" style="padding-right: 12px;">查询</el-button>
                <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
      <el-button size="default" :icon="Delete" style="margin-left: 12px;">清除选择</el-button>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin-top:20px;">
      <el-table-column type="selection" width="55" />
            <el-table-column align="center" prop="name" label="风险区域名称"/>
        </el-table>
        <el-pagination
            style="padding:20px 0;"
            v-model:currentPage="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        </el-col>
        <el-col :span="6" style="padding-left: 15px;">
            <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
        </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
        // 搜索条件
        const ruleForm = reactive({
            checkPass: '',
        });
        // 表格
        const tableData = [
            {
                name: '1#LNG储罐单元',
            },
            {
                name: 'LNG装车区',
            },
            {
                name: '丙烷储罐区',
            },
            {
                name: '4#LNG储罐单元',
            },
        ];
        const pageSize4 = ref(100);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['应急救援组', '工艺抢险组', '后勤保障组']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
.el-form--inline .el-form-item{
  margin: 0;
}
</style>