应急预案管理数据对接

13937891274

2022-08-06 4d1b167c820c0fd706ac4dea34d4f0f91abb7eb2

应急预案管理数据对接

 src/api/emergencyPlan/index.ts

@@ -55,5 +55,29 @@
                method: 'get',
            });
        },
        // 应急预案管理审批新增
        approvalEmergencyPlan: (params: object) => {
            return request({
                url: `/emergencyWorkApprove/add`,
                method: 'post',
                data: params
            });
        },
        // 应急预案管理审批修改
        editApprovalEmergencyPlan: (params: object) => {
            return request({
                url: `/emergencyWorkApprove/update`,
                method: 'post',
                data: params
            });
        },
        // 应急预案管理审批流程
        approvalProcessEmergencyPlan: (params: number) => {
            return request({
                url: `/emergencyWorkApprove/info/${params}`,
                method: 'get',
                data: params
            });
        },
    }
}

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

@@ -5,134 +5,35 @@
            <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 label="审批名称" prop="name">
                            <el-input v-model="ruleForm.workName" 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="title">
              <el-input v-model="ruleForm.title" 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="authorUid">
                            <el-input v-model="ruleForm.authorName" placeholder="请选择" class="input-with-select">
                        <el-form-item label="审批人" prop="approvePersonId">
                            <el-input v-model="ruleForm.approvePersonName" 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="authorUid">
                            <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="不通过" />
                                <el-radio label="通过" />
                            <el-radio-group v-model="ruleForm.approveResult">
                <el-radio :label="false">不通过</el-radio>
                <el-radio :label="true">通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="审批意见" prop="authorUid">
                            <el-input v-model="ruleForm.name" type="textarea" placeholder="请填写审批意见"></el-input>
                        <el-form-item label="审批意见" prop="approveMemo">
                            <el-input v-model="ruleForm.approveMemo" type="textarea" placeholder="请填写审批意见"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
@@ -143,9 +44,19 @@
                            </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="workName">
              <el-input v-model="ruleForm.workName" placeholder="请填写队伍名称"></el-input>
            </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="title">
              <el-input v-model="ruleForm.title" placeholder="请填写审批名称"></el-input>
            </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="authorUid">
                            <el-input v-model="ruleForm.authorName" placeholder="请选择" class="input-with-select">
                            <el-input v-model="ruleForm.approvePersonName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
@@ -161,54 +72,38 @@
                </span>
            </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 } from 'vue';

import type { UploadUserFile, FormInstance } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
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,
    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,
      approveId: '',
      workName: '', // 审批名称
      title: '', //审批标题
      approvePersonId: '', //
      approvePersonName: '', // 审批人
      approveStatus: 2,
      relateType: 1,
      approveResult: false,
      approveMemo: '',
      relateId: '',
        });
        const titles = ref();
        const disabled = ref();
@@ -218,143 +113,38 @@
            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;
                        }
                    });
            }
      emergencyPlanApi()
          .approvalProcessEmergencyPlan(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 submitForm = async () => {
      isShowDialog.value = false;
      emergencyPlanApi()
          .editApprovalEmergencyPlan(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);
            }
          });
        };
        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: '', // 编写人
          authorName: '',
                    authorDeptId: '', // 编写部门
                    releaseDate: '', // 发布实施日期
                    fileList: [
                        {
                            fileUrl: 'url',
                            fileName: 'name',
                        },
                    ],
                    emergencyTeam: '', //应急队伍
                    areaList: [], //区域列表
                    teamList: [],
                    deptList: [],
                    abolishStatus: false,
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
        const resetForm = () => {
            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();
@@ -363,8 +153,8 @@
        };
        //回显
        const onUser = (e: any) => {
      ruleForm.value.authorUid = e[0].uid;
      ruleForm.value.authorName = e[0].realName;
      ruleForm.value.approvePersonId = e[0].uid;
      ruleForm.value.approvePersonName = e[0].realName;
        };
        const typeChang = () => {
            console.log('tag', ruleForm);
@@ -380,22 +170,10 @@
        };
        return {
            openDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            releaseDate,
            treeSelect,
            // trees,
            propse,
            department,
            daiInpt,
            Shows,
            submitForm,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,

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

对比新文件
@@ -0,0 +1,220 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog title="查看审批流程" v-model="isShowDialog" width="60%" draggable :fullscreen="full">
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-row :gutter="35">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
          <el-table
              :data="tableData"
              style="width: 100%; margin-top: 15px"
              ref="multipleTableRef"
              :model="formInline"
              :header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
          >
            <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="authorUid" 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="200" align="center">
              <template #default="scope">
                <el-button size="small" text type="primary" @click="onReduction(scope.row.id)">还原</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <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>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

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

import type { FormInstance } from 'element-plus';
import {
  // ElMessageBox,
  ElMessage,
} from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import { emergencyPlanApi } from '../../../../api/emergencyPlan';
export default defineComponent({
  name: 'abolishLibrary',
  components: {},
  setup(prop, { emit }) {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        abolishStatus: true,
      },
    });
    // 定义表格数据
    const tableData = ref([]);

    // 列表数据请求
    const openDialog = async (id: number) => {
      isShowDialog.value = true;
      let res = await emergencyPlanApi().approvalProcessEmergencyPlan(id);
      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 isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>();
    // 打开弹窗
    // const openDialog = () => {
    //   isShowDialog.value = true;
    // };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    const onReduction = async (id) => {
      isShowDialog.value = false;
      // emergencyPlanApi()
      //     .approvalProcessEmergencyPlan(id)
      //     .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);
      //         openDialog();
      //       }
      //     })
      //     .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      onCancel,
      tableData,
      Search,
      ruleFormRef,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      toggleFullscreen,
      FullScreen,
      full,
      listQuery,
      // onSubmit,
      total,
      emit,
      onReduction,
    };
  },
});
</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;
}
//分页
.pages {
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

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

@@ -1,130 +1,22 @@
<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-dialog title="发起审批" 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-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预案名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请填写队伍名称"></el-input>
                        <el-form-item label="审批名称" prop="workName">
                            <el-input v-model="ruleForm.workName" 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 label="审批标题" prop="title">
                            <el-input v-model="ruleForm.title" 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="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-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">
                        <el-form-item label="审批人" prop="approvePersonId">
                            <el-input v-model="ruleForm.approvePersonName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
@@ -135,205 +27,76 @@
            </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 @click="resetForm" size="default">关闭</el-button>
                    <el-button size="default" type="primary" @click="submitForm">确定</el-button>
                </span>
            </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 } from 'vue';

