From d6297852e1ec4b93d6b2923721a1cf63de3ecf66 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: Fri, 15 Jul 2022 17:21:43 +0800
Subject: [PATCH] 应急预案启动记录

---
 src/views/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue     |  385 +++++++
 src/views/accidentManagementSystem/workInjuryDeclaration/index.vue                  |  364 ++++++
 src/views/accidentManagementSystem/accidentReport/component/openAdd.vue             |  457 ++++++++
 src/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue |  162 ++
 src/views/accidentManagementSystem/accidentExpress/index.vue                        |  314 +++++
 src/views/accidentManagementSystem/accidentExpress/component/openEdit.vue           |  385 +++++++
 src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue            |  385 +++++++
 src/views/accidentManagementSystem/accidentReport/index.vue                         |  353 ++++++
 src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue      |  436 +++++++
 9 files changed, 3,241 insertions(+), 0 deletions(-)

diff --git a/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue
new file mode 100644
index 0000000..0b8a6b2
--- /dev/null
+++ b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue
@@ -0,0 +1,385 @@
+<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="事故部门"  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="teamLeader">
+              <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="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="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="是否有伤亡">
+              <el-radio-group v-model="ruleForm.resource">
+                <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="事故简要经过">
+              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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.describe" type="textarea" placeholder="请填写事故原因初步分析" maxlength="150"></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.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></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 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 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/accidentManagementSystem/accidentExpress/component/openEdit.vue b/src/views/accidentManagementSystem/accidentExpress/component/openEdit.vue
new file mode 100644
index 0000000..4ea7017
--- /dev/null
+++ b/src/views/accidentManagementSystem/accidentExpress/component/openEdit.vue
@@ -0,0 +1,385 @@
+<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="事故部门"  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="teamLeader">
+              <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="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="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="是否有伤亡">
+              <el-radio-group v-model="ruleForm.resource">
+                <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="事故简要经过">
+              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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.describe" type="textarea" placeholder="请填写事故原因初步分析" maxlength="150"></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.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></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 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 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: 'openEdit',
+  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/accidentManagementSystem/accidentExpress/index.vue b/src/views/accidentManagementSystem/accidentExpress/index.vue
new file mode 100644
index 0000000..b2bc025
--- /dev/null
+++ b/src/views/accidentManagementSystem/accidentExpress/index.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="system-user-container">
+    <el-card shadow="hover">
+          <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 />
+                </el-icon>修改
+              </el-button>
+              <el-button size="default" type="danger" plain disabled>
+                <el-icon>
+                  <Delete />
+                </el-icon>删除
+              </el-button>
+            </div>
+            <div class="button_Right">
+              <el-button @click="upButton">
+                <el-icon>
+                  <Upload />
+                </el-icon>
+              </el-button>
+              <el-button>
+                <el-icon>
+                  <Download />
+                </el-icon>
+              </el-button>
+              <el-button>
+                <el-icon>
+                  <Refresh />
+                </el-icon>
+              </el-button>
+            </div>
+          </div>
+          <el-table
+              :data="tableData"
+              style="width: 100%"
+              ref="multipleTableRef"
+          >
+            <el-table-column
+                type="selection"
+                width="55"
+            />
+            <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 size="small" text disabled>
+                  <el-icon style="margin-right: 5px;">
+                    <Upload />
+                  </el-icon>上报
+                </el-button>
+                <el-button size="small" text type="primary" @click="onEdit(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-button>
+              </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-card>
+    <OpenAdd ref="addRef" />
+    <OpenEdit ref="editRef" />
+    <upData ref="upShow"></upData>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  // toRefs,
+  // reactive,
+  // onMounted,
+  ref,
+  defineComponent
+} from 'vue';
+import {
+  ElTable,
+} from 'element-plus';
+import {
+  Plus,
+  Download,
+  Refresh,
+  EditPen,
+  Edit,
+  Delete,
+  Upload,
+} from '@element-plus/icons-vue'
+import OpenAdd from '/@/views/accidentManagementSystem/accidentExpress/component/openAdd.vue';
+import OpenEdit from '/@/views/accidentManagementSystem/accidentExpress/component/openEdit.vue';
+import UpData from '/@/views/contingencyManagement/panManagement/component/upData.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: 'index',
+  components: {
+    OpenEdit,
+    EditPen,
+    Plus,
+    Upload,
+    Download,
+    Refresh,
+    Edit,
+    Delete,
+    UpData,
+    OpenAdd,
+  },
+  setup() {
+    // 打开新增弹窗
+    const addRef = ref();
+    const onOpenAdd = () => {
+      addRef.value.openDialog();
+    };
+    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+    const multipleSelection = ref<User[]>([])
+
+    // 上传
+    const upShow=ref()
+    const upButton=()=>{
+      upShow.value.openDialog()
+    }
+    // 定义表格数据
+    const tableData: User[] = [
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      }
+    ]
+
+    // 打开修改用户弹窗
+    const editRef = ref();
+    const onEdit = (row: TableDataRow) => {
+      editRef.value.openDialog(row);
+    };
+    // 分页
+    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 {
+      multipleSelection,
+      multipleTableRef,
+      upButton,
+      upShow,
+      tableData,
+      pageIndex,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange,
+      onEdit,
+      onOpenAdd,
+      addRef,
+      editRef,
+    };
+  },
+});
+</script>
+<style scoped lang="scss">
+.table_Box{
+  padding: 20px;
+  background-color: #fff;
+}
+.tableForm{
+  margin-top: 10px;
+}
+/*按钮行*/
+.button_Line{
+  display: flex;
+  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/accidentManagementSystem/accidentReport/component/openAdd.vue b/src/views/accidentManagementSystem/accidentReport/component/openAdd.vue
new file mode 100644
index 0000000..31c305f
--- /dev/null
+++ b/src/views/accidentManagementSystem/accidentReport/component/openAdd.vue
@@ -0,0 +1,457 @@
+<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="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="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="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="重伤人数" 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="事故原因" 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="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="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="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-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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="事故照片">
+              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></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.describe" type="textarea" placeholder="请填写相关人员笔录" maxlength="150"></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="其他材料">
+              <el-input v-model="ruleForm.describe" 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 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%;
+}
+::v-deep .el-form-item--default .el-form-item__label {
+  height: 100%;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/accidentManagementSystem/accidentReport/index.vue b/src/views/accidentManagementSystem/accidentReport/index.vue
new file mode 100644
index 0000000..bf064a1
--- /dev/null
+++ b/src/views/accidentManagementSystem/accidentReport/index.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="system-user-container">
+    <el-card shadow="hover">
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="处理中" name="first">
+          <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 />
+                </el-icon>修改
+              </el-button>
+              <el-button size="default" type="danger" plain disabled>
+                <el-icon>
+                  <Delete />
+                </el-icon>删除
+              </el-button>
+            </div>
+            <div class="button_Right">
+              <el-button @click="upButton">
+                <el-icon>
+                  <Upload />
+                </el-icon>
+              </el-button>
+              <el-button>
+                <el-icon>
+                  <Download />
+                </el-icon>
+              </el-button>
+              <el-button>
+                <el-icon>
+                  <Refresh />
+                </el-icon>
+              </el-button>
+            </div>
+          </div>
+          <el-table
+              :data="tableData"
+              style="width: 100%"
+              ref="multipleTableRef"
+          >
+            <el-table-column
+                type="selection"
+                width="55"
+            />
+            <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 label="操作" width="260" align="center" fixed="right">
+              <template #default="scope">
+                <el-button size="small" text disabled>
+                  <el-icon style="margin-right: 5px;">
+                    <EditPen />
+                  </el-icon>评价
+                </el-button>
+                <el-button size="small" text type="primary" @click="onApprovalProgress(scope.row)">
+                  审批进度
+                </el-button>
+                <el-button size="small" text type="primary" @click="onApprovalProgress(scope.row)">
+                  <el-icon style="margin-right: 5px;">
+                    <EditPen />
+                  </el-icon>查看评价
+                </el-button>
+                <el-button size="small" text type="primary" @click="onRectificationDialog(scope.row)">
+                  <el-icon style="margin-right: 5px;">
+                    <EditPen />
+                  </el-icon>整改
+                </el-button>
+                <el-button size="small" text disabled @click="onOpenEdit(scope.row)">
+                  查看整改
+                </el-button>
+              </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-tab-pane>
+        <el-tab-pane label="已处理" name="second">Config</el-tab-pane>
+      </el-tabs>
+    </el-card>
+    <OpenAdd ref="addRef" />
+    <ApprovalProgress ref="approvalRef" />
+    <RectificationDialog ref="rectificationRef" />
+    <OpenEdit ref="editRef" />
+    <upData ref="upShow"></upData>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  // toRefs,
+  // reactive,
+  // onMounted,
+  ref,
+  defineComponent
+} from 'vue';
+import {
+  ElTable,
+  TabsPaneContext,
+} from 'element-plus';
+import {
+  Plus,
+  Upload,
+  Download,
+  Refresh,
+  EditPen,
+  Delete,
+  Edit,
+} from '@element-plus/icons-vue'
+import OpenAdd from '/@/views/accidentManagementSystem/accidentReport/component/openAdd.vue'
+import ApprovalProgress from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue';
+import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue';
+import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
+import RectificationDialog from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.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: {
+    OpenEdit,
+    EditPen,
+    Plus,
+    Upload,
+    Download,
+    Refresh,
+    UpData,
+    Edit,
+    Delete,
+    OpenAdd,
+    ApprovalProgress,
+    RectificationDialog
+  },
+  setup() {
+    // 打开新建用户弹窗
+    const addRef = ref();
+    const onOpenAdd = () => {
+      addRef.value.openDialog();
+    };
+    const activeName = ref('first')
+
+    const handleClick = (tab: TabsPaneContext, event: Event) => {
+      console.log(tab, event)
+    }
+    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+    const multipleSelection = ref<User[]>([])
+
+    // 上传
+    const upShow=ref()
+    const upButton=()=>{
+      upShow.value.openDialog()
+    }
+    // 定义表格数据
+    const tableData: User[] = [
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      }
+    ]
+
+    // 打开修改用户弹窗
+    const editRef = ref();
+    const onOpenEdit = (row: TableDataRow) => {
+      editRef.value.openDialog(row);
+    };
+    // 审批进度弹窗
+    const approvalRef = ref();
+    const onApprovalProgress = () => {
+      approvalRef.value.openDialog();
+    };
+    // 整改弹窗
+    const rectificationRef = ref();
+    const onRectificationDialog = () => {
+      rectificationRef.value.openDialog();
+    };
+    // 分页
+    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 {
+      onOpenAdd,
+      addRef,
+      activeName,
+      handleClick,
+      multipleSelection,
+      multipleTableRef,
+      upButton,
+      upShow,
+      tableData,
+      onOpenEdit,  //编辑
+      pageIndex,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange,
+      onApprovalProgress,
+      approvalRef,
+      onRectificationDialog,
+      rectificationRef,
+    };
+  },
+});
+</script>
+<style scoped lang="scss">
+.table_Box{
+  padding: 20px;
+  background-color: #fff;
+}
+.tableForm{
+  margin-top: 10px;
+}
+/*按钮行*/
+.button_Line{
+  display: flex;
+  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/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue b/src/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue
new file mode 100644
index 0000000..724e8ef
--- /dev/null
+++ b/src/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue
@@ -0,0 +1,162 @@
+<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="id"  style="min-width: 215px;"/>
+            </el-form-item>
+            <el-form-item>
+              <el-input size="default" v-model="ruleForm.pass" placeholder="事故名称"  style="min-width: 215px;"/>
+            </el-form-item>
+            <el-form-item>
+              <el-input size="default" v-model="ruleForm.pass" placeholder="事故部门"  style="min-width: 215px;"/>
+            </el-form-item>
+            <el-form-item>
+              <el-input size="default" v-model="ruleForm.pass" placeholder="发生地点"  style="min-width: 215px;"/>
+            </el-form-item>
+            <el-form-item>
+              <el-input size="default" v-model="ruleForm.pass" placeholder="发生时间"  style="min-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-column align="center" prop="date" label="事故部门" />
+          <el-table-column align="center" prop="name" 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">
+        <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: 18px!important;
+  margin-right: 12px;
+}
+/*分页*/
+.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/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue b/src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue
new file mode 100644
index 0000000..36238d3
--- /dev/null
+++ b/src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue
@@ -0,0 +1,436 @@
+<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="申报人性别">
+              <el-radio-group v-model="ruleForm.resource">
+                <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="申报人部门"  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="teamLeader">
+              <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
+                  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="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="申报日期">
+              <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="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="就诊结果" 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-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="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-radio-group v-model="ruleForm.resource">
+                <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="备注">
+              <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 size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+				</span>
+      </template>
+    </el-dialog>
+    <AccidentName ref="showRef"/>
+    <userSelections ref="userRef"/>
+    <RegionsDialog ref="openRef"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  reactive,
+  ref,
+  defineComponent
+} from 'vue';
+
+import type {
+  UploadUserFile,
+  FormInstance,
+  UploadProps,
+  ElMessage,
+} from 'element-plus'
+
+import {
+  Search
+} from '@element-plus/icons-vue'
+import UserSelections from "/@/components/userSelections/index.vue"
+import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue'
+import RegionsDialog from '/@/components/regionsDialog/index.vue'
+
+export default defineComponent({
+  name: 'openAdd',
+  components: {
+    AccidentName,
+    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 showRef=ref()
+    const daiInpt=()=>{
+      showRef.value.openDailog()
+    }
+    // 表单提交验证必填项
+    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 openRef=ref()
+    const regionsDialog=()=>{
+      openRef.value.openDailog()
+    }
+    // 打开用户选择弹窗
+    const userRef = ref();
+    const openUser = () => {
+      userRef.value.openDialog();
+    };
+    return {
+      daiInpt,
+      openDialog,
+      closeDialog,
+      isShowDialog,
+      onCancel,
+      fileList,
+      responsibleDepartment,
+      data,
+      Search,
+      ruleForm,
+      value1,
+      treeSelect,
+      tree,
+      showRef,
+      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/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue b/src/views/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue
new file mode 100644
index 0000000..4ea7017
--- /dev/null
+++ b/src/views/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue
@@ -0,0 +1,385 @@
+<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="事故部门"  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="teamLeader">
+              <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="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="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="是否有伤亡">
+              <el-radio-group v-model="ruleForm.resource">
+                <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="事故简要经过">
+              <el-input v-model="ruleForm.describe" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></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.describe" type="textarea" placeholder="请填写事故原因初步分析" maxlength="150"></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.describe" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></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 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 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: 'openEdit',
+  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/accidentManagementSystem/workInjuryDeclaration/index.vue b/src/views/accidentManagementSystem/workInjuryDeclaration/index.vue
new file mode 100644
index 0000000..b6e7d4b
--- /dev/null
+++ b/src/views/accidentManagementSystem/workInjuryDeclaration/index.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="system-user-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <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 />
+            </el-icon>修改
+          </el-button>
+          <el-button size="default" type="danger" plain disabled>
+            <el-icon>
+              <Delete />
+            </el-icon>删除
+          </el-button>
+        </div>
+        <div class="button_Right">
+          <el-button @click="upButton">
+            <el-icon>
+              <Upload />
+            </el-icon>
+          </el-button>
+          <el-button>
+            <el-icon>
+              <Download />
+            </el-icon>
+          </el-button>
+          <el-button>
+            <el-icon>
+              <Refresh />
+            </el-icon>
+          </el-button>
+        </div>
+      </div>
+      <el-table
+          :data="tableData"
+          style="width: 100%"
+          ref="multipleTableRef"
+      >
+        <el-table-column
+            type="selection"
+            width="55"
+        />
+        <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 label="操作" width="260" align="center" fixed="right">
+          <template #default="scope">
+            <el-button size="small" text disabled>
+              <el-icon style="margin-right: 5px;">
+                <Upload />
+              </el-icon>上报
+            </el-button>
+            <el-button size="small" text type="primary" @click="onEdit(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-button>
+          </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-card>
+    <AccidentName ref="showRef"/>
+    <OpenAdd ref="addRef" />
+    <OpenEdit ref="editRef" />
+    <upData ref="upShow"></upData>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  // toRefs,
+  reactive,
+  // onMounted,
+  ref,
+  defineComponent
+} from 'vue';
+import {
+  ElTable,
+  FormInstance,
+} from 'element-plus';
+import {
+  Plus,
+  Download,
+  Refresh,
+  EditPen,
+  Edit,
+  Delete,
+  Search,
+  Upload,
+} from '@element-plus/icons-vue'
+import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue'
+import OpenAdd from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue';
+import OpenEdit from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue';
+import UpData from '/@/views/contingencyManagement/panManagement/component/upData.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: 'index',
+  components: {
+    OpenEdit,
+    EditPen,
+    Plus,
+    Upload,
+    Download,
+    Refresh,
+    Edit,
+    Delete,
+    UpData,
+    OpenAdd,
+    AccidentName,
+  },
+  setup() {
+    const ruleFormRef = ref<FormInstance>()
+    //定义表单
+    const ruleForm = reactive({
+      teamName: '', // 队伍名称
+      teamLeader: '', //队伍负责人
+      department: [], // 负责人部门
+      phone: '', // 负责人手机
+      telephone: '', // 固定电话
+    });
+    // 事故名称弹窗
+    const showRef=ref()
+    const daiInpt=()=>{
+      showRef.value.openDailog()
+    }
+    // 打开新增弹窗
+    const addRef = ref();
+    const onOpenAdd = () => {
+      addRef.value.openDialog();
+    };
+    const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+    const multipleSelection = ref<User[]>([])
+
+    // 上传
+    const upShow=ref()
+    const upButton=()=>{
+      upShow.value.openDialog()
+    }
+    // 定义表格数据
+    const tableData: User[] = [
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      },
+      {
+        teamName: '应急救援组',
+        teamLevel: '公司',
+        teamDescription: '实施抢险抢险的应急方案和措施实施 ；',
+        teamPhone: '051383830321',
+        phone: '13603812900',
+        describe: '(1)实施抢险抢险的应急方案和措施实施 ；\n' +
+            '(2)负责现场被困人员、受伤人员抢救工作；\n' +
+            '(3)在事故有可能扩大进行抢险抢修或救援时，高度注意避免意外伤害；\n' +
+            '(4)抢险抢修或救援结束后，对结果进行复查和评估。',
+        responsibleDepartment: '仪表班',
+        teamLeader: '王磊',
+      }
+    ]
+
+    // 打开修改用户弹窗
+    const editRef = ref();
+    const onEdit = (row: TableDataRow) => {
+      editRef.value.openDialog(row);
+    };
+    // 分页
+    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 {
+      daiInpt,
+      showRef,
+      multipleSelection,
+      multipleTableRef,
+      upButton,
+      upShow,
+      tableData,
+      pageIndex,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange,
+      onEdit,
+      onOpenAdd,
+      addRef,
+      editRef,
+      ruleFormRef,
+      ruleForm,
+      Search,
+    };
+  },
+});
+</script>
+<style scoped lang="scss">
+.table_Box{
+  padding: 20px;
+  background-color: #fff;
+}
+.tableForm{
+  margin-top: 10px;
+}
+/*按钮行*/
+.button_Line{
+  display: flex;
+  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

--
Gitblit v1.9.2