事故报告除图片外完成

zhaojiale

2022-08-04 2e52dcb4fb8766d7d9c0034b7bba3e1d02e24906

事故报告除图片外完成

 src/api/workInjuryDeclaration/index.ts

@@ -75,8 +75,9 @@
        // 事故报告删除
        deleteAccidentReport: (params:object) => {
            return request({
                url: `/accidentReport/batchDelete/${params}`,
                method: 'get',
                url: `/accidentReport/batchDelete`,
                method: 'post',
                data:params
            });
        },


 src/components/DailogSearchUser/index.vue

@@ -175,8 +175,7 @@
            }
        };
        const submitForm = () => {
            let obj = JSON.parse(JSON.stringify(dynamicTags.value));
            emit('SearchUser', obj[0],types.value);
            emit('SearchUser', dynamicTags.value);
            dialogVisible.value = false;
        };
        return {

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

@@ -11,8 +11,14 @@
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故部门" placeholder="请选择" prop="accidentDepartmentId">
                            <el-tree-select v-model="ruleForm.accidentDepartmentId" :disabled="disabled"
                                            :props="propse" :data="newTreeList" class="w100" placeholder="请选择" />
                            <el-tree-select
                                v-model="ruleForm.accidentDepartmentId"
                                :disabled="disabled"
                                :props="propse"
                                :data="newTreeList"
                                class="w100"
                                placeholder="请选择"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -47,14 +53,18 @@
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                            <el-button v-if="ruleForm.casualties" type="primary"
                                       style="margin-left: 20px" :icon="Edit" @click="openDai" round plain />
                            <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="事故简要经过" prop="accidentBriefProcess">
                            <el-input v-model="ruleForm.accidentBriefProcess" :disabled="disabled"
                                      type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input>
                            <el-input
                                v-model="ruleForm.accidentBriefProcess"
                                :disabled="disabled"
                                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">
@@ -70,14 +80,19 @@
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="应急防范措施" prop="emergencyPrecautions">
                            <el-input v-model="ruleForm.emergencyPrecautions" :disabled="disabled"
                                      type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>
                            <el-input
                                v-model="ruleForm.emergencyPrecautions"
                                :disabled="disabled"
                                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="事故照片" prop="fileList">
                            <!--<el-input v-model="ruleForm.fileList" :disabled="disabled"-->
                                      <!--type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>-->
                            <!--type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>-->
                            <uploaderImg :fileList="fileListDemo"></uploaderImg>
                        </el-form-item>
                    </el-col>
@@ -98,7 +113,7 @@
</template>

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

import type { UploadUserFile, FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
@@ -117,7 +132,7 @@
        UserSelections,
        RegionsDialog,
        NumberOfCasualties,
        uploaderImg
        uploaderImg,
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);
@@ -135,7 +150,7 @@
            accidentDepartmentId: '',
            accidentName: '',
            fileList: [],
            id:''
            id: '',
        });
        const titles = ref();
        const disabled = ref();
