css

shj

2022-07-22 9c9eeea46b5a6e83470f27c673099941b369f496

css

 src/api/accidentManagementSystem/index.ts

对比新文件
@@ -0,0 +1,44 @@
import request from '/@/utils/request';

export function accidentManagementSystemApi(){
    return {
        // 事故快报一览
        accidentList:(params:object)=>{
         return request({
             url:"/accidentExpress/page/list",
             method:"post",
             data:params
         })
        },
        // 事故快报新增
        accidentAdd:(params:object)=>{
            return request({
                url:"/accidentExpress/add",
                method:"post",
                data:params
            })
        },
        // 事故快报详情
        accidentScarh:(params:number)=>{
            return request({
               url:`/accidentExpress/info/${params}`,
               method:"get",
            })
        },
         // 事故快报修改
        accidentView:(params:object)=>{
            return request({
                url:"/accidentExpress/update",
                method:"post",
                data:params
            })
        },
         // 事故快报删除
         accidentDele:(params:object)=>{
             return request({
                url:`/accidentExpress/batchDelete/${params}`,
                method:"get",
             })
         }
    }
}

 src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue

@@ -1,84 +1,65 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="新建事故快报"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
        <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full">
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
      >
            <el-form ref="ruleFormRef" :disabled="disabled" :model="ruleForm" :rules="rules" size="default" label-width="140px">
        <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 label="事故名称" prop="accidentName">
                            <el-input v-model="ruleForm.accidentName" 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 label="事故部门" placeholder="请选择" prop="accidentDepartmentId">
                            <el-tree-select v-model="ruleForm.accidentDepartmentId" :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 label="发生地点" prop="occurrencePlace">
                            <el-input v-model="ruleForm.occurrencePlace" 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 label="发生时间" prop="occurrenceTime">
                            <el-date-picker v-model="ruleForm.occurrenceTime" value-format="YYYY-MM-DD HH:mm:ss" 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-form-item label="事故原因" prop="accidentCause">
                            <el-select v-model="ruleForm.accidentCause" 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" @change="typeChang">
                <el-radio label="是" />
                <el-radio label="否" />
                        <el-form-item label="是否有伤亡" prop="casualties">
                            <el-radio-group v-model="ruleForm.casualties" @change="typeChang">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="ruleForm.resource" prop="delivery">
<!--              <el-input v-model="ruleForm.delivery" placeholder="">-->
<!--                <template #append> <el-button :icon="Search" @click="openDai" /> </template-->
<!--                ></el-input>-->
              <el-button :icon="Search" @click="openDai" />
                            <el-button v-if="ruleForm.casualties" type="primary" style="margin-left: 20px" :icon="Edit" @click="openDai" round plain />
            </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 label="事故简要经过" prop="accidentBriefProcess">
                            <el-input v-model="ruleForm.accidentBriefProcess" 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 label="事故原因初步分析" prop="accidentCausesPreliminaryAnalysis">
                            <el-input
                                v-model="ruleForm.accidentCausesPreliminaryAnalysis"
                                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 label="应急防范措施" prop="emergencyPrecautions">
                            <el-input v-model="ruleForm.emergencyPrecautions" 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">
@@ -90,8 +71,8 @@
      </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>
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
@@ -103,27 +84,16 @@
</template>

<script lang="ts">
import {
  reactive,
  ref,
  defineComponent
} from 'vue';
import { reactive, ref, defineComponent, defineEmits } from 'vue';

import type {
  UploadUserFile,
  FormInstance,
  // FormRules,
} from 'element-plus'

import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import NumberOfCasualties from '/@/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import CheckTemplate from '/@/components/checkTemplate/index.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'

