应急预案管理数据对接

13937891274

2022-08-05 2dcd6731b0ba9359dac02931211e53e81e56be68

应急预案管理数据对接

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

@@ -48,12 +48,7 @@
</template>

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

import type { FormInstance } from 'element-plus';
import {
@@ -129,9 +124,10 @@
                            type: 'error',
                        });
                        emit('myAdd', true);
            openDialog()
                        openDialog();
                    }
                }).catch(() => {});
                })
                .catch(() => {});
        };
        // 分页
        const pageIndex = ref();

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

对比新文件
@@ -0,0 +1,430 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false">
            <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="name">
                            <el-input v-model="ruleForm.name" placeholder="请填写队伍名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="适用部门" prop="responsibleDepartment">
                            <el-tree-select
                                v-model="ruleForm.treeSelect"
                                :data="data"
                                multiple
                                :render-after-expand="true"
                                :props="propse"
                                show-checkbox
                                clearable
                                check-strictly
                            />
                            <el-divider />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预案类型" prop="type">
                            <el-select v-model="ruleForm.type" 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="associatedDanger">
                            <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择">
                                <el-option label="是" :value="false"></el-option>
                                <el-option label="否" :value="true"></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="level">
                            <el-select v-model="ruleForm.level" class="w100" placeholder="请选择">
                                <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="authorId">
                            <el-input v-model="ruleForm.authorUid" 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="authorDeptId">
                            <el-tree-select
                                v-model="ruleForm.authorDeptId"
                                check-strictly
                                :data="data"
                                class="w100"
                                :props="propse"
                                clearable
                                :render-after-expand="false"
                                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="releaseDate">
                            <el-date-picker
                                v-model="ruleForm.releaseDate"
                                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="emergencyTeam">
                            <el-input v-model="ruleForm.emergencyTeam" 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="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="相关附件">
                            <el-upload
                                v-model:file-list="fileList"
                                class="upload-demo"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :on-change="handleChange"
                            >
                                <el-button type="primary">点击上传</el-button>
                                <template #tip>
                                    <div class="el-upload__tip">添加相关附件</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
                    <!--            <el-form-item label="区域名称" prop="areaName">-->
                    <!--              <el-input-->
                    <!--                  v-model="ruleForm.areaName"-->
                    <!--                  placeholder="请选择"-->
                    <!--                  class="input-with-select"-->
                    <!--              >-->
                    <!--                <template #append>-->
                    <!--                  <el-button :icon="Search" @click="regionsDialog"/>-->
                    <!--                </template>-->
                    <!--              </el-input>-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批结果" prop="authorId">
                            <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="不通过" />
                                <el-radio label="通过" />
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="审批意见" prop="authorId">
                            <el-input v-model="ruleForm.name" type="textarea" placeholder="请填写审批意见"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="是否完成" prop="authorId" @change="typeChang">
                            <el-radio-group v-model="ruleForm.complete">
                                <el-radio :label="false">是</el-radio>
                                <el-radio :label="true">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="ruleForm.complete" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批人" prop="authorId">
                            <el-input v-model="ruleForm.authorUid" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </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>
                </span>
            </template>
        </el-dialog>
        <CheckTemplate ref="Shows" />
        <DailogSearchUser ref="userRef" @SearchUser="onUser" />
        <RegionsDialog ref="openRef" />
    </div>
</template>

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