@@ -167,50 +182,49 @@
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
            },
        ])
        ]);
        // 可选择树
        const treeSelect = ref();

        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = [
        ];
        const data = [];
        //el-tree-select回显
        const propse = {
            label: 'depName',
            children: 'children'
            children: 'children',
        };
        const newTreeList = []
        const newTreeList = [];
        //得到部门树
        const department = async() => {
        const department = async () => {
            await goalManagementApi()
                    .getTreedepartment()
                    .then((res) => {
                        if (res.data.code == 200) {
                            data.value = res.data.data;
                            getTreeList(res.data.data,newTreeList)
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                        getTreeList(res.data.data, newTreeList);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        // 递归树状数据且修改字段名
        const getTreeList = (treeList,newTreeList) => {
            treeList.map(c=>{
                let tempData={
                    depName:c.depName,
                    value:c.depId,
                    children:[]
        const getTreeList = (treeList, newTreeList) => {
            treeList.map((c) => {
                let tempData = {
                    depName: c.depName,
                    value: c.depId,
                    children: [],
                };
                if (c.children && c.children.length > 0) {
                    tempData.children = [];
                    getTreeList(c.children, tempData.children);
                }
                if(c.children && c.children.length>0){
                    tempData.children=[]
                    getTreeList(c.children,tempData.children)
                }
                newTreeList.push(tempData)
            })
        }
                newTreeList.push(tempData);
            });
        };
        onMounted(() => {
            department()
            department();
        });
        // 必填项提示
        const rules = reactive<FormRules>({
@@ -281,7 +295,7 @@
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        ruleForm.value.id = null
                        ruleForm.value.id = null;
                        accidentManagementSystemApi()
                            .accidentAdd(ruleForm.value)
                            .then((res) => {
@@ -344,7 +358,7 @@
                formEl.resetFields();
            }
            ruleForm.value = {
                accidentExpressId:'',
                accidentExpressId: '',
                emergencyPrecautions: '',
                accidentCausesPreliminaryAnalysis: '',
                accidentBriefProcess: '',
@@ -364,16 +378,16 @@
        };
        const closeDialog = (formEl: FormInstance | undefined) => {
            formEl.resetFields();
            console.log(ruleForm)
            isShowDialog.value = false
        }
            console.log(ruleForm);
            isShowDialog.value = false;
        };
        // 是否有伤亡弹窗
        const typeChang = () => {
            console.log('tag', ruleForm);
        };
        const ShowUser = ref();
        const openDai = () => {
            ShowUser.value.openDialog(ruleForm.value.id,disabled.value);
            ShowUser.value.openDialog(ruleForm.value.id, disabled.value);
        };
        // 应急队伍弹窗
        const Shows = ref();
@@ -434,7 +448,7 @@
            getTreeList,
            newTreeList,
            closeDialog,
            fileListDemo
            fileListDemo,
        };
    },
});

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

@@ -1,700 +1,625 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="800px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          :rules="rules"
          label-width="130px"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故快报" prop="accidentExpressId">
              <el-input
                  v-model="ruleForm.accidentExpressId"
                  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="事故部门" 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="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="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="accidentType">
              <el-select v-model="ruleForm.accidentType" class="w100" placeholder="请选择">
                <el-option label="人员伤亡事故" value="人员伤亡事故"></el-option>
                <el-option label="火灾爆炸事故" value="火灾爆炸事故"></el-option>
                <el-option label="危险品泄露事故" value="危险品泄露事故"></el-option>
                <el-option label="设备事故" value="设备事故"></el-option>
                <el-option label="工艺事故" value="工艺事故"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故等级" prop="accidentGrade">
              <el-select v-model="ruleForm.accidentGrade" class="w100" placeholder="请选择">
                <el-option label="特别重大" value="人员伤亡事故"></el-option>
                <el-option label="重大" value="重大"></el-option>
                <el-option label="较大" value="较大"></el-option>
                <el-option label="一般" value="一般"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="经济损失" prop="economicLoss">
              <el-input v-model="ruleForm.economicLoss" 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="minorInjuryNum">
              <el-input v-model="ruleForm.minorInjuryNum" 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="seriousInjuryNum">
              <el-input v-model="ruleForm.seriousInjuryNum" 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="deathNum">
              <el-input v-model="ruleForm.deathNum" 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="accidentCause">
              <el-input v-model="ruleForm.accidentCause" 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="reportDeadline">
              <el-date-picker
                  v-model="ruleForm.reportDeadline"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故级别" prop="accidentLevel">
              <el-select v-model="ruleForm.accidentLevel" class="w100" placeholder="请选择">
                <el-option label="特大事故" value="特大事故"></el-option>
                <el-option label="重大事故" value="重大事故"></el-option>
                <el-option label="较大事故" value="较大事故"></el-option>
                <el-option label="一般事故" value="一般事故"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="事故延期申请" prop="accidentDelayApply">
              <el-input v-model="ruleForm.accidentDelayApply" 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="comprehensiveAnalysisDirect">
              <el-input v-model="ruleForm.comprehensiveAnalysisDirect" 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="comprehensiveAnalysisIndirect">
              <el-input v-model="ruleForm.comprehensiveAnalysisIndirect" 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="rectificationMeasures">
              <el-input v-model="ruleForm.rectificationMeasures" 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="accidentHandling">
              <el-input v-model="ruleForm.accidentHandling" 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="fillInUserUid">
              <el-input
                  v-model="ruleForm.fillInUserUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="填写日期" prop="fillInTime">
              <el-date-picker
                  v-model="ruleForm.fillInTime"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </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.relevantPersonnelRecords" 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.otherMaterials" type="textarea" placeholder="请填写其他材料" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="800px" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules" label-width="140px" :disabled="disabled">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故快报" prop="accidentName">
                            <el-input v-model="ruleForm.accidentName" 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="事故部门" placeholder="请选择" prop="accidentDepartmentId">
                            <!--<el-input v-model="ruleForm.accidentDepartmentName" class="input-with-select" />-->
                            <el-tree-select v-model="ruleForm.accidentDepartmentId" :data="newTreeList" :props="propse" 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="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="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="accidentType">
                            <el-select v-model="ruleForm.accidentType" class="w100" placeholder="请选择">
                                <el-option label="人员伤亡事故" value="人员伤亡事故"></el-option>
                                <el-option label="火灾爆炸事故" value="火灾爆炸事故"></el-option>
                                <el-option label="危险品泄露事故" value="危险品泄露事故"></el-option>
                                <el-option label="设备事故" value="设备事故"></el-option>
                                <el-option label="工艺事故" value="工艺事故"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故等级" prop="accidentGrade">
                            <el-select v-model="ruleForm.accidentGrade" class="w100" placeholder="请选择">
                                <el-option label="特别重大" value="人员伤亡事故"></el-option>
                                <el-option label="重大" value="重大"></el-option>
                                <el-option label="较大" value="较大"></el-option>
                                <el-option label="一般" value="一般"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="经济损失" prop="economicLoss">
                            <el-input v-model="ruleForm.economicLoss" 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="minorInjuryNum">
                            <el-input v-model="ruleForm.minorInjuryNum" 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="seriousInjuryNum">
                            <el-input v-model="ruleForm.seriousInjuryNum" 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="deathNum">
                            <el-input v-model="ruleForm.deathNum" 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="accidentCause">
                            <el-input v-model="ruleForm.accidentCause" 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="reportDeadline">
                            <el-date-picker
                                v-model="ruleForm.reportDeadline"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故级别" prop="accidentLevel">
                            <el-select v-model="ruleForm.accidentLevel" class="w100" placeholder="请选择">
                                <el-option label="特大事故" value="特大事故"></el-option>
                                <el-option label="重大事故" value="重大事故"></el-option>
                                <el-option label="较大事故" value="较大事故"></el-option>
                                <el-option label="一般事故" value="一般事故"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="事故延期申请" prop="accidentDelayApply">
                            <el-input v-model="ruleForm.accidentDelayApply" 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="comprehensiveAnalysisDirect">
                            <el-input
                                v-model="ruleForm.comprehensiveAnalysisDirect"
                                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="comprehensiveAnalysisIndirect">
                            <el-input
                                v-model="ruleForm.comprehensiveAnalysisIndirect"
                                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="rectificationMeasures">
                            <el-input v-model="ruleForm.rectificationMeasures" 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="accidentHandling">
                            <el-input v-model="ruleForm.accidentHandling" 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="fillInUserName">
                            <el-input v-model="ruleForm.fillInUserName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="填写日期" prop="fillInTime">
                            <el-date-picker
                                v-model="ruleForm.fillInTime"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </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="相关人员笔录" prop="relevantPersonnelRecords">
                            <el-input v-model="ruleForm.relevantPersonnelRecords" 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="事故分析会议纪要" prop="fileList">
                            <uploaderImg :fileList="fileList"></uploaderImg>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="其他材料" prop="otherMaterials">
                            <el-input v-model="ruleForm.otherMaterials" 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="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <AccidentName ref="Shows"/>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
    <RegionsDialog ref="openRef"/>
  </div>
            </template>
        </el-dialog>
        <AccidentName @selectItem="onSelectItem" ref="Shows" />
        <DailogSearchUser @SearchUser="onUser" ref="userRef"  />
        <RegionsDialog ref="openRef" />
    </div>
</template>

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

import type {
  UploadUserFile,
  FormInstance,
  FormRules,
} from 'element-plus'
import type { UploadUserFile, FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'
import {emergencySuppliesApi} from "/@/api/emergencyResources";
import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration";
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue';
import RegionsDialog from '/@/components/regionsDialog/index.vue';
import uploaderImg from '/@/components/uploaderImg/index.vue';
import { emergencySuppliesApi } from '/@/api/emergencyResources';
import { accidentManagementSystemApi } from '/@/api/workInjuryDeclaration';
import { goalManagementApi } from '/@/api/goalManagement';

export default defineComponent({
  name: 'openAdd',
  components: {
    AccidentName,
    DailogSearchUser,
    RegionsDialog,
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    name: 'openAdd',
    components: {
        AccidentName,
        DailogSearchUser,
        RegionsDialog,
        uploaderImg
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      accidentExpressId: '',
      accidentType: '',
      accidentGrade: '',
      economicLoss: '',
      minorInjuryNum: '',
      seriousInjuryNum: '',
      deathNum: '',
      accidentCause: '',
      reportDeadline: '',
      accidentLevel: '',
      accidentDelayApply: '',
      comprehensiveAnalysisDirect: '',
      comprehensiveAnalysisIndirect: '',
      rectificationMeasures: '',
      accidentHandling: '',
      fillInUserUid: '',
      fillInTime: '',
      relevantPersonnelRecords: '',
      otherMaterials: '',
      fileList: [
        {
          fileUrl: '',
          fileName: '',
        }
      ],
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看事故报告' || title == '修改事故报告') {
        accidentManagementSystemApi()
            .seeAccidentReport(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    // 关闭弹窗
    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: '11',
            label: 'Level two 1-1',
            children: [
              {
                value: '111',
                label: 'Level three 1-1-1',
              },
            ],
          },
        ],
      },
      {
        value: '2',
        label: 'Level one 2',
        children: [
          {
            value: '21',
            label: 'Level two 2-1',
            children: [
              {
                value: '211',
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            value: '22',
            label: 'Level two 2-2',
            children: [
              {
                value: '221',
                label: 'Level three 2-2-1',
              },
            ],
          },
        ],
      },
      {
        value: '3',
        label: 'Level one 3',
        children: [
          {
            value: '31',
            label: 'Level two 3-1',
            children: [
              {
                value: '311',
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            value: '32',
            label: 'Level two 3-2',
            children: [
              {
                value: '321',
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
    ]
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '11',
            label: '经营班子',
            children: [],
          },
        ],
      },
      {
        value: '2',
        label: '生产运行部',
        children: [
          {
            value: '21',
            label: '灌装一班',
            children: []
          },
          {
            value: '22',
            label: '工艺四班',
            children: [],
          },
        ],
      },
      {
        value: '3',
        label: '设备部',
        children: [
          {
            value: '31',
            label: '仪表班',
            children: [],
          },
          {
            value: '32',
            label: '机修班',
            children: [],
          },
        ],
      },
    ]
    // 必填项提示
    const rules = reactive<FormRules>({
      accidentDepartmentId: [
        {
          required: true,
          message: '事故部门不能为空',
          trigger: 'change',
        },
      ],
      occurrenceTime: [
        {
          required: true,
          message: '发生时间不能为空',
          trigger: 'change',
        },
      ],
      accidentType: [
        {
          required: true,
          message: '事故类别不能为空',
          trigger: 'change',
        },
      ],
      accidentGrade: [
        {
          required: true,
          message: '事故等级不能为空',
          trigger: 'change',
        },
      ],
      economicLoss: [
        {
          required: true,
          message: '经济损失不能为空',
          trigger: 'change',
        },
      ],
      reportDeadline: [
        {
          required: true,
          message: '要求报告完成期限不能为空',
          trigger: 'change',
        },
      ],
      accidentLevel: [
        {
          required: true,
          message: '事故级别不能为空',
          trigger: 'change',
        },
      ],
      comprehensiveAnalysisDirect: [
        {
          required: true,
          message: '原因综合分析(直接分析)不能为空',
          trigger: 'blur',
        },
      ],
      comprehensiveAnalysisIndirect: [
        {
          required: true,
          message: '原因综合分析(间接分析)不能为空',
          trigger: 'blur',
        },
      ],
      rectificationMeasures: [
        {
          required: true,
          message: '整改措施不能为空',
          trigger: 'blur',
        },
      ],
      accidentHandling: [
        {
          required: true,
          message: '事故处理不能为空',
          trigger: 'change',
        },
      ],
      fillInUserUid: [
        {
          required: true,
          message: '填写人不能为空',
          trigger: 'change',
        },
      ],
      fillInTime: [
        {
          type: 'date',
          required: true,
          message: '填写日期不能为空',
          trigger: 'change',
        },
      ],
    })
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建事故报告') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            accidentManagementSystemApi()
                .addAccidentReport(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      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);
          }
        });
      }
      else if (title == '修改事故报告') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            accidentManagementSystemApi()
                .editAccidentReport(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 = {
          accidentExpressId: '',
          accidentType: '',
          accidentGrade: '',
          economicLoss: '',
          minorInjuryNum: '',
          seriousInjuryNum: '',
          deathNum: '',
          accidentCause: '',
          reportDeadline: '',
          accidentLevel: '',
          accidentDelayApply: '',
          comprehensiveAnalysisDirect: '',
          comprehensiveAnalysisIndirect: '',
          rectificationMeasures: '',
          accidentHandling: '',
          fillInUserUid: '',
          fillInTime: '',
          relevantPersonnelRecords: '',
          otherMaterials: '',
          fileList: [
            {
              fileUrl: '',
              fileName: '',
            }
          ],
        }
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    const handleChange = (val: number) => {
      console.log(val)
    };
    // 应急队伍弹窗
    const Shows=ref()
    const daiInpt=()=>{
      Shows.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.fillInUserUid=e.id
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      daiInpt,
      Shows,
      ruleFormRef,
      submitForm,
      rules,
      openUser,
      userRef,
      regionsDialog,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
      onUser,
      resetForm,
      titles,
      disabled,
      emit,
      handleChange
    };
  },
        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            accidentExpressId:'',
            accidentExpressName:'',
            accidentDepartmentId:'',
            accidentDepartmentName:'',
            occurrencePlace:'',
            occurrenceTime:'',



            accidentType: '',
            accidentGrade: '',
            economicLoss: '',
            minorInjuryNum: '',
            seriousInjuryNum: '',
            deathNum: '',
            accidentCause: '',
            reportDeadline: '',
            accidentLevel: '',
            accidentDelayApply: '',
            comprehensiveAnalysisDirect: '',
            comprehensiveAnalysisIndirect: '',
            rectificationMeasures: '',
            accidentHandling: '',
            fillInUserUid: '',
            fillInUserName:'',
            fillInTime: '',
            relevantPersonnelRecords: '',
            otherMaterials: '',
            fileList: [],
        });
        const titles = ref();
        const disabled = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '查看事故报告' || title == '修改事故报告') {
                accidentManagementSystemApi()
                    .seeAccidentReport(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        // 关闭弹窗
        const closeDialog = (formEl: FormInstance | undefined) => {
            formEl.resetFields();
            console.log(ruleForm)
            isShowDialog.value = false;
        };
        // 取消
        const onCancel = (formEl: FormInstance | undefined) => {
            closeDialog(formEl);
        };
        //日期选择器
        const value1 = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        // 可选择树
        const treeSelect = ref();
        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = [
        ];
        // 必填项提示
        const rules = reactive<FormRules>({
            accidentDepartmentId: [
                {
                    required: true,
                    message: '事故部门不能为空',
                    trigger: 'change',
                },
            ],
            occurrenceTime: [
                {
                    required: true,
                    message: '发生时间不能为空',
                    trigger: 'blur',
                },
            ],
            accidentType: [
                {
                    required: true,
                    message: '事故类别不能为空',
                    trigger: 'change',
                },
            ],
            accidentGrade: [
                {
                    required: true,
                    message: '事故等级不能为空',
                    trigger: 'change',
                },
            ],
            economicLoss: [
                {
                    required: true,
                    message: '经济损失不能为空',
                    trigger: 'change',
                },
            ],
            reportDeadline: [
                {
                    required: true,
                    message: '要求报告完成期限不能为空',
                    trigger: 'blur',
                },
            ],
            accidentLevel: [
                {
                    required: true,
                    message: '事故级别不能为空',
                    trigger: 'change',
                },
            ],
            comprehensiveAnalysisDirect: [
                {
                    required: true,
                    message: '原因综合分析(直接分析)不能为空',
                    trigger: 'blur',
                },
            ],
            comprehensiveAnalysisIndirect: [
                {
                    required: true,
                    message: '原因综合分析(间接分析)不能为空',
                    trigger: 'blur',
                },
            ],
            rectificationMeasures: [
                {
                    required: true,
                    message: '整改措施不能为空',
                    trigger: 'blur',
                },
            ],
            accidentHandling: [
                {
                    required: true,
                    message: '事故处理不能为空',
                    trigger: 'change',
                },
            ],
            fillInUserUid: [
                {
                    required: true,
                    message: '填写人不能为空',
                    trigger: 'change',
                },
            ],
            fillInTime: [
                {
                    type: 'date',
                    required: true,
                    message: '填写日期不能为空',
                    trigger: 'blur',
                },
            ],
        });
        //事故快报回填
        const onSelectItem = (item: any) => {
            console.log('item', item[0]);
            ruleForm.value.accidentExpressId = item[0].id
            ruleForm.value.accidentName = item[0].accidentName
            ruleForm.value.accidentDepartmentId = item[0].accidentDepartmentId
            ruleForm.value.accidentDepartmentName = item[0].deptName
            ruleForm.value.occurrencePlace = item[0].occurrencePlace
            ruleForm.value.occurrenceTime = item[0].occurrenceTime
        };
        // 表单提交验证必填项
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建事故报告') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .addAccidentReport(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        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);
                    }
                });
            } else if (title == '修改事故报告') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        //TODO 上传组件待定
                        ruleForm.value.fileList = []
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .editAccidentReport(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 = {
                    accidentExpressId:'',
                    accidentExpressName:'',
                    accidentDepartmentId:'',
                    accidentDepartmentName:'',
                    occurrencePlace:'',
                    occurrenceTime:'',



                    accidentType: '',
                    accidentGrade: '',
                    economicLoss: '',
                    minorInjuryNum: '',
                    seriousInjuryNum: '',
                    deathNum: '',
                    accidentCause: '',
                    reportDeadline: '',
                    accidentLevel: '',
                    accidentDelayApply: '',
                    comprehensiveAnalysisDirect: '',
                    comprehensiveAnalysisIndirect: '',
                    rectificationMeasures: '',
                    accidentHandling: '',
                    fillInUserUid: '',
                    fillInUserName:'',
                    fillInTime: '',
                    relevantPersonnelRecords: '',
                    otherMaterials: '',
                    fileList: [],
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        const handleChange = (val: number) => {
            console.log(val);
        };
        // 应急队伍弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
        };
        // 选择区域弹窗
        const openRef = ref();
        const regionsDialog = () => {
            openRef.value.openDailog();
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDailog();
        };
        const onUser = (userItem: any) => {
            ruleForm.value.fillInUserUid = userItem[0].uid;
            ruleForm.value.fillInUserName = userItem[0].realName;
        };
        //el-tree-select回显
        const propse = {
            label: 'depName',
            children: 'children',
        };
        const newTreeList = [];
        //得到部门树
        const department = async () => {
            await goalManagementApi()
                    .getTreedepartment()
                    .then((res) => {
                        if (res.data.code == 200) {
                            data.value = res.data.data;
                            getTreeList(res.data.data, newTreeList);
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        // 递归树状数据且修改字段名
        const getTreeList = (treeList, newTreeList) => {
            treeList.map((c) => {
                let tempData = {
                    depName: c.depName,
                    value: c.depId,
                    children: [],
                };
                if (c.children && c.children.length > 0) {
                    tempData.children = [];
                    getTreeList(c.children, tempData.children);
                }
                newTreeList.push(tempData);
            });
        };
        onMounted(() => {
            department();
        });
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            closeDialog,
            isShowDialog,
            onCancel,
            fileList,
            responsibleDepartment,
            data,
            Search,
            ruleForm,
            value1,
            treeSelect,
            daiInpt,
            Shows,
            ruleFormRef,
            submitForm,
            rules,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            onUser,
            resetForm,
            titles,
            disabled,
            emit,
            handleChange,
            onSelectItem,
            newTreeList,
            department,
            getTreeList,
            propse
        };
    },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
    font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select{
  width: 100%;
.el-select {
    width: 100%;
}
::v-deep .el-form-item--default .el-form-item__label {
  height: 100%;
  text-align: right;
    height: 100%;
    text-align: right;
}
</style>
</style>

 src/views/accidentManagementSystem/accidentReport/index.vue

@@ -49,8 +49,8 @@
                type="selection"
                width="55"
            />
            <el-table-column prop="accidentExpressId" label="事故名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentDepartmentId" label="事故部门" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentName" label="事故名称" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="deptName" label="事故部门" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentType" label="事故类别" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="accidentGrade" label="事故等级" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="occurrencePlace" label="发生地点" show-overflow-tooltip sortable></el-table-column>
@@ -165,11 +165,11 @@
    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();
        let arr = [];
        for (let i = 0; i < valId.length; i++) {
            arr.push(valId[i].id);
        }
        deletAll.value = arr;
      // console.log(deletAll.value);
      if (val.length == 1) {
        warning.value = false;
@@ -214,6 +214,7 @@
    // }
    // 删除用户
    const onRowDel = (data: any) => {
        var deleteList = [data]
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
@@ -221,7 +222,7 @@
      })
          .then(() => {
            accidentManagementSystemApi()
                .deleteAccidentReport(data)
                .deleteAccidentReport(deleteList)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({

 src/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue

@@ -1,244 +1,240 @@
<template>
  <el-dialog
      v-model="dialogVisible"
      title="选择事故名称"
      width="900px"
      draggable
      :fullscreen="full"
  >
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <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-table
                :data="tableData"
                style="width: 100%"
                ref="multipleTableRef"
        >
          <el-table-column align="center">
            <template #default="scope">
              <el-radio-group v-model="radio1">
                <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="accidentExpressId" label="事故名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="accidentDepartmentId" label="事故部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="accidentType" label="事故类别" show-overflow-tooltip></el-table-column>
          <el-table-column prop="accidentGrade" label="事故等级" show-overflow-tooltip></el-table-column>
          <el-table-column prop="occurrencePlace" label="发生地点" show-overflow-tooltip></el-table-column>
          <el-table-column prop="occurrenceTime" label="发生时间" show-overflow-tooltip></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"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="40"
                  @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>
    <div>
        <el-dialog v-model="dialogVisible" title="选择事故名称" width="900px" draggable :fullscreen="full">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <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="listQuery.searchParams.id" placeholder="id"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <el-form-item>
                                <el-input size="default" v-model="listQuery.searchParams.accidentName" placeholder="事故名称" style="min-width: 215px" />
                            </el-form-item>
                            <!--<el-form-item>-->
                            <!--<el-input size="default" v-model="listQuery.searchParams.deptName" placeholder="事故部门"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item>-->
                            <!--<el-input size="default" v-model="listQuery.searchParams.occurrencePlace" placeholder="发生地点"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item>-->
                            <!--<el-input size="default" v-model="listQuery.searchParams.occurrenceTime" placeholder="发生时间"  style="min-width: 215px;"/>-->
                            <!--</el-form-item>-->
                            <el-form-item>
                                <el-button size="default" type="primary" @click="listApi">查询</el-button>
                                <el-button size="default" @click="submitReset">重置</el-button>
                                <el-button size="default" :icon="Delete" @click="handleClose">清除选择</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-table :data="tableData" style="width: 100%" ref="multipleTableRef">
                        <el-table-column align="center">
                            <template #default="scope">
                                <el-radio-group v-model="radio1">
                                    <el-radio :label="scope.row.id" size="large" @click="checkedItem(scope.row)">{{ null }}</el-radio>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <!--<el-table-column prop="id" label="id" show-overflow-tooltip></el-table-column>-->
                        <el-table-column prop="accidentName" label="事故名称" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="deptName" label="事故部门" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="occurrencePlace" label="发生地点" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="occurrenceTime" label="发生时间" show-overflow-tooltip></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"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            @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.accidentName }}
                    </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="submitForm" size="default">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
import {
  defineComponent,
  reactive,
  ref,
  onMounted
} from 'vue';
import {
  Delete,
  FullScreen
} from '@element-plus/icons-vue';
import {
  // ElTable,
  ElMessage,
    // ElTable,
    ElMessage,
} from 'element-plus';
import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration";
import { accidentManagementSystemApi } from '/@/api/workInjuryDeclaration';
export default defineComponent({
  setup() {
    const dialogVisible = ref<boolean>(false);
    const openDailog = () => {
      dialogVisible.value = true;
    };
    // 搜索条件
    const ruleForm = reactive({
      pass: '',
    });
    // 定义表格数据
    const tableData = ref([]);
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        name: '',
      },
    });
    //单选按钮
    const radio1 = ref('');
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
    };
    //查询list数据
    const listApi = async () => {
      let res = await accidentManagementSystemApi().getAccidentReportList(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.error(res.data.msg);
      }
    };
    // 页面加载时
    onMounted(() => {
      listApi();
    });
    // 右方点击添加后显示标签
    const dynamicTags = ref(['应急救援组', '工艺抢险组', '后勤保障组']);
    const handleClose = (tag: string) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      dialogVisible,
      openDailog,
      ruleForm,
      tableData,
      handleSizeChange,
      handleCurrentChange,
      dynamicTags,
      handleClose,
      Delete,
      toggleFullscreen,
      FullScreen,
      full,
      pageIndex,
      pageSize,
      total,
      listApi,
      listQuery,
      radio1
    };
  },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
            listApi();
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
        });
        // 定义表格数据
        const tableData = ref([]);
        // 列表参数
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                accidentName: '',
            },
        });
        //单选按钮
        const radio1 = ref('');
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const handleSizeChange = (val: number) => {
            listQuery.pageSize = val;
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
            listQuery.pageIndex = val;
        };
        const checkedItem = (row: object) => {
            dynamicTags.value = [row];
        };
        // 重置
        const submitReset = () => {
            listQuery.searchParams = {};
            listApi();
        };
        const submitForm = () => {
            emit('selectItem', dynamicTags.value);
            dialogVisible.value = false;
        };
        //查询list数据
        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.error(res.data.msg);
            }
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref([]);
        const handleClose = () => {
            dynamicTags.value = [];
            radio1.value = '';
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
            toggleFullscreen,
            FullScreen,
            full,
            pageIndex,
            pageSize,
            total,
            listApi,
            listQuery,
            radio1,
            checkedItem,
            submitReset,
            submitForm,
        };
    },
});
</script>
<style scoped>
.el-form--inline .el-form-item{
  margin-bottom: 18px!important;
  margin-right: 12px;
.el-form--inline .el-form-item {
    margin-bottom: 18px !important;
    margin-right: 12px;
}
/*分页*/
.pages{
  margin-top: 15px;
.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;
    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;
    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;
    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 button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

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

@@ -1,552 +1,529 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        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"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="申报人姓名" prop="declareUserName">
              <el-input v-model="ruleForm.declareUserName" 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.declareUserGender">
                <el-radio :label="false">男</el-radio>
                <el-radio :label="true">女</el-radio>
              </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.declareDepartmentId"
                  :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="accidentExpressId">
              <el-input
                  v-model="ruleForm.accidentExpressId"
                  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="occurrenceTime">
              <el-date-picker
                  v-model="ruleForm.occurrenceTime"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="工伤类型" prop="workInjuryType">
              <el-select v-model="ruleForm.workInjuryType" class="w100" placeholder="请选择">
                <el-option label="轻微伤" value="轻微伤"></el-option>
                <el-option label="轻伤" value="轻伤"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="申报日期">
              <el-date-picker
                  v-model="ruleForm.declareDate"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="损失工时" prop="lostTime">
              <el-input v-model="ruleForm.lostTime" 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="visitHospital">
              <el-input v-model="ruleForm.visitHospital" 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="visitResult">
              <el-input v-model="ruleForm.visitResult" 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="ruleForm.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="mattersNeedingAttention">
              <el-input v-model="ruleForm.mattersNeedingAttention" 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.completeMaterials">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="769px" 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" :disabled="disabled">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="申报人姓名" prop="declareUserName">
                            <el-input v-model="ruleForm.declareUserName" 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.declareUserGender">
                                <el-radio :label="false">男</el-radio>
                                <el-radio :label="true">女</el-radio>
                            </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.declareDepartmentId" :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="accidentExpressId">
                            <el-input v-model="ruleForm.accidentExpressId" 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="occurrenceTime">
                            <el-date-picker
                                v-model="ruleForm.occurrenceTime"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="工伤类型" prop="workInjuryType">
                            <el-select v-model="ruleForm.workInjuryType" class="w100" placeholder="请选择">
                                <el-option label="轻微伤" value="轻微伤"></el-option>
                                <el-option label="轻伤" value="轻伤"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="申报日期">
                            <el-date-picker
                                v-model="ruleForm.declareDate"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="损失工时" prop="lostTime">
                            <el-input v-model="ruleForm.lostTime" 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="visitHospital">
                            <el-input v-model="ruleForm.visitHospital" 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="visitResult">
                            <el-input v-model="ruleForm.visitResult" 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="ruleForm.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="mattersNeedingAttention">
                            <el-input v-model="ruleForm.mattersNeedingAttention" 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.completeMaterials">
                                <el-radio :label="false">否</el-radio>
                                <el-radio :label="true">是</el-radio>
                            </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.remark" type="textarea" placeholder="请填写备注" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="备注">
                            <el-input v-model="ruleForm.remark" 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="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <AccidentName ref="showRef"/>
    <userSelections ref="userRef"/>
    <RegionsDialog ref="openRef"/>
  </div>
            </template>
        </el-dialog>
        <AccidentName @selectItem="onSelectItem" ref="showRef" />
        <userSelections ref="userRef" />
        <RegionsDialog ref="openRef" />
    </div>
</template>

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

import type {
  UploadUserFile,
  FormInstance,
} from 'element-plus'
import type { UploadUserFile, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} 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'
import {emergencySuppliesApi} from "/@/api/emergencyResources";
import {accidentManagementSystemApi} from "/@/api/workInjuryDeclaration";
import { Search, FullScreen } 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';
import { emergencySuppliesApi } from '/@/api/emergencyResources';
import { accidentManagementSystemApi } from '/@/api/workInjuryDeclaration';

export default defineComponent({
  name: 'openAdd',
  components: {
    AccidentName,
    UserSelections,
    RegionsDialog,
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    name: 'openAdd',
    components: {
        AccidentName,
        UserSelections,
        RegionsDialog,
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      declareUserName: '',
      declareUserGender: '',
      declareDepartmentId: '',
      accidentExpressId: '',
      workInjuryType: '',
      declareDate: '',
      lostTime: '',
      visitHospital: '',
      visitResult: '',
      mattersNeedingAttention: '',
      completeMaterials: '',
      remark: '',
      fileList: [
        {
          fileName: '',
          fileUrl: '',
        }
      ],
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看工伤申报' || title == '修改工伤申报') {
        accidentManagementSystemApi()
            .seeAccidentManagementSystem(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])
    // 可选择树
    const treeSelect = ref()
    const tree = [
      {
        value: '1',
        label: 'Level one 1',
        children: [
          {
            value: '11',
            label: 'Level two 1-1',
            children: [
              {
                value: '111',
                label: 'Level three 1-1-1',
              },
            ],
          },
        ],
      },
      {
        value: '2',
        label: 'Level one 2',
        children: [
          {
            value: '21',
            label: 'Level two 2-1',
            children: [
              {
                value: '211',
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            value: '22',
            label: 'Level two 2-2',
            children: [
              {
                value: '221',
                label: 'Level three 2-2-1',
              },
            ],
          },
        ],
      },
      {
        value: '3',
        label: 'Level one 3',
        children: [
          {
            value: '31',
            label: 'Level two 3-1',
            children: [
              {
                value: '311',
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            value: '32',
            label: 'Level two 3-2',
            children: [
              {
                value: '321',
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
    ]
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '11',
            label: '经营班子',
            children: [],
          },
        ],
      },
      {
        value: '2',
        label: '生产运行部',
        children: [
          {
            value: '21',
            label: '灌装一班',
            children: []
          },
          {
            value: '22',
            label: '工艺四班',
            children: [],
          },
        ],
      },
      {
        value: '3',
        label: '设备部',
        children: [
          {
            value: '31',
            label: '仪表班',
            children: [],
          },
          {
            value: '32',
            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 ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            declareUserName: '',
            declareUserGender: '',
            declareDepartmentId: '',
            accidentExpressId: '',
            workInjuryType: '',
            declareDate: '',
            lostTime: '',
            visitHospital: '',
            visitResult: '',
            mattersNeedingAttention: '',
            completeMaterials: '',
            remark: '',
            fileList: [
                {
                    fileName: '',
                    fileUrl: '',
                },
            ],
        });
        const titles = ref();
        const disabled = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '查看工伤申报' || title == '修改工伤申报') {
                accidentManagementSystemApi()
                    .seeAccidentManagementSystem(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        //日期选择器
        const value1 = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        // 可选择树
        const treeSelect = ref();
        const tree = [
            {
                value: '1',
                label: 'Level one 1',
                children: [
                    {
                        value: '11',
                        label: 'Level two 1-1',
                        children: [
                            {
                                value: '111',
                                label: 'Level three 1-1-1',
                            },
                        ],
                    },
                ],
            },
            {
                value: '2',
                label: 'Level one 2',
                children: [
                    {
                        value: '21',
                        label: 'Level two 2-1',
                        children: [
                            {
                                value: '211',
                                label: 'Level three 2-1-1',
                            },
                        ],
                    },
                    {
                        value: '22',
                        label: 'Level two 2-2',
                        children: [
                            {
                                value: '221',
                                label: 'Level three 2-2-1',
                            },
                        ],
                    },
                ],
            },
            {
                value: '3',
                label: 'Level one 3',
                children: [
                    {
                        value: '31',
                        label: 'Level two 3-1',
                        children: [
                            {
                                value: '311',
                                label: 'Level three 3-1-1',
                            },
                        ],
                    },
                    {
                        value: '32',
                        label: 'Level two 3-2',
                        children: [
                            {
                                value: '321',
                                label: 'Level three 3-2-1',
                            },
                        ],
                    },
                ],
            },
        ];
        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = [
            {
                value: '1',
                label: '广汇能源综合物流发展有限责任公司',
                children: [
                    {
                        value: '11',
                        label: '经营班子',
                        children: [],
                    },
                ],
            },
            {
                value: '2',
                label: '生产运行部',
                children: [
                    {
                        value: '21',
                        label: '灌装一班',
                        children: [],
                    },
                    {
                        value: '22',
                        label: '工艺四班',
                        children: [],
                    },
                ],
            },
            {
                value: '3',
                label: '设备部',
                children: [
                    {
                        value: '31',
                        label: '仪表班',
                        children: [],
                    },
                    {
                        value: '32',
                        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 (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建工伤申报') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            accidentManagementSystemApi()
                .workAdd(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      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);
          }
        });
      }
      else if (title == '修改工伤申报') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            accidentManagementSystemApi()
                .workView(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 = {
          declareUserName: '',
          declareUserGender: '',
          declareDepartmentId: '',
          accidentExpressId: '',
          workInjuryType: '',
          declareDate: '',
          lostTime: '',
          visitHospital: '',
          visitResult: '',
          mattersNeedingAttention: '',
          completeMaterials: '',
          remark: '',
          fileList: [
            {
              fileName: '',
              fileUrl: '',
            }
          ],
        }
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      daiInpt,
      openDialog,
      isShowDialog,
      fileList,
      responsibleDepartment,
      data,
      Search,
      ruleForm,
      value1,
      treeSelect,
      tree,
      showRef,
      ruleFormRef,
      submitForm,
      // rules,
      openUser,
      userRef,
      regionsDialog,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
    };
  },
        // 事故名称弹窗
        const showRef = ref();
        const daiInpt = () => {
            showRef.value.openDailog();
        };
        //事故快报回填
        const onSelectItem = (item: any) => {
            alert(1);
            console.log('item', item);
        };
        // 表单提交验证必填项
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建工伤申报') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .workAdd(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        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);
                    }
                });
            } else if (title == '修改工伤申报') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        accidentManagementSystemApi()
                            .workView(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 = {
                    declareUserName: '',
                    declareUserGender: '',
                    declareDepartmentId: '',
                    accidentExpressId: '',
                    workInjuryType: '',
                    declareDate: '',
                    lostTime: '',
                    visitHospital: '',
                    visitResult: '',
                    mattersNeedingAttention: '',
                    completeMaterials: '',
                    remark: '',
                    fileList: [
                        {
                            fileName: '',
                            fileUrl: '',
                        },
                    ],
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        // 选择区域弹窗
        const openRef = ref();
        const regionsDialog = () => {
            openRef.value.openDailog();
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDialog();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            daiInpt,
            openDialog,
            isShowDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            ruleForm,
            value1,
            treeSelect,
            tree,
            showRef,
            ruleFormRef,
            submitForm,
            // rules,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            resetForm,
            titles,
            disabled,
            emit,
            onSelectItem,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
    font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select{
  width: 100%;
.el-select {
    width: 100%;
}
</style>
</style>