import type { UploadUserFile, FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen, Edit } from '@element-plus/icons-vue';
import NumberOfCasualties from '/@/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue';
import UserSelections from '/@/components/userSelections/index.vue';
import CheckTemplate from '/@/components/checkTemplate/index.vue';
import RegionsDialog from '/@/components/regionsDialog/index.vue';
import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';
export default defineComponent({
  name: 'openAdd',
  components: {
@@ -132,37 +102,51 @@
    RegionsDialog,
    NumberOfCasualties,
  },
  setup() {
    const isShowDialog = ref(false)
    setup(props, { emit }) {
        const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>()
        const ruleFormRef = ref<FormInstance>();
    //定义表单
    const ruleForm = reactive({
        teamName: '', // 队伍名称
        teamLeader: '', //队伍负责人
        department: [], // 负责人部门
        phone: '', // 负责人手机
        telephone: '', // 固定电话
        const ruleForm = ref({
            emergencyPrecautions: '',
            accidentCausesPreliminaryAnalysis: '',
            accidentBriefProcess: '',
            casualties: '',
            accidentCause: '',
            occurrenceTime: '',
            occurrencePlace: '',
            accidentDepartmentId: '',
            accidentName: '',
            fileList: [
                {
                    fileUrl: 'url',
                    fileName: 'name',
                },
            ],
    });
        const titles = ref();
        const disabled = ref();
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
        const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
            titles.value = title;
            disabled.value = type;
            if (title == '事故块表详情' || title == '修改事故快报') {
                accidentManagementSystemApi()
                    .accidentScarh(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
    };
    //日期选择器
    const value1 = ref('')
        const value1 = ref('');
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])
        const fileList = ref<UploadUserFile[]>([]);
    // 可选择树
    const treeSelect = ref()
        const treeSelect = ref();
    const tree = [
      {
        value: '1',
@@ -232,16 +216,16 @@
          },
        ],
      },
    ]
        ];
    //定义树形下拉框
    const responsibleDepartment = ref()
        const responsibleDepartment = ref();
    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
                        value: '11',
            label: '经营班子',
            children: [],
          },
@@ -254,7 +238,7 @@
          {
            value: '2-1',
            label: '灌装一班',
            children: []
                        children: [],
          },
          {
            value: '2-2',
@@ -279,81 +263,172 @@
          },
        ],
      },
    ]
        ];
    // 必填项提示
    // 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 rules = reactive<FormRules>({
            accidentName: [
                {
                    required: true,
                    message: '事故名称不能为空',
                    trigger: 'change',
                },
            ],
            accidentDepartmentId: [
                {
                    required: true,
                    message: '事故部门不能为空',
                    trigger: 'change',
                },
            ],
            occurrencePlace: [
                {
                    required: true,
                    message: '发生地点不能为空',
                    trigger: 'change',
                },
            ],
            occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'change' }],
            accidentCause: [
                {
                    required: true,
                    message: '事故原因不能为空',
                    trigger: 'change',
                },
            ],
            casualties: [
                {
                    required: true,
                    message: '是否有伤亡不能为空',
                    trigger: 'change',
                },
            ],
            accidentBriefProcess: [
                {
                    required: true,
                    message: '事故简要经过不能为空',
                    trigger: 'change',
                },
            ],
            accidentCausesPreliminaryAnalysis: [
                {
                    required: true,
                    message: '事故原因初步分析不能为空',
                    trigger: 'change',
                },
            ],
            emergencyPrecautions: [
                {
                    required: true,
                    message: '应急防范措施不能为空',
                    trigger: 'change',
                },
            ],
        });
        // 子传父
        // const emit=defineEmits(['myAdd'])
    // 表单提交验证必填项
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建事故快报') {
                if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .accidentAdd(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
        } else {
          console.log('error submit!', fields)
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
        }
      })
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
    }
                });
            } else if (title == '修改事故快报') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .accidentView(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
                formEl.resetFields();
                ruleForm.value = {
                    emergencyPrecautions: '',
                    accidentCausesPreliminaryAnalysis: '',
                    accidentBriefProcess: '',
                    casualties: '',
                    accidentCause: '',
                    occurrenceTime: '',
                    occurrencePlace: '',
                    accidentDepartmentId: '',
                    accidentName: '',
                    fileList: [
                        {
                            fileUrl: 'url',
                            fileName: 'name',
                        },
                    ],
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
    // 是否有伤亡弹窗
    const typeChang=()=>{
      console.log('tag',ruleForm)
    }
            console.log('tag', ruleForm);
        };
    const ShowUser = ref();
    const openDai =()=>{
      ShowUser.value.openDialog()
    }
            ShowUser.value.openDialog();
        };
    // 应急队伍弹窗
    const Shows=ref()
        const Shows = ref();
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
            Shows.value.openDailog();
        };
    // 选择区域弹窗
    const openRef=ref()
        const openRef = ref();
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
            openRef.value.openDailog();
        };
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
@@ -372,13 +447,12 @@
      ShowUser,
      typeChang,
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
            Edit,
      ruleForm,
      value1,
      treeSelect,
@@ -387,7 +461,8 @@
      Shows,
      ruleFormRef,
      submitForm,
      // rules,
            resetForm,
            rules,
      openUser,
      userRef,
      regionsDialog,
@@ -396,6 +471,9 @@
      toggleFullscreen,
      FullScreen,
      full,
            titles,
            disabled,
            emit,
    };
  },
});

 src/views/accidentManagementSystem/accidentExpress/component/openEdit.vue

文件已删除

 src/views/accidentManagementSystem/accidentExpress/index.vue