import type { UploadUserFile, FormInstance } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
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,
    DailogSearchUserManger,
        RegionsDialog,
        DailogSearchUserManger,
    },
    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,
            workName: '', // 审批名称
            title: '', //审批标题
            approvePersonId: '',
            approvePersonName: '',
            approveStatus: 2,
            relateType: 1,
            relateId: '',
        });
        const titles = ref();
        const disabled = ref();

        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
        const openDialog = (title: string, id: number) => {
            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;
                        }
                    });
            }
            ruleForm.value.relateId = id;
            uid.value = id;
        };
        //日期选择器
        const releaseDate = ref('');
        // 上传附件
        const fileList = ref<UploadUserFile[]>([]);
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
        const uid = ref();
        const submitForm = async () => {
            isShowDialog.value = false;

            emergencyPlanApi()
                .approvalEmergencyPlan(ruleForm.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('myAdd', true);
                    } else {
                        ElMessage.error(res.data.msg);
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                        emit('myAdd', true);
                    }
                });
        };
        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: '', // 编写人
          authorName: '',
                    authorDeptId: '', // 编写部门
                    releaseDate: '', // 发布实施日期
                    fileList: [
                        {
                            fileUrl: 'url',
                            fileName: 'name',
                        },
                    ],
                    emergencyTeam: '', //应急队伍
                    areaList: [], //区域列表
                    teamList: [],
                    deptList: [],
                    abolishStatus: false,
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
        const resetForm = () => {
            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();
@@ -342,8 +105,8 @@
        };
        //回显
        const onUser = (e: any) => {
      ruleForm.value.authorUid = e[0].uid;
      ruleForm.value.authorName = e[0].realName;
            ruleForm.value.approvePersonId = e[0].uid;
            ruleForm.value.approvePersonName = e[0].realName;
        };
        //全屏
        const full = ref(false);
@@ -356,33 +119,21 @@
        };
        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,
            uid,
        };
    },
});

 src/views/contingencyManagement/panManagement/index.vue

@@ -93,8 +93,8 @@
                            size="small"
                            text
                            type="primary"
                            v-if="scope.row.approveStatus === 1 || scope.row.checkApprove == true"
                            @click="onApproval(scope.row.id)"
                            v-if="scope.row.approveStatus === 2 && scope.row.checkApprove === true"
                            @click="onApproval('修改',scope.row.id)"
                        >
                            审批
                        </el-button>
@@ -102,12 +102,12 @@
                            size="small"
                            text
                            type="primary"
                            v-if="scope.row.approveStatus === 1 || scope.row.checkApprove == false"
                            @click="initiateApproval(scope.row.id)"
                            v-if="scope.row.approveStatus === 2 && scope.row.checkApprove === false"
                            @click="onApproval('详情',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 size="small" text type="primary" v-if="scope.row.approveStatus === 3" @click="onApprovalProcess(scope.row.id)">
                            查看审批流程
                        </el-button>
                        <!--            <el-button size="small" text type="primary" @click="jumpFrom(0)">-->
@@ -143,9 +143,10 @@
            </div>
        </el-card>
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
        <AbolishLibrary ref="abolishRef" />
        <InitiateApproval ref="initiateApprovalRef" />
        <Approval ref="approvalRef" />
        <AbolishLibrary ref="abolishRef" @myAdd="onMyAdd" />
        <InitiateApproval ref="initiateApprovalRef" @myAdd="onMyAdd" />
        <Approval ref="approvalRef" @myAdd="onMyAdd" />
    <ApprovalProcess ref="processRef" @myAdd="onMyAdd" />
        <!--    <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>
@@ -174,6 +175,7 @@
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 ApprovalProcess from '/@/views/contingencyManagement/panManagement/component/approvalProcess.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';
@@ -197,6 +199,7 @@
        Refresh,
        VideoPause,
        VideoPlay,
    ApprovalProcess,
        // UpData,
        emergencyPlanApi,
    },
@@ -450,14 +453,24 @@
        // }
        // 发起审批弹窗
        const initiateApprovalRef = ref();
        const initiateApproval = () => {
            initiateApprovalRef.value.openDialog();
        const initiateApproval = (row: object) => {
            initiateApprovalRef.value.openDialog('发起审批',row, true);
        };
        // 审批
        const approvalRef = ref();
        const onApproval = () => {
            approvalRef.value.openDialog();
        const onApproval = (val: string,row: object) => {
      if(val=='详情'){
        approvalRef.value.openDialog('查看审批', row, true);
      } else {
        approvalRef.value.openDialog('修改审批', row, false);
      }
        };
    // 审批流程
    const processRef = ref();
    const onApprovalProcess = () => {
      processRef.value.openDialog();
    };

        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
@@ -507,6 +520,8 @@
            initiateApprovalRef,
            onApproval,
            approvalRef,
      onApprovalProcess,
      processRef,
        };
    },
});