import type { UploadUserFile, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import CheckTemplate from '/@/components/checkTemplate/index.vue';
import RegionsDialog from '/@/components/regionsDialog/index.vue';
import { emergencyPlanApi } from '/@/api/emergencyPlan';
import { goalManagementApi } from '/@/api/goalManagement';

export default defineComponent({
    name: 'openAdd',
    components: {
        CheckTemplate,
        DailogSearchUser,
        RegionsDialog,
    },
    setup(prop, { emit }) {
        const isShowDialog = ref(false);
        const ruleFormRef = ref<FormInstance>();
        const ruleForm = ref({
            name: '', // 预案名称
            type: '', //预案类型
            associatedDanger: '', // 危险源关联
            level: '', // 预案级别
            authorUid: '', // 编写人
            authorDeptId: '', // 编写部门
            releaseDate: '', // 发布实施日期
            fileList: [
                {
                    fileUrl: 'url',
                    fileName: 'name',
                },
            ],
            emergencyTeam: '', //应急队伍
            areaList: [], //区域列表
            teamList: [],
            deptList: [],
            abolishStatus: false,
        });
        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 == '修改应急预案管理') {
                emergencyPlanApi()
                    .seeEmergencyTeam(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        //日期选择器
        const releaseDate = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const treeSelect = ref();
        // const trees = ref();
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        onMounted(() => {
            department();
        });
        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = ref();

        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建应急预案管理') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        emergencyPlanApi()
                            .addEmergencyPlan(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;
                        emergencyPlanApi()
                            .editEmergencyTeam(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 = {
                    name: '', // 预案名称
                    type: '', //预案类型
                    associatedDanger: '', // 危险源关联
                    level: '', // 预案级别
                    authorUid: '', // 编写人
                    authorDeptId: '', // 编写部门
                    releaseDate: '', // 发布实施日期
                    fileList: [
                        {
                            fileUrl: 'url',
                            fileName: 'name',
                        },
                    ],
                    emergencyTeam: '', //应急队伍
                    areaList: [], //区域列表
                    teamList: [],
                    deptList: [],
                    abolishStatus: false,
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        // 应急队伍弹窗
        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.authorUid = e.uid;
        };
        const typeChang = () => {
            console.log('tag', ruleForm);
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            releaseDate,
            treeSelect,
            // trees,
            propse,
            department,
            daiInpt,
            Shows,
            submitForm,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            disabled,
            emit,
            isShowDialog,
            ruleFormRef,
            ruleForm,
            resetForm,
            onUser,
            typeChang,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select {
    width: 100%;
}
</style>

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

对比新文件
@@ -0,0 +1,405 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false">
            <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="name">
                            <el-input v-model="ruleForm.name" placeholder="请填写队伍名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="适用部门" prop="responsibleDepartment">
                            <el-tree-select
                                v-model="ruleForm.treeSelect"
                                :data="data"
                                multiple
                                :render-after-expand="true"
                                :props="propse"
                                show-checkbox
                                clearable
                                check-strictly
                            />
                            <el-divider />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预案类型" prop="type">
                            <el-select v-model="ruleForm.type" 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="associatedDanger">
                            <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择">
                                <el-option label="是" :value="false"></el-option>
                                <el-option label="否" :value="true"></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="level">
                            <el-select v-model="ruleForm.level" class="w100" placeholder="请选择">
                                <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="authorId">
                            <el-input v-model="ruleForm.authorUid" 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="authorDeptId">
                            <el-tree-select
                                v-model="ruleForm.authorDeptId"
                                check-strictly
                                :data="data"
                                class="w100"
                                :props="propse"
                                clearable
                                :render-after-expand="false"
                                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="releaseDate">
                            <el-date-picker
                                v-model="ruleForm.releaseDate"
                                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="emergencyTeam">
                            <el-input v-model="ruleForm.emergencyTeam" 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="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="相关附件">
                            <el-upload
                                v-model:file-list="fileList"
                                class="upload-demo"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :on-change="handleChange"
                            >
                                <el-button type="primary">点击上传</el-button>
                                <template #tip>
                                    <div class="el-upload__tip">添加相关附件</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
                    <!--            <el-form-item label="区域名称" prop="areaName">-->
                    <!--              <el-input-->
                    <!--                  v-model="ruleForm.areaName"-->
                    <!--                  placeholder="请选择"-->
                    <!--                  class="input-with-select"-->
                    <!--              >-->
                    <!--                <template #append>-->
                    <!--                  <el-button :icon="Search" @click="regionsDialog"/>-->
                    <!--                </template>-->
                    <!--              </el-input>-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批人" prop="authorId">
                            <el-input v-model="ruleForm.authorUid" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </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>
                </span>
            </template>
        </el-dialog>
        <CheckTemplate ref="Shows" />
        <DailogSearchUser ref="userRef" @SearchUser="onUser" />
        <RegionsDialog ref="openRef" />
    </div>
</template>

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

import type { UploadUserFile, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import CheckTemplate from '/@/components/checkTemplate/index.vue';
import RegionsDialog from '/@/components/regionsDialog/index.vue';
import { emergencyPlanApi } from '/@/api/emergencyPlan';
import { goalManagementApi } from '/@/api/goalManagement';

export default defineComponent({
    name: 'openAdd',
    components: {
        CheckTemplate,
        DailogSearchUser,
        RegionsDialog,
    },
    setup(prop, { emit }) {
        const isShowDialog = ref(false);
        const ruleFormRef = ref<FormInstance>();
        const ruleForm = ref({
            name: '', // 预案名称
            type: '', //预案类型
            associatedDanger: '', // 危险源关联
            level: '', // 预案级别
            authorUid: '', // 编写人
            authorDeptId: '', // 编写部门
            releaseDate: '', // 发布实施日期
            fileList: [
                {
                    fileUrl: 'url',
                    fileName: 'name',
                },
            ],
            emergencyTeam: '', //应急队伍
            areaList: [], //区域列表
            teamList: [],
            deptList: [],
            abolishStatus: false,
        });
        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 == '修改应急预案管理') {
                emergencyPlanApi()
                    .seeEmergencyTeam(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        //日期选择器
        const releaseDate = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const treeSelect = ref();
        // const trees = ref();
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        onMounted(() => {
            department();
        });
        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = ref();

        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建应急预案管理') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        emergencyPlanApi()
                            .addEmergencyPlan(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;
                        emergencyPlanApi()
                            .editEmergencyTeam(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 = {
                    name: '', // 预案名称
                    type: '', //预案类型
                    associatedDanger: '', // 危险源关联
                    level: '', // 预案级别
                    authorUid: '', // 编写人
                    authorDeptId: '', // 编写部门
                    releaseDate: '', // 发布实施日期
                    fileList: [
                        {
                            fileUrl: 'url',
                            fileName: 'name',
                        },
                    ],
                    emergencyTeam: '', //应急队伍
                    areaList: [], //区域列表
                    teamList: [],
                    deptList: [],
                    abolishStatus: false,
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        // 应急队伍弹窗
        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.authorUid = e.uid;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            releaseDate,
            treeSelect,
            // trees,
            propse,
            department,
            daiInpt,
            Shows,
            submitForm,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            disabled,
            emit,
            isShowDialog,
            ruleFormRef,
            ruleForm,
            resetForm,
            onUser,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select {
    width: 100%;
}
</style>

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

@@ -1,429 +1,399 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="40%"
        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="name">
              <el-input v-model="ruleForm.name" placeholder="请填写队伍名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="适用部门" prop="responsibleDepartment">
              <el-tree-select
              v-model="ruleForm.treeSelect"
              :data="data"
              multiple
              :render-after-expand="true"
              :props="propse"
              show-checkbox
              clearable
              check-strictly
              />
              <el-divider />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="预案类型" prop="type">
              <el-select v-model="ruleForm.type" 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="associatedDanger">
              <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择">
                <el-option label="是" :value="false"></el-option>
                <el-option label="否" :value="true"></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="level">
              <el-select v-model="ruleForm.level" class="w100" placeholder="请选择">
                <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="authorId" >
              <el-input
                  v-model="ruleForm.authorUid"
                  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="authorDeptId">
              <el-tree-select
                  v-model="ruleForm.authorDeptId"
                  check-strictly
                  :data="data"
                  class="w100"
                  :props="propse"
                  clearable
                  :render-after-expand="false"
                  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="releaseDate">
              <el-date-picker
                  v-model="ruleForm.releaseDate"
                  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="emergencyTeam">
              <el-input
                  v-model="ruleForm.emergencyTeam"
                  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="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="相关附件">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
              >
                <el-button type="primary"
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
<!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--            <el-form-item label="区域名称" prop="areaName">-->
<!--              <el-input-->
<!--                  v-model="ruleForm.areaName"-->
<!--                  placeholder="请选择"-->
<!--                  class="input-with-select"-->
<!--              >-->
<!--                <template #append>-->
<!--                  <el-button :icon="Search" @click="regionsDialog"/>-->
<!--                </template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
      </el-form>
      <template #footer>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false">
            <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="name">
                            <el-input v-model="ruleForm.name" placeholder="请填写队伍名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="适用部门" prop="responsibleDepartment">
                            <el-tree-select
                                v-model="ruleForm.treeSelect"
                                :data="data"
                                multiple
                                :render-after-expand="true"
                                :props="propse"
                                show-checkbox
                                clearable
                                check-strictly
                            />
                            <el-divider />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预案类型" prop="type">
                            <el-select v-model="ruleForm.type" 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="associatedDanger">
                            <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择">
                                <el-option label="是" :value="false"></el-option>
                                <el-option label="否" :value="true"></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="level">
                            <el-select v-model="ruleForm.level" class="w100" placeholder="请选择">
                                <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="authorId">
                            <el-input v-model="ruleForm.authorName" 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="authorDeptId">
                            <el-tree-select
                                v-model="ruleForm.authorDeptId"
                                check-strictly
                                :data="data"
                                class="w100"
                                :props="propse"
                                clearable
                                :render-after-expand="false"
                                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="releaseDate">
                            <el-date-picker
                                v-model="ruleForm.releaseDate"
                                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="emergencyTeam">
                            <el-input v-model="ruleForm.emergencyTeam" 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="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="相关附件">
                            <el-upload
                                v-model:file-list="fileList"
                                class="upload-demo"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                :on-change="handleChange"
                            >
                                <el-button type="primary">点击上传</el-button>
                                <template #tip>
                                    <div class="el-upload__tip">添加相关附件</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
                    <!--            <el-form-item label="区域名称" prop="areaName">-->
                    <!--              <el-input-->
                    <!--                  v-model="ruleForm.areaName"-->
                    <!--                  placeholder="请选择"-->
                    <!--                  class="input-with-select"-->
                    <!--              >-->
                    <!--                <template #append>-->
                    <!--                  <el-button :icon="Search" @click="regionsDialog"/>-->
                    <!--                </template>-->
                    <!--              </el-input>-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="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>
    <CheckTemplate ref="Shows"/>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
    <RegionsDialog ref="openRef"/>
  </div>
            </template>
        </el-dialog>
        <CheckTemplate ref="Shows" />
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser" />
        <RegionsDialog ref="openRef" />
    </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  onMounted,
} from 'vue';
import { ref, defineComponent, onMounted } 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 DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import CheckTemplate from '/@/components/checkTemplate/index.vue'
import RegionsDialog from '/@/components/regionsDialog/index.vue'
import {emergencyPlanApi} from "/@/api/emergencyPlan";
import {goalManagementApi} from "/@/api/goalManagement";
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue';
import CheckTemplate from '/@/components/checkTemplate/index.vue';
import RegionsDialog from '/@/components/regionsDialog/index.vue';
import { emergencyPlanApi } from '/@/api/emergencyPlan';
import { goalManagementApi } from '/@/api/goalManagement';

export default defineComponent({
  name: 'openAdd',
  components: {
    CheckTemplate,
    DailogSearchUser,
    RegionsDialog,
  },
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
    const ruleFormRef = ref<FormInstance>();
    const ruleForm = ref({
      name: '', // 预案名称
      type: '', //预案类型
      associatedDanger: '', // 危险源关联
      level: '', // 预案级别
      authorUid: '', // 编写人
      authorDeptId: '', // 编写部门
      releaseDate: '', // 发布实施日期
      fileList: [
        {
          fileUrl: 'url',
          fileName: 'name',
        }
      ],
      emergencyTeam: '', //应急队伍
      areaList: [],  //区域列表
      teamList: [],
      deptList: [],
      abolishStatus: false,
    })
    const titles = ref();
    const disabled = ref();
    name: 'openAdd',
    components: {
        CheckTemplate,
        DailogSearchUserManger,
        RegionsDialog,
    },
    setup(prop, { emit }) {
        const isShowDialog = ref(false);
        const ruleFormRef = ref<FormInstance>();
        const ruleForm = ref({
            name: '', // 预案名称
            type: '', //预案类型
            associatedDanger: '', // 危险源关联
            level: '', // 预案级别
            authorUid: '', // 编写人
            authorName: '',
            authorDeptId: '', // 编写部门
            releaseDate: '', // 发布实施日期
            fileList: [
                {
                    fileUrl: 'url',
                    fileName: 'name',
                },
            ],
            emergencyTeam: '', //应急队伍
            areaList: [], //区域列表
            teamList: [],
            deptList: [],
            abolishStatus: false,
        });
        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 == '修改应急预案管理') {
        emergencyPlanApi()
            .seeEmergencyTeam(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const releaseDate = ref('')
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])
    //部门树
    const department = () => {
      goalManagementApi()
          .getTreedepartment()
          .then((res) => {
            if (res.data.code == 200) {
              data.value = res.data.data;
            } else {
              ElMessage.error(res.data.msg);
            }
          });
    };
    const treeSelect = ref()
    // const trees = ref();
    const propse = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    };
    onMounted(() => {
      department();
    });
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '查看应急预案管理' || title == '修改应急预案管理') {
                emergencyPlanApi()
                    .seeEmergencyTeam(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        //日期选择器
        const releaseDate = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const treeSelect = ref();
        // const trees = ref();
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        onMounted(() => {
            department();
        });
        //定义树形下拉框
        const responsibleDepartment = ref();
        const data = ref();

    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急预案管理') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyPlanApi()
              .addEmergencyPlan(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;
            emergencyPlanApi()
                .editEmergencyTeam(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 = {
          name: '', // 预案名称
          type: '', //预案类型
          associatedDanger: '', // 危险源关联
          level: '', // 预案级别
          authorUid: '', // 编写人
          authorDeptId: '', // 编写部门
          releaseDate: '', // 发布实施日期
          fileList: [
            {
              fileUrl: 'url',
              fileName: 'name',
            }
          ],
          emergencyTeam: '', //应急队伍
          areaList: [],  //区域列表
          teamList: [],
          deptList: [],
          abolishStatus: false,
        };
      }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急队伍弹窗
    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.authorUid=e.uid
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      fileList,
      responsibleDepartment,
      data,
      Search,
      releaseDate,
      treeSelect,
      // trees,
      propse,
      department,
      daiInpt,
      Shows,
      submitForm,
      openUser,
      userRef,
      regionsDialog,
      openRef,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
      isShowDialog,
      ruleFormRef,
      ruleForm,
      resetForm,
      onUser,
    };
  },
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建应急预案管理') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        emergencyPlanApi()
                            .addEmergencyPlan(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;
                        emergencyPlanApi()
                            .editEmergencyTeam(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 = {
                    name: '', // 预案名称
                    type: '', //预案类型
                    associatedDanger: '', // 危险源关联
                    level: '', // 预案级别
                    authorUid: '', // 编写人
                    authorName: '',
                    authorDeptId: '', // 编写部门
                    releaseDate: '', // 发布实施日期
                    fileList: [
                        {
                            fileUrl: 'url',
                            fileName: 'name',
                        },
                    ],
                    emergencyTeam: '', //应急队伍
                    areaList: [], //区域列表
                    teamList: [],
                    deptList: [],
                    abolishStatus: false,
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        // 应急队伍弹窗
        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.authorUid = e[0].uid;
            ruleForm.value.authorName = e[0].realName;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            releaseDate,
            treeSelect,
            // trees,
            propse,
            department,
            daiInpt,
            Shows,
            submitForm,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            disabled,
            emit,
            isShowDialog,
            ruleFormRef,
            ruleForm,
            resetForm,
            onUser,
        };
    },
});
</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>

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

文件已删除

 src/views/contingencyManagement/panManagement/index.vue

@@ -1,585 +1,598 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input size="default" v-model="listQuery.searchParams.name" placeholder="预案名称" style="max-width: 215px;"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="default" v-model="listQuery.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;">
              <el-option label="综合应急预案" value="admin"></el-option>
              <el-option label="现场处置方案" value="common"></el-option>
              <el-option label="专项应急预案" value="common"></el-option>
              <el-option label="其他预案" value="common"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="onSubmit">
              查询
            </el-button>
            <el-button size="default" class="ml10" @click="submitReset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain :disabled="warning">
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
          </el-button>
          <el-button size="default" type="primary"  @click="onabolishLibrary">
            废止库
          </el-button>
        </div>
        <div class="button_Right">
<!--          <el-button size="default" @click="upButton">-->
<!--            <el-icon>-->
<!--              <Upload />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button size="default">-->
<!--            <el-icon>-->
<!--              <Download />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button size="default">-->
<!--            <el-icon>-->
<!--              <Refresh />-->
<!--            </el-icon>-->
<!--          </el-button>-->
        </div>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="level" label="预案级别" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="releaseDate" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="260" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="isDialogFormVisible(scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <VideoPlay />
              </el-icon>启动
            </el-button>
            <el-button size="small" text type="primary" @click="abolish(scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <VideoPause />
              </el-icon>废止
            </el-button>
            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
<!--            <el-button size="small" text type="primary" @click="jumpFrom(0)">-->
<!--              <el-icon style="margin-right: 5px;">-->
<!--                <EditPen />-->
<!--              </el-icon>修改-->
<!--            </el-button>-->
<!--            <el-button  size="small" text type="primary" @click="abolish(0)">-->
<!--             发起审批-->
<!--            </el-button>-->
            <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
              <el-icon>
                <Delete />
              </el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            class="mt15"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="onHandleSizeChange"
            @current-change="onHandleCurrentChange"
        />
      </div>
    </el-card>
    <OpenAdd ref="addRef" @myAdd="onMyAdd"/>
    <AbolishLibrary ref="abolishRef"/>
<!--    <StartUp ref="startRef" @myAdd="startUp"/>-->
    <el-dialog v-model="dialogFormVisible" width="30%" title="启动" :fullscreen="full">
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form  :model="form" ref="ruleFormRef" label-width="80px">
        <el-form-item label="备注" >
          <el-input v-model="form.remark" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onDetermine"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-input size="default" v-model="listQuery.searchParams.name" placeholder="预案名称" style="max-width: 215px"> </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select size="default" v-model="listQuery.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px">
                            <el-option label="综合应急预案" value="admin"></el-option>
                            <el-option label="现场处置方案" value="common"></el-option>
                            <el-option label="专项应急预案" value="common"></el-option>
                            <el-option label="其他预案" value="common"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="default" type="primary" class="ml10" @click="onSubmit"> 查询 </el-button>
                        <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="button_Line">
                <div class="button_Left">
                    <el-button size="default" type="primary" @click="onOpenAdd">
                        <el-icon>
                            <Plus /> </el-icon
                        >新建
                    </el-button>
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon>
                            <Edit /> </el-icon
                        >修改
                    </el-button>
                    <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
                        <el-icon>
                            <Delete /> </el-icon
                        >删除
                    </el-button>
                    <el-button size="default" type="primary" @click="onabolishLibrary"> 废止库 </el-button>
                </div>
                <div class="button_Right">
                    <!--          <el-button size="default" @click="upButton">-->
                    <!--            <el-icon>-->
                    <!--              <Upload />-->
                    <!--            </el-icon>-->
                    <!--          </el-button>-->
                    <!--          <el-button size="default">-->
                    <!--            <el-icon>-->
                    <!--              <Download />-->
                    <!--            </el-icon>-->
                    <!--          </el-button>-->
                    <!--          <el-button size="default">-->
                    <!--            <el-icon>-->
                    <!--              <Refresh />-->
                    <!--            </el-icon>-->
                    <!--          </el-button>-->
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="level" label="预案级别" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="releaseDate" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
                <el-table-column label="操作" width="260" align="center" fixed="right">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="isDialogFormVisible(scope.row.id)">
                            <el-icon style="margin-right: 5px">
                                <VideoPlay /> </el-icon
                            >启动
                        </el-button>
                        <el-button size="small" text type="primary" @click="abolish(scope.row.id)">
                            <el-icon style="margin-right: 5px">
                                <VideoPause /> </el-icon
                            >废止
                        </el-button>
                        <el-button size="small" text type="primary" @click="onEdit('修改', scope.row.id)">
                            <el-icon style="margin-right: 5px">
                                <EditPen /> </el-icon
                            >修改
                        </el-button>
                        <el-button
                            size="small"
                            text
                            type="primary"
                            v-if="scope.row.approveStatus === 0 || scope.row.approveStatus === null"
                            @click="initiateApproval(scope.row.id)"
                        >
                            发起审批
                        </el-button>
                        <el-button
                            size="small"
                            text
                            type="primary"
                            v-if="scope.row.approveStatus === 1 || scope.row.checkApprove == true"
                            @click="onApproval(scope.row.id)"
                        >
                            审批
                        </el-button>
                        <el-button
                            size="small"
                            text
                            type="primary"
                            v-if="scope.row.approveStatus === 1 || scope.row.checkApprove == false"
                            @click="initiateApproval(scope.row.id)"
                        >
                            查看审批
                        </el-button>
                        <el-button size="small" text type="primary" v-if="scope.row.approveStatus === 2" @click="initiateApproval(scope.row.id)">
                            查看审批流程
                        </el-button>
                        <!--            <el-button size="small" text type="primary" @click="jumpFrom(0)">-->
                        <!--              <el-icon style="margin-right: 5px;">-->
                        <!--                <EditPen />-->
                        <!--              </el-icon>修改-->
                        <!--            </el-button>-->
                        <!--            <el-button  size="small" text type="primary" @click="abolish(0)">-->
                        <!--             发起审批-->
                        <!--            </el-button>-->
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
                            <el-icon>
                                <Delete /> </el-icon
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-if="tableData.length == 0 ? false : true"
                    v-model:currentPage="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30]"
                    :pager-count="5"
                    class="mt15"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                />
            </div>
        </el-card>
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
        <AbolishLibrary ref="abolishRef" />
        <InitiateApproval ref="initiateApprovalRef" />
        <Approval ref="approvalRef" />
        <!--    <StartUp ref="startRef" @myAdd="startUp"/>-->
        <el-dialog v-model="dialogFormVisible" width="30%" title="启动" :fullscreen="full">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form :model="form" ref="ruleFormRef" label-width="80px">
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="onDetermine">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import {
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
} from 'element-plus';
import { reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// import {useRouter} from "vue-router"
import type {
  // FormInstance,
} from 'element-plus'
import { Plus,
  Edit,
  Delete,
  Upload,
  Download,
  Refresh,
  VideoPause,
  VideoPlay,
  EditPen,
  FullScreen
} from '@element-plus/icons-vue'
import type {} from // FormInstance,
'element-plus';
import { Plus, Edit, Delete, Upload, Download, Refresh, VideoPause, VideoPlay, EditPen, FullScreen } from '@element-plus/icons-vue';
import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue';
// import StartUp from '/@/views/contingencyManagement/panManagement/component/startUp.vue';
import AbolishLibrary from '/@/views/contingencyManagement/panManagement/component/abolishLibrary.vue';
import InitiateApproval from '/@/views/contingencyManagement/panManagement/component/initiateApproval.vue';
import Approval from '/@/views/contingencyManagement/panManagement/component/approval.vue';
// import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import {emergencyPlanApi} from "/@/api/emergencyPlan";
import {emergencyPlanLogApi} from "/@/api/emergencyPlanLog";
import { emergencyPlanApi } from '/@/api/emergencyPlan';
import { emergencyPlanLogApi } from '/@/api/emergencyPlanLog';

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    // StartUp,
    AbolishLibrary,
    EditPen,
    Plus,
    Edit,
    Delete,
    Upload,
    Download,
    Refresh,
    VideoPause,
    VideoPlay,
    // UpData,
    emergencyPlanApi
  },
  setup(prop, {emit}) {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        name: "",
        type: "",
        abolishStatus: false,
      }
    })
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const onSubmit = async () => {
      let res = await emergencyPlanApi().getEmergencyPlanList(listQuery)
      if(res.data.code === '200'){
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      }else{
        ElMessage({
          showClose: true,
          type:'error',
          message:res.data.msg
        })
      }
    }
    // 重置
    const submitReset = () => {
      listQuery.searchParams.name = '';
      listQuery.searchParams.type = '';
      onSubmit();
    };
    const warning = ref(true);
    const danger = ref(true);
    name: 'systemUser',
    components: {
        OpenAdd,
        // StartUp,
        InitiateApproval,
        AbolishLibrary,
        Approval,
        EditPen,
        Plus,
        Edit,
        Delete,
        Upload,
        Download,
        Refresh,
        VideoPause,
        VideoPlay,
        // UpData,
        emergencyPlanApi,
    },
    setup(prop, { emit }) {
        // 列表参数
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                name: '',
                type: '',
                abolishStatus: false,
            },
        });
        // 定义表格数据
        const tableData = ref([]);
        // 列表数据请求
        const onSubmit = async () => {
            let res = await emergencyPlanApi().getEmergencyPlanList(listQuery);
            if (res.data.code === '200') {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage({
                    showClose: true,
                    type: 'error',
                    message: res.data.msg,
                });
            }
        };
        // 重置
        const submitReset = () => {
            listQuery.searchParams.name = '';
            listQuery.searchParams.type = '';
            onSubmit();
        };
        const warning = ref(true);
        const danger = ref(true);

        // 上传
        // const upShow=ref()
        // const upButton=()=>{
        //   upShow.value.openDialog()
        // }
        // 启动弹窗
        const isDialogFormVisible = (data: any) => {
            dialogFormVisible.value = true;
            form.value.planId = data;
        };
        const dialogFormVisible = ref(false);
        const form = ref({
            remark: '',
        });
        const onDetermine = () => {
            dialogFormVisible.value = false;
            emergencyPlanLogApi()
                .addEmergencyPlanLog(form.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);
                    }
                });
            form.value = {
                remark: '',
            };
        };
        // 打开新增用户弹窗
        const addRef = ref();
        const onOpenAdd = () => {
            addRef.value.openDialog('新建应急预案管理', false);
        };
        // 新增后刷新
        const onMyAdd = (e: boolean) => {
            if (e) {
                onSubmit();
            } else {
                onSubmit();
            }
        };
        // 打开修改应急预案管理弹窗
        const onEdit = (val: string, row: object) => {
            if (val == '详情') {
                addRef.value.openDialog('查看应急预案管理', row, true);
            } else {
                addRef.value.openDialog('修改应急预案管理', row, false);
            }
        };

    // 上传
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }
    // 启动弹窗
    const isDialogFormVisible = (data: any) => {
      dialogFormVisible.value=true
      form.value.planId=data
    }
    const dialogFormVisible = ref(false)
    const form = ref ({
      remark: '',
    })
    const onDetermine = () => {
      dialogFormVisible.value=false
      emergencyPlanLogApi()
        .addEmergencyPlanLog(form.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);
          }
        });
        form.value = {
          remark: '',
        }
    }
    // 打开新增用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急预案管理',false);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        onSubmit();
      } else {
        onSubmit();
      }
    };
    // 打开修改应急预案管理弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急预案管理',row,true);
      } else {
        addRef.value.openDialog('修改应急预案管理',row,false);
      }
    };
        //打开废止库弹窗
        const abolishRef = ref();
        const onabolishLibrary = () => {
            abolishRef.value.openDialog();
        };
        // 废止
        const abolish = (data: any) => {
            ElMessageBox.confirm('确定要废止所选项吗?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    emergencyPlanApi()
                        .EmergencyTeam(data)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                onSubmit();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                onSubmit();
                            }
                        });
                })
                .catch(() => {});
        };

    //打开废止库弹窗
    const abolishRef = ref();
    const onabolishLibrary = () => {
      abolishRef.value.openDialog();
    };
    // 废止
    const abolish = (data: any) => {
      ElMessageBox.confirm('确定要废止所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        emergencyPlanApi()
            .EmergencyTeam(data)
            .then((res) => {
              if (res.data.code == 200) {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'success',
                });
                onSubmit();
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
                onSubmit();
              }
            });
      }).catch(() => {});
    };
        // 删除用户
        const onRowDel = (id: number) => {
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    emergencyPlanApi()
                        .deleteEmergencyTeam(arr)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                onSubmit();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                onSubmit();
                            }
                        });
                })
                .catch(() => {});
        };

    // 删除用户
    const onRowDel = (id: number) => {
      let arr = [];
      arr.push(id)
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        emergencyPlanApi()
              .deleteEmergencyTeam(arr)
              .then((res) => {
                if (res.data.code == 200) {
                  ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'success',
                  });
                  onSubmit();
                } else {
                  ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                  });
                  onSubmit();
                }
              });
        }).catch(() => {});
    };
        const deleteAll = 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);
            }
            deleteAll.value = arr;
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };
        // 多选删除
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    emergencyPlanApi()
                        .deleteEmergencyTeam(deleteAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                onSubmit();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                onSubmit();
                            }
                        });
                })
                .catch(() => {});
        };
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            listQuery.pageSize = val;
        };
        // 分页未改变
        const onHandleCurrentChange = (val: number) => {
            listQuery.pageIndex = val;
        };

    const deleteAll = 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);
      }
      deleteAll.value = arr;
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
// 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            emergencyPlanApi()
              .deleteEmergencyTeam(deleteAll.value)
              .then((res) => {
                if (res.data.code == 200) {
                  ElMessage({
                    message: res.data.msg,
                    type: 'success',
                  });
                  onSubmit();
                } else {
                  ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                  });
                  onSubmit();
                }
              });
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      listQuery.pageSize = val;
    };
    // 分页未改变
    const onHandleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
    };

    // const router=useRouter()
    // 修改跳转
    // const jumpFrom=(data:string)=>{
    //   router.push({
    //     path:"/processForm",
    //     query:{
    //       type:data
    //     }
    //   })
    // }
    // 发起审批跳转
    // const abolish=(data:string)=>{
    //   router.push({
    //     path:"/abolishDialog",
    //     query:{
    //       type:data
    //     }
    //   })
    // }
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    // 页面加载时
    onMounted(() => {
      onSubmit();
    });
    return {
      // upButton,
      // upShow,
      tableData,
      onSubmit,
      onOpenAdd,  //新增
      addRef,
      onabolishLibrary,
      abolishRef,
      abolish,
      onRowDel,
      onHandleSizeChange,
      onHandleCurrentChange,
      // jumpFrom,
      // router,
      toggleFullscreen,
      FullScreen,
      full,
      listQuery,
      pageIndex,
      pageSize,
      total,
      submitReset,
      onMounted,
      deleteAll,
      warning,
      danger,
      handleSelectionChange,
      onMyAdd,
      onDeleteAll,
      // dialogTableVisible,
      dialogFormVisible,
      isDialogFormVisible,
      form,
      emit,
      onDetermine,
      onEdit,
    };
  },
        // const router=useRouter()
        // 修改跳转
        // const jumpFrom=(data:string)=>{
        //   router.push({
        //     path:"/processForm",
        //     query:{
        //       type:data
        //     }
        //   })
        // }
        // 发起审批跳转
        // const abolish=(data:string)=>{
        //   router.push({
        //     path:"/abolishDialog",
        //     query:{
        //       type:data
        //     }
        //   })
        // }
        // 发起审批弹窗
        const initiateApprovalRef = ref();
        const initiateApproval = () => {
            initiateApprovalRef.value.openDialog();
        };
        // 审批
        const approvalRef = ref();
        const onApproval = () => {
            approvalRef.value.openDialog();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        // 页面加载时
        onMounted(() => {
            onSubmit();
        });
        return {
            tableData,
            onSubmit,
            onOpenAdd, //新增
            addRef,
            onabolishLibrary,
            abolishRef,
            abolish,
            onRowDel,
            onHandleSizeChange,
            onHandleCurrentChange,
            toggleFullscreen,
            FullScreen,
            full,
            listQuery,
            pageIndex,
            pageSize,
            total,
            submitReset,
            onMounted,
            deleteAll,
            warning,
            danger,
            handleSelectionChange,
            onMyAdd,
            onDeleteAll,
            dialogFormVisible,
            isDialogFormVisible,
            form,
            emit,
            onDetermine,
            onEdit,
            initiateApproval,
            initiateApprovalRef,
            onApproval,
            approvalRef,
        };
    },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
.table_Box {
    padding: 20px;
    background-color: #fff;
}
.tableForm{
  margin-top: 10px;
.tableForm {
    margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
.button_Line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}
.el-form .el-form-item {
  margin-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.el-button--text {
  margin-right: 15px;
    margin-right: 15px;
}
.el-select {
  width: 300px;
    width: 300px;
}
.el-input {
  width: 300px;
    width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
    margin-right: 10px;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
::v-deep .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #e8e8e8;
    margin-right: 0;
    border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
    background-color: #f6f7fa;
    font-weight: 400;
    color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
.el-table .sort-caret.ascending {
    border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
.pages {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
    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>