@@ -1,26 +1,25 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-input size="default" v-model="listQuery.searchParams.accidentName" placeholder="事故名称" style="max-width: 215px" />
                <el-button size="default" type="primary" class="ml10" @click="listApi"> 查询 </el-button>
                <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button>
            </div>
          <div class="button_Line">
            <div class="button_Left">
              <el-button size="default" type="primary"  @click="onOpenAdd">
                <el-icon>
                  <Plus />
                </el-icon>新建
                        <el-icon> <Plus /> </el-icon>新建
              </el-button>
              <el-button size="default" type="warning" plain disabled>
                <el-icon>
                  <Edit />
                </el-icon>修改
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon> <Edit /> </el-icon>修改
              </el-button>
              <el-button size="default" type="danger" plain disabled>
                <el-icon>
                  <Delete />
                </el-icon>删除
                    <el-button size="default" type="danger" @click="onDeleteAll" plain :disabled="danger">
                        <el-icon> <Delete /> </el-icon>删除
              </el-button>
            </div>
            <div class="button_Right">
              <el-button @click="upButton">
                    <!-- <el-button @click="upButton">
                <el-icon>
                  <Upload />
                </el-icon>
@@ -34,121 +33,64 @@
                <el-icon>
                  <Refresh />
                </el-icon>
              </el-button>
                    </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 :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" prop="accidentName" label="事故名称" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="accidentDepartmentId" label="事故部门" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="occurrencePlace" label="发生地点" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="occurrenceTime" label="发生时间" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="accidentCause" label="事故原因" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="createUid" label="创建人" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="gmtModitify" 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 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.id)">
                            <el-icon style="margin-right: 5px"> <EditPen /> </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 size="small" text type="primary" @click="onEdit('详情', scope.row.id)">
                            <el-icon style="margin-right: 5px"> <View /> </el-icon>详情
                </el-button>
                <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                  删除
                        <el-button size="small" text type="primary" @click="onDelete(scope.row.id)">
                            <el-icon style="margin-right: 5px"> <Delete /> </el-icon>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
                    v-if="tableData.length == 0 ? false : true"
                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"
                    :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
    </el-card>
    <OpenAdd ref="addRef" />
    <OpenEdit ref="editRef" />
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
    <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 { reactive, onMounted, ref, defineComponent } from 'vue';
import { ElTable, ElMessage, ElMessageBox } from 'element-plus';
import { Plus, View, 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;
}

import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';
export default defineComponent({
  name: 'index',
  components: {
    OpenEdit,
    EditPen,
    Plus,
    Upload,
@@ -158,107 +100,193 @@
    Delete,
    UpData,
    OpenAdd,
        View,
  },

  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 listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                accidentName: '',
            },
        });
    // 定义表格数据
    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 tableData = ref([]);
        // 列表数据请求
        const listApi = async () => {
            let res = await accidentManagementSystemApi().accidentList(listQuery);
            if (res.data.code == 200) {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                });
      }
    ]

    // 打开修改用户弹窗
    const editRef = ref();
    const onEdit = (row: TableDataRow) => {
      editRef.value.openDialog(row);
        };
        onMounted(() => {
            listApi();
        });
        // 重置
        const submitReset = () => {
            listQuery.searchParams.accidentName = '';
            listApi();
    };
    // 分页
    const pageIndex = ref(4);
    const pageSize = ref(10);
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
            // console.log(`${val} items per page`);
            listQuery.pageSize = val;
            listApi();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
            // console.log(`current page: ${val}`);
            listQuery.pageIndex = val;
            listApi();
    };
        const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr.toString();
            console.log(deletAll.value);
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };

        // 打开新增弹窗
        const addRef = ref();
        const onOpenAdd = () => {
            addRef.value.openDialog('新建事故快报',false);
        };
        // 新增后刷新
        const onMyAdd = (e: boolean) => {
            if (e) {
                listApi();
            } else {
                listApi();
            }
        };
        // 删除
        const onDelete = (data: any) => {
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    accidentManagementSystemApi()
                        .accidentDele(data)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                listApi();
                            }
                        });
                })
                .catch(() => {});
        };
        // 多选删除
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    accidentManagementSystemApi()
                        .accidentDele(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                listApi();
                            }
                        });
                })
                .catch(() => {});
        };
        // 上传
        const upShow = ref();
        const upButton = () => {
            upShow.value.openDialog();
        };

        // 打开修改用户弹窗
        const onEdit = (val: string, row: object) => {
            if (val == '详情') {
                addRef.value.openDialog('事故块表详情',row,true);
            } else {
                addRef.value.openDialog('修改事故快报',row,false);
            }
        };

    return {
      multipleSelection,
      multipleTableRef,
      upButton,
      upShow,
      tableData,
      pageIndex,
      pageSize,
            total,
      handleSizeChange,
      handleCurrentChange,
      onEdit,
      onOpenAdd,
      addRef,
      editRef,
            listQuery,
            listApi,
            submitReset,
            warning,
            danger,
            handleSelectionChange,
            onMyAdd,
            onDelete,
            deletAll,
            onDeleteAll,
    };
  },
});